chore: setup multiple docsites deploy to GHP (microsoft#35151)

Author: mainframev

.github/workflows/docsite-publish-ghpages.yml

@@ -8,27 +8,10 @@ on:
   workflow_dispatch:
 
 jobs:
-  check:
-    runs-on: ubuntu-latest
-    if: ${{ github.repository_owner == 'microsoft' }} && ${{ contains(github.event.head_commit.message, 'applying package updates') || github.event_name == 'workflow_dispatch' }}
-
-    outputs:
-      status: ${{ steps.verify-react-components-changed.outputs.any_changed == 'true' || github.event_name == 'workflow_dispatch' }}
-
-    steps:
-      - uses: actions/checkout@v4
-        name: Checkout [master]
-
-      - name: Verify react-compoenents has changed
-        uses: tj-actions/changed-files@ed68ef82c095e0d48ec87eccea555d944a631a4c # v46.0.5
-        id: verify-react-components-changed
-        with:
-          files: |
-            packages/react-components/react-components/package.json
   build:
     runs-on: ubuntu-latest
-    needs: check
-    if: needs.check.outputs.status == 'true'
+    outputs:
+      artifact_id: ${{ steps.artifact_upload.outputs.artifact_id }}
 
     steps:
       - uses: actions/checkout@v4
@@ -46,20 +29,39 @@ jobs:
       - name: Install Playwright Browsers
         run: yarn playwright install --with-deps
 
-      - name: Build storybook
-        run: yarn nx run public-docsite-v9:build-storybook --nxBail
-        env:
-          STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY: ${{ secrets.STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY }}
+      - name: Affected Deployable Storybooks
+        id: affected_storybooks_count
+        run: |
+          affected_count=$(yarn --silent nx show projects -t build-storybook:docsite --affected --verbose false | wc -l | tr -d ' ')
+          echo "value=$affected_count" >> $GITHUB_OUTPUT
+
+      - name: Build affected storybooks
+        if: steps.affected_storybooks_count.outputs.value > 0
+        run: |
+          yarn nx run-many -t build-storybook:docsite --nxBail
+
+      - name: Prepare Artifact
+        if: steps.affected_storybooks_count.outputs.value > 0
+        run: |
+          rm -rf _pages
+          mkdir -p _pages/react _pages/charts _pages/web-components
+
+          cp -R apps/public-docsite-v9/dist/storybook/* _pages/
+          cp -R apps/public-docsite-v9/dist/react/* _pages/react/
+          cp -R apps/chart-docsite/dist/storybook/* _pages/charts/
+          cp -R packages/web-components/dist/storybook/* _pages/web-components
 
       - name: Upload Pages Artifact
+        if: steps.affected_storybooks_count.outputs.value > 0
+        id: artifact_upload
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './apps/public-docsite-v9/dist/storybook/'
+          path: _pages
 
   deploy:
     runs-on: ubuntu-latest
     needs: build
-
+    if: needs.build.outputs.artifact_id
     # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
     permissions:
       pages: write # to deploy to Pages

apps/chart-docsite/.storybook/main.ts

@@ -3,15 +3,18 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import rootConfig from '../../../.storybook/main';
 
-const config: StorybookConfig = {
+const config = {
   ...rootConfig,
+  build: {
+    previewUrl: process.env.DEPLOY_PATH,
+  },
   stories: [
     // docsite stories
     '../src/**/*.mdx',
     '../src/**/index.stories.@(js|jsx|ts|tsx)',
     // packages stories
     '../../../packages/charts/react-charts/stories/**/index.stories.@(js|jsx|ts|tsx)',
   ],
-};
+} satisfies StorybookConfig;
 
 export default config;

apps/chart-docsite/package.json

@@ -5,6 +5,7 @@
   "description": "Fluent UI React Charts Preview documentation",
   "scripts": {
     "build-storybook": "storybook build -o ./dist/storybook --docs",
+    "build-storybook:docsite": "cross-env DEPLOY_PATH=/charts/ storybook build -o ./dist/storybook --docs",
     "postbuild-storybook": "yarn rewrite-title && yarn generate-llms-docs",
     "rewrite-title": "node -r ../../scripts/ts-node/src/register ../../scripts/storybook/src/scripts/rewrite-title.ts --title 'Fluent UI Charts v9' --distPath ./dist/storybook",
     "generate-llms-docs": "yarn storybook-llms-extractor --distPath ./dist/storybook --summaryBaseUrl \"https://fluentuipr.z22.web.core.windows.net/pull/34838/chart-docsite/storybook\" --summaryTitle \"Fluent UI Charts v9\" --summaryDescription \"Fluent UI React charts is a set of modern, accessible, interactive, lightweight and highly customizable visualization library representing the Microsoft design system. These charts are used across 100s of projects inside Microsoft across Microsoft 365, Copilot and Azure.\"",

apps/public-docsite-v9/.storybook/main.js

@@ -33,6 +33,9 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
   ],
   staticDirs: ['../public'],
   addons: [...rootMain.addons],
+  build: {
+    previewUrl: process.env.DEPLOY_PATH,
+  },
   webpackFinal: (config, options) => {
     const localConfig = /** @type config */ ({ ...rootMain.webpackFinal?.(config, options) });
 

apps/public-docsite-v9/package.json

@@ -5,6 +5,7 @@
   "description": "Fluent UI React v9 documentation",
   "scripts": {
     "build-storybook": "cross-env NODE_OPTIONS=--max_old_space_size=3072 storybook build -o ./dist/storybook --docs",
+    "build-storybook:react": "cross-env NODE_OPTIONS=--max_old_space_size=3072 DEPLOY_PATH=/react/ storybook build -o ./dist/react --docs",
     "postbuild-storybook": "yarn rewrite-title && yarn generate-llms-docs",
     "rewrite-title": "node -r ../../scripts/ts-node/src/register ../../scripts/storybook/src/scripts/rewrite-title.ts --title 'Fluent UI React v9' --distPath ./dist/storybook",
     "generate-llms-docs": "yarn storybook-llms-extractor --config storybook-llms.config.js",

apps/public-docsite-v9/project.json

@@ -12,6 +12,21 @@
           "target": "build"
         }
       ]
+    },
+    "build-storybook:react": {
+      "inputs": ["default", "{workspaceRoot}/.storybook/**", "{projectRoot}/.storybook/**"],
+      "outputs": ["{projectRoot}/dist/react"]
+    },
+    "build-storybook:docsite": {
+      "executor": "nx:noop",
+      "dependsOn": [
+        "build-storybook",
+        "build-storybook:react",
+        {
+          "projects": ["chart-docsite", "web-components"],
+          "target": "build-storybook:docsite"
+        }
+      ]
     }
   }
 }

change/@fluentui-web-components-c45f5984-fbde-4048-ac94-2a9210cb41c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: setup docsite target",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

nx.json

@@ -20,6 +20,7 @@
     },
     "build-storybook": {
       "dependsOn": [],
+      "outputs": ["{projectRoot}/dist/storybook"],
       "inputs": ["default", "{workspaceRoot}/.storybook/**", "{projectRoot}/.storybook/**"],
       "cache": true
     },

packages/web-components/.storybook/main.cjs

@@ -35,6 +35,9 @@ module.exports =
         },
       },
     ],
+    build: {
+      previewUrl: process.env.DEPLOY_PATH,
+    },
     webpackFinal: async config => {
       config.resolve = config.resolve ?? {};
       config.resolve.extensions = config.resolve.extensions ?? [];

packages/web-components/package.json

@@ -67,6 +67,7 @@
     "start": "yarn start-storybook -p 6006 --docs",
     "start-storybook": "storybook dev",
     "build-storybook": "storybook build -o ./dist/storybook --docs",
+    "build-storybook:docsite": "cross-env DEPLOY_PATH=/web-components/ storybook build -o ./dist/storybook --docs",
     "e2e": "node ./scripts/e2e.js",
     "e2e:local": "node ./scripts/e2e.js --ui"
   },