feat(react-storybook-addon): make withFluentProvider decorator configurable to be used for VR tests

packages/react-components/react-storybook/README.md

@@ -22,8 +22,33 @@ You need to register fluentui decorators on your particular level (global/story/
 // @filename: .storybook/preview.js
 
 import { withKnobs } from '@storybook/addon-knobs';
-import { withStrictMode } from '@fluentui/react-storybook';
+import { withStrictMode, withFluentVrTestVariants } from '@fluentui/react-storybook';
 
 // Register decorators on global level
-export const decorators = [withKnobs, withStrictMode];
+export const decorators = [withKnobs, withStrictMode, withFluentVrTestVariants];
+```
+
+## withFluentVrTestVariants:
+
+```js
+import { withFluentVrTestVariants, DARK_MODE, HIGH_CONTRAST, RTL } from '@fluentui/react-storybook';
+import { Button } from '@fluentui/react-components';
+
+export const Button = () => <Button> Hello World </Button>;
+
+export const ButtonDarkMode = {
+  render: Button,
+  parameters: { variant: DARK_MODE }, // story renders in Dark mode.
+};
+
+export const ButtonHighContrast = {
+  render: Button,
+  parameters: { variant: HIGH_CONTRAST }; // story renders in High Contrast mode.
+}
+
+export const ButtonRTL = {
+  render: Button,
+  parameters: { variant: RTL }, // story renders in RTL.
+};
+
 ```

packages/react-components/react-storybook/etc/react-storybook.api.md

@@ -3,13 +3,27 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+
 import * as React_2 from 'react';
 
+// @public (undocumented)
+export const DARK_MODE = "DarkMode";
+
+// @public (undocumented)
+export const HIGH_CONTRAST = "HighContrast";
+
+// @public (undocumented)
+export const RTL = "Rtl";
+
 // @public (undocumented)
 export const withFluentProvider: (...args: any) => any;
 
+// @public (undocumented)
+export const withFluentVrTestVariants: () => React_2.ReactNode;
+
 // @public (undocumented)
 export const withStrictMode: (storyFn: () => React_2.ReactNode) => JSX.Element;
 
 // (No @packageDocumentation comment for this package)
+
 ```

packages/react-components/react-storybook/src/decorators/index.ts

@@ -1,2 +1,3 @@
 export * from './withFluentProvider';
 export * from './withStrictMode';
+export * from './withFluentVrTestVariants';

packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { teamsHighContrastTheme, webDarkTheme, webLightTheme } from '@fluentui/react-theme';
+import { makeDecorator } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
+
+export const DARK_MODE = 'DarkMode';
+export const HIGH_CONTRAST = 'HighContrast';
+export const RTL = 'Rtl';
+
+// MakeDecoratorOptions is not an exported interface by storybook so had to include necessary options
+interface AssertedMakeDecoratorOptions {
+  name: string;
+  parameterName: string;
+  skipIfNoParametersOrOptions?: boolean;
+  wrapper: (
+    storyFn: (context: StoryContext) => React.ReactNode,
+    context: StoryContext,
+    settings: {
+      parameters: typeof DARK_MODE | typeof HIGH_CONTRAST | typeof RTL;
+    },
+  ) => React.ReactNode;
+}
+
+type AssertedMakeDecorator = ({
+  name,
+  parameterName,
+  skipIfNoParametersOrOptions,
+  wrapper,
+}: AssertedMakeDecoratorOptions) => () => React.ReactNode;
+
+export const withFluentVrTestVariants = ((makeDecorator as unknown) as AssertedMakeDecorator)({
+  name: 'withFluentVrTestVariants.',
+  parameterName: 'vrTestVariant',
+  skipIfNoParametersOrOptions: true,
+  wrapper: (storyFn, context, { parameters }) => {
+    if (parameters === RTL) {
+      return (
+        <FluentProvider dir={'rtl'} theme={webLightTheme}>
+          {storyFn(context)}
+        </FluentProvider>
+      );
+    }
+
+    if (parameters === DARK_MODE) {
+      return <FluentProvider theme={webDarkTheme}>{storyFn(context)}</FluentProvider>;
+    }
+
+    if (parameters === HIGH_CONTRAST) {
+      return <FluentProvider theme={teamsHighContrastTheme}>{storyFn(context)}</FluentProvider>;
+    }
+
+    return storyFn(context);
+  },
+});

packages/react-components/react-storybook/src/index.test.ts

@@ -1,9 +1,9 @@
-import { withFluentProvider, withStrictMode } from './index';
+import { withFluentProvider, withFluentVrTestVariants, withStrictMode } from './index';
 
 describe(`public api`, () => {
   describe(`decorators`, () => {
     it(`should work`, () => {
-      const decorators = [withFluentProvider, withStrictMode];
+      const decorators = [withFluentProvider, withStrictMode, withFluentVrTestVariants];
 
       // @TODO - added proper tests
       expect(decorators).toBeDefined();

packages/react-components/react-storybook/src/index.ts

@@ -1 +1,8 @@
-export { withFluentProvider, withStrictMode } from './decorators/index';
+export {
+  withFluentProvider,
+  withStrictMode,
+  withFluentVrTestVariants,
+  DARK_MODE,
+  HIGH_CONTRAST,
+  RTL,
+} from './decorators/index';