chore: ghp deploys test

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

@@ -4,31 +4,14 @@ name: 'Docsite publish to Github Pages'
 on:
   push:
     branches:
-      - master
+      - chore/ghp-deployments-test-2
   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,43 @@ 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: 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) });
 
@@ -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

@@ -5,7 +5,8 @@
   "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:react": "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/storybook",
     "generate-llms-docs": "yarn storybook-llms-extractor --config storybook-llms.config.js",
     "clean": "just-scripts clean",

apps/public-docsite-v9/project.json

@@ -6,12 +6,27 @@
   "tags": ["platform:web", "vNext"],
   "targets": {
     "build-storybook": {
+      "outputs": ["{projectRoot}/dist/"],
       "dependsOn": [
         {
           "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"],
           "target": "build"
         }
       ]
+    },
+    "build-storybook:react": {
+      "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"
+        }
+      ]
     }
   }
 }

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

@@ -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 ./dist/storybook --docs",
     "e2e": "node ./scripts/e2e.js",
     "e2e:local": "node ./scripts/e2e.js --ui"
   },