@fluentui/react-storybook-addon 0.4.6 → 0.5.1

package/lib-commonjs/docs/CopyAsMarkdownButton.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CopyAsMarkdownButton", {
+    enumerable: true,
+    get: function() {
+        return CopyAsMarkdownButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactbutton = require("@fluentui/react-button");
+const _reactmenu = require("@fluentui/react-menu");
+const _reactspinner = require("@fluentui/react-spinner");
+const _reacttoast = require("@fluentui/react-toast");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react1 = require("@griffel/react");
+const _reacticons = require("@fluentui/react-icons");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const MarkdownIcon = (0, _reacticons.bundleIcon)(_reacticons.MarkdownFilled, _reacticons.MarkdownRegular);
+const useStyles = (0, _react1.makeStyles)({
+    button: {
+        marginInlineStart: 'auto'
+    }
+});
+const CopyAsMarkdownButton = ({ storyId = '' })=>{
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const targetWindow = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const styles = useStyles();
+    const toastId = (0, _reactutilities.useId)('copy-toast');
+    const toasterId = (0, _reactutilities.useId)('toaster');
+    const { dispatchToast, updateToast } = (0, _reacttoast.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(_reacttoast.Toast, null, /*#__PURE__*/ _react.createElement(_reacttoast.ToastTitle, {
+            media: /*#__PURE__*/ _react.createElement(_reactspinner.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(_reacttoast.Toast, null, /*#__PURE__*/ _react.createElement(_reacttoast.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(_reacttoast.Toast, null, /*#__PURE__*/ _react.createElement(_reacttoast.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(_reactmenu.Menu, {
+        positioning: "below-end"
+    }, /*#__PURE__*/ _react.createElement(_reactmenu.MenuTrigger, {
+        disableButtonEnhancement: true
+    }, (triggerProps)=>/*#__PURE__*/ _react.createElement(_reactbutton.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(_reactmenu.MenuPopover, null, /*#__PURE__*/ _react.createElement(_reactmenu.MenuList, null, /*#__PURE__*/ _react.createElement(_reactmenu.MenuItem, {
+        icon: /*#__PURE__*/ _react.createElement(MarkdownIcon, null),
+        onClick: openInNewTab
+    }, "View as Markdown")))), /*#__PURE__*/ _react.createElement(_reacttoast.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-commonjs/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":["CopyAsMarkdownButton","MarkdownIcon","bundleIcon","MarkdownFilled","MarkdownRegular","useStyles","makeStyles","button","marginInlineStart","storyId","targetDocument","useFluent","targetWindow","defaultView","styles","toastId","useId","toasterId","dispatchToast","updateToast","useToastController","markdownContentCache","React","useRef","abortControllerRef","markdownUrl","useMemo","convertStoryIdToMarkdownUrl","useEffect","current","abort","copyPageContentToClipboard","useCallback","signal","aborted","abortController","AbortController","Toast","ToastTitle","media","Spinner","intent","timeout","fetchMarkdownContent","navigator","clipboard","writeText","content","error","errorMessage","Error","message","String","openInNewTab","open","Menu","positioning","MenuTrigger","disableButtonEnhancement","triggerProps","SplitButton","className","menuButton","primaryActionButton","appearance","icon","onClick","aria-label","MenuPopover","MenuList","MenuItem","Toaster","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-commonjs/docs/DirSwitch.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DirSwitch", {
+    enumerable: true,
+    get: function() {
+        return DirSwitch;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _previewapi = require("@storybook/preview-api");
+const _reactlabel = require("@fluentui/react-label");
+const _reactswitch = require("@fluentui/react-switch");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacttheme = require("@fluentui/react-theme");
+const _react1 = require("@griffel/react");
+const _constants = require("../constants");
+const useStyles = (0, _react1.makeStyles)({
+    container: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'start'
+    },
+    label: {
+        ..._reacttheme.typographyStyles.subtitle2
+    }
+});
+const DirSwitch = ({ dir })=>{
+    const switchId = (0, _reactutilities.useId)('dir-switch');
+    const styles = useStyles();
+    const [currentDir, setCurrentDir] = _react.useState(dir);
+    const checked = currentDir === 'rtl';
+    const setGlobalDir = (newDir)=>{
+        _previewapi.addons.getChannel().emit('updateGlobals', {
+            globals: {
+                [_constants.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(_reactlabel.Label, {
+        className: styles.label,
+        htmlFor: currentDir === 'ltr' ? undefined : switchId
+    }, "LTR"), /*#__PURE__*/ _react.createElement(_reactswitch.Switch, {
+        checked: checked,
+        id: switchId,
+        onChange: onChange
+    }), /*#__PURE__*/ _react.createElement(_reactlabel.Label, {
+        className: styles.label,
+        htmlFor: currentDir === 'rtl' ? switchId : undefined
+    }, "RTL"));
+};

package/lib-commonjs/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":["DirSwitch","useStyles","makeStyles","container","alignItems","display","justifyContent","label","typographyStyles","subtitle2","dir","switchId","useId","styles","currentDir","setCurrentDir","React","useState","checked","setGlobalDir","newDir","addons","getChannel","emit","globals","DIR_ID","onChange","useCallback","_","data","div","className","Label","htmlFor","undefined","Switch","id"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;iEAzBU;4BACA;4BAED;6BACmB;gCACnB;4BACW;wBACN;2BAEJ;AAEvB,MAAMC,YAAYC,IAAAA,kBAAU,EAAC;IAC3BC,WAAW;QACTC,YAAY;QACZC,SAAS;QACTC,gBAAgB;IAClB;IACAC,OAAO;QACL,GAAGC,4BAAgB,CAACC,SAAS;IAC/B;AACF;AAKO,MAAMT,YAA+C,CAAC,EAAEU,GAAG,EAAE;IAClE,MAAMC,WAAWC,IAAAA,qBAAK,EAAC;IAEvB,MAAMC,SAASZ;IAEf,MAAM,CAACa,YAAYC,cAAc,GAAGC,OAAMC,QAAQ,CAACP;IACnD,MAAMQ,UAAUJ,eAAe;IAE/B,MAAMK,eAAe,CAACC;QACpBC,kBAAM,CAACC,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACC,iBAAM,CAAC,EAAEL;YAAO;QAAE;IAC5E;IAEA,MAAMM,WAAWV,OAAMW,WAAW,CAAuC,CAACC,GAAGC;QAC3E,MAAMT,SAASS,KAAKX,OAAO,GAAG,QAAQ;QACtCC,aAAaC;QACbL,cAAcK;IAChB,GAAG,EAAE;IAEL,qBACE,qBAACU;QAAIC,WAAWlB,OAAOV,SAAS;qBAC9B,qBAAC6B,iBAAK;QAACD,WAAWlB,OAAON,KAAK;QAAE0B,SAASnB,eAAe,QAAQoB,YAAYvB;OAAU,sBAGtF,qBAACwB,mBAAM;QAACjB,SAASA;QAASkB,IAAIzB;QAAUe,UAAUA;sBAClD,qBAACM,iBAAK;QAACD,WAAWlB,OAAON,KAAK;QAAE0B,SAASnB,eAAe,QAAQH,WAAWuB;OAAW;AAK5F"}

package/lib-commonjs/docs/FluentDocsContainer.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FluentDocsContainer", {
+    enumerable: true,
+    get: function() {
+        return FluentDocsContainer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _addondocs = require("@storybook/addon-docs");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactprovider = require("@fluentui/react-provider");
+const _utils = require("./utils");
+const FluentDocsContainer = ({ children, context })=>{
+    if ((0, _utils.isDocsEnabled)(context)) {
+        return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_reactprovider.FluentProvider, {
+            className: "sb-unstyled",
+            style: {
+                backgroundColor: 'transparent'
+            },
+            theme: _reacttheme.webLightTheme
+        }, /*#__PURE__*/ _react.createElement(_addondocs.DocsContainer, {
+            context: context
+        }, children)));
+    }
+    // If docs container is not enabled, fall back to Storybook's default DocsContainer
+    return /*#__PURE__*/ _react.createElement(_addondocs.DocsContainer, {
+        context: context
+    }, children);
+};

package/lib-commonjs/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';\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":["FluentDocsContainer","children","context","isDocsEnabled","FluentProvider","className","style","backgroundColor","theme","webLightTheme","DocsContainer"],"mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;2BAC8B;4BACvB;+BACC;uBAED;AAUvB,MAAMA,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIC,IAAAA,oBAAa,EAACD,UAAU;QAC1B,qBACE,0DAEE,qBAACE,6BAAc;YAACC,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOC,yBAAa;yBACrG,qBAACC,wBAAa;YAACR,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,qBAACS,wBAAa;QAACR,SAASA;OAAUD;AAC3C"}

package/lib-commonjs/docs/FluentDocsPage.js

@@ -0,0 +1,305 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FluentDocsPage", {
+    enumerable: true,
+    get: function() {
+        return FluentDocsPage;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _addondocs = require("@storybook/addon-docs");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactlink = require("@fluentui/react-link");
+const _reacttext = require("@fluentui/react-text");
+const _react1 = require("@griffel/react");
+const _reacticons = require("@fluentui/react-icons");
+const _constants = require("../constants");
+const _theme = require("../theme");
+const _utils = require("./utils");
+const _DirSwitch = require("./DirSwitch");
+const _ThemePicker = require("./ThemePicker");
+const _Toc = require("./Toc");
+const _CopyAsMarkdownButton = require("./CopyAsMarkdownButton");
+const useStyles = (0, _react1.makeStyles)({
+    divider: {
+        height: '1px',
+        backgroundColor: '#e1dfdd',
+        border: '0px none',
+        margin: '48px 0px'
+    },
+    wrapper: {
+        display: 'flex',
+        gap: '16px'
+    },
+    toc: {
+        flexBasis: '200px',
+        flexShrink: 0,
+        [`@media screen and (max-width: 1000px)`]: {
+            display: 'none'
+        }
+    },
+    container: {
+        // without a width, this div grows wider than its parent
+        width: '200px',
+        flexGrow: 1
+    },
+    globalTogglesContainer: {
+        columnGap: _reacttheme.tokens.spacingHorizontalXXXL,
+        display: 'flex'
+    },
+    description: {
+        display: 'grid',
+        gridTemplateColumns: '1fr min-content'
+    },
+    additionalInfoWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: _reacttheme.tokens.spacingVerticalM
+    },
+    additionalInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: _reacttheme.tokens.spacingVerticalM,
+        border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        padding: _reacttheme.tokens.spacingHorizontalM,
+        margin: `0 ${_reacttheme.tokens.spacingHorizontalM}`
+    },
+    additionalInfoIcon: {
+        alignSelf: 'center',
+        color: _reacttheme.tokens.colorBrandForeground1,
+        fontSize: '24px',
+        marginRight: _reacttheme.tokens.spacingHorizontalM
+    },
+    additionalInfoMessage: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: _reacttheme.tokens.spacingVerticalXS
+    },
+    infoIcon: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: _reacttheme.tokens.spacingVerticalXS,
+        flex: 1
+    }
+});
+const useVideoClasses = (0, _react1.makeStyles)({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: _reacttheme.tokens.spacingHorizontalMNudge
+    },
+    preview: {
+        borderRadius: _reacttheme.tokens.borderRadiusSmall,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: _reacttheme.tokens.spacingHorizontalM,
+        padding: _reacttheme.tokens.spacingHorizontalM,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground2,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground2Hover
+        }
+    },
+    image: {
+        width: '200px'
+    }
+});
+const VideoPreviews = (props)=>{
+    const { videos } = props;
+    const classes = useVideoClasses();
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: classes.container
+    }, videos.map((video)=>/*#__PURE__*/ _react.createElement(_reactlink.Link, {
+            className: classes.preview,
+            href: video.href,
+            target: "_blank",
+            key: video.href
+        }, /*#__PURE__*/ _react.createElement("img", {
+            alt: `Video: ${video.preview}`,
+            src: video.preview,
+            className: classes.image
+        }), /*#__PURE__*/ _react.createElement(_reacttext.Text, null, video.title))));
+};
+const getNativeElementsList = (elements)=>{
+    const elementsArr = elements === null || elements === void 0 ? void 0 : elements.map((el, idx)=>[
+            /*#__PURE__*/ _react.createElement("code", {
+                key: idx
+            }, `<${el}>`),
+            idx !== elements.length - 1 ? ', ' : ' '
+        ]);
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, elementsArr, elementsArr.length > 1 ? 'elements' : 'element');
+};
+const slotRegex = /as\?:\s*"([^"]+)"/;
+/**
+ * NOTE: this function mutates original story argTypes including all story subcomponents if they are present
+ */ function withSlotEnhancer(story, options) {
+    var _story_argTypes_as_type, _story_argTypes_as;
+    const hasArgAsProp = options.nativePropsApi ? ((_story_argTypes_as = story.argTypes.as) === null || _story_argTypes_as === void 0 ? void 0 : (_story_argTypes_as_type = _story_argTypes_as.type) === null || _story_argTypes_as_type === void 0 ? void 0 : _story_argTypes_as_type.name) === 'enum' : false;
+    const argAsProp = hasArgAsProp ? story.argTypes.as.type.value : null;
+    let hasArgAsSlot = false;
+    const transformPropsWithSlotShorthand = (props)=>{
+        Object.entries(props).forEach(([key, argType])=>{
+            var _argType_type;
+            const value = argType === null || argType === void 0 ? void 0 : (_argType_type = argType.type) === null || _argType_type === void 0 ? void 0 : _argType_type.name;
+            const match = value.match(slotRegex);
+            // Transformation for Slot with `AlternateAs` specified (mutates DocGen Object reference)
+            if (match) {
+                props[key].type.name = `Slot<\"${match[1]}\">`;
+            } else if (value.includes('WithSlotShorthandValue')) {
+                props[key].type.name = `Slot`;
+            }
+            if (value.includes('Slot')) {
+                hasArgAsSlot = true;
+            }
+        });
+    };
+    const transformComponent = (component)=>{
+        var _component___docgenInfo;
+        const docGenProps = component === null || component === void 0 ? void 0 : (_component___docgenInfo = component.__docgenInfo) === null || _component___docgenInfo === void 0 ? void 0 : _component___docgenInfo.props;
+        if (docGenProps) {
+            transformPropsWithSlotShorthand(docGenProps);
+        }
+    };
+    const component = story.component;
+    const subcomponents = story.subcomponents;
+    if (options.slotsApi) {
+        transformComponent(component);
+        if (subcomponents) {
+            Object.values(subcomponents).forEach((subcomponent)=>{
+                transformComponent(subcomponent);
+            });
+        }
+    }
+    return {
+        component,
+        hasArgAsSlot,
+        hasArgAsProp,
+        argAsProp
+    };
+}
+const AdditionalApiDocs = ({ children })=>{
+    const styles = useStyles();
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: styles.additionalInfo
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: styles.additionalInfoMessage
+    }, /*#__PURE__*/ _react.createElement(_reacticons.InfoFilled, {
+        className: styles.additionalInfoIcon
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: styles.infoIcon
+    }, children)));
+};
+const RenderArgsTable = ({ story, hideArgsTable, showSlotsApi, showNativePropsApi })=>{
+    const { component, hasArgAsProp, hasArgAsSlot, argAsProp } = withSlotEnhancer(story, {
+        slotsApi: showSlotsApi,
+        nativePropsApi: showNativePropsApi
+    });
+    const styles = useStyles();
+    return hideArgsTable ? null : /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("div", {
+        className: styles.additionalInfoWrapper
+    }, hasArgAsProp && /*#__PURE__*/ _react.createElement(AdditionalApiDocs, null, /*#__PURE__*/ _react.createElement("p", null, /*#__PURE__*/ _react.createElement("b", null, "Native props are supported ", /*#__PURE__*/ _react.createElement("span", {
+        role: "presentation"
+    }, "🙌"), /*#__PURE__*/ _react.createElement("br", null)), /*#__PURE__*/ _react.createElement("span", null, "All HTML attributes native to the", getNativeElementsList(argAsProp), ", including all ", /*#__PURE__*/ _react.createElement("code", null, "aria-*"), " and ", /*#__PURE__*/ _react.createElement("code", null, "data-*"), ' ', "attributes, can be applied as native props on this component."))), hasArgAsSlot && /*#__PURE__*/ _react.createElement(AdditionalApiDocs, null, /*#__PURE__*/ _react.createElement("p", null, /*#__PURE__*/ _react.createElement("b", null, "Customizing components with slots ", /*#__PURE__*/ _react.createElement("span", {
+        role: "presentation"
+    }, "🙌")), /*#__PURE__*/ _react.createElement("br", null), /*#__PURE__*/ _react.createElement("span", null, "Slots in Fluent UI React components are designed to be modified or replaced, providing a flexible approach to customizing components. Each slot is exposed as a top-level prop and can be filled with primitive values, JSX/TSX, props objects, or render functions. This allows for more dynamic and reusable component structures, similar to slots in other frameworks.", ' ', /*#__PURE__*/ _react.createElement(_reactlink.Link, {
+        href: "/?path=/docs/concepts-developer-customizing-components-with-slots--docs"
+    }, "Customizing components with slots", ' '))))), /*#__PURE__*/ _react.createElement(_addondocs.ArgsTable, {
+        of: component
+    }));
+};
+const RenderPrimaryStory = ({ primaryStory, skipPrimaryStory })=>{
+    const styles = useStyles();
+    return skipPrimaryStory ? null : /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("hr", {
+        className: styles.divider
+    }), /*#__PURE__*/ _react.createElement(_addondocs.HeaderMdx, {
+        as: "h3",
+        id: (0, _Toc.nameToHash)(primaryStory.name)
+    }, primaryStory.name), /*#__PURE__*/ _react.createElement(_addondocs.Primary, null));
+};
+const FluentDocsPage = ()=>{
+    var _primaryStoryContext_parameters, _primaryStoryContext_globals, _primaryStoryContext_parameters_docs, _primaryStoryContext_parameters1, _primaryStoryContext_parameters_docs1, _primaryStoryContext_parameters2, _primaryStoryContext_parameters3;
+    const context = _react.useContext(_addondocs.DocsContext);
+    // Get the fluent docs page configuration from context
+    const docsPageConfig = (0, _utils.getDocsPageConfig)(context);
+    const stories = context.componentStories();
+    const primaryStory = stories[0];
+    const primaryStoryContext = context.getStoryContext(primaryStory);
+    assertStoryMetaValues(primaryStory);
+    var _primaryStoryContext_parameters_dir, _ref;
+    const dir = (_ref = (_primaryStoryContext_parameters_dir = (_primaryStoryContext_parameters = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters === void 0 ? void 0 : _primaryStoryContext_parameters.dir) !== null && _primaryStoryContext_parameters_dir !== void 0 ? _primaryStoryContext_parameters_dir : (_primaryStoryContext_globals = primaryStoryContext.globals) === null || _primaryStoryContext_globals === void 0 ? void 0 : _primaryStoryContext_globals[_constants.DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
+    const selectedTheme = _theme.themes.find((theme)=>theme.id === primaryStoryContext.globals[_constants.THEME_ID]);
+    const hideArgsTable = Boolean((_primaryStoryContext_parameters1 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters1 === void 0 ? void 0 : (_primaryStoryContext_parameters_docs = _primaryStoryContext_parameters1.docs) === null || _primaryStoryContext_parameters_docs === void 0 ? void 0 : _primaryStoryContext_parameters_docs.hideArgsTable);
+    const skipPrimaryStory = Boolean((_primaryStoryContext_parameters2 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters2 === void 0 ? void 0 : (_primaryStoryContext_parameters_docs1 = _primaryStoryContext_parameters2.docs) === null || _primaryStoryContext_parameters_docs1 === void 0 ? void 0 : _primaryStoryContext_parameters_docs1.skipPrimaryStory);
+    var _primaryStoryContext_parameters_videos;
+    const videos = (_primaryStoryContext_parameters_videos = (_primaryStoryContext_parameters3 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters3 === void 0 ? void 0 : _primaryStoryContext_parameters3.videos) !== null && _primaryStoryContext_parameters_videos !== void 0 ? _primaryStoryContext_parameters_videos : null;
+    const styles = useStyles();
+    // If docs page is disabled, return Storybook's default docs page
+    if (!docsPageConfig) {
+        return /*#__PURE__*/ _react.createElement("div", {
+            className: "sb-unstyled"
+        }, /*#__PURE__*/ _react.createElement(_addondocs.Title, null), /*#__PURE__*/ _react.createElement(_addondocs.Subtitle, null), /*#__PURE__*/ _react.createElement(_addondocs.Description, null), /*#__PURE__*/ _react.createElement(RenderPrimaryStory, {
+            primaryStory: primaryStory,
+            skipPrimaryStory: skipPrimaryStory
+        }), /*#__PURE__*/ _react.createElement(RenderArgsTable, {
+            story: primaryStory,
+            hideArgsTable: hideArgsTable
+        }), /*#__PURE__*/ _react.createElement(_addondocs.Stories, null));
+    }
+    // Determine what to show based on configuration
+    const { tableOfContents: showTableOfContents, dirSwitcher: showDirSwitcher, themePicker: showThemePicker, copyAsMarkdown: showCopyAsMarkdown, argTable } = docsPageConfig;
+    // DEBUG
+    // console.log('FluentDocsPage', context);
+    // console.table(stories.map((s: StoreItem) => ({ id: s.id, kind: s.kind, name: s.name, story: s.story })));
+    // console.table(
+    //   Object.values((context as any).argTypes).map(arg => ({
+    //     name: arg.name,
+    //     description: arg.description,
+    //     type: arg.table?.type?.summary ?? '?',
+    //     default: arg.table?.defaultValue?.summary ?? '-',
+    //   })),
+    // );
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: "sb-unstyled"
+    }, /*#__PURE__*/ _react.createElement(_addondocs.Title, null), /*#__PURE__*/ _react.createElement("div", {
+        className: styles.wrapper
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: styles.container
+    }, (showThemePicker || showDirSwitcher || showCopyAsMarkdown) && /*#__PURE__*/ _react.createElement("div", {
+        className: styles.globalTogglesContainer
+    }, showThemePicker && /*#__PURE__*/ _react.createElement(_ThemePicker.ThemePicker, {
+        selectedThemeId: selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.id
+    }), showDirSwitcher && /*#__PURE__*/ _react.createElement(_DirSwitch.DirSwitch, {
+        dir: dir
+    }), showCopyAsMarkdown && /*#__PURE__*/ _react.createElement(_CopyAsMarkdownButton.CopyAsMarkdownButton, {
+        storyId: primaryStory.id
+    })), /*#__PURE__*/ _react.createElement(_addondocs.Subtitle, null), /*#__PURE__*/ _react.createElement("div", {
+        className: styles.description
+    }, /*#__PURE__*/ _react.createElement(_addondocs.Description, null), videos && /*#__PURE__*/ _react.createElement(VideoPreviews, {
+        videos: videos
+    })), /*#__PURE__*/ _react.createElement(RenderPrimaryStory, {
+        primaryStory: primaryStory,
+        skipPrimaryStory: skipPrimaryStory
+    }), /*#__PURE__*/ _react.createElement(RenderArgsTable, {
+        story: primaryStory,
+        hideArgsTable: hideArgsTable,
+        showSlotsApi: argTable.slotsApi,
+        showNativePropsApi: argTable.nativePropsApi
+    }), /*#__PURE__*/ _react.createElement(_addondocs.Stories, null)), showTableOfContents && /*#__PURE__*/ _react.createElement("div", {
+        className: styles.toc
+    }, /*#__PURE__*/ _react.createElement(_Toc.Toc, {
+        stories: stories
+    }))));
+};
+function assertStoryMetaValues(story) {
+    if (story.component === null) {
+        throw new Error([
+            '🚨 Invalid Story Meta declaration:',
+            `- primaryStory.component of componentId:${story.componentId} is "null"`,
+            '- to resolve this error, please update "component" property value in your story definition to reference a React Component or remove it if it is not needed.'
+        ].join('\n'));
+    }
+}