diff --git a/apps/vr-tests/src/stories/AccordionConverged.stories.tsx b/apps/vr-tests/src/stories/AccordionConverged.stories.tsx index 1b4f45c56548d..b44955bc9a2e3 100644 --- a/apps/vr-tests/src/stories/AccordionConverged.stories.tsx +++ b/apps/vr-tests/src/stories/AccordionConverged.stories.tsx @@ -7,7 +7,7 @@ import { AccordionHeader, AccordionPanel, } from '@fluentui/react-accordion'; -import { CircleRingIcon } from '@fluentui/react-icons-mdl2'; +import { CircleRegular } from '@fluentui/react-icons'; storiesOf('Accordion Converged', module) .addDecorator(story => ( @@ -97,19 +97,19 @@ storiesOf('Accordion Converged', module) () => ( - } expandIconPosition="start"> + } expandIconPosition="start"> Expand Icon Start Expand Icon Start Panel - } expandIconPosition="end"> + } expandIconPosition="end"> Expand Icon End Expand Icon End Panel - } expandIconPosition="end"> + } expandIconPosition="end"> Expand Icon Inline End Expand Icon Inline End Panel @@ -123,19 +123,19 @@ storiesOf('Accordion Converged', module) () => ( - } expandIconPosition="start"> + } expandIconPosition="start"> Icon Start Icon Start Panel - } expandIconPosition="end"> + } expandIconPosition="end"> Icon End Icon End Panel - } expandIconPosition="end"> + } expandIconPosition="end"> Icon Inline End Icon Inline End Panel diff --git a/apps/vr-tests/src/stories/AvatarConverged.stories.tsx b/apps/vr-tests/src/stories/AvatarConverged.stories.tsx index 742146a87d542..a9ed1afda976f 100644 --- a/apps/vr-tests/src/stories/AvatarConverged.stories.tsx +++ b/apps/vr-tests/src/stories/AvatarConverged.stories.tsx @@ -2,9 +2,107 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import Screener from 'screener-storybook/src/screener'; import { Avatar, AvatarProps } from '@fluentui/react-avatar'; -import { Stack } from '@fluentui/react'; import { People20Regular, PersonCall20Regular } from '@fluentui/react-icons'; -import { AvatarExamples as examples } from '@fluentui/example-data'; + +const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar'; + +/** Sample names and images for use in Avatar examples */ +const nameAndImage = [ + { name: 'Katri Athokas', image: `${imageRoot}/KatriAthokas.jpg` }, + { name: 'Elvia Atkins', image: `${imageRoot}/ElviaAtkins.jpg` }, + { name: 'Mauricio August', image: `${imageRoot}/MauricioAugust.jpg` }, + { name: 'Colin Ballinger', image: `${imageRoot}/ColinBallinger.jpg` }, + { name: 'Lydia Bauer', image: `${imageRoot}/LydiaBauer.jpg` }, + { name: 'Amanda Brady', image: `${imageRoot}/AmandaBrady.jpg` }, + { name: 'Henry Brill', image: `${imageRoot}/HenryBrill.jpg` }, + { name: 'Celeste Burton', image: `${imageRoot}/CelesteBurton.jpg` }, + { name: 'Robin Counts', image: `${imageRoot}/RobinCounts.jpg` }, + { name: 'Tim Deboer', image: `${imageRoot}/TimDeboer.jpg` }, + { name: 'Cameron Evans', image: `${imageRoot}/CameronEvans.jpg` }, + { name: 'Isaac Fielder', image: `${imageRoot}/IsaacFielder.jpg` }, + { name: 'Cecil Folk', image: `${imageRoot}/CecilFolk.jpg` }, + { name: 'Miguel Garcia', image: `${imageRoot}/MiguelGarcia.jpg` }, + { name: 'Wanda Howard', image: `${imageRoot}/WandaHoward.jpg` }, + { name: 'Mona Kane', image: `${imageRoot}/MonaKane.jpg` }, + { name: 'Kat Larsson', image: `${imageRoot}/KatLarsson.jpg` }, + { name: 'Ashley McCarthy', image: `${imageRoot}/AshleyMcCarthy.jpg` }, + { name: 'Johnie McConnell', image: `${imageRoot}/JohnieMcConnell.jpg` }, + { name: 'Allan Munger', image: `${imageRoot}/AllanMunger.jpg` }, + { name: 'Erik Nason', image: `${imageRoot}/ErikNason.jpg` }, + { name: 'Kristin Patterson', image: `${imageRoot}/KristinPatterson.jpg` }, + { name: 'Daisy Phillips', image: `${imageRoot}/DaisyPhillips.jpg` }, + { name: 'Carole Poland', image: `${imageRoot}/CarolePoland.jpg` }, + { name: 'Carlos Slattery', image: `${imageRoot}/CarlosSlattery.jpg` }, + { name: 'Robert Tolbert', image: `${imageRoot}/RobertTolbert.jpg` }, + { name: 'Kevin Sturgis', image: `${imageRoot}/KevinSturgis.jpg` }, + { name: 'Charlotte Waltson', image: `${imageRoot}/CharlotteWaltson.jpg` }, + { name: 'Elliot Woodward', image: `${imageRoot}/ElliotWoodward.jpg` }, +]; + +/** Arrays of example values for each Avatar prop */ +const examples = { + size: [20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128], + nameAndImage: nameAndImage, + name: nameAndImage.map(p => p.name), + image: nameAndImage.map(p => p.image), + badge: [ + { status: 'available' }, + { status: 'away' }, + { status: 'busy' }, + { status: 'doNotDisturb' }, + { status: 'offline' }, + { status: 'outOfOffice' }, + { status: 'available', outOfOffice: true }, + { status: 'away', outOfOffice: true }, + { status: 'busy', outOfOffice: true }, + { status: 'doNotDisturb', outOfOffice: true }, + { status: 'offline', outOfOffice: true }, + { status: 'outOfOffice', outOfOffice: true }, + ], + activeDisplay: ['ring', 'ring-shadow', 'ring-glow', 'shadow', 'glow'], + color: ['neutral', 'brand', 'colorful'], + namedColors: [ + 'darkRed', + 'cranberry', + 'red', + 'pumpkin', + 'peach', + 'marigold', + 'gold', + 'brass', + 'brown', + 'forest', + 'seafoam', + 'darkGreen', + 'lightTeal', + 'teal', + 'steel', + 'blue', + 'royalBlue', + 'cornflower', + 'navy', + 'lavender', + 'purple', + 'grape', + 'lilac', + 'pink', + 'magenta', + 'plum', + 'beige', + 'mink', + 'platinum', + 'anchor', + ], + /** A SVG hexagon data URL used by the CustomShape example */ + hexagon: + 'data:image/svg+xml;utf8,' + + '' + + '' + + '', +} as const; /** Renders an Avatar at every standard size */ const AvatarList: React.FC< @@ -15,7 +113,7 @@ const AvatarList: React.FC< > = props => { const { names, images, ...restOfProps } = props; return ( - +
{examples.size.map((size, i) => ( ))} - +
); }; @@ -48,7 +146,7 @@ const AvatarCustomSizeList: React.FC< const { names, images, ...restOfProps } = props; return ( - +
{customSizes.map(({ baseSize, customSize }, i) => ( ))} - +
); }; storiesOf('Avatar Converged', module) .addDecorator(story => (
- +
{story()} - +
)) .addDecorator(story => ( @@ -83,7 +177,7 @@ storiesOf('Avatar Converged', module) .addStory( 'basic', () => ( - <> +
@@ -97,7 +191,7 @@ storiesOf('Avatar Converged', module) image={{ src: examples.image[7] }} badge={{ status: 'available' }} /> - +
), { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, ) @@ -133,23 +227,27 @@ storiesOf('Avatar Converged', module) .addStory('customSize+icon+active', () => ) .addStory( 'color', - () => ( - - - - - - - {examples.name.map(name => ( - - ))} - - - {examples.namedColors.map(color => ( - - ))} - - - ), + () => { + const rowStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '8px' }; + + return ( +
+
+ + +
+
+ {examples.name.map(name => ( + + ))} +
+
+ {examples.namedColors.map(color => ( + + ))} +
+
+ ); + }, { includeHighContrast: true, includeDarkMode: true }, ); diff --git a/apps/vr-tests/src/stories/DividerConverged.stories.tsx b/apps/vr-tests/src/stories/DividerConverged.stories.tsx index e256560589208..d8d2904a61922 100644 --- a/apps/vr-tests/src/stories/DividerConverged.stories.tsx +++ b/apps/vr-tests/src/stories/DividerConverged.stories.tsx @@ -1,114 +1,62 @@ import * as React from 'react'; import Screener, { Steps } from 'screener-storybook/src/screener'; import { storiesOf } from '@storybook/react'; -import { mergeStyles } from '@fluentui/react'; import { Divider } from '@fluentui/react-divider'; +import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index'; -const verticalStyles = mergeStyles({ - height: '400px', -}); - -const horizontalStyles = mergeStyles({ - width: '400px', -}); - -storiesOf('Divider Converged', module) +storiesOf('Divider Converged - Horizontal', module) + .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( {story()} )) - .addStory( - 'Horizontal without content', - () => ( -
- -
- ), - { includeRtl: true }, - ) - .addStory( - 'Horizontal with content', - () => ( -
- Today -
- ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'Horizontal Start Aligned', - () => ( -
- Today -
- ), - { includeRtl: true }, - ) - .addStory( - 'Horizontal End Aligned', - () => ( -
- Today -
- ), - { includeRtl: true }, - ) - .addStory('Vertical Center Aligned', () => ( -
- Today -
- )) - .addStory('Vertical Start Aligned', () => ( -
- - Today - + .addStory('without content', () => , { includeRtl: true }) + .addStory('with content', () => Today, { + includeRtl: true, + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('Start Aligned', () => Today, { + includeRtl: true, + }) + .addStory('End Aligned', () => Today, { includeRtl: true }) + .addStory('Appearance subtle', () => Today, { + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('Appearance strong', () => Today, { + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('Appearance brand', () => Today, { + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('Inset', () => Today); + +storiesOf('Divider Converged - Vertical', module) + .addDecorator(TestWrapperDecorator) + .addDecorator(story => ( +
+ + {story()} +
)) - .addStory('Vertical End Aligned', () => ( -
- - Today - -
+ .addStory('Center Aligned', () => Today) + .addStory('Start Aligned', () => ( + + Today + )) - .addStory( - 'Appearance subtle', - () => ( -
- Today -
- ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'Appearance strong', - () => ( -
- Today -
- ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'Appearance brand', - () => ( -
- Today -
- ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('Inset', () => ( -
- Today -
+ .addStory('End Aligned', () => ( + + Today + )) - .addStory('Vertical inset', () => ( -
- - Today - -
+ .addStory('inset', () => ( + + Today + )); diff --git a/apps/vr-tests/src/PresenceBadge.stories.tsx b/apps/vr-tests/src/stories/PresenceBadgeConverged.stories.tsx similarity index 100% rename from apps/vr-tests/src/PresenceBadge.stories.tsx rename to apps/vr-tests/src/stories/PresenceBadgeConverged.stories.tsx diff --git a/change/@fluentui-example-data-7ff73e94-9cc1-444b-a0ab-ce426dbd767d.json b/change/@fluentui-example-data-7ff73e94-9cc1-444b-a0ab-ce426dbd767d.json new file mode 100644 index 0000000000000..455827f458f72 --- /dev/null +++ b/change/@fluentui-example-data-7ff73e94-9cc1-444b-a0ab-ce426dbd767d.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "[breaking] Remove AvatarExamples", + "packageName": "@fluentui/example-data", + "email": "elcraig@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/example-data/etc/example-data.api.md b/packages/example-data/etc/example-data.api.md index a0032b7c3d2d9..5e0e2d62bd2c0 100644 --- a/packages/example-data/etc/example-data.api.md +++ b/packages/example-data/etc/example-data.api.md @@ -4,52 +4,6 @@ ```ts -// @public -export const AvatarExamples: { - readonly size: readonly [20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128]; - readonly nameAndImage: { - name: string; - image: string; - }[]; - readonly name: string[]; - readonly image: string[]; - readonly badge: readonly [{ - readonly status: "available"; - }, { - readonly status: "away"; - }, { - readonly status: "busy"; - }, { - readonly status: "doNotDisturb"; - }, { - readonly status: "offline"; - }, { - readonly status: "outOfOffice"; - }, { - readonly status: "available"; - readonly outOfOffice: true; - }, { - readonly status: "away"; - readonly outOfOffice: true; - }, { - readonly status: "busy"; - readonly outOfOffice: true; - }, { - readonly status: "doNotDisturb"; - readonly outOfOffice: true; - }, { - readonly status: "offline"; - readonly outOfOffice: true; - }, { - readonly status: "outOfOffice"; - readonly outOfOffice: true; - }]; - readonly activeDisplay: readonly ["ring", "ring-shadow", "ring-glow", "shadow", "glow"]; - readonly color: readonly ["neutral", "brand", "colorful"]; - readonly namedColors: readonly ["darkRed", "cranberry", "red", "pumpkin", "peach", "marigold", "gold", "brass", "brown", "forest", "seafoam", "darkGreen", "lightTeal", "teal", "steel", "blue", "royalBlue", "cornflower", "navy", "lavender", "purple", "grape", "lilac", "pink", "magenta", "plum", "beige", "mink", "platinum", "anchor"]; - readonly hexagon: string; -}; - // @internal (undocumented) export function createGroups(groupCount: number, groupDepth: number, startIndex: number, itemsPerGroup: number, level?: number, key?: string, isCollapsed?: boolean): IExampleGroup[]; diff --git a/packages/example-data/src/AvatarExamples.tsx b/packages/example-data/src/AvatarExamples.tsx deleted file mode 100644 index d9f3bb0db6764..0000000000000 --- a/packages/example-data/src/AvatarExamples.tsx +++ /dev/null @@ -1,99 +0,0 @@ -const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar'; - -/** Sample names and images for use in Avatar examples */ -const nameAndImage = [ - { name: 'Katri Athokas', image: `${imageRoot}/KatriAthokas.jpg` }, - { name: 'Elvia Atkins', image: `${imageRoot}/ElviaAtkins.jpg` }, - { name: 'Mauricio August', image: `${imageRoot}/MauricioAugust.jpg` }, - { name: 'Colin Ballinger', image: `${imageRoot}/ColinBallinger.jpg` }, - { name: 'Lydia Bauer', image: `${imageRoot}/LydiaBauer.jpg` }, - { name: 'Amanda Brady', image: `${imageRoot}/AmandaBrady.jpg` }, - { name: 'Henry Brill', image: `${imageRoot}/HenryBrill.jpg` }, - { name: 'Celeste Burton', image: `${imageRoot}/CelesteBurton.jpg` }, - { name: 'Robin Counts', image: `${imageRoot}/RobinCounts.jpg` }, - { name: 'Tim Deboer', image: `${imageRoot}/TimDeboer.jpg` }, - { name: 'Cameron Evans', image: `${imageRoot}/CameronEvans.jpg` }, - { name: 'Isaac Fielder', image: `${imageRoot}/IsaacFielder.jpg` }, - { name: 'Cecil Folk', image: `${imageRoot}/CecilFolk.jpg` }, - { name: 'Miguel Garcia', image: `${imageRoot}/MiguelGarcia.jpg` }, - { name: 'Wanda Howard', image: `${imageRoot}/WandaHoward.jpg` }, - { name: 'Mona Kane', image: `${imageRoot}/MonaKane.jpg` }, - { name: 'Kat Larsson', image: `${imageRoot}/KatLarsson.jpg` }, - { name: 'Ashley McCarthy', image: `${imageRoot}/AshleyMcCarthy.jpg` }, - { name: 'Johnie McConnell', image: `${imageRoot}/JohnieMcConnell.jpg` }, - { name: 'Allan Munger', image: `${imageRoot}/AllanMunger.jpg` }, - { name: 'Erik Nason', image: `${imageRoot}/ErikNason.jpg` }, - { name: 'Kristin Patterson', image: `${imageRoot}/KristinPatterson.jpg` }, - { name: 'Daisy Phillips', image: `${imageRoot}/DaisyPhillips.jpg` }, - { name: 'Carole Poland', image: `${imageRoot}/CarolePoland.jpg` }, - { name: 'Carlos Slattery', image: `${imageRoot}/CarlosSlattery.jpg` }, - { name: 'Robert Tolbert', image: `${imageRoot}/RobertTolbert.jpg` }, - { name: 'Kevin Sturgis', image: `${imageRoot}/KevinSturgis.jpg` }, - { name: 'Charlotte Waltson', image: `${imageRoot}/CharlotteWaltson.jpg` }, - { name: 'Elliot Woodward', image: `${imageRoot}/ElliotWoodward.jpg` }, -]; - -/** Arrays of example values for each Avatar prop */ -export const AvatarExamples = { - size: [20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128], - nameAndImage: nameAndImage, - name: nameAndImage.map(p => p.name), - image: nameAndImage.map(p => p.image), - badge: [ - { status: 'available' }, - { status: 'away' }, - { status: 'busy' }, - { status: 'doNotDisturb' }, - { status: 'offline' }, - { status: 'outOfOffice' }, - { status: 'available', outOfOffice: true }, - { status: 'away', outOfOffice: true }, - { status: 'busy', outOfOffice: true }, - { status: 'doNotDisturb', outOfOffice: true }, - { status: 'offline', outOfOffice: true }, - { status: 'outOfOffice', outOfOffice: true }, - ], - activeDisplay: ['ring', 'ring-shadow', 'ring-glow', 'shadow', 'glow'], - color: ['neutral', 'brand', 'colorful'], - namedColors: [ - 'darkRed', - 'cranberry', - 'red', - 'pumpkin', - 'peach', - 'marigold', - 'gold', - 'brass', - 'brown', - 'forest', - 'seafoam', - 'darkGreen', - 'lightTeal', - 'teal', - 'steel', - 'blue', - 'royalBlue', - 'cornflower', - 'navy', - 'lavender', - 'purple', - 'grape', - 'lilac', - 'pink', - 'magenta', - 'plum', - 'beige', - 'mink', - 'platinum', - 'anchor', - ], - /** A SVG hexagon data URL used by the CustomShape example */ - hexagon: - 'data:image/svg+xml;utf8,' + - '' + - '' + - '', -} as const; diff --git a/packages/example-data/src/index.ts b/packages/example-data/src/index.ts index c30ed167fd8bd..2c0372236942a 100644 --- a/packages/example-data/src/index.ts +++ b/packages/example-data/src/index.ts @@ -5,7 +5,6 @@ * can easily be added to the live example editor.) */ -export * from './AvatarExamples'; export * from './facepile'; export * from './listItems'; export * from './lorem'; diff --git a/packages/react-examples/.storybook/preview-loader.js b/packages/react-examples/.storybook/preview-loader.js index 46dce8665c563..6418a4e0f56f2 100644 --- a/packages/react-examples/.storybook/preview-loader.js +++ b/packages/react-examples/.storybook/preview-loader.js @@ -5,9 +5,8 @@ import * as path from 'path'; * Replace the PACKAGE_NAME token in preview.js with the actual current package name * (or error if the package doesn't have examples). * - * Also if this is the storybook for `@fluentui/react` or `@fluentui/react-components`, replace the - * REACT_DEPS token with the actual list of dependencies which have their own examples but should be - * included in the suite package storybook. + * Also if this is the storybook for `@fluentui/react`, replace the REACT_DEPS token with the actual + * list of deps which have their own examples but should be included in the suite package storybook. * @this {{addDependency: (file: string)=>void;callback: ((err: Error | null)=>void)}} loader context - https://webpack.js.org/api/loaders/#the-loader-context * @param {string} source */ diff --git a/packages/react-examples/.storybook/preview.js b/packages/react-examples/.storybook/preview.js index 6835f21d3a781..dc7a1eb45ff5a 100644 --- a/packages/react-examples/.storybook/preview.js +++ b/packages/react-examples/.storybook/preview.js @@ -11,8 +11,11 @@ import { withKeytipLayer, withStrictMode } from '@fluentui/storybook'; */ const packageNamePlaceholder = 'PACKAGE_NAME'; +initializeIcons(); + addDecorator(withPerformance); -addCustomDecorators(); +addDecorator(withStrictMode); +addDecorator(withKeytipLayer); addParameters({ a11y: { @@ -28,30 +31,6 @@ export const parameters = {}; // Helpers // ================================ -/** - * Add various storybook decorators narrowed by package name. - * - * NOTE: - * - this is a temporary workaround until we migrate to new storybook 6 APIs -> old `addDecorator` duplicates rendered decorators - * - source of this function is interpolated during runtime with webpack - * - */ -function addCustomDecorators() { - /** - * @type {Set} - */ - const customDecorators = new Set(); - - if (['react-cards'].includes(packageNamePlaceholder)) { - initializeIcons(); - customDecorators.add(withStrictMode); - } - - customDecorators.add(withKeytipLayer); - - customDecorators.forEach(decorator => addDecorator(decorator)); -} - /** * @typedef {{ * default: { title: string }; @@ -111,20 +90,6 @@ function generateStoriesFromExamples(key, stories, req) { return; } - const isCollocatedStory = segments.includes('src'); - - if (key.endsWith('.mdx') || isCollocatedStory) { - // opt out of the custom naming for mdx and collocated, use meta information - - const content = req(key); - if (content.default) { - stories.set(key, req(key)); - } else { - console.warn(`No default export in ${key} - stories ignored`); - } - return; - } - const componentName = generateComponentName(segments); if (!stories.has(componentName)) { diff --git a/packages/storybook/README.md b/packages/storybook/README.md index 6c07f923ac607..52af3eea4272f 100644 --- a/packages/storybook/README.md +++ b/packages/storybook/README.md @@ -16,14 +16,3 @@ import { withStrictMode } from '@fluentui/storybook'; addDecorator(withStrictMode); ``` - -### Decorator: withThemeProvider - -This adds Theme knob which allows selecting different theme to provide to components via `ThemeProvider`. - -```js -import { addDecorator } from '@storybook/react'; -import { withThemeProvider } from '@fluentui/storybook'; - -addDecorator(withThemeProvider); -``` diff --git a/packages/storybook/package.json b/packages/storybook/package.json index c353d2aa23cf8..30d90987517aa 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -24,7 +24,6 @@ "react": "16.8.6" }, "dependencies": { - "@fluentui/react-storybook": "9.0.0-beta.0", "@fluentui/react": "^8.46.1", "@fluentui/theme": "^2.4.4", "@storybook/addon-knobs": "6.3.0", diff --git a/packages/storybook/src/decorators/index.ts b/packages/storybook/src/decorators/index.ts index 885c0bcbd1e79..e3cc4b5aedf72 100644 --- a/packages/storybook/src/decorators/index.ts +++ b/packages/storybook/src/decorators/index.ts @@ -1 +1,2 @@ export * from './withKeytipLayer'; +export * from './withStrictMode'; diff --git a/packages/storybook/src/decorators/withStrictMode.tsx b/packages/storybook/src/decorators/withStrictMode.tsx new file mode 100644 index 0000000000000..f5b9daefce9c5 --- /dev/null +++ b/packages/storybook/src/decorators/withStrictMode.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { useStrictMode } from '../knobs/useStrictMode'; + +const StrictModeWrapper: React.FunctionComponent<{}> = props => { + const strictMode = useStrictMode(); + return strictMode ? {props.children} : <>{props.children}; +}; + +export const withStrictMode = (storyFn: () => React.ReactNode) => { + return {storyFn()}; +}; diff --git a/packages/storybook/src/index.ts b/packages/storybook/src/index.ts index 2eeb81228a281..531f4c92b9e37 100644 --- a/packages/storybook/src/index.ts +++ b/packages/storybook/src/index.ts @@ -1,2 +1 @@ export * from './decorators/index'; -export { withStrictMode } from '@fluentui/react-storybook'; diff --git a/packages/storybook/src/knobs/useStrictMode.ts b/packages/storybook/src/knobs/useStrictMode.ts new file mode 100644 index 0000000000000..2ccd911b064d4 --- /dev/null +++ b/packages/storybook/src/knobs/useStrictMode.ts @@ -0,0 +1,3 @@ +import { boolean } from '@storybook/addon-knobs'; + +export const useStrictMode = () => boolean('Use React.StrictMode', false);