on_pull_request.yml

name: PR Checks

on:
  pull_request:
    types: [opened, synchronize, reopened, ready_for_review]

jobs:
  build:
    name: Build system packages and type check
    runs-on: ubuntu-latest
    env:
      NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: nrwl/nx-set-shas@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      - name: Node modules cache
        uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --immutable

      - name: Build packages
        run: yarn build

      - name: Run type checker
        run: yarn type-check

  eslint:
    name: Lint repository
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: nrwl/nx-set-shas@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      - name: Node modules cache
        uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --immutable

      - name: Build packages
        run: yarn build
        env:
          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

      - name: Run eslint
        run: yarn lint

  tests:
    name: Test repository using React 18
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: nrwl/nx-set-shas@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      - name: Node modules cache
        uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --immutable

      - name: Build packages
        run: yarn build
        env:
          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

      - name: Run tests
        run: yarn test

  react17_tests:
    name: Test repository using React 17
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: nrwl/nx-set-shas@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      # Note: Yarn cache has been removed from the following step
      # since we need to change the React version installed
      - name: Install Dependencies
        run: yarn install --immutable

      # Note: Build first before we change the react version installed.
      - name: Build packages
        run: yarn build
        env:
          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

      - name: Install React 17
        run: |
          yarn add @types/react@^17.0.0 react@^17.0.2 react-dom@^17.0.2
          yarn set resolution react@npm:^18.0.0 ^17.0.2
          yarn set resolution @types/react@npm:^18.0.0 ^17.0.31
          yarn set resolution react-dom@npm:^18.0.0 ^17.0.2
          yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4

      - name: Run tests
        run: yarn test

  react16_tests:
    name: Test repository using React 16
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: nrwl/nx-set-shas@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      # Note: Yarn cache has been removed from the following step
      # since we need to change the React version installed
      - name: Install Dependencies
        run: yarn install --immutable

      # Note: Build first before we change the react version installed.
      - name: Build packages
        run: yarn build
        env:
          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

      - name: Install React 16
        run: |
          yarn add @types/react@^16.0.0 react@^16.8.6 react-dom@^16.8.6
          yarn set resolution react@npm:^18.0.0 ^16.8.6
          yarn set resolution @types/react@npm:^18.0.0 ^16.0.0
          yarn set resolution react-dom@npm:^18.0.0 ^16.8.6
          yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4

      - name: Run tests
        run: yarn test

  format:
    name: Code format checks
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: nrwl/nx-set-shas@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      - name: Node modules cache
        uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --immutable

      - name: Run BiomeJS + Prettier format for their respective files
        run: yarn format:ci

  chromatic:
    name: Component Visual regression tests
    runs-on: ubuntu-latest
    if: github.event.pull_request.draft == false
    outputs:
      storybookUrl: ${{ steps.chromaticaction.outputs.storybookUrl }}

    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - uses: nrwl/nx-set-shas@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      - name: Node modules cache
        uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --immutable

      - name: Build packages
        run: yarn build
        env:
          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

      - name: Run Chromatic
        id: chromaticaction
        uses: chromaui/action@v1
        with:
          zip: true
          projectToken: ${{ secrets.CHROMA_APP_CODE }}
          token: ${{ secrets.GITHUB_TOKEN }}
          buildScriptName: "build:storybook"
          autoAcceptChanges: "main"
          exitOnceUploaded: true
          onlyChanged: true
          externals: |
            - 'packages/paste-design-tokens/tokens/**'
            - 'packages/paste-icons/src/**'
            - '.storybook/static/**'
        env:
          STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
          # https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1199236279
          NODE_OPTIONS: --max-old-space-size=6144

  storybook_tests:
    name: Storybook test runner
    runs-on: ubuntu-latest
    timeout-minutes: 20
    needs: chromatic
    strategy:
      matrix:
        shard: [1/4, 2/4, 3/4, 4/4]
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      - name: Node modules cache
        uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --immutable

      - name: Get playwright version
        id: pw-version
        run: echo "version=$(yarn playwright --version)" >> $GITHUB_OUTPUT

      - name: Cache playwright binaries
        uses: actions/cache@v3
        id: playwright-cache
        with:
          path: "~/.cache/ms-playwright"
          key: cache-playwright-${{ runner.os }}-${{ steps.pw-version.outputs.version }}

      - name: Install Playwright
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: npx playwright install --with-deps

      - name: Run Storybook test runner
        run: yarn test-storybook --url ${{ needs.chromatic.outputs.storybookUrl }} --ci --shard=${{ matrix.shard }}

  pr-categorizer:
    name: Categorize the PR using labels
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      - name: Node modules cache
        uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --immutable

      - uses: actions/labeler@v4
        with:
          repo-token: "${{ secrets.GITHUB_TOKEN }}"
          sync-labels: true

  danger:
    name: Danger checks
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3

      - name: Setup Node.js 20.5
        uses: actions/setup-node@v3
        with:
          node-version: 20.5.x

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - name: Load Yarn cache
        uses: actions/cache@v3
        id: yarn_cache_id
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn

      - name: Node modules cache
        uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: |
            node_modules
            */*/node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --immutable

      - name: Run DangerJS
        run: yarn danger ci
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}