feat(public-docsite-v9-headless): boot and setup docsite for headless components (#35986)

Author: mainframev

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

@@ -49,11 +49,12 @@ jobs:
         if: steps.affected_storybooks_count.outputs.value > 0
         run: |
           rm -rf _pages
-          mkdir -p _pages/react _pages/charts _pages/web-components
+          mkdir -p _pages/react _pages/charts _pages/web-components _pages/headless
 
           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
+          cp -R apps/public-docsite-v9-headless/dist/storybook/* _pages/headless/
 
       - name: Upload Pages Artifact
         if: steps.affected_storybooks_count.outputs.value > 0

apps/pr-deploy-site/just.config.ts

@@ -33,7 +33,7 @@ const dependencies = [
   '@fluentui/public-docsite-v9',
   '@fluentui/perf-test-react-components',
   '@fluentui/theme-designer',
-  '@fluentui/react-headless-components-preview-stories',
+  '@fluentui/public-docsite-v9-headless',
   // web-components
   '@fluentui/web-components',
   // charting

apps/pr-deploy-site/pr-deploy-site.js

@@ -85,10 +85,10 @@ function main() {
       title: 'Theme Designer v9',
     },
     {
-      package: '@fluentui/react-headless-components-preview-stories',
-      link: './react-headless-components-preview-stories/storybook/index.html',
+      package: '@fluentui/public-docsite-v9-headless',
+      link: './public-docsite-v9-headless/storybook/index.html',
       icon: 'Code',
-      title: '@fluentui/react-headless-components-preview Storybook',
+      title: 'Headless Components',
     },
     {
       package: '@fluentui/perf-test',

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

@@ -0,0 +1,22 @@
+const rootMain = require('../../../.storybook/main');
+
+module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
+  stories: [
+    ...rootMain.stories,
+    // docsite stories
+    '../src/**/*.mdx',
+    '../src/**/index.stories.@(ts|tsx)',
+    // headless package stories
+    '../../../packages/react-components/react-headless-components-preview/stories/src/**/index.stories.@(ts|tsx)',
+  ],
+  addons: [...rootMain.addons],
+  build: {
+    previewUrl: process.env.DEPLOY_PATH,
+  },
+  webpackFinal: (config, options) => {
+    const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) });
+
+    return localConfig;
+  },
+});

apps/public-docsite-v9-headless/.storybook/manager.js

@@ -0,0 +1,10 @@
+import { addons } from 'storybook/manager-api';
+
+import fluentStorybookTheme from './theme';
+
+addons.setConfig({
+  enableShortcuts: false,
+  theme: fluentStorybookTheme,
+  showPanel: false,
+  showToolbar: false,
+});

apps/public-docsite-v9-headless/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+<style type="text/tailwindcss">
+  :root {
+    interpolate-size: allow-keywords;
+  }
+</style>

apps/public-docsite-v9-headless/.storybook/preview.js

@@ -0,0 +1,20 @@
+import * as rootPreview from '../../../.storybook/preview';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = {
+  ...rootPreview.parameters,
+  docs: {
+    ...rootPreview.parameters.docs,
+  },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Introduction', 'Headless Components'],
+    },
+  },
+};
+
+export const tags = ['autodocs'];

apps/public-docsite-v9-headless/.storybook/theme.js

@@ -0,0 +1,40 @@
+import { create } from 'storybook/theming';
+
+/**
+ * Theming and branding the storybook to fluent. Taken from https://storybook.js.org/docs/react/configure/theming
+ */
+const theme = create({
+  base: 'light',
+
+  // Storybook-specific color palette
+  colorPrimary: 'rgba(255, 255, 255, .4)',
+  colorSecondary: '#0078d4',
+
+  // UI
+  appBg: '#ffffff',
+  appContentBg: '#ffffff',
+  appBorderColor: '#e0e0e0', // use msft gray
+  appBorderRadius: 4,
+
+  // Fonts
+  fontBase:
+    '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#11100f',
+  textInverseColor: '#0078d4', // use msft primary blue default
+
+  // Toolbar default and active colors
+  barSelectedColor: '#0078d4', // use msft primary blue default
+
+  // Form colors
+  inputBorderRadius: 4,
+
+  // Use the fluent branding for the upper left image
+  brandTitle: 'Fluent UI Headless Components',
+  brandUrl:
+    'https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-headless-components-preview',
+});
+
+export default theme;

apps/public-docsite-v9-headless/eslint.config.js

@@ -0,0 +1,16 @@
+// @ts-check
+const fluentPlugin = require('@fluentui/eslint-plugin');
+
+/** @type {import("eslint").Linter.Config[]} */
+module.exports = [
+  ...fluentPlugin.configs['flat/react'],
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/jsx-no-bind': 'off',
+      '@typescript-eslint/no-deprecated': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      'import/no-extraneous-dependencies': ['error', { packageDir: ['.', '../..'] }],
+    },
+  },
+];

apps/public-docsite-v9-headless/just.config.ts

@@ -0,0 +1,5 @@
+import { preset, task } from '@fluentui/scripts-tasks';
+
+preset();
+
+task('build', 'build:node-lib').cached!();