diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml index fe9ae38764de78..99b1ad09b1a892 100644 --- a/.github/workflows/docsite-publish-ghpages.yml +++ b/.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 diff --git a/apps/chart-docsite/.storybook/main.ts b/apps/chart-docsite/.storybook/main.ts index d35f839a4578eb..bc0e2d0a934fd5 100644 --- a/apps/chart-docsite/.storybook/main.ts +++ b/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 = [ + ``, + ``, + ]; + return configType === 'PRODUCTION' ? `${head}${injections.join('')}` : head; + }, + managerWebpack: (cfg, { configType }) => { + if (configType === 'PRODUCTION') { + cfg = withPublicPath(cfg); + } + + return cfg; + }, +} satisfies StorybookConfig; export default config; diff --git a/apps/chart-docsite/package.json b/apps/chart-docsite/package.json index 26d36593c3aa06..cd1f0695a8c7fc 100644 --- a/apps/chart-docsite/package.json +++ b/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", diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index e4210c5db6b3f9..cc5ce67c3d1af8 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/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} */ ({ ...rootMain, stories: [ @@ -35,6 +43,7 @@ module.exports = /** @type {Omit { const localConfig = /** @type config */ ({ ...rootMain.webpackFinal?.(config, options) }); + withPublicPath(localConfig); // add your own webpack tweaks if needed registerTsPaths({ configFile: tsConfigAllPath, config: localConfig }); @@ -42,6 +51,7 @@ module.exports = /** @type {Omit withPublicPath(cfg), refs: { contrib: { title: 'Contributors Packages', @@ -49,12 +59,13 @@ module.exports = /** @type {Omit