From e2e3fe16de3fdc216d49ca490899ff7126f7fdb6 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 14 Dec 2022 18:56:54 +0100 Subject: [PATCH 1/6] CLI: add automigration summary --- code/lib/cli/src/automigrate/index.ts | 64 +++++++++++++++++++++------ 1 file changed, 51 insertions(+), 13 deletions(-) diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index fd142694f649..32e5569a64fd 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -6,6 +6,7 @@ import { JsPackageManagerFactory, type PackageManagerName } from '../js-package- import type { Fix } from './fixes'; import { fixes } from './fixes'; +import dedent from 'ts-dedent'; const logger = console; @@ -33,26 +34,27 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti logger.info('šŸ”Ž checking possible migrations..'); const fixResults = {} as Record; + const fixSummary = { succeeded: [], failed: {} } as { succeeded: FixId[], failed: Record}; for (let i = 0; i < filtered.length; i += 1) { const f = fixes[i] as Fix; let result; - let fixStatus; + let fixStatus = FixStatus.UNNECESSARY; + try { result = await f.check({ packageManager }); - } catch (e) { + } catch (error) { + logger.info(`āš ļø failed to check fix ${chalk.bold(f.id)}`); fixStatus = FixStatus.CHECK_FAILED; - logger.info(`failed to check fix: ${f.id}`); + fixSummary.failed[f.id] = error.message; } - if (!result) { - fixStatus = FixStatus.UNNECESSARY; - } else { - logger.info(`šŸ”Ž found a '${chalk.cyan(f.id)}' migration:`); - logger.info(); + + if (result) { + logger.info(`\nšŸ”Ž found a '${chalk.cyan(f.id)}' migration:`); const message = f.prompt(result); logger.info( - boxen(message, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any) + boxen(message, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' }) ); let runAnswer: { fix: boolean }; @@ -75,8 +77,10 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti await f.run({ result, packageManager, dryRun }); logger.info(`āœ… ran ${chalk.cyan(f.id)} migration`); fixStatus = FixStatus.SUCCEEDED; + fixSummary.succeeded.push(f.id); } catch (error) { fixStatus = FixStatus.FAILED; + fixSummary.failed[f.id] = error.message; logger.info(`āŒ error when running ${chalk.cyan(f.id)} migration:`); logger.info(error); logger.info(); @@ -91,12 +95,46 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti } } - fixResults[f.id] = fixStatus; + fixResults[f.id] = fixStatus } - logger.info(); - logger.info('āœ… migration check successfully ran'); - logger.info(); + logger.info() + logger.info(getMigrationSummary(fixResults, fixSummary)); + logger.info() return fixResults; }; + +function getMigrationSummary(fixResults: Record, fixSummary: { succeeded: FixId[]; failed: Record; }) { + const hasNoFixes = Object.values(fixResults).every((r) => r === FixStatus.UNNECESSARY); + const hasFailures = Object.values(fixResults).some((r) => r === FixStatus.FAILED || r === FixStatus.CHECK_FAILED); + let title = hasNoFixes ? 'No migrations were applicable to your project' : hasFailures ? 'Migration check ran with failures' : 'Migration check ran successfully'; + + let successfulFixesMessage = fixSummary.succeeded.length > 0 + ? ` + ${chalk.bold('Migrations that succeeded:')}\n\n ${fixSummary.succeeded.map(m => chalk.green(m)).join(', ')} + ` + : ''; + + let failedFixesMessage = Object.keys(fixSummary.failed).length > 0 + ? ` + ${chalk.bold('Migrations that failed:')}\n ${Object.entries(fixSummary.failed).reduce((acc, [id, error]) => { + return acc + `\n${chalk.redBright(id)}:\n${error}`; + }, '')} + \n` + : ''; + + const divider = hasNoFixes ? '' : '\nā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€\n\n'; + + let summaryMessage = dedent` + ${successfulFixesMessage}${failedFixesMessage}${divider}If you'd like to run the migrations again, you can do so by running '${chalk.cyan('npx storybook@next automigrate')}' + + The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook. + + Please check the changelog and migration guide for manual migrations and more information: ${chalk.yellow('https://storybook.js.org/migration-guides/7.0')} + And reach out on Discord if you need help: ${chalk.yellow('https://discord.gg/storybook')} + `; + + return boxen(summaryMessage, { borderStyle: 'round', padding: 1, title, borderColor: hasFailures ? 'red' : 'green' }); +} + From 7bdb4a053b41e35a1e0d5d6d29b469bc8839ea57 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 14 Dec 2022 19:01:49 +0100 Subject: [PATCH 2/6] CLI: throw errors when ot finding storybook version instead of warning --- .../src/automigrate/fixes/mainjsFramework.ts | 5 ++- .../src/automigrate/fixes/new-frameworks.ts | 33 +++++++++---------- .../src/automigrate/fixes/nextjs-framework.ts | 5 ++- .../cli/src/automigrate/fixes/sb-binary.ts | 5 ++- .../cli/src/automigrate/fixes/sb-scripts.ts | 5 ++- .../automigrate/fixes/sveltekit-framework.ts | 5 ++- .../lib/cli/src/automigrate/fixes/webpack5.ts | 5 ++- 7 files changed, 27 insertions(+), 36 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/mainjsFramework.ts b/code/lib/cli/src/automigrate/fixes/mainjsFramework.ts index 69cad36afe62..b08460602cf8 100644 --- a/code/lib/cli/src/automigrate/fixes/mainjsFramework.ts +++ b/code/lib/cli/src/automigrate/fixes/mainjsFramework.ts @@ -31,11 +31,10 @@ export const mainjsFramework: Fix = { const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version; if (!storybookCoerced) { - logger.warn(dedent` - āŒ Unable to determine storybook version, skipping ${chalk.cyan('mainjsFramework')} fix. + throw new Error(dedent` + āŒ Unable to determine storybook version. šŸ¤” Are you running automigrate from your project directory? `); - return null; } const main = await readConfig(mainConfig); diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts index 88cac278c3a2..838a517e432c 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts @@ -113,11 +113,10 @@ export const newFrameworks: Fix = { const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version; if (!storybookCoerced) { - logger.warn(dedent` - āŒ Unable to determine storybook version, skipping ${chalk.cyan('newFrameworks')} fix. + throw new Error(dedent` + āŒ Unable to determine storybook version. šŸ¤” Are you running automigrate from your project directory? `); - return null; } if (!semver.gte(storybookCoerced, '7.0.0')) { @@ -151,18 +150,6 @@ export const newFrameworks: Fix = { return null; } - if (allDeps.vite && semver.lt(semver.coerce(allDeps.vite).version, '3.0.0')) { - logger.warn(dedent` - āŒ Detected Vite ${ - allDeps.vite - }, which is unsupported in Storybook 7.0, so the ${chalk.cyan( - 'newFrameworks' - )} fix will be skipped. - Please upgrade vite to 3.0.0 or higher and rerun this automigration with "npx storybook@future automigrate". - `); - return null; - } - const frameworkOptions = // svelte-vite doesn't support svelteOptions so there's no need to move them newFrameworkPackage === '@storybook/svelte-vite' ? {} : getFrameworkOptions(framework, main); @@ -183,6 +170,14 @@ export const newFrameworks: Fix = { dependenciesToAdd.push(newFrameworkPackage); } + if (allDeps.vite && semver.lt(semver.coerce(allDeps.vite).version, '3.0.0')) { + throw new Error(dedent` + āŒ Your project should be upgraded to use the framework package ${chalk.bold(newFrameworkPackage)}, but we detected that you are using Vite ${ + chalk.bold(allDeps.vite) + }, which is unsupported in ${chalk.bold('Storybook 7.0')}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration. + `); + } + return { main, dependenciesToAdd, @@ -194,13 +189,15 @@ export const newFrameworks: Fix = { }; }, - prompt() { + prompt({ frameworkPackage, dependenciesToRemove }) { return dedent` We've detected you are using an older format of Storybook frameworks and builders. In Storybook 7, frameworks also specify the builder to be used. - We can remove the dependencies that are no longer needed and install the new framework that already includes the builder. + We can remove the dependencies that are no longer needed: ${chalk.yellow(dependenciesToRemove.join(', '))} + + And set up the ${chalk.magenta(frameworkPackage)} framework that already includes the builder. To learn more about the framework field, see: ${chalk.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory' @@ -211,7 +208,7 @@ export const newFrameworks: Fix = { Unless you're using Storybook's Vite builder, this automigration will install a Webpack5-based framework. If you were using Storybook's Webpack4 builder (default in 6.x, discontinued in 7.0), this could be a breaking - change--especially if your project has a custom webpack configuration. + change -- especially if your project has a custom webpack configuration. To learn more about migrating from Webpack4, see: ${chalk.yellow( 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued' diff --git a/code/lib/cli/src/automigrate/fixes/nextjs-framework.ts b/code/lib/cli/src/automigrate/fixes/nextjs-framework.ts index ca737b5fe03b..5dbe0f5b22cc 100644 --- a/code/lib/cli/src/automigrate/fixes/nextjs-framework.ts +++ b/code/lib/cli/src/automigrate/fixes/nextjs-framework.ts @@ -65,11 +65,10 @@ export const nextjsFramework: Fix = { const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version; if (!storybookCoerced) { - logger.warn(dedent` - āŒ Unable to determine storybook version, skipping ${chalk.cyan('nextjsFramework')} fix. + throw new Error(dedent` + āŒ Unable to determine storybook version. šŸ¤” Are you running automigrate from your project directory? `); - return null; } if (!semver.gte(storybookCoerced, '7.0.0')) { diff --git a/code/lib/cli/src/automigrate/fixes/sb-binary.ts b/code/lib/cli/src/automigrate/fixes/sb-binary.ts index 075e841bb7cf..91f647ba7a52 100644 --- a/code/lib/cli/src/automigrate/fixes/sb-binary.ts +++ b/code/lib/cli/src/automigrate/fixes/sb-binary.ts @@ -34,11 +34,10 @@ export const sbBinary: Fix = { const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version; if (!storybookCoerced) { - logger.warn(dedent` - āŒ Unable to determine storybook version, skipping ${chalk.cyan(this.id)} fix. + throw new Error(dedent` + āŒ Unable to determine storybook version. šŸ¤” Are you running automigrate from your project directory? `); - return null; } if (semver.lt(storybookCoerced, '7.0.0')) { diff --git a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts b/code/lib/cli/src/automigrate/fixes/sb-scripts.ts index e561cf2f7e01..73dd8ac39776 100644 --- a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts +++ b/code/lib/cli/src/automigrate/fixes/sb-scripts.ts @@ -77,11 +77,10 @@ export const sbScripts: Fix = { const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version; if (!storybookCoerced) { - logger.warn(dedent` - āŒ Unable to determine storybook version, skipping ${chalk.cyan(this.id)} fix. + throw new Error(dedent` + āŒ Unable to determine storybook version. šŸ¤” Are you running automigrate from your project directory? `); - return null; } if (semver.lt(storybookCoerced, '7.0.0')) { diff --git a/code/lib/cli/src/automigrate/fixes/sveltekit-framework.ts b/code/lib/cli/src/automigrate/fixes/sveltekit-framework.ts index b2201a0791b7..3422da2cfc61 100644 --- a/code/lib/cli/src/automigrate/fixes/sveltekit-framework.ts +++ b/code/lib/cli/src/automigrate/fixes/sveltekit-framework.ts @@ -46,11 +46,10 @@ export const sveltekitFramework: Fix = { const sbVersionCoerced = storybookVersion && semver.coerce(storybookVersion)?.version; if (!sbVersionCoerced) { - logger.warn(dedent` - āŒ Unable to determine Storybook version, skipping ${chalk.cyan(fixId)} fix. + throw new Error(dedent` + āŒ Unable to determine storybook version. šŸ¤” Are you running automigrate from your project directory? `); - return null; } if (!semver.gte(sbVersionCoerced, '7.0.0')) { diff --git a/code/lib/cli/src/automigrate/fixes/webpack5.ts b/code/lib/cli/src/automigrate/fixes/webpack5.ts index ee6052edac7a..9cd2839d598f 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5.ts @@ -39,11 +39,10 @@ export const webpack5: Fix & CheckBuilder = { const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version; if (!storybookCoerced) { - logger.warn(dedent` - āŒ Unable to determine storybook version, skipping ${chalk.cyan('webpack5')} fix. + throw new Error(dedent` + āŒ Unable to determine storybook version. šŸ¤” Are you running automigrate from your project directory? `); - return null; } if (semver.lt(storybookCoerced, '6.3.0')) { From 6ce37fafa2cdbcccd78df5f2dc47e44e0c04ff0e Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 14 Dec 2022 19:24:28 +0100 Subject: [PATCH 3/6] add extra line between errors --- code/lib/cli/src/automigrate/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index 32e5569a64fd..73ee4a916ca7 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -119,7 +119,7 @@ function getMigrationSummary(fixResults: Record, fixSummary: let failedFixesMessage = Object.keys(fixSummary.failed).length > 0 ? ` ${chalk.bold('Migrations that failed:')}\n ${Object.entries(fixSummary.failed).reduce((acc, [id, error]) => { - return acc + `\n${chalk.redBright(id)}:\n${error}`; + return acc + `\n${chalk.redBright(id)}:\n${error}\n`; }, '')} \n` : ''; From 220b40bebf957efc9ac95c5d1ad83d3435882aa5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 14 Dec 2022 19:57:48 +0100 Subject: [PATCH 4/6] remove unnecessary message --- code/lib/cli/src/automigrate/index.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index 73ee4a916ca7..e78dbfef6925 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -89,9 +89,6 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti fixStatus = FixStatus.SKIPPED; logger.info(`Skipping the ${chalk.cyan(f.id)} migration.`); logger.info(); - logger.info( - `If you change your mind, run '${chalk.cyan('npx storybook@next automigrate')}'` - ); } } From 991492af011c6cbef6cec8f1ba016ed9f9f9455d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 15 Dec 2022 09:55:09 +0100 Subject: [PATCH 5/6] fix lint issues --- code/lib/cli/src/automigrate/index.ts | 84 ++++++++++++++++++--------- 1 file changed, 55 insertions(+), 29 deletions(-) diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index e78dbfef6925..06cb92d0d468 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -2,11 +2,11 @@ import prompts from 'prompts'; import chalk from 'chalk'; import boxen from 'boxen'; +import dedent from 'ts-dedent'; import { JsPackageManagerFactory, type PackageManagerName } from '../js-package-manager'; import type { Fix } from './fixes'; import { fixes } from './fixes'; -import dedent from 'ts-dedent'; const logger = console; @@ -34,13 +34,16 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti logger.info('šŸ”Ž checking possible migrations..'); const fixResults = {} as Record; - const fixSummary = { succeeded: [], failed: {} } as { succeeded: FixId[], failed: Record}; + const fixSummary = { succeeded: [], failed: {} } as { + succeeded: FixId[]; + failed: Record; + }; for (let i = 0; i < filtered.length; i += 1) { const f = fixes[i] as Fix; let result; let fixStatus = FixStatus.UNNECESSARY; - + try { result = await f.check({ packageManager }); } catch (error) { @@ -53,9 +56,7 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti logger.info(`\nšŸ”Ž found a '${chalk.cyan(f.id)}' migration:`); const message = f.prompt(result); - logger.info( - boxen(message, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' }) - ); + logger.info(boxen(message, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' })); let runAnswer: { fix: boolean }; @@ -92,46 +93,71 @@ export const automigrate = async ({ fixId, dryRun, yes, useNpm, force }: FixOpti } } - fixResults[f.id] = fixStatus + fixResults[f.id] = fixStatus; } - logger.info() + logger.info(); logger.info(getMigrationSummary(fixResults, fixSummary)); - logger.info() + logger.info(); return fixResults; }; -function getMigrationSummary(fixResults: Record, fixSummary: { succeeded: FixId[]; failed: Record; }) { +function getMigrationSummary( + fixResults: Record, + fixSummary: { succeeded: FixId[]; failed: Record } +) { const hasNoFixes = Object.values(fixResults).every((r) => r === FixStatus.UNNECESSARY); - const hasFailures = Object.values(fixResults).some((r) => r === FixStatus.FAILED || r === FixStatus.CHECK_FAILED); - let title = hasNoFixes ? 'No migrations were applicable to your project' : hasFailures ? 'Migration check ran with failures' : 'Migration check ran successfully'; - - let successfulFixesMessage = fixSummary.succeeded.length > 0 - ? ` - ${chalk.bold('Migrations that succeeded:')}\n\n ${fixSummary.succeeded.map(m => chalk.green(m)).join(', ')} + const hasFailures = Object.values(fixResults).some( + (r) => r === FixStatus.FAILED || r === FixStatus.CHECK_FAILED + ); + // eslint-disable-next-line no-nested-ternary + const title = hasNoFixes + ? 'No migrations were applicable to your project' + : hasFailures + ? 'Migration check ran with failures' + : 'Migration check ran successfully'; + + const successfulFixesMessage = + fixSummary.succeeded.length > 0 + ? ` + ${chalk.bold('Migrations that succeeded:')}\n\n ${fixSummary.succeeded + .map((m) => chalk.green(m)) + .join(', ')} ` - : ''; - - let failedFixesMessage = Object.keys(fixSummary.failed).length > 0 - ? ` - ${chalk.bold('Migrations that failed:')}\n ${Object.entries(fixSummary.failed).reduce((acc, [id, error]) => { - return acc + `\n${chalk.redBright(id)}:\n${error}\n`; - }, '')} + : ''; + + const failedFixesMessage = + Object.keys(fixSummary.failed).length > 0 + ? ` + ${chalk.bold('Migrations that failed:')}\n ${Object.entries(fixSummary.failed).reduce( + (acc, [id, error]) => { + return `${acc}\n${chalk.redBright(id)}:\n${error}\n`; + }, + '' + )} \n` - : ''; + : ''; const divider = hasNoFixes ? '' : '\nā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€\n\n'; - let summaryMessage = dedent` - ${successfulFixesMessage}${failedFixesMessage}${divider}If you'd like to run the migrations again, you can do so by running '${chalk.cyan('npx storybook@next automigrate')}' + const summaryMessage = dedent` + ${successfulFixesMessage}${failedFixesMessage}${divider}If you'd like to run the migrations again, you can do so by running '${chalk.cyan( + 'npx storybook@next automigrate' + )}' The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook. - Please check the changelog and migration guide for manual migrations and more information: ${chalk.yellow('https://storybook.js.org/migration-guides/7.0')} + Please check the changelog and migration guide for manual migrations and more information: ${chalk.yellow( + 'https://storybook.js.org/migration-guides/7.0' + )} And reach out on Discord if you need help: ${chalk.yellow('https://discord.gg/storybook')} `; - return boxen(summaryMessage, { borderStyle: 'round', padding: 1, title, borderColor: hasFailures ? 'red' : 'green' }); + return boxen(summaryMessage, { + borderStyle: 'round', + padding: 1, + title, + borderColor: hasFailures ? 'red' : 'green', + }); } - From 8f711a48bc168d744457dccd3bfea8023c0666c4 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 15 Dec 2022 10:55:25 +0100 Subject: [PATCH 6/6] fix lint issues --- .../cli/src/automigrate/fixes/new-frameworks.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts index 838a517e432c..dee016f57808 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts @@ -172,9 +172,13 @@ export const newFrameworks: Fix = { if (allDeps.vite && semver.lt(semver.coerce(allDeps.vite).version, '3.0.0')) { throw new Error(dedent` - āŒ Your project should be upgraded to use the framework package ${chalk.bold(newFrameworkPackage)}, but we detected that you are using Vite ${ - chalk.bold(allDeps.vite) - }, which is unsupported in ${chalk.bold('Storybook 7.0')}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration. + āŒ Your project should be upgraded to use the framework package ${chalk.bold( + newFrameworkPackage + )}, but we detected that you are using Vite ${chalk.bold( + allDeps.vite + )}, which is unsupported in ${chalk.bold( + 'Storybook 7.0' + )}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration. `); } @@ -195,7 +199,9 @@ export const newFrameworks: Fix = { In Storybook 7, frameworks also specify the builder to be used. - We can remove the dependencies that are no longer needed: ${chalk.yellow(dependenciesToRemove.join(', '))} + We can remove the dependencies that are no longer needed: ${chalk.yellow( + dependenciesToRemove.join(', ') + )} And set up the ${chalk.magenta(frameworkPackage)} framework that already includes the builder.