@fluentui/react-storybook-addon 0.5.0 → 0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0

package/lib/components/ThemePicker.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
+import { ArrowDownIcon } from '@storybook/icons';
+import { useParameter } from 'storybook/manager-api';
+import { themes, defaultTheme } from '../theme';
+import { THEME_ID } from '../constants';
+import { useGlobals } from '../hooks';
+function createThemeItems(value, changeTheme, getCurrentTheme) {
+    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 fluentTheme = useParameter('fluentTheme');
+    var _globals_THEME_ID;
+    const selectedThemeId = fluentTheme ? fluentTheme : (_globals_THEME_ID = globals[THEME_ID]) !== null && _globals_THEME_ID !== void 0 ? _globals_THEME_ID : defaultTheme.id;
+    const selectedTheme = themes.find((entry)=>entry.id === selectedThemeId);
+    const isActive = selectedThemeId !== defaultTheme.id;
+    const setTheme = React.useCallback((id)=>{
+        updateGlobals({
+            [THEME_ID]: id
+        });
+    }, [
+        updateGlobals
+    ]);
+    const renderTooltip = React.useCallback((props)=>{
+        return /*#__PURE__*/ React.createElement(TooltipLinkList, {
+            links: createThemeItems(themes, (id)=>{
+                setTheme(id);
+                props.onHide();
+            }, ()=>selectedThemeId)
+        });
+    }, [
+        selectedThemeId,
+        setTheme
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(WithTooltip, {
+        placement: "top",
+        trigger: "click",
+        closeOnOutsideClick: true,
+        tooltip: renderTooltip
+    }, /*#__PURE__*/ React.createElement(IconButton, {
+        key: THEME_ID,
+        title: "Change Fluent theme",
+        active: isActive
+    }, /*#__PURE__*/ React.createElement(ArrowDownIcon, null), /*#__PURE__*/ React.createElement("span", {
+        style: {
+            marginLeft: 5
+        }
+    }, "Theme: ", selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.label))));
+};

package/lib/components/ThemePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';\nimport { ArrowDownIcon } from '@storybook/icons';\nimport { useParameter } from 'storybook/manager-api';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ThemeIds, themes, defaultTheme } from '../theme';\nimport { THEME_ID } from '../constants';\nimport { useGlobals, FluentParameters } from '../hooks';\n\nexport interface ThemeSelectorItem {\n  id: string;\n  title: string;\n  onClick: () => void;\n  value: string;\n  active: boolean;\n}\n\nfunction createThemeItems(\n  value: typeof themes,\n  changeTheme: (id: ThemeIds) => void,\n  getCurrentTheme: () => ThemeIds,\n): ThemeSelectorItem[] {\n  return value.map(item => {\n    return {\n      id: item.id,\n      title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,\n      onClick: () => {\n        changeTheme(item.id);\n      },\n      value: item.id,\n      active: getCurrentTheme() === item.id,\n    };\n  });\n}\n\nexport const ThemePicker = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n  const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme');\n\n  const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id;\n  const selectedTheme = themes.find(entry => entry.id === selectedThemeId);\n\n  const isActive = selectedThemeId !== defaultTheme.id;\n\n  const setTheme = React.useCallback(\n    (id: ThemeIds) => {\n      updateGlobals({ [THEME_ID]: id });\n    },\n    [updateGlobals],\n  );\n\n  const renderTooltip = React.useCallback(\n    (props: { onHide: () => void }) => {\n      return (\n        <TooltipLinkList\n          links={createThemeItems(\n            themes,\n            id => {\n              setTheme(id);\n              props.onHide();\n            },\n            () => selectedThemeId,\n          )}\n        />\n      );\n    },\n    [selectedThemeId, setTheme],\n  );\n\n  return (\n    <>\n      <WithTooltip placement=\"top\" trigger=\"click\" closeOnOutsideClick tooltip={renderTooltip}>\n        <IconButton key={THEME_ID} title=\"Change Fluent theme\" active={isActive}>\n          <ArrowDownIcon />\n          <span style={{ marginLeft: 5 }}>Theme: {selectedTheme?.label}</span>\n        </IconButton>\n      </WithTooltip>\n    </>\n  );\n};\n"],"names":["React","IconButton","TooltipLinkList","WithTooltip","ArrowDownIcon","useParameter","themes","defaultTheme","THEME_ID","useGlobals","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","label","onClick","active","ThemePicker","globals","updateGlobals","fluentTheme","selectedThemeId","selectedTheme","find","entry","isActive","setTheme","useCallback","renderTooltip","props","links","onHide","placement","trigger","closeOnOutsideClick","tooltip","key","span","style","marginLeft"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,eAAe,EAAEC,WAAW,QAAQ,gCAAgC;AACzF,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,YAAY,QAAQ,wBAAwB;AAGrD,SAAmBC,MAAM,EAAEC,YAAY,QAAQ,WAAW;AAC1D,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASC,UAAU,QAA0B,WAAW;AAUxD,SAASC,iBACPC,KAAoB,EACpBC,WAAmC,EACnCC,eAA+B;IAE/B,OAAOF,MAAMG,GAAG,CAACC,CAAAA;QACf,OAAO;YACLC,IAAID,KAAKC,EAAE;YACXC,OAAOF,KAAKC,EAAE,KAAKT,aAAaS,EAAE,GAAG,GAAGD,KAAKG,KAAK,CAAC,UAAU,CAAC,GAAGH,KAAKG,KAAK;YAC3EC,SAAS;gBACPP,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdI,QAAQP,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEA,OAAO,MAAMK,cAAc;IACzB,MAAM,CAACC,SAASC,cAAc,GAAGd;IACjC,MAAMe,cAA+CnB,aAAa;QAEdiB;IAApD,MAAMG,kBAAkBD,cAAcA,cAAcF,CAAAA,oBAAAA,OAAO,CAACd,SAAS,cAAjBc,+BAAAA,oBAAqBf,aAAaS,EAAE;IACxF,MAAMU,gBAAgBpB,OAAOqB,IAAI,CAACC,CAAAA,QAASA,MAAMZ,EAAE,KAAKS;IAExD,MAAMI,WAAWJ,oBAAoBlB,aAAaS,EAAE;IAEpD,MAAMc,WAAW9B,MAAM+B,WAAW,CAChC,CAACf;QACCO,cAAc;YAAE,CAACf,SAAS,EAAEQ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMS,gBAAgBhC,MAAM+B,WAAW,CACrC,CAACE;QACC,qBACE,oBAAC/B;YACCgC,OAAOxB,iBACLJ,QACAU,CAAAA;gBACEc,SAASd;gBACTiB,MAAME,MAAM;YACd,GACA,IAAMV;;IAId,GACA;QAACA;QAAiBK;KAAS;IAG7B,qBACE,wDACE,oBAAC3B;QAAYiC,WAAU;QAAMC,SAAQ;QAAQC,qBAAAA;QAAoBC,SAASP;qBACxE,oBAAC/B;QAAWuC,KAAKhC;QAAUS,OAAM;QAAsBG,QAAQS;qBAC7D,oBAACzB,oCACD,oBAACqC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQjB,0BAAAA,oCAAAA,cAAeR,KAAK;AAKtE,EAAE"}

package/lib/constants.js

@@ -0,0 +1,4 @@
+export const ADDON_ID = 'storybook_fluentui-react-addon';
+export const DIR_ID = `${ADDON_ID}_dir`;
+export const STRICT_MODE_ID = `${ADDON_ID}_strict-mode`;
+export const THEME_ID = `${ADDON_ID}_theme`;

package/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const ADDON_ID = 'storybook_fluentui-react-addon';\n\nexport const DIR_ID = `${ADDON_ID}_dir` as const;\nexport const STRICT_MODE_ID = `${ADDON_ID}_strict-mode` as const;\nexport const THEME_ID = `${ADDON_ID}_theme` as const;\n"],"names":["ADDON_ID","DIR_ID","STRICT_MODE_ID","THEME_ID"],"mappings":"AAAA,OAAO,MAAMA,WAAW,iCAAiC;AAEzD,OAAO,MAAMC,SAAS,GAAGD,SAAS,IAAI,CAAC,CAAU;AACjD,OAAO,MAAME,iBAAiB,GAAGF,SAAS,YAAY,CAAC,CAAU;AACjE,OAAO,MAAMG,WAAW,GAAGH,SAAS,MAAM,CAAC,CAAU"}

package/lib/decorators/withAriaLive.js

@@ -0,0 +1,18 @@
+import { AriaLiveAnnouncer } from '@fluentui/react-aria';
+import * as React from 'react';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
+export const withAriaLive = (Story, context)=>{
+    if (isDecoratorDisabled(context, 'AriaLive')) {
+        return Story();
+    }
+    return /*#__PURE__*/ React.createElement(AriaLiveWrapper, null, /*#__PURE__*/ React.createElement(Story, null));
+};
+const AriaLiveWrapper = (props)=>{
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(()=>{
+        // The AriaLiveAnnouncer appends an element to DOM in an effect
+        // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so
+        setMounted(true);
+    }, []);
+    return /*#__PURE__*/ React.createElement(AriaLiveAnnouncer, null, mounted && props.children);
+};

package/lib/decorators/withAriaLive.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withAriaLive.tsx"],"sourcesContent":["import { AriaLiveAnnouncer } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nimport type { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nexport const withAriaLive = (Story: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  if (isDecoratorDisabled(context, 'AriaLive')) {\n    return Story();\n  }\n\n  return (\n    <AriaLiveWrapper>\n      <Story />\n    </AriaLiveWrapper>\n  );\n};\n\nconst AriaLiveWrapper: React.FC<{ children: React.ReactNode }> = props => {\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    // The AriaLiveAnnouncer appends an element to DOM in an effect\n    // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so\n    setMounted(true);\n  }, []);\n\n  return <AriaLiveAnnouncer>{mounted && props.children}</AriaLiveAnnouncer>;\n};\n"],"names":["AriaLiveAnnouncer","React","isDecoratorDisabled","withAriaLive","Story","context","AriaLiveWrapper","props","mounted","setMounted","useState","useEffect","children"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,uBAAuB;AACzD,YAAYC,WAAW,QAAQ;AAG/B,SAASC,mBAAmB,QAAQ,+BAA+B;AAGnE,OAAO,MAAMC,eAAe,CAACC,OAAyBC;IACpD,IAAIH,oBAAoBG,SAAS,aAAa;QAC5C,OAAOD;IACT;IAEA,qBACE,oBAACE,qCACC,oBAACF;AAGP,EAAE;AAEF,MAAME,kBAA2DC,CAAAA;IAC/D,MAAM,CAACC,SAASC,WAAW,GAAGR,MAAMS,QAAQ,CAAC;IAE7CT,MAAMU,SAAS,CAAC;QACd,+DAA+D;QAC/D,oGAAoG;QACpGF,WAAW;IACb,GAAG,EAAE;IAEL,qBAAO,oBAACT,yBAAmBQ,WAAWD,MAAMK,QAAQ;AACtD"}

package/lib/decorators/withFluentProvider.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { teamsDarkTheme, teamsDarkV21Theme, teamsHighContrastTheme, teamsLightTheme, teamsLightV21Theme, webDarkTheme, webLightTheme } from '@fluentui/react-theme';
+import { defaultTheme } from '../theme';
+import { DIR_ID, THEME_ID } from '../constants';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
+const themes = {
+    'web-light': webLightTheme,
+    'web-dark': webDarkTheme,
+    'teams-light': teamsLightTheme,
+    'teams-dark': teamsDarkTheme,
+    'teams-high-contrast': teamsHighContrastTheme,
+    'teams-light-v21': teamsLightV21Theme,
+    'teams-dark-v21': teamsDarkV21Theme
+};
+const findTheme = (themeId)=>{
+    return themeId ? themes[themeId] : null;
+};
+export const withFluentProvider = (StoryFn, context)=>{
+    const { globals, parameters } = context;
+    const { mode } = parameters;
+    if (isDecoratorDisabled(context, 'FluentProvider')) {
+        return StoryFn();
+    }
+    const isVrTest = mode === 'vr-test';
+    var _parameters_dir, _ref;
+    const dir = (_ref = (_parameters_dir = parameters.dir) !== null && _parameters_dir !== void 0 ? _parameters_dir : globals[DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
+    const globalTheme = findTheme(globals[THEME_ID]);
+    const paramTheme = findTheme(parameters.fluentTheme);
+    var _ref1;
+    const theme = (_ref1 = paramTheme !== null && paramTheme !== void 0 ? paramTheme : globalTheme) !== null && _ref1 !== void 0 ? _ref1 : themes[defaultTheme.id];
+    return /*#__PURE__*/ React.createElement(FluentProvider, {
+        theme: theme,
+        dir: dir
+    }, isVrTest ? StoryFn() : /*#__PURE__*/ React.createElement(FluentExampleContainer, {
+        theme: theme
+    }, StoryFn()));
+};
+const FluentExampleContainer = (props)=>{
+    const { theme } = props;
+    const backgroundColor = theme.colorNeutralBackground2;
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            padding: '48px 24px',
+            backgroundColor
+        }
+    }, props.children);
+};

package/lib/decorators/withFluentProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { FluentProvider } from '@fluentui/react-provider';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport {\n  Theme,\n  teamsDarkTheme,\n  teamsDarkV21Theme,\n  teamsHighContrastTheme,\n  teamsLightTheme,\n  teamsLightV21Theme,\n  webDarkTheme,\n  webLightTheme,\n} from '@fluentui/react-theme';\nimport { defaultTheme, ThemeIds } from '../theme';\nimport { DIR_ID, THEME_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nconst themes: Record<ThemeIds, Theme> = {\n  'web-light': webLightTheme,\n  'web-dark': webDarkTheme,\n  'teams-light': teamsLightTheme,\n  'teams-dark': teamsDarkTheme,\n  'teams-high-contrast': teamsHighContrastTheme,\n  'teams-light-v21': teamsLightV21Theme,\n  'teams-dark-v21': teamsDarkV21Theme,\n} as const;\n\nconst findTheme = (themeId?: ThemeIds) => {\n  return themeId ? themes[themeId] : null;\n};\n\nexport const withFluentProvider = (StoryFn: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  const { globals, parameters } = context;\n  const { mode } = parameters;\n\n  if (isDecoratorDisabled(context, 'FluentProvider')) {\n    return StoryFn();\n  }\n\n  const isVrTest = mode === 'vr-test';\n  const dir = parameters.dir ?? globals[DIR_ID] ?? 'ltr';\n  const globalTheme = findTheme(globals[THEME_ID]);\n  const paramTheme = findTheme(parameters.fluentTheme);\n  const theme = paramTheme ?? globalTheme ?? themes[defaultTheme.id];\n\n  return (\n    <FluentProvider theme={theme} dir={dir}>\n      {isVrTest ? StoryFn() : <FluentExampleContainer theme={theme}>{StoryFn()}</FluentExampleContainer>}\n    </FluentProvider>\n  );\n};\n\nconst FluentExampleContainer: React.FC<{ children: React.ReactNode; theme: Theme }> = props => {\n  const { theme } = props;\n\n  const backgroundColor = theme.colorNeutralBackground2;\n  return <div style={{ padding: '48px 24px', backgroundColor }}>{props.children}</div>;\n};\n"],"names":["React","FluentProvider","teamsDarkTheme","teamsDarkV21Theme","teamsHighContrastTheme","teamsLightTheme","teamsLightV21Theme","webDarkTheme","webLightTheme","defaultTheme","DIR_ID","THEME_ID","isDecoratorDisabled","themes","findTheme","themeId","withFluentProvider","StoryFn","context","globals","parameters","mode","isVrTest","dir","globalTheme","paramTheme","fluentTheme","theme","id","FluentExampleContainer","props","backgroundColor","colorNeutralBackground2","div","style","padding","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAEEC,cAAc,EACdC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACZC,aAAa,QACR,wBAAwB;AAC/B,SAASC,YAAY,QAAkB,WAAW;AAClD,SAASC,MAAM,EAAEC,QAAQ,QAAQ,eAAe;AAEhD,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,MAAMC,SAAkC;IACtC,aAAaL;IACb,YAAYD;IACZ,eAAeF;IACf,cAAcH;IACd,uBAAuBE;IACvB,mBAAmBE;IACnB,kBAAkBH;AACpB;AAEA,MAAMW,YAAY,CAACC;IACjB,OAAOA,UAAUF,MAAM,CAACE,QAAQ,GAAG;AACrC;AAEA,OAAO,MAAMC,qBAAqB,CAACC,SAA2BC;IAC5D,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGF;IAChC,MAAM,EAAEG,IAAI,EAAE,GAAGD;IAEjB,IAAIR,oBAAoBM,SAAS,mBAAmB;QAClD,OAAOD;IACT;IAEA,MAAMK,WAAWD,SAAS;QACdD,iBAAAA;IAAZ,MAAMG,MAAMH,CAAAA,OAAAA,CAAAA,kBAAAA,WAAWG,GAAG,cAAdH,6BAAAA,kBAAkBD,OAAO,CAACT,OAAO,cAAjCU,kBAAAA,OAAqC;IACjD,MAAMI,cAAcV,UAAUK,OAAO,CAACR,SAAS;IAC/C,MAAMc,aAAaX,UAAUM,WAAWM,WAAW;QACrCD;IAAd,MAAME,QAAQF,CAAAA,QAAAA,uBAAAA,wBAAAA,aAAcD,yBAAdC,mBAAAA,QAA6BZ,MAAM,CAACJ,aAAamB,EAAE,CAAC;IAElE,qBACE,oBAAC3B;QAAe0B,OAAOA;QAAOJ,KAAKA;OAChCD,WAAWL,0BAAY,oBAACY;QAAuBF,OAAOA;OAAQV;AAGrE,EAAE;AAEF,MAAMY,yBAAgFC,CAAAA;IACpF,MAAM,EAAEH,KAAK,EAAE,GAAGG;IAElB,MAAMC,kBAAkBJ,MAAMK,uBAAuB;IACrD,qBAAO,oBAACC;QAAIC,OAAO;YAAEC,SAAS;YAAaJ;QAAgB;OAAID,MAAMM,QAAQ;AAC/E"}

package/lib/decorators/withReactStrictMode.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { STRICT_MODE_ID } from '../constants';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
+export const withReactStrictMode = (StoryFn, context)=>{
+    if (isDecoratorDisabled(context, 'ReactStrictMode')) {
+        return StoryFn();
+    }
+    var _context_globals_STRICT_MODE_ID;
+    const isActive = (_context_globals_STRICT_MODE_ID = context.globals[STRICT_MODE_ID]) !== null && _context_globals_STRICT_MODE_ID !== void 0 ? _context_globals_STRICT_MODE_ID : false;
+    return /*#__PURE__*/ React.createElement(StrictModeWrapper, {
+        strictMode: isActive
+    }, StoryFn());
+};
+const StrictModeWrapper = (props)=>{
+    return props.strictMode ? /*#__PURE__*/ React.createElement(React.StrictMode, null, props.children) : props.children;
+};

package/lib/decorators/withReactStrictMode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { STRICT_MODE_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nexport const withReactStrictMode = (StoryFn: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  if (isDecoratorDisabled(context, 'ReactStrictMode')) {\n    return StoryFn();\n  }\n\n  const isActive = context.globals[STRICT_MODE_ID] ?? false;\n\n  return <StrictModeWrapper strictMode={isActive}>{StoryFn()}</StrictModeWrapper>;\n};\n\nconst StrictModeWrapper = (props: { strictMode: boolean; children: React.ReactElement }) => {\n  return props.strictMode ? <React.StrictMode>{props.children}</React.StrictMode> : props.children;\n};\n"],"names":["React","STRICT_MODE_ID","isDecoratorDisabled","withReactStrictMode","StoryFn","context","isActive","globals","StrictModeWrapper","strictMode","props","StrictMode","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,cAAc,QAAQ,eAAe;AAE9C,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,OAAO,MAAMC,sBAAsB,CAACC,SAA2BC;IAC7D,IAAIH,oBAAoBG,SAAS,oBAAoB;QACnD,OAAOD;IACT;QAEiBC;IAAjB,MAAMC,WAAWD,CAAAA,kCAAAA,QAAQE,OAAO,CAACN,eAAe,cAA/BI,6CAAAA,kCAAmC;IAEpD,qBAAO,oBAACG;QAAkBC,YAAYH;OAAWF;AACnD,EAAE;AAEF,MAAMI,oBAAoB,CAACE;IACzB,OAAOA,MAAMD,UAAU,iBAAG,oBAACT,MAAMW,UAAU,QAAED,MAAME,QAAQ,IAAuBF,MAAME,QAAQ;AAClG"}

package/lib/docs/CopyAsMarkdownButton.js

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { SplitButton } from '@fluentui/react-button';
+import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
+import { Spinner } from '@fluentui/react-spinner';
+import { Toast, Toaster, ToastTitle, useToastController } from '@fluentui/react-toast';
+import { useId } from '@fluentui/react-utilities';
+import { makeStyles } from '@griffel/react';
+import { bundleIcon, MarkdownFilled, MarkdownRegular } from '@fluentui/react-icons';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const MarkdownIcon = bundleIcon(MarkdownFilled, MarkdownRegular);
+const useStyles = makeStyles({
+    button: {
+        marginInlineStart: 'auto'
+    }
+});
+/**
+ * A button that allows users to copy the current page as markdown to their clipboard or view it in a new tab.
+ * The markdown content is fetched from the Storybook API and cached for subsequent requests.
+ */ export const CopyAsMarkdownButton = ({ storyId = '' })=>{
+    const { targetDocument } = useFluent();
+    const targetWindow = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const styles = useStyles();
+    const toastId = useId('copy-toast');
+    const toasterId = useId('toaster');
+    const { dispatchToast, updateToast } = useToastController(toasterId);
+    // Cache for the fetched markdown content to avoid redundant network requests
+    const markdownContentCache = React.useRef(null);
+    // AbortController to track and cancel fetch requests
+    const abortControllerRef = React.useRef(null);
+    // Full URL to the markdown endpoint for this story
+    const markdownUrl = React.useMemo(()=>{
+        return targetWindow ? convertStoryIdToMarkdownUrl(targetWindow, storyId) : '';
+    }, [
+        storyId,
+        targetWindow
+    ]);
+    // Cleanup: abort pending requests on unmount
+    React.useEffect(()=>{
+        return ()=>{
+            var _abortControllerRef_current;
+            (_abortControllerRef_current = abortControllerRef.current) === null || _abortControllerRef_current === void 0 ? void 0 : _abortControllerRef_current.abort();
+        };
+    }, []);
+    /**
+   * Fetches the markdown content (with caching) and copies it to the clipboard.
+   * Shows a toast notification with loading, success, or error states.
+   * Skips the request if one is already in progress.
+   */ const copyPageContentToClipboard = React.useCallback(async ()=>{
+        // Skip if a request is already in progress (abort controller exists and not aborted)
+        if (abortControllerRef.current && !abortControllerRef.current.signal.aborted) {
+            return;
+        }
+        // Ensure we have a window context to use for clipboard and fetch
+        if (!targetWindow) {
+            return;
+        }
+        // Create new AbortController for this request
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        // Show loading toast that persists until updated
+        dispatchToast(/*#__PURE__*/ React.createElement(Toast, null, /*#__PURE__*/ React.createElement(ToastTitle, {
+            media: /*#__PURE__*/ React.createElement(Spinner, null)
+        }, "Copying page content...")), {
+            toastId,
+            intent: 'info',
+            timeout: -1
+        });
+        try {
+            // Use cached content if available, otherwise fetch from API
+            if (!markdownContentCache.current) {
+                markdownContentCache.current = await fetchMarkdownContent(targetWindow, markdownUrl, abortController.signal);
+            }
+            // Copy to clipboard
+            await (targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.navigator.clipboard.writeText(markdownContentCache.current));
+            // Update toast to success
+            updateToast({
+                content: /*#__PURE__*/ React.createElement(Toast, null, /*#__PURE__*/ React.createElement(ToastTitle, null, "Page content copied to clipboard!")),
+                intent: 'success',
+                toastId,
+                timeout: 3000
+            });
+        } catch (error) {
+            // Don't show error if request was aborted
+            if (abortController.signal.aborted) {
+                return;
+            }
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            // Update toast to error
+            updateToast({
+                content: /*#__PURE__*/ React.createElement(Toast, null, /*#__PURE__*/ React.createElement(ToastTitle, null, "Failed to copy page content: ", errorMessage)),
+                intent: 'error',
+                toastId,
+                timeout: 3000
+            });
+        } finally{
+            // Clear the abort controller ref to allow new requests
+            abortControllerRef.current = null;
+        }
+    }, [
+        dispatchToast,
+        updateToast,
+        toastId,
+        markdownUrl,
+        targetWindow
+    ]);
+    /** Opens the markdown content in a new browser tab */ const openInNewTab = React.useCallback(()=>{
+        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.open(markdownUrl, '_blank');
+    }, [
+        markdownUrl,
+        targetWindow
+    ]);
+    if (!storyId) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Menu, {
+        positioning: "below-end"
+    }, /*#__PURE__*/ React.createElement(MenuTrigger, {
+        disableButtonEnhancement: true
+    }, (triggerProps)=>/*#__PURE__*/ React.createElement(SplitButton, {
+            className: styles.button,
+            menuButton: triggerProps,
+            primaryActionButton: {
+                appearance: 'secondary',
+                icon: /*#__PURE__*/ React.createElement(MarkdownIcon, null),
+                onClick: copyPageContentToClipboard,
+                'aria-label': 'Copy page content as markdown to clipboard'
+            },
+            "aria-label": "Copy page as markdown"
+        }, "Copy Page")), /*#__PURE__*/ React.createElement(MenuPopover, null, /*#__PURE__*/ React.createElement(MenuList, null, /*#__PURE__*/ React.createElement(MenuItem, {
+        icon: /*#__PURE__*/ React.createElement(MarkdownIcon, null),
+        onClick: openInNewTab
+    }, "View as Markdown")))), /*#__PURE__*/ React.createElement(Toaster, {
+        toasterId: toasterId
+    }));
+};
+/**
+ * Regex pattern to remove the story variant suffix from Storybook story IDs.
+ * @example "button--primary" -> "button"
+ */ const STORYBOOK_VARIANT_SUFFIX_PATTERN = /--\w+$/g;
+/**
+ * Gets the base URL for fetching markdown content from the Storybook LLM endpoint.
+ * Each story's markdown is available at: {BASE_URL}/{storyId}.txt
+ * @param targetWindow - The window object to use for location access
+ * @returns The base URL constructed from current location origin and pathname
+ */ function getStorybookMarkdownApiBaseUrl(targetWindow) {
+    // Remove the [page].html file from pathname and append /llms/
+    const basePath = targetWindow.location.pathname.replace(/\/[^/]*\.html$/, '');
+    return `${targetWindow.location.origin}${basePath}/llms/`;
+}
+/**
+ * Converts a Storybook story ID to a markdown URL.
+ * @param targetWindow - The window object to use for location access
+ * @param storyId - The Storybook story ID
+ * @returns The full URL to the markdown endpoint for the story
+ * @example "button--primary" -> "https://storybooks.fluentui.dev/llms/button.txt"
+ */ function convertStoryIdToMarkdownUrl(targetWindow, storyId) {
+    return `${getStorybookMarkdownApiBaseUrl(targetWindow)}${storyId.replace(STORYBOOK_VARIANT_SUFFIX_PATTERN, '.txt')}`;
+}
+/**
+ * Fetches markdown content from the Storybook API.
+ * @param targetWindow - The window object to use for fetch access
+ * @param url - The URL to fetch markdown content from
+ * @param signal - Optional AbortSignal to cancel the request
+ * @returns Promise resolving to the markdown text content
+ * @throws Error if the fetch request fails or is aborted
+ */ async function fetchMarkdownContent(targetWindow, url, signal) {
+    const response = await targetWindow.fetch(url, {
+        headers: {
+            'Content-Type': 'text/plain'
+        },
+        signal
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to fetch markdown: ${response.status} ${response.statusText}`);
+    }
+    return response.text();
+}

package/lib/docs/CopyAsMarkdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/CopyAsMarkdownButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SplitButton, type MenuButtonProps } from '@fluentui/react-button';\nimport { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';\nimport { Spinner } from '@fluentui/react-spinner';\nimport { Toast, Toaster, ToastTitle, useToastController } from '@fluentui/react-toast';\nimport { useId } from '@fluentui/react-utilities';\nimport { makeStyles } from '@griffel/react';\nimport { bundleIcon, MarkdownFilled, MarkdownRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst MarkdownIcon = bundleIcon(MarkdownFilled, MarkdownRegular);\n\nconst useStyles = makeStyles({\n  button: {\n    marginInlineStart: 'auto',\n  },\n});\n\nexport interface CopyAsMarkdownProps {\n  /** The Storybook story ID used to generate the markdown URL */\n  storyId?: string;\n}\n\n/**\n * A button that allows users to copy the current page as markdown to their clipboard or view it in a new tab.\n * The markdown content is fetched from the Storybook API and cached for subsequent requests.\n */\nexport const CopyAsMarkdownButton: React.FC<CopyAsMarkdownProps> = ({ storyId = '' }) => {\n  const { targetDocument } = useFluent();\n  const targetWindow = targetDocument?.defaultView;\n  const styles = useStyles();\n  const toastId = useId('copy-toast');\n  const toasterId = useId('toaster');\n  const { dispatchToast, updateToast } = useToastController(toasterId);\n\n  // Cache for the fetched markdown content to avoid redundant network requests\n  const markdownContentCache = React.useRef<string | null>(null);\n\n  // AbortController to track and cancel fetch requests\n  const abortControllerRef = React.useRef<AbortController | null>(null);\n\n  // Full URL to the markdown endpoint for this story\n  const markdownUrl = React.useMemo(() => {\n    return targetWindow ? convertStoryIdToMarkdownUrl(targetWindow, storyId) : '';\n  }, [storyId, targetWindow]);\n\n  // Cleanup: abort pending requests on unmount\n  React.useEffect(() => {\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  /**\n   * Fetches the markdown content (with caching) and copies it to the clipboard.\n   * Shows a toast notification with loading, success, or error states.\n   * Skips the request if one is already in progress.\n   */\n  const copyPageContentToClipboard = React.useCallback(async () => {\n    // Skip if a request is already in progress (abort controller exists and not aborted)\n    if (abortControllerRef.current && !abortControllerRef.current.signal.aborted) {\n      return;\n    }\n\n    // Ensure we have a window context to use for clipboard and fetch\n    if (!targetWindow) {\n      return;\n    }\n\n    // Create new AbortController for this request\n    const abortController = new AbortController();\n    abortControllerRef.current = abortController;\n\n    // Show loading toast that persists until updated\n    dispatchToast(\n      <Toast>\n        <ToastTitle media={<Spinner />}>Copying page content...</ToastTitle>\n      </Toast>,\n      {\n        toastId,\n        intent: 'info',\n        timeout: -1, // Never auto-dismiss\n      },\n    );\n\n    try {\n      // Use cached content if available, otherwise fetch from API\n      if (!markdownContentCache.current) {\n        markdownContentCache.current = await fetchMarkdownContent(targetWindow, markdownUrl, abortController.signal);\n      }\n\n      // Copy to clipboard\n      await targetWindow?.navigator.clipboard.writeText(markdownContentCache.current);\n\n      // Update toast to success\n      updateToast({\n        content: (\n          <Toast>\n            <ToastTitle>Page content copied to clipboard!</ToastTitle>\n          </Toast>\n        ),\n        intent: 'success',\n        toastId,\n        timeout: 3000,\n      });\n    } catch (error) {\n      // Don't show error if request was aborted\n      if (abortController.signal.aborted) {\n        return;\n      }\n\n      const errorMessage = error instanceof Error ? error.message : String(error);\n\n      // Update toast to error\n      updateToast({\n        content: (\n          <Toast>\n            <ToastTitle>Failed to copy page content: {errorMessage}</ToastTitle>\n          </Toast>\n        ),\n        intent: 'error',\n        toastId,\n        timeout: 3000,\n      });\n    } finally {\n      // Clear the abort controller ref to allow new requests\n      abortControllerRef.current = null;\n    }\n  }, [dispatchToast, updateToast, toastId, markdownUrl, targetWindow]);\n\n  /** Opens the markdown content in a new browser tab */\n  const openInNewTab = React.useCallback(() => {\n    targetWindow?.open(markdownUrl, '_blank');\n  }, [markdownUrl, targetWindow]);\n\n  if (!storyId) {\n    return null;\n  }\n\n  return (\n    <>\n      <Menu positioning=\"below-end\">\n        <MenuTrigger disableButtonEnhancement>\n          {(triggerProps: MenuButtonProps) => (\n            <SplitButton\n              className={styles.button}\n              menuButton={triggerProps}\n              primaryActionButton={{\n                appearance: 'secondary',\n                icon: <MarkdownIcon />,\n                onClick: copyPageContentToClipboard,\n                'aria-label': 'Copy page content as markdown to clipboard',\n              }}\n              aria-label=\"Copy page as markdown\"\n            >\n              Copy Page\n            </SplitButton>\n          )}\n        </MenuTrigger>\n\n        <MenuPopover>\n          <MenuList>\n            <MenuItem icon={<MarkdownIcon />} onClick={openInNewTab}>\n              View as Markdown\n            </MenuItem>\n          </MenuList>\n        </MenuPopover>\n      </Menu>\n      <Toaster toasterId={toasterId} />\n    </>\n  );\n};\n\n/**\n * Regex pattern to remove the story variant suffix from Storybook story IDs.\n * @example \"button--primary\" -> \"button\"\n */\nconst STORYBOOK_VARIANT_SUFFIX_PATTERN = /--\\w+$/g;\n\n/**\n * Gets the base URL for fetching markdown content from the Storybook LLM endpoint.\n * Each story's markdown is available at: {BASE_URL}/{storyId}.txt\n * @param targetWindow - The window object to use for location access\n * @returns The base URL constructed from current location origin and pathname\n */\nfunction getStorybookMarkdownApiBaseUrl(targetWindow: Window): string {\n  // Remove the [page].html file from pathname and append /llms/\n  const basePath = targetWindow.location.pathname.replace(/\\/[^/]*\\.html$/, '');\n  return `${targetWindow.location.origin}${basePath}/llms/`;\n}\n\n/**\n * Converts a Storybook story ID to a markdown URL.\n * @param targetWindow - The window object to use for location access\n * @param storyId - The Storybook story ID\n * @returns The full URL to the markdown endpoint for the story\n * @example \"button--primary\" -> \"https://storybooks.fluentui.dev/llms/button.txt\"\n */\nfunction convertStoryIdToMarkdownUrl(targetWindow: Window, storyId: string): string {\n  return `${getStorybookMarkdownApiBaseUrl(targetWindow)}${storyId.replace(STORYBOOK_VARIANT_SUFFIX_PATTERN, '.txt')}`;\n}\n\n/**\n * Fetches markdown content from the Storybook API.\n * @param targetWindow - The window object to use for fetch access\n * @param url - The URL to fetch markdown content from\n * @param signal - Optional AbortSignal to cancel the request\n * @returns Promise resolving to the markdown text content\n * @throws Error if the fetch request fails or is aborted\n */\nasync function fetchMarkdownContent(\n  targetWindow: Window,\n  url: string,\n  signal: AbortSignal | undefined,\n): Promise<string> {\n  const response = await targetWindow.fetch(url, {\n    headers: {\n      'Content-Type': 'text/plain',\n    },\n    signal,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch markdown: ${response.status} ${response.statusText}`);\n  }\n\n  return response.text();\n}\n"],"names":["React","SplitButton","Menu","MenuItem","MenuList","MenuPopover","MenuTrigger","Spinner","Toast","Toaster","ToastTitle","useToastController","useId","makeStyles","bundleIcon","MarkdownFilled","MarkdownRegular","useFluent_unstable","useFluent","MarkdownIcon","useStyles","button","marginInlineStart","CopyAsMarkdownButton","storyId","targetDocument","targetWindow","defaultView","styles","toastId","toasterId","dispatchToast","updateToast","markdownContentCache","useRef","abortControllerRef","markdownUrl","useMemo","convertStoryIdToMarkdownUrl","useEffect","current","abort","copyPageContentToClipboard","useCallback","signal","aborted","abortController","AbortController","media","intent","timeout","fetchMarkdownContent","navigator","clipboard","writeText","content","error","errorMessage","Error","message","String","openInNewTab","open","positioning","disableButtonEnhancement","triggerProps","className","menuButton","primaryActionButton","appearance","icon","onClick","aria-label","STORYBOOK_VARIANT_SUFFIX_PATTERN","getStorybookMarkdownApiBaseUrl","basePath","location","pathname","replace","origin","url","response","fetch","headers","ok","status","statusText","text"],"mappings":"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"}

package/lib/docs/DirSwitch.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { addons } from 'storybook/preview-api';
+import { Label } from '@fluentui/react-label';
+import { Switch } from '@fluentui/react-switch';
+import { useId } from '@fluentui/react-utilities';
+import { typographyStyles } from '@fluentui/react-theme';
+import { makeStyles } from '@griffel/react';
+import { DIR_ID } from '../constants';
+const useStyles = makeStyles({
+    container: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'start'
+    },
+    label: {
+        ...typographyStyles.subtitle2
+    }
+});
+/**
+ * Dir switch used in the react-components docs header
+ */ export const DirSwitch = ({ dir })=>{
+    const switchId = useId('dir-switch');
+    const styles = useStyles();
+    const [currentDir, setCurrentDir] = React.useState(dir);
+    const checked = currentDir === 'rtl';
+    const setGlobalDir = (newDir)=>{
+        addons.getChannel().emit('updateGlobals', {
+            globals: {
+                [DIR_ID]: newDir
+            }
+        });
+    };
+    const onChange = React.useCallback((_, data)=>{
+        const newDir = data.checked ? 'rtl' : 'ltr';
+        setGlobalDir(newDir);
+        setCurrentDir(newDir);
+    }, []);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.container
+    }, /*#__PURE__*/ React.createElement(Label, {
+        className: styles.label,
+        htmlFor: currentDir === 'ltr' ? undefined : switchId
+    }, "LTR"), /*#__PURE__*/ React.createElement(Switch, {
+        checked: checked,
+        id: switchId,
+        onChange: onChange
+    }), /*#__PURE__*/ React.createElement(Label, {
+        className: styles.label,
+        htmlFor: currentDir === 'rtl' ? switchId : undefined
+    }, "RTL"));
+};

package/lib/docs/DirSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/DirSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from 'storybook/preview-api';\n\nimport { Label } from '@fluentui/react-label';\nimport { Switch, type SwitchProps } from '@fluentui/react-switch';\nimport { useId } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles } from '@griffel/react';\n\nimport { DIR_ID } from '../constants';\n\nconst useStyles = makeStyles({\n  container: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'start',\n  },\n  label: {\n    ...typographyStyles.subtitle2,\n  },\n});\n\n/**\n * Dir switch used in the react-components docs header\n */\nexport const DirSwitch: React.FC<{ dir?: 'ltr' | 'rtl' }> = ({ dir }) => {\n  const switchId = useId('dir-switch');\n\n  const styles = useStyles();\n\n  const [currentDir, setCurrentDir] = React.useState(dir);\n  const checked = currentDir === 'rtl';\n\n  const setGlobalDir = (newDir: 'ltr' | 'rtl'): void => {\n    addons.getChannel().emit('updateGlobals', { globals: { [DIR_ID]: newDir } });\n  };\n\n  const onChange = React.useCallback<NonNullable<SwitchProps['onChange']>>((_, data) => {\n    const newDir = data.checked ? 'rtl' : 'ltr';\n    setGlobalDir(newDir);\n    setCurrentDir(newDir);\n  }, []);\n\n  return (\n    <div className={styles.container}>\n      <Label className={styles.label} htmlFor={currentDir === 'ltr' ? undefined : switchId}>\n        LTR\n      </Label>\n      <Switch checked={checked} id={switchId} onChange={onChange} />\n      <Label className={styles.label} htmlFor={currentDir === 'rtl' ? switchId : undefined}>\n        RTL\n      </Label>\n    </div>\n  );\n};\n"],"names":["React","addons","Label","Switch","useId","typographyStyles","makeStyles","DIR_ID","useStyles","container","alignItems","display","justifyContent","label","subtitle2","DirSwitch","dir","switchId","styles","currentDir","setCurrentDir","useState","checked","setGlobalDir","newDir","getChannel","emit","globals","onChange","useCallback","_","data","div","className","htmlFor","undefined","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,MAAM,QAA0B,yBAAyB;AAClE,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,MAAM,QAAQ,eAAe;AAEtC,MAAMC,YAAYF,WAAW;IAC3BG,WAAW;QACTC,YAAY;QACZC,SAAS;QACTC,gBAAgB;IAClB;IACAC,OAAO;QACL,GAAGR,iBAAiBS,SAAS;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,YAA+C,CAAC,EAAEC,GAAG,EAAE;IAClE,MAAMC,WAAWb,MAAM;IAEvB,MAAMc,SAASV;IAEf,MAAM,CAACW,YAAYC,cAAc,GAAGpB,MAAMqB,QAAQ,CAACL;IACnD,MAAMM,UAAUH,eAAe;IAE/B,MAAMI,eAAe,CAACC;QACpBvB,OAAOwB,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACpB,OAAO,EAAEiB;YAAO;QAAE;IAC5E;IAEA,MAAMI,WAAW5B,MAAM6B,WAAW,CAAuC,CAACC,GAAGC;QAC3E,MAAMP,SAASO,KAAKT,OAAO,GAAG,QAAQ;QACtCC,aAAaC;QACbJ,cAAcI;IAChB,GAAG,EAAE;IAEL,qBACE,oBAACQ;QAAIC,WAAWf,OAAOT,SAAS;qBAC9B,oBAACP;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQgB,YAAYlB;OAAU,sBAGtF,oBAACd;QAAOmB,SAASA;QAASc,IAAInB;QAAUW,UAAUA;sBAClD,oBAAC1B;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQF,WAAWkB;OAAW;AAK5F,EAAE"}

package/lib/docs/FluentCanvas.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { makeStyles } from '@griffel/react';
+const useStyles = makeStyles({
+    canvas: {
+        padding: '20px',
+        boxSizing: 'border-box',
+        overflow: 'auto'
+    }
+});
+/**
+ * Canvas component to wrap stories in a styled container.
+ * Provides a similar experience to Storybook's v7 `Canvas` component.
+ */ export const FluentCanvas = (props)=>{
+    const styles = useStyles();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "sbdocs-preview"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.canvas,
+        ...props
+    }));
+};

package/lib/docs/FluentCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/FluentCanvas.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { makeStyles } from '@griffel/react';\n\nconst useStyles = makeStyles({\n  canvas: {\n    padding: '20px',\n    boxSizing: 'border-box',\n    overflow: 'auto',\n  },\n});\n\n/**\n * Canvas component to wrap stories in a styled container.\n * Provides a similar experience to Storybook's v7 `Canvas` component.\n */\nexport const FluentCanvas = (props: React.ComponentProps<'div'>): JSXElement => {\n  const styles = useStyles();\n\n  return (\n    <div className=\"sbdocs-preview\">\n      <div className={styles.canvas} {...props} />\n    </div>\n  );\n};\n"],"names":["React","makeStyles","useStyles","canvas","padding","boxSizing","overflow","FluentCanvas","props","styles","div","className"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,MAAMC,YAAYD,WAAW;IAC3BE,QAAQ;QACNC,SAAS;QACTC,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;;CAGC,GACD,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAMC,SAASP;IAEf,qBACE,oBAACQ;QAAIC,WAAU;qBACb,oBAACD;QAAIC,WAAWF,OAAON,MAAM;QAAG,GAAGK,KAAK;;AAG9C,EAAE"}

package/lib/docs/FluentDocsContainer.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { webLightTheme } from '@fluentui/react-theme';
+import { FluentProvider } from '@fluentui/react-provider';
+import { isDocsEnabled } from './utils';
+/**
+ * A container that wraps storybook's native docs container to add extra components to the docs experience
+ */ export const FluentDocsContainer = ({ children, context })=>{
+    if (isDocsEnabled(context)) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(FluentProvider, {
+            className: "sb-unstyled",
+            style: {
+                backgroundColor: 'transparent'
+            },
+            theme: webLightTheme
+        }, /*#__PURE__*/ React.createElement(DocsContainer, {
+            context: context
+        }, children)));
+    }
+    // If docs container is not enabled, fall back to Storybook's default DocsContainer
+    return /*#__PURE__*/ React.createElement(DocsContainer, {
+        context: context
+    }, children);
+};

package/lib/docs/FluentDocsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/FluentDocsContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DocsContainer, type DocsContextProps } from '@storybook/addon-docs/blocks';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { FluentProvider } from '@fluentui/react-provider';\n\nimport { isDocsEnabled } from './utils';\n\ninterface FluentDocsContainerProps {\n  context: DocsContextProps;\n  children: React.ReactNode;\n}\n\n/**\n * A container that wraps storybook's native docs container to add extra components to the docs experience\n */\nexport const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {\n  if (isDocsEnabled(context)) {\n    return (\n      <>\n        {/** TODO add table of contents */}\n        <FluentProvider className=\"sb-unstyled\" style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>\n          <DocsContainer context={context}>{children}</DocsContainer>\n        </FluentProvider>\n      </>\n    );\n  }\n\n  // If docs container is not enabled, fall back to Storybook's default DocsContainer\n  return <DocsContainer context={context}>{children}</DocsContainer>;\n};\n"],"names":["React","DocsContainer","webLightTheme","FluentProvider","isDocsEnabled","FluentDocsContainer","children","context","className","style","backgroundColor","theme"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAA+B,+BAA+B;AACpF,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,aAAa,QAAQ,UAAU;AAOxC;;CAEC,GACD,OAAO,MAAMC,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIH,cAAcG,UAAU;QAC1B,qBACE,wDAEE,oBAACJ;YAAeK,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOT;yBACxF,oBAACD;YAAcM,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,oBAACL;QAAcM,SAASA;OAAUD;AAC3C,EAAE"}