diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ede5df76e853b6..320f68e6432e32 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/apps/upgrade-examples-v8-v9/.eslintrc.json b/apps/public-docsite-v9/.eslintrc.json similarity index 100% rename from apps/upgrade-examples-v8-v9/.eslintrc.json rename to apps/public-docsite-v9/.eslintrc.json diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js new file mode 100644 index 00000000000000..16e9278215893a --- /dev/null +++ b/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'], +}; diff --git a/apps/public-docsite-v9/.storybook/main.utils.js b/apps/public-docsite-v9/.storybook/main.utils.js new file mode 100644 index 00000000000000..a3e1e152d4ca90 --- /dev/null +++ b/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} */ + const packageJson = JSON.parse( + fs.readFileSync(path.resolve(__dirname, '../../../packages/react-components/package.json'), 'utf-8'), + ); + + const dependencies = /** @type {Record} */ (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; diff --git a/apps/public-docsite-v9/.storybook/main.utils.test.js b/apps/public-docsite-v9/.storybook/main.utils.test.js new file mode 100644 index 00000000000000..0f5b1bc89bad5d --- /dev/null +++ b/apps/public-docsite-v9/.storybook/main.utils.test.js @@ -0,0 +1,21 @@ +/// +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(); + }); + }); +}); diff --git a/apps/public-docsite-v9/.storybook/manager-head.html b/apps/public-docsite-v9/.storybook/manager-head.html new file mode 100644 index 00000000000000..e651c934639471 --- /dev/null +++ b/apps/public-docsite-v9/.storybook/manager-head.html @@ -0,0 +1,121 @@ + + + + + + + diff --git a/apps/public-docsite-v9/.storybook/manager.js b/apps/public-docsite-v9/.storybook/manager.js new file mode 100644 index 00000000000000..49c51c3b508d9c --- /dev/null +++ b/apps/public-docsite-v9/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons'; +import fluentStorybookTheme from './theme'; + +addons.setConfig({ + theme: fluentStorybookTheme, +}); diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js new file mode 100644 index 00000000000000..3c002cf6954c08 --- /dev/null +++ b/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', + ], + }, + }, +}; diff --git a/apps/public-docsite-v9/.storybook/theme.js b/apps/public-docsite-v9/.storybook/theme.js new file mode 100644 index 00000000000000..39004a31811dd0 --- /dev/null +++ b/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; diff --git a/apps/upgrade-examples-v8-v9/CHANGELOG.json b/apps/public-docsite-v9/CHANGELOG.json similarity index 100% rename from apps/upgrade-examples-v8-v9/CHANGELOG.json rename to apps/public-docsite-v9/CHANGELOG.json diff --git a/apps/upgrade-examples-v8-v9/CHANGELOG.md b/apps/public-docsite-v9/CHANGELOG.md similarity index 100% rename from apps/upgrade-examples-v8-v9/CHANGELOG.md rename to apps/public-docsite-v9/CHANGELOG.md diff --git a/apps/upgrade-examples-v8-v9/just.config.ts b/apps/public-docsite-v9/just.config.ts similarity index 100% rename from apps/upgrade-examples-v8-v9/just.config.ts rename to apps/public-docsite-v9/just.config.ts diff --git a/apps/upgrade-examples-v8-v9/package.json b/apps/public-docsite-v9/package.json similarity index 84% rename from apps/upgrade-examples-v8-v9/package.json rename to apps/public-docsite-v9/package.json index 9c4b84aa3cdafa..44dd884b65b872 100644 --- a/apps/upgrade-examples-v8-v9/package.json +++ b/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", diff --git a/apps/upgrade-examples-v8-v9/public/favicon-192.ico b/apps/public-docsite-v9/public/favicon-192.ico similarity index 100% rename from apps/upgrade-examples-v8-v9/public/favicon-192.ico rename to apps/public-docsite-v9/public/favicon-192.ico diff --git a/apps/upgrade-examples-v8-v9/public/favicon.ico b/apps/public-docsite-v9/public/favicon.ico similarity index 100% rename from apps/upgrade-examples-v8-v9/public/favicon.ico rename to apps/public-docsite-v9/public/favicon.ico diff --git a/apps/upgrade-examples-v8-v9/public/fluent.svg b/apps/public-docsite-v9/public/fluent.svg similarity index 100% rename from apps/upgrade-examples-v8-v9/public/fluent.svg rename to apps/public-docsite-v9/public/fluent.svg diff --git a/packages/react-components/src/Concepts/ChildWindow.stories.mdx b/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/ChildWindow.stories.mdx rename to apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx diff --git a/packages/react-components/src/Concepts/Introduction.stories.mdx b/apps/public-docsite-v9/src/Concepts/Introduction.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/Introduction.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Introduction.stories.mdx diff --git a/packages/react-components/src/Concepts/QuickStart.stories.mdx b/apps/public-docsite-v9/src/Concepts/QuickStart.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/QuickStart.stories.mdx rename to apps/public-docsite-v9/src/Concepts/QuickStart.stories.mdx diff --git a/packages/react-components/src/Concepts/SSR.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/SSR.stories.mdx rename to apps/public-docsite-v9/src/Concepts/SSR.stories.mdx diff --git a/packages/react-components/src/Concepts/Slots.stories.mdx b/apps/public-docsite-v9/src/Concepts/Slots.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/Slots.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Slots.stories.mdx diff --git a/packages/react-components/src/Concepts/StylingComponents.stories.mdx b/apps/public-docsite-v9/src/Concepts/StylingComponents.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/StylingComponents.stories.mdx rename to apps/public-docsite-v9/src/Concepts/StylingComponents.stories.mdx diff --git a/packages/react-components/src/Concepts/Upgrade/FromV8/ComponentMapping.stories.mdx b/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ComponentMapping.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/Upgrade/FromV8/ComponentMapping.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ComponentMapping.stories.mdx diff --git a/packages/react-components/src/Concepts/Upgrade/FromV8/ImportantChanges.stories.mdx b/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ImportantChanges.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/Upgrade/FromV8/ImportantChanges.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/ImportantChanges.stories.mdx diff --git a/packages/react-components/src/Concepts/Upgrade/FromV8/Overview.stories.mdx b/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Overview.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/Upgrade/FromV8/Overview.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Overview.stories.mdx diff --git a/packages/react-components/src/Concepts/Upgrade/FromV8/Planning.stories.mdx b/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Planning.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/Upgrade/FromV8/Planning.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Planning.stories.mdx diff --git a/packages/react-components/src/Concepts/Upgrade/FromV8/Troubleshooting.stories.mdx b/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Troubleshooting.stories.mdx similarity index 100% rename from packages/react-components/src/Concepts/Upgrade/FromV8/Troubleshooting.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Troubleshooting.stories.mdx diff --git a/apps/upgrade-examples-v8-v9/src/shims/ButtonShim.tsx b/apps/public-docsite-v9/src/shims/ButtonShim.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/shims/ButtonShim.tsx rename to apps/public-docsite-v9/src/shims/ButtonShim.tsx diff --git a/apps/upgrade-examples-v8-v9/src/shims/StackShim/StackItemShim.tsx b/apps/public-docsite-v9/src/shims/StackShim/StackItemShim.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/shims/StackShim/StackItemShim.tsx rename to apps/public-docsite-v9/src/shims/StackShim/StackItemShim.tsx diff --git a/apps/upgrade-examples-v8-v9/src/shims/StackShim/StackShim.tsx b/apps/public-docsite-v9/src/shims/StackShim/StackShim.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/shims/StackShim/StackShim.tsx rename to apps/public-docsite-v9/src/shims/StackShim/StackShim.tsx diff --git a/apps/upgrade-examples-v8-v9/src/shims/StackShim/index.ts b/apps/public-docsite-v9/src/shims/StackShim/index.ts similarity index 100% rename from apps/upgrade-examples-v8-v9/src/shims/StackShim/index.ts rename to apps/public-docsite-v9/src/shims/StackShim/index.ts diff --git a/apps/upgrade-examples-v8-v9/src/shims/StackShim/stackUtils.ts b/apps/public-docsite-v9/src/shims/StackShim/stackUtils.ts similarity index 100% rename from apps/upgrade-examples-v8-v9/src/shims/StackShim/stackUtils.ts rename to apps/public-docsite-v9/src/shims/StackShim/stackUtils.ts diff --git a/apps/upgrade-examples-v8-v9/src/stories/ActionButtonShim.stories.tsx b/apps/public-docsite-v9/src/stories/ActionButtonShim.stories.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/stories/ActionButtonShim.stories.tsx rename to apps/public-docsite-v9/src/stories/ActionButtonShim.stories.tsx diff --git a/apps/upgrade-examples-v8-v9/src/stories/ButtonShim.stories.tsx b/apps/public-docsite-v9/src/stories/ButtonShim.stories.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/stories/ButtonShim.stories.tsx rename to apps/public-docsite-v9/src/stories/ButtonShim.stories.tsx diff --git a/apps/upgrade-examples-v8-v9/src/stories/CommandButtonShim.stories.tsx b/apps/public-docsite-v9/src/stories/CommandButtonShim.stories.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/stories/CommandButtonShim.stories.tsx rename to apps/public-docsite-v9/src/stories/CommandButtonShim.stories.tsx diff --git a/apps/upgrade-examples-v8-v9/src/stories/CompoundButtonShim.stories.tsx b/apps/public-docsite-v9/src/stories/CompoundButtonShim.stories.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/stories/CompoundButtonShim.stories.tsx rename to apps/public-docsite-v9/src/stories/CompoundButtonShim.stories.tsx diff --git a/apps/upgrade-examples-v8-v9/src/stories/DefaultButtonShim.stories.tsx b/apps/public-docsite-v9/src/stories/DefaultButtonShim.stories.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/stories/DefaultButtonShim.stories.tsx rename to apps/public-docsite-v9/src/stories/DefaultButtonShim.stories.tsx diff --git a/apps/upgrade-examples-v8-v9/src/stories/PrimaryButtonShim.stories.tsx b/apps/public-docsite-v9/src/stories/PrimaryButtonShim.stories.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/stories/PrimaryButtonShim.stories.tsx rename to apps/public-docsite-v9/src/stories/PrimaryButtonShim.stories.tsx diff --git a/apps/upgrade-examples-v8-v9/src/stories/StackShim.stories.tsx b/apps/public-docsite-v9/src/stories/StackShim.stories.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/stories/StackShim.stories.tsx rename to apps/public-docsite-v9/src/stories/StackShim.stories.tsx diff --git a/apps/upgrade-examples-v8-v9/src/stories/ToggleButtonShim.stories.tsx b/apps/public-docsite-v9/src/stories/ToggleButtonShim.stories.tsx similarity index 100% rename from apps/upgrade-examples-v8-v9/src/stories/ToggleButtonShim.stories.tsx rename to apps/public-docsite-v9/src/stories/ToggleButtonShim.stories.tsx diff --git a/apps/upgrade-examples-v8-v9/tsconfig.json b/apps/public-docsite-v9/tsconfig.json similarity index 100% rename from apps/upgrade-examples-v8-v9/tsconfig.json rename to apps/public-docsite-v9/tsconfig.json diff --git a/apps/upgrade-examples-v8-v9/.storybook/main.js b/apps/upgrade-examples-v8-v9/.storybook/main.js deleted file mode 100644 index a2f846b8f3e9ea..00000000000000 --- a/apps/upgrade-examples-v8-v9/.storybook/main.js +++ /dev/null @@ -1,18 +0,0 @@ -const path = require('path'); -const custom = require('@fluentui/scripts/storybook/webpack.config'); - -module.exports = { - stories: ['../src/**/*.stories.tsx'], - core: { - builder: 'webpack5', - }, - babel: {}, - typescript: { - // disable react-docgen-typescript (totally not needed here, slows things down a lot) - reactDocgen: false, - }, - webpackFinal: config => { - return custom(config); - }, - addons: ['@storybook/addon-actions'], -}; diff --git a/workspace.json b/workspace.json index 867f753eb6a9c0..9864bef0451dbe 100644 --- a/workspace.json +++ b/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": [] },