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

package/lib/sandbox-utils.js.map

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

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

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

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

package/lib-commonjs/index.js.map

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

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

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

package/lib-commonjs/sandbox-factory.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/sandbox-factory.ts"],"sourcesContent":["import { getParameters } from 'codesandbox-import-utils/lib/api/define';\n\nimport { scaffold } from './sandbox-scaffold';\nimport { addHiddenInput, prepareData, prepareSandboxContainer, type Data } from './sandbox-utils';\nimport { StoryContext } from './types';\n\nconst defaultFileToPreview = encodeURIComponent('src/example.tsx');\n\nconst actionConfig = {\n  'codesandbox-cloud': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'codesandbox-browser': {\n    label: 'CodeSandbox',\n    factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n  },\n  'stackblitz-cloud': {\n    label: 'Stackblitz',\n    factory: (files: Record<string, string>, config: Data) => openStackblitz({ files, ...config }),\n  },\n};\n\nexport function addDemoActionButton(context: StoryContext) {\n  const { container, cssClasses } = prepareSandboxContainer(context);\n  const config = prepareData(context);\n  if (!config) {\n    throw new Error('issues with data');\n  }\n\n  addActionButton(container, config, cssClasses);\n}\n\nfunction addActionButton(container: HTMLElement, config: Data, classList: string[]) {\n  const files = scaffold[config.bundler](config);\n  const action = actionConfig[config.provider];\n\n  const button = document.createElement('button');\n  button.classList.add(...classList);\n  button.textContent = `Open in ${action.label}`;\n\n  container?.prepend(button);\n\n  button.addEventListener('click', _ev => {\n    action.factory(files, config);\n  });\n}\n\n/**\n *\n * @see https://developer.stackblitz.com/docs/platform/post-api/\n */\nfunction openStackblitz(data: { files: Record<string, string> } & Data) {\n  const { files, description, title } = data;\n  const form = document.createElement('form');\n  form.method = 'post';\n  form.target = '_blank';\n  form.action = `https://stackblitz.com/run?file=${defaultFileToPreview}`;\n  // node template - boots web-container\n  addHiddenInput(form, 'project[template]', 'node');\n  addHiddenInput(form, 'project[title]', title);\n  addHiddenInput(form, 'project[description]', `# ${description}`);\n\n  Object.keys(files).forEach(key => {\n    const value = files[key];\n    addHiddenInput(form, `project[files][${key}]`, value);\n  });\n\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n\n/**\n *\n * @see https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api\n */\nfunction openCodeSandbox({ files, provider }: { files: Record<string, string> } & Data) {\n  const normalizedFilesApi = Object.entries(files).reduce((acc, current) => {\n    acc[current[0]] = { isBinary: false, content: current[1] };\n    return acc;\n  }, {} as Record<string, { content: string; isBinary: boolean }>);\n\n  const env = provider === 'codesandbox-cloud' ? 'server' : 'browser';\n  const parameters = getParameters({ files: normalizedFilesApi });\n\n  const form = document.createElement('form');\n  form.method = 'POST';\n  form.target = '_blank';\n  form.action = `https://codesandbox.io/api/v1/sandboxes/define?environment=${env}`;\n\n  addHiddenInput(form, 'parameters', parameters);\n  addHiddenInput(form, 'query', `file=${defaultFileToPreview}`);\n  document.body.appendChild(form);\n  form.submit();\n  document.body.removeChild(form);\n}\n"],"names":["addDemoActionButton","defaultFileToPreview","encodeURIComponent","actionConfig","label","factory","files","config","openCodeSandbox","openStackblitz","context","container","cssClasses","prepareSandboxContainer","prepareData","Error","addActionButton","classList","scaffold","bundler","action","provider","button","document","createElement","add","textContent","prepend","addEventListener","_ev","data","description","title","form","method","target","addHiddenInput","Object","keys","forEach","key","value","body","appendChild","submit","removeChild","normalizedFilesApi","entries","reduce","acc","current","isBinary","content","env","parameters","getParameters"],"mappings":"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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

@@ -15,8 +15,8 @@ _export(exports, {
     prepareData: function() {
         return prepareData;
     },
-    prepareSandboxContainer: function() {
-        return prepareSandboxContainer;
+    prepareSandboxContainers: function() {
+        return prepareSandboxContainers;
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
@@ -29,25 +29,27 @@ function addHiddenInput(form, name, value) {
     input.value = value;
     form.appendChild(input);
 }
-function prepareSandboxContainer(context) {
-    const docsSelector = `#anchor--${context.id} .docs-story`;
-    const rootElement = document.querySelector(docsSelector);
-    if (!rootElement) {
-        throw new Error(`css selector: ${docsSelector}, doesn't exist `);
-    }
-    const showCodeButton = rootElement.querySelector('.docblock-code-toggle');
-    const container = showCodeButton === null || showCodeButton === void 0 ? void 0 : showCodeButton.parentElement;
-    if (!container) {
-        throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);
-    }
-    const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');
-    // remove button if it already existed
-    const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);
-    ourButtons.forEach((node)=>node.remove());
-    return {
-        container,
-        cssClasses: classList
-    };
+function prepareSandboxContainers(context) {
+    // 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 `);
+    return Array.from(rootElements).map((rootElement)=>{
+        const showCodeButton = rootElement.querySelector('.docblock-code-toggle');
+        const container = showCodeButton === null || showCodeButton === void 0 ? void 0 : showCodeButton.parentElement;
+        if (!container) throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);
+        const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');
+        // remove button if it already existed
+        const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);
+        ourButtons.forEach((node)=>node.remove());
+        return {
+            container,
+            cssClasses: classList
+        };
+    });
 }
 const addonConfigDefaults = {
     requiredDependencies: {},
@@ -55,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
@@ -79,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 prepareSandboxContainer(context: StoryContext) {\n  const docsSelector = `#anchor--${context.id} .docs-story`;\n  const rootElement = document.querySelector(docsSelector);\n\n  if (!rootElement) {\n    throw new Error(`css selector: ${docsSelector}, doesn't exist `);\n  }\n\n  const showCodeButton = rootElement.querySelector('.docblock-code-toggle');\n  const container = showCodeButton?.parentElement;\n\n  if (!container) {\n    throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);\n  }\n\n  const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');\n\n  // remove button if it already existed\n  const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);\n  ourButtons.forEach(node => node.remove());\n\n  return {\n    container,\n    cssClasses: classList,\n  };\n}\n\nconst addonConfigDefaults = { requiredDependencies: {}, optionalDependencies: {} };\nexport type Data = Pick<Required<ParametersConfig>, 'provider' | 'bundler'> & {\n  storyFile: string;\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  storyExportToken: string;\n  dependencies: Record<string, string>;\n  title: string;\n  description: string;\n};\n\nexport function prepareData(context: StoryContext): Data | null {\n  if (!context.parameters.exportToSandbox) {\n    throw new Error('exportToSandbox config parameter cannot be empty');\n  }\n\n  const addonConfig: Required<ParametersConfig> = {\n    ...addonConfigDefaults,\n    ...context.parameters.exportToSandbox,\n  };\n  const { provider, bundler } = addonConfig;\n  const storyFile = context.parameters?.fullSource;\n\n  if (!storyFile) {\n    console.error(\n      dedent`Export to Sandbox Addon: Couldn't find source for story ${context.title}. Did you install the babel plugin?`,\n    );\n    return null;\n  }\n\n  const { requiredDependencies, optionalDependencies } = addonConfig;\n  const dependencies = getDependencies(storyFile, requiredDependencies, optionalDependencies);\n\n  const title = 'FluentUI React v9';\n  const description = `Story demo: ${context.title} - ${context.name}`;\n\n  // use originalStoryFn because users can override the `storyName` property.\n  // We need the name of the exported function, not the actual story\n  // https://github.com/microsoft/fluentui-storybook-addons/issues/12\n  // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default\n  // just get the \"Default\"\n  // @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?\n  const storyExportToken = context.originalStoryFn.name.split('_stories_').slice(-1).pop();\n  if (!storyExportToken) {\n    throw new Error('issues processing story export token');\n  }\n\n  const demoData = {\n    storyFile,\n    storyExportToken,\n    provider,\n    bundler,\n    dependencies,\n    title,\n    description,\n  };\n\n  return demoData;\n}\n"],"names":["addHiddenInput","prepareData","prepareSandboxContainer","form","name","value","input","document","createElement","type","appendChild","context","docsSelector","id","rootElement","querySelector","Error","showCodeButton","container","parentElement","classList","split","ourButtons","querySelectorAll","forEach","node","remove","cssClasses","addonConfigDefaults","requiredDependencies","optionalDependencies","parameters","exportToSandbox","addonConfig","provider","bundler","storyFile","fullSource","console","error","dedent","title","dependencies","getDependencies","description","storyExportToken","originalStoryFn","slice","pop","demoData"],"mappings":";;;;;;;;;;;IAOgBA,cAAc;eAAdA;;IAkDAC,WAAW;eAAXA;;IA1CAC,uBAAuB;eAAvBA;;;;iEAfG;iCAEa;AAKzB,SAASF,eAAeG,IAAqB,EAAEC,IAAY,EAAEC,KAAa;IAC/E,MAAMC,QAAQC,SAASC,aAAa,CAAC;IACrCF,MAAMG,IAAI,GAAG;IACbH,MAAMF,IAAI,GAAGA;IACbE,MAAMD,KAAK,GAAGA;IACdF,KAAKO,WAAW,CAACJ;AACnB;AAEO,SAASJ,wBAAwBS,OAAqB;IAC3D,MAAMC,eAAe,CAAC,SAAS,EAAED,QAAQE,EAAE,CAAC,YAAY,CAAC;IACzD,MAAMC,cAAcP,SAASQ,aAAa,CAACH;IAE3C,IAAI,CAACE,aAAa;QAChB,MAAM,IAAIE,MAAM,CAAC,cAAc,EAAEJ,aAAa,gBAAgB,CAAC;IACjE;IAEA,MAAMK,iBAAiBH,YAAYC,aAAa,CAAC;IACjD,MAAMG,YAAYD,2BAAAA,qCAAAA,eAAgBE,aAAa;IAE/C,IAAI,CAACD,WAAW;QACd,MAAM,IAAIF,MAAM,CAAC,qDAAqD,CAAC;IACzE;IAEA,MAAMI,YAAY,AAACH,CAAAA,eAAeG,SAAS,CAACf,KAAK,GAAG,2BAA0B,EAAGgB,KAAK,CAAC;IAEvF,sCAAsC;IACtC,MAAMC,aAAaJ,UAAUK,gBAAgB,CAAC,CAAC,yBAAyB,CAAC;IACzED,WAAWE,OAAO,CAACC,CAAAA,OAAQA,KAAKC,MAAM;IAEtC,OAAO;QACLR;QACAS,YAAYP;IACd;AACF;AAEA,MAAMQ,sBAAsB;IAAEC,sBAAsB,CAAC;IAAGC,sBAAsB,CAAC;AAAE;AAe1E,SAAS7B,YAAYU,OAAqB;QAU7BA;IATlB,IAAI,CAACA,QAAQoB,UAAU,CAACC,eAAe,EAAE;QACvC,MAAM,IAAIhB,MAAM;IAClB;IAEA,MAAMiB,cAA0C;QAC9C,GAAGL,mBAAmB;QACtB,GAAGjB,QAAQoB,UAAU,CAACC,eAAe;IACvC;IACA,MAAM,EAAEE,QAAQ,EAAEC,OAAO,EAAE,GAAGF;IAC9B,MAAMG,aAAYzB,sBAAAA,QAAQoB,UAAU,cAAlBpB,0CAAAA,oBAAoB0B,UAAU;IAEhD,IAAI,CAACD,WAAW;QACdE,QAAQC,KAAK,CACXC,IAAAA,eAAM,CAAA,CAAC,wDAAwD,EAAE7B,QAAQ8B,KAAK,CAAC,mCAAmC,CAAC;QAErH,OAAO;IACT;IAEA,MAAM,EAAEZ,oBAAoB,EAAEC,oBAAoB,EAAE,GAAGG;IACvD,MAAMS,eAAeC,IAAAA,gCAAe,EAACP,WAAWP,sBAAsBC;IAEtE,MAAMW,QAAQ;IACd,MAAMG,cAAc,CAAC,YAAY,EAAEjC,QAAQ8B,KAAK,CAAC,GAAG,EAAE9B,QAAQP,IAAI,EAAE;IAEpE,2EAA2E;IAC3E,kEAAkE;IAClE,mEAAmE;IACnE,oFAAoF;IACpF,yBAAyB;IACzB,qFAAqF;IACrF,MAAMyC,mBAAmBlC,QAAQmC,eAAe,CAAC1C,IAAI,CAACiB,KAAK,CAAC,aAAa0B,KAAK,CAAC,CAAC,GAAGC,GAAG;IACtF,IAAI,CAACH,kBAAkB;QACrB,MAAM,IAAI7B,MAAM;IAClB;IAEA,MAAMiC,WAAW;QACfb;QACAS;QACAX;QACAC;QACAO;QACAD;QACAG;IACF;IAEA,OAAOK;AACT"}
+{"version":3,"sources":["../src/sandbox-utils.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport { getDependencies } from './getDependencies';\nimport { StoryContext, ParametersExtension } from './types';\n\ntype ParametersConfig = NonNullable<ParametersExtension['exportToSandbox']>;\n\nexport function addHiddenInput(form: HTMLFormElement, name: string, value: string) {\n  const input = document.createElement('input');\n  input.type = 'hidden';\n  input.name = name;\n  input.value = value;\n  form.appendChild(input);\n}\n\nexport function prepareSandboxContainers(context: StoryContext) {\n  // 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.1.3",
+  "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",
@@ -10,10 +10,6 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts-api-extractor": "*"
-  },
   "dependencies": {
     "@swc/helpers": "^0.5.1",
     "babel-loader": "^9.1.3",
@@ -22,9 +18,7 @@
     "dedent": "^1.2.0"
   },
   "peerDependencies": {
-    "@storybook/manager-api": "^7.6.20",
-    "@storybook/preview-api": "^7.6.20",
-    "@storybook/react": "^7.6.20"
+    "@storybook/react": "^9.1.17"
   },
   "beachball": {
     "disallowedChangeTypes": [
@@ -40,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')];