chore(v0 docs): Add storybook stories that reference docsite examples for 1JS VR tool migration

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,
+};