From ec117c0e18c995b02cb97965e38184b9a9a86f1d Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Thu, 21 Oct 2021 20:27:36 +0200 Subject: [PATCH 01/11] experiment(storybook): Version picker Chromatic stores published storybooks with commits, we can simply build an azure function to keep the version -> commit mapping and integrate a picker into the docs page --- .../.storybook/{preview.js => preview.jsx} | 11 +++++- .../src/Migrations/utils.stories.tsx | 35 ++++++++++++++++++- 2 files changed, 44 insertions(+), 2 deletions(-) rename packages/react-components/.storybook/{preview.js => preview.jsx} (72%) diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.jsx similarity index 72% rename from packages/react-components/.storybook/preview.js rename to packages/react-components/.storybook/preview.jsx index f488f6cbdf571b..acd7547cddef11 100644 --- a/packages/react-components/.storybook/preview.js +++ b/packages/react-components/.storybook/preview.jsx @@ -1,3 +1,5 @@ +import * as React from 'react'; +import { FluentDocsContainer } from '../src/Migrations/utils.stories'; import * as rootPreview from '../../../.storybook/preview'; // load global styles @@ -24,4 +26,11 @@ const options = { export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ -export const parameters = { ...rootPreview.parameters, options }; +export const parameters = { + ...rootPreview.parameters, + docs: { + // TODO extract this to a separate component + container: FluentDocsContainer, + }, + options, +}; diff --git a/packages/react-components/src/Migrations/utils.stories.tsx b/packages/react-components/src/Migrations/utils.stories.tsx index b3926d0fd37e2d..022d5bcba4219f 100644 --- a/packages/react-components/src/Migrations/utils.stories.tsx +++ b/packages/react-components/src/Migrations/utils.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { Source } from '@storybook/addon-docs'; +import { DocsContainer, Source } from '@storybook/addon-docs'; import { makeStyles } from '@fluentui/react-make-styles'; const useCodeComparisonStyles = makeStyles({ @@ -58,3 +58,36 @@ export const CodeExample = (props: { title?: string; children: React.ReactElemen ); }; + +export const VersionPicker = () => { + // TODO fetch this mapping from an azure function + const versions: Record = { + '9.0.0-alpha.123': 'https://f6366b4--6002298f95a00c00213f4d55.chromatic.com', + '9.0.0-beta.1': 'https://3c3fae8--6002298f95a00c00213f4d55.chromatic.com', + }; + + const onChange = (e: React.ChangeEvent) => { + window.parent.location.href = e.target.value; + }; + + return ( + + ); +}; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +export const FluentDocsContainer = ({ children, context }) => { + return ( + <> + + {children} + + ); +}; From 85e17c3b6b89750ea6c60f44eb2eaee98376c573 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Thu, 21 Oct 2021 20:29:00 +0200 Subject: [PATCH 02/11] Change files --- ...ct-components-639d9023-4a53-403d-a3eb-fa50ca331ac6.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-components-639d9023-4a53-403d-a3eb-fa50ca331ac6.json diff --git a/change/@fluentui-react-components-639d9023-4a53-403d-a3eb-fa50ca331ac6.json b/change/@fluentui-react-components-639d9023-4a53-403d-a3eb-fa50ca331ac6.json new file mode 100644 index 00000000000000..e4e5e3540ba7c6 --- /dev/null +++ b/change/@fluentui-react-components-639d9023-4a53-403d-a3eb-fa50ca331ac6.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "experiment(storybook): Version picker", + "packageName": "@fluentui/react-components", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "none" +} From a8db3293ee2ad881f131dcf092c0db1d0112b0c7 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Thu, 21 Oct 2021 20:41:42 +0200 Subject: [PATCH 03/11] use fluent menu --- .../src/Migrations/utils.stories.tsx | 38 ++++++++++++++----- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/react-components/src/Migrations/utils.stories.tsx b/packages/react-components/src/Migrations/utils.stories.tsx index 022d5bcba4219f..e61291caa80e34 100644 --- a/packages/react-components/src/Migrations/utils.stories.tsx +++ b/packages/react-components/src/Migrations/utils.stories.tsx @@ -2,6 +2,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import { DocsContainer, Source } from '@storybook/addon-docs'; import { makeStyles } from '@fluentui/react-make-styles'; +import { + Menu, + MenuItem, + MenuList, + MenuPopover, + MenuTrigger, + MenuButton, + FluentProvider, + webLightTheme, +} from '../index'; const useCodeComparisonStyles = makeStyles({ root: { @@ -61,23 +71,33 @@ export const CodeExample = (props: { title?: string; children: React.ReactElemen export const VersionPicker = () => { // TODO fetch this mapping from an azure function + // This URL can just be constructed during publish time and fed to the azure function const versions: Record = { '9.0.0-alpha.123': 'https://f6366b4--6002298f95a00c00213f4d55.chromatic.com', '9.0.0-beta.1': 'https://3c3fae8--6002298f95a00c00213f4d55.chromatic.com', }; - const onChange = (e: React.ChangeEvent) => { - window.parent.location.href = e.target.value; + const navigateHandler = (href: string) => () => { + window.parent.location.href = href; }; return ( - + + + + {Object.keys(versions)[0]} + + + + {Object.keys(versions).map(version => ( + + {version} + + ))} + + + + ); }; From 8dcc43863216b51d0d834c74197f459b8bf1ff5b Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Thu, 21 Oct 2021 21:10:34 +0200 Subject: [PATCH 04/11] cleanup --- .../react-components/.storybook/{preview.jsx => preview.js} | 2 -- packages/react-components/src/Migrations/utils.stories.tsx | 6 ++---- 2 files changed, 2 insertions(+), 6 deletions(-) rename packages/react-components/.storybook/{preview.jsx => preview.js} (91%) diff --git a/packages/react-components/.storybook/preview.jsx b/packages/react-components/.storybook/preview.js similarity index 91% rename from packages/react-components/.storybook/preview.jsx rename to packages/react-components/.storybook/preview.js index acd7547cddef11..16bf5766a4f092 100644 --- a/packages/react-components/.storybook/preview.jsx +++ b/packages/react-components/.storybook/preview.js @@ -1,4 +1,3 @@ -import * as React from 'react'; import { FluentDocsContainer } from '../src/Migrations/utils.stories'; import * as rootPreview from '../../../.storybook/preview'; @@ -29,7 +28,6 @@ export const decorators = [...rootPreview.decorators]; export const parameters = { ...rootPreview.parameters, docs: { - // TODO extract this to a separate component container: FluentDocsContainer, }, options, diff --git a/packages/react-components/src/Migrations/utils.stories.tsx b/packages/react-components/src/Migrations/utils.stories.tsx index e61291caa80e34..8b63feb16a243a 100644 --- a/packages/react-components/src/Migrations/utils.stories.tsx +++ b/packages/react-components/src/Migrations/utils.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { DocsContainer, Source } from '@storybook/addon-docs'; +import { DocsContainer, DocsContainerProps, Meta, Source } from '@storybook/addon-docs'; import { makeStyles } from '@fluentui/react-make-styles'; import { Menu, @@ -101,9 +101,7 @@ export const VersionPicker = () => { ); }; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -export const FluentDocsContainer = ({ children, context }) => { +export const FluentDocsContainer = ({ children, context }: DocsContainerProps & { children: React.ReactNode }) => { return ( <> From 153d565d60deaa44c3e9f428106a22a5e87568ab Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 25 Oct 2021 10:39:47 +0200 Subject: [PATCH 05/11] add network fetch --- .../src/Migrations/utils.stories.tsx | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/react-components/src/Migrations/utils.stories.tsx b/packages/react-components/src/Migrations/utils.stories.tsx index 8b63feb16a243a..cd3aa43acbc962 100644 --- a/packages/react-components/src/Migrations/utils.stories.tsx +++ b/packages/react-components/src/Migrations/utils.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { DocsContainer, DocsContainerProps, Meta, Source } from '@storybook/addon-docs'; +import { DocsContainer, DocsContainerProps, Source } from '@storybook/addon-docs'; import { makeStyles } from '@fluentui/react-make-styles'; import { Menu, @@ -69,15 +69,24 @@ export const CodeExample = (props: { title?: string; children: React.ReactElemen ); }; +interface VersionEntry { + version: string; + commit: string; +} + export const VersionPicker = () => { - // TODO fetch this mapping from an azure function - // This URL can just be constructed during publish time and fed to the azure function - const versions: Record = { - '9.0.0-alpha.123': 'https://f6366b4--6002298f95a00c00213f4d55.chromatic.com', - '9.0.0-beta.1': 'https://3c3fae8--6002298f95a00c00213f4d55.chromatic.com', - }; + const [versions, setVersions] = React.useState([]); + + React.useEffect(() => { + fetch('https://fluentstorybookversion.azurewebsites.net/api/GetVersions') + .then(res => res.json()) + .then(json => { + setVersions(json); + }); + }, []); - const navigateHandler = (href: string) => () => { + const navigateHandler = (commit: string) => () => { + const href = `https://${commit}--6002298f95a00c00213f4d55.chromatic.com`; window.parent.location.href = href; }; @@ -85,13 +94,13 @@ export const VersionPicker = () => { - {Object.keys(versions)[0]} + Select version - {Object.keys(versions).map(version => ( - - {version} + {versions.map(entry => ( + + {entry.version} ))} @@ -102,6 +111,7 @@ export const VersionPicker = () => { }; export const FluentDocsContainer = ({ children, context }: DocsContainerProps & { children: React.ReactNode }) => { + console.log(process.env.STORYBOOK_THEME); return ( <> From c00b67682b3e29d298f4e6d0f21b2fab063f6460 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 25 Oct 2021 15:21:26 +0200 Subject: [PATCH 06/11] use addon --- .storybook/main.js | 1 + .storybook/preview.js | 4 +- packages/react-components/.env | 2 + .../react-components/.storybook/manager.js | 12 +++ .../react-components/.storybook/preview.js | 4 - .../react-storybook-addon/src/ThemePicker.tsx | 76 +++++++++++++++++++ .../src/VersionPicker.tsx | 58 ++++++++++++++ .../react-storybook-addon/src/constants.ts | 6 +- packages/react-storybook-addon/src/hooks.ts | 16 ++++ packages/react-storybook-addon/src/preset.ts | 0 .../src/preset/manager.ts | 21 ++++- .../src/preset/preview.ts | 4 +- packages/react-storybook-addon/src/theme.ts | 27 +++++++ .../src/withFluentProvider.tsx | 19 +++++ packages/react-storybook/README.md | 4 +- .../react-storybook/src/decorators/index.ts | 1 - .../src/decorators/withFluentProvider.tsx | 20 ----- packages/react-storybook/src/index.test.ts | 4 +- 18 files changed, 245 insertions(+), 34 deletions(-) create mode 100644 packages/react-components/.env create mode 100644 packages/react-storybook-addon/src/ThemePicker.tsx create mode 100644 packages/react-storybook-addon/src/VersionPicker.tsx create mode 100644 packages/react-storybook-addon/src/hooks.ts create mode 100644 packages/react-storybook-addon/src/preset.ts create mode 100644 packages/react-storybook-addon/src/theme.ts create mode 100644 packages/react-storybook-addon/src/withFluentProvider.tsx delete mode 100644 packages/react-storybook/src/decorators/withFluentProvider.tsx diff --git a/.storybook/main.js b/.storybook/main.js index 1d033ca5887359..23c22c5d37efe8 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -44,6 +44,7 @@ module.exports = /** @type {Omit} */ ({ '@storybook/addon-knobs/preset', 'storybook-addon-performance', 'storybook-addon-export-to-codesandbox', + '@fluentui/react-storybook-addon', ], webpackFinal: config => { const tsPaths = new TsconfigPathsPlugin({ diff --git a/.storybook/preview.js b/.storybook/preview.js index 9dbedb5216d056..cefe0bed0de8c5 100644 --- a/.storybook/preview.js +++ b/.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} */ -export const decorators = [withFluentProvider, withStrictMode]; +export const decorators = [withStrictMode]; /** @type {import('@storybook/react').Parameters} */ export const parameters = { diff --git a/packages/react-components/.env b/packages/react-components/.env new file mode 100644 index 00000000000000..5911548270edf0 --- /dev/null +++ b/packages/react-components/.env @@ -0,0 +1,2 @@ +STORYBOOK_CHROMATIC_APPID=6002298f95a00c00213f4d55.chromatic.com +STORYBOOK_VERSION_API_BASEURL=https://fluentstorybookversion.azurewebsites.net diff --git a/packages/react-components/.storybook/manager.js b/packages/react-components/.storybook/manager.js index 4a91dc7bc27dd7..f91ea5d9239a6b 100644 --- a/packages/react-components/.storybook/manager.js +++ b/packages/react-components/.storybook/manager.js @@ -5,4 +5,16 @@ addons.setConfig({ showPanel: true, panelPosition: 'right', theme, + toolbar: { + zoom: { hidden: true }, + outline: { hidden: true }, + eject: { hidden: true }, + copy: { hidden: true }, + fullscreen: { hidden: true }, + 'storybook/background': { hidden: true }, + 'storybook/viewport': { hidden: true }, + 'storybook/measure-addon/tool': { hidden: true }, + 'storybook/outline': { hidden: true }, + 'storybook/a11y/panel': { hidden: true }, + }, }); diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js index 16bf5766a4f092..f2b2e2f988aebd 100644 --- a/packages/react-components/.storybook/preview.js +++ b/packages/react-components/.storybook/preview.js @@ -1,4 +1,3 @@ -import { FluentDocsContainer } from '../src/Migrations/utils.stories'; import * as rootPreview from '../../../.storybook/preview'; // load global styles @@ -27,8 +26,5 @@ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ export const parameters = { ...rootPreview.parameters, - docs: { - container: FluentDocsContainer, - }, options, }; diff --git a/packages/react-storybook-addon/src/ThemePicker.tsx b/packages/react-storybook-addon/src/ThemePicker.tsx new file mode 100644 index 00000000000000..9ea4f4d78acf02 --- /dev/null +++ b/packages/react-storybook-addon/src/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 ( + { + setTheme(id); + props.onHide(); + }, + () => selectedThemeId, + )} + /> + ); + }, + [selectedThemeId, setTheme], + ); + + return ( + <> + + + + Theme: {selectedTheme?.label} + + + + ); +}; diff --git a/packages/react-storybook-addon/src/VersionPicker.tsx b/packages/react-storybook-addon/src/VersionPicker.tsx new file mode 100644 index 00000000000000..f36ad474bd5ea2 --- /dev/null +++ b/packages/react-storybook-addon/src/VersionPicker.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import { Icons, TooltipLinkList, WithTooltip, IconButton } from '@storybook/components'; +import { VERSION_ID } from './constants'; + +export interface VersionPickerItem { + id: string; + title: string; + onClick: () => void; + value: string; + active: boolean; +} + +function createVersionItems(value: VersionEntry[]): VersionPickerItem[] { + return value.map(item => { + return { + id: item.version, + title: item.version, + onClick: () => { + const href = `https://${item.commit}--${process.env.STORYBOOK_CHROMATIC_APPID}.chromatic.com`; + window.parent.location.href = href; + }, + value: item.version, + active: process.env.STORYBOOK_PACKAGE_VERISION === item.version, + }; + }); +} + +interface VersionEntry { + version: string; + commit: string; +} + +export const VersionPicker = () => { + const [versions, setVersions] = React.useState([]); + + React.useEffect(() => { + fetch(`${process.env.STORYBOOK_VERSION_API_BASEURL}/api/GetVersions`) + .then(res => res.json()) + .then(json => { + setVersions(json); + }); + }, []); + + const renderTooltip = React.useCallback(() => { + return ; + }, [versions]); + + return ( + <> + + + + Version: {process.env.STORYBOOK_PACKAGE_VERISION} + + + + ); +}; diff --git a/packages/react-storybook-addon/src/constants.ts b/packages/react-storybook-addon/src/constants.ts index 3ef367bcec608a..baf5991b548e12 100644 --- a/packages/react-storybook-addon/src/constants.ts +++ b/packages/react-storybook-addon/src/constants.ts @@ -1 +1,5 @@ -// @TODO - add addon constants +export const ADDON_ID = 'storybook/fluentui-react-addon'; +export const THEME_ID = `${ADDON_ID}/theme` as const; +export const VERSION_ID = `${ADDON_ID}/versions` as const; +export const PARAM_KEY = `myAddonParameter`; +export const EVENTS = {} as const; diff --git a/packages/react-storybook-addon/src/hooks.ts b/packages/react-storybook-addon/src/hooks.ts new file mode 100644 index 00000000000000..c14ff48f9d760e --- /dev/null +++ b/packages/react-storybook-addon/src/hooks.ts @@ -0,0 +1,16 @@ +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 StoryContext extends StorybookContext { + globals: Globals; +} +export interface Globals extends StorybookArgs { + [THEME_ID]?: ThemeIds; +} + +export function useGlobals(): [Globals, (newGlobals: Globals) => void] { + return useStorybookGlobals(); +} diff --git a/packages/react-storybook-addon/src/preset.ts b/packages/react-storybook-addon/src/preset.ts new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-storybook-addon/src/preset/manager.ts b/packages/react-storybook-addon/src/preset/manager.ts index bb08716ee3e203..179efee1d8c82e 100644 --- a/packages/react-storybook-addon/src/preset/manager.ts +++ b/packages/react-storybook-addon/src/preset/manager.ts @@ -1 +1,20 @@ -// @TODO - Register the addon +import { addons, types } from '@storybook/addons'; + +import { ADDON_ID, THEME_ID, VERSION_ID } from '../constants'; +import { ThemePicker } from '../ThemePicker'; +import { VersionPicker } from '../VersionPicker'; + +addons.register(ADDON_ID, () => { + addons.add(VERSION_ID, { + title: 'Fluent Version Picker', + type: types.TOOL, + match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: VersionPicker, + }); + addons.add(THEME_ID, { + title: 'Fluent Theme Picker', + type: types.TOOL, + match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: ThemePicker, + }); +}); diff --git a/packages/react-storybook-addon/src/preset/preview.ts b/packages/react-storybook-addon/src/preset/preview.ts index 5540cbb6b136e1..ccfbd1a3ef5c0a 100644 --- a/packages/react-storybook-addon/src/preset/preview.ts +++ b/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 '../withFluentProvider'; + +export const decorators = [withFluentProvider]; diff --git a/packages/react-storybook-addon/src/theme.ts b/packages/react-storybook-addon/src/theme.ts new file mode 100644 index 00000000000000..04ec2f84d423c2 --- /dev/null +++ b/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 }; diff --git a/packages/react-storybook-addon/src/withFluentProvider.tsx b/packages/react-storybook-addon/src/withFluentProvider.tsx new file mode 100644 index 00000000000000..c83b2d7906b73e --- /dev/null +++ b/packages/react-storybook-addon/src/withFluentProvider.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { StoryFn as StoryFunction } from '@storybook/addons'; + +import { themes, defaultTheme, FluentProvider } from './theme'; +import { THEME_ID } from './constants'; +import { Globals, StoryContext } from './hooks'; + +const getActiveFluentTheme = (globals: Globals) => { + const selectedThemeId = globals[THEME_ID]; + const { theme } = themes.find(value => value.id === selectedThemeId) ?? defaultTheme; + + return { theme }; +}; + +export const withFluentProvider = (StoryFn: StoryFunction, context: StoryContext) => { + const { theme } = getActiveFluentTheme(context.globals); + + return {StoryFn()}; +}; diff --git a/packages/react-storybook/README.md b/packages/react-storybook/README.md index 41e2f9226846d6..bdc825fa64b223 100644 --- a/packages/react-storybook/README.md +++ b/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]; ``` diff --git a/packages/react-storybook/src/decorators/index.ts b/packages/react-storybook/src/decorators/index.ts index ff044dce8afc1a..b5502b4153487a 100644 --- a/packages/react-storybook/src/decorators/index.ts +++ b/packages/react-storybook/src/decorators/index.ts @@ -1,2 +1 @@ -export * from './withFluentProvider'; export * from './withStrictMode'; diff --git a/packages/react-storybook/src/decorators/withFluentProvider.tsx b/packages/react-storybook/src/decorators/withFluentProvider.tsx deleted file mode 100644 index 2d55636bad8f88..00000000000000 --- a/packages/react-storybook/src/decorators/withFluentProvider.tsx +++ /dev/null @@ -1,20 +0,0 @@ -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 {props.children}; -}; - -export const withFluentProvider = makeDecorator({ - name: 'withFluentProvider', - parameterName: 'theme', - skipIfNoParametersOrOptions: false, - wrapper: (storyFn, context) => { - return {storyFn(context)}; - }, -}); diff --git a/packages/react-storybook/src/index.test.ts b/packages/react-storybook/src/index.test.ts index 3f2fe8451a8629..446d13e865c7f7 100644 --- a/packages/react-storybook/src/index.test.ts +++ b/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(); From 4afccab7ca057afe035c40e16021feb5e37144f0 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 25 Oct 2021 15:23:01 +0200 Subject: [PATCH 07/11] remove old --- .../src/Migrations/utils.stories.tsx | 62 ------------------- 1 file changed, 62 deletions(-) diff --git a/packages/react-components/src/Migrations/utils.stories.tsx b/packages/react-components/src/Migrations/utils.stories.tsx index cd3aa43acbc962..4017d0dd09fafe 100644 --- a/packages/react-components/src/Migrations/utils.stories.tsx +++ b/packages/react-components/src/Migrations/utils.stories.tsx @@ -1,17 +1,6 @@ import * as React from 'react'; -// eslint-disable-next-line import/no-extraneous-dependencies import { DocsContainer, DocsContainerProps, Source } from '@storybook/addon-docs'; import { makeStyles } from '@fluentui/react-make-styles'; -import { - Menu, - MenuItem, - MenuList, - MenuPopover, - MenuTrigger, - MenuButton, - FluentProvider, - webLightTheme, -} from '../index'; const useCodeComparisonStyles = makeStyles({ root: { @@ -68,54 +57,3 @@ export const CodeExample = (props: { title?: string; children: React.ReactElemen ); }; - -interface VersionEntry { - version: string; - commit: string; -} - -export const VersionPicker = () => { - const [versions, setVersions] = React.useState([]); - - React.useEffect(() => { - fetch('https://fluentstorybookversion.azurewebsites.net/api/GetVersions') - .then(res => res.json()) - .then(json => { - setVersions(json); - }); - }, []); - - const navigateHandler = (commit: string) => () => { - const href = `https://${commit}--6002298f95a00c00213f4d55.chromatic.com`; - window.parent.location.href = href; - }; - - return ( - - - - Select version - - - - {versions.map(entry => ( - - {entry.version} - - ))} - - - - - ); -}; - -export const FluentDocsContainer = ({ children, context }: DocsContainerProps & { children: React.ReactNode }) => { - console.log(process.env.STORYBOOK_THEME); - return ( - <> - - {children} - - ); -}; From f26fb4c7be1a41f1832b82a25b448adc3b054977 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 25 Oct 2021 15:34:07 +0200 Subject: [PATCH 08/11] update deps --- packages/react-storybook-addon/package.json | 3 +++ .../src/withFluentProvider.tsx | 22 ++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/react-storybook-addon/package.json b/packages/react-storybook-addon/package.json index 3787ffc8e7534c..ae8ef15ca31eee 100644 --- a/packages/react-storybook-addon/package.json +++ b/packages/react-storybook-addon/package.json @@ -31,6 +31,9 @@ "react": "16.8.6" }, "dependencies": { + "@fluentui/react-theme": "9.0.0-beta.1", + "@fluentui/react-provider": "9.0.0-beta.2", + "@fluentui/react-make-styles": "9.0.0-beta.1", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-storybook-addon/src/withFluentProvider.tsx b/packages/react-storybook-addon/src/withFluentProvider.tsx index c83b2d7906b73e..e2b56fe5a4ba98 100644 --- a/packages/react-storybook-addon/src/withFluentProvider.tsx +++ b/packages/react-storybook-addon/src/withFluentProvider.tsx @@ -5,6 +5,17 @@ import { themes, defaultTheme, FluentProvider } from './theme'; import { THEME_ID } from './constants'; import { Globals, StoryContext } from './hooks'; +import { makeStyles } from '@fluentui/react-make-styles'; + +const useStyles = makeStyles({ + root: theme => ({ + padding: '10px', + fontFamily: theme.fontFamilyBase, + color: theme.colorNeutralForeground1, + background: theme.colorNeutralBackground1, + }), +}); + const getActiveFluentTheme = (globals: Globals) => { const selectedThemeId = globals[THEME_ID]; const { theme } = themes.find(value => value.id === selectedThemeId) ?? defaultTheme; @@ -14,6 +25,15 @@ const getActiveFluentTheme = (globals: Globals) => { export const withFluentProvider = (StoryFn: StoryFunction, context: StoryContext) => { const { theme } = getActiveFluentTheme(context.globals); + return ( + + {StoryFn()} + + ); +}; + +const FluentExampleContainer: React.FC = props => { + const styles = useStyles(); - return {StoryFn()}; + return
{props.children}
; }; From 5a797d9e94543bc133f7446eeb0e3a557f831c6d Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 25 Oct 2021 15:35:33 +0200 Subject: [PATCH 09/11] update stypes --- packages/react-components/src/Migrations/utils.stories.tsx | 2 +- packages/react-storybook-addon/src/withFluentProvider.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-components/src/Migrations/utils.stories.tsx b/packages/react-components/src/Migrations/utils.stories.tsx index 4017d0dd09fafe..023da5b7ae22de 100644 --- a/packages/react-components/src/Migrations/utils.stories.tsx +++ b/packages/react-components/src/Migrations/utils.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DocsContainer, DocsContainerProps, Source } from '@storybook/addon-docs'; +import { Source } from '@storybook/addon-docs'; import { makeStyles } from '@fluentui/react-make-styles'; const useCodeComparisonStyles = makeStyles({ diff --git a/packages/react-storybook-addon/src/withFluentProvider.tsx b/packages/react-storybook-addon/src/withFluentProvider.tsx index e2b56fe5a4ba98..54439fa76a7725 100644 --- a/packages/react-storybook-addon/src/withFluentProvider.tsx +++ b/packages/react-storybook-addon/src/withFluentProvider.tsx @@ -11,7 +11,6 @@ const useStyles = makeStyles({ root: theme => ({ padding: '10px', fontFamily: theme.fontFamilyBase, - color: theme.colorNeutralForeground1, background: theme.colorNeutralBackground1, }), }); From 89001c05eacf9865760c338b8ef045bc6fb281af Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 25 Oct 2021 15:48:13 +0200 Subject: [PATCH 10/11] update md --- packages/react-storybook/etc/react-storybook.api.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/react-storybook/etc/react-storybook.api.md b/packages/react-storybook/etc/react-storybook.api.md index 4a3d4b67037344..e9d37726e6504f 100644 --- a/packages/react-storybook/etc/react-storybook.api.md +++ b/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) ``` From b9e145cb6550d6fa493c9934430924bb75079a54 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 25 Oct 2021 16:09:12 +0200 Subject: [PATCH 11/11] remove export --- packages/storybook/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/storybook/src/index.ts b/packages/storybook/src/index.ts index 3a4c10f824da12..2eeb81228a2810 100644 --- a/packages/storybook/src/index.ts +++ b/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';