@fluentui/react-storybook-addon-export-to-sandbox 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-storybook-addon-export-to-sandbox
 
-This log was last generated on Tue, 04 Nov 2025 14:46:32 GMT and should not be manually modified.
+This log was last generated on Tue, 03 Mar 2026 13:15:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon-export-to-sandbox_v0.2.0)
+
+Tue, 03 Mar 2026 13:15:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon-export-to-sandbox_v0.1.3..@fluentui/react-storybook-addon-export-to-sandbox_v0.2.0)
+
+### Minor changes
+
+- add withExportToSandboxButton decorator export and fix default story missing export button ([PR #35677](https://github.com/microsoft/fluentui/pull/35677) by dmytrokirpa@microsoft.com)
+- feat: upgrade to storybook 9 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by dmytrokirpa@microsoft.com)
+- BREAKING: upgrade storybook to v8 ([PR #35279](https://github.com/microsoft/fluentui/pull/35279) by dmytrokirpa@microsoft.com)
+
+### Patches
+
+- chore: bump storybook to mitigate CVE ([PR #35748](https://github.com/microsoft/fluentui/pull/35748) by martinhochel@microsoft.com)
+
 ## [0.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon-export-to-sandbox_v0.1.3)
 
-Tue, 04 Nov 2025 14:46:32 GMT 
+Tue, 04 Nov 2025 14:47:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon-export-to-sandbox_v0.1.2..@fluentui/react-storybook-addon-export-to-sandbox_v0.1.3)
 
 ### Patches

package/dist/index.d.ts

@@ -1 +1,35 @@
+import type { JSXElement } from '@fluentui/react-utilities';
+import type { Parameters as Parameters_2 } from '@storybook/react-webpack5';
+import type { StoryContext as StoryContext_2 } from '@storybook/react-webpack5';
+
+/**
+ * NOTE:
+ * Don't import anything from source code in this file !!
+ *
+ * only pure API definitions of addon are allowed to live here, that are used both internal and for external storybook `Parameter` type extensions
+ */
+declare interface ParametersConfig {
+    optionalDependencies?: Record<string, string>;
+    requiredDependencies?: Record<string, string>;
+    provider: 'codesandbox-cloud' | 'codesandbox-browser' | 'stackblitz-cloud';
+    bundler: 'vite' | 'cra';
+}
+
+declare interface ParametersExtension {
+    exportToSandbox?: ParametersConfig;
+}
+
+declare interface StoryContext extends StoryContext_2 {
+    parameters: Parameters_2 & ParametersExtension;
+}
+
+/**
+ * Decorator to add "Export to Sandbox" button in Storybook Docs view
+ *
+ * @param storyFn - original story function
+ * @param context - story context
+ * @returns - decorated story
+ */
+export declare const withExportToSandboxButton: (storyFn: (context: StoryContext) => JSXElement, context: StoryContext) => JSXElement;
+
 export { }

package/lib/decorators/with-export-to-sandbox-button.js

@@ -1,5 +1,11 @@
 import { addDemoActionButton } from '../sandbox-factory';
-export const withExportToSandboxButton = (storyFn, context)=>{
+/**
+ * Decorator to add "Export to Sandbox" button in Storybook Docs view
+ *
+ * @param storyFn - original story function
+ * @param context - story context
+ * @returns - decorated story
+ */ export const withExportToSandboxButton = (storyFn, context)=>{
     if (context.viewMode === 'docs') {
         addDemoActionButton(context);
     }

package/lib/decorators/with-export-to-sandbox-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/decorators/with-export-to-sandbox-button.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\n\nimport { addDemoActionButton } from '../sandbox-factory';\nimport type { StoryContext } from '../types';\n\nexport const withExportToSandboxButton = (storyFn: (context: StoryContext) => JSXElement, context: StoryContext) => {\n  if (context.viewMode === 'docs') {\n    addDemoActionButton(context);\n  }\n\n  return storyFn(context);\n};\n"],"names":["addDemoActionButton","withExportToSandboxButton","storyFn","context","viewMode"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,qBAAqB;AAGzD,OAAO,MAAMC,4BAA4B,CAACC,SAAgDC;IACxF,IAAIA,QAAQC,QAAQ,KAAK,QAAQ;QAC/BJ,oBAAoBG;IACtB;IAEA,OAAOD,QAAQC;AACjB,EAAE"}
+{"version":3,"sources":["../src/decorators/with-export-to-sandbox-button.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\n\nimport { addDemoActionButton } from '../sandbox-factory';\nimport type { StoryContext } from '../types';\n\n/**\n * Decorator to add \"Export to Sandbox\" button in Storybook Docs view\n *\n * @param storyFn - original story function\n * @param context - story context\n * @returns - decorated story\n */\nexport const withExportToSandboxButton = (storyFn: (context: StoryContext) => JSXElement, context: StoryContext) => {\n  if (context.viewMode === 'docs') {\n    addDemoActionButton(context);\n  }\n\n  return storyFn(context);\n};\n"],"names":["addDemoActionButton","withExportToSandboxButton","storyFn","context","viewMode"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,qBAAqB;AAGzD;;;;;;CAMC,GACD,OAAO,MAAMC,4BAA4B,CAACC,SAAgDC;IACxF,IAAIA,QAAQC,QAAQ,KAAK,QAAQ;QAC/BJ,oBAAoBG;IACtB;IAEA,OAAOD,QAAQC;AACjB,EAAE"}

package/lib/index.js

@@ -1 +1 @@
-export { };
+export { withExportToSandboxButton } from './decorators/with-export-to-sandbox-button';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {};\n"],"names":[],"mappings":"AAAA,WAAU"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { withExportToSandboxButton } from './decorators/with-export-to-sandbox-button';\n"],"names":["withExportToSandboxButton"],"mappings":"AAAA,SAASA,yBAAyB,QAAQ,6CAA6C"}

package/lib/preset/preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Parameters } from '@storybook/react';\nimport type { StoryContextForEnhancers } from '@storybook/csf';\n\nimport { withExportToSandboxButton } from '../decorators/with-export-to-sandbox-button';\n\nexport const decorators = [withExportToSandboxButton];\n\nexport const parameters: Parameters = {\n  docs: {\n    source: {\n      /**\n       * Override source code shown within \"Show Code\" Docs tab.\n       * @see https://github.com/storybookjs/storybook/blob/release-6-5/addons/docs/docs/recipes.md#customizing-source-snippets\n       */\n      transform: (source: string, storyContext: StoryContextForEnhancers) => {\n        // This config renders story source generated via `fullSource` parameter that is being added by @fluentui/babel-preset-storybook-full-source plugin, which is registered as part of this preset\n        return storyContext.parameters.fullSource;\n      },\n    },\n  },\n};\n"],"names":["withExportToSandboxButton","decorators","parameters","docs","source","transform","storyContext","fullSource"],"mappings":"AAGA,SAASA,yBAAyB,QAAQ,8CAA8C;AAExF,OAAO,MAAMC,aAAa;IAACD;CAA0B,CAAC;AAEtD,OAAO,MAAME,aAAyB;IACpCC,MAAM;QACJC,QAAQ;YACN;;;OAGC,GACDC,WAAW,CAACD,QAAgBE;gBAC1B,+LAA+L;gBAC/L,OAAOA,aAAaJ,UAAU,CAACK,UAAU;YAC3C;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Parameters } from '@storybook/react-webpack5';\nimport type { StoryContextForEnhancers } from 'storybook/internal/csf';\n\nimport { withExportToSandboxButton } from '../decorators/with-export-to-sandbox-button';\n\nexport const decorators = [withExportToSandboxButton];\n\nexport const parameters: Parameters = {\n  docs: {\n    source: {\n      /**\n       * Override source code shown within \"Show Code\" Docs tab.\n       * @see https://github.com/storybookjs/storybook/blob/release-6-5/addons/docs/docs/recipes.md#customizing-source-snippets\n       */\n      transform: (source: string, storyContext: StoryContextForEnhancers) => {\n        // This config renders story source generated via `fullSource` parameter that is being added by @fluentui/babel-preset-storybook-full-source plugin, which is registered as part of this preset\n        return storyContext.parameters.fullSource;\n      },\n    },\n  },\n};\n"],"names":["withExportToSandboxButton","decorators","parameters","docs","source","transform","storyContext","fullSource"],"mappings":"AAGA,SAASA,yBAAyB,QAAQ,8CAA8C;AAExF,OAAO,MAAMC,aAAa;IAACD;CAA0B,CAAC;AAEtD,OAAO,MAAME,aAAyB;IACpCC,MAAM;QACJC,QAAQ;YACN;;;OAGC,GACDC,WAAW,CAACD,QAAgBE;gBAC1B,+LAA+L;gBAC/L,OAAOA,aAAaJ,UAAU,CAACK,UAAU;YAC3C;QACF;IACF;AACF,EAAE"}

package/lib/sandbox-factory.js

@@ -1,6 +1,6 @@
 import { getParameters } from 'codesandbox-import-utils/lib/api/define';
 import { scaffold } from './sandbox-scaffold';
-import { addHiddenInput, prepareData, prepareSandboxContainer } from './sandbox-utils';
+import { addHiddenInput, prepareData, prepareSandboxContainers } from './sandbox-utils';
 const defaultFileToPreview = encodeURIComponent('src/example.tsx');
 const actionConfig = {
     'codesandbox-cloud': {
@@ -26,12 +26,13 @@ const actionConfig = {
     }
 };
 export function addDemoActionButton(context) {
-    const { container, cssClasses } = prepareSandboxContainer(context);
     const config = prepareData(context);
     if (!config) {
         throw new Error('issues with data');
     }
-    addActionButton(container, config, cssClasses);
+    prepareSandboxContainers(context).forEach(({ container, cssClasses })=>{
+        addActionButton(container, config, cssClasses);
+    });
 }
 function addActionButton(container, config, classList) {
     const files = scaffold[config.bundler](config);

package/lib/sandbox-factory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sandbox-factory.ts"],"sourcesContent":["import { getParameters } from 'codesandbox-import-utils/lib/api/define';\n\nimport { scaffold } from './sandbox-scaffold';\nimport { addHiddenInput, prepareData, prepareSandboxContainer, type Data } from './sandbox-utils';\nimport { StoryContext } from './types';\n\nconst defaultFileToPreview = encodeURIComponent('src/example.tsx');\n\nconst actionConfig = {\n  'codesandbox-cloud': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'codesandbox-browser': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'stackblitz-cloud': {\n    label: 'Stackblitz',\n    factory: (files: Record<string, string>, config: Data) => openStackblitz({ files, ...config }),\n  },\n};\n\nexport function addDemoActionButton(context: StoryContext) {\n  const { container, cssClasses } = prepareSandboxContainer(context);\n  const config = prepareData(context);\n  if (!config) {\n    throw new Error('issues with data');\n  }\n\n  addActionButton(container, config, cssClasses);\n}\n\nfunction addActionButton(container: HTMLElement, config: Data, classList: string[]) {\n  const files = scaffold[config.bundler](config);\n  const action = actionConfig[config.provider];\n\n  const button = document.createElement('button');\n  button.classList.add(...classList);\n  button.textContent = `Open in ${action.label}`;\n\n  container?.prepend(button);\n\n  button.addEventListener('click', _ev => {\n    action.factory(files, config);\n  });\n}\n\n/**\n *\n * @see https://developer.stackblitz.com/docs/platform/post-api/\n */\nfunction openStackblitz(data: { files: Record<string, string> } & Data) {\n  const { files, description, title } = data;\n  const form = document.createElement('form');\n  form.method = 'post';\n  form.target = '_blank';\n  form.action = `https://stackblitz.com/run?file=${defaultFileToPreview}`;\n  // node template - boots web-container\n  addHiddenInput(form, 'project[template]', 'node');\n  addHiddenInput(form, 'project[title]', title);\n  addHiddenInput(form, 'project[description]', `# ${description}`);\n\n  Object.keys(files).forEach(key => {\n    const value = files[key];\n    addHiddenInput(form, `project[files][${key}]`, value);\n  });\n\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n\n/**\n *\n * @see https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api\n */\nfunction openCodeSandbox({ files, provider }: { files: Record<string, string> } & Data) {\n  const normalizedFilesApi = Object.entries(files).reduce((acc, current) => {\n    acc[current[0]] = { isBinary: false, content: current[1] };\n    return acc;\n  }, {} as Record<string, { content: string; isBinary: boolean }>);\n\n  const env = provider === 'codesandbox-cloud' ? 'server' : 'browser';\n  const parameters = getParameters({ files: normalizedFilesApi });\n\n  const form = document.createElement('form');\n  form.method = 'POST';\n  form.target = '_blank';\n  form.action = `https://codesandbox.io/api/v1/sandboxes/define?environment=${env}`;\n\n  addHiddenInput(form, 'parameters', parameters);\n  addHiddenInput(form, 'query', `file=${defaultFileToPreview}`);\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n"],"names":["getParameters","scaffold","addHiddenInput","prepareData","prepareSandboxContainer","defaultFileToPreview","encodeURIComponent","actionConfig","label","factory","files","config","openCodeSandbox","openStackblitz","addDemoActionButton","context","container","cssClasses","Error","addActionButton","classList","bundler","action","provider","button","document","createElement","add","textContent","prepend","addEventListener","_ev","data","description","title","form","method","target","Object","keys","forEach","key","value","body","appendChild","submit","removeChild","normalizedFilesApi","entries","reduce","acc","current","isBinary","content","env","parameters"],"mappings":"AAAA,SAASA,aAAa,QAAQ,0CAA0C;AAExE,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,EAAEC,WAAW,EAAEC,uBAAuB,QAAmB,kBAAkB;AAGlG,MAAMC,uBAAuBC,mBAAmB;AAEhD,MAAMC,eAAe;IACnB,qBAAqB;QACnBC,OAAO;QACPC,SAAS,CAACC,OAA+BC,SAAiBC,gBAAgB;gBAAEF;gBAAO,GAAGC,MAAM;YAAC;IAC/F;IACA,uBAAuB;QACrBH,OAAO;QACPC,SAAS,CAACC,OAA+BC,SAAiBC,gBAAgB;gBAAEF;gBAAO,GAAGC,MAAM;YAAC;IAC/F;IACA,oBAAoB;QAClBH,OAAO;QACPC,SAAS,CAACC,OAA+BC,SAAiBE,eAAe;gBAAEH;gBAAO,GAAGC,MAAM;YAAC;IAC9F;AACF;AAEA,OAAO,SAASG,oBAAoBC,OAAqB;IACvD,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGb,wBAAwBW;IAC1D,MAAMJ,SAASR,YAAYY;IAC3B,IAAI,CAACJ,QAAQ;QACX,MAAM,IAAIO,MAAM;IAClB;IAEAC,gBAAgBH,WAAWL,QAAQM;AACrC;AAEA,SAASE,gBAAgBH,SAAsB,EAAEL,MAAY,EAAES,SAAmB;IAChF,MAAMV,QAAQT,QAAQ,CAACU,OAAOU,OAAO,CAAC,CAACV;IACvC,MAAMW,SAASf,YAAY,CAACI,OAAOY,QAAQ,CAAC;IAE5C,MAAMC,SAASC,SAASC,aAAa,CAAC;IACtCF,OAAOJ,SAAS,CAACO,GAAG,IAAIP;IACxBI,OAAOI,WAAW,GAAG,CAAC,QAAQ,EAAEN,OAAOd,KAAK,EAAE;IAE9CQ,sBAAAA,gCAAAA,UAAWa,OAAO,CAACL;IAEnBA,OAAOM,gBAAgB,CAAC,SAASC,CAAAA;QAC/BT,OAAOb,OAAO,CAACC,OAAOC;IACxB;AACF;AAEA;;;CAGC,GACD,SAASE,eAAemB,IAA8C;IACpE,MAAM,EAAEtB,KAAK,EAAEuB,WAAW,EAAEC,KAAK,EAAE,GAAGF;IACtC,MAAMG,OAAOV,SAASC,aAAa,CAAC;IACpCS,KAAKC,MAAM,GAAG;IACdD,KAAKE,MAAM,GAAG;IACdF,KAAKb,MAAM,GAAG,CAAC,gCAAgC,EAAEjB,sBAAsB;IACvE,sCAAsC;IACtCH,eAAeiC,MAAM,qBAAqB;IAC1CjC,eAAeiC,MAAM,kBAAkBD;IACvChC,eAAeiC,MAAM,wBAAwB,CAAC,EAAE,EAAEF,aAAa;IAE/DK,OAAOC,IAAI,CAAC7B,OAAO8B,OAAO,CAACC,CAAAA;QACzB,MAAMC,QAAQhC,KAAK,CAAC+B,IAAI;QACxBvC,eAAeiC,MAAM,CAAC,eAAe,EAAEM,IAAI,CAAC,CAAC,EAAEC;IACjD;IAEAjB,SAASkB,IAAI,CAACC,WAAW,CAACT;IAC1BA,KAAKU,MAAM;IACXpB,SAASkB,IAAI,CAACG,WAAW,CAACX;AAC5B;AAEA;;;CAGC,GACD,SAASvB,gBAAgB,EAAEF,KAAK,EAAEa,QAAQ,EAA4C;IACpF,MAAMwB,qBAAqBT,OAAOU,OAAO,CAACtC,OAAOuC,MAAM,CAAC,CAACC,KAAKC;QAC5DD,GAAG,CAACC,OAAO,CAAC,EAAE,CAAC,GAAG;YAAEC,UAAU;YAAOC,SAASF,OAAO,CAAC,EAAE;QAAC;QACzD,OAAOD;IACT,GAAG,CAAC;IAEJ,MAAMI,MAAM/B,aAAa,sBAAsB,WAAW;IAC1D,MAAMgC,aAAavD,cAAc;QAAEU,OAAOqC;IAAmB;IAE7D,MAAMZ,OAAOV,SAASC,aAAa,CAAC;IACpCS,KAAKC,MAAM,GAAG;IACdD,KAAKE,MAAM,GAAG;IACdF,KAAKb,MAAM,GAAG,CAAC,2DAA2D,EAAEgC,KAAK;IAEjFpD,eAAeiC,MAAM,cAAcoB;IACnCrD,eAAeiC,MAAM,SAAS,CAAC,KAAK,EAAE9B,sBAAsB;IAC5DoB,SAASkB,IAAI,CAACC,WAAW,CAACT;IAC1BA,KAAKU,MAAM;IACXpB,SAASkB,IAAI,CAACG,WAAW,CAACX;AAC5B"}
+{"version":3,"sources":["../src/sandbox-factory.ts"],"sourcesContent":["import { getParameters } from 'codesandbox-import-utils/lib/api/define';\n\nimport { scaffold } from './sandbox-scaffold';\nimport { addHiddenInput, prepareData, prepareSandboxContainers, type Data } from './sandbox-utils';\nimport { StoryContext } from './types';\n\nconst defaultFileToPreview = encodeURIComponent('src/example.tsx');\n\nconst actionConfig = {\n  'codesandbox-cloud': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'codesandbox-browser': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'stackblitz-cloud': {\n    label: 'Stackblitz',\n    factory: (files: Record<string, string>, config: Data) => openStackblitz({ files, ...config }),\n  },\n};\n\nexport function addDemoActionButton(context: StoryContext) {\n  const config = prepareData(context);\n  if (!config) {\n    throw new Error('issues with data');\n  }\n\n  prepareSandboxContainers(context).forEach(({ container, cssClasses }) => {\n    addActionButton(container, config, cssClasses);\n  });\n}\n\nfunction addActionButton(container: HTMLElement, config: Data, classList: string[]) {\n  const files = scaffold[config.bundler](config);\n  const action = actionConfig[config.provider];\n\n  const button = document.createElement('button');\n  button.classList.add(...classList);\n  button.textContent = `Open in ${action.label}`;\n\n  container?.prepend(button);\n\n  button.addEventListener('click', _ev => {\n    action.factory(files, config);\n  });\n}\n\n/**\n *\n * @see https://developer.stackblitz.com/docs/platform/post-api/\n */\nfunction openStackblitz(data: { files: Record<string, string> } & Data) {\n  const { files, description, title } = data;\n  const form = document.createElement('form');\n  form.method = 'post';\n  form.target = '_blank';\n  form.action = `https://stackblitz.com/run?file=${defaultFileToPreview}`;\n  // node template - boots web-container\n  addHiddenInput(form, 'project[template]', 'node');\n  addHiddenInput(form, 'project[title]', title);\n  addHiddenInput(form, 'project[description]', `# ${description}`);\n\n  Object.keys(files).forEach(key => {\n    const value = files[key];\n    addHiddenInput(form, `project[files][${key}]`, value);\n  });\n\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n\n/**\n *\n * @see https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api\n */\nfunction openCodeSandbox({ files, provider }: { files: Record<string, string> } & Data) {\n  const normalizedFilesApi = Object.entries(files).reduce((acc, current) => {\n    acc[current[0]] = { isBinary: false, content: current[1] };\n    return acc;\n  }, {} as Record<string, { content: string; isBinary: boolean }>);\n\n  const env = provider === 'codesandbox-cloud' ? 'server' : 'browser';\n  const parameters = getParameters({ files: normalizedFilesApi });\n\n  const form = document.createElement('form');\n  form.method = 'POST';\n  form.target = '_blank';\n  form.action = `https://codesandbox.io/api/v1/sandboxes/define?environment=${env}`;\n\n  addHiddenInput(form, 'parameters', parameters);\n  addHiddenInput(form, 'query', `file=${defaultFileToPreview}`);\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n"],"names":["getParameters","scaffold","addHiddenInput","prepareData","prepareSandboxContainers","defaultFileToPreview","encodeURIComponent","actionConfig","label","factory","files","config","openCodeSandbox","openStackblitz","addDemoActionButton","context","Error","forEach","container","cssClasses","addActionButton","classList","bundler","action","provider","button","document","createElement","add","textContent","prepend","addEventListener","_ev","data","description","title","form","method","target","Object","keys","key","value","body","appendChild","submit","removeChild","normalizedFilesApi","entries","reduce","acc","current","isBinary","content","env","parameters"],"mappings":"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"}

package/lib/sandbox-utils.js

@@ -7,25 +7,27 @@ export function addHiddenInput(form, name, value) {
     input.value = value;
     form.appendChild(input);
 }
-export function prepareSandboxContainer(context) {
+export function prepareSandboxContainers(context) {
     const docsSelector = `#anchor--${context.id} .docs-story`;
-    const rootElement = document.querySelector(docsSelector);
-    if (!rootElement) {
+    const rootElements = document.querySelectorAll(docsSelector);
+    if (!rootElements.length) {
         throw new Error(`css selector: ${docsSelector}, doesn't exist `);
     }
-    const showCodeButton = rootElement.querySelector('.docblock-code-toggle');
-    const container = showCodeButton === null || showCodeButton === void 0 ? void 0 : showCodeButton.parentElement;
-    if (!container) {
-        throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);
-    }
-    const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');
-    // remove button if it already existed
-    const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);
-    ourButtons.forEach((node)=>node.remove());
-    return {
-        container,
-        cssClasses: classList
-    };
+    return Array.from(rootElements).map((rootElement)=>{
+        const showCodeButton = rootElement.querySelector('.docblock-code-toggle');
+        const container = showCodeButton === null || showCodeButton === void 0 ? void 0 : showCodeButton.parentElement;
+        if (!container) {
+            throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);
+        }
+        const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');
+        // remove button if it already existed
+        const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);
+        ourButtons.forEach((node)=>node.remove());
+        return {
+            container,
+            cssClasses: classList
+        };
+    });
 }
 const addonConfigDefaults = {
     requiredDependencies: {},

package/lib/sandbox-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sandbox-utils.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport { getDependencies } from './getDependencies';\nimport { StoryContext, ParametersExtension } from './types';\n\ntype ParametersConfig = NonNullable<ParametersExtension['exportToSandbox']>;\n\nexport function addHiddenInput(form: HTMLFormElement, name: string, value: string) {\n  const input = document.createElement('input');\n  input.type = 'hidden';\n  input.name = name;\n  input.value = value;\n  form.appendChild(input);\n}\n\nexport function prepareSandboxContainer(context: StoryContext) {\n  const docsSelector = `#anchor--${context.id} .docs-story`;\n  const rootElement = document.querySelector(docsSelector);\n\n  if (!rootElement) {\n    throw new Error(`css selector: ${docsSelector}, doesn't exist `);\n  }\n\n  const showCodeButton = rootElement.querySelector('.docblock-code-toggle');\n  const container = showCodeButton?.parentElement;\n\n  if (!container) {\n    throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);\n  }\n\n  const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');\n\n  // remove button if it already existed\n  const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);\n  ourButtons.forEach(node => node.remove());\n\n  return {\n    container,\n    cssClasses: classList,\n  };\n}\n\nconst addonConfigDefaults = { requiredDependencies: {}, optionalDependencies: {} };\nexport type Data = Pick<Required<ParametersConfig>, 'provider' | 'bundler'> & {\n  storyFile: string;\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  storyExportToken: string;\n  dependencies: Record<string, string>;\n  title: string;\n  description: string;\n};\n\nexport function prepareData(context: StoryContext): Data | null {\n  if (!context.parameters.exportToSandbox) {\n    throw new Error('exportToSandbox config parameter cannot be empty');\n  }\n\n  const addonConfig: Required<ParametersConfig> = {\n    ...addonConfigDefaults,\n    ...context.parameters.exportToSandbox,\n  };\n  const { provider, bundler } = addonConfig;\n  const storyFile = context.parameters?.fullSource;\n\n  if (!storyFile) {\n    console.error(\n      dedent`Export to Sandbox Addon: Couldn't find source for story ${context.title}. Did you install the babel plugin?`,\n    );\n    return null;\n  }\n\n  const { requiredDependencies, optionalDependencies } = addonConfig;\n  const dependencies = getDependencies(storyFile, requiredDependencies, optionalDependencies);\n\n  const title = 'FluentUI React v9';\n  const description = `Story demo: ${context.title} - ${context.name}`;\n\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  const storyExportToken = context.originalStoryFn.name.split('_stories_').slice(-1).pop();\n  if (!storyExportToken) {\n    throw new Error('issues processing story export token');\n  }\n\n  const demoData = {\n    storyFile,\n    storyExportToken,\n    provider,\n    bundler,\n    dependencies,\n    title,\n    description,\n  };\n\n  return demoData;\n}\n"],"names":["dedent","getDependencies","addHiddenInput","form","name","value","input","document","createElement","type","appendChild","prepareSandboxContainer","context","docsSelector","id","rootElement","querySelector","Error","showCodeButton","container","parentElement","classList","split","ourButtons","querySelectorAll","forEach","node","remove","cssClasses","addonConfigDefaults","requiredDependencies","optionalDependencies","prepareData","parameters","exportToSandbox","addonConfig","provider","bundler","storyFile","fullSource","console","error","title","dependencies","description","storyExportToken","originalStoryFn","slice","pop","demoData"],"mappings":"AAAA,OAAOA,YAAY,SAAS;AAE5B,SAASC,eAAe,QAAQ,oBAAoB;AAKpD,OAAO,SAASC,eAAeC,IAAqB,EAAEC,IAAY,EAAEC,KAAa;IAC/E,MAAMC,QAAQC,SAASC,aAAa,CAAC;IACrCF,MAAMG,IAAI,GAAG;IACbH,MAAMF,IAAI,GAAGA;IACbE,MAAMD,KAAK,GAAGA;IACdF,KAAKO,WAAW,CAACJ;AACnB;AAEA,OAAO,SAASK,wBAAwBC,OAAqB;IAC3D,MAAMC,eAAe,CAAC,SAAS,EAAED,QAAQE,EAAE,CAAC,YAAY,CAAC;IACzD,MAAMC,cAAcR,SAASS,aAAa,CAACH;IAE3C,IAAI,CAACE,aAAa;QAChB,MAAM,IAAIE,MAAM,CAAC,cAAc,EAAEJ,aAAa,gBAAgB,CAAC;IACjE;IAEA,MAAMK,iBAAiBH,YAAYC,aAAa,CAAC;IACjD,MAAMG,YAAYD,2BAAAA,qCAAAA,eAAgBE,aAAa;IAE/C,IAAI,CAACD,WAAW;QACd,MAAM,IAAIF,MAAM,CAAC,qDAAqD,CAAC;IACzE;IAEA,MAAMI,YAAY,AAACH,CAAAA,eAAeG,SAAS,CAAChB,KAAK,GAAG,2BAA0B,EAAGiB,KAAK,CAAC;IAEvF,sCAAsC;IACtC,MAAMC,aAAaJ,UAAUK,gBAAgB,CAAC,CAAC,yBAAyB,CAAC;IACzED,WAAWE,OAAO,CAACC,CAAAA,OAAQA,KAAKC,MAAM;IAEtC,OAAO;QACLR;QACAS,YAAYP;IACd;AACF;AAEA,MAAMQ,sBAAsB;IAAEC,sBAAsB,CAAC;IAAGC,sBAAsB,CAAC;AAAE;AAejF,OAAO,SAASC,YAAYpB,OAAqB;QAU7BA;IATlB,IAAI,CAACA,QAAQqB,UAAU,CAACC,eAAe,EAAE;QACvC,MAAM,IAAIjB,MAAM;IAClB;IAEA,MAAMkB,cAA0C;QAC9C,GAAGN,mBAAmB;QACtB,GAAGjB,QAAQqB,UAAU,CAACC,eAAe;IACvC;IACA,MAAM,EAAEE,QAAQ,EAAEC,OAAO,EAAE,GAAGF;IAC9B,MAAMG,aAAY1B,sBAAAA,QAAQqB,UAAU,cAAlBrB,0CAAAA,oBAAoB2B,UAAU;IAEhD,IAAI,CAACD,WAAW;QACdE,QAAQC,KAAK,CACXzC,MAAM,CAAC,wDAAwD,EAAEY,QAAQ8B,KAAK,CAAC,mCAAmC,CAAC;QAErH,OAAO;IACT;IAEA,MAAM,EAAEZ,oBAAoB,EAAEC,oBAAoB,EAAE,GAAGI;IACvD,MAAMQ,eAAe1C,gBAAgBqC,WAAWR,sBAAsBC;IAEtE,MAAMW,QAAQ;IACd,MAAME,cAAc,CAAC,YAAY,EAAEhC,QAAQ8B,KAAK,CAAC,GAAG,EAAE9B,QAAQR,IAAI,EAAE;IAEpE,2EAA2E;IAC3E,kEAAkE;IAClE,mEAAmE;IACnE,oFAAoF;IACpF,yBAAyB;IACzB,qFAAqF;IACrF,MAAMyC,mBAAmBjC,QAAQkC,eAAe,CAAC1C,IAAI,CAACkB,KAAK,CAAC,aAAayB,KAAK,CAAC,CAAC,GAAGC,GAAG;IACtF,IAAI,CAACH,kBAAkB;QACrB,MAAM,IAAI5B,MAAM;IAClB;IAEA,MAAMgC,WAAW;QACfX;QACAO;QACAT;QACAC;QACAM;QACAD;QACAE;IACF;IAEA,OAAOK;AACT"}
+{"version":3,"sources":["../src/sandbox-utils.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport { getDependencies } from './getDependencies';\nimport { StoryContext, ParametersExtension } from './types';\n\ntype ParametersConfig = NonNullable<ParametersExtension['exportToSandbox']>;\n\nexport function addHiddenInput(form: HTMLFormElement, name: string, value: string) {\n  const input = document.createElement('input');\n  input.type = 'hidden';\n  input.name = name;\n  input.value = value;\n  form.appendChild(input);\n}\n\nexport function prepareSandboxContainers(context: StoryContext) {\n  const docsSelector = `#anchor--${context.id} .docs-story`;\n  const rootElements = document.querySelectorAll(docsSelector);\n\n  if (!rootElements.length) {\n    throw new Error(`css selector: ${docsSelector}, doesn't exist `);\n  }\n\n  return Array.from(rootElements).map(rootElement => {\n    const showCodeButton = rootElement.querySelector('.docblock-code-toggle');\n    const container = showCodeButton?.parentElement;\n\n    if (!container) {\n      throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);\n    }\n\n    const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');\n\n    // remove button if it already existed\n    const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);\n    ourButtons.forEach(node => node.remove());\n\n    return {\n      container,\n      cssClasses: classList,\n    };\n  });\n}\n\nconst addonConfigDefaults = { requiredDependencies: {}, optionalDependencies: {} };\nexport type Data = Pick<Required<ParametersConfig>, 'provider' | 'bundler'> & {\n  storyFile: string;\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  storyExportToken: string;\n  dependencies: Record<string, string>;\n  title: string;\n  description: string;\n};\n\nexport function prepareData(context: StoryContext): Data | null {\n  if (!context.parameters.exportToSandbox) {\n    throw new Error('exportToSandbox config parameter cannot be empty');\n  }\n\n  const addonConfig: Required<ParametersConfig> = {\n    ...addonConfigDefaults,\n    ...context.parameters.exportToSandbox,\n  };\n  const { provider, bundler } = addonConfig;\n  const storyFile = context.parameters?.fullSource;\n\n  if (!storyFile) {\n    console.error(\n      dedent`Export to Sandbox Addon: Couldn't find source for story ${context.title}. Did you install the babel plugin?`,\n    );\n    return null;\n  }\n\n  const { requiredDependencies, optionalDependencies } = addonConfig;\n  const dependencies = getDependencies(storyFile, requiredDependencies, optionalDependencies);\n\n  const title = 'FluentUI React v9';\n  const description = `Story demo: ${context.title} - ${context.name}`;\n\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  const storyExportToken = context.originalStoryFn.name.split('_stories_').slice(-1).pop();\n  if (!storyExportToken) {\n    throw new Error('issues processing story export token');\n  }\n\n  const demoData = {\n    storyFile,\n    storyExportToken,\n    provider,\n    bundler,\n    dependencies,\n    title,\n    description,\n  };\n\n  return demoData;\n}\n"],"names":["dedent","getDependencies","addHiddenInput","form","name","value","input","document","createElement","type","appendChild","prepareSandboxContainers","context","docsSelector","id","rootElements","querySelectorAll","length","Error","Array","from","map","rootElement","showCodeButton","querySelector","container","parentElement","classList","split","ourButtons","forEach","node","remove","cssClasses","addonConfigDefaults","requiredDependencies","optionalDependencies","prepareData","parameters","exportToSandbox","addonConfig","provider","bundler","storyFile","fullSource","console","error","title","dependencies","description","storyExportToken","originalStoryFn","slice","pop","demoData"],"mappings":"AAAA,OAAOA,YAAY,SAAS;AAE5B,SAASC,eAAe,QAAQ,oBAAoB;AAKpD,OAAO,SAASC,eAAeC,IAAqB,EAAEC,IAAY,EAAEC,KAAa;IAC/E,MAAMC,QAAQC,SAASC,aAAa,CAAC;IACrCF,MAAMG,IAAI,GAAG;IACbH,MAAMF,IAAI,GAAGA;IACbE,MAAMD,KAAK,GAAGA;IACdF,KAAKO,WAAW,CAACJ;AACnB;AAEA,OAAO,SAASK,yBAAyBC,OAAqB;IAC5D,MAAMC,eAAe,CAAC,SAAS,EAAED,QAAQE,EAAE,CAAC,YAAY,CAAC;IACzD,MAAMC,eAAeR,SAASS,gBAAgB,CAACH;IAE/C,IAAI,CAACE,aAAaE,MAAM,EAAE;QACxB,MAAM,IAAIC,MAAM,CAAC,cAAc,EAAEL,aAAa,gBAAgB,CAAC;IACjE;IAEA,OAAOM,MAAMC,IAAI,CAACL,cAAcM,GAAG,CAACC,CAAAA;QAClC,MAAMC,iBAAiBD,YAAYE,aAAa,CAAC;QACjD,MAAMC,YAAYF,2BAAAA,qCAAAA,eAAgBG,aAAa;QAE/C,IAAI,CAACD,WAAW;YACd,MAAM,IAAIP,MAAM,CAAC,qDAAqD,CAAC;QACzE;QAEA,MAAMS,YAAY,AAACJ,CAAAA,eAAeI,SAAS,CAACtB,KAAK,GAAG,2BAA0B,EAAGuB,KAAK,CAAC;QAEvF,sCAAsC;QACtC,MAAMC,aAAaJ,UAAUT,gBAAgB,CAAC,CAAC,yBAAyB,CAAC;QACzEa,WAAWC,OAAO,CAACC,CAAAA,OAAQA,KAAKC,MAAM;QAEtC,OAAO;YACLP;YACAQ,YAAYN;QACd;IACF;AACF;AAEA,MAAMO,sBAAsB;IAAEC,sBAAsB,CAAC;IAAGC,sBAAsB,CAAC;AAAE;AAejF,OAAO,SAASC,YAAYzB,OAAqB;QAU7BA;IATlB,IAAI,CAACA,QAAQ0B,UAAU,CAACC,eAAe,EAAE;QACvC,MAAM,IAAIrB,MAAM;IAClB;IAEA,MAAMsB,cAA0C;QAC9C,GAAGN,mBAAmB;QACtB,GAAGtB,QAAQ0B,UAAU,CAACC,eAAe;IACvC;IACA,MAAM,EAAEE,QAAQ,EAAEC,OAAO,EAAE,GAAGF;IAC9B,MAAMG,aAAY/B,sBAAAA,QAAQ0B,UAAU,cAAlB1B,0CAAAA,oBAAoBgC,UAAU;IAEhD,IAAI,CAACD,WAAW;QACdE,QAAQC,KAAK,CACX9C,MAAM,CAAC,wDAAwD,EAAEY,QAAQmC,KAAK,CAAC,mCAAmC,CAAC;QAErH,OAAO;IACT;IAEA,MAAM,EAAEZ,oBAAoB,EAAEC,oBAAoB,EAAE,GAAGI;IACvD,MAAMQ,eAAe/C,gBAAgB0C,WAAWR,sBAAsBC;IAEtE,MAAMW,QAAQ;IACd,MAAME,cAAc,CAAC,YAAY,EAAErC,QAAQmC,KAAK,CAAC,GAAG,EAAEnC,QAAQR,IAAI,EAAE;IAEpE,2EAA2E;IAC3E,kEAAkE;IAClE,mEAAmE;IACnE,oFAAoF;IACpF,yBAAyB;IACzB,qFAAqF;IACrF,MAAM8C,mBAAmBtC,QAAQuC,eAAe,CAAC/C,IAAI,CAACwB,KAAK,CAAC,aAAawB,KAAK,CAAC,CAAC,GAAGC,GAAG;IACtF,IAAI,CAACH,kBAAkB;QACrB,MAAM,IAAIhC,MAAM;IAClB;IAEA,MAAMoC,WAAW;QACfX;QACAO;QACAT;QACAC;QACAM;QACAD;QACAE;IACF;IAEA,OAAOK;AACT"}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { StoryContext as StoryContextOrigin, Parameters } from '@storybook/react';\nimport type { ParametersExtension, PresetConfig } from './public-types';\n\nexport interface StoryContext extends StoryContextOrigin {\n  parameters: Parameters & ParametersExtension;\n}\n\nexport type { ParametersExtension, PresetConfig };\n"],"names":[],"mappings":"AAOA,WAAkD"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { StoryContext as StoryContextOrigin, Parameters } from '@storybook/react-webpack5';\nimport type { ParametersExtension, PresetConfig } from './public-types';\n\nexport interface StoryContext extends StoryContextOrigin {\n  parameters: Parameters & ParametersExtension;\n}\n\nexport type { ParametersExtension, PresetConfig };\n"],"names":[],"mappings":"AAOA,WAAkD"}

package/lib-commonjs/decorators/with-export-to-sandbox-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/decorators/with-export-to-sandbox-button.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\n\nimport { addDemoActionButton } from '../sandbox-factory';\nimport type { StoryContext } from '../types';\n\nexport const withExportToSandboxButton = (storyFn: (context: StoryContext) => JSXElement, context: StoryContext) => {\n  if (context.viewMode === 'docs') {\n    addDemoActionButton(context);\n  }\n\n  return storyFn(context);\n};\n"],"names":["withExportToSandboxButton","storyFn","context","viewMode","addDemoActionButton"],"mappings":";;;;+BAKaA;;;eAAAA;;;gCAHuB;AAG7B,MAAMA,4BAA4B,CAACC,SAAgDC;IACxF,IAAIA,QAAQC,QAAQ,KAAK,QAAQ;QAC/BC,IAAAA,mCAAmB,EAACF;IACtB;IAEA,OAAOD,QAAQC;AACjB"}
+{"version":3,"sources":["../src/decorators/with-export-to-sandbox-button.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\n\nimport { addDemoActionButton } from '../sandbox-factory';\nimport type { StoryContext } from '../types';\n\n/**\n * Decorator to add \"Export to Sandbox\" button in Storybook Docs view\n *\n * @param storyFn - original story function\n * @param context - story context\n * @returns - decorated story\n */\nexport const withExportToSandboxButton = (storyFn: (context: StoryContext) => JSXElement, context: StoryContext) => {\n  if (context.viewMode === 'docs') {\n    addDemoActionButton(context);\n  }\n\n  return storyFn(context);\n};\n"],"names":["withExportToSandboxButton","storyFn","context","viewMode","addDemoActionButton"],"mappings":";;;;+BAYaA;;;eAAAA;;;gCAVuB;AAU7B,MAAMA,4BAA4B,CAACC,SAAgDC;IACxF,IAAIA,QAAQC,QAAQ,KAAK,QAAQ;QAC/BC,IAAAA,mCAAmB,EAACF;IACtB;IAEA,OAAOD,QAAQC;AACjB"}

package/lib-commonjs/index.js

@@ -2,3 +2,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "withExportToSandboxButton", {
+    enumerable: true,
+    get: function() {
+        return _withexporttosandboxbutton.withExportToSandboxButton;
+    }
+});
+const _withexporttosandboxbutton = require("./decorators/with-export-to-sandbox-button");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { withExportToSandboxButton } from './decorators/with-export-to-sandbox-button';\n"],"names":["withExportToSandboxButton"],"mappings":";;;;+BAASA;;;eAAAA,oDAAyB;;;2CAAQ"}

package/lib-commonjs/preset/preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Parameters } from '@storybook/react';\nimport type { StoryContextForEnhancers } from '@storybook/csf';\n\nimport { withExportToSandboxButton } from '../decorators/with-export-to-sandbox-button';\n\nexport const decorators = [withExportToSandboxButton];\n\nexport const parameters: Parameters = {\n  docs: {\n    source: {\n      /**\n       * Override source code shown within \"Show Code\" Docs tab.\n       * @see https://github.com/storybookjs/storybook/blob/release-6-5/addons/docs/docs/recipes.md#customizing-source-snippets\n       */\n      transform: (source: string, storyContext: StoryContextForEnhancers) => {\n        // This config renders story source generated via `fullSource` parameter that is being added by @fluentui/babel-preset-storybook-full-source plugin, which is registered as part of this preset\n        return storyContext.parameters.fullSource;\n      },\n    },\n  },\n};\n"],"names":["decorators","parameters","withExportToSandboxButton","docs","source","transform","storyContext","fullSource"],"mappings":";;;;;;;;;;;IAKaA,UAAU;eAAVA;;IAEAC,UAAU;eAAVA;;;2CAJ6B;AAEnC,MAAMD,aAAa;IAACE,oDAAyB;CAAC;AAE9C,MAAMD,aAAyB;IACpCE,MAAM;QACJC,QAAQ;YACN;;;OAGC,GACDC,WAAW,CAACD,QAAgBE;gBAC1B,+LAA+L;gBAC/L,OAAOA,aAAaL,UAAU,CAACM,UAAU;YAC3C;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Parameters } from '@storybook/react-webpack5';\nimport type { StoryContextForEnhancers } from 'storybook/internal/csf';\n\nimport { withExportToSandboxButton } from '../decorators/with-export-to-sandbox-button';\n\nexport const decorators = [withExportToSandboxButton];\n\nexport const parameters: Parameters = {\n  docs: {\n    source: {\n      /**\n       * Override source code shown within \"Show Code\" Docs tab.\n       * @see https://github.com/storybookjs/storybook/blob/release-6-5/addons/docs/docs/recipes.md#customizing-source-snippets\n       */\n      transform: (source: string, storyContext: StoryContextForEnhancers) => {\n        // This config renders story source generated via `fullSource` parameter that is being added by @fluentui/babel-preset-storybook-full-source plugin, which is registered as part of this preset\n        return storyContext.parameters.fullSource;\n      },\n    },\n  },\n};\n"],"names":["decorators","parameters","withExportToSandboxButton","docs","source","transform","storyContext","fullSource"],"mappings":";;;;;;;;;;;IAKaA,UAAU;eAAVA;;IAEAC,UAAU;eAAVA;;;2CAJ6B;AAEnC,MAAMD,aAAa;IAACE,oDAAyB;CAAC;AAE9C,MAAMD,aAAyB;IACpCE,MAAM;QACJC,QAAQ;YACN;;;OAGC,GACDC,WAAW,CAACD,QAAgBE;gBAC1B,+LAA+L;gBAC/L,OAAOA,aAAaL,UAAU,CAACM,UAAU;YAC3C;QACF;IACF;AACF"}

package/lib-commonjs/sandbox-factory.js

@@ -36,12 +36,13 @@ const actionConfig = {
     }
 };
 function addDemoActionButton(context) {
-    const { container, cssClasses } = (0, _sandboxutils.prepareSandboxContainer)(context);
     const config = (0, _sandboxutils.prepareData)(context);
     if (!config) {
         throw new Error('issues with data');
     }
-    addActionButton(container, config, cssClasses);
+    (0, _sandboxutils.prepareSandboxContainers)(context).forEach(({ container, cssClasses })=>{
+        addActionButton(container, config, cssClasses);
+    });
 }
 function addActionButton(container, config, classList) {
     const files = _sandboxscaffold.scaffold[config.bundler](config);

package/lib-commonjs/sandbox-factory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sandbox-factory.ts"],"sourcesContent":["import { getParameters } from 'codesandbox-import-utils/lib/api/define';\n\nimport { scaffold } from './sandbox-scaffold';\nimport { addHiddenInput, prepareData, prepareSandboxContainer, type Data } from './sandbox-utils';\nimport { StoryContext } from './types';\n\nconst defaultFileToPreview = encodeURIComponent('src/example.tsx');\n\nconst actionConfig = {\n  'codesandbox-cloud': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'codesandbox-browser': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'stackblitz-cloud': {\n    label: 'Stackblitz',\n    factory: (files: Record<string, string>, config: Data) => openStackblitz({ files, ...config }),\n  },\n};\n\nexport function addDemoActionButton(context: StoryContext) {\n  const { container, cssClasses } = prepareSandboxContainer(context);\n  const config = prepareData(context);\n  if (!config) {\n    throw new Error('issues with data');\n  }\n\n  addActionButton(container, config, cssClasses);\n}\n\nfunction addActionButton(container: HTMLElement, config: Data, classList: string[]) {\n  const files = scaffold[config.bundler](config);\n  const action = actionConfig[config.provider];\n\n  const button = document.createElement('button');\n  button.classList.add(...classList);\n  button.textContent = `Open in ${action.label}`;\n\n  container?.prepend(button);\n\n  button.addEventListener('click', _ev => {\n    action.factory(files, config);\n  });\n}\n\n/**\n *\n * @see https://developer.stackblitz.com/docs/platform/post-api/\n */\nfunction openStackblitz(data: { files: Record<string, string> } & Data) {\n  const { files, description, title } = data;\n  const form = document.createElement('form');\n  form.method = 'post';\n  form.target = '_blank';\n  form.action = `https://stackblitz.com/run?file=${defaultFileToPreview}`;\n  // node template - boots web-container\n  addHiddenInput(form, 'project[template]', 'node');\n  addHiddenInput(form, 'project[title]', title);\n  addHiddenInput(form, 'project[description]', `# ${description}`);\n\n  Object.keys(files).forEach(key => {\n    const value = files[key];\n    addHiddenInput(form, `project[files][${key}]`, value);\n  });\n\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n\n/**\n *\n * @see https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api\n */\nfunction openCodeSandbox({ files, provider }: { files: Record<string, string> } & Data) {\n  const normalizedFilesApi = Object.entries(files).reduce((acc, current) => {\n    acc[current[0]] = { isBinary: false, content: current[1] };\n    return acc;\n  }, {} as Record<string, { content: string; isBinary: boolean }>);\n\n  const env = provider === 'codesandbox-cloud' ? 'server' : 'browser';\n  const parameters = getParameters({ files: normalizedFilesApi });\n\n  const form = document.createElement('form');\n  form.method = 'POST';\n  form.target = '_blank';\n  form.action = `https://codesandbox.io/api/v1/sandboxes/define?environment=${env}`;\n\n  addHiddenInput(form, 'parameters', parameters);\n  addHiddenInput(form, 'query', `file=${defaultFileToPreview}`);\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n"],"names":["addDemoActionButton","defaultFileToPreview","encodeURIComponent","actionConfig","label","factory","files","config","openCodeSandbox","openStackblitz","context","container","cssClasses","prepareSandboxContainer","prepareData","Error","addActionButton","classList","scaffold","bundler","action","provider","button","document","createElement","add","textContent","prepend","addEventListener","_ev","data","description","title","form","method","target","addHiddenInput","Object","keys","forEach","key","value","body","appendChild","submit","removeChild","normalizedFilesApi","entries","reduce","acc","current","isBinary","content","env","parameters","getParameters"],"mappings":";;;;+BAuBgBA;;;eAAAA;;;wBAvBc;iCAEL;8BACuD;AAGhF,MAAMC,uBAAuBC,mBAAmB;AAEhD,MAAMC,eAAe;IACnB,qBAAqB;QACnBC,OAAO;QACPC,SAAS,CAACC,OAA+BC,SAAiBC,gBAAgB;gBAAEF;gBAAO,GAAGC,MAAM;YAAC;IAC/F;IACA,uBAAuB;QACrBH,OAAO;QACPC,SAAS,CAACC,OAA+BC,SAAiBC,gBAAgB;gBAAEF;gBAAO,GAAGC,MAAM;YAAC;IAC/F;IACA,oBAAoB;QAClBH,OAAO;QACPC,SAAS,CAACC,OAA+BC,SAAiBE,eAAe;gBAAEH;gBAAO,GAAGC,MAAM;YAAC;IAC9F;AACF;AAEO,SAASP,oBAAoBU,OAAqB;IACvD,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGC,IAAAA,qCAAuB,EAACH;IAC1D,MAAMH,SAASO,IAAAA,yBAAW,EAACJ;IAC3B,IAAI,CAACH,QAAQ;QACX,MAAM,IAAIQ,MAAM;IAClB;IAEAC,gBAAgBL,WAAWJ,QAAQK;AACrC;AAEA,SAASI,gBAAgBL,SAAsB,EAAEJ,MAAY,EAAEU,SAAmB;IAChF,MAAMX,QAAQY,yBAAQ,CAACX,OAAOY,OAAO,CAAC,CAACZ;IACvC,MAAMa,SAASjB,YAAY,CAACI,OAAOc,QAAQ,CAAC;IAE5C,MAAMC,SAASC,SAASC,aAAa,CAAC;IACtCF,OAAOL,SAAS,CAACQ,GAAG,IAAIR;IACxBK,OAAOI,WAAW,GAAG,CAAC,QAAQ,EAAEN,OAAOhB,KAAK,EAAE;IAE9CO,sBAAAA,gCAAAA,UAAWgB,OAAO,CAACL;IAEnBA,OAAOM,gBAAgB,CAAC,SAASC,CAAAA;QAC/BT,OAAOf,OAAO,CAACC,OAAOC;IACxB;AACF;AAEA;;;CAGC,GACD,SAASE,eAAeqB,IAA8C;IACpE,MAAM,EAAExB,KAAK,EAAEyB,WAAW,EAAEC,KAAK,EAAE,GAAGF;IACtC,MAAMG,OAAOV,SAASC,aAAa,CAAC;IACpCS,KAAKC,MAAM,GAAG;IACdD,KAAKE,MAAM,GAAG;IACdF,KAAKb,MAAM,GAAG,CAAC,gCAAgC,EAAEnB,sBAAsB;IACvE,sCAAsC;IACtCmC,IAAAA,4BAAc,EAACH,MAAM,qBAAqB;IAC1CG,IAAAA,4BAAc,EAACH,MAAM,kBAAkBD;IACvCI,IAAAA,4BAAc,EAACH,MAAM,wBAAwB,CAAC,EAAE,EAAEF,aAAa;IAE/DM,OAAOC,IAAI,CAAChC,OAAOiC,OAAO,CAACC,CAAAA;QACzB,MAAMC,QAAQnC,KAAK,CAACkC,IAAI;QACxBJ,IAAAA,4BAAc,EAACH,MAAM,CAAC,eAAe,EAAEO,IAAI,CAAC,CAAC,EAAEC;IACjD;IAEAlB,SAASmB,IAAI,CAACC,WAAW,CAACV;IAC1BA,KAAKW,MAAM;IACXrB,SAASmB,IAAI,CAACG,WAAW,CAACZ;AAC5B;AAEA;;;CAGC,GACD,SAASzB,gBAAgB,EAAEF,KAAK,EAAEe,QAAQ,EAA4C;IACpF,MAAMyB,qBAAqBT,OAAOU,OAAO,CAACzC,OAAO0C,MAAM,CAAC,CAACC,KAAKC;QAC5DD,GAAG,CAACC,OAAO,CAAC,EAAE,CAAC,GAAG;YAAEC,UAAU;YAAOC,SAASF,OAAO,CAAC,EAAE;QAAC;QACzD,OAAOD;IACT,GAAG,CAAC;IAEJ,MAAMI,MAAMhC,aAAa,sBAAsB,WAAW;IAC1D,MAAMiC,aAAaC,IAAAA,qBAAa,EAAC;QAAEjD,OAAOwC;IAAmB;IAE7D,MAAMb,OAAOV,SAASC,aAAa,CAAC;IACpCS,KAAKC,MAAM,GAAG;IACdD,KAAKE,MAAM,GAAG;IACdF,KAAKb,MAAM,GAAG,CAAC,2DAA2D,EAAEiC,KAAK;IAEjFjB,IAAAA,4BAAc,EAACH,MAAM,cAAcqB;IACnClB,IAAAA,4BAAc,EAACH,MAAM,SAAS,CAAC,KAAK,EAAEhC,sBAAsB;IAC5DsB,SAASmB,IAAI,CAACC,WAAW,CAACV;IAC1BA,KAAKW,MAAM;IACXrB,SAASmB,IAAI,CAACG,WAAW,CAACZ;AAC5B"}
+{"version":3,"sources":["../src/sandbox-factory.ts"],"sourcesContent":["import { getParameters } from 'codesandbox-import-utils/lib/api/define';\n\nimport { scaffold } from './sandbox-scaffold';\nimport { addHiddenInput, prepareData, prepareSandboxContainers, type Data } from './sandbox-utils';\nimport { StoryContext } from './types';\n\nconst defaultFileToPreview = encodeURIComponent('src/example.tsx');\n\nconst actionConfig = {\n  'codesandbox-cloud': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'codesandbox-browser': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'stackblitz-cloud': {\n    label: 'Stackblitz',\n    factory: (files: Record<string, string>, config: Data) => openStackblitz({ files, ...config }),\n  },\n};\n\nexport function addDemoActionButton(context: StoryContext) {\n  const config = prepareData(context);\n  if (!config) {\n    throw new Error('issues with data');\n  }\n\n  prepareSandboxContainers(context).forEach(({ container, cssClasses }) => {\n    addActionButton(container, config, cssClasses);\n  });\n}\n\nfunction addActionButton(container: HTMLElement, config: Data, classList: string[]) {\n  const files = scaffold[config.bundler](config);\n  const action = actionConfig[config.provider];\n\n  const button = document.createElement('button');\n  button.classList.add(...classList);\n  button.textContent = `Open in ${action.label}`;\n\n  container?.prepend(button);\n\n  button.addEventListener('click', _ev => {\n    action.factory(files, config);\n  });\n}\n\n/**\n *\n * @see https://developer.stackblitz.com/docs/platform/post-api/\n */\nfunction openStackblitz(data: { files: Record<string, string> } & Data) {\n  const { files, description, title } = data;\n  const form = document.createElement('form');\n  form.method = 'post';\n  form.target = '_blank';\n  form.action = `https://stackblitz.com/run?file=${defaultFileToPreview}`;\n  // node template - boots web-container\n  addHiddenInput(form, 'project[template]', 'node');\n  addHiddenInput(form, 'project[title]', title);\n  addHiddenInput(form, 'project[description]', `# ${description}`);\n\n  Object.keys(files).forEach(key => {\n    const value = files[key];\n    addHiddenInput(form, `project[files][${key}]`, value);\n  });\n\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n\n/**\n *\n * @see https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api\n */\nfunction openCodeSandbox({ files, provider }: { files: Record<string, string> } & Data) {\n  const normalizedFilesApi = Object.entries(files).reduce((acc, current) => {\n    acc[current[0]] = { isBinary: false, content: current[1] };\n    return acc;\n  }, {} as Record<string, { content: string; isBinary: boolean }>);\n\n  const env = provider === 'codesandbox-cloud' ? 'server' : 'browser';\n  const parameters = getParameters({ files: normalizedFilesApi });\n\n  const form = document.createElement('form');\n  form.method = 'POST';\n  form.target = '_blank';\n  form.action = `https://codesandbox.io/api/v1/sandboxes/define?environment=${env}`;\n\n  addHiddenInput(form, 'parameters', parameters);\n  addHiddenInput(form, 'query', `file=${defaultFileToPreview}`);\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n"],"names":["addDemoActionButton","defaultFileToPreview","encodeURIComponent","actionConfig","label","factory","files","config","openCodeSandbox","openStackblitz","context","prepareData","Error","prepareSandboxContainers","forEach","container","cssClasses","addActionButton","classList","scaffold","bundler","action","provider","button","document","createElement","add","textContent","prepend","addEventListener","_ev","data","description","title","form","method","target","addHiddenInput","Object","keys","key","value","body","appendChild","submit","removeChild","normalizedFilesApi","entries","reduce","acc","current","isBinary","content","env","parameters","getParameters"],"mappings":"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"}

package/lib-commonjs/sandbox-utils.js

@@ -15,8 +15,8 @@ _export(exports, {
     prepareData: function() {
         return prepareData;
     },
-    prepareSandboxContainer: function() {
-        return prepareSandboxContainer;
+    prepareSandboxContainers: function() {
+        return prepareSandboxContainers;
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
@@ -29,25 +29,27 @@ function addHiddenInput(form, name, value) {
     input.value = value;
     form.appendChild(input);
 }
-function prepareSandboxContainer(context) {
+function prepareSandboxContainers(context) {
     const docsSelector = `#anchor--${context.id} .docs-story`;
-    const rootElement = document.querySelector(docsSelector);
-    if (!rootElement) {
+    const rootElements = document.querySelectorAll(docsSelector);
+    if (!rootElements.length) {
         throw new Error(`css selector: ${docsSelector}, doesn't exist `);
     }
-    const showCodeButton = rootElement.querySelector('.docblock-code-toggle');
-    const container = showCodeButton === null || showCodeButton === void 0 ? void 0 : showCodeButton.parentElement;
-    if (!container) {
-        throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);
-    }
-    const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');
-    // remove button if it already existed
-    const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);
-    ourButtons.forEach((node)=>node.remove());
-    return {
-        container,
-        cssClasses: classList
-    };
+    return Array.from(rootElements).map((rootElement)=>{
+        const showCodeButton = rootElement.querySelector('.docblock-code-toggle');
+        const container = showCodeButton === null || showCodeButton === void 0 ? void 0 : showCodeButton.parentElement;
+        if (!container) {
+            throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);
+        }
+        const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');
+        // remove button if it already existed
+        const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);
+        ourButtons.forEach((node)=>node.remove());
+        return {
+            container,
+            cssClasses: classList
+        };
+    });
 }
 const addonConfigDefaults = {
     requiredDependencies: {},

package/lib-commonjs/sandbox-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sandbox-utils.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport { getDependencies } from './getDependencies';\nimport { StoryContext, ParametersExtension } from './types';\n\ntype ParametersConfig = NonNullable<ParametersExtension['exportToSandbox']>;\n\nexport function addHiddenInput(form: HTMLFormElement, name: string, value: string) {\n  const input = document.createElement('input');\n  input.type = 'hidden';\n  input.name = name;\n  input.value = value;\n  form.appendChild(input);\n}\n\nexport function prepareSandboxContainer(context: StoryContext) {\n  const docsSelector = `#anchor--${context.id} .docs-story`;\n  const rootElement = document.querySelector(docsSelector);\n\n  if (!rootElement) {\n    throw new Error(`css selector: ${docsSelector}, doesn't exist `);\n  }\n\n  const showCodeButton = rootElement.querySelector('.docblock-code-toggle');\n  const container = showCodeButton?.parentElement;\n\n  if (!container) {\n    throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);\n  }\n\n  const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');\n\n  // remove button if it already existed\n  const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);\n  ourButtons.forEach(node => node.remove());\n\n  return {\n    container,\n    cssClasses: classList,\n  };\n}\n\nconst addonConfigDefaults = { requiredDependencies: {}, optionalDependencies: {} };\nexport type Data = Pick<Required<ParametersConfig>, 'provider' | 'bundler'> & {\n  storyFile: string;\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  storyExportToken: string;\n  dependencies: Record<string, string>;\n  title: string;\n  description: string;\n};\n\nexport function prepareData(context: StoryContext): Data | null {\n  if (!context.parameters.exportToSandbox) {\n    throw new Error('exportToSandbox config parameter cannot be empty');\n  }\n\n  const addonConfig: Required<ParametersConfig> = {\n    ...addonConfigDefaults,\n    ...context.parameters.exportToSandbox,\n  };\n  const { provider, bundler } = addonConfig;\n  const storyFile = context.parameters?.fullSource;\n\n  if (!storyFile) {\n    console.error(\n      dedent`Export to Sandbox Addon: Couldn't find source for story ${context.title}. Did you install the babel plugin?`,\n    );\n    return null;\n  }\n\n  const { requiredDependencies, optionalDependencies } = addonConfig;\n  const dependencies = getDependencies(storyFile, requiredDependencies, optionalDependencies);\n\n  const title = 'FluentUI React v9';\n  const description = `Story demo: ${context.title} - ${context.name}`;\n\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  const storyExportToken = context.originalStoryFn.name.split('_stories_').slice(-1).pop();\n  if (!storyExportToken) {\n    throw new Error('issues processing story export token');\n  }\n\n  const demoData = {\n    storyFile,\n    storyExportToken,\n    provider,\n    bundler,\n    dependencies,\n    title,\n    description,\n  };\n\n  return demoData;\n}\n"],"names":["addHiddenInput","prepareData","prepareSandboxContainer","form","name","value","input","document","createElement","type","appendChild","context","docsSelector","id","rootElement","querySelector","Error","showCodeButton","container","parentElement","classList","split","ourButtons","querySelectorAll","forEach","node","remove","cssClasses","addonConfigDefaults","requiredDependencies","optionalDependencies","parameters","exportToSandbox","addonConfig","provider","bundler","storyFile","fullSource","console","error","dedent","title","dependencies","getDependencies","description","storyExportToken","originalStoryFn","slice","pop","demoData"],"mappings":";;;;;;;;;;;IAOgBA,cAAc;eAAdA;;IAkDAC,WAAW;eAAXA;;IA1CAC,uBAAuB;eAAvBA;;;;iEAfG;iCAEa;AAKzB,SAASF,eAAeG,IAAqB,EAAEC,IAAY,EAAEC,KAAa;IAC/E,MAAMC,QAAQC,SAASC,aAAa,CAAC;IACrCF,MAAMG,IAAI,GAAG;IACbH,MAAMF,IAAI,GAAGA;IACbE,MAAMD,KAAK,GAAGA;IACdF,KAAKO,WAAW,CAACJ;AACnB;AAEO,SAASJ,wBAAwBS,OAAqB;IAC3D,MAAMC,eAAe,CAAC,SAAS,EAAED,QAAQE,EAAE,CAAC,YAAY,CAAC;IACzD,MAAMC,cAAcP,SAASQ,aAAa,CAACH;IAE3C,IAAI,CAACE,aAAa;QAChB,MAAM,IAAIE,MAAM,CAAC,cAAc,EAAEJ,aAAa,gBAAgB,CAAC;IACjE;IAEA,MAAMK,iBAAiBH,YAAYC,aAAa,CAAC;IACjD,MAAMG,YAAYD,2BAAAA,qCAAAA,eAAgBE,aAAa;IAE/C,IAAI,CAACD,WAAW;QACd,MAAM,IAAIF,MAAM,CAAC,qDAAqD,CAAC;IACzE;IAEA,MAAMI,YAAY,AAACH,CAAAA,eAAeG,SAAS,CAACf,KAAK,GAAG,2BAA0B,EAAGgB,KAAK,CAAC;IAEvF,sCAAsC;IACtC,MAAMC,aAAaJ,UAAUK,gBAAgB,CAAC,CAAC,yBAAyB,CAAC;IACzED,WAAWE,OAAO,CAACC,CAAAA,OAAQA,KAAKC,MAAM;IAEtC,OAAO;QACLR;QACAS,YAAYP;IACd;AACF;AAEA,MAAMQ,sBAAsB;IAAEC,sBAAsB,CAAC;IAAGC,sBAAsB,CAAC;AAAE;AAe1E,SAAS7B,YAAYU,OAAqB;QAU7BA;IATlB,IAAI,CAACA,QAAQoB,UAAU,CAACC,eAAe,EAAE;QACvC,MAAM,IAAIhB,MAAM;IAClB;IAEA,MAAMiB,cAA0C;QAC9C,GAAGL,mBAAmB;QACtB,GAAGjB,QAAQoB,UAAU,CAACC,eAAe;IACvC;IACA,MAAM,EAAEE,QAAQ,EAAEC,OAAO,EAAE,GAAGF;IAC9B,MAAMG,aAAYzB,sBAAAA,QAAQoB,UAAU,cAAlBpB,0CAAAA,oBAAoB0B,UAAU;IAEhD,IAAI,CAACD,WAAW;QACdE,QAAQC,KAAK,CACXC,IAAAA,eAAM,CAAA,CAAC,wDAAwD,EAAE7B,QAAQ8B,KAAK,CAAC,mCAAmC,CAAC;QAErH,OAAO;IACT;IAEA,MAAM,EAAEZ,oBAAoB,EAAEC,oBAAoB,EAAE,GAAGG;IACvD,MAAMS,eAAeC,IAAAA,gCAAe,EAACP,WAAWP,sBAAsBC;IAEtE,MAAMW,QAAQ;IACd,MAAMG,cAAc,CAAC,YAAY,EAAEjC,QAAQ8B,KAAK,CAAC,GAAG,EAAE9B,QAAQP,IAAI,EAAE;IAEpE,2EAA2E;IAC3E,kEAAkE;IAClE,mEAAmE;IACnE,oFAAoF;IACpF,yBAAyB;IACzB,qFAAqF;IACrF,MAAMyC,mBAAmBlC,QAAQmC,eAAe,CAAC1C,IAAI,CAACiB,KAAK,CAAC,aAAa0B,KAAK,CAAC,CAAC,GAAGC,GAAG;IACtF,IAAI,CAACH,kBAAkB;QACrB,MAAM,IAAI7B,MAAM;IAClB;IAEA,MAAMiC,WAAW;QACfb;QACAS;QACAX;QACAC;QACAO;QACAD;QACAG;IACF;IAEA,OAAOK;AACT"}
+{"version":3,"sources":["../src/sandbox-utils.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport { getDependencies } from './getDependencies';\nimport { StoryContext, ParametersExtension } from './types';\n\ntype ParametersConfig = NonNullable<ParametersExtension['exportToSandbox']>;\n\nexport function addHiddenInput(form: HTMLFormElement, name: string, value: string) {\n  const input = document.createElement('input');\n  input.type = 'hidden';\n  input.name = name;\n  input.value = value;\n  form.appendChild(input);\n}\n\nexport function prepareSandboxContainers(context: StoryContext) {\n  const docsSelector = `#anchor--${context.id} .docs-story`;\n  const rootElements = document.querySelectorAll(docsSelector);\n\n  if (!rootElements.length) {\n    throw new Error(`css selector: ${docsSelector}, doesn't exist `);\n  }\n\n  return Array.from(rootElements).map(rootElement => {\n    const showCodeButton = rootElement.querySelector('.docblock-code-toggle');\n    const container = showCodeButton?.parentElement;\n\n    if (!container) {\n      throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);\n    }\n\n    const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');\n\n    // remove button if it already existed\n    const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);\n    ourButtons.forEach(node => node.remove());\n\n    return {\n      container,\n      cssClasses: classList,\n    };\n  });\n}\n\nconst addonConfigDefaults = { requiredDependencies: {}, optionalDependencies: {} };\nexport type Data = Pick<Required<ParametersConfig>, 'provider' | 'bundler'> & {\n  storyFile: string;\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  storyExportToken: string;\n  dependencies: Record<string, string>;\n  title: string;\n  description: string;\n};\n\nexport function prepareData(context: StoryContext): Data | null {\n  if (!context.parameters.exportToSandbox) {\n    throw new Error('exportToSandbox config parameter cannot be empty');\n  }\n\n  const addonConfig: Required<ParametersConfig> = {\n    ...addonConfigDefaults,\n    ...context.parameters.exportToSandbox,\n  };\n  const { provider, bundler } = addonConfig;\n  const storyFile = context.parameters?.fullSource;\n\n  if (!storyFile) {\n    console.error(\n      dedent`Export to Sandbox Addon: Couldn't find source for story ${context.title}. Did you install the babel plugin?`,\n    );\n    return null;\n  }\n\n  const { requiredDependencies, optionalDependencies } = addonConfig;\n  const dependencies = getDependencies(storyFile, requiredDependencies, optionalDependencies);\n\n  const title = 'FluentUI React v9';\n  const description = `Story demo: ${context.title} - ${context.name}`;\n\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  const storyExportToken = context.originalStoryFn.name.split('_stories_').slice(-1).pop();\n  if (!storyExportToken) {\n    throw new Error('issues processing story export token');\n  }\n\n  const demoData = {\n    storyFile,\n    storyExportToken,\n    provider,\n    bundler,\n    dependencies,\n    title,\n    description,\n  };\n\n  return demoData;\n}\n"],"names":["addHiddenInput","prepareData","prepareSandboxContainers","form","name","value","input","document","createElement","type","appendChild","context","docsSelector","id","rootElements","querySelectorAll","length","Error","Array","from","map","rootElement","showCodeButton","querySelector","container","parentElement","classList","split","ourButtons","forEach","node","remove","cssClasses","addonConfigDefaults","requiredDependencies","optionalDependencies","parameters","exportToSandbox","addonConfig","provider","bundler","storyFile","fullSource","console","error","dedent","title","dependencies","getDependencies","description","storyExportToken","originalStoryFn","slice","pop","demoData"],"mappings":";;;;;;;;;;;IAOgBA,cAAc;eAAdA;;IAoDAC,WAAW;eAAXA;;IA5CAC,wBAAwB;eAAxBA;;;;iEAfG;iCAEa;AAKzB,SAASF,eAAeG,IAAqB,EAAEC,IAAY,EAAEC,KAAa;IAC/E,MAAMC,QAAQC,SAASC,aAAa,CAAC;IACrCF,MAAMG,IAAI,GAAG;IACbH,MAAMF,IAAI,GAAGA;IACbE,MAAMD,KAAK,GAAGA;IACdF,KAAKO,WAAW,CAACJ;AACnB;AAEO,SAASJ,yBAAyBS,OAAqB;IAC5D,MAAMC,eAAe,CAAC,SAAS,EAAED,QAAQE,EAAE,CAAC,YAAY,CAAC;IACzD,MAAMC,eAAeP,SAASQ,gBAAgB,CAACH;IAE/C,IAAI,CAACE,aAAaE,MAAM,EAAE;QACxB,MAAM,IAAIC,MAAM,CAAC,cAAc,EAAEL,aAAa,gBAAgB,CAAC;IACjE;IAEA,OAAOM,MAAMC,IAAI,CAACL,cAAcM,GAAG,CAACC,CAAAA;QAClC,MAAMC,iBAAiBD,YAAYE,aAAa,CAAC;QACjD,MAAMC,YAAYF,2BAAAA,qCAAAA,eAAgBG,aAAa;QAE/C,IAAI,CAACD,WAAW;YACd,MAAM,IAAIP,MAAM,CAAC,qDAAqD,CAAC;QACzE;QAEA,MAAMS,YAAY,AAACJ,CAAAA,eAAeI,SAAS,CAACrB,KAAK,GAAG,2BAA0B,EAAGsB,KAAK,CAAC;QAEvF,sCAAsC;QACtC,MAAMC,aAAaJ,UAAUT,gBAAgB,CAAC,CAAC,yBAAyB,CAAC;QACzEa,WAAWC,OAAO,CAACC,CAAAA,OAAQA,KAAKC,MAAM;QAEtC,OAAO;YACLP;YACAQ,YAAYN;QACd;IACF;AACF;AAEA,MAAMO,sBAAsB;IAAEC,sBAAsB,CAAC;IAAGC,sBAAsB,CAAC;AAAE;AAe1E,SAASlC,YAAYU,OAAqB;QAU7BA;IATlB,IAAI,CAACA,QAAQyB,UAAU,CAACC,eAAe,EAAE;QACvC,MAAM,IAAIpB,MAAM;IAClB;IAEA,MAAMqB,cAA0C;QAC9C,GAAGL,mBAAmB;QACtB,GAAGtB,QAAQyB,UAAU,CAACC,eAAe;IACvC;IACA,MAAM,EAAEE,QAAQ,EAAEC,OAAO,EAAE,GAAGF;IAC9B,MAAMG,aAAY9B,sBAAAA,QAAQyB,UAAU,cAAlBzB,0CAAAA,oBAAoB+B,UAAU;IAEhD,IAAI,CAACD,WAAW;QACdE,QAAQC,KAAK,CACXC,IAAAA,eAAM,CAAA,CAAC,wDAAwD,EAAElC,QAAQmC,KAAK,CAAC,mCAAmC,CAAC;QAErH,OAAO;IACT;IAEA,MAAM,EAAEZ,oBAAoB,EAAEC,oBAAoB,EAAE,GAAGG;IACvD,MAAMS,eAAeC,IAAAA,gCAAe,EAACP,WAAWP,sBAAsBC;IAEtE,MAAMW,QAAQ;IACd,MAAMG,cAAc,CAAC,YAAY,EAAEtC,QAAQmC,KAAK,CAAC,GAAG,EAAEnC,QAAQP,IAAI,EAAE;IAEpE,2EAA2E;IAC3E,kEAAkE;IAClE,mEAAmE;IACnE,oFAAoF;IACpF,yBAAyB;IACzB,qFAAqF;IACrF,MAAM8C,mBAAmBvC,QAAQwC,eAAe,CAAC/C,IAAI,CAACuB,KAAK,CAAC,aAAayB,KAAK,CAAC,CAAC,GAAGC,GAAG;IACtF,IAAI,CAACH,kBAAkB;QACrB,MAAM,IAAIjC,MAAM;IAClB;IAEA,MAAMqC,WAAW;QACfb;QACAS;QACAX;QACAC;QACAO;QACAD;QACAG;IACF;IAEA,OAAOK;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-storybook-addon-export-to-sandbox",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Storybook addon that enables cloud/web sandbox exports for stories doc mode code examples",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -10,10 +10,6 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts-api-extractor": "*"
-  },
   "dependencies": {
     "@swc/helpers": "^0.5.1",
     "babel-loader": "^9.1.3",
@@ -22,9 +18,7 @@
     "dedent": "^1.2.0"
   },
   "peerDependencies": {
-    "@storybook/manager-api": "^7.6.20",
-    "@storybook/preview-api": "^7.6.20",
-    "@storybook/react": "^7.6.20"
+    "@storybook/react": "^9.1.17"
   },
   "beachball": {
     "disallowedChangeTypes": [