@storybook/cli 9.0.0-alpha.10 → 9.0.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bin/index.cjs +118 -123
- package/package.json +4 -4
package/dist/bin/index.cjs
CHANGED
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
${message}
|
|
69
69
|
|
|
70
70
|
For more information about upgrading, visit:
|
|
71
|
-
${import_picocolors46.default.cyan("https://storybook.js.org/docs/configure/upgrading")}`}}}});var import_common30=require("storybook/internal/common"),import_core_server2=require("storybook/internal/core-server"),import_node_logger4=require("storybook/internal/node-logger"),import_telemetry2=require("storybook/internal/telemetry"),import_commander=require("commander"),import_envinfo=__toESM(require("envinfo"),1),import_leven=__toESM(require("leven"),1),import_picocolors49=__toESM(require_picocolors(),1);var version="9.0.0-alpha.
|
|
71
|
+
${import_picocolors46.default.cyan("https://storybook.js.org/docs/configure/upgrading")}`}}}});var import_common30=require("storybook/internal/common"),import_core_server2=require("storybook/internal/core-server"),import_node_logger4=require("storybook/internal/node-logger"),import_telemetry2=require("storybook/internal/telemetry"),import_commander=require("commander"),import_envinfo=__toESM(require("envinfo"),1),import_leven=__toESM(require("leven"),1),import_picocolors49=__toESM(require_picocolors(),1);var version="9.0.0-alpha.11";var import_node_path2=require("path"),import_common3=require("storybook/internal/common"),import_csf_tools2=require("storybook/internal/csf-tools"),import_prompts=__toESM(require("prompts"),1),import_semver=__toESM(require("semver"),1),import_ts_dedent2=require("ts-dedent");var import_babel=require("storybook/internal/babel"),defaultRequireWrapperName="getAbsolutePath";function doesVariableOrFunctionDeclarationExist(node,name){return import_babel.types.isVariableDeclaration(node)&&node.declarations.length===1&&import_babel.types.isVariableDeclarator(node.declarations[0])&&import_babel.types.isIdentifier(node.declarations[0].id)&&node.declarations[0].id?.name===name||import_babel.types.isFunctionDeclaration(node)&&import_babel.types.isIdentifier(node.id)&&node.id.name===name}function getReferenceToRequireWrapper(config,value){return import_babel.types.callExpression(import_babel.types.identifier(getRequireWrapperName(config)??defaultRequireWrapperName),[import_babel.types.stringLiteral(value)])}function getRequireWrapperName(config){let declarationName=config.getBodyDeclarations().flatMap(node=>doesVariableOrFunctionDeclarationExist(node,"wrapForPnp")?["wrapForPnp"]:doesVariableOrFunctionDeclarationExist(node,defaultRequireWrapperName)?[defaultRequireWrapperName]:[]);return declarationName.length?declarationName[0]:null}function isRequireWrapperNecessary(node,cb=()=>{}){if(import_babel.types.isStringLiteral(node))return cb(node),!0;if(import_babel.types.isObjectExpression(node)){let nameProperty=node.properties.find(property=>import_babel.types.isObjectProperty(property)&&import_babel.types.isIdentifier(property.key)&&property.key.name==="name");if(nameProperty&&import_babel.types.isStringLiteral(nameProperty.value))return cb(nameProperty),!0}return import_babel.types.isArrayExpression(node)&&node.elements.some(element=>element&&isRequireWrapperNecessary(element))?(cb(node),!0):!1}function getFieldsForRequireWrapper(config){let frameworkNode=config.getFieldNode(["framework"]),builderNode=config.getFieldNode(["core","builder"]),rendererNode=config.getFieldNode(["core","renderer"]),addons=config.getFieldNode(["addons"]);return[...frameworkNode?[frameworkNode]:[],...builderNode?[builderNode]:[],...rendererNode?[rendererNode]:[],...addons&&import_babel.types.isArrayExpression(addons)?[addons]:[]]}function getRequireWrapperAsCallExpression(isConfigTypescript){let functionDeclaration={...import_babel.types.functionDeclaration(import_babel.types.identifier(defaultRequireWrapperName),[{...import_babel.types.identifier("value"),...isConfigTypescript?{typeAnnotation:import_babel.types.tsTypeAnnotation(import_babel.types.tSStringKeyword())}:{}}],import_babel.types.blockStatement([import_babel.types.returnStatement(import_babel.types.callExpression(import_babel.types.identifier("dirname"),[import_babel.types.callExpression(import_babel.types.memberExpression(import_babel.types.identifier("require"),import_babel.types.identifier("resolve")),[import_babel.types.callExpression(import_babel.types.identifier("join"),[import_babel.types.identifier("value"),import_babel.types.stringLiteral("package.json")])])]))])),...isConfigTypescript?{returnType:import_babel.types.tSTypeAnnotation(import_babel.types.tsAnyKeyword())}:{}};return import_babel.types.addComment(functionDeclaration,"leading",`*
|
|
72
72
|
* This function is used to resolve the absolute path of a package.
|
|
73
73
|
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
|
|
74
74
|
`),functionDeclaration}function wrapValueWithRequireWrapper(config,node){isRequireWrapperNecessary(node,n=>{if(import_babel.types.isStringLiteral(n)){let wrapperNode=getReferenceToRequireWrapper(config,n.value);Object.keys(n).forEach(k=>{delete n[k]}),Object.keys(wrapperNode).forEach(k=>{n[k]=wrapperNode[k]})}import_babel.types.isObjectProperty(n)&&import_babel.types.isStringLiteral(n.value)&&(n.value=getReferenceToRequireWrapper(config,n.value.value)),import_babel.types.isArrayExpression(n)&&n.elements.forEach((element,index,elements)=>{import_babel.types.isStringLiteral(element)&&(elements[index]=getReferenceToRequireWrapper(config,element.value))})})}var import_node_path=require("path"),import_cli=require("storybook/internal/cli"),import_common=require("storybook/internal/common"),import_common2=require("storybook/internal/common"),import_csf_tools=require("storybook/internal/csf-tools"),import_picocolors=__toESM(require_picocolors(),1),import_ts_dedent=require("ts-dedent"),logger=console,getFrameworkPackageName=mainConfig=>{let packageNameOrPath=typeof mainConfig?.framework=="string"?mainConfig.framework:mainConfig?.framework?.name;return packageNameOrPath?(0,import_common.extractProperFrameworkName)(packageNameOrPath):null},getRendererName=mainConfig=>{let frameworkPackageName=getFrameworkPackageName(mainConfig);if(!frameworkPackageName)return null;let frameworkName=import_common.frameworkPackages[frameworkPackageName];return import_cli.frameworkToRenderer[frameworkName]},getBuilderPackageName=mainConfig=>{let frameworkBuilder=getFrameworkOptions(mainConfig)?.builder,frameworkBuilderName=typeof frameworkBuilder=="string"?frameworkBuilder:frameworkBuilder?.options?.name,packageNameOrPath=(typeof mainConfig?.core?.builder=="string"?mainConfig.core.builder:mainConfig?.core?.builder?.name)??frameworkBuilderName;if(!packageNameOrPath)return null;let normalizedPath=(0,import_node_path.normalize)(packageNameOrPath).replace(new RegExp(/\\/,"g"),"/");return import_common.builderPackages.find(pkg=>normalizedPath.endsWith(pkg))||packageNameOrPath},getFrameworkOptions=mainConfig=>typeof mainConfig?.framework=="string"?null:mainConfig?.framework?.options??null,getRendererPackageNameFromFramework=frameworkPackageName=>{if(frameworkPackageName){if(Object.keys(import_common.rendererPackages).includes(frameworkPackageName))return frameworkPackageName;if(Object.values(import_common.rendererPackages).includes(frameworkPackageName))return Object.keys(import_common.rendererPackages).find(k=>import_common.rendererPackages[k]===frameworkPackageName)}return null},getStorybookData=async({packageManager,configDir:userDefinedConfigDir})=>{let packageJson=await packageManager.retrievePackageJson(),{mainConfig:mainConfigPath,version:storybookVersionSpecifier,configDir:configDirFromScript,previewConfig:previewConfigPath}=(0,import_common.getStorybookInfo)(packageJson,userDefinedConfigDir),storybookVersion=await(0,import_common2.getCoercedStorybookVersion)(packageManager),configDir=userDefinedConfigDir||configDirFromScript||".storybook",mainConfig;try{mainConfig=await(0,import_common.loadMainConfig)({configDir,noCache:!0})}catch(err){throw new Error(import_ts_dedent.dedent`Unable to find or evaluate ${import_picocolors.default.blue(mainConfigPath)}: ${String(err)}`)}return{configDir,mainConfig,storybookVersionSpecifier,storybookVersion,mainConfigPath,previewConfigPath,packageJson}},updateMainConfig=async({mainConfigPath,dryRun},callback)=>{try{let main=await(0,import_csf_tools.readConfig)(mainConfigPath);await callback(main),dryRun||await(0,import_csf_tools.writeConfig)(main)}catch(e){logger.info(`\u274C The migration failed to update your ${import_picocolors.default.blue(mainConfigPath)} on your behalf because of the following error:
|
|
@@ -145,7 +145,7 @@ ${err}`),info.source}let metaVariableName=csf._metaVariableName??"meta",programN
|
|
|
145
145
|
|
|
146
146
|
For more info, check out the docs:
|
|
147
147
|
${import_picocolors8.default.yellow("https://storybook.js.org/docs/api/csf/csf-factories")}
|
|
148
|
-
`))}};var import_common11=require("storybook/internal/common"),import_csf_tools5=require("storybook/internal/csf-tools"),import_fs2=require("fs"),jscodeshift=__toESM(require("jscodeshift"),1),import_path2=__toESM(require("path"),1),import_picocolors9=__toESM(require_picocolors(),1),import_ts_dedent5=require("ts-dedent");var ADDON_ID="storybook/test",TEST_PROVIDER_ID=`${ADDON_ID}/test-provider`,PANEL_ID=`${ADDON_ID}/panel`;var DOCUMENTATION_LINK="writing-tests/test-addon",
|
|
148
|
+
`))}};var import_common11=require("storybook/internal/common"),import_csf_tools5=require("storybook/internal/csf-tools"),import_fs2=require("fs"),jscodeshift=__toESM(require("jscodeshift"),1),import_path2=__toESM(require("path"),1),import_picocolors9=__toESM(require_picocolors(),1),import_ts_dedent5=require("ts-dedent");var ADDON_ID="storybook/test",TEST_PROVIDER_ID=`${ADDON_ID}/test-provider`,PANEL_ID=`${ADDON_ID}/panel`;var DOCUMENTATION_LINK="writing-tests/test-addon",DOCUMENTATION_FATAL_ERROR_LINK=`${DOCUMENTATION_LINK}#what-happens-if-vitest-itself-has-an-error`;var SUPPORTED_FRAMEWORKS=["@storybook/nextjs","@storybook/experimental-nextjs-vite","@storybook/sveltekit"],SUPPORTED_RENDERERS=["@storybook/react","@storybook/svelte","@storybook/vue3"],storeOptions={id:ADDON_ID,initialState:{config:{coverage:!1,a11y:!1},watching:!1}},STORE_CHANNEL_EVENT_NAME=`UNIVERSAL_STORE:${storeOptions.id}`;var fileExtensions=[".js",".ts",".cts",".mts",".cjs",".mjs",".jsx",".tsx"],addonA11yAddonTest={id:"addonA11yAddonTest",versionRange:["<8.5.0",">=8.5.0"],promptType(result){return result.setupFile===null&&result.previewFile===null?"manual":"auto"},async check({mainConfig,configDir}){let addons=(0,import_common11.getAddonNames)(mainConfig),frameworkPackageName=getFrameworkPackageName(mainConfig),rendererPackageName=getRendererName(mainConfig),hasA11yAddon=!!addons.find(addon=>addon.includes("@storybook/addon-a11y")),hasTestAddon=!!addons.find(addon=>addon.includes("@storybook/addon-test"));if(!SUPPORTED_FRAMEWORKS.find(framework=>frameworkPackageName?.includes(framework))&&!SUPPORTED_RENDERERS.find(renderer=>rendererPackageName?.includes(import_common11.rendererPackages[renderer]))||!hasA11yAddon||!hasTestAddon||!configDir)return null;let vitestSetupFile=fileExtensions.map(ext=>import_path2.default.join(configDir,`vitest.setup${ext}`)).find(filePath=>(0,import_fs2.existsSync)(filePath))??null,previewFile=fileExtensions.map(ext=>import_path2.default.join(configDir,`preview${ext}`)).find(filePath=>(0,import_fs2.existsSync)(filePath))??null,skipVitestSetupTransformation=!1,skipPreviewTransformation=!1;if(vitestSetupFile&&previewFile){let vitestSetupSource=(0,import_fs2.readFileSync)(vitestSetupFile,"utf8"),previewSetupSource=(0,import_fs2.readFileSync)(previewFile,"utf8");if(skipVitestSetupTransformation=vitestSetupSource.includes("@storybook/addon-a11y"),skipPreviewTransformation=!shouldPreviewFileBeTransformed(previewSetupSource),skipVitestSetupTransformation&&skipPreviewTransformation)return null}let getTransformedSetupCode=()=>{if(!vitestSetupFile||skipVitestSetupTransformation)return null;try{let vitestSetupSource=(0,import_fs2.readFileSync)(vitestSetupFile,"utf8");return transformSetupFile(vitestSetupSource)}catch{return null}},getTransformedPreviewCode=()=>{if(!previewFile||skipPreviewTransformation)return null;try{let previewSetupSource=(0,import_fs2.readFileSync)(previewFile,"utf8");return transformPreviewFile(previewSetupSource,previewFile)}catch{return null}};return{setupFile:vitestSetupFile,previewFile,transformedSetupCode:getTransformedSetupCode(),transformedPreviewCode:await getTransformedPreviewCode(),skipVitestSetupTransformation,skipPreviewTransformation}},prompt({setupFile,previewFile,transformedSetupCode,transformedPreviewCode,skipPreviewTransformation,skipVitestSetupTransformation}){let prompt=[import_ts_dedent5.dedent`
|
|
149
149
|
We have detected that you have ${import_picocolors9.default.magenta("@storybook/addon-a11y")} and ${import_picocolors9.default.magenta("@storybook/addon-test")} installed.
|
|
150
150
|
|
|
151
151
|
${import_picocolors9.default.magenta("@storybook/addon-a11y")} now integrates with ${import_picocolors9.default.magenta("@storybook/addon-test")} to provide automatic accessibility checks for your stories, powered by Axe and Vitest.
|
|
@@ -185,77 +185,67 @@ ${err}`),info.source}let metaVariableName=csf._metaVariableName??"meta",programN
|
|
|
185
185
|
`),parametersLineIndex=lines.findIndex(line=>line.includes('test: "todo"')||line.includes("test: 'todo'"));if(parametersLineIndex===-1)return formattedPreviewConfig;let indentation=lines[parametersLineIndex]?.match(/^\s*/)?.[0],comment=`${indentation}// 'todo' - show a11y violations in the test UI only
|
|
186
186
|
${indentation}// 'error' - fail CI on a11y violations
|
|
187
187
|
${indentation}// 'off' - skip a11y checks entirely`;return lines.splice(parametersLineIndex,0,comment),(0,import_common11.formatFileContent)(filePath,lines.join(`
|
|
188
|
-
`))}function shouldPreviewFileBeTransformed(source){return!(0,import_csf_tools5.loadConfig)(source).parse().getFieldNode(["parameters","a11y","test"])}var
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
${import_picocolors10.default.yellow("@storybook/addon-docs")} has been removed from ${import_picocolors10.default.yellow("@storybook/addon-essentials")}.
|
|
192
|
-
We'll remove the docs disabling configuration since it's no longer needed.
|
|
193
|
-
`:import_ts_dedent6.dedent`
|
|
194
|
-
We've detected that you have ${import_picocolors10.default.yellow("@storybook/addon-essentials")} with docs enabled.
|
|
195
|
-
|
|
196
|
-
${import_picocolors10.default.yellow("@storybook/addon-docs")} has been removed from ${import_picocolors10.default.yellow("@storybook/addon-essentials")}.
|
|
197
|
-
We'll install ${import_picocolors10.default.yellow("@storybook/addon-docs")} separately and add it to your configuration.
|
|
198
|
-
`},async run({result,dryRun,packageManager,mainConfigPath}){let{hasEssentials,hasDocsDisabled,hasDocsAddon}=result;hasEssentials&&(await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{let essentialsIndex=(main.getFieldValue(["addons"])||[]).findIndex(addon=>typeof addon=="string"?addon.includes("@storybook/addon-essentials"):addon?.name.includes("@storybook/addon-essentials"));essentialsIndex!==-1&&main.removeField(["addons",essentialsIndex,"options","docs"])}),!dryRun&&!hasDocsDisabled&&!hasDocsAddon&&await packageManager.runPackageCommand("storybook",["add","@storybook/addon-docs"]))}};var import_fs3=require("fs"),import_picocolors11=__toESM(require_picocolors(),1),import_ts_dedent7=require("ts-dedent"),logger5=console,addonExperimentalTest={id:"addon-experimental-test",versionRange:["*","*"],promptType:"auto",async check({packageManager}){if(!await packageManager.getPackageVersion("@storybook/experimental-addon-test"))return null;let{globbySync}=await import("globby"),matchingFiles=globbySync(["**/.storybook/**/*.*","**/vitest.*.{js,ts,mjs,cjs}","**/vite.config.{js,ts,mjs,cjs}"],{ignore:["**/node_modules/**","**/dist/**"]}),filesWithExperimentalAddon=[];for(let file of matchingFiles)try{(0,import_fs3.readFileSync)(file,"utf-8").includes("@storybook/experimental-addon-test")&&filesWithExperimentalAddon.push(file)}catch{}return{matchingFiles:filesWithExperimentalAddon}},prompt({matchingFiles}){let fileCount=matchingFiles.length,fileList=matchingFiles.slice(0,5).map(file=>` - ${import_picocolors11.default.cyan(file)}`).join(`
|
|
199
|
-
`),hasMoreFiles=fileCount>5;return import_ts_dedent7.dedent`
|
|
200
|
-
We've detected you're using ${import_picocolors11.default.cyan("@storybook/experimental-addon-test")}, which is now available as a stable addon.
|
|
188
|
+
`))}function shouldPreviewFileBeTransformed(source){return!(0,import_csf_tools5.loadConfig)(source).parse().getFieldNode(["parameters","a11y","test"])}var import_fs3=require("fs"),import_picocolors10=__toESM(require_picocolors(),1),import_ts_dedent6=require("ts-dedent"),logger5=console,addonExperimentalTest={id:"addon-experimental-test",versionRange:["*","*"],promptType:"auto",async check({packageManager}){if(!await packageManager.getPackageVersion("@storybook/experimental-addon-test"))return null;let{globbySync}=await import("globby"),matchingFiles=globbySync(["**/.storybook/**/*.*","**/vitest.*.{js,ts,mjs,cjs}","**/vite.config.{js,ts,mjs,cjs}"],{ignore:["**/node_modules/**","**/dist/**"]}),filesWithExperimentalAddon=[];for(let file of matchingFiles)try{(0,import_fs3.readFileSync)(file,"utf-8").includes("@storybook/experimental-addon-test")&&filesWithExperimentalAddon.push(file)}catch{}return{matchingFiles:filesWithExperimentalAddon}},prompt({matchingFiles}){let fileCount=matchingFiles.length,fileList=matchingFiles.slice(0,5).map(file=>` - ${import_picocolors10.default.cyan(file)}`).join(`
|
|
189
|
+
`),hasMoreFiles=fileCount>5;return import_ts_dedent6.dedent`
|
|
190
|
+
We've detected you're using ${import_picocolors10.default.cyan("@storybook/experimental-addon-test")}, which is now available as a stable addon.
|
|
201
191
|
|
|
202
|
-
We can automatically migrate your project to use ${
|
|
192
|
+
We can automatically migrate your project to use ${import_picocolors10.default.cyan("@storybook/addon-test")} instead.
|
|
203
193
|
|
|
204
194
|
This will update ${fileCount} file(s) and your package.json:
|
|
205
195
|
${fileList}${hasMoreFiles?`
|
|
206
196
|
... and ${fileCount-5} more files`:""}
|
|
207
|
-
`},async run({result:{matchingFiles},packageManager,dryRun}){for(let file of matchingFiles){let updatedContent=(0,import_fs3.readFileSync)(file,"utf-8").replace(/@storybook\/experimental-addon-test/g,"@storybook/addon-test");dryRun||(0,import_fs3.writeFileSync)(file,updatedContent,"utf-8")}if(!dryRun){let devDependencies=(await packageManager.retrievePackageJson()).devDependencies??{},storybookVersion=await packageManager.getPackageVersion("storybook"),isExperimentalAddonTestDevDependency=Object.keys(devDependencies).includes("@storybook/experimental-addon-test");await packageManager.removeDependencies({},["@storybook/experimental-addon-test"]),await packageManager.addDependencies({installAsDevDependencies:isExperimentalAddonTestDevDependency},[`@storybook/addon-test@${storybookVersion}`])}logger5.info(
|
|
208
|
-
✅ Successfully migrated from ${
|
|
197
|
+
`},async run({result:{matchingFiles},packageManager,dryRun}){for(let file of matchingFiles){let updatedContent=(0,import_fs3.readFileSync)(file,"utf-8").replace(/@storybook\/experimental-addon-test/g,"@storybook/addon-test");dryRun||(0,import_fs3.writeFileSync)(file,updatedContent,"utf-8")}if(!dryRun){let devDependencies=(await packageManager.retrievePackageJson()).devDependencies??{},storybookVersion=await packageManager.getPackageVersion("storybook"),isExperimentalAddonTestDevDependency=Object.keys(devDependencies).includes("@storybook/experimental-addon-test");await packageManager.removeDependencies({},["@storybook/experimental-addon-test"]),await packageManager.addDependencies({installAsDevDependencies:isExperimentalAddonTestDevDependency},[`@storybook/addon-test@${storybookVersion}`])}logger5.info(import_ts_dedent6.dedent`
|
|
198
|
+
✅ Successfully migrated from ${import_picocolors10.default.cyan("@storybook/experimental-addon-test")} to ${import_picocolors10.default.cyan("@storybook/addon-test")}
|
|
209
199
|
✅ Updated package.json dependency
|
|
210
200
|
✅ Updated ${matchingFiles.length} file(s)
|
|
211
|
-
`)}};var
|
|
212
|
-
${
|
|
201
|
+
`)}};var import_common12=require("storybook/internal/common"),import_picocolors11=__toESM(require_picocolors(),1),import_ts_dedent7=require("ts-dedent"),addonPostCSS={id:"addon-postcss",versionRange:["*","*"],promptType:"notification",async check({mainConfig}){return!(0,import_common12.getAddonNames)(mainConfig).find(addon=>addon.includes("@storybook/addon-postcss"))?null:{hasAddonPostcss:!0}},prompt(){return import_ts_dedent7.dedent`
|
|
202
|
+
${import_picocolors11.default.bold("Attention")}: We've detected that you're using the following package which is incompatible with Storybook 8 and beyond:
|
|
213
203
|
|
|
214
|
-
- ${
|
|
204
|
+
- ${import_picocolors11.default.cyan("@storybook/addon-postcss")}
|
|
215
205
|
|
|
216
|
-
Please migrate to ${
|
|
217
|
-
`}};var
|
|
218
|
-
${
|
|
206
|
+
Please migrate to ${import_picocolors11.default.cyan("@storybook/addon-styling-webpack")} once you're done upgrading.
|
|
207
|
+
`}};var import_picocolors12=__toESM(require_picocolors(),1),import_ts_dedent8=require("ts-dedent"),addonsAPI={id:"addons-api",versionRange:["*","*"],promptType:"notification",async check({packageManager}){return!(await packageManager.getAllDependencies())["@storybook/addons"]?null:{usesAddonsAPI:!0}},prompt(){return import_ts_dedent8.dedent`
|
|
208
|
+
${import_picocolors12.default.bold("Attention")}: We've detected that you're using the following package which is removed in Storybook 8 and beyond:
|
|
219
209
|
|
|
220
|
-
- ${
|
|
210
|
+
- ${import_picocolors12.default.cyan("@storybook/addons")}
|
|
221
211
|
|
|
222
|
-
This package has been deprecated and replaced with ${
|
|
212
|
+
This package has been deprecated and replaced with ${import_picocolors12.default.cyan("storybook/preview-api")} and ${import_picocolors12.default.cyan("storybook/manager-api")}.
|
|
223
213
|
|
|
224
214
|
You can find more information about the new addons API in the migration guide:
|
|
225
|
-
${
|
|
226
|
-
`}};var import_cli2=require("storybook/internal/cli"),
|
|
215
|
+
${import_picocolors12.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-addons-api")}
|
|
216
|
+
`}};var import_cli2=require("storybook/internal/cli"),import_picocolors13=__toESM(require_picocolors(),1),import_prompts3=__toESM(require("prompts"),1),import_ts_dedent9=require("ts-dedent");var angularBuilders={id:"angular-builders",versionRange:["<7",">=7"],async check({packageManager,mainConfig}){let angularVersion=await packageManager.getPackageVersion("@angular/core"),framewworkPackageName=getFrameworkPackageName(mainConfig);if(!angularVersion||await(0,import_cli2.isNxProject)()||framewworkPackageName!=="@storybook/angular")return null;let angularJSON=new import_cli2.AngularJSON,{hasStorybookBuilder}=angularJSON;return hasStorybookBuilder||!angularJSON.rootProject&&Object.keys(angularJSON.projects).length>1?null:{mainConfig,packageManager}},prompt(){return import_ts_dedent9.dedent`
|
|
227
217
|
We have detected that your project does not use the Storybook Angular builder yet. In Storybook 6.4 we deprecated calling Storybook directly (npm run storybook) for Angular. In Storybook 7.0, we've removed it entirely.
|
|
228
218
|
|
|
229
219
|
In order to use the Storybook Angular builder, we need to add a few entries to your angular.json file. Additionally, we will add the @compodoc/compodoc package to your devDependencies if you want and we will add a few scripts to your package.json file.
|
|
230
220
|
|
|
231
221
|
Also feel free to remove the Compodoc script from your package.json file if you don't use it apart from Storybook anymore. Storybook uses Compodoc internally and you don't have to call in separately anymore.
|
|
232
222
|
|
|
233
|
-
Read more about the Angular builder here: ${
|
|
234
|
-
`},async run({result}){let angularJSON=new import_cli2.AngularJSON,{packageManager}=result,{useCompoDoc}=await(0,import_prompts3.default)({type:"confirm",name:"useCompoDoc",message:"Have you set up compodoc in Storybook previously?"}),angularProjectName=await angularJSON.getProjectName();angularJSON.addStorybookEntries({angularProjectName,storybookFolder:".storybook",useCompodoc:useCompoDoc,root:"."}),angularJSON.write(),await packageManager.addScripts({storybook:`ng run ${angularProjectName}:storybook`,"build-storybook":`ng run ${angularProjectName}:build-storybook`})}};var import_cli3=require("storybook/internal/cli"),
|
|
235
|
-
In Storybook 6.4 we have deprecated calling Storybook directly (npm run storybook) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your ${
|
|
223
|
+
Read more about the Angular builder here: ${import_picocolors13.default.yellow("https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular#how-do-i-migrate-to-an-angular-storybook-builder")}
|
|
224
|
+
`},async run({result}){let angularJSON=new import_cli2.AngularJSON,{packageManager}=result,{useCompoDoc}=await(0,import_prompts3.default)({type:"confirm",name:"useCompoDoc",message:"Have you set up compodoc in Storybook previously?"}),angularProjectName=await angularJSON.getProjectName();angularJSON.addStorybookEntries({angularProjectName,storybookFolder:".storybook",useCompodoc:useCompoDoc,root:"."}),angularJSON.write(),await packageManager.addScripts({storybook:`ng run ${angularProjectName}:storybook`,"build-storybook":`ng run ${angularProjectName}:build-storybook`})}};var import_cli3=require("storybook/internal/cli"),import_picocolors14=__toESM(require_picocolors(),1),import_semver5=__toESM(require("semver"),1),import_ts_dedent10=require("ts-dedent");var angularBuildersMultiproject={id:"angular-builders-multiproject",promptType:"manual",versionRange:["<7",">=7"],async check({packageManager,mainConfig}){let angularVersion=await packageManager.getPackageVersion("@angular/core"),frameworkPackageName=getFrameworkPackageName(mainConfig);if(await(0,import_cli3.isNxProject)()||frameworkPackageName!=="@storybook/angular"||!angularVersion||import_semver5.default.lt(angularVersion,"14.0.0"))return null;let angularJSON=new import_cli3.AngularJSON,{hasStorybookBuilder}=angularJSON;return hasStorybookBuilder||angularJSON.rootProject||Object.keys(angularJSON.projects).length===1?null:{}},prompt(){return import_ts_dedent10.dedent`
|
|
225
|
+
In Storybook 6.4 we have deprecated calling Storybook directly (npm run storybook) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your ${import_picocolors14.default.yellow("angular.json")} and execute ${import_picocolors14.default.yellow("ng run <your-project>:storybook")} to start Storybook.
|
|
236
226
|
|
|
237
|
-
❌ Your Angular workspace uses multiple projects defined in the ${
|
|
238
|
-
`}};var import_csf_tools6=require("storybook/internal/csf-tools"),
|
|
239
|
-
❌ Failed to remove the deprecated ${
|
|
227
|
+
❌ Your Angular workspace uses multiple projects defined in the ${import_picocolors14.default.yellow("angular.json")} file and we were not able to detect a root project. Therefore we are not able to automigrate to use Angular Storybook builder. Instead, please visit ${import_picocolors14.default.yellow("https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular")} to do the migration manually.
|
|
228
|
+
`}};var import_csf_tools6=require("storybook/internal/csf-tools"),import_picocolors15=__toESM(require_picocolors(),1),import_ts_dedent11=require("ts-dedent");var logger6=console,MIGRATION="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated",autodocsTags={id:"autodocs-tags",versionRange:["*.*.*",">=8.0.*"],async check({mainConfig,mainConfigPath,previewConfigPath}){let autodocs=mainConfig?.docs?.autodocs;if(autodocs===void 0)return null;if(autodocs===!0&&!previewConfigPath)throw Error(import_ts_dedent11.dedent`
|
|
229
|
+
❌ Failed to remove the deprecated ${import_picocolors15.default.cyan("docs.autodocs")} setting from ${import_picocolors15.default.cyan(mainConfigPath)}.
|
|
240
230
|
|
|
241
|
-
There is no preview config file in which to add the ${
|
|
231
|
+
There is no preview config file in which to add the ${import_picocolors15.default.cyan("autodocs")} tag.
|
|
242
232
|
|
|
243
|
-
Please perform the migration by hand: ${
|
|
244
|
-
`);return{autodocs,mainConfigPath,previewConfigPath}},prompt({autodocs,mainConfigPath,previewConfigPath}){let falseMessage="",trueMessage="";return autodocs===!1?falseMessage=
|
|
233
|
+
Please perform the migration by hand: ${import_picocolors15.default.yellow(MIGRATION)}
|
|
234
|
+
`);return{autodocs,mainConfigPath,previewConfigPath}},prompt({autodocs,mainConfigPath,previewConfigPath}){let falseMessage="",trueMessage="";return autodocs===!1?falseMessage=import_ts_dedent11.dedent`
|
|
245
235
|
|
|
246
236
|
|
|
247
|
-
There is no ${
|
|
248
|
-
You'll need to check your stories to ensure none are tagged with ${
|
|
249
|
-
`:autodocs===!0&&(trueMessage=` and update ${
|
|
250
|
-
The ${
|
|
237
|
+
There is no ${import_picocolors15.default.cyan("docs.autodocs = false")} equivalent.
|
|
238
|
+
You'll need to check your stories to ensure none are tagged with ${import_picocolors15.default.cyan("autodocs")}.
|
|
239
|
+
`:autodocs===!0&&(trueMessage=` and update ${import_picocolors15.default.cyan(previewConfigPath)}`),import_ts_dedent11.dedent`
|
|
240
|
+
The ${import_picocolors15.default.cyan("docs.autodocs")} setting in ${import_picocolors15.default.cyan(mainConfigPath)} is deprecated.${falseMessage}
|
|
251
241
|
|
|
252
|
-
Learn more: ${
|
|
242
|
+
Learn more: ${import_picocolors15.default.yellow(MIGRATION)}
|
|
253
243
|
|
|
254
|
-
Remove ${
|
|
255
|
-
`},async run({dryRun,mainConfigPath,result}){if(!dryRun){if(result.autodocs===!0){logger6.info(`\u2705 Adding "autodocs" tag to ${result.previewConfigPath}`);let previewConfig=await(0,import_csf_tools6.readConfig)(result.previewConfigPath);previewConfig.getFieldNode(["tags"])?previewConfig.appendValueToArray(["tags"],"autodocs"):previewConfig.setFieldValue(["tags"],["autodocs"]),await(0,import_csf_tools6.writeConfig)(previewConfig)}await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{logger6.info(`\u2705 Removing "docs.autodocs" from ${mainConfigPath}`),main.removeField(["docs","autodocs"])})}}};var
|
|
244
|
+
Remove ${import_picocolors15.default.cyan("docs.autodocs")}${trueMessage}?
|
|
245
|
+
`},async run({dryRun,mainConfigPath,result}){if(!dryRun){if(result.autodocs===!0){logger6.info(`\u2705 Adding "autodocs" tag to ${result.previewConfigPath}`);let previewConfig=await(0,import_csf_tools6.readConfig)(result.previewConfigPath);previewConfig.getFieldNode(["tags"])?previewConfig.appendValueToArray(["tags"],"autodocs"):previewConfig.setFieldValue(["tags"],["autodocs"]),await(0,import_csf_tools6.writeConfig)(previewConfig)}await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{logger6.info(`\u2705 Removing "docs.autodocs" from ${mainConfigPath}`),main.removeField(["docs","autodocs"])})}}};var import_picocolors16=__toESM(require_picocolors(),1),import_ts_dedent12=require("ts-dedent");var logger7=console,autodocsTrue={id:"autodocsTrue",versionRange:["<7",">=7"],async check({mainConfig}){let{docs}=mainConfig,docsPageToAutodocsMapping={true:"tag",automatic:!0,false:!1};if(docs?.docsPage){let oldValue=docs?.docsPage.toString();if(!(oldValue in docsPageToAutodocsMapping))throw new Error(`Unexpected value for docs.docsPage: ${oldValue}`);return{value:docsPageToAutodocsMapping[oldValue]}}return docs?.autodocs===void 0?{value:!0}:null},prompt({value}){let autodocsFormatted=import_picocolors16.default.cyan(`docs: { autodocs: ${JSON.stringify(value??!0)} }`),tagWarning=import_ts_dedent12.dedent`
|
|
256
246
|
NOTE: if you're upgrading from an older 7.0-beta using the 'docsPage' tag,
|
|
257
247
|
please update your story files to use the 'autodocs' tag instead.
|
|
258
|
-
`;return value?
|
|
248
|
+
`;return value?import_ts_dedent12.dedent`
|
|
259
249
|
We've changed the configuration of autodocs (previous docsPage), so now the value:
|
|
260
250
|
- docs.autodocs: true -- means automatically create docs for every CSF file
|
|
261
251
|
- docs.autodocs: 'tag' -- means only create autodocs for CSF files with the 'autodocs' tag
|
|
@@ -265,24 +255,24 @@ ${indentation}// 'off' - skip a11y checks entirely`;return lines.splice(paramete
|
|
|
265
255
|
|
|
266
256
|
${autodocsFormatted}
|
|
267
257
|
${value==="tag"?tagWarning:""}
|
|
268
|
-
More info: ${
|
|
269
|
-
`:
|
|
258
|
+
More info: ${import_picocolors16.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes")}
|
|
259
|
+
`:import_ts_dedent12.dedent`
|
|
270
260
|
We've detected that your main.js configuration file has not configured autodocs. In 6.x we
|
|
271
261
|
we defaulted to having a autodocs for every story, in 7.x you need to opt in per-component.
|
|
272
262
|
However, we can set the \`docs.autodocs\` to true to approximate the old behaviour:
|
|
273
263
|
|
|
274
264
|
${autodocsFormatted}
|
|
275
265
|
|
|
276
|
-
More info: ${
|
|
277
|
-
`},async run({result:{value},dryRun,mainConfigPath}){logger7.info("\u2705 Setting 'docs.autodocs' to true in main.js"),dryRun||await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{main.removeField(["docs","docsPage"]),main.setFieldValue(["docs","autodocs"],value??!0)})}};var import_cli4=require("storybook/internal/cli"),import_csf_tools7=require("storybook/internal/csf-tools"),
|
|
266
|
+
More info: ${import_picocolors16.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes")}
|
|
267
|
+
`},async run({result:{value},dryRun,mainConfigPath}){logger7.info("\u2705 Setting 'docs.autodocs' to true in main.js"),dryRun||await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{main.removeField(["docs","docsPage"]),main.setFieldValue(["docs","autodocs"],value??!0)})}};var import_cli4=require("storybook/internal/cli"),import_csf_tools7=require("storybook/internal/csf-tools"),import_picocolors17=__toESM(require_picocolors(),1),import_ts_dedent13=require("ts-dedent");var logger8=console,builderVite={id:"builder-vite",versionRange:["<7",">=7"],async check({packageManager,mainConfig}){let packageJson=await packageManager.retrievePackageJson(),builder=mainConfig.core?.builder;return(typeof builder=="string"?builder:builder?.name)!=="storybook-builder-vite"?null:{builder,packageJson}},prompt({builder}){let builderFormatted=import_picocolors17.default.cyan(JSON.stringify(builder,null,2));return import_ts_dedent13.dedent`
|
|
278
268
|
We've detected you're using the community vite builder: ${builderFormatted}
|
|
279
269
|
|
|
280
|
-
'storybook-builder-vite' is deprecated and now located at ${
|
|
270
|
+
'storybook-builder-vite' is deprecated and now located at ${import_picocolors17.default.cyan("@storybook/builder-vite")}.
|
|
281
271
|
|
|
282
272
|
We can upgrade your project to use the new builder automatically.
|
|
283
273
|
|
|
284
|
-
More info: ${
|
|
285
|
-
`},async run({result:{builder,packageJson},packageManager,dryRun,mainConfigPath}){let{dependencies={},devDependencies={}}=packageJson;if(logger8.info("\u2705 Removing existing 'storybook-builder-vite' dependency"),dryRun||(delete dependencies["storybook-builder-vite"],delete devDependencies["storybook-builder-vite"],await packageManager.writePackageJson(packageJson)),logger8.info("\u2705 Adding '@storybook/builder-vite' as dev dependency"),!dryRun){let versionToInstall=(0,import_cli4.getStorybookVersionSpecifier)(await packageManager.retrievePackageJson());await packageManager.addDependencies({installAsDevDependencies:!0},[`@storybook/builder-vite@${versionToInstall}`])}logger8.info("\u2705 Updating main.js to use vite builder"),dryRun||await updateMainConfig({dryRun:!!dryRun,mainConfigPath},async main=>{let updatedBuilder=typeof builder=="string"?"@storybook/builder-vite":{name:"@storybook/builder-vite",options:builder.options};main.setFieldValue(["core","builder"],updatedBuilder),await(0,import_csf_tools7.writeConfig)(main)})}};var import_promises2=require("fs/promises"),
|
|
274
|
+
More info: ${import_picocolors17.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed")}
|
|
275
|
+
`},async run({result:{builder,packageJson},packageManager,dryRun,mainConfigPath}){let{dependencies={},devDependencies={}}=packageJson;if(logger8.info("\u2705 Removing existing 'storybook-builder-vite' dependency"),dryRun||(delete dependencies["storybook-builder-vite"],delete devDependencies["storybook-builder-vite"],await packageManager.writePackageJson(packageJson)),logger8.info("\u2705 Adding '@storybook/builder-vite' as dev dependency"),!dryRun){let versionToInstall=(0,import_cli4.getStorybookVersionSpecifier)(await packageManager.retrievePackageJson());await packageManager.addDependencies({installAsDevDependencies:!0},[`@storybook/builder-vite@${versionToInstall}`])}logger8.info("\u2705 Updating main.js to use vite builder"),dryRun||await updateMainConfig({dryRun:!!dryRun,mainConfigPath},async main=>{let updatedBuilder=typeof builder=="string"?"@storybook/builder-vite":{name:"@storybook/builder-vite",options:builder.options};main.setFieldValue(["core","builder"],updatedBuilder),await(0,import_csf_tools7.writeConfig)(main)})}};var import_promises2=require("fs/promises"),import_common13=require("storybook/internal/common"),import_prompts4=__toESM(require("prompts"),1),import_ts_dedent14=require("ts-dedent");var consolidatedPackages={"@storybook/channels":"storybook/internal/channels","@storybook/client-logger":"storybook/internal/client-logger","@storybook/core-common":"storybook/internal/common","@storybook/core-events":"storybook/internal/core-events","@storybook/csf-tools":"storybook/internal/csf-tools","@storybook/docs-tools":"storybook/internal/docs-tools","@storybook/node-logger":"storybook/internal/node-logger","@storybook/preview-api":"storybook/preview-api","@storybook/router":"storybook/internal/router","@storybook/telemetry":"storybook/internal/telemetry","@storybook/theming":"storybook/theming","@storybook/types":"storybook/internal/types","@storybook/manager-api":"storybook/manager-api","@storybook/manager":"storybook/internal/manager","@storybook/preview":"storybook/internal/preview","@storybook/core-server":"storybook/internal/core-server","@storybook/builder-manager":"storybook/internal/builder-manager","@storybook/components":"storybook/internal/components","@storybook/test":"storybook/test","@storybook/addon-actions":"storybook/actions","@storybook/addon-controls":"storybook/internal/controls","@storybook/addon-toolbars":"storybook/internal/toolbars","@storybook/addon-viewport":"storybook/viewport"};function transformPackageJson(content){let packageJson=JSON.parse(content),hasChanges=!1;if(packageJson.dependencies)for(let[dep,version2]of Object.entries(packageJson.dependencies))dep in consolidatedPackages&&(delete packageJson.dependencies[dep],hasChanges=!0);if(packageJson.devDependencies)for(let[dep,version2]of Object.entries(packageJson.devDependencies))dep in consolidatedPackages&&(delete packageJson.devDependencies[dep],hasChanges=!0);return hasChanges?JSON.stringify(packageJson,null,2):null}function transformImports(source){let hasChanges=!1,transformed=source;for(let[from,to]of Object.entries(consolidatedPackages)){let regex2=new RegExp(`(['"])${from}(.*)\\1`,"g");regex2.test(transformed)&&(transformed=transformed.replace(regex2,`$1${to}$2$1`),hasChanges=!0)}return hasChanges?transformed:null}var transformPackageJsonFiles=async(files,dryRun)=>{let errors=[],{default:pLimit}=await import("p-limit"),limit=pLimit(10);return await Promise.all(files.map(file=>limit(async()=>{try{let contents=await(0,import_promises2.readFile)(file,"utf-8"),transformed=transformPackageJson(contents);!dryRun&&transformed&&await(0,import_promises2.writeFile)(file,transformed)}catch(error){errors.push({file,error})}}))),errors},transformImportFiles=async(files,dryRun)=>{let errors=[],{default:pLimit}=await import("p-limit"),limit=pLimit(10);return await Promise.all(files.map(file=>limit(async()=>{try{let contents=await(0,import_promises2.readFile)(file,"utf-8"),transformed=transformImports(contents);!dryRun&&transformed&&await(0,import_promises2.writeFile)(file,transformed)}catch(error){errors.push({file,error})}}))),errors},consolidatedImports={id:"consolidated-imports",versionRange:["^8.0.0","^9.0.0-0"],check:async()=>{let projectRoot=(0,import_common13.getProjectRoot)(),globby=(await import("globby")).globby,packageJsonFiles=await globby(["**/package.json"],{...(0,import_common13.commonGlobOptions)(""),ignore:["**/node_modules/**"],cwd:projectRoot,gitignore:!0});return await Promise.all(packageJsonFiles.map(async file=>{let contents=await(0,import_promises2.readFile)(file,"utf-8"),packageJson=JSON.parse(contents);return Object.keys(packageJson.dependencies||{}).some(dep=>dep in consolidatedPackages)||Object.keys(packageJson.devDependencies||{}).some(dep=>dep in consolidatedPackages)})).then(results=>results.some(Boolean))?{packageJsonFiles}:null},prompt:result=>import_ts_dedent14.dedent`
|
|
286
276
|
Found package.json files that contain consolidated Storybook packages that need to be updated:
|
|
287
277
|
${result.packageJsonFiles.map(file=>`- ${file}`).join(`
|
|
288
278
|
`)}
|
|
@@ -295,54 +285,54 @@ ${indentation}// 'off' - skip a11y checks entirely`;return lines.splice(paramete
|
|
|
295
285
|
2. Scan your codebase and update any imports from these consolidated packages
|
|
296
286
|
|
|
297
287
|
This will ensure your project is properly updated to use the new consolidated package structure.
|
|
298
|
-
`,run:async options=>{let{result,dryRun=!1}=options,{packageJsonFiles}=result,errors=[],packageJsonErrors=await transformPackageJsonFiles(packageJsonFiles,dryRun);errors.push(...packageJsonErrors);let projectRoot=(0,
|
|
288
|
+
`,run:async options=>{let{result,dryRun=!1}=options,{packageJsonFiles}=result,errors=[],packageJsonErrors=await transformPackageJsonFiles(packageJsonFiles,dryRun);errors.push(...packageJsonErrors);let projectRoot=(0,import_common13.getProjectRoot)(),defaultGlob="**/*.{mjs,cjs,js,jsx,ts,tsx}",{glob:glob2}=await(0,import_prompts4.default)({type:"text",name:"glob",message:"Enter a custom glob pattern to scan (or press enter to use default):",initial:defaultGlob}),globby=(await import("globby")).globby,sourceFiles=await globby([glob2],{...(0,import_common13.commonGlobOptions)(""),ignore:["**/node_modules/**"],dot:!0,cwd:projectRoot}),importErrors=await transformImportFiles(sourceFiles,dryRun);if(errors.push(...importErrors),errors.length>0)throw new Error(`Failed to process ${errors.length} files:
|
|
299
289
|
${errors.map(({file,error})=>`- ${file}: ${error.message}`).join(`
|
|
300
|
-
`)}`);!dryRun&&result.packageJsonFiles.length>0&&await options.packageManager.installDependencies()}};var
|
|
290
|
+
`)}`);!dryRun&&result.packageJsonFiles.length>0&&await options.packageManager.installDependencies()}};var import_picocolors20=__toESM(require_picocolors(),1),import_semver8=__toESM(require("semver"),1),import_ts_dedent17=require("ts-dedent");var import_picocolors18=__toESM(require_picocolors(),1),import_semver6=__toESM(require("semver"),1),import_ts_dedent15=require("ts-dedent");var logger9=console,checkWebpack5Builder=async({mainConfig,storybookVersion})=>{if(import_semver6.default.lt(storybookVersion,"6.3.0"))return logger9.warn(import_ts_dedent15.dedent`
|
|
301
291
|
Detected SB 6.3 or below, please upgrade storybook to use webpack5.
|
|
302
292
|
|
|
303
293
|
To upgrade to the latest stable release, run this from your project directory:
|
|
304
294
|
|
|
305
|
-
${
|
|
295
|
+
${import_picocolors18.default.cyan("npx storybook@latest upgrade")}
|
|
306
296
|
|
|
307
297
|
To upgrade to the latest pre-release, run this from your project directory:
|
|
308
298
|
|
|
309
|
-
${
|
|
310
|
-
`.trim()),null;if(import_semver6.default.gte(storybookVersion,"7.0.0"))return null;if(!mainConfig)return logger9.warn("Unable to find storybook main.js config"),null;let builderPackageName=getBuilderPackageName(mainConfig);return builderPackageName&&builderPackageName!=="webpack4"?(logger9.info(`Found builder ${builderPackageName}, skipping`),null):{storybookVersion}};var
|
|
299
|
+
${import_picocolors18.default.cyan("npx storybook@next upgrade")}
|
|
300
|
+
`.trim()),null;if(import_semver6.default.gte(storybookVersion,"7.0.0"))return null;if(!mainConfig)return logger9.warn("Unable to find storybook main.js config"),null;let builderPackageName=getBuilderPackageName(mainConfig);return builderPackageName&&builderPackageName!=="webpack4"?(logger9.info(`Found builder ${builderPackageName}, skipping`),null):{storybookVersion}};var import_picocolors19=__toESM(require_picocolors(),1),import_semver7=__toESM(require("semver"),1),import_ts_dedent16=require("ts-dedent");var logger10=console,webpack5={id:"webpack5",versionRange:["<7",">=7"],async check({packageManager,mainConfig,storybookVersion}){let webpackVersion=await packageManager.getPackageVersion("webpack");if(!webpackVersion||import_semver7.default.lt(webpackVersion,"5.0.0")||import_semver7.default.gte(webpackVersion,"6.0.0"))return null;let builderInfo=await checkWebpack5Builder({mainConfig,storybookVersion});return builderInfo?{webpackVersion,...builderInfo}:null},prompt({webpackVersion}){let webpackFormatted=import_picocolors19.default.cyan(`webpack ${webpackVersion}`);return import_ts_dedent16.dedent`
|
|
311
301
|
We've detected you're running ${webpackFormatted}.
|
|
312
302
|
Your Storybook's main.js files specifies webpack4, which is incompatible.
|
|
313
303
|
|
|
314
|
-
To run Storybook in webpack5-mode, we can install Storybook's ${
|
|
304
|
+
To run Storybook in webpack5-mode, we can install Storybook's ${import_picocolors19.default.cyan("@storybook/builder-webpack5")} for you.
|
|
315
305
|
|
|
316
|
-
More info: ${
|
|
317
|
-
`},async run({result:{storybookVersion,webpackVersion},packageManager,dryRun,mainConfigPath}){let deps=[`@storybook/builder-webpack5@${storybookVersion}`];webpackVersion||deps.push("webpack@5"),logger10.info(`\u2705 Adding dependencies: ${deps}`),dryRun||await packageManager.addDependencies({installAsDevDependencies:!0},deps),logger10.info("\u2705 Setting `core.builder` to `@storybook/builder-webpack5` in main.js"),dryRun||await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{main.setFieldValue(["core","builder"],"@storybook/builder-webpack5")})}};var cra5={id:"cra5",versionRange:["<7",">=7"],async check({packageManager,mainConfig,storybookVersion}){let craVersion=await packageManager.getPackageVersion("react-scripts");if(!craVersion||import_semver8.default.lt(craVersion,"5.0.0"))return null;let builderInfo=await checkWebpack5Builder({mainConfig,storybookVersion});return builderInfo?{craVersion,...builderInfo}:null},prompt({craVersion}){let craFormatted=
|
|
306
|
+
More info: ${import_picocolors19.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build")}
|
|
307
|
+
`},async run({result:{storybookVersion,webpackVersion},packageManager,dryRun,mainConfigPath}){let deps=[`@storybook/builder-webpack5@${storybookVersion}`];webpackVersion||deps.push("webpack@5"),logger10.info(`\u2705 Adding dependencies: ${deps}`),dryRun||await packageManager.addDependencies({installAsDevDependencies:!0},deps),logger10.info("\u2705 Setting `core.builder` to `@storybook/builder-webpack5` in main.js"),dryRun||await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{main.setFieldValue(["core","builder"],"@storybook/builder-webpack5")})}};var cra5={id:"cra5",versionRange:["<7",">=7"],async check({packageManager,mainConfig,storybookVersion}){let craVersion=await packageManager.getPackageVersion("react-scripts");if(!craVersion||import_semver8.default.lt(craVersion,"5.0.0"))return null;let builderInfo=await checkWebpack5Builder({mainConfig,storybookVersion});return builderInfo?{craVersion,...builderInfo}:null},prompt({craVersion}){let craFormatted=import_picocolors20.default.cyan(`Create React App (CRA) ${craVersion}`);return import_ts_dedent17.dedent`
|
|
318
308
|
We've detected you are running ${craFormatted} which is powered by webpack5.
|
|
319
309
|
Your Storybook's main.js files specifies webpack4, which is incompatible.
|
|
320
310
|
|
|
321
|
-
In order to work with your version of CRA, we need to install Storybook's ${
|
|
311
|
+
In order to work with your version of CRA, we need to install Storybook's ${import_picocolors20.default.cyan("@storybook/builder-webpack5")}.
|
|
322
312
|
|
|
323
|
-
More info: ${
|
|
324
|
-
`},async run(options){return webpack5.run({...options,result:{webpackVersion:null,...options.result}})}};var import_cli5=require("storybook/internal/cli"),
|
|
313
|
+
More info: ${import_picocolors20.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade")}
|
|
314
|
+
`},async run(options){return webpack5.run({...options,result:{webpackVersion:null,...options.result}})}};var import_cli5=require("storybook/internal/cli"),import_picocolors21=__toESM(require_picocolors(),1),import_ts_dedent18=require("ts-dedent"),logger11=console,eslintPlugin={id:"eslintPlugin",versionRange:["<8",">=7"],async check({packageManager}){let{hasEslint,isStorybookPluginInstalled}=await(0,import_cli5.extractEslintInfo)(packageManager);if(isStorybookPluginInstalled||!hasEslint)return null;let eslintFile=null,unsupportedExtension;try{eslintFile=(0,import_cli5.findEslintFile)()}catch(err){unsupportedExtension=String(err)}return!eslintFile||!unsupportedExtension?(logger11.warn("Unable to find .eslintrc config file, skipping"),null):{eslintFile,unsupportedExtension}},prompt(){return import_ts_dedent18.dedent`
|
|
325
315
|
We've detected you are not using our eslint-plugin.
|
|
326
316
|
|
|
327
317
|
In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.
|
|
328
318
|
|
|
329
|
-
More info: ${
|
|
330
|
-
`},async run({result:{eslintFile,unsupportedExtension},packageManager,dryRun,skipInstall}){let deps=["eslint-plugin-storybook"];if(logger11.info(`\u2705 Adding dependencies: ${deps}`),dryRun||await packageManager.addDependencies({installAsDevDependencies:!0,skipInstall},deps),!dryRun&&unsupportedExtension){logger11.info(
|
|
319
|
+
More info: ${import_picocolors21.default.yellow("https://github.com/storybookjs/eslint-plugin-storybook#readme")}
|
|
320
|
+
`},async run({result:{eslintFile,unsupportedExtension},packageManager,dryRun,skipInstall}){let deps=["eslint-plugin-storybook"];if(logger11.info(`\u2705 Adding dependencies: ${deps}`),dryRun||await packageManager.addDependencies({installAsDevDependencies:!0,skipInstall},deps),!dryRun&&unsupportedExtension){logger11.info(import_ts_dedent18.dedent`
|
|
331
321
|
⚠️ The plugin was successfully installed but failed to configure.
|
|
332
322
|
|
|
333
323
|
Found an eslint config file with an unsupported automigration format: .eslintrc.${unsupportedExtension}.
|
|
334
324
|
The supported formats for this automigration are: ${import_cli5.SUPPORTED_ESLINT_EXTENSIONS.join(", ")}.
|
|
335
325
|
|
|
336
326
|
Please refer to https://github.com/storybookjs/eslint-plugin-storybook#usage to finish setting up the plugin manually.
|
|
337
|
-
`);return}dryRun||await(0,import_cli5.configureEslintPlugin)(eslintFile,packageManager)}};var import_promises3=require("fs/promises"),import_csf_tools8=require("storybook/internal/csf-tools"),
|
|
338
|
-
The ${
|
|
339
|
-
and has been renamed to ${
|
|
327
|
+
`);return}dryRun||await(0,import_cli5.configureEslintPlugin)(eslintFile,packageManager)}};var import_promises3=require("fs/promises"),import_csf_tools8=require("storybook/internal/csf-tools"),import_picocolors22=__toESM(require_picocolors(),1),import_ts_dedent19=require("ts-dedent"),MIGRATION2="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewjs-globals-renamed-to-initialglobals",initialGlobals={id:"initial-globals",versionRange:["*.*.*",">=8.0.*"],async check({previewConfigPath}){if(!previewConfigPath)return null;let previewConfig=(0,import_csf_tools8.loadConfig)((await(0,import_promises3.readFile)(previewConfigPath)).toString()).parse(),globals=previewConfig.getFieldNode(["globals"]);return globals?{globals,previewConfig,previewConfigPath}:null},prompt({previewConfigPath}){return import_ts_dedent19.dedent`
|
|
328
|
+
The ${import_picocolors22.default.cyan("globals")} setting in ${import_picocolors22.default.cyan(previewConfigPath)} is deprecated
|
|
329
|
+
and has been renamed to ${import_picocolors22.default.cyan("initialGlobals")}.
|
|
340
330
|
|
|
341
|
-
Learn more: ${
|
|
331
|
+
Learn more: ${import_picocolors22.default.yellow(MIGRATION2)}
|
|
342
332
|
|
|
343
|
-
Rename ${
|
|
344
|
-
`},async run({dryRun,result}){result.previewConfig.removeField(["globals"]),result.previewConfig.setFieldNode(["initialGlobals"],result.globals),dryRun||await(0,import_promises3.writeFile)(result.previewConfigPath,(0,import_csf_tools8.formatConfig)(result.previewConfig))}};var import_promises4=require("fs/promises"),import_node_path4=require("path"),
|
|
345
|
-
We've found ${
|
|
333
|
+
Rename ${import_picocolors22.default.cyan("globals")} to ${import_picocolors22.default.cyan("initalGlobals")}?
|
|
334
|
+
`},async run({dryRun,result}){result.previewConfig.removeField(["globals"]),result.previewConfig.setFieldNode(["initialGlobals"],result.globals),dryRun||await(0,import_promises3.writeFile)(result.previewConfigPath,(0,import_csf_tools8.formatConfig)(result.previewConfig))}};var import_promises4=require("fs/promises"),import_node_path4=require("path"),import_picocolors23=__toESM(require_picocolors(),1),import_ts_dedent20=require("ts-dedent"),MDX1_STYLE_START=/<style>{`/g,MDX1_STYLE_END=/`}<\/style>/g,MDX1_COMMENT=/<!--(.+)-->/g,MDX1_CODEBLOCK=/(?:\n~~~(?:\n|.)*?\n~~~)|(?:\n```(?:\n|.)*?\n```)/g,fixMdxStyleTags=mdx=>mdx.replace(MDX1_STYLE_START,"<style>\n {`").replace(MDX1_STYLE_END," `}\n</style>"),fixMdxComments=mdx=>{let codeblocks=mdx.matchAll(MDX1_CODEBLOCK);return mdx.split(MDX1_CODEBLOCK).map(v=>v.replace(MDX1_COMMENT,(original,group)=>`{/*${group}*/}`)).reduce((acc,item,i)=>{let next=codeblocks.next();return next.done?acc+item:acc+item+next.value[0]},"")},logger12=console,mdx1to3={id:"mdx1to3",versionRange:["<7.0.0",">=8.0.0-alpha.0"],async check(){let{globby}=await import("globby"),storiesMdxFiles=await globby("./!(node_modules)**/*.(story|stories).mdx");return storiesMdxFiles.length?{storiesMdxFiles}:null},prompt({storiesMdxFiles}){return import_ts_dedent20.dedent`
|
|
335
|
+
We've found ${import_picocolors23.default.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project.
|
|
346
336
|
|
|
347
337
|
Storybook has upgraded to MDX3 (https://mdxjs.com/blog/v3/). MDX3 itself doesn't contain disruptive breaking changes, whereas the transition from MDX1 to MDX2 was a significant change.
|
|
348
338
|
We can try to automatically upgrade your MDX files to MDX3 format using some common patterns.
|
|
@@ -350,8 +340,8 @@ ${errors.map(({file,error})=>`- ${file}: ${error.message}`).join(`
|
|
|
350
340
|
After this install completes, and before you start Storybook, we strongly recommend reading the MDX2 section
|
|
351
341
|
of the 7.0 migration guide. It contains useful tools for detecting and fixing any remaining issues.
|
|
352
342
|
|
|
353
|
-
${
|
|
354
|
-
`},async run({result:{storiesMdxFiles},dryRun}){await Promise.all([...storiesMdxFiles.map(async fname=>{let contents=await(0,import_promises4.readFile)(fname,{encoding:"utf8"}),updated=fixMdxComments(fixMdxStyleTags(contents));updated===contents?logger12.info(`\u{1F197} Unmodified ${(0,import_node_path4.basename)(fname)}`):(logger12.info(`\u2705 Modified ${(0,import_node_path4.basename)(fname)}`),dryRun||await(0,import_promises4.writeFile)(fname,updated))})])}};var import_node_path5=require("path"),import_cli6=require("storybook/internal/cli"),
|
|
343
|
+
${import_picocolors23.default.cyan("https://storybook.js.org/migration-guides/7.0")}
|
|
344
|
+
`},async run({result:{storiesMdxFiles},dryRun}){await Promise.all([...storiesMdxFiles.map(async fname=>{let contents=await(0,import_promises4.readFile)(fname,{encoding:"utf8"}),updated=fixMdxComments(fixMdxStyleTags(contents));updated===contents?logger12.info(`\u{1F197} Unmodified ${(0,import_node_path4.basename)(fname)}`):(logger12.info(`\u2705 Modified ${(0,import_node_path4.basename)(fname)}`),dryRun||await(0,import_promises4.writeFile)(fname,updated))})])}};var import_node_path5=require("path"),import_cli6=require("storybook/internal/cli"),import_common14=require("storybook/internal/common");var import_ts_dedent21=require("ts-dedent");var logger13=console,mdxgfm={id:"github-flavored-markdown-mdx",versionRange:["<7",">=7"],async check({configDir,mainConfig}){let hasMDXFiles=await mainConfig?.stories?.reduce(async(acc,item)=>{if(await acc===!0)return!0;let pattern;if(typeof configDir>"u")return!1;if(typeof item=="string")pattern=slash((0,import_node_path5.join)(configDir,item));else if(typeof item=="object"){let directory=item.directory||"..",files2=item.files||"**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))";pattern=slash((0,import_node_path5.join)(configDir,directory,files2))}if(!pattern)return!1;let{globby}=await import("globby");return(await globby(pattern,(0,import_common14.commonGlobOptions)(pattern))).some(f=>f.endsWith(".mdx"))},Promise.resolve(!1));return mainConfig?.features?.legacyMdx1===!0||!1||!hasMDXFiles||!!mainConfig.addons?.find(item=>item==="@storybook/addon-mdx-gfm"?!0:typeof item=="string"?!1:item.name==="@storybook/addon-docs"?item.options?.mdxPluginOptions?.mdxCompileOptions?.remarkPlugins?.length>0:!1)?null:{}},prompt(){return import_ts_dedent21.dedent`
|
|
355
345
|
In MDX1 you had the option of using GitHub flavored markdown.
|
|
356
346
|
|
|
357
347
|
Storybook >= 8.0 uses MDX3 for compiling MDX, and thus no longer supports GFM out of the box.
|
|
@@ -360,8 +350,8 @@ ${errors.map(({file,error})=>`- ${file}: ${error.message}`).join(`
|
|
|
360
350
|
|
|
361
351
|
We recommend that you follow the guide in the link above; however, we can add a temporary Storybook addon to help make this migration easier.
|
|
362
352
|
We'll install the addon and add it to your storybook config.
|
|
363
|
-
`},async run({packageManager,dryRun,mainConfigPath,skipInstall}){if(!dryRun){let packageJson=await packageManager.retrievePackageJson(),versionToInstall=(0,import_cli6.getStorybookVersionSpecifier)(await packageManager.retrievePackageJson());await packageManager.addDependencies({installAsDevDependencies:!0,skipInstall,packageJson},[`@storybook/addon-mdx-gfm@${versionToInstall}`]),await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{logger13.info('\u2705 Adding "@storybook/addon-mdx-gfm" addon'),dryRun||main.appendValueToArray(["addons"],"@storybook/addon-mdx-gfm")})}}};var import_codemod2=require("@storybook/codemod"),import_glob=require("glob"),
|
|
364
|
-
❌ Unable to determine Storybook stories globs in ${
|
|
353
|
+
`},async run({packageManager,dryRun,mainConfigPath,skipInstall}){if(!dryRun){let packageJson=await packageManager.retrievePackageJson(),versionToInstall=(0,import_cli6.getStorybookVersionSpecifier)(await packageManager.retrievePackageJson());await packageManager.addDependencies({installAsDevDependencies:!0,skipInstall,packageJson},[`@storybook/addon-mdx-gfm@${versionToInstall}`]),await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{logger13.info('\u2705 Adding "@storybook/addon-mdx-gfm" addon'),dryRun||main.appendValueToArray(["addons"],"@storybook/addon-mdx-gfm")})}}};var import_codemod2=require("@storybook/codemod"),import_glob=require("glob"),import_picocolors24=__toESM(require_picocolors(),1),import_prompts5=__toESM(require("prompts"),1),import_ts_dedent22=require("ts-dedent");var logger14=console,getNextGlob=globString=>{let extGlobsRegex=new RegExp(/(.*\.)(stories\.@.*)(\|mdx|mdx\|)(.*)$/i);if(globString.match(extGlobsRegex))return globString.replace(extGlobsRegex,"$1@(mdx|$2$4)");let allStoriesExtensionsRegex=new RegExp(/(.*\.)(stories\.\*)$/i);return globString.match(allStoriesExtensionsRegex)?globString.replace(allStoriesExtensionsRegex,"$1@(mdx|$2)"):globString.replaceAll(".stories.mdx",".mdx")},mdxToCSF={id:"mdx-to-csf",versionRange:["<7",">=7"],async check({mainConfig}){let existingStoriesEntries=mainConfig.stories;if(!existingStoriesEntries)throw new Error(import_ts_dedent22.dedent`
|
|
354
|
+
❌ Unable to determine Storybook stories globs in ${import_picocolors24.default.blue(JSON.stringify(mainConfig,null,2))}, skipping ${import_picocolors24.default.cyan(this.id)} fix.
|
|
365
355
|
|
|
366
356
|
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
|
|
367
357
|
|
|
@@ -369,12 +359,12 @@ ${errors.map(({file,error})=>`- ${file}: ${error.message}`).join(`
|
|
|
369
359
|
|
|
370
360
|
We were unable to automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
|
|
371
361
|
We suggest you make this change manually.
|
|
372
|
-
To learn more about this change, see: ${
|
|
362
|
+
To learn more about this change, see: ${import_picocolors24.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files")}
|
|
373
363
|
`);let files=[],nextStoriesEntries=await Promise.all(existingStoriesEntries.map(async entry=>{let isSpecifier=typeof entry!="string",globString=isSpecifier?entry.files:entry;if(!globString)return entry;files.push(...(await(0,import_glob.glob)(globString)).filter(file=>file.endsWith(".stories.mdx")));let nextGlob=getNextGlob(globString);return isSpecifier?{...entry,files:nextGlob}:nextGlob})),resultFromMainConfig=checkMainConfigStories(existingStoriesEntries,nextStoriesEntries);return nextStoriesEntries&&resultFromMainConfig||files.length>0?{existingStoriesEntries,nextStoriesEntries,files}:null},prompt({existingStoriesEntries,nextStoriesEntries}){let prettyExistingStoriesEntries=existingStoriesEntries.map(entry=>JSON.stringify(entry,null,2)).join(`
|
|
374
364
|
`),prettyNextStoriesEntries=nextStoriesEntries.map(entry=>JSON.stringify(entry,null,2)).join(`
|
|
375
|
-
`);return
|
|
365
|
+
`);return import_ts_dedent22.dedent`
|
|
376
366
|
We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files:
|
|
377
|
-
${
|
|
367
|
+
${import_picocolors24.default.cyan(prettyExistingStoriesEntries)}
|
|
378
368
|
|
|
379
369
|
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx. Since Storybook 8, we have removed the support of story definition in MDX files entirely. Therefore '.stories.mdx' files aren't supported anymore.
|
|
380
370
|
|
|
@@ -382,75 +372,75 @@ ${errors.map(({file,error})=>`- ${file}: ${error.message}`).join(`
|
|
|
382
372
|
|
|
383
373
|
We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
|
|
384
374
|
That would result in the following 'stories' config:
|
|
385
|
-
${
|
|
375
|
+
${import_picocolors24.default.cyan(prettyNextStoriesEntries)}
|
|
386
376
|
|
|
387
377
|
Additionally, we will run the 'mdx-to-csf' codemod for you, which tries to transform '*.stories.mdx' files to '*.stories.js' and '*.mdx' files.
|
|
388
378
|
|
|
389
|
-
To learn more about this change, see: ${
|
|
390
|
-
`},async run({dryRun,mainConfigPath,result:{nextStoriesEntries}}){if(logger14.info(
|
|
391
|
-
${JSON.stringify(nextStoriesEntries,null,2)}`),!dryRun){let{glob:globString}=await import_prompts5.default.prompt({type:"text",name:"glob",message:"Please enter the glob for your MDX stories",initial:"./src/**/*.stories.mdx"});globString&&await(0,import_codemod2.runCodemod)("mdx-to-csf",{glob:globString,dryRun,logger:logger14}),await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{main.setFieldValue(["stories"],nextStoriesEntries)}),logger14.info(
|
|
379
|
+
To learn more about this change, see: ${import_picocolors24.default.yellow("https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf")}
|
|
380
|
+
`},async run({dryRun,mainConfigPath,result:{nextStoriesEntries}}){if(logger14.info(import_ts_dedent22.dedent`✅ Setting 'stories' config:
|
|
381
|
+
${JSON.stringify(nextStoriesEntries,null,2)}`),!dryRun){let{glob:globString}=await import_prompts5.default.prompt({type:"text",name:"glob",message:"Please enter the glob for your MDX stories",initial:"./src/**/*.stories.mdx"});globString&&await(0,import_codemod2.runCodemod)("mdx-to-csf",{glob:globString,dryRun,logger:logger14}),await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{main.setFieldValue(["stories"],nextStoriesEntries)}),logger14.info(import_ts_dedent22.dedent`
|
|
392
382
|
The migration successfully updated your 'stories' config to include any .mdx file instead of just .stories.mdx.
|
|
393
383
|
|
|
394
384
|
It also ran the 'mdx-to-csf' codemod to convert your MDX stories to CSF format.
|
|
395
385
|
This codemod is not perfect however, so you may need to manually fix any issues it couldn't handle.
|
|
396
|
-
`)}}};function checkMainConfigStories(existingStoriesEntries,nextStoriesEntries){return existingStoriesEntries.length===nextStoriesEntries.length&&existingStoriesEntries.every((entry,index)=>{let nextEntry=nextStoriesEntries[index];return typeof entry=="string"?entry===nextEntry:typeof nextEntry=="string"?!1:entry.files===nextEntry.files})?null:!0}var import_cli7=require("storybook/internal/cli"),
|
|
397
|
-
❌ Your project should be upgraded to use the framework package ${
|
|
386
|
+
`)}}};function checkMainConfigStories(existingStoriesEntries,nextStoriesEntries){return existingStoriesEntries.length===nextStoriesEntries.length&&existingStoriesEntries.every((entry,index)=>{let nextEntry=nextStoriesEntries[index];return typeof entry=="string"?entry===nextEntry:typeof nextEntry=="string"?!1:entry.files===nextEntry.files})?null:!0}var import_cli7=require("storybook/internal/cli"),import_common17=require("storybook/internal/common"),import_picocolors25=__toESM(require_picocolors(),1),import_semver9=__toESM(require("semver"),1),import_tiny_invariant=__toESM(require("tiny-invariant"),1),import_ts_dedent23=require("ts-dedent");var import_common15=require("storybook/internal/common"),import_prompts6=__toESM(require("prompts"),1),detectRenderer=async packageJson=>{let allDependencies={...packageJson.dependencies,...packageJson.devDependencies,...packageJson.peerDependencies},matches=Object.keys(import_common15.rendererPackages).filter(pkg=>!!allDependencies[pkg]),[rendererPackage]=matches;return matches.length>1&&(rendererPackage=(await(0,import_prompts6.default)([{type:"select",name:"rendererPackage",hint:"> - Use arrow-keys. Return to submit. To automate this next time, you can pass the renderer to the CLI via the --renderer flag",message:"Tried to detect a Storybook renderer in your project but found multiple. This could happen in monorepos, when projects contain multiple Storybook packages in package.json. Please select the correct one:",choices:matches.map(type=>({title:type,value:type}))}])).rendererPackage),rendererPackage};var import_common16=require("storybook/internal/common"),import_find_up=__toESM(require("find-up"),1);var logger15=console,packagesMap={"@storybook/react":{webpack5:"@storybook/react-webpack5",vite:"@storybook/react-vite"},"@storybook/preact":{webpack5:"@storybook/preact-webpack5",vite:"@storybook/preact-vite"},"@storybook/server":{webpack5:"@storybook/server-webpack5"},"@storybook/ember":{webpack5:"@storybook/ember"},"@storybook/angular":{webpack5:"@storybook/angular"},"@storybook/vue3":{webpack5:"@storybook/vue3-webpack5",vite:"@storybook/vue3-vite"},"@storybook/svelte":{webpack5:"@storybook/svelte-webpack5",vite:"@storybook/svelte-vite"},"@storybook/web-components":{webpack5:"@storybook/web-components-webpack5",vite:"@storybook/web-components-vite"},"@storybook/html":{webpack5:"@storybook/html-webpack5",vite:"@storybook/html-vite"}},communityFrameworks={vite:["storybook-framework-qwik","storybook-solidjs-vite"],webpack5:[]},viteConfigFiles=["vite.config.js","vite.config.cjs","vite.config.mjs","vite.config.ts"],webpackConfigFiles=["webpack.config.js","webpack.config.cjs","webpack.config.mjs","webpack.config.ts"],detectBuilderInfo=async({mainConfig,configDir,packageManager})=>{let builderName,builderOrFrameworkName,{core={},framework}=mainConfig,{builder}=core,builderPackageName=getBuilderPackageName(mainConfig),frameworkPackageName=getFrameworkPackageName(mainConfig),builderOptions=typeof builder!="string"?builder?.options??{}:{};if(builderPackageName?builderOrFrameworkName=builderPackageName:framework&&Object.keys(import_common16.frameworkPackages).includes(frameworkPackageName)&&(builderOrFrameworkName=frameworkPackageName,builderOptions=typeof framework=="object"?framework.options?.builder??{}:{}),!builderOrFrameworkName){let viteConfigFile2=await(0,import_find_up.default)(viteConfigFiles,{cwd:configDir});if(viteConfigFile2)logger15.info(`No builder or framework field, detected Storybook builder via: ${viteConfigFile2}`),builderOrFrameworkName="vite";else{let webpackConfigFile=await(0,import_find_up.default)(webpackConfigFiles,{cwd:configDir});webpackConfigFile&&(logger15.info(`No builder or framework field, detected Storybook builder via: ${webpackConfigFile}`),builderOrFrameworkName="webpack5")}}if(!builderOrFrameworkName){let storybookBuilderViteVersion=await packageManager.getPackageVersion("@storybook/builder-vite"),storybookBuilderVite2Version=await packageManager.getPackageVersion("storybook-builder-vite"),storybookBuilderWebpack5Version=await packageManager.getPackageVersion("@storybook/builder-webpack5"),storybookBuilderManagerWebpack5Version=await packageManager.getPackageVersion("@storybook/manager-webpack5");storybookBuilderViteVersion||storybookBuilderVite2Version?builderOrFrameworkName="vite":(storybookBuilderWebpack5Version||storybookBuilderManagerWebpack5Version)&&(builderOrFrameworkName="webpack5")}return builderOrFrameworkName?.includes("vite")||builderOrFrameworkName&&communityFrameworks.vite.includes(builderOrFrameworkName)?builderName="vite":(builderOrFrameworkName?.includes("webpack")||builderOrFrameworkName&&communityFrameworks.webpack5.includes(builderOrFrameworkName),builderName="webpack5"),{name:builderName,options:builderOptions}},getNextjsAddonOptions=addons=>{let nextjsAddon=addons?.find(addon=>typeof addon=="string"?addon==="storybook-addon-next":addon.name==="storybook-addon-next");return!nextjsAddon||typeof nextjsAddon=="string"?{}:nextjsAddon.options||{}};var logger16=console,newFrameworks={id:"new-frameworks",versionRange:["<7",">=7"],async check({configDir,packageManager,mainConfig,mainConfigPath,rendererPackage}){if(typeof configDir>"u")return null;let packageJson=await packageManager.retrievePackageJson(),frameworkPackageName=getFrameworkPackageName(mainConfig),rendererPackageName=rendererPackage??await getRendererPackageNameFromFramework(frameworkPackageName)??await detectRenderer(packageJson),hasFrameworkInMainConfig=!!frameworkPackageName;frameworkPackageName&&Object.values(import_common17.rendererPackages).includes(frameworkPackageName)&&(hasFrameworkInMainConfig=!1);let builderConfig=mainConfig.core?.builder;if(!Object.keys(packagesMap).includes(rendererPackageName))return null;let allDependencies=await packageManager.getAllDependencies(),builderInfo=await detectBuilderInfo({mainConfig,configDir,packageManager}),newFrameworkPackage=Object.keys(import_common17.frameworkPackages).find(pkg=>pkg===frameworkPackageName);if(newFrameworkPackage||(newFrameworkPackage=packagesMap[rendererPackageName]?.[builderInfo.name]),!newFrameworkPackage)return null;let renderer=import_common17.rendererPackages[rendererPackageName],rendererOptions=mainConfig[`${renderer}Options`]||{},frameworkOptions=typeof mainConfig.framework=="string"?{}:mainConfig.framework?.options,dependenciesToRemove=["@storybook/builder-webpack5","@storybook/manager-webpack5","@storybook/builder-webpack4","@storybook/manager-webpack4","@storybook/builder-vite","storybook-builder-vite"],addonsToRemove=[],addonOptions={},metaFramework,nextVersion=await packageManager.getPackageVersion("next"),svelteKitVersion=await packageManager.getPackageVersion("@sveltejs/kit"),viteVersion=await packageManager.getPackageVersion("vite");if(rendererPackageName==="@storybook/react"&&nextVersion){let nextAddonOptions=getNextjsAddonOptions(mainConfig.addons);(nextVersion&&import_semver9.default.gte(nextVersion,"12.0.0")||Object.keys(nextAddonOptions).length>0)&&(metaFramework="nextjs",(newFrameworkPackage==="@storybook/react-webpack5"||newFrameworkPackage==="@storybook/nextjs")&&(newFrameworkPackage="@storybook/nextjs",addonsToRemove=["storybook-addon-next","storybook-addon-next-router"].filter(dep=>allDependencies[dep]||mainConfig.addons?.find(addon=>typeof addon=="string"?dep===addon:dep===addon.name)),addonOptions=nextAddonOptions,dependenciesToRemove.push("@storybook/react-webpack5","storybook-addon-next","storybook-addon-next-router")))}else rendererPackageName==="@storybook/svelte"&&svelteKitVersion&&import_semver9.default.gte(svelteKitVersion,"1.0.0")&&(metaFramework="sveltekit",newFrameworkPackage==="@storybook/svelte-vite"&&(newFrameworkPackage="@storybook/sveltekit",rendererOptions={},dependenciesToRemove.push("@storybook/svelte-vite")));let dependenciesToAdd=[newFrameworkPackage].filter(dep=>!allDependencies[dep]).filter(Boolean);if(dependenciesToRemove=dependenciesToRemove.filter(dep=>allDependencies[dep]).filter(Boolean),hasFrameworkInMainConfig&&!builderConfig&&!Object.keys(rendererOptions).length&&!Object.keys(addonOptions).length&&!dependenciesToRemove.length&&!dependenciesToAdd.length)return null;if(viteVersion&&import_semver9.default.lt(viteVersion,"3.0.0"))throw new Error(import_ts_dedent23.dedent`
|
|
387
|
+
❌ Your project should be upgraded to use the framework package ${import_picocolors25.default.bold(newFrameworkPackage)}, but we detected that you are using Vite ${import_picocolors25.default.bold(viteVersion)}, which is unsupported since ${import_picocolors25.default.bold("Storybook 7.0")}. Please upgrade Vite to ${import_picocolors25.default.bold("3.0.0 or higher")} and rerun this migration.
|
|
398
388
|
`);return(0,import_tiny_invariant.default)(mainConfigPath,"Missing main config path."),{mainConfigPath,dependenciesToAdd,dependenciesToRemove,frameworkPackage:newFrameworkPackage,hasFrameworkInMainConfig,frameworkOptions:{...frameworkOptions,...rendererOptions,...addonOptions},rendererOptions,addonOptions,addonsToRemove,builderInfo,renderer,builderConfig,metaFramework}},prompt({dependenciesToRemove,dependenciesToAdd,hasFrameworkInMainConfig,mainConfigPath,frameworkPackage,addonOptions,renderer,rendererOptions,builderConfig,addonsToRemove,metaFramework}){let disclaimer="",migrationSteps="";return dependenciesToRemove.length>0&&(migrationSteps+=`- Remove the following dependencies:
|
|
399
|
-
${dependenciesToRemove.map(dep=>`- * ${
|
|
389
|
+
${dependenciesToRemove.map(dep=>`- * ${import_picocolors25.default.cyan(dep)}`).join(`
|
|
400
390
|
`)}
|
|
401
391
|
`),dependenciesToAdd.length>0&&(migrationSteps+=`- Add the following dependencies:
|
|
402
|
-
${dependenciesToAdd.map(dep=>`- * ${
|
|
392
|
+
${dependenciesToAdd.map(dep=>`- * ${import_picocolors25.default.cyan(dep)}`).join(`
|
|
403
393
|
`)}
|
|
404
|
-
`),hasFrameworkInMainConfig||(migrationSteps+=`- Update or specify the ${
|
|
405
|
-
`),Object.keys(rendererOptions).length>0&&(migrationSteps+=`- Move the ${
|
|
406
|
-
More info: ${
|
|
407
|
-
`),addonsToRemove.length>0&&(migrationSteps+=`- Remove the following addons from your ${
|
|
408
|
-
${addonsToRemove.map(dep=>`- * ${
|
|
394
|
+
`),hasFrameworkInMainConfig||(migrationSteps+=`- Update or specify the ${import_picocolors25.default.yellow("framework")} field in ${import_picocolors25.default.blue(mainConfigPath)} with the value of "${import_picocolors25.default.cyan(frameworkPackage)}".
|
|
395
|
+
`),Object.keys(rendererOptions).length>0&&(migrationSteps+=`- Move the ${import_picocolors25.default.yellow(`${renderer}Options`)} field in ${import_picocolors25.default.blue(mainConfigPath)} to ${import_picocolors25.default.yellow("framework.options")}, and remove that field entirely.
|
|
396
|
+
More info: ${import_picocolors25.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#frameworkoptions-renamed")}
|
|
397
|
+
`),addonsToRemove.length>0&&(migrationSteps+=`- Remove the following addons from your ${import_picocolors25.default.blue(mainConfigPath)}, as the new framework also supports features provided by them:
|
|
398
|
+
${addonsToRemove.map(dep=>`- * ${import_picocolors25.default.cyan(dep)}`).join(`
|
|
409
399
|
`)}
|
|
410
|
-
`),Object.keys(addonOptions).length>0&&(migrationSteps+=`- Move the addon options "${
|
|
411
|
-
`),builderConfig&&(typeof builderConfig=="object"&&Object.keys(builderConfig.options||{}).length>0&&(migrationSteps+=`- Move the ${
|
|
412
|
-
`),migrationSteps+=`- Remove the ${
|
|
413
|
-
`),(dependenciesToRemove.includes("@storybook/builder-webpack4")||dependenciesToRemove.includes("@storybook/manager-webpack4"))&&(disclaimer=
|
|
414
|
-
${
|
|
400
|
+
`),Object.keys(addonOptions).length>0&&(migrationSteps+=`- Move the addon options "${import_picocolors25.default.yellow(Object.keys(addonOptions).join(", "))}" in ${import_picocolors25.default.blue(mainConfigPath)} to the ${import_picocolors25.default.yellow("framework.options")} field.
|
|
401
|
+
`),builderConfig&&(typeof builderConfig=="object"&&Object.keys(builderConfig.options||{}).length>0&&(migrationSteps+=`- Move the ${import_picocolors25.default.yellow("core.builder.options")} field in ${import_picocolors25.default.blue(mainConfigPath)} to ${import_picocolors25.default.yellow("framework.options.builder")}
|
|
402
|
+
`),migrationSteps+=`- Remove the ${import_picocolors25.default.yellow("core.builder")} field in ${import_picocolors25.default.blue(mainConfigPath)}.
|
|
403
|
+
`),(dependenciesToRemove.includes("@storybook/builder-webpack4")||dependenciesToRemove.includes("@storybook/manager-webpack4"))&&(disclaimer=import_ts_dedent23.dedent`\n\n
|
|
404
|
+
${import_picocolors25.default.underline(import_picocolors25.default.bold(import_picocolors25.default.cyan("Webpack 4 users")))}
|
|
415
405
|
|
|
416
406
|
Unless you're using Storybook's Vite builder, this automigration will install a Webpack 5 based framework.
|
|
417
407
|
|
|
418
408
|
Given you were using Storybook's Webpack 4 builder (default in 6.x, discontinued in 7.0), this could be a breaking change -- especially if your project has a custom webpack configuration.
|
|
419
409
|
|
|
420
|
-
To learn more about migrating from Webpack4, see: ${
|
|
421
|
-
${
|
|
410
|
+
To learn more about migrating from Webpack4, see: ${import_picocolors25.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued")}`),metaFramework==="nextjs"&&(dependenciesToRemove.includes("storybook-addon-next-router")&&(migrationSteps+=`- Migrate the usage of the ${import_picocolors25.default.cyan("storybook-addon-next-router")} addon to use the APIs from the ${import_picocolors25.default.magenta("@storybook/nextjs")} framework package instead. Follow the instructions below.`),frameworkPackage==="@storybook/react-vite"?disclaimer=import_ts_dedent23.dedent`\n\n
|
|
411
|
+
${import_picocolors25.default.bold("Important")}: We've detected you are using Storybook in a Next.js project.
|
|
422
412
|
|
|
423
|
-
This migration is set to update your project to use the ${
|
|
413
|
+
This migration is set to update your project to use the ${import_picocolors25.default.magenta("@storybook/react-vite")} framework, but Storybook provides a framework package specifically for Next.js projects: ${import_picocolors25.default.magenta("@storybook/nextjs")}.
|
|
424
414
|
|
|
425
415
|
This package provides a better, out of the box experience for Next.js users, however it is only compatible with the Webpack 5 builder, so we can't automigrate for you, as you are using the Vite builder. If you switch this project to use Webpack 5 and rerun this migration, we can update your project.
|
|
426
416
|
|
|
427
|
-
If you are interested in using this package, see: ${
|
|
428
|
-
`:frameworkPackage==="@storybook/nextjs"&&(disclaimer=
|
|
429
|
-
The ${
|
|
430
|
-
`)),metaFramework==="sveltekit"&&(frameworkPackage==="@storybook/svelte-webpack5"?disclaimer=
|
|
431
|
-
${
|
|
417
|
+
If you are interested in using this package, see: ${import_picocolors25.default.yellow("https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md")}
|
|
418
|
+
`:frameworkPackage==="@storybook/nextjs"&&(disclaimer=import_ts_dedent23.dedent`\n\n
|
|
419
|
+
The ${import_picocolors25.default.magenta("@storybook/nextjs")} package provides great user experience for Next.js users, and we highly recommend you to read more about it at ${import_picocolors25.default.yellow("https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md")}
|
|
420
|
+
`)),metaFramework==="sveltekit"&&(frameworkPackage==="@storybook/svelte-webpack5"?disclaimer=import_ts_dedent23.dedent`\n\n
|
|
421
|
+
${import_picocolors25.default.bold("Important")}: We've detected you are using Storybook in a SvelteKit project.
|
|
432
422
|
|
|
433
|
-
This migration is set to update your project to use the ${
|
|
423
|
+
This migration is set to update your project to use the ${import_picocolors25.default.magenta("@storybook/svelte-webpack5")} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${import_picocolors25.default.magenta("@storybook/sveltekit")}.
|
|
434
424
|
|
|
435
425
|
This package provides a better experience for SvelteKit users, however it is only compatible with the Vite builder, so we can't automigrate for you, as you are using the Webpack builder.
|
|
436
426
|
|
|
437
|
-
If you are interested in using this package, see: ${
|
|
438
|
-
`:(migrationSteps+=`- Remove the ${
|
|
439
|
-
More info: ${
|
|
440
|
-
`,disclaimer=
|
|
441
|
-
The ${
|
|
442
|
-
`)),
|
|
427
|
+
If you are interested in using this package, see: ${import_picocolors25.default.yellow("https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md")}
|
|
428
|
+
`:(migrationSteps+=`- Remove the ${import_picocolors25.default.yellow(`${renderer}Options`)} field from ${import_picocolors25.default.blue(mainConfigPath)}.
|
|
429
|
+
More info: ${import_picocolors25.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-uses-vite-config-automatically")}
|
|
430
|
+
`,disclaimer=import_ts_dedent23.dedent`\n\n
|
|
431
|
+
The ${import_picocolors25.default.magenta("@storybook/sveltekit")} package provides great user experience for SvelteKit users, and we highly recommend you to read more about it at ${import_picocolors25.default.yellow("https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md")}
|
|
432
|
+
`)),import_ts_dedent23.dedent`
|
|
443
433
|
We've detected your project is not fully setup with the new framework format, which was introduced in Storybook 7.
|
|
444
434
|
|
|
445
435
|
Storybook 7 introduced the concept of frameworks, which abstracts configuration for renderers (e.g. React, Vue), builders (e.g. Webpack, Vite) and defaults to make integrations easier.
|
|
446
436
|
|
|
447
|
-
Your project should be updated to use Storybook's framework: ${
|
|
437
|
+
Your project should be updated to use Storybook's framework: ${import_picocolors25.default.magenta(frameworkPackage)}. We can attempt to do this for you automatically.
|
|
448
438
|
|
|
449
439
|
Here are the steps this migration will do to migrate your project:
|
|
450
440
|
${migrationSteps}
|
|
451
441
|
|
|
452
|
-
To learn more about the new framework format, see: ${
|
|
453
|
-
`},async run({result:{dependenciesToAdd,dependenciesToRemove,frameworkPackage,frameworkOptions,builderInfo,renderer,addonsToRemove},packageManager,dryRun,mainConfigPath,skipInstall}){let packageJson=await packageManager.retrievePackageJson();if(dependenciesToRemove.length>0&&(logger16.info(`\u2705 Removing dependencies: ${dependenciesToRemove.join(", ")}`),dryRun||await packageManager.removeDependencies({skipInstall:skipInstall||dependenciesToAdd.length>0,packageJson},dependenciesToRemove)),dependenciesToAdd.length>0&&(logger16.info(`\u2705 Installing new dependencies: ${dependenciesToAdd.join(", ")}`),!dryRun)){let versionToInstall=(0,import_cli7.getStorybookVersionSpecifier)(packageJson),depsToAdd=dependenciesToAdd.map(dep=>`${dep}@${versionToInstall}`);await packageManager.addDependencies({installAsDevDependencies:!0,skipInstall,packageJson},depsToAdd)}await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{logger16.info("\u2705 Updating main.js"),logger16.info('\u2705 Updating "framework" field'),dryRun||main.setFieldValue(["framework","name"],frameworkPackage),dryRun||main.setFieldValue(["framework","options"],frameworkOptions),main.getFieldNode([`${renderer}Options`])&&(logger16.info(`\u2705 Moving "${renderer}Options" to "framework.options"`),dryRun||main.removeField([`${renderer}Options`])),main.getFieldNode(["core","builder"])&&(logger16.info('\u2705 Removing "core.builder" field'),dryRun||main.removeField(["core","builder"])),Object.keys(builderInfo.options).length>0&&(logger16.info('\u2705 Moving "core.builder.options" into "framework.options.builder"'),dryRun||main.setFieldValue(["framework","options","builder"],builderInfo.options));let currentCore=main.getFieldValue(["core"]);if(currentCore&&Object.keys(currentCore).length===0&&(logger16.info('\u2705 Removing "core" field'),dryRun||main.removeField(["core"])),addonsToRemove.length>0){let updatedAddons=main.getFieldValue(["addons"]).filter(addon=>typeof addon=="string"?!addonsToRemove.includes(addon):addon.name?!addonsToRemove.includes(addon.name):!1);logger16.info("\u2705 Removing unnecessary addons"),dryRun||main.setFieldValue(["addons"],updatedAddons)}})}};var
|
|
442
|
+
To learn more about the new framework format, see: ${import_picocolors25.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api")}${disclaimer}
|
|
443
|
+
`},async run({result:{dependenciesToAdd,dependenciesToRemove,frameworkPackage,frameworkOptions,builderInfo,renderer,addonsToRemove},packageManager,dryRun,mainConfigPath,skipInstall}){let packageJson=await packageManager.retrievePackageJson();if(dependenciesToRemove.length>0&&(logger16.info(`\u2705 Removing dependencies: ${dependenciesToRemove.join(", ")}`),dryRun||await packageManager.removeDependencies({skipInstall:skipInstall||dependenciesToAdd.length>0,packageJson},dependenciesToRemove)),dependenciesToAdd.length>0&&(logger16.info(`\u2705 Installing new dependencies: ${dependenciesToAdd.join(", ")}`),!dryRun)){let versionToInstall=(0,import_cli7.getStorybookVersionSpecifier)(packageJson),depsToAdd=dependenciesToAdd.map(dep=>`${dep}@${versionToInstall}`);await packageManager.addDependencies({installAsDevDependencies:!0,skipInstall,packageJson},depsToAdd)}await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{logger16.info("\u2705 Updating main.js"),logger16.info('\u2705 Updating "framework" field'),dryRun||main.setFieldValue(["framework","name"],frameworkPackage),dryRun||main.setFieldValue(["framework","options"],frameworkOptions),main.getFieldNode([`${renderer}Options`])&&(logger16.info(`\u2705 Moving "${renderer}Options" to "framework.options"`),dryRun||main.removeField([`${renderer}Options`])),main.getFieldNode(["core","builder"])&&(logger16.info('\u2705 Removing "core.builder" field'),dryRun||main.removeField(["core","builder"])),Object.keys(builderInfo.options).length>0&&(logger16.info('\u2705 Moving "core.builder.options" into "framework.options.builder"'),dryRun||main.setFieldValue(["framework","options","builder"],builderInfo.options));let currentCore=main.getFieldValue(["core"]);if(currentCore&&Object.keys(currentCore).length===0&&(logger16.info('\u2705 Removing "core" field'),dryRun||main.removeField(["core"])),addonsToRemove.length>0){let updatedAddons=main.getFieldValue(["addons"]).filter(addon=>typeof addon=="string"?!addonsToRemove.includes(addon):addon.name?!addonsToRemove.includes(addon.name):!1);logger16.info("\u2705 Removing unnecessary addons"),dryRun||main.setFieldValue(["addons"],updatedAddons)}})}};var import_ts_dedent24=require("ts-dedent");var minimumStorybookVersion="8.0.0-alpha.4",removeReactDependency={id:"remove-react-dependency",promptType:"manual",versionRange:[`^7 || <${minimumStorybookVersion}`,`>=${minimumStorybookVersion}`],async check({packageManager,mainConfig,storybookVersion}){let frameworkPackageName=getFrameworkPackageName(mainConfig);if(frameworkPackageName?.includes("react")||frameworkPackageName?.includes("nextjs"))return null;let{react}=await packageManager.getAllDependencies();return react?!0:null},prompt(){return import_ts_dedent24.dedent`
|
|
454
444
|
We detected that your project has a dependency for "react" that it might not need.
|
|
455
445
|
Nothing breaks by having it, you can safely ignore this message, if you wish.
|
|
456
446
|
|
|
@@ -460,7 +450,7 @@ ${errors.map(({file,error})=>`- ${file}: ${error.message}`).join(`
|
|
|
460
450
|
|
|
461
451
|
If you know you are not using React outside of Storybook, it should be safe to remove the "react" and "react-dom" dependencies from your project's package.json.
|
|
462
452
|
Storybook cannot do this automatically as removing it might break your project, so it should be done manually with care.
|
|
463
|
-
`}};var
|
|
453
|
+
`}};var import_picocolors26=__toESM(require_picocolors(),1),import_ts_dedent25=require("ts-dedent");var logger17=console,reactDocgen={id:"react-docgen",versionRange:["<8.0.0-alpha.1",">=8.0.0-alpha.1"],async check({mainConfig}){let{reactDocgenTypescriptOptions,reactDocgen:rDocgen}=mainConfig.typescript||{};return getRendererName(mainConfig)!=="react"||rDocgen!==void 0?null:{reactDocgenTypescriptOptions,reactDocgen:rDocgen}},prompt({reactDocgenTypescriptOptions}){return reactDocgenTypescriptOptions?import_ts_dedent25.dedent`
|
|
464
454
|
You have "typescript.reactDocgenTypescriptOptions" configured in your main.js,
|
|
465
455
|
but "typescript.reactDocgen" is unset.
|
|
466
456
|
|
|
@@ -473,19 +463,24 @@ ${errors.map(({file,error})=>`- ${file}: ${error.message}`).join(`
|
|
|
473
463
|
Should we update your config to continue to use "react-docgen-typescript"?
|
|
474
464
|
|
|
475
465
|
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default
|
|
476
|
-
`:
|
|
477
|
-
Since Storybook 8.0, ${
|
|
466
|
+
`:import_ts_dedent25.dedent`
|
|
467
|
+
Since Storybook 8.0, ${import_picocolors26.default.cyan("react-docgen")} is now the default for generating component controls, replacing ${import_picocolors26.default.cyan("react-docgen-typescript")}.
|
|
478
468
|
This offers better performance and suits most cases.
|
|
479
469
|
However, for complex TypeScript types or specific type features, the generated controls might not be as precise.
|
|
480
470
|
|
|
481
471
|
For more on this change, check the migration guide:
|
|
482
|
-
${
|
|
472
|
+
${import_picocolors26.default.yellow("https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default")}
|
|
483
473
|
|
|
484
474
|
For known "react-docgen" limitations, see:
|
|
485
|
-
${
|
|
475
|
+
${import_picocolors26.default.yellow("https://github.com/storybookjs/storybook/issues/26606")}
|
|
476
|
+
|
|
477
|
+
Press Y to revert to ${import_picocolors26.default.cyan("react-docgen-typescript")}, press N to use ${import_picocolors26.default.cyan("react-docgen")}
|
|
478
|
+
`},async run({dryRun,mainConfigPath,result}){dryRun||await updateMainConfig({mainConfigPath,dryRun:!!dryRun},async main=>{logger17.info("\u2705 Setting typescript.reactDocgen"),main.setFieldValue(["typescript","reactDocgen"],"react-docgen-typescript")})}};var import_common18=require("storybook/internal/common"),import_picocolors27=__toESM(require_picocolors(),1),import_ts_dedent26=require("ts-dedent"),removeAddonInteractions={id:"removeAddonInteractions",versionRange:["<9.0.0","^9.0.0-0 || ^9.0.0"],async check({mainConfig}){return(0,import_common18.getAddonNames)(mainConfig).some(addon=>addon.includes("@storybook/addon-interactions"))?{}:null},prompt(){return import_ts_dedent26.dedent`
|
|
479
|
+
${import_picocolors27.default.magenta("@storybook/addon-interactions")} has been consolidated into Storybook core.
|
|
486
480
|
|
|
487
|
-
|
|
488
|
-
|
|
481
|
+
We'll remove it from your dependencies and unregister it from your Storybook configuration.
|
|
482
|
+
The functionality will continue to work as before, but now it's built into Storybook core.
|
|
483
|
+
`},async run({packageManager}){await packageManager.runPackageCommand("storybook",["remove","@storybook/addon-interactions"])}};var import_promises5=require("fs/promises"),import_csf_tools9=require("storybook/internal/csf-tools"),babel=__toESM(require("@babel/core"),1),import_picocolors28=__toESM(require_picocolors(),1),import_ts_dedent27=require("ts-dedent"),removeArgtypesRegex={id:"remove-argtypes-regex",promptType:"manual",versionRange:["<8.0.0-alpha.0",">=8.0.0-alpha.0"],async check({previewConfigPath}){if(!previewConfigPath)return null;let previewFile=await(0,import_promises5.readFile)(previewConfigPath,{encoding:"utf-8"}),file=new babel.File({filename:previewConfigPath},{code:previewFile,ast:(0,import_csf_tools9.babelParse)(previewFile)}),argTypesRegex;return file.path.traverse({Identifier:path3=>{path3.node.name==="argTypesRegex"&&(argTypesRegex=path3)}}),argTypesRegex?{argTypesRegex,previewConfigPath}:null},prompt({argTypesRegex,previewConfigPath}){return import_ts_dedent27.dedent`
|
|
489
484
|
${import_picocolors28.default.bold("Attention")}: We've detected that you're using argTypesRegex:
|
|
490
485
|
|
|
491
486
|
${argTypesRegex.buildCodeFrameError(`${previewConfigPath}`).message}
|
|
@@ -650,7 +645,7 @@ ${errors.map(({file,error})=>`- ${file}: ${error.message}`).join(`
|
|
|
650
645
|
`)},async run({result,mainConfigPath,packageManager,skipInstall,dryRun}){let{defaultCompiler,shouldRemoveSWCFlag,isNextJs}=result;if(shouldRemoveSWCFlag&&await updateMainConfig({mainConfigPath,dryRun:!!dryRun},main=>{main.removeField(["framework","options","builder","useSWC"])}),!isNextJs){let compiler=defaultCompiler===import_cli11.CoreWebpackCompilers.Babel?await askUserForCompilerChoice():import_cli11.CoreWebpackCompilers.SWC,compilerPackageName=Object.entries(import_cli11.compilerNameToCoreCompiler).find(([,coreCompiler])=>coreCompiler===compiler)[0];await add(compilerPackageName,{packageManager:packageManager.type,skipPostinstall:!!skipInstall})}}};async function askUserForCompilerChoice(){return(await(0,import_prompts8.default)({type:"select",name:"compiler",message:"Which compiler would you like to use?",choices:[{title:"Babel",description:"Choose Babel for a vast ecosystem and battle-tested reliability.",value:import_cli11.CoreWebpackCompilers.Babel},{title:"SWC",description:"Choose SWC for fast builds and simple configuration.",value:import_cli11.CoreWebpackCompilers.SWC}],initial:0})).compiler}var import_cli12=require("storybook/internal/cli"),import_csf_tools11=require("storybook/internal/csf-tools"),import_picocolors38=__toESM(require_picocolors(),1),import_ts_dedent40=require("ts-dedent");var wrapRequire={id:"wrap-require",versionRange:["*","*"],async check({packageManager,storybookVersion,mainConfigPath}){let isStorybookInMonorepo=await packageManager.isStorybookInMonorepo(),isPnp=await(0,import_cli12.detectPnp)();if(!mainConfigPath)return null;let config=await(0,import_csf_tools11.readConfig)(mainConfigPath);if(!isStorybookInMonorepo&&!isPnp||!getFieldsForRequireWrapper(config).some(node=>isRequireWrapperNecessary(node)))return null;let isConfigTypescript=mainConfigPath.endsWith(".ts")||mainConfigPath.endsWith(".tsx");return{storybookVersion,isStorybookInMonorepo,isPnp,isConfigTypescript}},prompt({storybookVersion,isStorybookInMonorepo}){let sbFormatted=import_picocolors38.default.cyan(`Storybook ${storybookVersion}`);return import_ts_dedent40.dedent`We have detected that you're using ${sbFormatted} in a ${isStorybookInMonorepo?"monorepo":"PnP"} project.
|
|
651
646
|
For Storybook to work correctly, some fields in your main config must be updated. We can do this for you automatically.
|
|
652
647
|
|
|
653
|
-
More info: https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments`},async run({dryRun,mainConfigPath,result}){return new Promise((resolve,reject)=>{updateMainConfig({dryRun:!!dryRun,mainConfigPath},mainConfig=>{try{getFieldsForRequireWrapper(mainConfig).forEach(node=>{wrapValueWithRequireWrapper(mainConfig,node)}),getRequireWrapperName(mainConfig)===null&&(mainConfig?.fileName?.endsWith(".cjs")||mainConfig?.fileName?.endsWith(".cts")||mainConfig?.fileName?.endsWith(".cjsx")||mainConfig?.fileName?.endsWith(".ctsx")?mainConfig.setRequireImport(["dirname","join"],"path"):mainConfig.setImport(["dirname","join"],"path"),mainConfig.setBodyDeclaration(getRequireWrapperAsCallExpression(result.isConfigTypescript))),resolve()}catch(e){reject(e)}})})}};var allFixes=[addonsAPI,newFrameworks,cra5,webpack5,vue3,addonPostCSS,viteConfigFile,eslintPlugin,builderVite,sbBinary,sbScripts,removeArgtypesRegex,removedGlobalClientAPIs,mdxgfm,mdxToCSF,autodocsTrue,angularBuildersMultiproject,angularBuilders,wrapRequire,reactDocgen,storyshotsMigration,removeReactDependency,removeLegacyMDX1,webpack5CompilerSetup,mdx1to3,upgradeStorybookRelatedDependencies,vta,autodocsTags,initialGlobals,addonA11yAddonTest,consolidatedImports,addonExperimentalTest,rendererToFramework,
|
|
648
|
+
More info: https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments`},async run({dryRun,mainConfigPath,result}){return new Promise((resolve,reject)=>{updateMainConfig({dryRun:!!dryRun,mainConfigPath},mainConfig=>{try{getFieldsForRequireWrapper(mainConfig).forEach(node=>{wrapValueWithRequireWrapper(mainConfig,node)}),getRequireWrapperName(mainConfig)===null&&(mainConfig?.fileName?.endsWith(".cjs")||mainConfig?.fileName?.endsWith(".cts")||mainConfig?.fileName?.endsWith(".cjsx")||mainConfig?.fileName?.endsWith(".ctsx")?mainConfig.setRequireImport(["dirname","join"],"path"):mainConfig.setImport(["dirname","join"],"path"),mainConfig.setBodyDeclaration(getRequireWrapperAsCallExpression(result.isConfigTypescript))),resolve()}catch(e){reject(e)}})})}};var allFixes=[addonsAPI,newFrameworks,cra5,webpack5,vue3,addonPostCSS,viteConfigFile,eslintPlugin,builderVite,sbBinary,sbScripts,removeArgtypesRegex,removedGlobalClientAPIs,mdxgfm,mdxToCSF,autodocsTrue,angularBuildersMultiproject,angularBuilders,wrapRequire,reactDocgen,storyshotsMigration,removeReactDependency,removeLegacyMDX1,webpack5CompilerSetup,mdx1to3,upgradeStorybookRelatedDependencies,vta,autodocsTags,initialGlobals,addonA11yAddonTest,consolidatedImports,addonExperimentalTest,rendererToFramework,rnstorybookConfig,removeAddonInteractions];var commandFixes=[csfFactories];var import_picocolors39=__toESM(require_picocolors(),1),import_ts_dedent41=require("ts-dedent");var messageDivider2=`
|
|
654
649
|
|
|
655
650
|
`,segmentDivider=`
|
|
656
651
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/cli",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.11",
|
|
4
4
|
"description": "Storybook CLI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@babel/core": "^7.24.4",
|
|
45
45
|
"@babel/types": "^7.24.0",
|
|
46
|
-
"@storybook/codemod": "9.0.0-alpha.
|
|
46
|
+
"@storybook/codemod": "9.0.0-alpha.11",
|
|
47
47
|
"@types/semver": "^7.3.4",
|
|
48
48
|
"commander": "^12.1.0",
|
|
49
|
-
"create-storybook": "9.0.0-alpha.
|
|
49
|
+
"create-storybook": "9.0.0-alpha.11",
|
|
50
50
|
"cross-spawn": "^7.0.3",
|
|
51
51
|
"envinfo": "^7.7.3",
|
|
52
52
|
"execa": "^9.5.2",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"p-limit": "^6.2.0",
|
|
61
61
|
"prompts": "^2.4.0",
|
|
62
62
|
"semver": "^7.3.7",
|
|
63
|
-
"storybook": "9.0.0-alpha.
|
|
63
|
+
"storybook": "9.0.0-alpha.11",
|
|
64
64
|
"tiny-invariant": "^1.3.1",
|
|
65
65
|
"ts-dedent": "^2.0.0"
|
|
66
66
|
},
|