Storybook workflow

.distignore

@@ -10,6 +10,7 @@ tests/php-coverage
 .phpunit.result.cache
 tests/e2e/test-results
 built-plugin
+storybook-static
 
 # Directories/files that may appear in your environment
 .DS_Store

.github/workflows/storybook.yml

@@ -0,0 +1,142 @@
+name: Storybook
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+    # Only run if CSS/JS/MD-related files changed.
+    paths:
+      - '.github/workflows/storybook.yml'
+      - 'assets/**'
+      - 'stories/**'
+      - '!assets/**/__tests__/**/*.js'
+      - '!assets/**/test/*.js'
+      - '!assets/**/*.test.js'
+      - '.storybook/**'
+      - '!.storybook/storybook-data.js'
+      - '**.scss'
+      - '.nvmrc'
+      - '**/package.json'
+      - 'package-lock.json'
+  pull_request:
+    branches:
+      - develop
+      - main
+      - 'feature/**'
+    # Only run if CSS/JS/MD-related files changed.
+    paths:
+      - '.github/workflows/storybook.yml'
+      - 'assets/**'
+      - 'stories/**'
+      - '!assets/**/__tests__/**/*.js'
+      - '!assets/**/test/*.js'
+      - '!assets/**/*.test.js'
+      - '.storybook/**'
+      - '!.storybook/storybook-data.js'
+      - '**.scss'
+      - '.nvmrc'
+      - '**/package.json'
+      - 'package-lock.json'
+    types:
+      - opened
+      - closed
+      - reopened
+      - synchronize
+      - ready_for_review
+
+concurrency:
+  group: storybook-${{ github.event_name }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-storybook:
+    name: Build Storybook
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    if: false == ( ( github.event_name == 'pull_request' && ( github.event.action == 'closed' || github.event.pull_request.draft == true || contains( github.head_ref, 'dependabot/' ) ) ) || github.event.pull_request.head.repo.fork )
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js (.nvmrc)
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+      - name: npm install
+        run: |
+          npm ci
+      - name: Build Storybook
+        run: |
+          npm run storybook:build
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-files
+          path: dist
+
+  deploy-storybook:
+    name: Deploy Storybook
+    runs-on: ubuntu-latest
+    needs: build-storybook
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+          token: ${{ secrets.GH_BOT_TOKEN }}
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-files
+          path: dist
+      - name: Set branch environment variables
+        id: branch-target
+        if: github.event_name != 'pull_request'
+        run: echo "dir=${GITHUB_REF##*/}" >> "$GITHUB_OUTPUT"
+      - name: Set PR environment variables
+        id: pr-target
+        if: github.event_name == 'pull_request'
+        env:
+          PULL_REQUEST_NUMBER: ${{ github.event.number }}
+        run: echo "dir=pull/${PULL_REQUEST_NUMBER}" >> "$GITHUB_OUTPUT"
+      - name: Commit updates
+        run: |
+          mkdir -p "storybook/${TARGET_DIR}"
+          rm -rf "storybook/${TARGET_DIR}"
+          mv dist "storybook/${TARGET_DIR}"
+          git add .
+          git status
+          git diff --staged --quiet && echo 'No changes to commit; exiting!' && exit 0
+          git pull --no-edit --quiet
+          git commit -m "Deploy storybook for ${TARGET_DIR}."
+          git push origin gh-pages
+        env:
+          TARGET_DIR: ${{ steps.branch-target.outputs.dir }}${{ steps.pr-target.outputs.dir }}
+          GIT_AUTHOR_EMAIL: ankitrox-bot@google.com
+          GIT_AUTHOR_NAME: ankitrox
+          GIT_COMMITTER_EMAIL: ankitrox-bot@google.com
+          GIT_COMMITTER_NAME: ankitrox
+
+  remove-storybook:
+    name: Remove Storybook
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    if: ( github.event_name == 'pull_request' && github.event.action == 'closed' && contains( github.head_ref, 'dependabot/' ) == false ) && github.event.pull_request.head.repo.fork == false
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+          token: ${{ secrets.GH_BOT_TOKEN }}
+      - name: Remove storybook
+        env:
+          PULL_REQUEST_NUMBER: ${{ github.event.number }}
+          GIT_AUTHOR_EMAIL: ankitrox-bot@google.com
+          GIT_AUTHOR_NAME: ankitrox
+          GIT_COMMITTER_EMAIL: ankitrox-bot@google.com
+          GIT_COMMITTER_NAME: ankitrox
+        run: |
+          git rm -rf "storybook/pull/${PULL_REQUEST_NUMBER}"
+          git status
+          git diff --staged --quiet && echo 'No changes to commit; exiting!' && exit 0
+          git pull --no-edit --quiet
+          git commit -m "Remove storybook for pull/${PULL_REQUEST_NUMBER}."
+          git push origin gh-pages

package.json

@@ -15,7 +15,7 @@
     "test:js": "jest --config=tests/js/jest.config.js --passWithNoTests",
     "test:js:watch": "npm run test:js -- --watch",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook:build": "storybook build -c .storybook -o dist --quiet --loglevel warn"
   },
   "author": "",
   "license": "ISC",
@@ -29,6 +29,7 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
     "@storybook/blocks": "^8.2.9",
+    "@storybook/cli": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-webpack5": "^8.2.9",
     "@storybook/test": "^8.2.9",