deploy-storybooks.yml

name: Deploy Storybooks to GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened]

permissions:
  contents: write
  pull-requests: write
  statuses: write
  pages: write
  id-token: write

jobs:
  build:
    name: Build Storybooks
    runs-on: ubuntu-latest
    outputs:
      has_storybooks: ${{ steps.check-affected.outputs.has_storybooks || 'true' }}

    steps:
      - name: Checkout repository
        uses: actions/checkout@v6
        with:
          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.sha || github.sha }}
          fetch-depth: 0
          filter: tree:0

      - name: Set NX_BASE and NX_HEAD for affected detection
        if: github.event_name == 'pull_request'
        run: |
          git fetch origin ${{ github.base_ref }}
          MERGE_BASE=$(git merge-base HEAD origin/${{ github.base_ref }})
          echo "NX_BASE=$MERGE_BASE" >> $GITHUB_ENV
          echo "NX_HEAD=HEAD" >> $GITHUB_ENV
          echo "Comparing against merge-base: $MERGE_BASE"

      - name: Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '22'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install

      - name: Clone l10n repository
        run: _scripts/l10n/clone.sh

      - name: Check if any projects with storybook are affected (PR)
        id: check-affected
        if: github.event_name == 'pull_request'
        run: |
          AFFECTED=$(npx nx show projects --affected -t build-storybook)
          if [ -z "$AFFECTED" ]; then
            echo "has_storybooks=false" >> $GITHUB_OUTPUT
            echo "No storybook projects affected"
          else
            echo "has_storybooks=true" >> $GITHUB_OUTPUT
            echo "Affected storybook projects:"
            echo "$AFFECTED"
          fi

      - name: Build Storybooks for affected packages (PR)
        if: github.event_name == 'pull_request' && steps.check-affected.outputs.has_storybooks == 'true'
        run: npx nx affected -t build-storybook

      - name: Build all Storybooks (main branch)
        if: github.event_name == 'push'
        run: npx nx run-many -t build-storybook

      - name: Organize Storybooks for deployment
        if: github.event_name == 'push' || steps.check-affected.outputs.has_storybooks == 'true'
        run: node _scripts/organize-storybooks.js
        env:
          DEPLOY_DIR: deploy/

      - name: Upload storybooks artifact
        if: github.event_name == 'push' || steps.check-affected.outputs.has_storybooks == 'true'
        uses: actions/upload-artifact@v6
        with:
          name: storybooks-${{ github.event_name == 'pull_request' && github.event.pull_request.number || 'main' }}
          path: deploy/
          retention-days: 1

  prepare:
    name: Prepare Storybooks for Deployment
    runs-on: ubuntu-latest
    needs: build
    if: needs.build.outputs.has_storybooks == 'true'
    outputs:
      deploy_dir: ${{ steps.deploy-dir.outputs.path }}
    # Single concurrency group to prevent conflicts
    concurrency:
      group: gh-pages-deploy
      cancel-in-progress: false

    steps:
      - name: Checkout repository for scripts
        uses: actions/checkout@v6
        with:
          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.sha || github.sha }}
          path: repo

      - name: Checkout gh-pages branch
        uses: actions/checkout@v6
        with:
          ref: gh-pages
          path: gh-pages
          fetch-depth: 1

      - name: Set deployment directory
        id: deploy-dir
        run: |
          if [ "${{ github.event_name }}" == "pull_request" ]; then
            DEPLOY_DIR="storybooks/pr-${{ github.event.pull_request.number }}"
          else
            DEPLOY_DIR="storybooks/main"
          fi
          echo "path=$DEPLOY_DIR" >> $GITHUB_OUTPUT
          echo "DEPLOY_DIR=$DEPLOY_DIR" >> $GITHUB_ENV

      - name: Remove old storybook directory
        run: rm -rf "gh-pages/${{ steps.deploy-dir.outputs.path }}"

      - name: Download storybooks artifact
        uses: actions/download-artifact@v7
        with:
          name: storybooks-${{ github.event_name == 'pull_request' && github.event.pull_request.number || 'main' }}
          path: gh-pages/${{ steps.deploy-dir.outputs.path }}

      - name: Generate root index.html
        run: node repo/_scripts/generate-storybook-index.js
        env:
          STORYBOOKS_DIR: gh-pages/storybooks
          REPO_NAME: ${{ github.event.repository.name }}
          REPO_OWNER: ${{ github.repository_owner }}

      - name: Update gh-pages branch for artifact storage
        run: |
          cd gh-pages
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"

          if [ "${{ github.event_name }}" == "pull_request" ]; then
            COMMIT_MSG="Store storybooks for PR ${{ github.event.pull_request.number }}"
          else
            COMMIT_MSG="Store storybooks from main branch"
          fi

          # Create orphan branch (no history) with current content
          git checkout --orphan gh-pages-new
          git add -A
          git commit -m "$COMMIT_MSG"

          # Replace gh-pages with the new orphan branch
          git push --force origin gh-pages-new:gh-pages

      - name: Upload GitHub Pages artifact
        uses: actions/upload-pages-artifact@v4
        with:
          path: gh-pages/

  deploy:
    name: Deploy to GitHub Pages
    runs-on: ubuntu-latest
    needs: [build, prepare]
    if: needs.build.outputs.has_storybooks == 'true'
    continue-on-error: true
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

      - name: Create GitHub status check
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v8
        with:
          script: |
            const deployDir = "${{ needs.prepare.outputs.deploy_dir }}";
            const deployUrl = `https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${deployDir}/`;
            const sha = context.payload.pull_request.head.sha;

            await github.rest.repos.createCommitStatus({
              owner: context.repo.owner,
              repo: context.repo.repo,
              sha: sha,
              state: 'success',
              context: 'Link to Storybooks',
              description: 'Storybooks deployed',
              target_url: deployUrl
            });

            console.log(`Created status check for ${sha} with URL: ${deployUrl}`);