chore(v0 docs): Add storybook stories that reference docsite examples…

… for 1JS VR tool migration (microsoft#25663)

packages/fluentui/docs/.storybook/main.js

@@ -0,0 +1,41 @@
+const path = require('path');
+const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
+
+module.exports = /** @type {import('../../../../.storybook/main').StorybookBaseConfig} */ ({
+ stories: ['../src/**/*.stories.tsx'],
+ core: {
+ builder: 'webpack5',
+ },
+ babel: {},
+ typescript: {
+ // disable react-docgen-typescript (totally not needed here, slows things down a lot)
+ reactDocgen: false,
+ },
+ webpackFinal: config => {
+ const tsPaths = new TsconfigPathsPlugin({
+ configFile: path.resolve(__dirname, '../../../../tsconfig.base.json'),
+ });
+
+ if (config.resolve) {
+ config.resolve.plugins ? config.resolve.plugins.push(tsPaths) : (config.resolve.plugins = [tsPaths]);
+ }
+
+ if (config.module) {
+ config.module.rules?.unshift({
+ test: /\.(ts|tsx)$/,
+ use: [
+ {
+ loader: '@griffel/webpack-loader',
+ options: {
+ babelOptions: {
+ presets: ['@babel/preset-typescript'],
+ },
+ },
+ },
+ ],
+ });
+ }
+
+ return config;
+ },
+});

packages/fluentui/docs/.storybook/preview.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Provider, teamsTheme } from '@fluentui/react-northstar';
+import Screener from 'screener-storybook/src/screener';
+
+/** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
+export const parameters = { layout: 'none' };
+/** @type {import("@storybook/react").DecoratorFn[]} */
+export const decorators = [
+ (story, context) => {
+ const isRtl = context.id.toLowerCase().includes('rtl');
+
+ return (
+ <Provider theme={teamsTheme} dir={isRtl ? 'rtl' : 'ltr'}>
+ <div className="testWrapper" style={{ width: '600px' }}>
+ {story()}
+ </div>
+ </Provider>
+ );
+ },
+];
+
+// For static storybook per https://github.com/screener-io/screener-storybook#testing-with-static-storybook-app
+if (typeof window === 'object') {
+ /** @type {*} */ (window).__screener_storybook__ = require('@storybook/react').getStorybook;
+}

packages/fluentui/docs/package.json

@@ -58,17 +58,22 @@
  "@types/react-custom-scrollbars": "^4.0.5",
  "@types/react-router-dom": "^5.1.5",
  "@types/react-virtualized": "^9.21.8",
- "@types/react-window": "^1.8.2"
+ "@types/react-window": "^1.8.2",
+ "storywright": "0.0.26-beta.1"
  },
  "publishConfig": {
  "access": "public"
  },
  "scripts": {
  "build": "gulp build:docs",
+ "build:storybook": "build-storybook -o dist/storybook",
  "lint": "eslint --ext .js,.ts,.tsx .",
  "lint:fix": "yarn lint --fix",
  "start": "gulp docs",
+ "screener:build": "yarn build:storybook",
  "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs",
+ "start:storybook": "start-storybook",
+ "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
  "vr:build": "cross-env NODE_ENV=production gulp screener:build",
  "vr:test": "gulp screener:runner"
  }

packages/fluentui/docs/src/vr-tests/Accordion/Accordion.stories.tsx

@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Accordion } from '@fluentui/react-northstar';
+import AccordionDefaultBsize from '../../examples/components/Accordion/Performance/AccordionDefault.bsize';
+import AccordionExampleRtl from '../../examples/components/Accordion/Rtl/AccordionExample.rtl';
+import AccordionExample from '../../examples/components/Accordion/Types/AccordionExample.shorthand';
+import AccordionExclusiveExample from '../../examples/components/Accordion/Types/AccordionExclusiveExample.shorthand';
+import AccordionExclusiveExpandedExample from '../../examples/components/Accordion/Types/AccordionExclusiveExpandedExample.shorthand';
+import AccordionPanelCustomContentExample from '../../examples/components/Accordion/Usage/AccordionPanelCustomContentExample.shorthand';
+import AccordionPanelCustomTitleExample from '../../examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand';
+import AccordionDefaultExample from '../../examples/components/Accordion/Visual/AccordionExampleDefault.shorthand';
+
+export default { component: Accordion, title: 'Accordion' } as ComponentMeta<typeof Accordion>;
+
+export {
+ AccordionDefaultBsize,
+ AccordionExampleRtl,
+ AccordionExample,
+ AccordionExclusiveExample,
+ AccordionExclusiveExpandedExample,
+ AccordionPanelCustomContentExample,
+ AccordionPanelCustomTitleExample,
+ AccordionDefaultExample,
+};

packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright, Steps } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Accordion, accordionTitleSlotClassNames } from '@fluentui/react-northstar';
+import AccordionExampleCustomTitle from '../../examples/components/Accordion/Visual/AccordionExampleCustomTitle.shorthand';
+
+export default {
+ component: Accordion,
+ title: 'Accordion',
+ decorators: [
+ story => (
+ <StoryWright
+ steps={new Steps()
+ .focus(`.${accordionTitleSlotClassNames.contentWrapper}`)
+ .snapshot('Focuses the accordion title')
+ .end()}
+ >
+ {story()}
+ </StoryWright>
+ ),
+ ],
+} as ComponentMeta<typeof Accordion>;
+
+export { AccordionExampleCustomTitle };

packages/fluentui/docs/src/vr-tests/Alert/Alert.stories.tsx

@@ -0,0 +1,48 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import AlertDefaultBsize from '../../examples/components/Alert/Performance/AlertDefault.bsize';
+import AlertExampleRtl from '../../examples/components/Alert/Rtl/AlertExample.rtl';
+import AlertExampleChildrenRtl from '../../examples/components/Alert/Rtl/AlertExampleChildren.rtl';
+import AlertExampleDismissActionRtl from '../../examples/components/Alert/Rtl/AlertExampleDismissAction.rtl';
+import AlertExampleDismissAction from '../../examples/components/Alert/Slots/AlertExampleActions.shorthand';
+import AlertExampleHeader from '../../examples/components/Alert/Slots/AlertExampleHeader.shorthand';
+import AlertExampleIcon from '../../examples/components/Alert/Slots/AlertExampleIcon.shorthand';
+import AlertExampleDismissible from '../../examples/components/Alert/State/AlertExampleVisible.shorthand';
+import AlertExample from '../../examples/components/Alert/Types/AlertExample.shorthand';
+import AlertExampleDismissActions from '../../examples/components/Alert/Usage/AlertExampleDismissActions.shorthand';
+import AlertExampleImportantMessage from '../../examples/components/Alert/Usage/AlertExampleImportantMessage.shorthand';
+import AlertExampleWidth from '../../examples/components/Alert/Usage/AlertExampleWidth.shorthand';
+import AlertExampleShorthand from '../../examples/components/Alert/Variations/AlertExampleAttached.shorthand';
+import AlertExampleDanger from '../../examples/components/Alert/Variations/AlertExampleDanger';
+import AlertExampleFitted from '../../examples/components/Alert/Variations/AlertExampleFitted.shorthand';
+import AlertExampleInfo from '../../examples/components/Alert/Variations/AlertExampleInfo';
+import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExampleOofs';
+import AlertExampleSuccess from '../../examples/components/Alert/Variations/AlertExampleSuccess.shorthand';
+import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent';
+import AlertExampleWarning from '../../examples/components/Alert/Variations/AlertExampleWarning.shorthand';
+
+export default { component: Alert, title: 'Alert' } as ComponentMeta<typeof Alert>;
+
+export {
+ AlertDefaultBsize,
+ AlertExampleRtl,
+ AlertExampleChildrenRtl,
+ AlertExampleDismissActionRtl,
+ AlertExampleDismissAction,
+ AlertExampleHeader,
+ AlertExampleIcon,
+ AlertExampleDismissible,
+ AlertExample,
+ AlertExampleDismissActions,
+ AlertExampleImportantMessage,
+ AlertExampleWidth,
+ AlertExampleShorthand,
+ AlertExampleDanger,
+ AlertExampleFitted,
+ AlertExampleInfo,
+ AlertExampleOof,
+ AlertExampleSuccess,
+ AlertExampleUrgent,
+ AlertExampleWarning,
+};

packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleDanger from '../../examples/components/Alert/Variations/AlertExampleDanger.shorthand';
+
+export default {
+ component: Alert,
+ title: 'Alert',
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleDangerTeams = getThemeStoryVariant(AlertExampleDanger, 'teamsV2');
+
+const AlertExampleDangerTeamsDark = getThemeStoryVariant(AlertExampleDanger, 'teamsDarkV2');
+
+const AlertExampleDangerTeamsHighContrast = getThemeStoryVariant(AlertExampleDanger, 'teamsHighContrast');
+
+export {
+ AlertExampleDanger,
+ AlertExampleDangerTeams,
+ AlertExampleDangerTeamsDark,
+ AlertExampleDangerTeamsHighContrast,
+};

packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import screenerSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleDismissible from '../../examples/components/Alert/Types/AlertExampleDismissible.shorthand';
+
+export default {
+ component: Alert,
+ title: 'Alert',
+ decorators: [story => <StoryWright steps={screenerSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleDismissibleTeams = getThemeStoryVariant(AlertExampleDismissible, 'teamsV2');
+
+const AlertExampleDismissibleTeamsDark = getThemeStoryVariant(AlertExampleDismissible, 'teamsDarkV2');
+
+const AlertExampleDismissibleTeamsHighContrast = getThemeStoryVariant(AlertExampleDismissible, 'teamsHighContrast');
+
+export {
+ AlertExampleDismissible,
+ AlertExampleDismissibleTeams,
+ AlertExampleDismissibleTeamsDark,
+ AlertExampleDismissibleTeamsHighContrast,
+};

packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleInfo from '../../examples/components/Alert/Variations/AlertExampleInfo.shorthand';
+
+export default {
+ component: Alert,
+ title: 'Alert',
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleInfoTeams = getThemeStoryVariant(AlertExampleInfo, 'teamsV2');
+
+const AlertExampleInfoTeamsDark = getThemeStoryVariant(AlertExampleInfo, 'teamsDarkV2');
+
+const AlertExampleInfoTeamsHighContrast = getThemeStoryVariant(AlertExampleInfo, 'teamsHighContrast');
+
+export { AlertExampleInfo, AlertExampleInfoTeams, AlertExampleInfoTeamsDark, AlertExampleInfoTeamsHighContrast };

packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import screenerSteps from './commonStoryWrightSteps';
+
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExampleOofs.shorthand';
+
+export default {
+ component: Alert,
+ title: 'Alert',
+ decorators: [story => <StoryWright steps={screenerSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleOofTeams = getThemeStoryVariant(AlertExampleOof, 'teamsV2');
+
+const AlertExampleOofTeamsDark = getThemeStoryVariant(AlertExampleOof, 'teamsDarkV2');
+
+const AlertExampleOofTeamsHighContrast = getThemeStoryVariant(AlertExampleOof, 'teamsHighContrast');
+
+export { AlertExampleOof, AlertExampleOofTeams, AlertExampleOofTeamsDark, AlertExampleOofTeamsHighContrast };

packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { StoryWright } from 'storywright';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '@fluentui/react-northstar';
+import screenerSteps from './commonStoryWrightSteps';
+import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant';
+import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent.shorthand';
+
+export default {
+ component: Alert,
+ title: 'Alert',
+ decorators: [story => <StoryWright steps={screenerSteps}>{story()}</StoryWright>],
+} as ComponentMeta<typeof Alert>;
+
+const AlertExampleUrgentTeams = getThemeStoryVariant(AlertExampleUrgent, 'teamsV2');
+
+const AlertExampleUrgentTeamsDark = getThemeStoryVariant(AlertExampleUrgent, 'teamsDarkV2');
+
+const AlertExampleUrgentTeamsHighContrast = getThemeStoryVariant(AlertExampleUrgent, 'teamsHighContrast');
+
+export {
+ AlertExampleUrgent,
+ AlertExampleUrgentTeams,
+ AlertExampleUrgentTeamsDark,
+ AlertExampleUrgentTeamsHighContrast,
+};

packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts

@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Keys, Steps } from 'storywright';
+import { alertDismissActionClassName } from '@fluentui/react-northstar';
+
+const selectors = {
+ dismissAction: `.${alertDismissActionClassName}`,
+};
+
+const screenerSteps = new Steps()
+ .hover(selectors.dismissAction)
+ .snapshot('Hovers the action button')
+ .keys('body', Keys.tab)
+ .snapshot('Focuses the action button')
+ .hover(selectors.dismissAction)
+ .snapshot('Hovers the focused action button')
+ .end();
+
+export default screenerSteps;

packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx

@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Animation } from '@fluentui/react-northstar';
+import AnimationExample from '../../examples/components/Animation/Types/AnimationExample.shorthand';
+import AnimationExampleDelay from '../../examples/components/Animation/Types/AnimationExampleDelay.shorthand';
+import AnimationExampleDirection from '../../examples/components/Animation/Types/AnimationExampleDirection.shorthand';
+import AnimationExampleDuration from '../../examples/components/Animation/Types/AnimationExampleDuration.shorthand';
+import AnimationExampleFillMode from '../../examples/components/Animation/Types/AnimationExampleFillMode.shorthand';
+import AnimationExampleIterationCount from '../../examples/components/Animation/Types/AnimationExampleIterationCount.shorthand';
+import AnimationExampleTimingFunction from '../../examples/components/Animation/Types/AnimationExampleTimingFunction.shorthand';
+import AnimationExampleVisible from '../../examples/components/Animation/Usage/AnimationExampleVisible.shorthand';
+
+export default { component: Animation, title: 'Animation' } as ComponentMeta<typeof Animation>;
+
+export {
+ AnimationExample,
+ AnimationExampleDelay,
+ AnimationExampleDirection,
+ AnimationExampleDuration,
+ AnimationExampleFillMode,
+ AnimationExampleIterationCount,
+ AnimationExampleTimingFunction,
+ AnimationExampleVisible,
+};

packages/fluentui/docs/src/vr-tests/Attachment/Attachment.stories.tsx

@@ -0,0 +1,22 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ComponentMeta } from '@storybook/react';
+import { Attachment } from '@fluentui/react-northstar';
+import AttachmentDefaultBsize from '../../examples/components/Attachment/Performance/AttachmentDefault.bsize';
+import AttachmentExampleRtl from '../../examples/components/Attachment/Rtl/AttachmentExample.rtl';
+import AttachmentDescriptionExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentDescriptionExample.shorthand';
+import AttachmentHeaderExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentHeaderExample.shorthand';
+import AttachmentIconExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentIconExample.shorthand';
+import AttachmentExampleShorthand from '../../examples/components/Attachment/Types/AttachmentExample.shorthand';
+import AttachmentProgressExampleShorthand from '../../examples/components/Attachment/Types/AttachmentProgressExample.shorthand';
+
+export default { component: Attachment, title: 'Attachment' } as ComponentMeta<typeof Attachment>;
+
+export {
+ AttachmentDefaultBsize,
+ AttachmentExampleRtl,
+ AttachmentDescriptionExampleShorthand,
+ AttachmentHeaderExampleShorthand,
+ AttachmentIconExampleShorthand,
+ AttachmentExampleShorthand,
+ AttachmentProgressExampleShorthand,
+};