chore(storybook): Add theme picker to storybook toolbar

.storybook/preview.js

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

change/@fluentui-react-components-639d9023-4a53-403d-a3eb-fa50ca331ac6.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(storybook): Theme picker as storybook addon",
+  "packageName": "@fluentui/react-components",
+  "email": "lingfangao@hotmail.com",
+  "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],
+  addons: [...rootMain.addons, '@fluentui/react-storybook-addon'],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
 

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

@@ -24,4 +24,7 @@ const options = {
 export const decorators = [...rootPreview.decorators];
 
 /** @type {typeof rootPreview.parameters} */
-export const parameters = { ...rootPreview.parameters, options };
+export const parameters = {
+  ...rootPreview.parameters,
+  options,
+};

packages/react-components/package.json

@@ -29,6 +29,7 @@
   },
   "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-components/src/Migrations/utils.stories.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Source } from '@storybook/addon-docs';
 import { makeStyles } from '@fluentui/react-make-styles';
 

packages/react-storybook-addon/README.md

@@ -3,3 +3,38 @@
 **Storybook addon for Fluent UI React [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+## ✨ Features
+
+**Toolbar/Tools**
+
+- adds fluent theme switcher
+  - ![Fluent Theme Switcher](https://user-images.githubusercontent.com/20744592/138872560-8ef40c25-193c-47db-a216-7c1e86fe8cda.png)
+
+## Getting Started
+
+### Installation
+
+> **NOTE:** this package is not being published yet
+
+```sh
+yarn add -D @fluentui/react-storybook-addon
+```
+
+### Configuration
+
+Add following content to .storybook/main.js:
+
+```js
+module.exports = {
+  addons: ['@fluentui/react-storybook-addon'],
+};
+```
+
+## Development
+
+1. Run inner loop from monorepo root `yarn workspace @fluentui/react-storybook-addon storybook`
+
+   - > 💡 this will run `build` script that compiles addon implementation so it can be consumed by local storybook
+
+2. Every time you do any change to implementation, after you ran your local storybook you'll need to manually run `yarn workspace @fluentui/react-storybook-addon build` to reflect those changes

packages/react-storybook-addon/package.json

@@ -31,6 +31,8 @@
     "react": "16.8.6"
   },
   "dependencies": {
+    "@fluentui/react-theme": "9.0.0-beta.2",
+    "@fluentui/react-provider": "9.0.0-beta.3",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
+
+import { ThemeIds, themes, defaultTheme } from '../theme';
+import { THEME_ID } from '../constants';
+import { useGlobals } from '../hooks';
+
+export interface ThemeSelectorItem {
+  id: string;
+  title: string;
+  onClick: () => void;
+  value: string;
+  active: boolean;
+}
+
+function createThemeItems(
+  value: typeof themes,
+  changeTheme: (id: ThemeIds) => void,
+  getCurrentTheme: () => ThemeIds,
+): ThemeSelectorItem[] {
+  return value.map(item => {
+    return {
+      id: item.id,
+      title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,
+      onClick: () => {
+        changeTheme(item.id);
+      },
+      value: item.id,
+      active: getCurrentTheme() === item.id,
+    };
+  });
+}
+
+export const ThemePicker = () => {
+  const [globals, updateGlobals] = useGlobals();
+  const selectedThemeId = globals[THEME_ID] ?? defaultTheme.id;
+  const selectedTheme = themes.find(entry => entry.id === selectedThemeId);
+
+  const isActive = selectedThemeId !== defaultTheme.id;
+
+  const setTheme = React.useCallback(
+    (id: ThemeIds) => {
+      updateGlobals({ [THEME_ID]: id });
+    },
+    [updateGlobals],
+  );
+
+  const renderTooltip = React.useCallback(
+    (props: { onHide: () => void }) => {
+      return (
+        <TooltipLinkList
+          links={createThemeItems(
+            themes,
+            id => {
+              setTheme(id);
+              props.onHide();
+            },
+            () => selectedThemeId,
+          )}
+        />
+      );
+    },
+    [selectedThemeId, setTheme],
+  );
+
+  return (
+    <>
+      <WithTooltip placement="top" trigger="click" closeOnClick tooltip={renderTooltip}>
+        <IconButton key={THEME_ID} title="Change Fluent theme" active={isActive}>
+          <Icons icon="chevrondown" />
+          <span style={{ marginLeft: 5 }}>Theme: {selectedTheme?.label}</span>
+        </IconButton>
+      </WithTooltip>
+    </>
+  );
+};

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

@@ -1 +1,2 @@
-// @TODO - add addon constants
+export const ADDON_ID = 'storybook/fluentui-react-addon';
+export const THEME_ID = `${ADDON_ID}/theme` as const;

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { StoryFn as StoryFunction } from '@storybook/addons';
+
+import { themes, defaultTheme, FluentProvider } from '../theme';
+import { THEME_ID } from '../constants';
+import { FluentGlobals, FluentStoryContext } from '../hooks';
+
+import { Theme } from '@fluentui/react-theme';
+
+const getActiveFluentTheme = (globals: FluentGlobals) => {
+  const selectedThemeId = globals[THEME_ID];
+  const { theme } = themes.find(value => value.id === selectedThemeId) ?? defaultTheme;
+
+  return { theme };
+};
+
+export const withFluentProvider = (StoryFn: StoryFunction<React.ReactElement>, context: FluentStoryContext) => {
+  const { theme } = getActiveFluentTheme(context.globals);
+
+  return (
+    <FluentProvider theme={theme}>
+      <FluentExampleContainer theme={theme}>{StoryFn()}</FluentExampleContainer>
+    </FluentProvider>
+  );
+};
+
+const FluentExampleContainer: React.FC<{ theme: Theme }> = props => {
+  const { theme } = props;
+
+  const backgroundColor = theme.colorNeutralBackground1;
+  return <div style={{ padding: 10, backgroundColor: backgroundColor }}>{props.children}</div>;
+};

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

@@ -0,0 +1,20 @@
+import { useGlobals as useStorybookGlobals, Args as StorybookArgs } from '@storybook/api';
+import { StoryContext as StorybookContext } from '@storybook/addons';
+
+import { THEME_ID } from './constants';
+import { ThemeIds } from './theme';
+
+export interface FluentStoryContext extends StorybookContext {
+  globals: FluentGlobals;
+}
+
+/**
+ * Extends the storybook globals object to include fluent specific propoerties
+ */
+export interface FluentGlobals extends StorybookArgs {
+  [THEME_ID]?: ThemeIds;
+}
+
+export function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] {
+  return useStorybookGlobals();
+}

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

@@ -1 +1,13 @@
-// @TODO - Register the addon
+import { addons, types } from '@storybook/addons';
+
+import { ADDON_ID, THEME_ID } from '../constants';
+import { ThemePicker } from '../components/ThemePicker';
+
+addons.register(ADDON_ID, () => {
+  addons.add(THEME_ID, {
+    title: 'Fluent Theme Picker',
+    type: types.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: ThemePicker,
+  });
+});

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

@@ -9,4 +9,6 @@
  * https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper
  */
 
-export const decorators = [];
+import { withFluentProvider } from '../decorators/withFluentProvider';
+
+export const decorators = [withFluentProvider];

packages/react-storybook-addon/src/theme.ts

@@ -0,0 +1,27 @@
+import {
+  webLightTheme,
+  webDarkTheme,
+  webHighContrastTheme,
+  teamsLightTheme,
+  teamsDarkTheme,
+  teamsHighContrastTheme,
+  Theme,
+} from '@fluentui/react-theme';
+
+export { FluentProvider } from '@fluentui/react-provider';
+
+export const themes = [
+  { id: 'web-light', label: 'Web Light', theme: webLightTheme },
+  { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme },
+  { id: 'web-high-contrast', label: 'Web High Contrast', theme: webHighContrastTheme },
+  { id: 'teams-light', label: 'Teams Light', theme: teamsLightTheme },
+  { id: 'teams-dark', label: 'Teams Dark', theme: teamsDarkTheme },
+  { id: 'teams-high-contrast', label: 'Teams High Contrast', theme: teamsHighContrastTheme },
+] as const;
+
+export const defaultTheme = themes[0];
+
+export type ThemeIds = typeof themes[number]['id'];
+export type ThemeLabels = typeof themes[number]['label'];
+
+export { Theme };

packages/react-storybook/README.md

@@ -22,8 +22,8 @@ You need to register fluentui decorators on your particular level (global/story/
 // @filename: .storybook/preview.js
 
 import { withKnobs } from '@storybook/addon-knobs';
-import { withFluentProvider, withStrictMode } from '@fluentui/react-storybook';
+import { withStrictMode } from '@fluentui/react-storybook';
 
 // Register decorators on global level
-export const decorators = [withKnobs, withFluentProvider, withStrictMode];
+export const decorators = [withKnobs, withStrictMode];
 ```

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

@@ -6,13 +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;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```

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

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

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

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

packages/storybook/src/index.ts

@@ -1,2 +1,2 @@
 export * from './decorators/index';
-export { withFluentProvider, withStrictMode } from '@fluentui/react-storybook';
+export { withStrictMode } from '@fluentui/react-storybook';