diff --git a/.storybook/docs-root.css b/.storybook/docs-root.css index 81aa81ca4f9357..aae3c097b2045d 100644 --- a/.storybook/docs-root.css +++ b/.storybook/docs-root.css @@ -36,13 +36,13 @@ } #storybook-docs .sbdocs-img.featured-image { - max-width: 100%; margin: 48px 0; display: block; + border-radius: 24px; } #storybook-docs .sbdocs-img { - border-radius: 24px; + max-width: 100%; } #storybook-docs .sbdocs hr:not(.sbdocs-preview hr) { diff --git a/.storybook/main.js b/.storybook/main.js index 92e4a4770f30f3..6c81fa96b83515 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,6 +4,8 @@ const fs = require('fs'); const { loadWorkspaceAddon, registerTsPaths, + registerRules, + rules, processBabelLoaderOptions, getImportMappingsForExportToSandboxAddon, } = require('@fluentui/scripts-storybook'); @@ -15,17 +17,13 @@ const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-hea module.exports = /** @type {import('./types').StorybookConfig} */ ({ stories: [], addons: [ - // external custom addons - '@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-links', - 'storybook-addon-performance', // https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly '@storybook/addon-mdx-gfm', // internal monorepo custom addons - /** {@link file://./../packages/react-components/react-storybook-addon/package.json} */ loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath }), /** {@link file://./../packages/react-components/react-storybook-addon-export-to-sandbox/package.json} */ @@ -43,6 +41,7 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({ }), ], webpackFinal: config => { + registerRules({ config, rules: [rules.swcRule] }); registerTsPaths({ config, configFile: tsConfigPath }); if ((process.env.CI || process.env.TF_BUILD) && config.plugins) { @@ -60,13 +59,9 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({ options: { builder: { lazyCompilation: true, - useSWC: true, }, }, }, - docs: { - autodocs: true, - }, /** * Programmatically enhance previewHead as inheriting just static file `preview-head.html` doesn't work in monorepo * @see https://storybook.js.org/docs/addons/writing-presets#ui-configuration @@ -76,28 +71,4 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({ typescript: { reactDocgen: 'react-docgen-typescript', }, - - swc() { - return { - jsc: { - target: 'es2019', - parser: { - syntax: 'typescript', - tsx: true, - decorators: true, - dynamicImport: true, - }, - transform: { - decoratorMetadata: true, - legacyDecorator: true, - }, - keepClassNames: true, - externalHelpers: true, - loose: true, - minify: { - mangle: false, - }, - }, - }; - }, }); diff --git a/.storybook/types.d.ts b/.storybook/types.d.ts index ac62ee96b22caa..30030f8a4a934c 100644 --- a/.storybook/types.d.ts +++ b/.storybook/types.d.ts @@ -1,4 +1,7 @@ import type { StorybookConfig as StorybookBaseConfig } from '@storybook/react-webpack5'; -export type StorybookConfig = StorybookBaseConfig & - Required>; +export type StorybookConfig = Omit & { + stories: NonNullable>; + addons: NonNullable>; + webpackFinal: NonNullable; +}; diff --git a/apps/chart-docsite/.storybook/preview.tsx b/apps/chart-docsite/.storybook/preview.tsx index 7f04a06d823503..4aafc8a3b35a5d 100644 --- a/apps/chart-docsite/.storybook/preview.tsx +++ b/apps/chart-docsite/.storybook/preview.tsx @@ -19,4 +19,6 @@ const preview: Preview & { parameters: import('@fluentui/react-storybook-addon') }, }; +export const tags = ['autodocs']; + export default preview; diff --git a/apps/chart-docsite/.storybook/tsconfig.json b/apps/chart-docsite/.storybook/tsconfig.json index 164470082ad1ef..d74475cd06ffd2 100644 --- a/apps/chart-docsite/.storybook/tsconfig.json +++ b/apps/chart-docsite/.storybook/tsconfig.json @@ -10,13 +10,5 @@ "../../../node_modules/@nx/react/typings/image.d.ts" ], "exclude": ["../**/*.spec.ts", "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"], - "include": [ - "../stories/**/*.stories.ts", - "../stories/**/*.stories.js", - "../stories/**/*.stories.jsx", - "../stories/**/*.stories.tsx", - "../stories/**/*.stories.mdx", - "*.ts", - "*.js" - ] + "include": ["*.tsx", "*.ts", "*.jsx", "*.js"] } diff --git a/apps/public-docsite-v9/.storybook/docs-root-v9.css b/apps/public-docsite-v9/.storybook/docs-root-v9.css index 53af064c22f08e..28896582b36cf8 100644 --- a/apps/public-docsite-v9/.storybook/docs-root-v9.css +++ b/apps/public-docsite-v9/.storybook/docs-root-v9.css @@ -2,7 +2,7 @@ /* remove unnecessary padding now that theme switcher is not taking up space */ #storybook-docs .sbdocs-wrapper { background: transparent !important; - padding-top: 0; + padding: 0 48px; } /* sb-show-main is missing during page transitions causing a page shift */ @@ -18,6 +18,7 @@ .sb-preparing-story, .sb-preparing-docs, .sb-nopreview, -.sb-errordisplay { +.sb-errordisplay, +.sidebar-container .search-field + div { display: none !important; } diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index ee1a906095c8d2..1482b1839ec516 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -9,7 +9,7 @@ module.exports = /** @type {Omit { - const localConfig = /** @type config */ ({ ...rootMain.webpackFinal?.(config, options) }); + const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) }); // add your own webpack tweaks if needed registerTsPaths({ configFile: tsConfigAllPath, config: localConfig }); diff --git a/apps/public-docsite-v9/.storybook/manager-head.html b/apps/public-docsite-v9/.storybook/manager-head.html index 0e2b46e292e90d..0d3306a8741af4 100644 --- a/apps/public-docsite-v9/.storybook/manager-head.html +++ b/apps/public-docsite-v9/.storybook/manager-head.html @@ -138,6 +138,10 @@ color: #11100f !important; } + .sidebar-item a { + align-items: center !important; + } + .sidebar-item[data-selected='true'] { font-weight: 600 !important; font-size: 14px !important; diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js index 490733e77badd7..2742ddd665d876 100644 --- a/apps/public-docsite-v9/.storybook/preview.js +++ b/apps/public-docsite-v9/.storybook/preview.js @@ -2,7 +2,7 @@ import * as rootPreview from '../../../.storybook/preview'; import './docs-root-v9.css'; -/** @type {NonNullable} */ +/** @type {NonNullable} */ export const decorators = rootPreview.decorators; /** @type {import("@fluentui/react-storybook-addon").FluentParameters & typeof rootPreview.parameters} */ @@ -56,3 +56,5 @@ export const parameters = { docs: true, }, }; + +export const tags = ['autodocs']; diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.mdx similarity index 94% rename from apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx rename to apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.mdx index e71f4feed04269..9032fd151d7358 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.mdx @@ -1,8 +1,8 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/blocks'; import { FullscreenLink } from './utils'; -export const parentPath = 'concepts-developer-accessibility-stories'; +export const parentPath = 'concepts-developer-accessibility-scenarios'; - + # Accessibility Scenarios diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx index 8f50cd7590c4b2..c27835942c7a8c 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx @@ -20,5 +20,7 @@ export { DeviceControlsToggleButtons } from './ToggleButton.stories'; export { ButtonsWithTooltip } from './Tooltip.stories'; export default { - title: 'Concepts/Developer/Accessibility/Stories', + title: 'Concepts/Developer/Accessibility/Scenarios', + // Hide from autogenerated docs, as we have a custom MDX doc file + tags: ['!autodocs'], }; diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleComponents.stories.mdx b/apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleComponents.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleComponents.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleComponents.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleExperiences.stories.mdx b/apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleExperiences.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleExperiences.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleExperiences.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/ComponentLabelling.stories.mdx b/apps/public-docsite-v9/src/Concepts/Accessibility/ComponentLabelling.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Accessibility/ComponentLabelling.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Accessibility/ComponentLabelling.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/DebuggingNotifications.stories.mdx b/apps/public-docsite-v9/src/Concepts/Accessibility/DebuggingNotifications.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Accessibility/DebuggingNotifications.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Accessibility/DebuggingNotifications.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.stories.mdx b/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.mdx similarity index 91% rename from apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.mdx index 3e8ee155d18294..31fe4c2bd2950d 100644 --- a/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.mdx @@ -1,4 +1,5 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs'; +import { FluentCanvas, FluentStory } from '@fluentui/react-storybook-addon'; @@ -43,9 +44,9 @@ Both of the helper functions are powered using the method described above. The [AccordionHeader](?path=/docs/components-accordion--default) component uses `createFocusOutlineStyle` to style the default outline style when focus is detected - - - + + + ```tsx import { makeStyles } from '@fluentui/react-components'; @@ -77,9 +78,9 @@ function Component() { The [Link](?path=/docs/components-link--default) component uses `createCustomFocusIndicatorStyle` to add a double underlined focus indication style - - - + + + ```tsx import { makeStyles, createCustomFocusIndicatorStyle } from '@fluentui/react-components'; diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/Truncation.stories.mdx b/apps/public-docsite-v9/src/Concepts/Accessibility/Truncation.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Accessibility/Truncation.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Accessibility/Truncation.mdx diff --git a/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx b/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.mdx similarity index 99% rename from apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx rename to apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.mdx index 12cf681787cefe..8591d6b864ca27 100644 --- a/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/blocks'; diff --git a/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx b/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx rename to apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.mdx diff --git a/apps/public-docsite-v9/src/Concepts/BrowserSupportMatrix.stories.mdx b/apps/public-docsite-v9/src/Concepts/BrowserSupportMatrix.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/BrowserSupportMatrix.stories.mdx rename to apps/public-docsite-v9/src/Concepts/BrowserSupportMatrix.mdx diff --git a/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx b/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx rename to apps/public-docsite-v9/src/Concepts/BuildTimeStyles.mdx index 02b7f2feb0ba4c..5d9bfab4e65b9c 100644 --- a/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.mdx @@ -165,7 +165,7 @@ You can look at the image below which describes what work is done during style r > 💡 NOTE: this work only happens once, during first render. -{'Illustration +{'Illustration The final result before the CSS rules are inserted into DOM can be compiled ahead of time during build time through the methods described above. Once the styles of our simple example are transformed at build time the resulting bundle contains diff --git a/apps/public-docsite-v9/src/Concepts/Introduction.stories.mdx b/apps/public-docsite-v9/src/Concepts/Introduction.mdx similarity index 92% rename from apps/public-docsite-v9/src/Concepts/Introduction.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Introduction.mdx index a37bfb885a29d2..90d0b805a08ebf 100644 --- a/apps/public-docsite-v9/src/Concepts/Introduction.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Introduction.mdx @@ -9,7 +9,11 @@ import { WhatsNewBoxes } from './components/WhatsNewBoxes'; v{pkg.version} -An image of many user interface component designs. +An image of many user interface component designs. ( - Preview of a Word document + Preview of a Word document ); ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Flex.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Flex.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Flex.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Flex.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/FlexItem.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/FlexItem.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/FlexItem.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/FlexItem.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Grid.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Grid.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Grid.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Grid.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/ItemLayout.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/ItemLayout.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/ItemLayout.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/ItemLayout.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/RadioGroup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/RadioGroup.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/RadioGroup.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/RadioGroup.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Ref.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Ref.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Ref.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Ref.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Segment.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Segment.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Segment.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Segment.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Spinner.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Spinner.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Spinner.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Spinner.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/TabList.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/TabList.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/TabList.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/TabList.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Text.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Text.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Text.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Text.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Textarea.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Textarea.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Textarea.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Textarea.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Icons.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Icons.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/Icons.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Icons.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-custom-accessibility.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-custom-accessibility.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-custom-accessibility.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-custom-accessibility.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/AvatarGroup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/AvatarGroup.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/AvatarGroup.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/AvatarGroup.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Button.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/Card.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/Card.mdx similarity index 97% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/Card.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/Card.mdx index 0902bbe6cc889e..67f9b4fde66920 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/Card.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/Card.mdx @@ -72,7 +72,7 @@ export const SizedCard = () => { return ( - Company Logo + Company Logo { Revenue stream proposal fiscal year 2016 version02.pptx } + image={} header={Annie Lindqvist} description={Created a few minutes ago} /> diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardPreview.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardPreview.mdx similarity index 89% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardPreview.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardPreview.mdx index ae3e561965bbc9..67d24518bf3096 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardPreview.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardPreview.mdx @@ -51,8 +51,8 @@ import { Card, CardHeader, CardPreview } from '@fluentui/react-card/unstable'; export const Component = () => { return ( - }> - Preview of a Word document + }> + Preview of a Word document ); @@ -110,17 +110,17 @@ export const Default = () => {
- Powerpoint logo + Powerpoint logo Revenue stream proposal fiscal year 2016 version02
- Powerpoint logo + Powerpoint logo New Contoso Collaboration for Conference Presentation Draft
- Powerpoint logo + Powerpoint logo Spec Sheet for design
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Charts.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Charts.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Charts.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Charts.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Checkbox.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Checkbox.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Checkbox.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Checkbox.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/ColorPicker.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/ColorPicker.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/ColorPicker.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/ColorPicker.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Divider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Divider.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Divider.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Divider.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.Stack.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.Stack.mdx similarity index 99% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.Stack.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.Stack.mdx index 59a7f9c0e77bed..64008f8f2fbc5c 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.Stack.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.Stack.mdx @@ -48,7 +48,7 @@ Stack's approach to layout is slightly different from Northstar's Flex, and CSS ```html -
+
...
``` @@ -544,8 +544,8 @@ The `wrap` prop will also change the rendering. As such find below the styles an ```html -
-
+
+
...
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.StackItem.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.StackItem.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.StackItem.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.StackItem.mdx index bb6e2663fe10b3..971c0efc8258d7 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.StackItem.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.StackItem.mdx @@ -37,8 +37,8 @@ import { CodeComparison, CodeExample } from './utils.stories'; ```html -
-
Item
+
+
Item
``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.test.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.test.tsx index 1befb6fdfddb87..f2383c04f013b5 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.test.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.test.tsx @@ -50,7 +50,7 @@ test('renders Markdown source blocks', () => { code={`function test() { console.log("test"); }`} - language="js" + language="jsextra" />, ], }); @@ -85,7 +85,7 @@ test.each([ ['css', 'CSS'], ['js', 'JavaScript'], ['jsx', 'React'], -])('for language %s uses the header %s', (language, expectedHeader) => { +] as const)('for language %s uses the header %s', (language, expectedHeader) => { const renderer = createRenderer(); renderer.render( @@ -99,7 +99,7 @@ test.each([ const result = renderer.getRenderOutput(); expect(result.props).toEqual({ - children: [

{expectedHeader}

, ], + children: [

{expectedHeader}

, ], }); }); @@ -117,6 +117,6 @@ test('overrides the default title', () => { const result = renderer.getRenderOutput(); expect(result.props).toEqual({ - children: [

Custom title

, ], + children: [

Custom title

, ], }); }); diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.tsx index 7077cc876b3aee..fd536bff6c733e 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.tsx @@ -53,7 +53,7 @@ export const CodeExample = (props: { title?: string; children: React.ReactElemen return (

{title ?? codeLanguages[language]}

- +
); }; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/GroupedList.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/GroupedList.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/GroupedList.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/GroupedList.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Keytips.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Keytips.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Keytips.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Keytips.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Label.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Label.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Label.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Label.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Menu.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Menu.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Menu.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Menu.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.mdx new file mode 100644 index 00000000000000..4e9e958441f335 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.mdx @@ -0,0 +1,160 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Slider Migration + +Fluent UI V8 provides the `Slider` control to represents an input that allows user to choose a value from within a specific range. +Fluent UI v9 provides a `Slider` control with a different API. + +## Examples + +### Basic Migration + +Basic usage of `Slider` V8 + +```tsx +import { Slider } from '@fluentui/react/lib/Slider'; +import * as React from 'react'; + +export const V8BasicExample = () => ; + +export const V8SnappingExample = () => ( + +); + +export const V8ControlledExample = () => { + const [sliderValue, setSliderValue] = React.useState(0); + const sliderOnChange = (value: number) => setSliderValue(value); + return ; +}; + +export const V8FormattedValueExample = () => { + const sliderAriaValueText = (value: number) => value + ' percent'; + const sliderValueFormat = (value: number) => value + '%'; + return ( + + ); +}; +``` + +An equivalent `Slider` in v9 is + +```tsx +import * as React from 'react'; +import { Slider, SliderProps, Label, useId, makeStyles, tokens } from '@fluentui/react-components'; + +export const V9BasicExample = () => { + const basicId = useId(); + return ( + <> + + + + ); +}; + +export const V9SnappingExample = () => { + const snappingId = useId(); + return ( + <> + + + + ); +}; + +export const V9ControlledExample = () => { + const [sliderValue, setSliderValue] = React.useState(0); + const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value); + const controlledId = useId(); + return ( + <> + + + + ); +}; + +const useGetFormattedExampleStyles = makeStyles({ + wrapper: { + display: 'grid', + alignItems: 'center', + gridTemplateColumns: '1fr auto', + columnGap: tokens.spacingHorizontalL, + }, +}); + +export const V9FormattedValueExample = () => { + const styles = useGetFormattedExampleStyles(); + const [sliderValue, setSliderValue] = React.useState(0); + const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value); + const formattedId = useId(); + const sliderAriaValueText = `${sliderValue} percent`; + const sliderValueFormat = `${sliderValue}%`; + return ( + <> + +
+ + {sliderValueFormat} +
+ + ); +}; +``` + +## Props Mapping + +## Migration from v8 + +- `ariaLabel` => use `aria-label` instead +- `ariaValueText` => explicitly set `aria-valuetext` +- `buttonProps` => Slider props, other than className and id, are passed to `input` element +- `componentRef` => use `ref` instead. +- `inline` => use css, or wrap in flex parent +- `label` => Use `Label` control with `htmlFor` and `id` +- `onChanged` => use onChange and onMouse events +- `origin` => no longer supported +- `originFromZero` => no longer supported +- `ranged`, `defaultLowerValue` and `lowerValue` => Not supported. Multi value slider will be future work in separate control. +- `showValue` and `valueFormat` => use explicitly rendered value instead +- `snapToStep` => use `step` instead +- `styles` => pass classNames to individual slots +- `theme` => use `FluentProvider` HOC instead + +## Property mapping + +| v8 `Slider` | v9 `Slider` | +| ------------------- | ---------------- | +| | | +| `ariaLabel` | `aria-label` | +| `ariaValueText` | `aria-valuetext` | +| `buttonProps` | | +| `componentRef` | `ref` | +| `defaultLowerValue` | | +| `inline` | | +| `input` | `input` | +| `label` | | +| `lowerValue` | | +| `onChanged` | `onChange` | +| `origin` | | +| `originFromZero` | | +| `ranged` | | +| `showValue` | | +| `snapToStep` | `step` | +| `styles` | `className` | +| `theme` | | +| `valueFormat` | | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx deleted file mode 100644 index 41e5233222ae84..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx +++ /dev/null @@ -1,95 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; - -import v8Demo from '!!raw-loader!./Sliderv8Examples.stories.tsx'; -import v9Demo from '!!raw-loader!./Sliderv9Examples.stories.tsx'; - -import { - V8BasicExample, - V8SnappingExample, - V8ControlledExample, - V8FormattedValueExample, -} from './Sliderv8Examples.stories'; -import { - V9BasicExample, - V9SnappingExample, - V9ControlledExample, - V9FormattedValueExample, -} from './Sliderv9Examples.stories'; - - - -# Slider Migration - -Fluent UI V8 provides the `Slider` control to represents an input that allows user to choose a value from within a specific range. -Fluent UI v9 provides a `Slider` control with a different API. - -## Examples - -### Basic Migration - -Basic usage of `Slider` V8 - - - - - - - - - - -An equivalent `Slider` in v9 is - - - -
- - - - -
- - - -## Props Mapping - -## Migration from v8 - -- `ariaLabel` => use `aria-label` instead -- `ariaValueText` => explicitely set `aria-valuetext` -- `buttonProps` => Slider props, other than className and id, are passed to `input` element -- `componentRef` => use `ref` instead. -- `inline` => use css, or wrap in flex parent -- `label` => Use `Label` control with `htmlFor` and `id` -- `onChanged` => use onChange and onMouse events -- `origin` => no longer supported -- `originFromZero` => no longer supported -- `ranged`, `defaultLowerValue` and `lowerValue` => Not supported. Multi value slider will be future work in separate control. -- `showValue` and `valueFormat` => use explicitly rendered value instead -- `snapToStep` => use `step` instead -- `styles` => pass classNames to individual slots -- `theme` => use `FluentProvider` HOC instead - -## Property mapping - -| v8 `Slider` | v9 `Slider` | -| ------------------- | ---------------- | -| | | -| `ariaLabel` | `aria-label` | -| `ariaValueText` | `aria-valuetext` | -| `buttonProps` | | -| `componentRef` | `ref` | -| `defaultLowerValue` | | -| `inline` | | -| `input` | `input` | -| `label` | | -| `lowerValue` | | -| `onChanged` | `onChange` | -| `origin` | | -| `originFromZero` | | -| `ranged` | | -| `showValue` | | -| `snapToStep` | `step` | -| `styles` | `className` | -| `theme` | | -| `valueFormat` | | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx deleted file mode 100644 index ee79dcb435b31a..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Slider } from '@fluentui/react/lib/Slider'; -import * as React from 'react'; - -export const V8BasicExample = () => ; - -export const V8SnappingExample = () => ( - -); - -export const V8ControlledExample = () => { - const [sliderValue, setSliderValue] = React.useState(0); - const sliderOnChange = (value: number) => setSliderValue(value); - return ; -}; - -export const V8FormattedValueExample = () => { - const sliderAriaValueText = (value: number) => value + ' percent'; - const sliderValueFormat = (value: number) => value + '%'; - return ( - - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx deleted file mode 100644 index 75c26dff94bf3e..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import { Slider, SliderProps, Label, useId, makeStyles, tokens } from '@fluentui/react-components'; - -export const V9BasicExample = () => { - const basicId = useId(); - return ( - <> - - - - ); -}; - -export const V9SnappingExample = () => { - const snappingId = useId(); - return ( - <> - - - - ); -}; - -export const V9ControlledExample = () => { - const [sliderValue, setSliderValue] = React.useState(0); - const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value); - const controlledId = useId(); - return ( - <> - - - - ); -}; - -const useGetFormattedExampleStyles = makeStyles({ - wrapper: { - display: 'grid', - alignItems: 'center', - gridTemplateColumns: '1fr auto', - columnGap: tokens.spacingHorizontalL, - }, -}); - -export const V9FormattedValueExample = () => { - const styles = useGetFormattedExampleStyles(); - const [sliderValue, setSliderValue] = React.useState(0); - const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value); - const formattedId = useId(); - const sliderAriaValueText = `${sliderValue} percent`; - const sliderValueFormat = `${sliderValue}%`; - return ( - <> - -
- - {sliderValueFormat} -
- - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Spinner.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Spinner.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Spinner.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Spinner.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Tabs.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Tabs.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Tabs.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Tabs.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Textarea.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Textarea.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Textarea.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Textarea.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorMapping.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorMapping.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorMapping.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorMapping.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/GettingStarted.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/GettingStarted.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/GettingStarted.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/GettingStarted.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/HandlingBreakingChanges.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/HandlingBreakingChanges.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/HandlingBreakingChanges.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/HandlingBreakingChanges.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.mdx diff --git a/apps/public-docsite-v9/src/Concepts/PackageMaturityLevels.stories.mdx b/apps/public-docsite-v9/src/Concepts/PackageMaturityLevels.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/PackageMaturityLevels.stories.mdx rename to apps/public-docsite-v9/src/Concepts/PackageMaturityLevels.mdx diff --git a/apps/public-docsite-v9/src/Concepts/QuickStart.stories.mdx b/apps/public-docsite-v9/src/Concepts/QuickStart.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/QuickStart.stories.mdx rename to apps/public-docsite-v9/src/Concepts/QuickStart.mdx diff --git a/apps/public-docsite-v9/src/Concepts/ReactVersionSupport.stories.mdx b/apps/public-docsite-v9/src/Concepts/ReactVersionSupport.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/ReactVersionSupport.stories.mdx rename to apps/public-docsite-v9/src/Concepts/ReactVersionSupport.mdx diff --git a/apps/public-docsite-v9/src/Concepts/SSR/NextJSAppDir.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/NextJSAppDir.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/SSR/NextJSAppDir.stories.mdx rename to apps/public-docsite-v9/src/Concepts/SSR/NextJSAppDir.mdx diff --git a/apps/public-docsite-v9/src/Concepts/SSR/Nextjs.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/Nextjs.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/SSR/Nextjs.stories.mdx rename to apps/public-docsite-v9/src/Concepts/SSR/Nextjs.mdx diff --git a/apps/public-docsite-v9/src/Concepts/SSR/Portals.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/Portals.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/SSR/Portals.stories.mdx rename to apps/public-docsite-v9/src/Concepts/SSR/Portals.mdx diff --git a/apps/public-docsite-v9/src/Concepts/SSR/Remix.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/Remix.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/SSR/Remix.stories.mdx rename to apps/public-docsite-v9/src/Concepts/SSR/Remix.mdx diff --git a/apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/SSR.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/SSR/SSR.stories.mdx rename to apps/public-docsite-v9/src/Concepts/SSR/SSR.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Slots/Slots.stories.mdx b/apps/public-docsite-v9/src/Concepts/Slots/Slots.mdx similarity index 97% rename from apps/public-docsite-v9/src/Concepts/Slots/Slots.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Slots/Slots.mdx index a77e06749ac475..9c839fcf2c6613 100644 --- a/apps/public-docsite-v9/src/Concepts/Slots/Slots.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Slots/Slots.mdx @@ -103,7 +103,7 @@ For example, the `Button` component can be passed an `img` or an `CalendarRegula ```tsx <> - ``` @@ -161,8 +161,8 @@ Note that you must choose from one of the available element types the slot suppo ``` ```html -

- Accordion Header as h1 +

+ Accordion Header as h1

``` diff --git a/apps/public-docsite-v9/src/Concepts/StylingComponents.stories.mdx b/apps/public-docsite-v9/src/Concepts/StylingComponents.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/StylingComponents.stories.mdx rename to apps/public-docsite-v9/src/Concepts/StylingComponents.mdx diff --git a/apps/public-docsite-v9/src/Concepts/SupportedPlatforms.stories.mdx b/apps/public-docsite-v9/src/Concepts/SupportedPlatforms.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/SupportedPlatforms.stories.mdx rename to apps/public-docsite-v9/src/Concepts/SupportedPlatforms.mdx diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.mdx similarity index 98% rename from apps/public-docsite-v9/src/Concepts/Theming.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Theming.mdx index d4b124e6ae8f5e..52998baa64f35e 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.mdx @@ -82,7 +82,7 @@ Applications can customize a theme in multiple ways. The brand ramp is a color ramp going from dark to light colors: -Example of a brand ramp +Example of a brand ramp A theme is derived from a brand ramp. To use a theme with a custom brand ramp, instead of importing a predefined theme, you can use theme factory functions. diff --git a/apps/public-docsite-v9/src/Concepts/UnprocessedStyles.stories.mdx b/apps/public-docsite-v9/src/Concepts/UnprocessedStyles.mdx similarity index 99% rename from apps/public-docsite-v9/src/Concepts/UnprocessedStyles.stories.mdx rename to apps/public-docsite-v9/src/Concepts/UnprocessedStyles.mdx index 40714eac60a9ce..576ff65d8424e6 100644 --- a/apps/public-docsite-v9/src/Concepts/UnprocessedStyles.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/UnprocessedStyles.mdx @@ -31,7 +31,7 @@ Modern applications often split code into multiple bundles (main app bundle, CDN -
+
``` ### The Solution: Raw Modules with Style Prefixing diff --git a/apps/public-docsite-v9/src/Concepts/WebComponentsInterop/UsingFluentReactWithWebComponents.stories.mdx b/apps/public-docsite-v9/src/Concepts/WebComponentsInterop/UsingFluentReactWithWebComponents.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/WebComponentsInterop/UsingFluentReactWithWebComponents.stories.mdx rename to apps/public-docsite-v9/src/Concepts/WebComponentsInterop/UsingFluentReactWithWebComponents.mdx diff --git a/apps/public-docsite-v9/src/Icons/IconsCatalog.stories.mdx b/apps/public-docsite-v9/src/Icons/IconsCatalog.mdx similarity index 100% rename from apps/public-docsite-v9/src/Icons/IconsCatalog.stories.mdx rename to apps/public-docsite-v9/src/Icons/IconsCatalog.mdx diff --git a/apps/public-docsite-v9/src/Icons/IconsUsage.stories.mdx b/apps/public-docsite-v9/src/Icons/IconsUsage.mdx similarity index 97% rename from apps/public-docsite-v9/src/Icons/IconsUsage.stories.mdx rename to apps/public-docsite-v9/src/Icons/IconsUsage.mdx index 123c184950c235..b77b82a63f8024 100644 --- a/apps/public-docsite-v9/src/Icons/IconsUsage.stories.mdx +++ b/apps/public-docsite-v9/src/Icons/IconsUsage.mdx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs'; -

Advanced Usage

+

Advanced Usage

### Fluent icons as fonts diff --git a/apps/public-docsite-v9/src/Theming/ThemeDesigner.stories.mdx b/apps/public-docsite-v9/src/Theming/ThemeDesigner.mdx similarity index 100% rename from apps/public-docsite-v9/src/Theming/ThemeDesigner.stories.mdx rename to apps/public-docsite-v9/src/Theming/ThemeDesigner.mdx diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/index.stories.tsx b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/index.stories.tsx index 443681f007e337..833339ee1b5d26 100644 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/index.stories.tsx +++ b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/index.stories.tsx @@ -13,6 +13,7 @@ export default { description: { component: [descriptionMd, bestPracticesMd].join('\n'), }, + hideArgsTable: true, }, }, } as Meta; diff --git a/apps/ssr-tests-v9/.storybook/main.js b/apps/ssr-tests-v9/.storybook/main.js index a72b1c826be073..5ccb6635045bae 100644 --- a/apps/ssr-tests-v9/.storybook/main.js +++ b/apps/ssr-tests-v9/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/apps/ssr-tests-v9/.storybook/preview.js b/apps/ssr-tests-v9/.storybook/preview.js index 10fd98d02c9454..35fc35c83b7b40 100644 --- a/apps/ssr-tests-v9/.storybook/preview.js +++ b/apps/ssr-tests-v9/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/apps/vr-tests-react-components/.storybook/main.js b/apps/vr-tests-react-components/.storybook/main.js index 0d8d34b1fd5f36..1e07ae7a2365f5 100644 --- a/apps/vr-tests-react-components/.storybook/main.js +++ b/apps/vr-tests-react-components/.storybook/main.js @@ -15,7 +15,6 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig} name: '@storybook/react-webpack5', options: { builder: { - useSWC: true, lazyCompilation: false, }, }, @@ -24,33 +23,10 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig} // disable react-docgen-typescript (totally not needed here, slows things down a lot) reactDocgen: false, }, - webpackFinal: config => { + webpackFinal(config) { registerTsPaths({ config, configFile: tsConfigPath }); - registerRules({ config, rules: [rules.griffelRule] }); + registerRules({ config, rules: [rules.swcRule, rules.griffelRule] }); return config; }, - swc() { - return { - jsc: { - target: 'es2019', - parser: { - syntax: 'typescript', - tsx: true, - decorators: true, - dynamicImport: true, - }, - transform: { - decoratorMetadata: true, - legacyDecorator: true, - }, - keepClassNames: true, - externalHelpers: true, - loose: true, - minify: { - mangle: false, - }, - }, - }; - }, }); diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 165eab5427670a..15f2c39ce7b373 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -11,7 +11,7 @@ "start": "storybook dev", "test": "just-scripts test", "type-check": "tsc -p . --noEmit --baseUrl .", - "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --bailOnStoriesError" + "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --bailOnStoriesError --stepsApi parameters" }, "devDependencies": { "@fluentui/eslint-plugin": "*", diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json index 448870a62c5787..aea1e9733b3361 100644 --- a/apps/vr-tests-web-components/package.json +++ b/apps/vr-tests-web-components/package.json @@ -10,7 +10,7 @@ "lint": "ESLINT_USE_FLAT_CONFIG=false eslint src --ext .ts,.tsx", "start": "storybook dev", "type-check": "tsc -p . --baseUrl . --noEmit", - "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true" + "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters" }, "dependencies": { "react": "18.3.1", diff --git a/apps/vr-tests/.storybook/main.js b/apps/vr-tests/.storybook/main.js index 9f3502a8326aa3..4b70aada225098 100644 --- a/apps/vr-tests/.storybook/main.js +++ b/apps/vr-tests/.storybook/main.js @@ -13,7 +13,6 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig} name: '@storybook/react-webpack5', options: { builder: { - useSWC: true, lazyCompilation: false, }, }, @@ -24,31 +23,8 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig} }, webpackFinal: config => { registerTsPaths({ config, configFile: tsConfigPath }); - registerRules({ config, rules: [rules.scssRule] }); + registerRules({ config, rules: [rules.swcRule, rules.scssRule] }); return config; }, - swc() { - return { - jsc: { - target: 'es2019', - parser: { - syntax: 'typescript', - tsx: true, - decorators: true, - dynamicImport: true, - }, - transform: { - decoratorMetadata: true, - legacyDecorator: true, - }, - keepClassNames: true, - externalHelpers: true, - loose: true, - minify: { - mangle: false, - }, - }, - }; - }, }); diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 183c01c5546d66..5e16dbfe435345 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -11,7 +11,7 @@ "lint": "just-scripts lint", "start": "storybook dev -p 3000", "type-check": "tsc -p . --noEmit --baseUrl .", - "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true" + "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters" }, "devDependencies": { "@fluentui/eslint-plugin": "*", diff --git a/apps/vr-tests/tsconfig.json b/apps/vr-tests/tsconfig.json index 5fd8d958e77799..e7d70fca355f30 100644 --- a/apps/vr-tests/tsconfig.json +++ b/apps/vr-tests/tsconfig.json @@ -5,6 +5,7 @@ "outDir": "lib", "module": "commonjs", "jsx": "react", + "lib": ["ES2019", "dom"], "declaration": true, "noEmit": true, "experimentalDecorators": true, diff --git a/change/@fluentui-chart-web-components-dcbc0db2-3c0b-4243-a13c-571840f2c681.json b/change/@fluentui-chart-web-components-dcbc0db2-3c0b-4243-a13c-571840f2c681.json new file mode 100644 index 00000000000000..351c659f73261e --- /dev/null +++ b/change/@fluentui-chart-web-components-dcbc0db2-3c0b-4243-a13c-571840f2c681.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: upgrade storybook to v8", + "packageName": "@fluentui/chart-web-components", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-storybook-addon-ee7ab7c2-7aae-4b6f-8e9f-700123d875f7.json b/change/@fluentui-react-storybook-addon-ee7ab7c2-7aae-4b6f-8e9f-700123d875f7.json new file mode 100644 index 00000000000000..49842a84999443 --- /dev/null +++ b/change/@fluentui-react-storybook-addon-ee7ab7c2-7aae-4b6f-8e9f-700123d875f7.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "BREAKING: upgrade storybook to v8", + "packageName": "@fluentui/react-storybook-addon", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-storybook-addon-export-to-sandbox-e826cc4e-1629-4a56-b91e-864b8456f4c1.json b/change/@fluentui-react-storybook-addon-export-to-sandbox-e826cc4e-1629-4a56-b91e-864b8456f4c1.json new file mode 100644 index 00000000000000..9aea36c9796d28 --- /dev/null +++ b/change/@fluentui-react-storybook-addon-export-to-sandbox-e826cc4e-1629-4a56-b91e-864b8456f4c1.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "BREAKING: upgrade storybook to v8", + "packageName": "@fluentui/react-storybook-addon-export-to-sandbox", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-web-components-6522035a-424f-4a6f-844a-bed8358c507f.json b/change/@fluentui-web-components-6522035a-424f-4a6f-844a-bed8358c507f.json new file mode 100644 index 00000000000000..4d6c440c62adae --- /dev/null +++ b/change/@fluentui-web-components-6522035a-424f-4a6f-844a-bed8358c507f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: upgrade storybook to v8", + "packageName": "@fluentui/web-components", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "none" +} diff --git a/package.json b/package.json index a86f0667eb7597..c7aab82be82ce8 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@babel/plugin-proposal-decorators": "7.24.6", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", + "@babel/plugin-proposal-object-rest-spread": "7.20.7", "@babel/plugin-syntax-dynamic-import": "7.8.3", "@babel/plugin-syntax-object-rest-spread": "7.8.3", "@babel/plugin-transform-runtime": "7.24.6", @@ -88,20 +89,22 @@ "@react-native/babel-preset": "0.73.21", "@rnx-kit/eslint-plugin": "0.8.6", "@rollup/plugin-node-resolve": "13.3.0", - "@storybook/addon-a11y": "7.6.20", - "@storybook/addon-actions": "7.6.20", - "@storybook/addon-docs": "7.6.20", - "@storybook/addon-essentials": "7.6.20", - "@storybook/addon-links": "7.6.20", - "@storybook/addon-mdx-gfm": "7.6.20", - "@storybook/components": "7.6.20", - "@storybook/core-events": "7.6.20", - "@storybook/core-server": "7.6.20", - "@storybook/manager-api": "7.6.20", - "@storybook/preview-api": "7.6.20", - "@storybook/react": "7.6.20", - "@storybook/react-webpack5": "7.6.20", - "@storybook/theming": "7.6.20", + "@storybook/addon-a11y": "8.6.14", + "@storybook/addon-actions": "8.6.14", + "@storybook/addon-docs": "8.6.14", + "@storybook/addon-essentials": "8.6.14", + "@storybook/addon-links": "8.6.14", + "@storybook/addon-mdx-gfm": "8.6.14", + "@storybook/blocks": "8.6.14", + "@storybook/components": "8.6.14", + "@storybook/core-events": "8.6.14", + "@storybook/core-server": "8.6.14", + "@storybook/icons": "1.3.2", + "@storybook/manager-api": "8.6.14", + "@storybook/preview-api": "8.6.14", + "@storybook/react": "8.6.14", + "@storybook/react-webpack5": "8.6.14", + "@storybook/theming": "8.6.14", "@swc/cli": "0.7.7", "@swc/core": "1.11.24", "@swc/helpers": "0.5.1", @@ -297,7 +300,7 @@ "schema-utils": "3.1.1", "semver": "^6.2.0", "source-map-loader": "4.0.0", - "storybook": "7.6.20", + "storybook": "8.6.14", "storybook-addon-performance": "0.17.3", "storywright": "0.0.27-storybook7.14", "strip-ansi": "6.0.0", diff --git a/packages/charts/chart-web-components/package.json b/packages/charts/chart-web-components/package.json index 48006a4d2e6f2a..3c41d600ca4e6e 100644 --- a/packages/charts/chart-web-components/package.json +++ b/packages/charts/chart-web-components/package.json @@ -64,8 +64,8 @@ "@microsoft/fast-element": "2.0.0", "@fluentui/scripts-api-extractor": "*", "@tensile-perf/web-components": "~0.2.2", - "@storybook/html": "7.6.20", - "@storybook/html-webpack5": "7.6.20", + "@storybook/html": "8.6.14", + "@storybook/html-webpack5": "8.6.14", "chromedriver": "^125.0.0" }, "dependencies": { diff --git a/packages/charts/react-charts/stories/.storybook/main.js b/packages/charts/react-charts/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/charts/react-charts/stories/.storybook/main.js +++ b/packages/charts/react-charts/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/charts/react-charts/stories/.storybook/preview.js b/packages/charts/react-charts/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/charts/react-charts/stories/.storybook/preview.js +++ b/packages/charts/react-charts/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/component-selector-preview/stories/.storybook/main.js b/packages/react-components/component-selector-preview/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/component-selector-preview/stories/.storybook/main.js +++ b/packages/react-components/component-selector-preview/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/component-selector-preview/stories/.storybook/preview.js b/packages/react-components/component-selector-preview/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/component-selector-preview/stories/.storybook/preview.js +++ b/packages/react-components/component-selector-preview/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-accordion/stories/.storybook/main.js b/packages/react-components/react-accordion/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-accordion/stories/.storybook/main.js +++ b/packages/react-components/react-accordion/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-accordion/stories/.storybook/preview.js b/packages/react-components/react-accordion/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-accordion/stories/.storybook/preview.js +++ b/packages/react-components/react-accordion/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-aria/stories/.storybook/main.js b/packages/react-components/react-aria/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-aria/stories/.storybook/main.js +++ b/packages/react-components/react-aria/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-aria/stories/.storybook/preview.js b/packages/react-components/react-aria/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-aria/stories/.storybook/preview.js +++ b/packages/react-components/react-aria/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-avatar/stories/.storybook/main.js b/packages/react-components/react-avatar/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-avatar/stories/.storybook/main.js +++ b/packages/react-components/react-avatar/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-avatar/stories/.storybook/preview.js b/packages/react-components/react-avatar/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-avatar/stories/.storybook/preview.js +++ b/packages/react-components/react-avatar/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-avatar/stories/src/Avatar/AvatarDefault.stories.tsx b/packages/react-components/react-avatar/stories/src/Avatar/AvatarDefault.stories.tsx index d79f7e10ce6b7a..3cc0b14f566054 100644 --- a/packages/react-components/react-avatar/stories/src/Avatar/AvatarDefault.stories.tsx +++ b/packages/react-components/react-avatar/stories/src/Avatar/AvatarDefault.stories.tsx @@ -8,8 +8,9 @@ export const Default = (props: Partial): JSXElement => } */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-badge/stories/.storybook/preview.js b/packages/react-components/react-badge/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-badge/stories/.storybook/preview.js +++ b/packages/react-components/react-badge/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-breadcrumb/stories/.storybook/main.js b/packages/react-components/react-breadcrumb/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-breadcrumb/stories/.storybook/main.js +++ b/packages/react-components/react-breadcrumb/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-breadcrumb/stories/.storybook/preview.js b/packages/react-components/react-breadcrumb/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-breadcrumb/stories/.storybook/preview.js +++ b/packages/react-components/react-breadcrumb/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-button/stories/.storybook/main.js b/packages/react-components/react-button/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-button/stories/.storybook/main.js +++ b/packages/react-components/react-button/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-button/stories/.storybook/preview.js b/packages/react-components/react-button/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-button/stories/.storybook/preview.js +++ b/packages/react-components/react-button/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-calendar-compat/stories/.storybook/main.js b/packages/react-components/react-calendar-compat/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-calendar-compat/stories/.storybook/main.js +++ b/packages/react-components/react-calendar-compat/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-calendar-compat/stories/.storybook/preview.js b/packages/react-components/react-calendar-compat/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-calendar-compat/stories/.storybook/preview.js +++ b/packages/react-components/react-calendar-compat/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-card/stories/.storybook/main.js b/packages/react-components/react-card/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-card/stories/.storybook/main.js +++ b/packages/react-components/react-card/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-card/stories/.storybook/preview.js b/packages/react-components/react-card/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-card/stories/.storybook/preview.js +++ b/packages/react-components/react-card/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-carousel/stories/.storybook/main.js b/packages/react-components/react-carousel/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-carousel/stories/.storybook/main.js +++ b/packages/react-components/react-carousel/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-carousel/stories/.storybook/preview.js b/packages/react-components/react-carousel/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-carousel/stories/.storybook/preview.js +++ b/packages/react-components/react-carousel/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-checkbox/stories/.storybook/main.js b/packages/react-components/react-checkbox/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-checkbox/stories/.storybook/main.js +++ b/packages/react-components/react-checkbox/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-checkbox/stories/.storybook/preview.js b/packages/react-components/react-checkbox/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-checkbox/stories/.storybook/preview.js +++ b/packages/react-components/react-checkbox/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-color-picker/stories/.storybook/main.js b/packages/react-components/react-color-picker/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-color-picker/stories/.storybook/main.js +++ b/packages/react-components/react-color-picker/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-color-picker/stories/.storybook/preview.js b/packages/react-components/react-color-picker/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-color-picker/stories/.storybook/preview.js +++ b/packages/react-components/react-color-picker/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-combobox/stories/.storybook/main.js b/packages/react-components/react-combobox/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-combobox/stories/.storybook/main.js +++ b/packages/react-components/react-combobox/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-combobox/stories/.storybook/preview.js b/packages/react-components/react-combobox/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-combobox/stories/.storybook/preview.js +++ b/packages/react-components/react-combobox/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-combobox/stories/src/Dropdown/DropdownAccessibility.stories.mdx b/packages/react-components/react-combobox/stories/src/Dropdown/DropdownAccessibility.mdx similarity index 100% rename from packages/react-components/react-combobox/stories/src/Dropdown/DropdownAccessibility.stories.mdx rename to packages/react-components/react-combobox/stories/src/Dropdown/DropdownAccessibility.mdx diff --git a/packages/react-components/react-datepicker-compat/stories/.storybook/main.js b/packages/react-components/react-datepicker-compat/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-datepicker-compat/stories/.storybook/main.js +++ b/packages/react-components/react-datepicker-compat/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-datepicker-compat/stories/.storybook/preview.js b/packages/react-components/react-datepicker-compat/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-datepicker-compat/stories/.storybook/preview.js +++ b/packages/react-components/react-datepicker-compat/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-dialog/stories/.storybook/main.js b/packages/react-components/react-dialog/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-dialog/stories/.storybook/main.js +++ b/packages/react-components/react-dialog/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-dialog/stories/.storybook/preview.js b/packages/react-components/react-dialog/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-dialog/stories/.storybook/preview.js +++ b/packages/react-components/react-dialog/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-divider/stories/.storybook/main.js b/packages/react-components/react-divider/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-divider/stories/.storybook/main.js +++ b/packages/react-components/react-divider/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-divider/stories/.storybook/preview.js b/packages/react-components/react-divider/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-divider/stories/.storybook/preview.js +++ b/packages/react-components/react-divider/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-drawer/stories/.storybook/main.js b/packages/react-components/react-drawer/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-drawer/stories/.storybook/main.js +++ b/packages/react-components/react-drawer/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-drawer/stories/.storybook/preview.js b/packages/react-components/react-drawer/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-drawer/stories/.storybook/preview.js +++ b/packages/react-components/react-drawer/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-field/stories/.storybook/main.js b/packages/react-components/react-field/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-field/stories/.storybook/main.js +++ b/packages/react-components/react-field/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-field/stories/.storybook/preview.js b/packages/react-components/react-field/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-field/stories/.storybook/preview.js +++ b/packages/react-components/react-field/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-icons-compat/stories/.storybook/main.js b/packages/react-components/react-icons-compat/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-icons-compat/stories/.storybook/main.js +++ b/packages/react-components/react-icons-compat/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-icons-compat/stories/.storybook/preview.js b/packages/react-components/react-icons-compat/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-icons-compat/stories/.storybook/preview.js +++ b/packages/react-components/react-icons-compat/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-image/stories/.storybook/main.js b/packages/react-components/react-image/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-image/stories/.storybook/main.js +++ b/packages/react-components/react-image/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-image/stories/.storybook/preview.js b/packages/react-components/react-image/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-image/stories/.storybook/preview.js +++ b/packages/react-components/react-image/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-infolabel/stories/.storybook/main.js b/packages/react-components/react-infolabel/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-infolabel/stories/.storybook/main.js +++ b/packages/react-components/react-infolabel/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-infolabel/stories/.storybook/preview.js b/packages/react-components/react-infolabel/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-infolabel/stories/.storybook/preview.js +++ b/packages/react-components/react-infolabel/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-input/stories/.storybook/main.js b/packages/react-components/react-input/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-input/stories/.storybook/main.js +++ b/packages/react-components/react-input/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-input/stories/.storybook/preview.js b/packages/react-components/react-input/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-input/stories/.storybook/preview.js +++ b/packages/react-components/react-input/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-label/stories/.storybook/main.js b/packages/react-components/react-label/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-label/stories/.storybook/main.js +++ b/packages/react-components/react-label/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-label/stories/.storybook/preview.js b/packages/react-components/react-label/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-label/stories/.storybook/preview.js +++ b/packages/react-components/react-label/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-link/stories/.storybook/main.js b/packages/react-components/react-link/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-link/stories/.storybook/main.js +++ b/packages/react-components/react-link/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-link/stories/.storybook/preview.js b/packages/react-components/react-link/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-link/stories/.storybook/preview.js +++ b/packages/react-components/react-link/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-list/stories/.storybook/main.js b/packages/react-components/react-list/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-list/stories/.storybook/main.js +++ b/packages/react-components/react-list/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-list/stories/.storybook/preview.js b/packages/react-components/react-list/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-list/stories/.storybook/preview.js +++ b/packages/react-components/react-list/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-menu-grid-preview/stories/.storybook/main.js b/packages/react-components/react-menu-grid-preview/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-menu-grid-preview/stories/.storybook/main.js +++ b/packages/react-components/react-menu-grid-preview/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-menu-grid-preview/stories/.storybook/preview.js b/packages/react-components/react-menu-grid-preview/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-menu-grid-preview/stories/.storybook/preview.js +++ b/packages/react-components/react-menu-grid-preview/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-menu/stories/.storybook/main.js b/packages/react-components/react-menu/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-menu/stories/.storybook/main.js +++ b/packages/react-components/react-menu/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-menu/stories/.storybook/preview.js b/packages/react-components/react-menu/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-menu/stories/.storybook/preview.js +++ b/packages/react-components/react-menu/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-message-bar/stories/.storybook/main.js b/packages/react-components/react-message-bar/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-message-bar/stories/.storybook/main.js +++ b/packages/react-components/react-message-bar/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-message-bar/stories/.storybook/preview.js b/packages/react-components/react-message-bar/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-message-bar/stories/.storybook/preview.js +++ b/packages/react-components/react-message-bar/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-migration-v0-v9/stories/.storybook/main.js b/packages/react-components/react-migration-v0-v9/stories/.storybook/main.js index 67692308a69778..4442fc8cd615ec 100644 --- a/packages/react-components/react-migration-v0-v9/stories/.storybook/main.js +++ b/packages/react-components/react-migration-v0-v9/stories/.storybook/main.js @@ -7,7 +7,7 @@ const tsConfigAllPath = path.join(__dirname, '../../../../../tsconfig.base.all.j module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) }); diff --git a/packages/react-components/react-migration-v0-v9/stories/.storybook/preview.js b/packages/react-components/react-migration-v0-v9/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-migration-v0-v9/stories/.storybook/preview.js +++ b/packages/react-components/react-migration-v0-v9/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-migration-v8-v9/stories/.storybook/main.js b/packages/react-components/react-migration-v8-v9/stories/.storybook/main.js index e4ce7ab4e09068..58301ead8f123d 100644 --- a/packages/react-components/react-migration-v8-v9/stories/.storybook/main.js +++ b/packages/react-components/react-migration-v8-v9/stories/.storybook/main.js @@ -7,7 +7,7 @@ const tsConfigAllPath = path.join(__dirname, '../../../../../tsconfig.base.all.j module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) }); diff --git a/packages/react-components/react-migration-v8-v9/stories/.storybook/preview.js b/packages/react-components/react-migration-v8-v9/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-migration-v8-v9/stories/.storybook/preview.js +++ b/packages/react-components/react-migration-v8-v9/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-motion-components-preview/stories/.storybook/main.js b/packages/react-components/react-motion-components-preview/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-motion-components-preview/stories/.storybook/main.js +++ b/packages/react-components/react-motion-components-preview/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-motion-components-preview/stories/.storybook/preview.js b/packages/react-components/react-motion-components-preview/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-motion-components-preview/stories/.storybook/preview.js +++ b/packages/react-components/react-motion-components-preview/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-motion/stories/.storybook/main.js b/packages/react-components/react-motion/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-motion/stories/.storybook/main.js +++ b/packages/react-components/react-motion/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-motion/stories/.storybook/preview.js b/packages/react-components/react-motion/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-motion/stories/.storybook/preview.js +++ b/packages/react-components/react-motion/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-motion/stories/src/Tokens/index.stories.mdx b/packages/react-components/react-motion/stories/src/Tokens/index.mdx similarity index 95% rename from packages/react-components/react-motion/stories/src/Tokens/index.stories.mdx rename to packages/react-components/react-motion/stories/src/Tokens/index.mdx index 9dc818563ae12a..5dd21820cedc89 100644 --- a/packages/react-components/react-motion/stories/src/Tokens/index.stories.mdx +++ b/packages/react-components/react-motion/stories/src/Tokens/index.mdx @@ -3,7 +3,7 @@ import { MotionCurves, MotionDuration } from './Cards'; -

Motion tokens

+

Motion tokens

Fluent UI React v9 offers predefined tokens for creating custom motions. These tokens can be used as CSS variables or plain JavaScript values, depending on the scenario. diff --git a/packages/react-components/react-nav/stories/.storybook/main.js b/packages/react-components/react-nav/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-nav/stories/.storybook/main.js +++ b/packages/react-components/react-nav/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-nav/stories/.storybook/preview.js b/packages/react-components/react-nav/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-nav/stories/.storybook/preview.js +++ b/packages/react-components/react-nav/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-overflow/stories/.storybook/main.js b/packages/react-components/react-overflow/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-overflow/stories/.storybook/main.js +++ b/packages/react-components/react-overflow/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-overflow/stories/.storybook/preview.js b/packages/react-components/react-overflow/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-overflow/stories/.storybook/preview.js +++ b/packages/react-components/react-overflow/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-persona/stories/.storybook/main.js b/packages/react-components/react-persona/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-persona/stories/.storybook/main.js +++ b/packages/react-components/react-persona/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-persona/stories/.storybook/preview.js b/packages/react-components/react-persona/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-persona/stories/.storybook/preview.js +++ b/packages/react-components/react-persona/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-popover/stories/.storybook/main.js b/packages/react-components/react-popover/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-popover/stories/.storybook/main.js +++ b/packages/react-components/react-popover/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-popover/stories/.storybook/preview.js b/packages/react-components/react-popover/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-popover/stories/.storybook/preview.js +++ b/packages/react-components/react-popover/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-portal/stories/.storybook/main.js b/packages/react-components/react-portal/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-portal/stories/.storybook/main.js +++ b/packages/react-components/react-portal/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-portal/stories/.storybook/preview.js b/packages/react-components/react-portal/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-portal/stories/.storybook/preview.js +++ b/packages/react-components/react-portal/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-positioning/stories/.storybook/main.js b/packages/react-components/react-positioning/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-positioning/stories/.storybook/main.js +++ b/packages/react-components/react-positioning/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-positioning/stories/.storybook/preview.js b/packages/react-components/react-positioning/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-positioning/stories/.storybook/preview.js +++ b/packages/react-components/react-positioning/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-progress/stories/.storybook/main.js b/packages/react-components/react-progress/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-progress/stories/.storybook/main.js +++ b/packages/react-components/react-progress/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-progress/stories/.storybook/preview.js b/packages/react-components/react-progress/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-progress/stories/.storybook/preview.js +++ b/packages/react-components/react-progress/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-provider/stories/.storybook/main.js b/packages/react-components/react-provider/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-provider/stories/.storybook/main.js +++ b/packages/react-components/react-provider/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-provider/stories/.storybook/preview.js b/packages/react-components/react-provider/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-provider/stories/.storybook/preview.js +++ b/packages/react-components/react-provider/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-radio/stories/.storybook/main.js b/packages/react-components/react-radio/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-radio/stories/.storybook/main.js +++ b/packages/react-components/react-radio/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-radio/stories/.storybook/preview.js b/packages/react-components/react-radio/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-radio/stories/.storybook/preview.js +++ b/packages/react-components/react-radio/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-rating/stories/.storybook/main.js b/packages/react-components/react-rating/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-rating/stories/.storybook/main.js +++ b/packages/react-components/react-rating/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-rating/stories/.storybook/preview.js b/packages/react-components/react-rating/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-rating/stories/.storybook/preview.js +++ b/packages/react-components/react-rating/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-search/stories/.storybook/main.js b/packages/react-components/react-search/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-search/stories/.storybook/main.js +++ b/packages/react-components/react-search/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-search/stories/.storybook/preview.js b/packages/react-components/react-search/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-search/stories/.storybook/preview.js +++ b/packages/react-components/react-search/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-select/stories/.storybook/main.js b/packages/react-components/react-select/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-select/stories/.storybook/main.js +++ b/packages/react-components/react-select/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-select/stories/.storybook/preview.js b/packages/react-components/react-select/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-select/stories/.storybook/preview.js +++ b/packages/react-components/react-select/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-shared-contexts/stories/.storybook/main.js b/packages/react-components/react-shared-contexts/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-shared-contexts/stories/.storybook/main.js +++ b/packages/react-components/react-shared-contexts/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-shared-contexts/stories/.storybook/preview.js b/packages/react-components/react-shared-contexts/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-shared-contexts/stories/.storybook/preview.js +++ b/packages/react-components/react-shared-contexts/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-skeleton/stories/.storybook/main.js b/packages/react-components/react-skeleton/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-skeleton/stories/.storybook/main.js +++ b/packages/react-components/react-skeleton/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-skeleton/stories/.storybook/preview.js b/packages/react-components/react-skeleton/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-skeleton/stories/.storybook/preview.js +++ b/packages/react-components/react-skeleton/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-slider/stories/.storybook/main.js b/packages/react-components/react-slider/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-slider/stories/.storybook/main.js +++ b/packages/react-components/react-slider/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-slider/stories/.storybook/preview.js b/packages/react-components/react-slider/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-slider/stories/.storybook/preview.js +++ b/packages/react-components/react-slider/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-spinbutton/stories/.storybook/main.js b/packages/react-components/react-spinbutton/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-spinbutton/stories/.storybook/main.js +++ b/packages/react-components/react-spinbutton/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-spinbutton/stories/.storybook/preview.js b/packages/react-components/react-spinbutton/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-spinbutton/stories/.storybook/preview.js +++ b/packages/react-components/react-spinbutton/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAccessibility.stories.mdx b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAccessibility.mdx similarity index 100% rename from packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAccessibility.stories.mdx rename to packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAccessibility.mdx diff --git a/packages/react-components/react-spinner/stories/.storybook/main.js b/packages/react-components/react-spinner/stories/.storybook/main.js index b380cd896aea19..67905c6bfe15f2 100644 --- a/packages/react-components/react-spinner/stories/.storybook/main.js +++ b/packages/react-components/react-spinner/stories/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../src/**/*.mdx', '../src/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-spinner/stories/.storybook/preview.js b/packages/react-components/react-spinner/stories/.storybook/preview.js index 94455f782364e4..98274ed0b8095f 100644 --- a/packages/react-components/react-spinner/stories/.storybook/preview.js +++ b/packages/react-components/react-spinner/stories/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-storybook-addon-export-to-sandbox/package.json b/packages/react-components/react-storybook-addon-export-to-sandbox/package.json index d0422d9b195039..3ce29fed10039e 100644 --- a/packages/react-components/react-storybook-addon-export-to-sandbox/package.json +++ b/packages/react-components/react-storybook-addon-export-to-sandbox/package.json @@ -22,9 +22,9 @@ "dedent": "^1.2.0" }, "peerDependencies": { - "@storybook/manager-api": "^7.6.20", - "@storybook/preview-api": "^7.6.20", - "@storybook/react": "^7.6.20" + "@storybook/manager-api": "^8.6.14", + "@storybook/preview-api": "^8.6.14", + "@storybook/react": "^8.6.14" }, "beachball": { "disallowedChangeTypes": [ diff --git a/packages/react-components/react-storybook-addon-export-to-sandbox/tsconfig.lib.json b/packages/react-components/react-storybook-addon-export-to-sandbox/tsconfig.lib.json index 9dc1f85430d0c3..600da72d9b4663 100644 --- a/packages/react-components/react-storybook-addon-export-to-sandbox/tsconfig.lib.json +++ b/packages/react-components/react-storybook-addon-export-to-sandbox/tsconfig.lib.json @@ -7,7 +7,7 @@ "declarationDir": "../../../dist/out-tsc/types", "outDir": "../../../dist/out-tsc", "inlineSources": true, - "types": ["static-assets", "environment"], + "types": ["static-assets", "environment", "node"], "module": "CommonJS" }, "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], diff --git a/packages/react-components/react-storybook-addon/.storybook/main.js b/packages/react-components/react-storybook-addon/.storybook/main.js index 26536b61b387f6..4f80361aac4b14 100644 --- a/packages/react-components/react-storybook-addon/.storybook/main.js +++ b/packages/react-components/react-storybook-addon/.storybook/main.js @@ -2,7 +2,7 @@ const rootMain = require('../../../../.storybook/main'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'], + stories: [...rootMain.stories, '../stories/**/*.mdx', '../stories/**/index.stories.@(ts|tsx)'], addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-storybook-addon/.storybook/preview.js b/packages/react-components/react-storybook-addon/.storybook/preview.js index 1939500a3d18c7..89133e4790d474 100644 --- a/packages/react-components/react-storybook-addon/.storybook/preview.js +++ b/packages/react-components/react-storybook-addon/.storybook/preview.js @@ -5,3 +5,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters }; + +export const tags = ['autodocs']; diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md index 52cb1427d4b138..6e8ce10ca0adbd 100644 --- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md +++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md @@ -5,12 +5,17 @@ ```ts import { Args } from '@storybook/react'; +import type { JSXElement } from '@fluentui/react-utilities'; import { Parameters as Parameters_2 } from '@storybook/react'; +import * as React_2 from 'react'; import { StoryContext } from '@storybook/react'; // @public (undocumented) export const DIR_ID: "storybook_fluentui-react-addon_dir"; +// @public +export const FluentCanvas: (props: React_2.ComponentProps<"div">) => JSXElement; + // @public export interface FluentGlobals extends Args { // (undocumented) @@ -36,6 +41,9 @@ export interface FluentParameters extends Parameters_2 { }; } +// @public +export const FluentStory: ({ id, height }: FluentStoryProps) => JSXElement; + // @public (undocumented) export interface FluentStoryContext extends StoryContext { // (undocumented) diff --git a/packages/react-components/react-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json index 804fce79859507..d1a821638a68a7 100644 --- a/packages/react-components/react-storybook-addon/package.json +++ b/packages/react-components/react-storybook-addon/package.json @@ -34,13 +34,15 @@ "@swc/helpers": "^0.5.1" }, "peerDependencies": { - "@storybook/addon-docs": "^7.6.20", - "@storybook/components": "^7.6.20", - "@storybook/core-events": "^7.6.20", - "@storybook/preview-api": "^7.6.20", - "@storybook/manager-api": "^7.6.20", - "@storybook/react": "^7.6.20", - "@storybook/theming": "^7.6.20", + "@storybook/addon-docs": "^8.6.14", + "@storybook/components": "^8.6.14", + "@storybook/core": "^8.6.14", + "@storybook/core-events": "^8.6.14", + "@storybook/icons": "^1.3.2", + "@storybook/preview-api": "^8.6.14", + "@storybook/manager-api": "^8.6.14", + "@storybook/react": "^8.6.14", + "@storybook/theming": "^8.6.14", "@types/react-dom": ">=16.9.0 <20.0.0", "@types/react": ">=16.14.0 <20.0.0", "react-dom": ">=16.14.0 <20.0.0", diff --git a/packages/react-components/react-storybook-addon/src/components/ReactStrictMode.tsx b/packages/react-components/react-storybook-addon/src/components/ReactStrictMode.tsx index a627aa8ac9a885..cfdfeeec07d75d 100644 --- a/packages/react-components/react-storybook-addon/src/components/ReactStrictMode.tsx +++ b/packages/react-components/react-storybook-addon/src/components/ReactStrictMode.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import { IconButton, Icons } from '@storybook/components'; +import { IconButton } from '@storybook/components'; +import { LockIcon } from '@storybook/icons'; -import { JSXElement } from '@fluentui/react-utilities'; +import type { JSXElement } from '@fluentui/react-utilities'; import { STRICT_MODE_ID } from '../constants'; import { useGlobals } from '../hooks'; @@ -20,7 +21,7 @@ export const ReactStrictMode = (): JSXElement => { return ( - + ); }; diff --git a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx index b7902bf7fdef35..751de6c47e9963 100644 --- a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx +++ b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components'; +import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/components'; +import { ArrowDownIcon } from '@storybook/icons'; import { useParameter } from '@storybook/manager-api'; import type { JSXElement } from '@fluentui/react-utilities'; @@ -69,9 +70,9 @@ export const ThemePicker = (): JSXElement => { return ( <> - + - + Theme: {selectedTheme?.label} diff --git a/packages/react-components/react-storybook-addon/src/docs/FluentCanvas.tsx b/packages/react-components/react-storybook-addon/src/docs/FluentCanvas.tsx new file mode 100644 index 00000000000000..c43fd1104f32b7 --- /dev/null +++ b/packages/react-components/react-storybook-addon/src/docs/FluentCanvas.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import type { JSXElement } from '@fluentui/react-utilities'; +import { makeStyles } from '@griffel/react'; + +const useStyles = makeStyles({ + canvas: { + padding: '20px', + boxSizing: 'border-box', + overflow: 'auto', + }, +}); + +/** + * Canvas component to wrap stories in a styled container. + * Provides a similar experience to Storybook's v7 `Canvas` component. + */ +export const FluentCanvas = (props: React.ComponentProps<'div'>): JSXElement => { + const styles = useStyles(); + + return ( +
+
+
+ ); +}; diff --git a/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx b/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx index 01aaf7d7ecce8b..d7e2c67856a3f6 100644 --- a/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx +++ b/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { DocsContext, - ArgsTable, + ArgTypes, Title, Subtitle, Description, @@ -10,7 +10,7 @@ import { Stories, type DocsContextProps, } from '@storybook/addon-docs'; -import type { PreparedStory, Renderer, SBEnumType } from '@storybook/types'; +import type { PreparedStory, Renderer, SBEnumType } from '@storybook/core/types'; import { tokens } from '@fluentui/react-theme'; import { Link } from '@fluentui/react-link'; @@ -199,7 +199,7 @@ function withSlotEnhancer(story: PreparedStory, options: { slotsApi?: boolean; n } }; - const component = story.component as InternalComponentApi; + const component = story.moduleExport as InternalComponentApi; const subcomponents = story.subcomponents as Record; if (options.slotsApi) { @@ -281,7 +281,7 @@ const RenderArgsTable = ({ )}
- + ); }; @@ -379,9 +379,12 @@ export const FluentDocsPage = (): JSXElement => { {videos && }
- + { + return ( +
+