chromatic-upload.yml

name: Chromatic Upload

on:
  workflow_run:
    workflows: ["Storybook"]
    types: [completed]

permissions:
  pull-requests: write
  actions: read

jobs:
  upload:
    runs-on: ubuntu-24.04
    if: >
      github.event.workflow_run.conclusion == 'success' &&
      (github.event.workflow_run.event == 'pull_request' || github.event.workflow_run.event == 'push')
    steps:
      # Checkout base repo with full history — Chromatic needs git log to find
      # the baseline commit. We always check out the default branch (not the PR
      # branch) so that no untrusted code from forks is ever executed.
      - name: Checkout Base Repository
        uses: actions/checkout@v4
        with:
          persist-credentials: false
          fetch-depth: 0

      - name: Download Artifact
        uses: actions/download-artifact@v4
        with:
          name: storybook-static
          path: storybook-static
          run-id: ${{ github.event.workflow_run.id }}
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: Publish to Chromatic
        id: chromatic
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: storybook-static
          # Auto-accept changes on master (push) to establish the visual baseline.
          # PR builds are left for review.
          autoAcceptChanges: ${{ github.event.workflow_run.event == 'push' }}

      # Post Chromatic URLs as a PR comment (only for pull_request events)
      - name: Find PR number
        id: find-pr
        if: github.event.workflow_run.event == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            // workflow_run.pull_requests works for same-repo PRs
            const prs = context.payload.workflow_run.pull_requests;
            if (prs && prs.length > 0) {
              return prs[0].number;
            }
            // Fallback: search for a PR matching the head SHA (covers fork PRs)
            const head_sha = context.payload.workflow_run.head_sha;
            const { data: pulls } = await github.rest.pulls.list({
              owner: context.repo.owner,
              repo: context.repo.repo,
              state: 'open',
              sort: 'updated',
              direction: 'desc',
              per_page: 10,
            });
            const matched = pulls.find(pr => pr.head.sha === head_sha);
            return matched ? matched.number : '';

      - name: Find existing comment
        id: find-comment
        if: steps.find-pr.outputs.result && steps.find-pr.outputs.result != ''
        uses: peter-evans/find-comment@v3
        with:
          issue-number: ${{ steps.find-pr.outputs.result }}
          comment-author: 'github-actions[bot]'
          body-includes: '<!-- chromatic-build -->'

      - name: Comment on PR
        if: steps.find-pr.outputs.result && steps.find-pr.outputs.result != ''
        uses: peter-evans/create-or-update-comment@v4
        with:
          comment-id: ${{ steps.find-comment.outputs.comment-id }}
          issue-number: ${{ steps.find-pr.outputs.result }}
          edit-mode: replace
          body: |
            <!-- chromatic-build -->
            ### Chromatic Build

            | | Link |
            |---|---|
            | Storybook | ${{ steps.chromatic.outputs.storybookUrl }} |
            | Build | ${{ steps.chromatic.outputs.buildUrl }} |