Create public-website-v9 from old migration package, import react-component stories

.github/CODEOWNERS

@@ -80,7 +80,7 @@ apps/vr-tests-react-components @microsoft/fluentui-react
 apps/ssr-tests @microsoft/fluentui-react
 apps/pr-deploy-site @microsoft/fluentui-react-build
 apps/test-bundles @microsoft/fluentui-react
-apps/upgrade-examples-v8-v9 @microsoft/cxe-red @microsoft/cxe-coastal
+apps/public-docsite-v9 @microsoft/cxe-red @microsoft/cxe-coastal
 apps/theming-designer @microsoft/fluentui-react
 
 #### Packages

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

@@ -0,0 +1,33 @@
+const utils = require('./main.utils');
+const rootMain = require('../../../.storybook/main');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)', ...utils.getVnextStories()],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true,
+      },
+    },
+  ],
+  core: {
+    builder: 'webpack5',
+  },
+  babel: {},
+  typescript: {
+    // disable react-docgen-typescript (totally not needed here, slows things down a lot)
+    reactDocgen: false,
+  },
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    // add your own webpack tweaks if needed
+
+    return localConfig;
+  },
+  addons: ['@storybook/addon-actions', '@storybook/addon-docs'],
+};

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

@@ -0,0 +1,22 @@
+/**
+ * This file contains utils for main.js to mitigate diffs when migration generator is being invoked in batch (via --all flag)
+ * Code in this module is supposed to run only against node js env (webpack) - thus it uses commonjs modules
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+function getVnextStories() {
+  /** @type {Record<string,unknown>} */
+  const packageJson = JSON.parse(
+    fs.readFileSync(path.resolve(__dirname, '../../../packages/react-components/package.json'), 'utf-8'),
+  );
+
+  const dependencies = /** @type {Record<string,string>} */ (packageJson.dependencies);
+
+  return Object.keys({ ...dependencies, '@fluentui/react-components': '' })
+    .filter(pkgName => pkgName.startsWith('@fluentui/'))
+    .map(pkgName => '../../../packages/' + pkgName.replace('@fluentui/', '') + '/src/**/*.stories.@(ts|tsx|mdx)');
+}
+
+exports.getVnextStories = getVnextStories;

apps/public-docsite-v9/.storybook/main.utils.test.js

@@ -0,0 +1,21 @@
+/// <reference types="jest" />
+const utils = require('./main.utils');
+
+describe(`main utils`, () => {
+  describe(`#getVnextStories`, () => {
+    it(`should generate storybook stories string array of glob based on package.json#dependencies field`, () => {
+      const actual = utils.getVnextStories();
+
+      const expected = [
+        expect.stringContaining('../../react-'),
+        expect.stringContaining('/src/**/*.stories.@(ts|tsx|mdx)'),
+      ];
+
+      expect(actual).toEqual(expect.arrayContaining(expected));
+
+      const first = actual[0];
+      expect(first.startsWith('../../react-')).toBeTruthy();
+      expect(first.endsWith('/src/**/*.stories.@(ts|tsx|mdx)')).toBeTruthy();
+    });
+  });
+});

apps/public-docsite-v9/.storybook/manager-head.html

@@ -0,0 +1,121 @@
+<!--
+  Override the default favicon used in the Storybook in the browser tab.
+ -->
+<link rel="shortcut icon" href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png" />
+<link
+  rel="icon"
+  type="image/png"
+  href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png"
+  sizes="192x192"
+/>
+
+<!--
+  Override the default styles used in the Storybook svg icons for the left tree panel.
+
+  @see https://storybook.js.org/docs/react/configure/theming#css-escape-hatches
+
+  > 💡 NOTE:
+  >
+  > This is brittle way for providing custom non thenable styles for manager UI
+  >
+  > Those selectors might change on any storybook version bump.
+ -->
+
+<style>
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI Light'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
+    font-weight: 100;
+  }
+
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI Semilight'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
+    font-weight: 200;
+  }
+
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
+    font-weight: 400;
+  }
+
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI Semibold'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
+    font-weight: 600;
+  }
+
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI Bold'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
+    font-weight: 700;
+  }
+
+  #storybook-explorer-searchfield {
+    font-weight: 400 !important;
+    font-size: 14px !important;
+    letter-spacing: -0.01em !important;
+    line-height: 14px !important;
+  }
+
+  .sidebar-item svg,
+  .sidebar-svg-icon {
+    color: #11100f !important;
+  }
+
+  .sidebar-item[data-selected='true'] svg,
+  .sidebar-item[data-selected='true'] .sidebar-svg-icon {
+    color: #ffffff !important;
+  }
+
+  .sidebar-subheading {
+    font-weight: 600 !important;
+    font-size: 16px !important;
+    letter-spacing: 0px !important;
+    line-height: 24px !important;
+    text-transform: none !important;
+    color: #11100f !important;
+  }
+
+  .sidebar-item {
+    font-weight: 400 !important;
+    font-size: 14px !important;
+    letter-spacing: -0.01em !important;
+    line-height: 14px !important;
+    color: #11100f !important;
+  }
+
+  .sidebar-item[data-selected='true'] {
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    letter-spacing: -0.01em !important;
+    line-height: 14px !important;
+    color: #ffffff !important;
+  }
+
+  /*
+  Storybook has proposed a feature for this in https://github.com/storybookjs/storybook/issues/9209
+  which will configure stories to exist in deeplink URL format, but do not appear in the nav tree or the docs page
+  Usign suggested temporary workaround until storybook gets proper support
+  See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing
+  */
+  [id*='accessibility-scenario'] {
+    display: none !important;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import fluentStorybookTheme from './theme';
+
+addons.setConfig({
+  theme: fluentStorybookTheme,
+});

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

@@ -0,0 +1,26 @@
+/** @type {typeof rootPreview.parameters} */
+export const parameters = {
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      /**
+       * @see https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
+       */
+      order: [
+        'Concepts',
+        [
+          'Introduction',
+          'Developer',
+          ['Quick Start', 'Styling Components', 'Positioning Components'],
+          'Upgrading',
+          [
+            'from v8',
+            ['Overview', 'Important changes', 'Planning your journey', 'Component Mapping', 'Troubleshooting'],
+          ],
+        ],
+        'Theme',
+        'Components',
+      ],
+    },
+  },
+};

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

@@ -0,0 +1,41 @@
+import { create } from '@storybook/theming';
+import logo from '../public/fluent.svg';
+
+/**
+ * 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 React Components',
+  brandUrl: 'https://github.com/microsoft/fluentui',
+  brandImage: logo,
+});
+
+export default theme;

apps/upgrade-examples-v8-v9/package.json → apps/public-docsite-v9/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@fluentui/upgrade-examples-v8-v9",
+  "name": "@fluentui/public-docsite-v9",
   "version": "1.0.0",
   "private": true,
   "description": "A collection of examples demonstrating how to upgrade from v8 to v9",
@@ -14,7 +14,9 @@
     "start": "just-scripts dev:storybook"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "*"
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/react-storybook-addon": "9.0.0-rc.1",
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
     "@fluentui/react": "^8.66.2",

workspace.json

@@ -742,8 +742,8 @@
       "sourceRoot": "typings",
       "tags": ["platform:any"]
     },
-    "@fluentui/upgrade-examples-v8-v9": {
-      "root": "apps/upgrade-examples-v8-v9",
+    "@fluentui/public-docsite-v9": {
+      "root": "apps/public-docsite-v9",
       "projectType": "application",
       "implicitDependencies": []
     },