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

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-storybook-addon-export-to-sandbox
 
-This log was last generated on Tue, 03 Mar 2026 13:15:59 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 14:06:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon-export-to-sandbox_v0.2.1)
+
+Wed, 01 Apr 2026 14:06:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon-export-to-sandbox_v0.2.0..@fluentui/react-storybook-addon-export-to-sandbox_v0.2.1)
+
+### Patches
+
+- fix: button selector issue to support SB 10 ([PR #35801](https://github.com/microsoft/fluentui/pull/35801) by vgenaev@gmail.com)
+- fix: ship public types and resolve cjs/esm issues for preset loader ([PR #35932](https://github.com/microsoft/fluentui/pull/35932) by martinhochel@microsoft.com)
+
 ## [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 
+Tue, 03 Mar 2026 13:16:27 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

package/README.md

@@ -30,7 +30,101 @@ module.exports = {
 
 ## Configuration
 
-The addon can be configured via the `exportToSandbox` parameter in your story's parameters:
+The addon can be configured at two levels:
+
+1. **Preset configuration** — passed via `.storybook/main.js` addon options (controls the build-time babel transform)
+2. **Parameters configuration** — passed via `.storybook/preview.ts` or per-story (controls runtime sandbox export behavior)
+
+### Preset Configuration (`.storybook/main.js`)
+
+Preset options configure how the addon transforms story source code at build time via `@fluentui/babel-preset-storybook-full-source`.
+
+```js
+// .storybook/main.ts
+
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { PresetConfig } from '@fluentui/react-storybook-addon-export-to-sandbox';
+
+const config: StorybookConfig = {
+  addons: [
+    {
+      name: '@fluentui/react-storybook-addon-export-to-sandbox',
+      options: {
+        /**
+         * Import mappings replace internal/private package imports with their public re-export package.
+         * Keys are package names to replace, values define the replacement.
+         */
+        importMappings: {
+          '@fluentui/react-button': { replace: '@fluentui/react-components' },
+          '@fluentui/react-text': { replace: '@fluentui/react-components' },
+        },
+        /**
+         * Optional: Override the default webpack rule for the babel loader.
+         */
+        webpackRule: {},
+        /**
+         * Optional: Modify the babel-loader options before they are applied.
+         */
+        babelLoaderOptionsUpdater: options => options,
+      } satisfies PresetConfig,
+    },
+  ],
+};
+```
+
+| Option                      | Type                                            | Description                                                                         |
+| --------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- |
+| `importMappings`            | `Record<string, { replace: string }>`           | Maps internal package imports to their public re-export package in generated source |
+| `webpackRule`               | `webpack.RuleSetRule`                           | Override the default webpack rule for the story babel loader                        |
+| `babelLoaderOptionsUpdater` | `(options: TransformOptions) => typeof options` | Transform babel-loader options before they are applied                              |
+
+### Styles
+
+The addon ships a CSS file for styling the export button in Storybook Docs. Import it in your `.storybook/preview.ts`:
+
+```ts
+// .storybook/preview.ts
+import '@fluentui/react-storybook-addon-export-to-sandbox/styles.css';
+```
+
+### Global Parameters Configuration (`.storybook/preview.ts`)
+
+Global parameters set the default sandbox export behavior for all stories.
+
+```ts
+// .storybook/preview.ts
+import '@fluentui/react-storybook-addon-export-to-sandbox/styles.css';
+
+import type { Preview } from '@storybook/react';
+import type { Parameters } from '@fluentui/react-storybook-addon-export-to-sandbox';
+
+const preview = {
+  parameters: {
+    exportToSandbox: {
+      provider: 'stackblitz-cloud',
+      bundler: 'vite',
+      requiredDependencies: {
+        react: '^18.0.0',
+        'react-dom': '^18.0.0',
+      },
+      optionalDependencies: {
+        '@fluentui/react-components': '^9.0.0',
+      },
+    },
+  } satisfies Parameters,
+} satisfies Preview;
+
+export default preview;
+```
+
+| Option                 | Type                                                                 | Required | Description                                                |
+| ---------------------- | -------------------------------------------------------------------- | -------- | ---------------------------------------------------------- |
+| `provider`             | `'codesandbox-cloud' \| 'codesandbox-browser' \| 'stackblitz-cloud'` | Yes      | Which sandbox provider to use for the export               |
+| `bundler`              | `'vite' \| 'cra'`                                                    | Yes      | Which bundler template to scaffold in the sandbox          |
+| `requiredDependencies` | `Record<string, string>`                                             | No       | Dependencies always included in the sandbox `package.json` |
+| `optionalDependencies` | `Record<string, string>`                                             | No       | Dependencies included only when detected in story imports  |
+
+### Local (Per Story) Configuration
 
 ```js
 export const MyStory = () => <MyComponent />;

package/dist/index.d.ts

@@ -1,6 +1,14 @@
+import { BabelPluginOptions } from '@fluentui/babel-preset-storybook-full-source';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { Parameters as Parameters_2 } from '@storybook/react-webpack5';
+import type { Parameters as Parameters_3 } from '@storybook/react-webpack5';
+import { RuleSetRule } from 'webpack';
 import type { StoryContext as StoryContext_2 } from '@storybook/react-webpack5';
+import { TransformOptions } from '@babel/core';
+
+declare interface Parameters_2 {
+    exportToSandbox?: ParametersConfig;
+}
+export { Parameters_2 as Parameters }
 
 /**
  * NOTE:
@@ -15,12 +23,14 @@ declare interface ParametersConfig {
     bundler: 'vite' | 'cra';
 }
 
-declare interface ParametersExtension {
-    exportToSandbox?: ParametersConfig;
+export declare interface PresetConfig {
+    importMappings: BabelPluginOptions;
+    webpackRule?: RuleSetRule;
+    babelLoaderOptionsUpdater?: (value: TransformOptions) => typeof value;
 }
 
 declare interface StoryContext extends StoryContext_2 {
-    parameters: Parameters_2 & ParametersExtension;
+    parameters: Parameters_3 & Parameters_2;
 }
 
 /**

package/dist/styles.css

@@ -0,0 +1,47 @@
+/* Remove z-index from "show code" button container */
+/* https://github.com/microsoft/fluentui/issues/22773 */
+.docs-story > div:nth-child(2) {
+  z-index: auto;
+}
+
+#storybook-docs .docblock-code-toggle,
+.docs-story .with-code-sandbox-button {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  min-width: 91px;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  line-height: 150% !important;
+  color: #201f1e !important;
+  text-align: center !important;
+  justify-content: center !important;
+  letter-spacing: -0.01em !important;
+  background: #f8f8f8 !important;
+  border: none !important;
+  /* box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25) !important; */
+  border-radius: 5px 5px 0px 0px !important;
+}
+
+.docs-story .with-code-sandbox-button {
+  margin-right: 32px;
+}
+
+/* Reduce font size of CodeSandbox and Show Code button when zoomed or small window width*/
+/* https://github.com/microsoft/fluentui/issues/22764 */
+
+@media screen and (max-width: 380px) {
+  #storybook-docs .docblock-code-toggle,
+  .docs-story .with-code-sandbox-button {
+    font-size: 10px !important;
+  }
+}
+
+/* Make storybook codesandbox export button match Figma design */
+.docs-story .with-code-sandbox-button {
+  right: 105px !important;
+}
+
+.docs-story .with-code-sandbox-button:focus {
+  outline: none;
+  box-shadow: #1ea7fd 0 -3px 0 0 inset;
+}

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

@@ -6,8 +6,6 @@ import { addDemoActionButton } from '../sandbox-factory';
  * @param context - story context
  * @returns - decorated story
  */ export const withExportToSandboxButton = (storyFn, context)=>{
-    if (context.viewMode === 'docs') {
-        addDemoActionButton(context);
-    }
+    if (context.viewMode === 'docs') addDemoActionButton(context);
     return storyFn(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\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"}
+{"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,QACvBJ,oBAAoBG;IAGtB,OAAOD,QAAQC;AACjB,EAAE"}

package/lib/getDependencies.js

@@ -2,9 +2,7 @@ const IMPORT_PATH_REGEX = /from ['"](.*?)['"];/g;
 function matchAll(str, re) {
     let match = null;
     const matches = [];
-    while(match = re.exec(str)){
-        matches.push(match);
-    }
+    while(match = re.exec(str))matches.push(match);
     return matches;
 }
 /**
@@ -19,14 +17,10 @@ function matchAll(str, re) {
         const importPath = match[1];
         const isReactPath = importPath.startsWith('react/');
         const isRelativeImportPath = importPath.startsWith('.');
-        if (isReactPath || isRelativeImportPath) {
-            return dependencies;
-        }
+        if (isReactPath || isRelativeImportPath) return dependencies;
         const dependency = parsePackageName(importPath).name;
-        if (!dependencies.hasOwnProperty(dependency)) {
-            var _optionalDependencies_dependency;
-            dependencies[dependency] = (_optionalDependencies_dependency = optionalDependencies[dependency]) !== null && _optionalDependencies_dependency !== void 0 ? _optionalDependencies_dependency : 'latest';
-        }
+        var _optionalDependencies_dependency;
+        if (!dependencies.hasOwnProperty(dependency)) dependencies[dependency] = (_optionalDependencies_dependency = optionalDependencies[dependency]) !== null && _optionalDependencies_dependency !== void 0 ? _optionalDependencies_dependency : 'latest';
         return dependencies;
     }, {});
     return {
@@ -40,9 +34,7 @@ const RE_SCOPED = /^(@[^\/]+\/[^@\/]+)(?:@([^\/]+))?(\/.*)?$/;
 const RE_NON_SCOPED = /^([^@\/]+)(?:@([^\/]+))?(\/.*)?$/;
 function parsePackageName(input) {
     const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);
-    if (!m) {
-        throw new Error(`[parse-package-name] invalid package name: ${input}`);
-    }
+    if (!m) throw new Error(`[parse-package-name] invalid package name: ${input}`);
     return {
         name: m[1] || '',
         version: m[2] || 'latest',

package/lib/getDependencies.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/getDependencies.ts"],"sourcesContent":["type PackageDependencies = { [dependencyName: string]: string };\n\nconst IMPORT_PATH_REGEX = /from ['\"](.*?)['\"];/g;\n\nfunction matchAll(str: string, re: RegExp) {\n  let match: RegExpExecArray | null = null;\n  const matches: RegExpExecArray[] = [];\n\n  while ((match = re.exec(str))) {\n    matches.push(match);\n  }\n\n  return matches;\n}\n\n/**\n *\n * @param fileContent - code\n * @param requiredDependencies - dependencies that will always be included in package.json\n * @param optionalDependencies - whose versions will override those found in the code\n * @returns - Map of dependencies and their versions to include in package.json\n */\nexport const getDependencies = (\n  fileContent: string,\n  requiredDependencies: PackageDependencies,\n  optionalDependencies: PackageDependencies,\n) => {\n  const importPaths = matchAll(fileContent, IMPORT_PATH_REGEX);\n\n  const dependenciesInCode = importPaths.reduce((dependencies, match) => {\n    const importPath = match[1];\n    const isReactPath = importPath.startsWith('react/');\n    const isRelativeImportPath = importPath.startsWith('.');\n\n    if (isReactPath || isRelativeImportPath) {\n      return dependencies;\n    }\n\n    const dependency = parsePackageName(importPath).name;\n\n    if (!dependencies.hasOwnProperty(dependency)) {\n      dependencies[dependency] = optionalDependencies[dependency] ?? 'latest';\n    }\n\n    return dependencies;\n  }, {} as PackageDependencies);\n\n  return { ...dependenciesInCode, ...requiredDependencies };\n};\n\n// Parsed a scoped package name into name, version, and path.\nconst RE_SCOPED = /^(@[^\\/]+\\/[^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n// Parsed a non-scoped package name into name, version, path\nconst RE_NON_SCOPED = /^([^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n\nfunction parsePackageName(input: string) {\n  const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);\n\n  if (!m) {\n    throw new Error(`[parse-package-name] invalid package name: ${input}`);\n  }\n\n  return {\n    name: m[1] || '',\n    version: m[2] || 'latest',\n    path: m[3] || '',\n  };\n}\n"],"names":["IMPORT_PATH_REGEX","matchAll","str","re","match","matches","exec","push","getDependencies","fileContent","requiredDependencies","optionalDependencies","importPaths","dependenciesInCode","reduce","dependencies","importPath","isReactPath","startsWith","isRelativeImportPath","dependency","parsePackageName","name","hasOwnProperty","RE_SCOPED","RE_NON_SCOPED","input","m","Error","version","path"],"mappings":"AAEA,MAAMA,oBAAoB;AAE1B,SAASC,SAASC,GAAW,EAAEC,EAAU;IACvC,IAAIC,QAAgC;IACpC,MAAMC,UAA6B,EAAE;IAErC,MAAQD,QAAQD,GAAGG,IAAI,CAACJ,KAAO;QAC7BG,QAAQE,IAAI,CAACH;IACf;IAEA,OAAOC;AACT;AAEA;;;;;;CAMC,GACD,OAAO,MAAMG,kBAAkB,CAC7BC,aACAC,sBACAC;IAEA,MAAMC,cAAcX,SAASQ,aAAaT;IAE1C,MAAMa,qBAAqBD,YAAYE,MAAM,CAAC,CAACC,cAAcX;QAC3D,MAAMY,aAAaZ,KAAK,CAAC,EAAE;QAC3B,MAAMa,cAAcD,WAAWE,UAAU,CAAC;QAC1C,MAAMC,uBAAuBH,WAAWE,UAAU,CAAC;QAEnD,IAAID,eAAeE,sBAAsB;YACvC,OAAOJ;QACT;QAEA,MAAMK,aAAaC,iBAAiBL,YAAYM,IAAI;QAEpD,IAAI,CAACP,aAAaQ,cAAc,CAACH,aAAa;gBACjBT;YAA3BI,YAAY,CAACK,WAAW,GAAGT,CAAAA,mCAAAA,oBAAoB,CAACS,WAAW,cAAhCT,8CAAAA,mCAAoC;QACjE;QAEA,OAAOI;IACT,GAAG,CAAC;IAEJ,OAAO;QAAE,GAAGF,kBAAkB;QAAE,GAAGH,oBAAoB;IAAC;AAC1D,EAAE;AAEF,6DAA6D;AAC7D,MAAMc,YAAY;AAClB,4DAA4D;AAC5D,MAAMC,gBAAgB;AAEtB,SAASJ,iBAAiBK,KAAa;IACrC,MAAMC,IAAIH,UAAUlB,IAAI,CAACoB,UAAUD,cAAcnB,IAAI,CAACoB;IAEtD,IAAI,CAACC,GAAG;QACN,MAAM,IAAIC,MAAM,CAAC,2CAA2C,EAAEF,OAAO;IACvE;IAEA,OAAO;QACLJ,MAAMK,CAAC,CAAC,EAAE,IAAI;QACdE,SAASF,CAAC,CAAC,EAAE,IAAI;QACjBG,MAAMH,CAAC,CAAC,EAAE,IAAI;IAChB;AACF"}
+{"version":3,"sources":["../src/getDependencies.ts"],"sourcesContent":["type PackageDependencies = { [dependencyName: string]: string };\n\nconst IMPORT_PATH_REGEX = /from ['\"](.*?)['\"];/g;\n\nfunction matchAll(str: string, re: RegExp) {\n  let match: RegExpExecArray | null = null;\n  const matches: RegExpExecArray[] = [];\n\n  while ((match = re.exec(str))) {\n    matches.push(match);\n  }\n\n  return matches;\n}\n\n/**\n *\n * @param fileContent - code\n * @param requiredDependencies - dependencies that will always be included in package.json\n * @param optionalDependencies - whose versions will override those found in the code\n * @returns - Map of dependencies and their versions to include in package.json\n */\nexport const getDependencies = (\n  fileContent: string,\n  requiredDependencies: PackageDependencies,\n  optionalDependencies: PackageDependencies,\n) => {\n  const importPaths = matchAll(fileContent, IMPORT_PATH_REGEX);\n\n  const dependenciesInCode = importPaths.reduce((dependencies, match) => {\n    const importPath = match[1];\n    const isReactPath = importPath.startsWith('react/');\n    const isRelativeImportPath = importPath.startsWith('.');\n\n    if (isReactPath || isRelativeImportPath) {\n      return dependencies;\n    }\n\n    const dependency = parsePackageName(importPath).name;\n\n    if (!dependencies.hasOwnProperty(dependency)) {\n      dependencies[dependency] = optionalDependencies[dependency] ?? 'latest';\n    }\n\n    return dependencies;\n  }, {} as PackageDependencies);\n\n  return { ...dependenciesInCode, ...requiredDependencies };\n};\n\n// Parsed a scoped package name into name, version, and path.\nconst RE_SCOPED = /^(@[^\\/]+\\/[^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n// Parsed a non-scoped package name into name, version, path\nconst RE_NON_SCOPED = /^([^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n\nfunction parsePackageName(input: string) {\n  const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);\n\n  if (!m) {\n    throw new Error(`[parse-package-name] invalid package name: ${input}`);\n  }\n\n  return {\n    name: m[1] || '',\n    version: m[2] || 'latest',\n    path: m[3] || '',\n  };\n}\n"],"names":["IMPORT_PATH_REGEX","matchAll","str","re","match","matches","exec","push","getDependencies","fileContent","requiredDependencies","optionalDependencies","importPaths","dependenciesInCode","reduce","dependencies","importPath","isReactPath","startsWith","isRelativeImportPath","dependency","parsePackageName","name","hasOwnProperty","RE_SCOPED","RE_NON_SCOPED","input","m","Error","version","path"],"mappings":"AAEA,MAAMA,oBAAoB;AAE1B,SAASC,SAASC,GAAW,EAAEC,EAAU;IACvC,IAAIC,QAAgC;IACpC,MAAMC,UAA6B,EAAE;IAErC,MAAQD,QAAQD,GAAGG,IAAI,CAACJ,KACtBG,QAAQE,IAAI,CAACH;IAGf,OAAOC;AACT;AAEA;;;;;;CAMC,GACD,OAAO,MAAMG,kBAAkB,CAC7BC,aACAC,sBACAC;IAEA,MAAMC,cAAcX,SAASQ,aAAaT;IAE1C,MAAMa,qBAAqBD,YAAYE,MAAM,CAAC,CAACC,cAAcX;QAC3D,MAAMY,aAAaZ,KAAK,CAAC,EAAE;QAC3B,MAAMa,cAAcD,WAAWE,UAAU,CAAC;QAC1C,MAAMC,uBAAuBH,WAAWE,UAAU,CAAC;QAEnD,IAAID,eAAeE,sBACjB,OAAOJ;QAGT,MAAMK,aAAaC,iBAAiBL,YAAYM,IAAI;YAGvBX;QAD7B,IAAI,CAACI,aAAaQ,cAAc,CAACH,aAC/BL,YAAY,CAACK,WAAW,GAAGT,CAAAA,mCAAAA,oBAAoB,CAACS,WAAW,cAAhCT,8CAAAA,mCAAoC;QAGjE,OAAOI;IACT,GAAG,CAAC;IAEJ,OAAO;QAAE,GAAGF,kBAAkB;QAAE,GAAGH,oBAAoB;IAAC;AAC1D,EAAE;AAEF,6DAA6D;AAC7D,MAAMc,YAAY;AAClB,4DAA4D;AAC5D,MAAMC,gBAAgB;AAEtB,SAASJ,iBAAiBK,KAAa;IACrC,MAAMC,IAAIH,UAAUlB,IAAI,CAACoB,UAAUD,cAAcnB,IAAI,CAACoB;IAEtD,IAAI,CAACC,GACH,MAAM,IAAIC,MAAM,CAAC,2CAA2C,EAAEF,OAAO;IAGvE,OAAO;QACLJ,MAAMK,CAAC,CAAC,EAAE,IAAI;QACdE,SAASF,CAAC,CAAC,EAAE,IAAI;QACjBG,MAAMH,CAAC,CAAC,EAAE,IAAI;IAChB;AACF"}

package/lib/index.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { withExportToSandboxButton } from './decorators/with-export-to-sandbox-button';\n\nexport type { ParametersExtension as Parameters, PresetConfig } from './public-types';\n"],"names":["withExportToSandboxButton"],"mappings":"AAAA,SAASA,yBAAyB,QAAQ,6CAA6C"}

package/lib/sandbox-factory.js

@@ -27,9 +27,7 @@ const actionConfig = {
 };
 export function addDemoActionButton(context) {
     const config = prepareData(context);
-    if (!config) {
-        throw new Error('issues with data');
-    }
+    if (!config) throw new Error('issues with data');
     prepareSandboxContainers(context).forEach(({ container, cssClasses })=>{
         addActionButton(container, config, cssClasses);
     });

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, 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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"}
+{"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-scaffold.js

@@ -7,9 +7,7 @@ const commonDevDeps = {
 };
 export const scaffold = {
     vite: (data)=>{
-        if (data.provider === 'codesandbox-browser') {
-            throw new Error('vite is not supported on codesandbox-browser');
-        }
+        if (data.provider === 'codesandbox-browser') throw new Error('vite is not supported on codesandbox-browser');
         const base = {
             'index.html': Vite.getHTML(),
             'src/App.tsx': Vite.getApp(data),
@@ -20,12 +18,8 @@ export const scaffold = {
             'vite.config.ts': Vite.getViteCfg(),
             'package.json': Vite.getPkgJson(data)
         };
-        if (data.provider === 'stackblitz-cloud') {
-            Object.assign(base, getStackblitzConfig());
-        }
-        if (data.provider === 'codesandbox-cloud') {
-            Object.assign(base, getCodesandboxConfig('vite'));
-        }
+        if (data.provider === 'stackblitz-cloud') Object.assign(base, getStackblitzConfig());
+        if (data.provider === 'codesandbox-cloud') Object.assign(base, getCodesandboxConfig('vite'));
         return base;
     },
     cra: (data)=>{
@@ -37,12 +31,8 @@ export const scaffold = {
             'tsconfig.json': CRA.getTsconfig(),
             'package.json': CRA.getPkgJson(data)
         };
-        if (data.provider === 'stackblitz-cloud') {
-            Object.assign(base, getStackblitzConfig());
-        }
-        if (data.provider === 'codesandbox-cloud') {
-            Object.assign(base, getCodesandboxConfig('cra'));
-        }
+        if (data.provider === 'stackblitz-cloud') Object.assign(base, getStackblitzConfig());
+        if (data.provider === 'codesandbox-cloud') Object.assign(base, getCodesandboxConfig('cra'));
         return base;
     }
 };

package/lib/sandbox-scaffold.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sandbox-scaffold.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport type { Data } from './sandbox-utils';\nimport { serializeJson } from './utils';\n\nconst commonDevDeps = { '@types/react': '^17', '@types/react-dom': '^17', typescript: '~4.7.0' };\n\nexport const scaffold = {\n  vite: (data: Data): Record<string, string> => {\n    if (data.provider === 'codesandbox-browser') {\n      throw new Error('vite is not supported on codesandbox-browser');\n    }\n\n    const base = {\n      'index.html': Vite.getHTML(),\n      'src/App.tsx': Vite.getApp(data),\n      'src/index.tsx': Vite.getRootIndex(),\n      'src/example.tsx': Vite.getExample(data),\n      'tsconfig.json': Vite.getTsconfig(),\n      'tsconfig.node.json': Vite.getTsconfigNode(),\n      'vite.config.ts': Vite.getViteCfg(),\n      'package.json': Vite.getPkgJson(data),\n    };\n    if (data.provider === 'stackblitz-cloud') {\n      Object.assign(base, getStackblitzConfig());\n    }\n    if (data.provider === 'codesandbox-cloud') {\n      Object.assign(base, getCodesandboxConfig('vite'));\n    }\n    return base;\n  },\n  cra: (data: Data): Record<string, string> => {\n    const base = {\n      'public/index.html': CRA.getHTML(),\n      'src/App.tsx': CRA.getApp(data),\n      'src/index.tsx': CRA.getRootIndex(),\n      'src/example.tsx': CRA.getExample(data),\n      'tsconfig.json': CRA.getTsconfig(),\n      'package.json': CRA.getPkgJson(data),\n    };\n    if (data.provider === 'stackblitz-cloud') {\n      Object.assign(base, getStackblitzConfig());\n    }\n    if (data.provider === 'codesandbox-cloud') {\n      Object.assign(base, getCodesandboxConfig('cra'));\n    }\n\n    return base;\n  },\n};\n\nconst Vite = {\n  getHTML: () => dedent`\n  <!doctype html>\n  <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\" />\n      <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n      <title>Vite + React + TS</title>\n    </head>\n    <body>\n      <div id=\"root\"></div>\n      <script type=\"module\" src=\"/src/index.tsx\"></script>\n    </body>\n  </html>\n  `,\n  getRootIndex: getIndex,\n  getExample,\n  getApp,\n  getViteCfg: () => {\n    return dedent`\n      import { defineConfig } from 'vite'\n      import react from '@vitejs/plugin-react'\n\n      // https://vitejs.dev/config/\n      export default defineConfig({\n        plugins: [react()],\n      })\n    `;\n  },\n  getTsconfigNode: () => {\n    return serializeJson({\n      compilerOptions: {\n        composite: true,\n        skipLibCheck: true,\n        module: 'ESNext',\n        moduleResolution: 'bundler',\n        allowSyntheticDefaultImports: true,\n      },\n      include: ['vite.config.ts'],\n    });\n  },\n  getTsconfig: () => {\n    return serializeJson({\n      compilerOptions: {\n        target: 'ES2020',\n        useDefineForClassFields: true,\n        lib: ['ES2020', 'DOM', 'DOM.Iterable'],\n        module: 'ESNext',\n        skipLibCheck: true,\n\n        /* Bundler mode */\n        moduleResolution: 'node',\n        // moduleResolution: 'bundler',\n        allowImportingTsExtensions: true,\n        resolveJsonModule: true,\n        isolatedModules: true,\n        noEmit: true,\n        jsx: 'react-jsx',\n\n        /* Linting */\n        strict: true,\n        noUnusedLocals: true,\n        noUnusedParameters: true,\n        noFallthroughCasesInSwitch: true,\n      },\n      include: ['src'],\n      references: [{ path: './tsconfig.node.json' }],\n    });\n  },\n  getPkgJson: (data: Data) => {\n    return serializeJson({\n      name: 'vite-react-typescript-starter',\n      private: true,\n      version: '0.0.0',\n      type: 'module',\n      scripts: {\n        dev: 'vite',\n        build: 'tsc && vite build',\n        preview: 'vite preview',\n      },\n      dependencies: {\n        ...data.dependencies,\n      },\n      devDependencies: {\n        ...commonDevDeps,\n        '@vitejs/plugin-react': '^4.2.0',\n        vite: '^5.0.0',\n      },\n    });\n  },\n};\n\nconst CRA = {\n  getHTML: () => `<div id=\"root\"></div>`,\n  getRootIndex: getIndex,\n  getExample,\n  getApp,\n  getTsconfig: () =>\n    serializeJson({\n      include: ['./src/**/*'],\n      compilerOptions: {\n        strict: true,\n        esModuleInterop: true,\n        lib: ['dom', 'es2015'],\n        jsx: 'react-jsx',\n      },\n    }),\n  getPkgJson: (data: Data) => {\n    return serializeJson({\n      main: 'src/index.tsx',\n      dependencies: {\n        ...data.dependencies,\n      },\n      devDependencies: {\n        ...commonDevDeps,\n        'react-scripts': '^5.0.0',\n        '@babel/plugin-proposal-private-property-in-object': 'latest',\n      },\n      scripts: {\n        start: 'react-scripts start',\n        build: 'react-scripts build',\n        test: 'react-scripts test --env=jsdom',\n        eject: 'react-scripts eject',\n      },\n      browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n    });\n  },\n};\n\nfunction getCodesandboxConfig(kind: 'cra' | 'vite') {\n  const startConfig = {\n    cra: { command: 'yarn start', preview: { port: 3000 } },\n    vite: { command: 'yarn dev', preview: { port: 5173 } },\n  };\n  return {\n    '.devcontainer/devcontainer.json': serializeJson({\n      name: 'Devcontainer',\n      build: {\n        dockerfile: './Dockerfile',\n      },\n    }),\n    '.devcontainer/Dockerfile': `FROM node:16-bullseye`,\n    '.codesandbox/tasks.json': serializeJson({\n      // These tasks will run in order when initializing your CodeSandbox project.\n      setupTasks: [\n        {\n          name: 'Install Dependencies',\n          command: 'yarn install',\n        },\n      ],\n\n      // These tasks can be run from CodeSandbox. Running one will open a log in the app.\n      tasks: {\n        dev: {\n          name: 'dev',\n          runAtStart: true,\n          ...startConfig[kind],\n        },\n        build: {\n          name: 'build',\n          command: 'yarn build',\n          runAtStart: false,\n        },\n        preview: {\n          name: 'preview',\n          command: 'yarn preview',\n          runAtStart: false,\n        },\n      },\n    }),\n  };\n}\n\nfunction getStackblitzConfig() {\n  return {\n    '.stackblitzrc': serializeJson({}),\n  };\n}\n\nfunction getIndex() {\n  return dedent`\n    import * as React from 'react';\n    import { createRoot } from 'react-dom/client';\n    import App from './App';\n\n    const root = createRoot(document.getElementById('root') as HTMLElement);\n\n    root.render(\n      <React.StrictMode>\n        <App />\n      </React.StrictMode>,\n    );\n  `;\n}\n\nfunction getExample(demoData: Data) {\n  return demoData.storyFile;\n}\n\nfunction getApp(data: Data) {\n  const code = dedent`\n    import { FluentProvider, webLightTheme } from '@fluentui/react-components';\n    import { ${data.storyExportToken} as Example } from './example';\n\n    const App = () => {\n        return (\n          <FluentProvider theme={webLightTheme}>\n            <Example />\n          </FluentProvider>\n        );\n    };\n\n    export default App;\n  `;\n\n  return code;\n}\n"],"names":["dedent","serializeJson","commonDevDeps","typescript","scaffold","vite","data","provider","Error","base","Vite","getHTML","getApp","getRootIndex","getExample","getTsconfig","getTsconfigNode","getViteCfg","getPkgJson","Object","assign","getStackblitzConfig","getCodesandboxConfig","cra","CRA","getIndex","compilerOptions","composite","skipLibCheck","module","moduleResolution","allowSyntheticDefaultImports","include","target","useDefineForClassFields","lib","allowImportingTsExtensions","resolveJsonModule","isolatedModules","noEmit","jsx","strict","noUnusedLocals","noUnusedParameters","noFallthroughCasesInSwitch","references","path","name","private","version","type","scripts","dev","build","preview","dependencies","devDependencies","esModuleInterop","main","start","test","eject","browserslist","kind","startConfig","command","port","dockerfile","setupTasks","tasks","runAtStart","demoData","storyFile","code","storyExportToken"],"mappings":"AAAA,OAAOA,YAAY,SAAS;AAG5B,SAASC,aAAa,QAAQ,UAAU;AAExC,MAAMC,gBAAgB;IAAE,gBAAgB;IAAO,oBAAoB;IAAOC,YAAY;AAAS;AAE/F,OAAO,MAAMC,WAAW;IACtBC,MAAM,CAACC;QACL,IAAIA,KAAKC,QAAQ,KAAK,uBAAuB;YAC3C,MAAM,IAAIC,MAAM;QAClB;QAEA,MAAMC,OAAO;YACX,cAAcC,KAAKC,OAAO;YAC1B,eAAeD,KAAKE,MAAM,CAACN;YAC3B,iBAAiBI,KAAKG,YAAY;YAClC,mBAAmBH,KAAKI,UAAU,CAACR;YACnC,iBAAiBI,KAAKK,WAAW;YACjC,sBAAsBL,KAAKM,eAAe;YAC1C,kBAAkBN,KAAKO,UAAU;YACjC,gBAAgBP,KAAKQ,UAAU,CAACZ;QAClC;QACA,IAAIA,KAAKC,QAAQ,KAAK,oBAAoB;YACxCY,OAAOC,MAAM,CAACX,MAAMY;QACtB;QACA,IAAIf,KAAKC,QAAQ,KAAK,qBAAqB;YACzCY,OAAOC,MAAM,CAACX,MAAMa,qBAAqB;QAC3C;QACA,OAAOb;IACT;IACAc,KAAK,CAACjB;QACJ,MAAMG,OAAO;YACX,qBAAqBe,IAAIb,OAAO;YAChC,eAAea,IAAIZ,MAAM,CAACN;YAC1B,iBAAiBkB,IAAIX,YAAY;YACjC,mBAAmBW,IAAIV,UAAU,CAACR;YAClC,iBAAiBkB,IAAIT,WAAW;YAChC,gBAAgBS,IAAIN,UAAU,CAACZ;QACjC;QACA,IAAIA,KAAKC,QAAQ,KAAK,oBAAoB;YACxCY,OAAOC,MAAM,CAACX,MAAMY;QACtB;QACA,IAAIf,KAAKC,QAAQ,KAAK,qBAAqB;YACzCY,OAAOC,MAAM,CAACX,MAAMa,qBAAqB;QAC3C;QAEA,OAAOb;IACT;AACF,EAAE;AAEF,MAAMC,OAAO;IACXC,SAAS,IAAMX,MAAM,CAAC;;;;;;;;;;;;;;EActB,CAAC;IACDa,cAAcY;IACdX;IACAF;IACAK,YAAY;QACV,OAAOjB,MAAM,CAAC;;;;;;;;IAQd,CAAC;IACH;IACAgB,iBAAiB;QACf,OAAOf,cAAc;YACnByB,iBAAiB;gBACfC,WAAW;gBACXC,cAAc;gBACdC,QAAQ;gBACRC,kBAAkB;gBAClBC,8BAA8B;YAChC;YACAC,SAAS;gBAAC;aAAiB;QAC7B;IACF;IACAjB,aAAa;QACX,OAAOd,cAAc;YACnByB,iBAAiB;gBACfO,QAAQ;gBACRC,yBAAyB;gBACzBC,KAAK;oBAAC;oBAAU;oBAAO;iBAAe;gBACtCN,QAAQ;gBACRD,cAAc;gBAEd,gBAAgB,GAChBE,kBAAkB;gBAClB,+BAA+B;gBAC/BM,4BAA4B;gBAC5BC,mBAAmB;gBACnBC,iBAAiB;gBACjBC,QAAQ;gBACRC,KAAK;gBAEL,WAAW,GACXC,QAAQ;gBACRC,gBAAgB;gBAChBC,oBAAoB;gBACpBC,4BAA4B;YAC9B;YACAZ,SAAS;gBAAC;aAAM;YAChBa,YAAY;gBAAC;oBAAEC,MAAM;gBAAuB;aAAE;QAChD;IACF;IACA5B,YAAY,CAACZ;QACX,OAAOL,cAAc;YACnB8C,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,MAAM;YACNC,SAAS;gBACPC,KAAK;gBACLC,OAAO;gBACPC,SAAS;YACX;YACAC,cAAc;gBACZ,GAAGjD,KAAKiD,YAAY;YACtB;YACAC,iBAAiB;gBACf,GAAGtD,aAAa;gBAChB,wBAAwB;gBACxBG,MAAM;YACR;QACF;IACF;AACF;AAEA,MAAMmB,MAAM;IACVb,SAAS,IAAM,CAAC,qBAAqB,CAAC;IACtCE,cAAcY;IACdX;IACAF;IACAG,aAAa,IACXd,cAAc;YACZ+B,SAAS;gBAAC;aAAa;YACvBN,iBAAiB;gBACfe,QAAQ;gBACRgB,iBAAiB;gBACjBtB,KAAK;oBAAC;oBAAO;iBAAS;gBACtBK,KAAK;YACP;QACF;IACFtB,YAAY,CAACZ;QACX,OAAOL,cAAc;YACnByD,MAAM;YACNH,cAAc;gBACZ,GAAGjD,KAAKiD,YAAY;YACtB;YACAC,iBAAiB;gBACf,GAAGtD,aAAa;gBAChB,iBAAiB;gBACjB,qDAAqD;YACvD;YACAiD,SAAS;gBACPQ,OAAO;gBACPN,OAAO;gBACPO,MAAM;gBACNC,OAAO;YACT;YACAC,cAAc;gBAAC;gBAAS;gBAAY;gBAAgB;aAAkB;QACxE;IACF;AACF;AAEA,SAASxC,qBAAqByC,IAAoB;IAChD,MAAMC,cAAc;QAClBzC,KAAK;YAAE0C,SAAS;YAAcX,SAAS;gBAAEY,MAAM;YAAK;QAAE;QACtD7D,MAAM;YAAE4D,SAAS;YAAYX,SAAS;gBAAEY,MAAM;YAAK;QAAE;IACvD;IACA,OAAO;QACL,mCAAmCjE,cAAc;YAC/C8C,MAAM;YACNM,OAAO;gBACLc,YAAY;YACd;QACF;QACA,4BAA4B,CAAC,qBAAqB,CAAC;QACnD,2BAA2BlE,cAAc;YACvC,4EAA4E;YAC5EmE,YAAY;gBACV;oBACErB,MAAM;oBACNkB,SAAS;gBACX;aACD;YAED,mFAAmF;YACnFI,OAAO;gBACLjB,KAAK;oBACHL,MAAM;oBACNuB,YAAY;oBACZ,GAAGN,WAAW,CAACD,KAAK;gBACtB;gBACAV,OAAO;oBACLN,MAAM;oBACNkB,SAAS;oBACTK,YAAY;gBACd;gBACAhB,SAAS;oBACPP,MAAM;oBACNkB,SAAS;oBACTK,YAAY;gBACd;YACF;QACF;IACF;AACF;AAEA,SAASjD;IACP,OAAO;QACL,iBAAiBpB,cAAc,CAAC;IAClC;AACF;AAEA,SAASwB;IACP,OAAOzB,MAAM,CAAC;;;;;;;;;;;;EAYd,CAAC;AACH;AAEA,SAASc,WAAWyD,QAAc;IAChC,OAAOA,SAASC,SAAS;AAC3B;AAEA,SAAS5D,OAAON,IAAU;IACxB,MAAMmE,OAAOzE,MAAM,CAAC;;aAET,EAAEM,KAAKoE,gBAAgB,CAAC;;;;;;;;;;;EAWnC,CAAC;IAED,OAAOD;AACT"}
+{"version":3,"sources":["../src/sandbox-scaffold.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport type { Data } from './sandbox-utils';\nimport { serializeJson } from './utils';\n\nconst commonDevDeps = { '@types/react': '^17', '@types/react-dom': '^17', typescript: '~4.7.0' };\n\nexport const scaffold = {\n  vite: (data: Data): Record<string, string> => {\n    if (data.provider === 'codesandbox-browser') {\n      throw new Error('vite is not supported on codesandbox-browser');\n    }\n\n    const base = {\n      'index.html': Vite.getHTML(),\n      'src/App.tsx': Vite.getApp(data),\n      'src/index.tsx': Vite.getRootIndex(),\n      'src/example.tsx': Vite.getExample(data),\n      'tsconfig.json': Vite.getTsconfig(),\n      'tsconfig.node.json': Vite.getTsconfigNode(),\n      'vite.config.ts': Vite.getViteCfg(),\n      'package.json': Vite.getPkgJson(data),\n    };\n    if (data.provider === 'stackblitz-cloud') {\n      Object.assign(base, getStackblitzConfig());\n    }\n    if (data.provider === 'codesandbox-cloud') {\n      Object.assign(base, getCodesandboxConfig('vite'));\n    }\n    return base;\n  },\n  cra: (data: Data): Record<string, string> => {\n    const base = {\n      'public/index.html': CRA.getHTML(),\n      'src/App.tsx': CRA.getApp(data),\n      'src/index.tsx': CRA.getRootIndex(),\n      'src/example.tsx': CRA.getExample(data),\n      'tsconfig.json': CRA.getTsconfig(),\n      'package.json': CRA.getPkgJson(data),\n    };\n    if (data.provider === 'stackblitz-cloud') {\n      Object.assign(base, getStackblitzConfig());\n    }\n    if (data.provider === 'codesandbox-cloud') {\n      Object.assign(base, getCodesandboxConfig('cra'));\n    }\n\n    return base;\n  },\n};\n\nconst Vite = {\n  getHTML: () => dedent`\n  <!doctype html>\n  <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\" />\n      <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n      <title>Vite + React + TS</title>\n    </head>\n    <body>\n      <div id=\"root\"></div>\n      <script type=\"module\" src=\"/src/index.tsx\"></script>\n    </body>\n  </html>\n  `,\n  getRootIndex: getIndex,\n  getExample,\n  getApp,\n  getViteCfg: () => {\n    return dedent`\n      import { defineConfig } from 'vite'\n      import react from '@vitejs/plugin-react'\n\n      // https://vitejs.dev/config/\n      export default defineConfig({\n        plugins: [react()],\n      })\n    `;\n  },\n  getTsconfigNode: () => {\n    return serializeJson({\n      compilerOptions: {\n        composite: true,\n        skipLibCheck: true,\n        module: 'ESNext',\n        moduleResolution: 'bundler',\n        allowSyntheticDefaultImports: true,\n      },\n      include: ['vite.config.ts'],\n    });\n  },\n  getTsconfig: () => {\n    return serializeJson({\n      compilerOptions: {\n        target: 'ES2020',\n        useDefineForClassFields: true,\n        lib: ['ES2020', 'DOM', 'DOM.Iterable'],\n        module: 'ESNext',\n        skipLibCheck: true,\n\n        /* Bundler mode */\n        moduleResolution: 'node',\n        // moduleResolution: 'bundler',\n        allowImportingTsExtensions: true,\n        resolveJsonModule: true,\n        isolatedModules: true,\n        noEmit: true,\n        jsx: 'react-jsx',\n\n        /* Linting */\n        strict: true,\n        noUnusedLocals: true,\n        noUnusedParameters: true,\n        noFallthroughCasesInSwitch: true,\n      },\n      include: ['src'],\n      references: [{ path: './tsconfig.node.json' }],\n    });\n  },\n  getPkgJson: (data: Data) => {\n    return serializeJson({\n      name: 'vite-react-typescript-starter',\n      private: true,\n      version: '0.0.0',\n      type: 'module',\n      scripts: {\n        dev: 'vite',\n        build: 'tsc && vite build',\n        preview: 'vite preview',\n      },\n      dependencies: {\n        ...data.dependencies,\n      },\n      devDependencies: {\n        ...commonDevDeps,\n        '@vitejs/plugin-react': '^4.2.0',\n        vite: '^5.0.0',\n      },\n    });\n  },\n};\n\nconst CRA = {\n  getHTML: () => `<div id=\"root\"></div>`,\n  getRootIndex: getIndex,\n  getExample,\n  getApp,\n  getTsconfig: () =>\n    serializeJson({\n      include: ['./src/**/*'],\n      compilerOptions: {\n        strict: true,\n        esModuleInterop: true,\n        lib: ['dom', 'es2015'],\n        jsx: 'react-jsx',\n      },\n    }),\n  getPkgJson: (data: Data) => {\n    return serializeJson({\n      main: 'src/index.tsx',\n      dependencies: {\n        ...data.dependencies,\n      },\n      devDependencies: {\n        ...commonDevDeps,\n        'react-scripts': '^5.0.0',\n        '@babel/plugin-proposal-private-property-in-object': 'latest',\n      },\n      scripts: {\n        start: 'react-scripts start',\n        build: 'react-scripts build',\n        test: 'react-scripts test --env=jsdom',\n        eject: 'react-scripts eject',\n      },\n      browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n    });\n  },\n};\n\nfunction getCodesandboxConfig(kind: 'cra' | 'vite') {\n  const startConfig = {\n    cra: { command: 'yarn start', preview: { port: 3000 } },\n    vite: { command: 'yarn dev', preview: { port: 5173 } },\n  };\n  return {\n    '.devcontainer/devcontainer.json': serializeJson({\n      name: 'Devcontainer',\n      build: {\n        dockerfile: './Dockerfile',\n      },\n    }),\n    '.devcontainer/Dockerfile': `FROM node:16-bullseye`,\n    '.codesandbox/tasks.json': serializeJson({\n      // These tasks will run in order when initializing your CodeSandbox project.\n      setupTasks: [\n        {\n          name: 'Install Dependencies',\n          command: 'yarn install',\n        },\n      ],\n\n      // These tasks can be run from CodeSandbox. Running one will open a log in the app.\n      tasks: {\n        dev: {\n          name: 'dev',\n          runAtStart: true,\n          ...startConfig[kind],\n        },\n        build: {\n          name: 'build',\n          command: 'yarn build',\n          runAtStart: false,\n        },\n        preview: {\n          name: 'preview',\n          command: 'yarn preview',\n          runAtStart: false,\n        },\n      },\n    }),\n  };\n}\n\nfunction getStackblitzConfig() {\n  return {\n    '.stackblitzrc': serializeJson({}),\n  };\n}\n\nfunction getIndex() {\n  return dedent`\n    import * as React from 'react';\n    import { createRoot } from 'react-dom/client';\n    import App from './App';\n\n    const root = createRoot(document.getElementById('root') as HTMLElement);\n\n    root.render(\n      <React.StrictMode>\n        <App />\n      </React.StrictMode>,\n    );\n  `;\n}\n\nfunction getExample(demoData: Data) {\n  return demoData.storyFile;\n}\n\nfunction getApp(data: Data) {\n  const code = dedent`\n    import { FluentProvider, webLightTheme } from '@fluentui/react-components';\n    import { ${data.storyExportToken} as Example } from './example';\n\n    const App = () => {\n        return (\n          <FluentProvider theme={webLightTheme}>\n            <Example />\n          </FluentProvider>\n        );\n    };\n\n    export default App;\n  `;\n\n  return code;\n}\n"],"names":["dedent","serializeJson","commonDevDeps","typescript","scaffold","vite","data","provider","Error","base","Vite","getHTML","getApp","getRootIndex","getExample","getTsconfig","getTsconfigNode","getViteCfg","getPkgJson","Object","assign","getStackblitzConfig","getCodesandboxConfig","cra","CRA","getIndex","compilerOptions","composite","skipLibCheck","module","moduleResolution","allowSyntheticDefaultImports","include","target","useDefineForClassFields","lib","allowImportingTsExtensions","resolveJsonModule","isolatedModules","noEmit","jsx","strict","noUnusedLocals","noUnusedParameters","noFallthroughCasesInSwitch","references","path","name","private","version","type","scripts","dev","build","preview","dependencies","devDependencies","esModuleInterop","main","start","test","eject","browserslist","kind","startConfig","command","port","dockerfile","setupTasks","tasks","runAtStart","demoData","storyFile","code","storyExportToken"],"mappings":"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"}

package/lib/sandbox-utils.js

@@ -8,17 +8,17 @@ export function addHiddenInput(form, name, value) {
     form.appendChild(input);
 }
 export function prepareSandboxContainers(context) {
-    const docsSelector = `#anchor--${context.id} .docs-story`;
+    // Support anchor ID formats for our Storybook major versions range.
+    // 10< `#anchor--{id}`
+    // >=10 `#anchor--primary--{id}`
+    // See: https://github.com/storybookjs/storybook/pull/33384
+    const docsSelector = `#anchor--${context.id} .docs-story, #anchor--primary--${context.id} .docs-story`;
     const rootElements = document.querySelectorAll(docsSelector);
-    if (!rootElements.length) {
-        throw new Error(`css selector: ${docsSelector}, doesn't exist `);
-    }
+    if (!rootElements.length) throw new Error(`css selector: ${docsSelector}, doesn't exist `);
     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 `);
-        }
+        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`);
@@ -35,9 +35,7 @@ const addonConfigDefaults = {
 };
 export function prepareData(context) {
     var _context_parameters;
-    if (!context.parameters.exportToSandbox) {
-        throw new Error('exportToSandbox config parameter cannot be empty');
-    }
+    if (!context.parameters.exportToSandbox) throw new Error('exportToSandbox config parameter cannot be empty');
     const addonConfig = {
         ...addonConfigDefaults,
         ...context.parameters.exportToSandbox
@@ -59,9 +57,7 @@ export function prepareData(context) {
     // just get the "Default"
     // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?
     const storyExportToken = context.originalStoryFn.name.split('_stories_').slice(-1).pop();
-    if (!storyExportToken) {
-        throw new Error('issues processing story export token');
-    }
+    if (!storyExportToken) throw new Error('issues processing story export token');
     const demoData = {
         storyFile,
         storyExportToken,

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 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"}
+{"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  // Support anchor ID formats for our Storybook major versions range.\n  // 10< `#anchor--{id}`\n  // >=10 `#anchor--primary--{id}`\n  // See: https://github.com/storybookjs/storybook/pull/33384\n  const docsSelector = `#anchor--${context.id} .docs-story, #anchor--primary--${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,oEAAoE;IACpE,sBAAsB;IACtB,gCAAgC;IAChC,2DAA2D;IAC3D,MAAMC,eAAe,CAAC,SAAS,EAAED,QAAQE,EAAE,CAAC,gCAAgC,EAAEF,QAAQE,EAAE,CAAC,YAAY,CAAC;IACtG,MAAMC,eAAeR,SAASS,gBAAgB,CAACH;IAE/C,IAAI,CAACE,aAAaE,MAAM,EACtB,MAAM,IAAIC,MAAM,CAAC,cAAc,EAAEL,aAAa,gBAAgB,CAAC;IAGjE,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,WACH,MAAM,IAAIP,MAAM,CAAC,qDAAqD,CAAC;QAGzE,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,EACrC,MAAM,IAAIrB,MAAM;IAGlB,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,IAAIC,GAAG;IACtF,IAAI,CAACH,kBACH,MAAM,IAAIhC,MAAM;IAGlB,MAAMoC,WAAW;QACfX;QACAO;QACAT;QACAC;QACAM;QACAD;QACAE;IACF;IAEA,OAAOK;AACT"}

package/lib/webpack.js

@@ -14,7 +14,7 @@ const defaultOptions = {
     webpackRule: {},
     babelLoaderOptionsUpdater: identity
 };
-const PLUGIN_PATH = process.env.NODE_ENV !== 'production' ? '@fluentui/babel-preset-storybook-full-source/__dev' : '@fluentui/babel-preset-storybook-full-source';
+const PLUGIN_PATH = '@fluentui/babel-preset-storybook-full-source';
 function createBabelLoaderRule(config) {
     const { babelLoaderOptionsUpdater, importMappings, webpackRule } = config;
     const plugin = [

package/lib/webpack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/webpack.ts"],"sourcesContent":["import type { PresetConfig } from './types';\n\ntype WebpackFinalFn = NonNullable<import('@storybook/react-webpack5').StorybookConfig['webpackFinal']>;\nexport type WebpackFinalConfig = Parameters<WebpackFinalFn>[0];\nexport type WebpackFinalOptions = Parameters<WebpackFinalFn>[1];\n\nexport function webpack(config: WebpackFinalConfig, options: WebpackFinalOptions) {\n  const addonPresetConfig = getAddonOptions(options);\n\n  registerRules({ config, rules: [createBabelLoaderRule(addonPresetConfig)] });\n\n  return config;\n}\n\nconst identity = <T extends unknown>(value: T) => value;\nconst addonFilePattern = /react-storybook-addon-export-to-sandbox\\/[a-z/]+.[jt]s$/;\nconst defaultOptions = {\n  webpackRule: {},\n  babelLoaderOptionsUpdater: identity,\n};\n\nconst PLUGIN_PATH =\n  process.env.NODE_ENV !== 'production'\n    ? '@fluentui/babel-preset-storybook-full-source/__dev'\n    : '@fluentui/babel-preset-storybook-full-source';\n\nfunction createBabelLoaderRule(config: Required<PresetConfig>): import('webpack').RuleSetRule {\n  const { babelLoaderOptionsUpdater, importMappings, webpackRule } = config;\n\n  const plugin = [require.resolve(PLUGIN_PATH), importMappings];\n\n  return {\n    test: /\\.stories\\.(jsx?$|tsx?$)/,\n    ...webpackRule,\n    /**\n     * why the usage of 'post' ? - we need to run this loader after all storybook webpack rules/loaders have been executed.\n     * while we can use Array.prototype.unshift to \"override\" the indexes this approach is more declarative without additional hacks.\n     */\n    enforce: 'post',\n    use: {\n      /**\n       * Custom babel loader wraps the original babel-loader and fixes the incorrect `inputSourceMap` parameter\n       * that is passed to babel-loader.\n       **/\n      loader: require.resolve('./custom-babel-loader'),\n      options: babelLoaderOptionsUpdater({\n        plugins: [plugin],\n      }),\n    },\n  };\n}\n\n/**\n *\n * register custom Webpack Rules to webpack config\n */\nfunction registerRules(options: { rules: import('webpack').RuleSetRule[]; config: import('webpack').Configuration }) {\n  const { config, rules } = options;\n  config.module = config.module ?? {};\n  config.module.rules = config.module.rules ?? [];\n  config.module.rules.push(...rules);\n\n  return config;\n}\n\nfunction getAddonOptions(options: WebpackFinalOptions): Required<PresetConfig> {\n  const presetRegistration = options.presetsList?.find(preset => {\n    return addonFilePattern.test(preset.name);\n  });\n\n  const addonOptions = presetRegistration?.options ?? {};\n\n  return { ...defaultOptions, ...addonOptions };\n}\n"],"names":["webpack","config","options","addonPresetConfig","getAddonOptions","registerRules","rules","createBabelLoaderRule","identity","value","addonFilePattern","defaultOptions","webpackRule","babelLoaderOptionsUpdater","PLUGIN_PATH","process","env","NODE_ENV","importMappings","plugin","require","resolve","test","enforce","use","loader","plugins","module","push","presetRegistration","presetsList","find","preset","name","addonOptions"],"mappings":"AAMA,OAAO,SAASA,QAAQC,MAA0B,EAAEC,OAA4B;IAC9E,MAAMC,oBAAoBC,gBAAgBF;IAE1CG,cAAc;QAAEJ;QAAQK,OAAO;YAACC,sBAAsBJ;SAAmB;IAAC;IAE1E,OAAOF;AACT;AAEA,MAAMO,WAAW,CAAoBC,QAAaA;AAClD,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;IACrBC,aAAa,CAAC;IACdC,2BAA2BL;AAC7B;AAEA,MAAMM,cACJC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eACrB,uDACA;AAEN,SAASV,sBAAsBN,MAA8B;IAC3D,MAAM,EAAEY,yBAAyB,EAAEK,cAAc,EAAEN,WAAW,EAAE,GAAGX;IAEnE,MAAMkB,SAAS;QAACC,QAAQC,OAAO,CAACP;QAAcI;KAAe;IAE7D,OAAO;QACLI,MAAM;QACN,GAAGV,WAAW;QACd;;;KAGC,GACDW,SAAS;QACTC,KAAK;YACH;;;QAGE,GACFC,QAAQL,QAAQC,OAAO,CAAC;YACxBnB,SAASW,0BAA0B;gBACjCa,SAAS;oBAACP;iBAAO;YACnB;QACF;IACF;AACF;AAEA;;;CAGC,GACD,SAASd,cAAcH,OAA4F;IACjH,MAAM,EAAED,MAAM,EAAEK,KAAK,EAAE,GAAGJ;QACVD;IAAhBA,OAAO0B,MAAM,GAAG1B,CAAAA,iBAAAA,OAAO0B,MAAM,cAAb1B,4BAAAA,iBAAiB,CAAC;QACZA;IAAtBA,OAAO0B,MAAM,CAACrB,KAAK,GAAGL,CAAAA,uBAAAA,OAAO0B,MAAM,CAACrB,KAAK,cAAnBL,kCAAAA,uBAAuB,EAAE;IAC/CA,OAAO0B,MAAM,CAACrB,KAAK,CAACsB,IAAI,IAAItB;IAE5B,OAAOL;AACT;AAEA,SAASG,gBAAgBF,OAA4B;QACxBA;IAA3B,MAAM2B,sBAAqB3B,uBAAAA,QAAQ4B,WAAW,cAAnB5B,2CAAAA,qBAAqB6B,IAAI,CAACC,CAAAA;QACnD,OAAOtB,iBAAiBY,IAAI,CAACU,OAAOC,IAAI;IAC1C;QAEqBJ;IAArB,MAAMK,eAAeL,CAAAA,8BAAAA,+BAAAA,yCAAAA,mBAAoB3B,OAAO,cAA3B2B,yCAAAA,8BAA+B,CAAC;IAErD,OAAO;QAAE,GAAGlB,cAAc;QAAE,GAAGuB,YAAY;IAAC;AAC9C"}
+{"version":3,"sources":["../src/webpack.ts"],"sourcesContent":["import type { PresetConfig } from './types';\n\ntype WebpackFinalFn = NonNullable<import('@storybook/react-webpack5').StorybookConfig['webpackFinal']>;\nexport type WebpackFinalConfig = Parameters<WebpackFinalFn>[0];\nexport type WebpackFinalOptions = Parameters<WebpackFinalFn>[1];\n\nexport function webpack(config: WebpackFinalConfig, options: WebpackFinalOptions) {\n  const addonPresetConfig = getAddonOptions(options);\n\n  registerRules({ config, rules: [createBabelLoaderRule(addonPresetConfig)] });\n\n  return config;\n}\n\nconst identity = <T extends unknown>(value: T) => value;\nconst addonFilePattern = /react-storybook-addon-export-to-sandbox\\/[a-z/]+.[jt]s$/;\nconst defaultOptions = {\n  webpackRule: {},\n  babelLoaderOptionsUpdater: identity,\n};\n\nconst PLUGIN_PATH =\n  process.env.BABEL_PRESET_FULL_SOURCE_DEV === 'true'\n    ? '@fluentui/babel-preset-storybook-full-source/__dev'\n    : '@fluentui/babel-preset-storybook-full-source';\n\nfunction createBabelLoaderRule(config: Required<PresetConfig>): import('webpack').RuleSetRule {\n  const { babelLoaderOptionsUpdater, importMappings, webpackRule } = config;\n\n  const plugin = [require.resolve(PLUGIN_PATH), importMappings];\n\n  return {\n    test: /\\.stories\\.(jsx?$|tsx?$)/,\n    ...webpackRule,\n    /**\n     * why the usage of 'post' ? - we need to run this loader after all storybook webpack rules/loaders have been executed.\n     * while we can use Array.prototype.unshift to \"override\" the indexes this approach is more declarative without additional hacks.\n     */\n    enforce: 'post',\n    use: {\n      /**\n       * Custom babel loader wraps the original babel-loader and fixes the incorrect `inputSourceMap` parameter\n       * that is passed to babel-loader.\n       **/\n      loader: require.resolve('./custom-babel-loader'),\n      options: babelLoaderOptionsUpdater({\n        plugins: [plugin],\n      }),\n    },\n  };\n}\n\n/**\n *\n * register custom Webpack Rules to webpack config\n */\nfunction registerRules(options: { rules: import('webpack').RuleSetRule[]; config: import('webpack').Configuration }) {\n  const { config, rules } = options;\n  config.module = config.module ?? {};\n  config.module.rules = config.module.rules ?? [];\n  config.module.rules.push(...rules);\n\n  return config;\n}\n\nfunction getAddonOptions(options: WebpackFinalOptions): Required<PresetConfig> {\n  const presetRegistration = options.presetsList?.find(preset => {\n    return addonFilePattern.test(preset.name);\n  });\n\n  const addonOptions = presetRegistration?.options ?? {};\n\n  return { ...defaultOptions, ...addonOptions };\n}\n"],"names":["webpack","config","options","addonPresetConfig","getAddonOptions","registerRules","rules","createBabelLoaderRule","identity","value","addonFilePattern","defaultOptions","webpackRule","babelLoaderOptionsUpdater","PLUGIN_PATH","importMappings","plugin","require","resolve","test","enforce","use","loader","plugins","module","push","presetRegistration","presetsList","find","preset","name","addonOptions"],"mappings":"AAMA,OAAO,SAASA,QAAQC,MAA0B,EAAEC,OAA4B;IAC9E,MAAMC,oBAAoBC,gBAAgBF;IAE1CG,cAAc;QAAEJ;QAAQK,OAAO;YAACC,sBAAsBJ;SAAmB;IAAC;IAE1E,OAAOF;AACT;AAEA,MAAMO,WAAW,CAAoBC,QAAaA;AAClD,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;IACrBC,aAAa,CAAC;IACdC,2BAA2BL;AAC7B;AAEA,MAAMM,cAGA;AAEN,SAASP,sBAAsBN,MAA8B;IAC3D,MAAM,EAAEY,yBAAyB,EAAEE,cAAc,EAAEH,WAAW,EAAE,GAAGX;IAEnE,MAAMe,SAAS;QAACC,QAAQC,OAAO,CAACJ;QAAcC;KAAe;IAE7D,OAAO;QACLI,MAAM;QACN,GAAGP,WAAW;QACd;;;KAGC,GACDQ,SAAS;QACTC,KAAK;YACH;;;QAGE,GACFC,QAAQL,QAAQC,OAAO,CAAC;YACxBhB,SAASW,0BAA0B;gBACjCU,SAAS;oBAACP;iBAAO;YACnB;QACF;IACF;AACF;AAEA;;;CAGC,GACD,SAASX,cAAcH,OAA4F;IACjH,MAAM,EAAED,MAAM,EAAEK,KAAK,EAAE,GAAGJ;QACVD;IAAhBA,OAAOuB,MAAM,GAAGvB,CAAAA,iBAAAA,OAAOuB,MAAM,cAAbvB,4BAAAA,iBAAiB,CAAC;QACZA;IAAtBA,OAAOuB,MAAM,CAAClB,KAAK,GAAGL,CAAAA,uBAAAA,OAAOuB,MAAM,CAAClB,KAAK,cAAnBL,kCAAAA,uBAAuB,EAAE;IAC/CA,OAAOuB,MAAM,CAAClB,KAAK,CAACmB,IAAI,IAAInB;IAE5B,OAAOL;AACT;AAEA,SAASG,gBAAgBF,OAA4B;QACxBA;IAA3B,MAAMwB,sBAAqBxB,uBAAAA,QAAQyB,WAAW,cAAnBzB,2CAAAA,qBAAqB0B,IAAI,CAACC,CAAAA;QACnD,OAAOnB,iBAAiBS,IAAI,CAACU,OAAOC,IAAI;IAC1C;QAEqBJ;IAArB,MAAMK,eAAeL,CAAAA,8BAAAA,+BAAAA,yCAAAA,mBAAoBxB,OAAO,cAA3BwB,yCAAAA,8BAA+B,CAAC;IAErD,OAAO;QAAE,GAAGf,cAAc;QAAE,GAAGoB,YAAY;IAAC;AAC9C"}

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

@@ -10,8 +10,6 @@ Object.defineProperty(exports, "withExportToSandboxButton", {
 });
 const _sandboxfactory = require("../sandbox-factory");
 const withExportToSandboxButton = (storyFn, context)=>{
-    if (context.viewMode === 'docs') {
-        (0, _sandboxfactory.addDemoActionButton)(context);
-    }
+    if (context.viewMode === 'docs') (0, _sandboxfactory.addDemoActionButton)(context);
     return storyFn(context);
 };

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\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"}
+{"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,QACvBC,IAAAA,mCAAmB,EAACF;IAGtB,OAAOD,QAAQC;AACjB"}

package/lib-commonjs/getDependencies.js

@@ -12,9 +12,7 @@ const IMPORT_PATH_REGEX = /from ['"](.*?)['"];/g;
 function matchAll(str, re) {
     let match = null;
     const matches = [];
-    while(match = re.exec(str)){
-        matches.push(match);
-    }
+    while(match = re.exec(str))matches.push(match);
     return matches;
 }
 const getDependencies = (fileContent, requiredDependencies, optionalDependencies)=>{
@@ -23,14 +21,10 @@ const getDependencies = (fileContent, requiredDependencies, optionalDependencies
         const importPath = match[1];
         const isReactPath = importPath.startsWith('react/');
         const isRelativeImportPath = importPath.startsWith('.');
-        if (isReactPath || isRelativeImportPath) {
-            return dependencies;
-        }
+        if (isReactPath || isRelativeImportPath) return dependencies;
         const dependency = parsePackageName(importPath).name;
-        if (!dependencies.hasOwnProperty(dependency)) {
-            var _optionalDependencies_dependency;
-            dependencies[dependency] = (_optionalDependencies_dependency = optionalDependencies[dependency]) !== null && _optionalDependencies_dependency !== void 0 ? _optionalDependencies_dependency : 'latest';
-        }
+        var _optionalDependencies_dependency;
+        if (!dependencies.hasOwnProperty(dependency)) dependencies[dependency] = (_optionalDependencies_dependency = optionalDependencies[dependency]) !== null && _optionalDependencies_dependency !== void 0 ? _optionalDependencies_dependency : 'latest';
         return dependencies;
     }, {});
     return {
@@ -44,9 +38,7 @@ const RE_SCOPED = /^(@[^\/]+\/[^@\/]+)(?:@([^\/]+))?(\/.*)?$/;
 const RE_NON_SCOPED = /^([^@\/]+)(?:@([^\/]+))?(\/.*)?$/;
 function parsePackageName(input) {
     const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);
-    if (!m) {
-        throw new Error(`[parse-package-name] invalid package name: ${input}`);
-    }
+    if (!m) throw new Error(`[parse-package-name] invalid package name: ${input}`);
     return {
         name: m[1] || '',
         version: m[2] || 'latest',

package/lib-commonjs/getDependencies.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/getDependencies.ts"],"sourcesContent":["type PackageDependencies = { [dependencyName: string]: string };\n\nconst IMPORT_PATH_REGEX = /from ['\"](.*?)['\"];/g;\n\nfunction matchAll(str: string, re: RegExp) {\n  let match: RegExpExecArray | null = null;\n  const matches: RegExpExecArray[] = [];\n\n  while ((match = re.exec(str))) {\n    matches.push(match);\n  }\n\n  return matches;\n}\n\n/**\n *\n * @param fileContent - code\n * @param requiredDependencies - dependencies that will always be included in package.json\n * @param optionalDependencies - whose versions will override those found in the code\n * @returns - Map of dependencies and their versions to include in package.json\n */\nexport const getDependencies = (\n  fileContent: string,\n  requiredDependencies: PackageDependencies,\n  optionalDependencies: PackageDependencies,\n) => {\n  const importPaths = matchAll(fileContent, IMPORT_PATH_REGEX);\n\n  const dependenciesInCode = importPaths.reduce((dependencies, match) => {\n    const importPath = match[1];\n    const isReactPath = importPath.startsWith('react/');\n    const isRelativeImportPath = importPath.startsWith('.');\n\n    if (isReactPath || isRelativeImportPath) {\n      return dependencies;\n    }\n\n    const dependency = parsePackageName(importPath).name;\n\n    if (!dependencies.hasOwnProperty(dependency)) {\n      dependencies[dependency] = optionalDependencies[dependency] ?? 'latest';\n    }\n\n    return dependencies;\n  }, {} as PackageDependencies);\n\n  return { ...dependenciesInCode, ...requiredDependencies };\n};\n\n// Parsed a scoped package name into name, version, and path.\nconst RE_SCOPED = /^(@[^\\/]+\\/[^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n// Parsed a non-scoped package name into name, version, path\nconst RE_NON_SCOPED = /^([^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n\nfunction parsePackageName(input: string) {\n  const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);\n\n  if (!m) {\n    throw new Error(`[parse-package-name] invalid package name: ${input}`);\n  }\n\n  return {\n    name: m[1] || '',\n    version: m[2] || 'latest',\n    path: m[3] || '',\n  };\n}\n"],"names":["getDependencies","IMPORT_PATH_REGEX","matchAll","str","re","match","matches","exec","push","fileContent","requiredDependencies","optionalDependencies","importPaths","dependenciesInCode","reduce","dependencies","importPath","isReactPath","startsWith","isRelativeImportPath","dependency","parsePackageName","name","hasOwnProperty","RE_SCOPED","RE_NON_SCOPED","input","m","Error","version","path"],"mappings":";;;;+BAsBaA;;;eAAAA;;;AApBb,MAAMC,oBAAoB;AAE1B,SAASC,SAASC,GAAW,EAAEC,EAAU;IACvC,IAAIC,QAAgC;IACpC,MAAMC,UAA6B,EAAE;IAErC,MAAQD,QAAQD,GAAGG,IAAI,CAACJ,KAAO;QAC7BG,QAAQE,IAAI,CAACH;IACf;IAEA,OAAOC;AACT;AASO,MAAMN,kBAAkB,CAC7BS,aACAC,sBACAC;IAEA,MAAMC,cAAcV,SAASO,aAAaR;IAE1C,MAAMY,qBAAqBD,YAAYE,MAAM,CAAC,CAACC,cAAcV;QAC3D,MAAMW,aAAaX,KAAK,CAAC,EAAE;QAC3B,MAAMY,cAAcD,WAAWE,UAAU,CAAC;QAC1C,MAAMC,uBAAuBH,WAAWE,UAAU,CAAC;QAEnD,IAAID,eAAeE,sBAAsB;YACvC,OAAOJ;QACT;QAEA,MAAMK,aAAaC,iBAAiBL,YAAYM,IAAI;QAEpD,IAAI,CAACP,aAAaQ,cAAc,CAACH,aAAa;gBACjBT;YAA3BI,YAAY,CAACK,WAAW,GAAGT,CAAAA,mCAAAA,oBAAoB,CAACS,WAAW,cAAhCT,8CAAAA,mCAAoC;QACjE;QAEA,OAAOI;IACT,GAAG,CAAC;IAEJ,OAAO;QAAE,GAAGF,kBAAkB;QAAE,GAAGH,oBAAoB;IAAC;AAC1D;AAEA,6DAA6D;AAC7D,MAAMc,YAAY;AAClB,4DAA4D;AAC5D,MAAMC,gBAAgB;AAEtB,SAASJ,iBAAiBK,KAAa;IACrC,MAAMC,IAAIH,UAAUjB,IAAI,CAACmB,UAAUD,cAAclB,IAAI,CAACmB;IAEtD,IAAI,CAACC,GAAG;QACN,MAAM,IAAIC,MAAM,CAAC,2CAA2C,EAAEF,OAAO;IACvE;IAEA,OAAO;QACLJ,MAAMK,CAAC,CAAC,EAAE,IAAI;QACdE,SAASF,CAAC,CAAC,EAAE,IAAI;QACjBG,MAAMH,CAAC,CAAC,EAAE,IAAI;IAChB;AACF"}
+{"version":3,"sources":["../src/getDependencies.ts"],"sourcesContent":["type PackageDependencies = { [dependencyName: string]: string };\n\nconst IMPORT_PATH_REGEX = /from ['\"](.*?)['\"];/g;\n\nfunction matchAll(str: string, re: RegExp) {\n  let match: RegExpExecArray | null = null;\n  const matches: RegExpExecArray[] = [];\n\n  while ((match = re.exec(str))) {\n    matches.push(match);\n  }\n\n  return matches;\n}\n\n/**\n *\n * @param fileContent - code\n * @param requiredDependencies - dependencies that will always be included in package.json\n * @param optionalDependencies - whose versions will override those found in the code\n * @returns - Map of dependencies and their versions to include in package.json\n */\nexport const getDependencies = (\n  fileContent: string,\n  requiredDependencies: PackageDependencies,\n  optionalDependencies: PackageDependencies,\n) => {\n  const importPaths = matchAll(fileContent, IMPORT_PATH_REGEX);\n\n  const dependenciesInCode = importPaths.reduce((dependencies, match) => {\n    const importPath = match[1];\n    const isReactPath = importPath.startsWith('react/');\n    const isRelativeImportPath = importPath.startsWith('.');\n\n    if (isReactPath || isRelativeImportPath) {\n      return dependencies;\n    }\n\n    const dependency = parsePackageName(importPath).name;\n\n    if (!dependencies.hasOwnProperty(dependency)) {\n      dependencies[dependency] = optionalDependencies[dependency] ?? 'latest';\n    }\n\n    return dependencies;\n  }, {} as PackageDependencies);\n\n  return { ...dependenciesInCode, ...requiredDependencies };\n};\n\n// Parsed a scoped package name into name, version, and path.\nconst RE_SCOPED = /^(@[^\\/]+\\/[^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n// Parsed a non-scoped package name into name, version, path\nconst RE_NON_SCOPED = /^([^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n\nfunction parsePackageName(input: string) {\n  const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);\n\n  if (!m) {\n    throw new Error(`[parse-package-name] invalid package name: ${input}`);\n  }\n\n  return {\n    name: m[1] || '',\n    version: m[2] || 'latest',\n    path: m[3] || '',\n  };\n}\n"],"names":["getDependencies","IMPORT_PATH_REGEX","matchAll","str","re","match","matches","exec","push","fileContent","requiredDependencies","optionalDependencies","importPaths","dependenciesInCode","reduce","dependencies","importPath","isReactPath","startsWith","isRelativeImportPath","dependency","parsePackageName","name","hasOwnProperty","RE_SCOPED","RE_NON_SCOPED","input","m","Error","version","path"],"mappings":";;;;+BAsBaA;;;eAAAA;;;AApBb,MAAMC,oBAAoB;AAE1B,SAASC,SAASC,GAAW,EAAEC,EAAU;IACvC,IAAIC,QAAgC;IACpC,MAAMC,UAA6B,EAAE;IAErC,MAAQD,QAAQD,GAAGG,IAAI,CAACJ,KACtBG,QAAQE,IAAI,CAACH;IAGf,OAAOC;AACT;AASO,MAAMN,kBAAkB,CAC7BS,aACAC,sBACAC;IAEA,MAAMC,cAAcV,SAASO,aAAaR;IAE1C,MAAMY,qBAAqBD,YAAYE,MAAM,CAAC,CAACC,cAAcV;QAC3D,MAAMW,aAAaX,KAAK,CAAC,EAAE;QAC3B,MAAMY,cAAcD,WAAWE,UAAU,CAAC;QAC1C,MAAMC,uBAAuBH,WAAWE,UAAU,CAAC;QAEnD,IAAID,eAAeE,sBACjB,OAAOJ;QAGT,MAAMK,aAAaC,iBAAiBL,YAAYM,IAAI;YAGvBX;QAD7B,IAAI,CAACI,aAAaQ,cAAc,CAACH,aAC/BL,YAAY,CAACK,WAAW,GAAGT,CAAAA,mCAAAA,oBAAoB,CAACS,WAAW,cAAhCT,8CAAAA,mCAAoC;QAGjE,OAAOI;IACT,GAAG,CAAC;IAEJ,OAAO;QAAE,GAAGF,kBAAkB;QAAE,GAAGH,oBAAoB;IAAC;AAC1D;AAEA,6DAA6D;AAC7D,MAAMc,YAAY;AAClB,4DAA4D;AAC5D,MAAMC,gBAAgB;AAEtB,SAASJ,iBAAiBK,KAAa;IACrC,MAAMC,IAAIH,UAAUjB,IAAI,CAACmB,UAAUD,cAAclB,IAAI,CAACmB;IAEtD,IAAI,CAACC,GACH,MAAM,IAAIC,MAAM,CAAC,2CAA2C,EAAEF,OAAO;IAGvE,OAAO;QACLJ,MAAMK,CAAC,CAAC,EAAE,IAAI;QACdE,SAASF,CAAC,CAAC,EAAE,IAAI;QACjBG,MAAMH,CAAC,CAAC,EAAE,IAAI;IAChB;AACF"}

package/lib-commonjs/index.js.map

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

package/lib-commonjs/sandbox-factory.js

@@ -37,9 +37,7 @@ const actionConfig = {
 };
 function addDemoActionButton(context) {
     const config = (0, _sandboxutils.prepareData)(context);
-    if (!config) {
-        throw new Error('issues with data');
-    }
+    if (!config) throw new Error('issues with data');
     (0, _sandboxutils.prepareSandboxContainers)(context).forEach(({ container, cssClasses })=>{
         addActionButton(container, config, cssClasses);
     });

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, 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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"}
+{"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-scaffold.js

@@ -18,9 +18,7 @@ const commonDevDeps = {
 };
 const scaffold = {
     vite: (data)=>{
-        if (data.provider === 'codesandbox-browser') {
-            throw new Error('vite is not supported on codesandbox-browser');
-        }
+        if (data.provider === 'codesandbox-browser') throw new Error('vite is not supported on codesandbox-browser');
         const base = {
             'index.html': Vite.getHTML(),
             'src/App.tsx': Vite.getApp(data),
@@ -31,12 +29,8 @@ const scaffold = {
             'vite.config.ts': Vite.getViteCfg(),
             'package.json': Vite.getPkgJson(data)
         };
-        if (data.provider === 'stackblitz-cloud') {
-            Object.assign(base, getStackblitzConfig());
-        }
-        if (data.provider === 'codesandbox-cloud') {
-            Object.assign(base, getCodesandboxConfig('vite'));
-        }
+        if (data.provider === 'stackblitz-cloud') Object.assign(base, getStackblitzConfig());
+        if (data.provider === 'codesandbox-cloud') Object.assign(base, getCodesandboxConfig('vite'));
         return base;
     },
     cra: (data)=>{
@@ -48,12 +42,8 @@ const scaffold = {
             'tsconfig.json': CRA.getTsconfig(),
             'package.json': CRA.getPkgJson(data)
         };
-        if (data.provider === 'stackblitz-cloud') {
-            Object.assign(base, getStackblitzConfig());
-        }
-        if (data.provider === 'codesandbox-cloud') {
-            Object.assign(base, getCodesandboxConfig('cra'));
-        }
+        if (data.provider === 'stackblitz-cloud') Object.assign(base, getStackblitzConfig());
+        if (data.provider === 'codesandbox-cloud') Object.assign(base, getCodesandboxConfig('cra'));
         return base;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/sandbox-scaffold.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport type { Data } from './sandbox-utils';\nimport { serializeJson } from './utils';\n\nconst commonDevDeps = { '@types/react': '^17', '@types/react-dom': '^17', typescript: '~4.7.0' };\n\nexport const scaffold = {\n  vite: (data: Data): Record<string, string> => {\n    if (data.provider === 'codesandbox-browser') {\n      throw new Error('vite is not supported on codesandbox-browser');\n    }\n\n    const base = {\n      'index.html': Vite.getHTML(),\n      'src/App.tsx': Vite.getApp(data),\n      'src/index.tsx': Vite.getRootIndex(),\n      'src/example.tsx': Vite.getExample(data),\n      'tsconfig.json': Vite.getTsconfig(),\n      'tsconfig.node.json': Vite.getTsconfigNode(),\n      'vite.config.ts': Vite.getViteCfg(),\n      'package.json': Vite.getPkgJson(data),\n    };\n    if (data.provider === 'stackblitz-cloud') {\n      Object.assign(base, getStackblitzConfig());\n    }\n    if (data.provider === 'codesandbox-cloud') {\n      Object.assign(base, getCodesandboxConfig('vite'));\n    }\n    return base;\n  },\n  cra: (data: Data): Record<string, string> => {\n    const base = {\n      'public/index.html': CRA.getHTML(),\n      'src/App.tsx': CRA.getApp(data),\n      'src/index.tsx': CRA.getRootIndex(),\n      'src/example.tsx': CRA.getExample(data),\n      'tsconfig.json': CRA.getTsconfig(),\n      'package.json': CRA.getPkgJson(data),\n    };\n    if (data.provider === 'stackblitz-cloud') {\n      Object.assign(base, getStackblitzConfig());\n    }\n    if (data.provider === 'codesandbox-cloud') {\n      Object.assign(base, getCodesandboxConfig('cra'));\n    }\n\n    return base;\n  },\n};\n\nconst Vite = {\n  getHTML: () => dedent`\n  <!doctype html>\n  <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\" />\n      <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n      <title>Vite + React + TS</title>\n    </head>\n    <body>\n      <div id=\"root\"></div>\n      <script type=\"module\" src=\"/src/index.tsx\"></script>\n    </body>\n  </html>\n  `,\n  getRootIndex: getIndex,\n  getExample,\n  getApp,\n  getViteCfg: () => {\n    return dedent`\n      import { defineConfig } from 'vite'\n      import react from '@vitejs/plugin-react'\n\n      // https://vitejs.dev/config/\n      export default defineConfig({\n        plugins: [react()],\n      })\n    `;\n  },\n  getTsconfigNode: () => {\n    return serializeJson({\n      compilerOptions: {\n        composite: true,\n        skipLibCheck: true,\n        module: 'ESNext',\n        moduleResolution: 'bundler',\n        allowSyntheticDefaultImports: true,\n      },\n      include: ['vite.config.ts'],\n    });\n  },\n  getTsconfig: () => {\n    return serializeJson({\n      compilerOptions: {\n        target: 'ES2020',\n        useDefineForClassFields: true,\n        lib: ['ES2020', 'DOM', 'DOM.Iterable'],\n        module: 'ESNext',\n        skipLibCheck: true,\n\n        /* Bundler mode */\n        moduleResolution: 'node',\n        // moduleResolution: 'bundler',\n        allowImportingTsExtensions: true,\n        resolveJsonModule: true,\n        isolatedModules: true,\n        noEmit: true,\n        jsx: 'react-jsx',\n\n        /* Linting */\n        strict: true,\n        noUnusedLocals: true,\n        noUnusedParameters: true,\n        noFallthroughCasesInSwitch: true,\n      },\n      include: ['src'],\n      references: [{ path: './tsconfig.node.json' }],\n    });\n  },\n  getPkgJson: (data: Data) => {\n    return serializeJson({\n      name: 'vite-react-typescript-starter',\n      private: true,\n      version: '0.0.0',\n      type: 'module',\n      scripts: {\n        dev: 'vite',\n        build: 'tsc && vite build',\n        preview: 'vite preview',\n      },\n      dependencies: {\n        ...data.dependencies,\n      },\n      devDependencies: {\n        ...commonDevDeps,\n        '@vitejs/plugin-react': '^4.2.0',\n        vite: '^5.0.0',\n      },\n    });\n  },\n};\n\nconst CRA = {\n  getHTML: () => `<div id=\"root\"></div>`,\n  getRootIndex: getIndex,\n  getExample,\n  getApp,\n  getTsconfig: () =>\n    serializeJson({\n      include: ['./src/**/*'],\n      compilerOptions: {\n        strict: true,\n        esModuleInterop: true,\n        lib: ['dom', 'es2015'],\n        jsx: 'react-jsx',\n      },\n    }),\n  getPkgJson: (data: Data) => {\n    return serializeJson({\n      main: 'src/index.tsx',\n      dependencies: {\n        ...data.dependencies,\n      },\n      devDependencies: {\n        ...commonDevDeps,\n        'react-scripts': '^5.0.0',\n        '@babel/plugin-proposal-private-property-in-object': 'latest',\n      },\n      scripts: {\n        start: 'react-scripts start',\n        build: 'react-scripts build',\n        test: 'react-scripts test --env=jsdom',\n        eject: 'react-scripts eject',\n      },\n      browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n    });\n  },\n};\n\nfunction getCodesandboxConfig(kind: 'cra' | 'vite') {\n  const startConfig = {\n    cra: { command: 'yarn start', preview: { port: 3000 } },\n    vite: { command: 'yarn dev', preview: { port: 5173 } },\n  };\n  return {\n    '.devcontainer/devcontainer.json': serializeJson({\n      name: 'Devcontainer',\n      build: {\n        dockerfile: './Dockerfile',\n      },\n    }),\n    '.devcontainer/Dockerfile': `FROM node:16-bullseye`,\n    '.codesandbox/tasks.json': serializeJson({\n      // These tasks will run in order when initializing your CodeSandbox project.\n      setupTasks: [\n        {\n          name: 'Install Dependencies',\n          command: 'yarn install',\n        },\n      ],\n\n      // These tasks can be run from CodeSandbox. Running one will open a log in the app.\n      tasks: {\n        dev: {\n          name: 'dev',\n          runAtStart: true,\n          ...startConfig[kind],\n        },\n        build: {\n          name: 'build',\n          command: 'yarn build',\n          runAtStart: false,\n        },\n        preview: {\n          name: 'preview',\n          command: 'yarn preview',\n          runAtStart: false,\n        },\n      },\n    }),\n  };\n}\n\nfunction getStackblitzConfig() {\n  return {\n    '.stackblitzrc': serializeJson({}),\n  };\n}\n\nfunction getIndex() {\n  return dedent`\n    import * as React from 'react';\n    import { createRoot } from 'react-dom/client';\n    import App from './App';\n\n    const root = createRoot(document.getElementById('root') as HTMLElement);\n\n    root.render(\n      <React.StrictMode>\n        <App />\n      </React.StrictMode>,\n    );\n  `;\n}\n\nfunction getExample(demoData: Data) {\n  return demoData.storyFile;\n}\n\nfunction getApp(data: Data) {\n  const code = dedent`\n    import { FluentProvider, webLightTheme } from '@fluentui/react-components';\n    import { ${data.storyExportToken} as Example } from './example';\n\n    const App = () => {\n        return (\n          <FluentProvider theme={webLightTheme}>\n            <Example />\n          </FluentProvider>\n        );\n    };\n\n    export default App;\n  `;\n\n  return code;\n}\n"],"names":["scaffold","commonDevDeps","typescript","vite","data","provider","Error","base","Vite","getHTML","getApp","getRootIndex","getExample","getTsconfig","getTsconfigNode","getViteCfg","getPkgJson","Object","assign","getStackblitzConfig","getCodesandboxConfig","cra","CRA","dedent","getIndex","serializeJson","compilerOptions","composite","skipLibCheck","module","moduleResolution","allowSyntheticDefaultImports","include","target","useDefineForClassFields","lib","allowImportingTsExtensions","resolveJsonModule","isolatedModules","noEmit","jsx","strict","noUnusedLocals","noUnusedParameters","noFallthroughCasesInSwitch","references","path","name","private","version","type","scripts","dev","build","preview","dependencies","devDependencies","esModuleInterop","main","start","test","eject","browserslist","kind","startConfig","command","port","dockerfile","setupTasks","tasks","runAtStart","demoData","storyFile","code","storyExportToken"],"mappings":"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"}
+{"version":3,"sources":["../src/sandbox-scaffold.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport type { Data } from './sandbox-utils';\nimport { serializeJson } from './utils';\n\nconst commonDevDeps = { '@types/react': '^17', '@types/react-dom': '^17', typescript: '~4.7.0' };\n\nexport const scaffold = {\n  vite: (data: Data): Record<string, string> => {\n    if (data.provider === 'codesandbox-browser') {\n      throw new Error('vite is not supported on codesandbox-browser');\n    }\n\n    const base = {\n      'index.html': Vite.getHTML(),\n      'src/App.tsx': Vite.getApp(data),\n      'src/index.tsx': Vite.getRootIndex(),\n      'src/example.tsx': Vite.getExample(data),\n      'tsconfig.json': Vite.getTsconfig(),\n      'tsconfig.node.json': Vite.getTsconfigNode(),\n      'vite.config.ts': Vite.getViteCfg(),\n      'package.json': Vite.getPkgJson(data),\n    };\n    if (data.provider === 'stackblitz-cloud') {\n      Object.assign(base, getStackblitzConfig());\n    }\n    if (data.provider === 'codesandbox-cloud') {\n      Object.assign(base, getCodesandboxConfig('vite'));\n    }\n    return base;\n  },\n  cra: (data: Data): Record<string, string> => {\n    const base = {\n      'public/index.html': CRA.getHTML(),\n      'src/App.tsx': CRA.getApp(data),\n      'src/index.tsx': CRA.getRootIndex(),\n      'src/example.tsx': CRA.getExample(data),\n      'tsconfig.json': CRA.getTsconfig(),\n      'package.json': CRA.getPkgJson(data),\n    };\n    if (data.provider === 'stackblitz-cloud') {\n      Object.assign(base, getStackblitzConfig());\n    }\n    if (data.provider === 'codesandbox-cloud') {\n      Object.assign(base, getCodesandboxConfig('cra'));\n    }\n\n    return base;\n  },\n};\n\nconst Vite = {\n  getHTML: () => dedent`\n  <!doctype html>\n  <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\" />\n      <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n      <title>Vite + React + TS</title>\n    </head>\n    <body>\n      <div id=\"root\"></div>\n      <script type=\"module\" src=\"/src/index.tsx\"></script>\n    </body>\n  </html>\n  `,\n  getRootIndex: getIndex,\n  getExample,\n  getApp,\n  getViteCfg: () => {\n    return dedent`\n      import { defineConfig } from 'vite'\n      import react from '@vitejs/plugin-react'\n\n      // https://vitejs.dev/config/\n      export default defineConfig({\n        plugins: [react()],\n      })\n    `;\n  },\n  getTsconfigNode: () => {\n    return serializeJson({\n      compilerOptions: {\n        composite: true,\n        skipLibCheck: true,\n        module: 'ESNext',\n        moduleResolution: 'bundler',\n        allowSyntheticDefaultImports: true,\n      },\n      include: ['vite.config.ts'],\n    });\n  },\n  getTsconfig: () => {\n    return serializeJson({\n      compilerOptions: {\n        target: 'ES2020',\n        useDefineForClassFields: true,\n        lib: ['ES2020', 'DOM', 'DOM.Iterable'],\n        module: 'ESNext',\n        skipLibCheck: true,\n\n        /* Bundler mode */\n        moduleResolution: 'node',\n        // moduleResolution: 'bundler',\n        allowImportingTsExtensions: true,\n        resolveJsonModule: true,\n        isolatedModules: true,\n        noEmit: true,\n        jsx: 'react-jsx',\n\n        /* Linting */\n        strict: true,\n        noUnusedLocals: true,\n        noUnusedParameters: true,\n        noFallthroughCasesInSwitch: true,\n      },\n      include: ['src'],\n      references: [{ path: './tsconfig.node.json' }],\n    });\n  },\n  getPkgJson: (data: Data) => {\n    return serializeJson({\n      name: 'vite-react-typescript-starter',\n      private: true,\n      version: '0.0.0',\n      type: 'module',\n      scripts: {\n        dev: 'vite',\n        build: 'tsc && vite build',\n        preview: 'vite preview',\n      },\n      dependencies: {\n        ...data.dependencies,\n      },\n      devDependencies: {\n        ...commonDevDeps,\n        '@vitejs/plugin-react': '^4.2.0',\n        vite: '^5.0.0',\n      },\n    });\n  },\n};\n\nconst CRA = {\n  getHTML: () => `<div id=\"root\"></div>`,\n  getRootIndex: getIndex,\n  getExample,\n  getApp,\n  getTsconfig: () =>\n    serializeJson({\n      include: ['./src/**/*'],\n      compilerOptions: {\n        strict: true,\n        esModuleInterop: true,\n        lib: ['dom', 'es2015'],\n        jsx: 'react-jsx',\n      },\n    }),\n  getPkgJson: (data: Data) => {\n    return serializeJson({\n      main: 'src/index.tsx',\n      dependencies: {\n        ...data.dependencies,\n      },\n      devDependencies: {\n        ...commonDevDeps,\n        'react-scripts': '^5.0.0',\n        '@babel/plugin-proposal-private-property-in-object': 'latest',\n      },\n      scripts: {\n        start: 'react-scripts start',\n        build: 'react-scripts build',\n        test: 'react-scripts test --env=jsdom',\n        eject: 'react-scripts eject',\n      },\n      browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n    });\n  },\n};\n\nfunction getCodesandboxConfig(kind: 'cra' | 'vite') {\n  const startConfig = {\n    cra: { command: 'yarn start', preview: { port: 3000 } },\n    vite: { command: 'yarn dev', preview: { port: 5173 } },\n  };\n  return {\n    '.devcontainer/devcontainer.json': serializeJson({\n      name: 'Devcontainer',\n      build: {\n        dockerfile: './Dockerfile',\n      },\n    }),\n    '.devcontainer/Dockerfile': `FROM node:16-bullseye`,\n    '.codesandbox/tasks.json': serializeJson({\n      // These tasks will run in order when initializing your CodeSandbox project.\n      setupTasks: [\n        {\n          name: 'Install Dependencies',\n          command: 'yarn install',\n        },\n      ],\n\n      // These tasks can be run from CodeSandbox. Running one will open a log in the app.\n      tasks: {\n        dev: {\n          name: 'dev',\n          runAtStart: true,\n          ...startConfig[kind],\n        },\n        build: {\n          name: 'build',\n          command: 'yarn build',\n          runAtStart: false,\n        },\n        preview: {\n          name: 'preview',\n          command: 'yarn preview',\n          runAtStart: false,\n        },\n      },\n    }),\n  };\n}\n\nfunction getStackblitzConfig() {\n  return {\n    '.stackblitzrc': serializeJson({}),\n  };\n}\n\nfunction getIndex() {\n  return dedent`\n    import * as React from 'react';\n    import { createRoot } from 'react-dom/client';\n    import App from './App';\n\n    const root = createRoot(document.getElementById('root') as HTMLElement);\n\n    root.render(\n      <React.StrictMode>\n        <App />\n      </React.StrictMode>,\n    );\n  `;\n}\n\nfunction getExample(demoData: Data) {\n  return demoData.storyFile;\n}\n\nfunction getApp(data: Data) {\n  const code = dedent`\n    import { FluentProvider, webLightTheme } from '@fluentui/react-components';\n    import { ${data.storyExportToken} as Example } from './example';\n\n    const App = () => {\n        return (\n          <FluentProvider theme={webLightTheme}>\n            <Example />\n          </FluentProvider>\n        );\n    };\n\n    export default App;\n  `;\n\n  return code;\n}\n"],"names":["scaffold","commonDevDeps","typescript","vite","data","provider","Error","base","Vite","getHTML","getApp","getRootIndex","getExample","getTsconfig","getTsconfigNode","getViteCfg","getPkgJson","Object","assign","getStackblitzConfig","getCodesandboxConfig","cra","CRA","dedent","getIndex","serializeJson","compilerOptions","composite","skipLibCheck","module","moduleResolution","allowSyntheticDefaultImports","include","target","useDefineForClassFields","lib","allowImportingTsExtensions","resolveJsonModule","isolatedModules","noEmit","jsx","strict","noUnusedLocals","noUnusedParameters","noFallthroughCasesInSwitch","references","path","name","private","version","type","scripts","dev","build","preview","dependencies","devDependencies","esModuleInterop","main","start","test","eject","browserslist","kind","startConfig","command","port","dockerfile","setupTasks","tasks","runAtStart","demoData","storyFile","code","storyExportToken"],"mappings":"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"}

package/lib-commonjs/sandbox-utils.js

@@ -30,17 +30,17 @@ function addHiddenInput(form, name, value) {
     form.appendChild(input);
 }
 function prepareSandboxContainers(context) {
-    const docsSelector = `#anchor--${context.id} .docs-story`;
+    // Support anchor ID formats for our Storybook major versions range.
+    // 10< `#anchor--{id}`
+    // >=10 `#anchor--primary--{id}`
+    // See: https://github.com/storybookjs/storybook/pull/33384
+    const docsSelector = `#anchor--${context.id} .docs-story, #anchor--primary--${context.id} .docs-story`;
     const rootElements = document.querySelectorAll(docsSelector);
-    if (!rootElements.length) {
-        throw new Error(`css selector: ${docsSelector}, doesn't exist `);
-    }
+    if (!rootElements.length) throw new Error(`css selector: ${docsSelector}, doesn't exist `);
     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 `);
-        }
+        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`);
@@ -57,9 +57,7 @@ const addonConfigDefaults = {
 };
 function prepareData(context) {
     var _context_parameters;
-    if (!context.parameters.exportToSandbox) {
-        throw new Error('exportToSandbox config parameter cannot be empty');
-    }
+    if (!context.parameters.exportToSandbox) throw new Error('exportToSandbox config parameter cannot be empty');
     const addonConfig = {
         ...addonConfigDefaults,
         ...context.parameters.exportToSandbox
@@ -81,9 +79,7 @@ function prepareData(context) {
     // just get the "Default"
     // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?
     const storyExportToken = context.originalStoryFn.name.split('_stories_').slice(-1).pop();
-    if (!storyExportToken) {
-        throw new Error('issues processing story export token');
-    }
+    if (!storyExportToken) throw new Error('issues processing story export token');
     const demoData = {
         storyFile,
         storyExportToken,

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 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"}
+{"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  // Support anchor ID formats for our Storybook major versions range.\n  // 10< `#anchor--{id}`\n  // >=10 `#anchor--primary--{id}`\n  // See: https://github.com/storybookjs/storybook/pull/33384\n  const docsSelector = `#anchor--${context.id} .docs-story, #anchor--primary--${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;;IAwDAC,WAAW;eAAXA;;IAhDAC,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,oEAAoE;IACpE,sBAAsB;IACtB,gCAAgC;IAChC,2DAA2D;IAC3D,MAAMC,eAAe,CAAC,SAAS,EAAED,QAAQE,EAAE,CAAC,gCAAgC,EAAEF,QAAQE,EAAE,CAAC,YAAY,CAAC;IACtG,MAAMC,eAAeP,SAASQ,gBAAgB,CAACH;IAE/C,IAAI,CAACE,aAAaE,MAAM,EACtB,MAAM,IAAIC,MAAM,CAAC,cAAc,EAAEL,aAAa,gBAAgB,CAAC;IAGjE,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,WACH,MAAM,IAAIP,MAAM,CAAC,qDAAqD,CAAC;QAGzE,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,EACrC,MAAM,IAAIpB,MAAM;IAGlB,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,IAAIC,GAAG;IACtF,IAAI,CAACH,kBACH,MAAM,IAAIjC,MAAM;IAGlB,MAAMqC,WAAW;QACfb;QACAS;QACAX;QACAC;QACAO;QACAD;QACAG;IACF;IAEA,OAAOK;AACT"}

package/lib-commonjs/webpack.js

@@ -24,7 +24,7 @@ const defaultOptions = {
     webpackRule: {},
     babelLoaderOptionsUpdater: identity
 };
-const PLUGIN_PATH = process.env.NODE_ENV !== 'production' ? '@fluentui/babel-preset-storybook-full-source/__dev' : '@fluentui/babel-preset-storybook-full-source';
+const PLUGIN_PATH = '@fluentui/babel-preset-storybook-full-source';
 function createBabelLoaderRule(config) {
     const { babelLoaderOptionsUpdater, importMappings, webpackRule } = config;
     const plugin = [

package/lib-commonjs/webpack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/webpack.ts"],"sourcesContent":["import type { PresetConfig } from './types';\n\ntype WebpackFinalFn = NonNullable<import('@storybook/react-webpack5').StorybookConfig['webpackFinal']>;\nexport type WebpackFinalConfig = Parameters<WebpackFinalFn>[0];\nexport type WebpackFinalOptions = Parameters<WebpackFinalFn>[1];\n\nexport function webpack(config: WebpackFinalConfig, options: WebpackFinalOptions) {\n  const addonPresetConfig = getAddonOptions(options);\n\n  registerRules({ config, rules: [createBabelLoaderRule(addonPresetConfig)] });\n\n  return config;\n}\n\nconst identity = <T extends unknown>(value: T) => value;\nconst addonFilePattern = /react-storybook-addon-export-to-sandbox\\/[a-z/]+.[jt]s$/;\nconst defaultOptions = {\n  webpackRule: {},\n  babelLoaderOptionsUpdater: identity,\n};\n\nconst PLUGIN_PATH =\n  process.env.NODE_ENV !== 'production'\n    ? '@fluentui/babel-preset-storybook-full-source/__dev'\n    : '@fluentui/babel-preset-storybook-full-source';\n\nfunction createBabelLoaderRule(config: Required<PresetConfig>): import('webpack').RuleSetRule {\n  const { babelLoaderOptionsUpdater, importMappings, webpackRule } = config;\n\n  const plugin = [require.resolve(PLUGIN_PATH), importMappings];\n\n  return {\n    test: /\\.stories\\.(jsx?$|tsx?$)/,\n    ...webpackRule,\n    /**\n     * why the usage of 'post' ? - we need to run this loader after all storybook webpack rules/loaders have been executed.\n     * while we can use Array.prototype.unshift to \"override\" the indexes this approach is more declarative without additional hacks.\n     */\n    enforce: 'post',\n    use: {\n      /**\n       * Custom babel loader wraps the original babel-loader and fixes the incorrect `inputSourceMap` parameter\n       * that is passed to babel-loader.\n       **/\n      loader: require.resolve('./custom-babel-loader'),\n      options: babelLoaderOptionsUpdater({\n        plugins: [plugin],\n      }),\n    },\n  };\n}\n\n/**\n *\n * register custom Webpack Rules to webpack config\n */\nfunction registerRules(options: { rules: import('webpack').RuleSetRule[]; config: import('webpack').Configuration }) {\n  const { config, rules } = options;\n  config.module = config.module ?? {};\n  config.module.rules = config.module.rules ?? [];\n  config.module.rules.push(...rules);\n\n  return config;\n}\n\nfunction getAddonOptions(options: WebpackFinalOptions): Required<PresetConfig> {\n  const presetRegistration = options.presetsList?.find(preset => {\n    return addonFilePattern.test(preset.name);\n  });\n\n  const addonOptions = presetRegistration?.options ?? {};\n\n  return { ...defaultOptions, ...addonOptions };\n}\n"],"names":["webpack","config","options","addonPresetConfig","getAddonOptions","registerRules","rules","createBabelLoaderRule","identity","value","addonFilePattern","defaultOptions","webpackRule","babelLoaderOptionsUpdater","PLUGIN_PATH","process","env","NODE_ENV","importMappings","plugin","require","resolve","test","enforce","use","loader","plugins","module","push","presetRegistration","presetsList","find","preset","name","addonOptions"],"mappings":";;;;+BAMgBA;;;eAAAA;;;AAAT,SAASA,QAAQC,MAA0B,EAAEC,OAA4B;IAC9E,MAAMC,oBAAoBC,gBAAgBF;IAE1CG,cAAc;QAAEJ;QAAQK,OAAO;YAACC,sBAAsBJ;SAAmB;IAAC;IAE1E,OAAOF;AACT;AAEA,MAAMO,WAAW,CAAoBC,QAAaA;AAClD,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;IACrBC,aAAa,CAAC;IACdC,2BAA2BL;AAC7B;AAEA,MAAMM,cACJC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eACrB,uDACA;AAEN,SAASV,sBAAsBN,MAA8B;IAC3D,MAAM,EAAEY,yBAAyB,EAAEK,cAAc,EAAEN,WAAW,EAAE,GAAGX;IAEnE,MAAMkB,SAAS;QAACC,QAAQC,OAAO,CAACP;QAAcI;KAAe;IAE7D,OAAO;QACLI,MAAM;QACN,GAAGV,WAAW;QACd;;;KAGC,GACDW,SAAS;QACTC,KAAK;YACH;;;QAGE,GACFC,QAAQL,QAAQC,OAAO,CAAC;YACxBnB,SAASW,0BAA0B;gBACjCa,SAAS;oBAACP;iBAAO;YACnB;QACF;IACF;AACF;AAEA;;;CAGC,GACD,SAASd,cAAcH,OAA4F;IACjH,MAAM,EAAED,MAAM,EAAEK,KAAK,EAAE,GAAGJ;QACVD;IAAhBA,OAAO0B,MAAM,GAAG1B,CAAAA,iBAAAA,OAAO0B,MAAM,cAAb1B,4BAAAA,iBAAiB,CAAC;QACZA;IAAtBA,OAAO0B,MAAM,CAACrB,KAAK,GAAGL,CAAAA,uBAAAA,OAAO0B,MAAM,CAACrB,KAAK,cAAnBL,kCAAAA,uBAAuB,EAAE;IAC/CA,OAAO0B,MAAM,CAACrB,KAAK,CAACsB,IAAI,IAAItB;IAE5B,OAAOL;AACT;AAEA,SAASG,gBAAgBF,OAA4B;QACxBA;IAA3B,MAAM2B,sBAAqB3B,uBAAAA,QAAQ4B,WAAW,cAAnB5B,2CAAAA,qBAAqB6B,IAAI,CAACC,CAAAA;QACnD,OAAOtB,iBAAiBY,IAAI,CAACU,OAAOC,IAAI;IAC1C;QAEqBJ;IAArB,MAAMK,eAAeL,CAAAA,8BAAAA,+BAAAA,yCAAAA,mBAAoB3B,OAAO,cAA3B2B,yCAAAA,8BAA+B,CAAC;IAErD,OAAO;QAAE,GAAGlB,cAAc;QAAE,GAAGuB,YAAY;IAAC;AAC9C"}
+{"version":3,"sources":["../src/webpack.ts"],"sourcesContent":["import type { PresetConfig } from './types';\n\ntype WebpackFinalFn = NonNullable<import('@storybook/react-webpack5').StorybookConfig['webpackFinal']>;\nexport type WebpackFinalConfig = Parameters<WebpackFinalFn>[0];\nexport type WebpackFinalOptions = Parameters<WebpackFinalFn>[1];\n\nexport function webpack(config: WebpackFinalConfig, options: WebpackFinalOptions) {\n  const addonPresetConfig = getAddonOptions(options);\n\n  registerRules({ config, rules: [createBabelLoaderRule(addonPresetConfig)] });\n\n  return config;\n}\n\nconst identity = <T extends unknown>(value: T) => value;\nconst addonFilePattern = /react-storybook-addon-export-to-sandbox\\/[a-z/]+.[jt]s$/;\nconst defaultOptions = {\n  webpackRule: {},\n  babelLoaderOptionsUpdater: identity,\n};\n\nconst PLUGIN_PATH =\n  process.env.BABEL_PRESET_FULL_SOURCE_DEV === 'true'\n    ? '@fluentui/babel-preset-storybook-full-source/__dev'\n    : '@fluentui/babel-preset-storybook-full-source';\n\nfunction createBabelLoaderRule(config: Required<PresetConfig>): import('webpack').RuleSetRule {\n  const { babelLoaderOptionsUpdater, importMappings, webpackRule } = config;\n\n  const plugin = [require.resolve(PLUGIN_PATH), importMappings];\n\n  return {\n    test: /\\.stories\\.(jsx?$|tsx?$)/,\n    ...webpackRule,\n    /**\n     * why the usage of 'post' ? - we need to run this loader after all storybook webpack rules/loaders have been executed.\n     * while we can use Array.prototype.unshift to \"override\" the indexes this approach is more declarative without additional hacks.\n     */\n    enforce: 'post',\n    use: {\n      /**\n       * Custom babel loader wraps the original babel-loader and fixes the incorrect `inputSourceMap` parameter\n       * that is passed to babel-loader.\n       **/\n      loader: require.resolve('./custom-babel-loader'),\n      options: babelLoaderOptionsUpdater({\n        plugins: [plugin],\n      }),\n    },\n  };\n}\n\n/**\n *\n * register custom Webpack Rules to webpack config\n */\nfunction registerRules(options: { rules: import('webpack').RuleSetRule[]; config: import('webpack').Configuration }) {\n  const { config, rules } = options;\n  config.module = config.module ?? {};\n  config.module.rules = config.module.rules ?? [];\n  config.module.rules.push(...rules);\n\n  return config;\n}\n\nfunction getAddonOptions(options: WebpackFinalOptions): Required<PresetConfig> {\n  const presetRegistration = options.presetsList?.find(preset => {\n    return addonFilePattern.test(preset.name);\n  });\n\n  const addonOptions = presetRegistration?.options ?? {};\n\n  return { ...defaultOptions, ...addonOptions };\n}\n"],"names":["webpack","config","options","addonPresetConfig","getAddonOptions","registerRules","rules","createBabelLoaderRule","identity","value","addonFilePattern","defaultOptions","webpackRule","babelLoaderOptionsUpdater","PLUGIN_PATH","importMappings","plugin","require","resolve","test","enforce","use","loader","plugins","module","push","presetRegistration","presetsList","find","preset","name","addonOptions"],"mappings":";;;;+BAMgBA;;;eAAAA;;;AAAT,SAASA,QAAQC,MAA0B,EAAEC,OAA4B;IAC9E,MAAMC,oBAAoBC,gBAAgBF;IAE1CG,cAAc;QAAEJ;QAAQK,OAAO;YAACC,sBAAsBJ;SAAmB;IAAC;IAE1E,OAAOF;AACT;AAEA,MAAMO,WAAW,CAAoBC,QAAaA;AAClD,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;IACrBC,aAAa,CAAC;IACdC,2BAA2BL;AAC7B;AAEA,MAAMM,cAGA;AAEN,SAASP,sBAAsBN,MAA8B;IAC3D,MAAM,EAAEY,yBAAyB,EAAEE,cAAc,EAAEH,WAAW,EAAE,GAAGX;IAEnE,MAAMe,SAAS;QAACC,QAAQC,OAAO,CAACJ;QAAcC;KAAe;IAE7D,OAAO;QACLI,MAAM;QACN,GAAGP,WAAW;QACd;;;KAGC,GACDQ,SAAS;QACTC,KAAK;YACH;;;QAGE,GACFC,QAAQL,QAAQC,OAAO,CAAC;YACxBhB,SAASW,0BAA0B;gBACjCU,SAAS;oBAACP;iBAAO;YACnB;QACF;IACF;AACF;AAEA;;;CAGC,GACD,SAASX,cAAcH,OAA4F;IACjH,MAAM,EAAED,MAAM,EAAEK,KAAK,EAAE,GAAGJ;QACVD;IAAhBA,OAAOuB,MAAM,GAAGvB,CAAAA,iBAAAA,OAAOuB,MAAM,cAAbvB,4BAAAA,iBAAiB,CAAC;QACZA;IAAtBA,OAAOuB,MAAM,CAAClB,KAAK,GAAGL,CAAAA,uBAAAA,OAAOuB,MAAM,CAAClB,KAAK,cAAnBL,kCAAAA,uBAAuB,EAAE;IAC/CA,OAAOuB,MAAM,CAAClB,KAAK,CAACmB,IAAI,IAAInB;IAE5B,OAAOL;AACT;AAEA,SAASG,gBAAgBF,OAA4B;QACxBA;IAA3B,MAAMwB,sBAAqBxB,uBAAAA,QAAQyB,WAAW,cAAnBzB,2CAAAA,qBAAqB0B,IAAI,CAACC,CAAAA;QACnD,OAAOnB,iBAAiBS,IAAI,CAACU,OAAOC,IAAI;IAC1C;QAEqBJ;IAArB,MAAMK,eAAeL,CAAAA,8BAAAA,+BAAAA,yCAAAA,mBAAoBxB,OAAO,cAA3BwB,yCAAAA,8BAA+B,CAAC;IAErD,OAAO;QAAE,GAAGf,cAAc;QAAE,GAAGoB,YAAY;IAAC;AAC9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-storybook-addon-export-to-sandbox",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Storybook addon that enables cloud/web sandbox exports for stories doc mode code examples",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,11 +34,16 @@
       "require": "./lib-commonjs/index.js"
     },
     "./preset": "./preset.js",
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
   "files": [
     "*.md",
     "dist/*.d.ts",
+    "dist/styles.css",
     "lib",
     "lib-commonjs",
     "preset.js"

package/preset.js

@@ -1,6 +1,14 @@
 /* eslint-disable no-shadow */
 
-const preset = require('./lib/preset/preset');
+// WHY is this importing from commonjs?
+//
+// Storybook expects presets to be commonjs, and we want to be able to export other things from this file (like webpack config) without Storybook trying to execute it.
+// If we used ESM, Storybook would try to execute the file and fail because of the non-commonjs exports.
+// This is limitation of our used legacy configuration via preset.js to support multiple Storybook versions.
+//
+// - `preset.js` needs to point to `./lib-commonjs/preset/preset` (proper CJS output) instead of `./lib/preset/preset` (ESM output).
+// - The `previewAnnotations` path stays on `./lib/` since it's just a file path handed to the browser bundler.
+const preset = require('./lib-commonjs/preset/preset');
 
 function previewAnnotations(entry = []) {
   return [...entry, require.resolve('./lib/preset/preview')];