chromatic-pr.yaml

# Chromatic action from https://www.chromatic.com/docs/github-actions

# Publish to Chromatic for snapshot tests then use storybook/test-runner to test stories
name: Chromatic (PR)

on:
  pull_request:
    types:
      - opened
      - synchronize
      - ready_for_review

  # When Changesets opens a PR it does not trigger GitHub actions,
  # because its token does not have permission to. This is a hack
  # to allow one of us to trigger GitHub actions for a changesets PR
  # by enabling automerge on the PR.
  pull_request_target:
    types:
      - auto_merge_enabled
    branches:
      - main # the target branch of the PR
    paths:
      - "**/CHANGELOG.md" # only changesets releases touch changelogs

jobs:
  run-check:
    name: Check if we should run Chromatic tests
    if: github.head_ref != 'changeset-release/main' && github.event.pull_request.draft == false
    runs-on: ubuntu-latest
    steps:
      - run: echo "Run the Chromatic tests"

  chromatic:
    needs: run-check
    runs-on: ubuntu-latest
    outputs:
      storybookUrl: ${{ steps.publishChromatic.outputs.storybookUrl }}
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: ./.github/actions/setup
      - name: Build Storybook for Chromatic
        # We want both stories and docs for the branch preview
        run: pnpm turbo build:chromatic --filter=@docs/storybook
      - id: publishChromatic
        name: Publish to Chromatic
        uses: chromaui/action@v11
        with:
          token: ${{ github.token }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: "./docs/storybook-static"
          storybookBaseDir: "./docs"
          onlyChanged: "!(main)"
          externals: |
            **/!(*.module).scss
            packages/components/**/*.css

  update-branch-preview:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    needs: chromatic
    env:
      COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ env.COMMIT_SHA }}
      - name: Get commit message
        id: getCommitMessage
        run: echo "commitMessage=$(git show -s --format=%s)" >> "$GITHUB_OUTPUT"
      - uses: ./.github/actions/branch-preview
        with:
          prNumber: ${{ github.event.pull_request.number }}
          commitSha: ${{ env.COMMIT_SHA }}
          commitMessage: ${{ steps.getCommitMessage.outputs.commitMessage }}
          storybookUrl: ${{ needs.chromatic.outputs.storybookUrl }}