chromatic.yml

name: Chromatic

on:
  workflow_dispatch:
  pull_request_review:
    types: [submitted]

concurrency:
  group: chromatic-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

jobs:
  get-metadata:
    name: Get Metadata
    runs-on: ubuntu-latest
    steps:
      - name: Check out current commit
        uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.head.sha }}
          fetch-depth: 2

      - name: Determine changed files
        uses: tomi/paths-filter-action@v3.0.2
        id: changed
        if: github.event_name == 'pull_request_review'
        with:
          filters: |
            design_system:
              - packages/design-system/**
              - .github/workflows/chromatic.yml

    outputs:
      design_system_files_changed: ${{ steps.changed.outputs.design_system == 'true' }}
      is_community_pr: ${{ contains(github.event.pull_request.labels.*.name, 'community') }}
      is_pr_target_master: ${{ github.event.pull_request.base.ref == 'master' }}
      is_dispatch: ${{ github.event_name == 'workflow_dispatch' }}
      is_pr_approved: ${{ github.event.review.state == 'approved' }}

  chromatic:
    needs: [get-metadata]
    if: |
      needs.get-metadata.outputs.is_dispatch == 'true' ||
      (
       needs.get-metadata.outputs.design_system_files_changed == 'true' &&
       needs.get-metadata.outputs.is_community_pr == 'false' &&
       needs.get-metadata.outputs.is_pr_target_master == 'true' &&
       needs.get-metadata.outputs.is_pr_approved == 'true'
      )
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4.1.1
        with:
          fetch-depth: 0
      - run: corepack enable
      - uses: actions/setup-node@v4.0.2
        with:
          node-version: 20.x
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile

      - name: Publish to Chromatic
        uses: chromaui/action@v11
        id: chromatic_tests
        continue-on-error: true
        with:
          workingDir: packages/design-system
          onlyChanged: true
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          exitZeroOnChanges: false

      - name: Success comment
        if: steps.chromatic_tests.outcome == 'success'
        uses: peter-evans/create-or-update-comment@v4.0.0
        with:
          issue-number: ${{ github.event.pull_request.number }}
          token: ${{ secrets.GITHUB_TOKEN }}
          edit-mode: replace
          body: |
            :white_check_mark: No visual regressions found.

      - name: Fail comment
        if: steps.chromatic_tests.outcome != 'success'
        uses: peter-evans/create-or-update-comment@v4.0.0
        with:
          issue-number: ${{ github.event.pull_request.number }}
          token: ${{ secrets.GITHUB_TOKEN }}
          edit-mode: replace
          body: |
            [:warning: Visual regressions found](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}