Fix storybook build & run it in CI as dry-run (#32488)

* feat: add dry run of storybook build in merge queue

* Reuse build from storybook build job

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use nx to build library before building storybook

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

.github/workflows/shared-component-storybook-build.yml

@@ -0,0 +1,36 @@
+name: Build shared component storybook
+on:
+    merge_group: {}
+    pull_request: {}
+    workflow_call: {}
+
+permissions: {}
+
+jobs:
+    doc:
+        name: Build storybook
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🧮 Checkout code
+              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
+
+            - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4
+            - name: 🔧 Pnpm cache
+              uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+              with:
+                  cache: "pnpm"
+                  node-version-file: package.json
+
+            - name: 🔨 Install dependencies
+              working-directory: packages/shared-components
+              run: "pnpm install --frozen-lockfile"
+
+            - name: 📖 Build Storybook
+              working-directory: packages/shared-components
+              run: pnpm build:storybook
+
+            - uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
+              with:
+                  name: shared-components-storybook
+                  path: packages/shared-components/storybook-static
+                  retention-days: 1

.github/workflows/shared-component-storybook-publish.yaml

@@ -10,34 +10,24 @@ on:
 permissions: {}
 
 jobs:
-    doc:
+    build:
+        name: Build storybook
+        uses: ./.github/workflows/shared-component-storybook-build.yml
+
+    publish:
         name: Publish storybook
         runs-on: ubuntu-latest
+        needs: build
         environment: SharedComponents
         steps:
-            - name: 🧮 Checkout code
-              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
-
-            - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4
-            - name: 🔧 Pnpm cache
-              uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
               with:
-                  cache: "pnpm"
-                  node-version-file: package.json
-
-            - name: 🔨 Install dependencies
-              working-directory: packages/shared-components
-              run: "pnpm install --frozen-lockfile"
-
-            - name: 📖 Build Storybook
-              working-directory: packages/shared-components
-              run: pnpm build:storybook
+                  name: shared-components-storybook
+                  path: storybook-static
 
             - name: 🚀 Deploy to Cloudflare Pages
               uses: cloudflare/wrangler-action@9681c2997648301493e78cacbfb790a9f19c833f # v3
               with:
                   apiToken: ${{ secrets.CF_PAGES_TOKEN }}
                   accountId: ${{ secrets.CF_PAGES_ACCOUNT_ID }}
-                  workingDirectory: "packages/shared-components"
-                  packageManager: "pnpm"
                   command: pages deploy storybook-static --project-name=shared-components-storybook

nx.json

@@ -5,5 +5,8 @@
         "build": {
             "dependsOn": ["^build", "prebuild:*"]
         }
+    },
+    "namedInputs": {
+        "src": ["{projectRoot}/src/**/*"]
     }
 }

packages/shared-components/package.json

@@ -44,8 +44,8 @@
         "build": "nx build",
         "prepack": "pnpm run build",
         "storybook": "storybook dev -p 6007",
-        "build:storybook": "pnpm build:doc && storybook build && node scripts/storybook-build-i18n.ts",
-        "build:doc": "typedoc",
+        "build:storybook": "nx run @element-hq/web-shared-components:storybook",
+        "build:doc": "nx run @element-hq/web-shared-components:typedoc",
         "lint": "pnpm lint:types && pnpm lint:js",
         "lint:js": "eslint --max-warnings 0 src && prettier --check .",
         "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json"

packages/shared-components/project.json

@@ -5,7 +5,7 @@
         "build": {
             "cache": true,
             "command": "vite build",
-            "inputs": ["{projectRoot}/src/**/*"],
+            "inputs": ["src"],
             "outputs": ["{projectRoot}/dist"],
             "options": { "cwd": "packages/shared-components" }
         },
@@ -13,6 +13,25 @@
             "command": "vite build --watch",
             "options": { "cwd": "packages/shared-components" },
             "continuous": true
+        },
+        "typedoc": {
+            "cache": "true",
+            "command": "typedoc",
+            "inputs": ["src"],
+            "outputs": ["{projectRoot}/typedoc"],
+            "options": { "cwd": "packages/shared-components" }
+        },
+        "storybook": {
+            "cache": "true",
+            "inputs": ["src", "{projectRoot}/.storybook", "{projectRoot}/typedoc"],
+            "outputs": ["{projectRoot}/storybook-static"],
+            "executor": "nx:run-commands",
+            "options": {
+                "commands": ["storybook build", "node scripts/storybook-build-i18n.ts"],
+                "parallel": false,
+                "cwd": "packages/shared-components"
+            },
+            "dependsOn": ["build", "typedoc"]
         }
     }
 }