chore: setup multiple storybooks to deploy

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

@@ -4,16 +4,16 @@ name: 'Docsite publish to Github Pages'
 on:
   push:
     branches:
-      - master
+      - chore/ghp-deployments
   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' }}
+    # 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' }}
+    # outputs:
+    # status: ${{ steps.verify-react-components-changed.outputs.any_changed == 'true' || github.event_name == 'workflow_dispatch' }}
 
     steps:
       - uses: actions/checkout@v4
@@ -27,8 +27,8 @@ jobs:
             packages/react-components/react-components/package.json
   build:
     runs-on: ubuntu-latest
-    needs: check
-    if: needs.check.outputs.status == 'true'
+    # needs: check
+    # if: needs.check.outputs.status == 'true'
 
     steps:
       - uses: actions/checkout@v4
@@ -47,14 +47,30 @@ jobs:
         run: yarn playwright install --with-deps
 
       - name: Build storybook
-        run: yarn nx run public-docsite-v9:build-storybook --nxBail
+        run: |
+          yarn nx run public-docsite-v9:build-storybook --nxBail
+          yarn nx run public-docsite-v9:build-storybook:react --nxBail
         env:
           STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY: ${{ secrets.STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY }}
 
-      - name: Upload Pages Artifact
+      - name: Build Charts Storybook
+        run: |
+          yarn nx run chart-docsite:build-storybook --nxBail
+        env:
+          STORYBOOK_BASE: '/fluentui/charts/'
+
+      - name: Stage site for Pages (root + /react + /charts)
+        run: |
+          rm -rf _site
+          mkdir -p _site/react _site/charts
+          cp -R apps/public-docsite-v9/dist/storybook/* _site/
+          cp -R apps/public-docsite-v9/dist/react/* _site/react/
+          cp -R apps/chart-docsite/dist/storybook/* _site/charts/
+
+      - name: Upload Pages artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './apps/public-docsite-v9/dist/storybook/'
+          path: _site
 
   deploy:
     runs-on: ubuntu-latest

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

@@ -1,9 +1,30 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
+import * as webpack from 'webpack';
+import { registerTsPaths } from '@fluentui/scripts-storybook';
+import path from 'path';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import rootConfig from '../../../.storybook/main';
 
-const config: StorybookConfig = {
+const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json');
+
+const normalizeBase = (val?: string) => {
+  let base = val || '/';
+  // ensure leading slash
+  if (!base.startsWith('/')) base = '/' + base;
+  // ensure trailing slash
+  if (!base.endsWith('/')) base = base + '/';
+  return base;
+};
+
+const withPublicPath = (cfg: webpack.Configuration) => {
+  const base = normalizeBase(process.env.STORYBOOK_BASE);
+  cfg.output = cfg.output || {};
+  cfg.output.publicPath = base;
+  return cfg;
+};
+
+const config = {
   ...rootConfig,
   stories: [
     // docsite stories
@@ -12,6 +33,29 @@ const config: StorybookConfig = {
     // packages stories
     '../../../packages/charts/react-charts/stories/**/index.stories.@(js|jsx|ts|tsx)',
   ],
-};
+  webpackFinal: (cfg, { configType }) => {
+    if (configType === 'PRODUCTION') {
+      cfg = withPublicPath(cfg);
+    }
+
+    registerTsPaths({ configFile: tsConfigAllPath, config: cfg });
+    return cfg;
+  },
+  managerHead: (head, { configType }) => {
+    const base = normalizeBase(process.env.STORYBOOK_BASE);
+    const injections = [
+      `<link rel="shortcut icon" type="image/x-icon" href="${base}favicon.ico">`,
+      `<script>window.PREVIEW_URL = '${base}iframe.html'</script>`,
+    ];
+    return configType === 'PRODUCTION' ? `${head}${injections.join('')}` : head;
+  },
+  managerWebpack: (cfg, { configType }) => {
+    if (configType === 'PRODUCTION') {
+      cfg = withPublicPath(cfg);
+    }
+
+    return cfg;
+  },
+} satisfies StorybookConfig;
 
 export default config;

apps/chart-docsite/package.json

@@ -5,7 +5,7 @@
   "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",
+    "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

@@ -5,6 +5,14 @@ const rootMain = require('../../../.storybook/main');
 
 const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json');
 
+const withPublicPath = cfg => {
+  const base = process.env.STORYBOOK_BASE || '/';
+  cfg.output = cfg.output || {};
+  cfg.output.publicPath = base;
+
+  return cfg;
+};
+
 module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
   stories: [
@@ -35,26 +43,29 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = /** @type config */ ({ ...rootMain.webpackFinal?.(config, options) });
+    withPublicPath(localConfig);
 
     // add your own webpack tweaks if needed
     registerTsPaths({ configFile: tsConfigAllPath, config: localConfig });
     registerRules({ rules: [rules.scssRule], config: localConfig });
 
     return localConfig;
   },
+  managerWebpack: cfg => withPublicPath(cfg),
   refs: {
     contrib: {
       title: 'Contributors Packages',
       url: 'https://microsoft.github.io/fluentui-contrib/docsite/',
       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',
-    },
+    // charts: {
+    //   title: 'Charts v9',
+    //   url: '/fluentui/charts',
+    // },
+    // react: {
+    //   title: 'React v9',
+    //   url: '/fluentui/react',
+    // },
   },
 });

apps/public-docsite-v9/package.json

@@ -4,8 +4,9 @@
   "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",
+    "build-storybook": "cross-env NODE_OPTIONS=--max_old_space_size=3072 STORYBOOK_BASE=/fluentui/ storybook build -o ./dist/storybook --docs",
+    "build-storybook:react": "cross-env NODE_OPTIONS=--max_old_space_size=3072 STORYBOOK_BASE=/fluentui/react/ storybook build -o ./dist/react --docs --preview-url='/fluentui/react/iframe.html'",
+    "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/storybook",
     "generate-llms-docs": "yarn storybook-llms-extractor --config storybook-llms.config.js",
     "clean": "just-scripts clean",

apps/public-docsite-v9/project.json

@@ -8,7 +8,7 @@
     "build-storybook": {
       "dependsOn": [
         {
-          "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"],
+          "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox"],
           "target": "build"
         }
       ]