ci-tests-storybook.yaml

# Description: Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages
name: 'CI: Tests Storybook'

on:
  workflow_dispatch: # Allow manual triggering
  pull_request:
  push:
    branches: [main]

jobs:
  changes:
    runs-on: ubuntu-latest
    permissions:
      contents: read
    outputs:
      storybook-changes: ${{ steps.changes.outputs.storybook-changes }}
      app-frontend-changes: ${{ steps.changes.outputs.app-frontend-changes }}
      packages-changes: ${{ steps.changes.outputs.packages-changes }}
    steps:
      - uses: actions/checkout@v7
      - id: changes
        uses: ./.github/actions/changes-filter

  # Post starting comment for non-forked PRs
  comment-on-pr-start:
    needs: changes
    runs-on: ubuntu-latest
    if: |
      github.event_name == 'pull_request'
      && github.event.pull_request.head.repo.fork == false
      && (needs.changes.outputs.storybook-changes == 'true'
          || needs.changes.outputs.app-frontend-changes == 'true'
          || needs.changes.outputs.packages-changes == 'true')
    permissions:
      pull-requests: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v7

      - name: Upsert storybook starting section into unified report
        uses: ./.github/actions/upsert-comment-section
        with:
          pr-number: ${{ github.event.pull_request.number }}
          section-name: storybook
          section-content: '## 🎨 Storybook: 🚧 Building...'
          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
          token: ${{ github.token }}

  # Build Storybook for all PRs (free Cloudflare deployment)
  storybook-build:
    needs: changes
    runs-on: ubuntu-latest
    if: |
      github.event_name == 'pull_request'
      && (needs.changes.outputs.storybook-changes == 'true'
          || needs.changes.outputs.app-frontend-changes == 'true'
          || needs.changes.outputs.packages-changes == 'true')
    outputs:
      conclusion: ${{ steps.job-status.outputs.conclusion }}
      workflow-url: ${{ steps.workflow-url.outputs.url }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v7

      - name: Setup frontend
        uses: ./.github/actions/setup-frontend

      - name: Build Storybook
        run: pnpm build-storybook

      - name: Set job status
        id: job-status
        if: always()
        run: |
          echo "conclusion=${{ job.status }}" >> $GITHUB_OUTPUT

      - name: Get workflow URL
        id: workflow-url
        if: always()
        run: |
          echo "url=${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}" >> $GITHUB_OUTPUT

      - name: Upload Storybook build
        if: success() && github.event.pull_request.head.repo.fork == false
        uses: actions/upload-artifact@v6
        with:
          name: storybook-static
          path: storybook-static/
          retention-days: 7

  # Chromatic deployment only for version-bump-* branches or manual triggers
  chromatic-deployment:
    needs: changes
    runs-on: ubuntu-latest
    if: |
      github.event_name == 'workflow_dispatch'
      || (github.event_name == 'pull_request'
          && github.event.pull_request.head.repo.fork == false
          && startsWith(github.head_ref, 'version-bump-')
          && (needs.changes.outputs.storybook-changes == 'true'
              || needs.changes.outputs.app-frontend-changes == 'true'
              || needs.changes.outputs.packages-changes == 'true'))
    outputs:
      conclusion: ${{ steps.job-status.outputs.conclusion }}
      workflow-url: ${{ steps.workflow-url.outputs.url }}
      chromatic-build-url: ${{ steps.chromatic.outputs.buildUrl }}
      chromatic-storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v7
        with:
          fetch-depth: 0 # Required for Chromatic baseline

      - name: Setup frontend
        uses: ./.github/actions/setup-frontend

      - name: Build Storybook and run Chromatic
        id: chromatic
        uses: chromaui/action@07791f8243f4cb2698bf4d00426baf4b2d1cb7e0 # v13.3.5
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          buildScriptName: build-storybook
          autoAcceptChanges: 'main' # Auto-accept changes on main branch
          exitOnceUploaded: true # Don't wait for UI tests to complete
          onlyChanged: true # Only capture changed stories

      - name: Set job status
        id: job-status
        if: always()
        run: |
          echo "conclusion=${{ job.status }}" >> $GITHUB_OUTPUT

      - name: Get workflow URL
        id: workflow-url
        if: always()
        run: |
          echo "url=${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}" >> $GITHUB_OUTPUT

  # Deploy and comment for non-forked PRs only
  deploy-and-comment:
    needs: [changes, storybook-build]
    runs-on: ubuntu-latest
    if: |
      always()
      && github.event_name == 'pull_request'
      && github.event.pull_request.head.repo.fork == false
      && (needs.changes.outputs.storybook-changes == 'true'
          || needs.changes.outputs.app-frontend-changes == 'true'
          || needs.changes.outputs.packages-changes == 'true')
    permissions:
      pull-requests: write
      contents: read
    steps:
      - name: Checkout repository
        uses: actions/checkout@v7

      - name: Download Storybook build
        if: needs.storybook-build.outputs.conclusion == 'success'
        uses: actions/download-artifact@v8
        with:
          name: storybook-static
          path: storybook-static

      - name: Make deployment script executable
        run: chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh

      - name: Deploy Storybook and generate section
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          GITHUB_TOKEN: ${{ github.token }}
          WORKFLOW_CONCLUSION: ${{ needs.storybook-build.outputs.conclusion }}
          WORKFLOW_URL: ${{ needs.storybook-build.outputs.workflow-url }}
          SUMMARY_FILE: storybook-section.md
          BRANCH_NAME: ${{ github.head_ref }}
        run: |
          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
            "${{ github.event.pull_request.number }}" \
            "$BRANCH_NAME" \
            "completed"

      - name: Read storybook section
        id: section
        if: hashFiles('storybook-section.md') != ''
        uses: juliangruber/read-file-action@271ff311a4947af354c6abcd696a306553b9ec18 # v1.1.8
        with:
          path: storybook-section.md

      - name: Upsert storybook section into unified report
        if: steps.section.outputs.content != ''
        uses: ./.github/actions/upsert-comment-section
        with:
          pr-number: ${{ github.event.pull_request.number }}
          section-name: storybook
          section-content: ${{ steps.section.outputs.content }}
          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
          token: ${{ github.token }}

  # Deploy Storybook to production URL on main branch push
  deploy-production:
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - name: Checkout code
        uses: actions/checkout@v7

      - name: Setup frontend
        uses: ./.github/actions/setup-frontend

      - name: Build Storybook
        run: pnpm build-storybook

      - name: Deploy to Cloudflare Pages (production)
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: |
          npx wrangler@^4.0.0 pages deploy storybook-static \
            --project-name=comfy-storybook \
            --branch=main

  # Update comment with Chromatic URLs for version-bump branches
  update-comment-with-chromatic:
    needs: [chromatic-deployment, deploy-and-comment]
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && startsWith(github.head_ref, 'version-bump-') && needs.chromatic-deployment.outputs.chromatic-build-url != ''
    permissions:
      pull-requests: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v7

      - name: Upsert Chromatic section into unified report
        uses: ./.github/actions/upsert-comment-section
        with:
          pr-number: ${{ github.event.pull_request.number }}
          section-name: chromatic
          section-content: |
            ### 🎨 Chromatic Visual Tests
            - 📊 [View Chromatic Build](${{ needs.chromatic-deployment.outputs.chromatic-build-url }})
            - 📚 [View Chromatic Storybook](${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }})
          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
          token: ${{ github.token }}