Merge pull request #19882 from mozilla/FXA-12875

feat(storybooks): build storybooks for affected packages only for PRs

Author: MagentaManifold

.github/workflows/deploy-storybooks.yml

@@ -16,12 +16,25 @@ 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
@@ -35,15 +48,36 @@ jobs:
       - name: Clone l10n repository
         run: _scripts/l10n/clone.sh
 
-      - name: Build all Storybooks
+      - 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' }}
@@ -54,6 +88,7 @@ jobs:
     name: Deploy to GitHub Pages
     runs-on: ubuntu-latest
     needs: build
+    if: needs.build.outputs.has_storybooks == 'true'
     # Single concurrency group to prevent conflicts
     concurrency:
       group: gh-pages-deploy

packages/fxa-payments-server/package.json

@@ -9,7 +9,6 @@
     "build-ts": "tsc",
     "build-l10n": "nx l10n-merge && nx l10n-bundle && nx l10n-merge-test",
     "build-react": "SKIP_PREFLIGHT_CHECK=true PUBLIC_URL=/ INLINE_RUNTIME_CHUNK=false CI=false NODE_OPTIONS=--openssl-legacy-provider rescripts build",
-    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build && cp -r public/images storybook-static/ && cp -r public/locales ./storybook-static/locales",
     "compile": "tsc --noEmit",
     "clean": "rimraf dist",
     "l10n-merge": "yarn grunt merge-ftl",