chore: setup multiple storybooks to deploy

Author: mainframev

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

@@ -4,31 +4,14 @@ name: 'Docsite publish to Github Pages'
 on:
   push:
     branches:
-      - master
+      - chore/ghp-deployments-test
   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
@@ -43,23 +26,32 @@ jobs:
       - name: Install packages
         run: yarn install --frozen-lockfile
 
-      - name: Install Playwright Browsers
-        run: yarn playwright install --with-deps
+      # - name: Install Playwright Browsers
+      #   run: yarn playwright install --with-deps
+      #
+      #
+      - 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 storybook
-        run: yarn nx run public-docsite-v9:build-storybook --nxBail
-        env:
-          STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY: ${{ secrets.STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY }}
+      - name: Build affected storybooks
+        if: steps.affected_storybooks_count.outputs.value > 0
+        run: |
+          yarn nx run-many -t build-storybook:docsite --nxBail
 
       - 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: './apps/public-docsite-v9/dist/'
 
   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,7 +5,8 @@
   "description": "Fluent UI React Charts Preview documentation",
   "scripts": {
     "build-storybook": "storybook build -o ./dist/storybook --docs",
-    "postbuild-storybook": "yarn rewrite-title && yarn generate-llms-docs",
+    "build-storybook:docsite": "cross-env DEPLOY_PATH=/charts/ storybook build -o ../public-docsite-v9/dist/charts/ --docs",
+    "postbuild-storybook": "yarn rewrite-title",
     "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.\"",
     "clean": "just-scripts clean",

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) });
 
@@ -49,12 +52,5 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
       expanded: false,
       sourceUrl: 'https://github.com/microsoft/fluentui-contrib',
     },
-    charts: {
-      title: 'Charts v9',
-      // Workaround to enable docsite using PR workflow till master workflow is enabled
-      url: 'https://fluentuipr.z22.web.core.windows.net/pull/33270/chart-docsite/storybook',
-      expanded: false,
-      sourceUrl: 'https://github.com/microsoft/fluentui/charts/react-charts',
-    },
   },
 });

apps/public-docsite-v9/package.json

@@ -4,9 +4,10 @@
   "private": true,
   "description": "Fluent UI React v9 documentation",
   "scripts": {
-    "build-storybook": "cross-env NODE_OPTIONS=--max_old_space_size=3072 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 React v9' --distPath ./dist/storybook",
+    "build-storybook": "cross-env NODE_OPTIONS=--max_old_space_size=3072 DEPLOY_PATH=/react/ storybook build -o ./dist/react --docs",
+    "postbuild-storybook": "yarn rewrite-title",
+    "rewrite-title": "node -r ../../scripts/ts-node/src/register ../../scripts/storybook/src/scripts/rewrite-title.ts --title 'Fluent UI React v9' --distPath ./dist/react",
+    "inject-redirect": "node -r ../../scripts/ts-node/src/register ../../scripts/storybook/src/scripts/inject-redirect.ts --distPath ./dist/ --redirectUrl https://mainframev.github.io/fluentui/react",
     "generate-llms-docs": "yarn storybook-llms-extractor --config storybook-llms.config.js",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",

apps/public-docsite-v9/project.json

@@ -5,11 +5,14 @@
   "implicitDependencies": ["tag:type:stories"],
   "tags": ["platform:web", "vNext"],
   "targets": {
-    "build-storybook": {
+    "build-storybook:docsite": {
+      "executor": "nx:noop",
       "dependsOn": [
+        "build-storybook",
+        "inject-redirect",
         {
-          "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"],
-          "target": "build"
+          "projects": ["chart-docsite", "web-components"],
+          "target": "build-storybook:docsite"
         }
       ]
     }

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

@@ -65,6 +65,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 ../../apps/public-docsite-v9/dist/web-components --docs",
     "e2e": "node ./scripts/e2e.js",
     "e2e:local": "node ./scripts/e2e.js --ui"
   },

scripts/storybook/src/scripts/inject-redirect.ts

@@ -0,0 +1,61 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { cwd } from 'node:process';
+import dedent from 'dedent';
+
+import yargs from 'yargs';
+
+main();
+
+function main(): void {
+  try {
+    const { distPath, redirectUrl } = processArgs();
+    const normalizedDistPath = join(cwd(), distPath);
+
+    const indexPath = join(normalizedDistPath, 'index.html');
+
+    injectRedirect(indexPath, redirectUrl);
+
+    console.log(`root index.html redirect to ${distPath} has been added.`);
+  } catch (error) {
+    console.log('Failed to add redirect.');
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+function processArgs(): { distPath: string; redirectUrl: string } {
+  const argv = yargs(process.argv)
+    .usage('CLI to inject html redirect')
+    .option('distPath', {
+      type: 'string',
+      demandOption: true,
+      describe: 'Relative path to the Storybook distribution folder',
+    })
+    .option('redirectUrl', {
+      type: 'string',
+      demandOption: true,
+      describe: 'URL to redirect to',
+    })
+    .alias('h', 'help')
+    .version(false).argv;
+
+  return { redirectUrl: argv.redirectUrl, distPath: argv.distPath };
+}
+
+function injectRedirect(filePath: string, url: string) {
+  const content = dedent`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta http-equiv="refresh" content="0; url=${url}">
+          <title>Redirecting...</title>
+        </head>
+        <body>
+          <p>The has moved to <a href="${url}">${url}</a>. You will be automatically redirected.</p>
+        </body>
+      </html>
+`;
+
+  writeFileSync(filePath, content, 'utf-8');
+}