storybook.yml

name: 'Storybook'
on:
  workflow_dispatch:
  push:
    branches:
      - 6.x
    paths:
      - 'packages/craftcms-ui/**'
      - 'packages/craftcms-garnish/**'
      - 'resources/js/**'
      - 'src/**/*.php'
  pull_request:
    paths:
      - 'packages/craftcms-ui/**'
      - 'packages/craftcms-garnish/**'
      - 'resources/js/**'
      - 'src/**/*.php'

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

env:
  NODE_VERSION: '24'
  PHP_VERSION: '8.5'

permissions:
  contents: read

jobs:
  # Gate: install deps, build the packages, and generate the TS/wayfinder
  # output. The deploy jobs only run once this succeeds, so we never publish a
  # Storybook built from assets that don't compile. Results are cached and
  # restored by the parallel deploy jobs below.
  build-assets:
    name: 'Build assets'
    runs-on: ubuntu-latest
    timeout-minutes: 15
    outputs:
      cache-key: ${{ steps.cache-key.outputs.value }}
      deploy-branch: ${{ steps.branch.outputs.value }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: ${{ env.PHP_VERSION }}

      - name: Setup Vite+
        uses: voidzero-dev/setup-vp@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: true

      - name: Compute cache key
        id: cache-key
        # Keep this in sync with .github/workflows/js-ci.yml so the built assets
        # and generated files are shared between the two workflows.
        run: |
          echo "value=js-ci-v3-${{ runner.os }}-${{ hashFiles('package-lock.json', 'composer.lock', 'package.json', 'packages/*/package.json', 'packages/craftcms-ui/src/**', 'packages/craftcms-ui/tsconfig*.json', 'packages/craftcms-ui/vite.config.*', 'packages/craftcms-ui/tsdown.config.*', 'packages/craftcms-garnish/src/**', 'packages/craftcms-garnish/tsconfig*.json', 'packages/craftcms-garnish/vite.config.*', 'src/**/*.php', 'workbench/**/*.php') }}" >> "$GITHUB_OUTPUT"

      - name: Restore install + build + generated cache
        id: cache
        uses: actions/cache@v4
        with:
          path: |
            node_modules
            packages/*/node_modules
            packages/craftcms-ui/dist
            packages/craftcms-garnish/dist
            vendor
            resources/js/actions
            resources/js/routes
            resources/js/wayfinder
            resources/js/generated
          key: ${{ steps.cache-key.outputs.value }}

      - name: Install Composer dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: composer install --no-interaction --no-progress

      - name: Install frontend dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp install --frozen-lockfile
        env:
          CRAFT_FONTAWESOME_TOKEN: ${{ secrets.CRAFT_FONTAWESOME_TOKEN }}

      # Build the garnish package so its `dist/*.d.ts` exist — `vue-tsc` resolves
      # `@craftcms/garnish` from `dist` (its `types`), and dist is gitignored.
      - name: Build @craftcms/garnish
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run build:garnish

      - name: Build @craftcms/ui
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run build:ui

      - name: Generate TypeScript types
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run generate:types

      - name: Generate Wayfinder routes
        if: steps.cache.outputs.cache-hit != 'true'
        run: vp run generate:wayfinder

      - name: Determine deploy branch
        id: branch
        run: |
          if [ "${{ github.event_name }}" = "pull_request" ]; then
            echo "value=pr-${{ github.event.number }}" >> "$GITHUB_OUTPUT"
          else
            echo "value=${{ github.ref_name }}" >> "$GITHUB_OUTPUT"
          fi

  deploy-cp:
    name: 'Deploy / craftcms-ui'
    runs-on: ubuntu-latest
    timeout-minutes: 10
    needs: build-assets
    outputs:
      url: ${{ steps.deploy.outputs.deployment-url }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Vite+
        uses: voidzero-dev/setup-vp@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: true

      - name: Restore install + build + generated cache
        uses: actions/cache@v4
        with:
          path: |
            node_modules
            packages/*/node_modules
            packages/craftcms-ui/dist
            packages/craftcms-garnish/dist
            vendor
            resources/js/actions
            resources/js/routes
            resources/js/wayfinder
            resources/js/generated
          key: ${{ needs.build-assets.outputs.cache-key }}

      - name: Build Storybook
        run: vp run @craftcms/ui#build:storybook

      - name: Deploy to Cloudflare Pages
        id: deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy packages/craftcms-ui/storybook-static --project-name=craftcms-ui-storybook --branch=${{ needs.build-assets.outputs.deploy-branch }}

  deploy-resources:
    name: 'Deploy / resources'
    runs-on: ubuntu-latest
    timeout-minutes: 15
    needs: build-assets
    outputs:
      url: ${{ steps.deploy.outputs.deployment-url }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Vite+
        uses: voidzero-dev/setup-vp@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: true

      - name: Restore install + build + generated cache
        uses: actions/cache@v4
        with:
          path: |
            node_modules
            packages/*/node_modules
            packages/craftcms-ui/dist
            packages/craftcms-garnish/dist
            vendor
            resources/js/actions
            resources/js/routes
            resources/js/wayfinder
            resources/js/generated
          key: ${{ needs.build-assets.outputs.cache-key }}

      - name: Build Storybook
        # build-assets already ran the transformer and Wayfinder, and their
        # output is restored from the cache above. Regenerating would shell out
        # to ./vendor/bin/testbench, and this job installs no PHP.
        env:
          CRAFT_SKIP_PHP_CODEGEN: '1'
        run: vp run build:storybook

      - name: Deploy to Cloudflare Pages
        id: deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy storybook-static --project-name=craftcms-storybook --branch=${{ needs.build-assets.outputs.deploy-branch }}

  # Single writer for the PR comment. Runs after both deploys (regardless of
  # their result) and renders one comment covering both previews, so the two
  # parallel jobs never race to create duplicate comments. Skipped entirely if
  # the gate failed and neither deploy ran.
  comment:
    name: 'Comment preview URLs'
    runs-on: ubuntu-latest
    needs: [deploy-cp, deploy-resources]
    if: ${{ always() && github.event_name == 'pull_request' && (needs.deploy-cp.result != 'skipped' || needs.deploy-resources.result != 'skipped') }}
    permissions:
      contents: read
      pull-requests: write
    steps:
      # Checkout so the comment script is on disk for github-script to require.
      # Only the scripts directory is needed, so keep the checkout sparse.
      - name: Checkout comment script
        uses: actions/checkout@v4
        with:
          sparse-checkout: .github/scripts
          sparse-checkout-cone-mode: false

      - name: Create or update the preview comment
        uses: actions/github-script@v7
        env:
          CP_RESULT: ${{ needs.deploy-cp.result }}
          CP_URL: ${{ needs.deploy-cp.outputs.url }}
          RESOURCES_RESULT: ${{ needs.deploy-resources.result }}
          RESOURCES_URL: ${{ needs.deploy-resources.outputs.url }}
        with:
          script: |
            const run = require('./.github/scripts/storybook-preview-comment.cjs')
            await run({github, context})