revert(react-storybook-addon): Remove addon and reintroduce `withFlue…

…ntProvider` (microsoft#20475)

* revert(react-storybook-addon): Remove addon and reintroduce
`withFluentProvider`

no build DX for storybook microsoft#18357. This PR reverts the register of that
addon and only applying this addon to react-components breaks theming
for all other packages

* Change files

* update md

.storybook/preview.js

@@ -1,9 +1,9 @@
-import { withStrictMode } from '@fluentui/react-storybook';
+import { withFluentProvider, withStrictMode } from '@fluentui/react-storybook';
 import 'cypress-storybook/react';
 import * as dedent from 'dedent';
 
 /** @type {NonNullable<import('@storybook/react').Story['decorators']>} */
-export const decorators = [withStrictMode];
+export const decorators = [withFluentProvider, withStrictMode];
 
 /** @type {import('@storybook/react').Parameters} */
 export const parameters = {

change/@fluentui-react-components-d47a7a2f-27ca-4961-944d-5b0e8c775c9a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "revert(react-storybook-addon): Remove addon and reintroduce `withFluentProvider`",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/.storybook/main.js

@@ -9,7 +9,7 @@ module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookCon
     '../src/**/*.stories.@(ts|tsx)',
     ...utils.getVnextStories(),
   ],
-  addons: [...rootMain.addons, '@fluentui/react-storybook-addon'],
+  addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
 

packages/react-components/package.json

@@ -29,7 +29,6 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-storybook-addon": "9.0.0-beta.0",
     "@fluentui/scripts": "^1.0.0",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",

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

@@ -6,6 +6,9 @@
 
 import * as React_2 from 'react';
 
+// @public (undocumented)
+export const withFluentProvider: (...args: any) => any;
+
 // @public (undocumented)
 export const withStrictMode: (storyFn: () => React_2.ReactNode) => JSX.Element;
 

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

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

packages/react-storybook/src/decorators/withFluentProvider.tsx

@@ -0,0 +1,20 @@
+import { makeDecorator } from '@storybook/addons';
+import { FluentProvider } from '@fluentui/react-provider';
+import * as React from 'react';
+
+import { useFluentTheme } from '../knobs/useFluentTheme';
+
+const ProviderWrapper: React.FunctionComponent = props => {
+  const { theme } = useFluentTheme();
+
+  return <FluentProvider theme={theme}>{props.children}</FluentProvider>;
+};
+
+export const withFluentProvider = makeDecorator({
+  name: 'withFluentProvider',
+  parameterName: 'theme',
+  skipIfNoParametersOrOptions: false,
+  wrapper: (storyFn, context) => {
+    return <ProviderWrapper>{storyFn(context)}</ProviderWrapper>;
+  },
+});

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

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