continuous-integration.yml

name: Continuous Integration
on: [push, pull_request]

concurrency:
  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
  cancel-in-progress: true

permissions: read-all

env:
  IMAGE_REPO_VISUAL_REGRESSION: ghcr.io/${{ github.repository }}/visual-regression

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: yarn
      - run: yarn install --frozen-lockfile --non-interactive

      - name: Run eslint
        run: yarn lint

  integrity:
    runs-on: ubuntu-latest
    needs: lint
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: yarn
      - run: yarn install --frozen-lockfile --non-interactive

      - name: 'Integrity: Verify workspace integrity'
        run: yarn integrity
      - name: 'Integrity: Assert no changes (run `yarn integrity` if this fails)'
        run: git diff --exit-code

  test:
    runs-on: ubuntu-latest
    needs: lint
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: yarn
      - run: yarn install --frozen-lockfile --non-interactive

      - name: Install browser dependencies
        run: yarn playwright install-deps
      - name: Run tests
        run: yarn test
        env:
          NODE_ENV: production
      - name: Assert no new snapshots (run `yarn test --ci` if this fails)
        run: git diff --exit-code
      - name: Store coverage
        if: github.event_name == 'pull_request'
        uses: actions/upload-artifact@v4
        with:
          name: coverage
          path: coverage/

  build:
    runs-on: ubuntu-latest
    needs: lint
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: yarn
      - run: yarn install --frozen-lockfile --non-interactive

      - name: Run build
        run: yarn build
        env:
          STORYBOOK_COMPONENTS_VERSION: ${{ github.event.pull_request.head.sha || github.sha }}
      - name: Store storybook artifacts
        uses: actions/upload-artifact@v4
        with:
          name: storybook
          path: dist/storybook/

  is-pr-open:
    runs-on: ubuntu-latest
    if: github.event_name == 'push'
    needs: [build, lint, test]
    outputs:
      is-PR: ${{ !!fromJson(steps.get_issue_number.outputs.result).number }}
      is-draft: ${{ fromJson(steps.get_issue_number.outputs.result).draft }}
      title: ${{ fromJson(steps.get_issue_number.outputs.result).title }}
    steps:
      - uses: actions/github-script@v7
        id: get_issue_number
        with:
          script: |
            const pr = (await github.rest.repos.listPullRequestsAssociatedWithCommit({
              commit_sha: context.sha,
              owner: context.repo.owner,
              repo: context.repo.repo,
            })).data[0];

            return pr ? {
              number: pr.number,
              title: pr.title,
              draft: pr.draft,
              state: pr.state
            } : {};
      - name: Log
        run: echo "Number ${number}, isDraft ${isDraft}, title '${title}', data ${data}"
        env:
          data: ${{ steps.get_issue_number.outputs.result }}
          number: ${{ fromJson(steps.get_issue_number.outputs.result).number }}
          title: ${{ fromJson(steps.get_issue_number.outputs.result).title }}
          isDraft: ${{ fromJson(steps.get_issue_number.outputs.result).draft }}

  chromatic:
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && needs.is-pr-open.outputs.is-PR == 'true' && needs.is-pr-open.outputs.is-draft == 'false'
    needs: [is-pr-open]
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: yarn
      - run: yarn install --frozen-lockfile --non-interactive
      - name: Generate chromatic stories
        run: yarn generate:chromatic-stories
      - uses: actions/github-script@v7
        id: version
        with:
          script: |
            const sha = context.payload.pull_request?.head.sha ?? context.sha;
            return `${require('./package.json').version}-rev.${sha.substring(0, 10)}`;
          result-encoding: string
      - name: Create versioned storybook for chromatic
        run: STORYBOOK_COMPONENTS_VERSION=${{ steps.version.outputs.result }} yarn build:storybook
        env:
          CHROMATIC: true
      - name: Publish to Chromatic
        id: chromatic-publish
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          storybookBuildDir: dist/storybook
          exitOnceUploaded: true
          exitZeroOnChanges: true
          zip: true
          onlyChanged: true
          externals: '**/components/core/styles/**/*.scss'

  visual-regression:
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request'
    needs: test
    services:
      visual-regression:
        image: ghcr.io/${{ github.repository }}/visual-regression:baseline
        ports:
          - 8050:8080
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: yarn
      - run: yarn install --frozen-lockfile --non-interactive

      - name: Install browser dependencies
        run: yarn playwright install-deps
      - name: Run visual regression tests
        run: yarn test:visual-regression
        env:
          NODE_ENV: production
      - name: Store visual regression output
        uses: actions/upload-artifact@v4
        with:
          name: visual-regression-screenshots
          path: dist/screenshots-artifact/

  visual-regression-baseline:
    runs-on: ubuntu-latest
    permissions:
      packages: write
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    needs: test
    services:
      visual-regression:
        image: ghcr.io/${{ github.repository }}/visual-regression:baseline
        ports:
          - 8080:8050
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: yarn
      - run: yarn install --frozen-lockfile --non-interactive

      - name: Install browser dependencies
        run: yarn playwright install-deps
      - name: Run visual regression baseline generation
        run: yarn test:visual-regression --update-visual-baseline
        env:
          NODE_ENV: production

      - name: Build and push visual regression baseline
        run: |
          echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
          docker build \
            --file tools/visual-regression-testing/baseline.Dockerfile \
            --tag $IMAGE_REPO_VISUAL_REGRESSION:baseline \
            .
          docker push $IMAGE_REPO_VISUAL_REGRESSION:baseline
        env:
          DOCKER_BUILDKIT: 1