feat: remove react-storybook and replace its functionality via standard react-storybook-addon package

.github/CODEOWNERS

@@ -111,7 +111,6 @@ packages/react-monaco-editor @microsoft/fluentui-v8-website
 packages/react-components/react-positioning @microsoft/teams-prg
 packages/react-components/react-overflow @microsoft/teams-prg
 packages/react-components/react-shared-contexts @microsoft/teams-prg
-packages/react-components/react-storybook @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-storybook-addon @microsoft/cxe-prg
 packages/react-components/react-tabster @microsoft/teams-prg
 packages/react-components/react-theme @microsoft/teams-prg

.storybook/preview.js

@@ -1,4 +1,3 @@
-import { withFluentProvider, withStrictMode } from '@fluentui/react-storybook';
 import 'cypress-storybook/react';
 import * as dedent from 'dedent';
 import './docs-root.css';
@@ -23,7 +22,7 @@ window.__setCurrentStory = function (categorization, story) {
 };
 
 /** @type {NonNullable<import('@storybook/react').Story['decorators']>} */
-export const decorators = [withFluentProvider, withStrictMode];
+export const decorators = [];
 
 /** @type {import('@storybook/addons').Parameters} */
 export const parameters = {

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

@@ -12,6 +12,8 @@ import type { Theme } from '@fluentui/react-theme';
 
 // @public
 export interface FluentGlobals extends Args {
+    // (undocumented)
+    [STRICT_MODE_ID]?: boolean;
     // (undocumented)
     [THEME_ID]?: ThemeIds;
 }

packages/react-components/react-storybook-addon/src/components/ReactStrictMode.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconButton, Icons } from '@storybook/components';
+
+import { STRICT_MODE_ID } from '../constants';
+import { useGlobals } from '../hooks';
+
+export const ReactStrictMode = () => {
+  const [globals, updateGlobals] = useGlobals();
+
+  const isActive = globals[STRICT_MODE_ID] ?? false;
+
+  const toggleStrictMode = React.useCallback(
+    () =>
+      updateGlobals({
+        [STRICT_MODE_ID]: !isActive,
+      }),
+    [isActive, updateGlobals],
+  );
+
+  return (
+    <IconButton key={STRICT_MODE_ID} active={isActive} title="Toggle React Strict mode" onClick={toggleStrictMode}>
+      <Icons icon="lock" />
+    </IconButton>
+  );
+};

packages/react-components/react-storybook-addon/src/constants.ts

@@ -1,2 +1,4 @@
 export const ADDON_ID = 'storybook/fluentui-react-addon';
 export const THEME_ID = `${ADDON_ID}/theme` as const;
+
+export const STRICT_MODE_ID = `${ADDON_ID}/strict-mode` as const;

packages/react-components/react-storybook-addon/src/decorators/withReactStrictMode.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { STRICT_MODE_ID } from '../constants';
+import { FluentStoryContext } from '../hooks';
+
+export const withReactStrictMode = (StoryFn: () => JSX.Element, context: FluentStoryContext) => {
+  const isActive = context.globals[STRICT_MODE_ID] ?? false;
+
+  return <StrictModeWrapper strictMode={isActive}>{StoryFn()}</StrictModeWrapper>;
+};
+
+const StrictModeWrapper = (props: { strictMode: boolean; children: React.ReactElement }) => {
+  return props.strictMode ? <React.StrictMode>{props.children}</React.StrictMode> : props.children;
+};

packages/react-components/react-storybook-addon/src/hooks.ts

@@ -1,7 +1,7 @@
 import { useGlobals as useStorybookGlobals, Args as StorybookArgs } from '@storybook/api';
 import { StoryContext as StorybookContext, Parameters } from '@storybook/addons';
 
-import { THEME_ID } from './constants';
+import { STRICT_MODE_ID, THEME_ID } from './constants';
 import { ThemeIds } from './theme';
 
 export interface FluentStoryContext extends StorybookContext {
@@ -14,6 +14,7 @@ export interface FluentStoryContext extends StorybookContext {
  */
 export interface FluentGlobals extends StorybookArgs {
   [THEME_ID]?: ThemeIds;
+  [STRICT_MODE_ID]?: boolean;
 }
 
 /**

packages/react-components/react-storybook-addon/src/preset/manager.ts

@@ -1,7 +1,8 @@
 import { addons, types } from '@storybook/addons';
 
-import { ADDON_ID, THEME_ID } from '../constants';
+import { ADDON_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
 import { ThemePicker } from '../components/ThemePicker';
+import { ReactStrictMode } from '../components/ReactStrictMode';
 
 addons.register(ADDON_ID, () => {
   addons.add(THEME_ID, {
@@ -10,4 +11,10 @@ addons.register(ADDON_ID, () => {
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: ThemePicker,
   });
+  addons.add(STRICT_MODE_ID, {
+    type: types.TOOL,
+    title: 'React Strict Mode',
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: ReactStrictMode,
+  });
 });

packages/react-components/react-storybook-addon/src/preset/preview.ts

@@ -10,5 +10,6 @@
  */
 
 import { withFluentProvider } from '../decorators/withFluentProvider';
+import { withReactStrictMode } from '../decorators/withReactStrictMode';
 
-export const decorators = [withFluentProvider];
+export const decorators = [withFluentProvider, withReactStrictMode];