From 2c488457395d60da7b4504eeb46d377013a0896f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 23 May 2022 15:05:13 +0200 Subject: [PATCH 1/2] CLI: wait until deps are installed to automigrate --- lib/cli/src/initiate.ts | 183 ++++++++++++++++++++-------------------- 1 file changed, 90 insertions(+), 93 deletions(-) diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts index 3ba05abe5296..2a41e4efdbc1 100644 --- a/lib/cli/src/initiate.ts +++ b/lib/cli/src/initiate.ts @@ -66,21 +66,6 @@ const installStorybook = ( commonJs: options.commonJs, }; - const end = () => { - if (!options.skipInstall) { - packageManager.installDependencies(); - } - - logger.log('\nTo run your Storybook, type:\n'); - codeLog([packageManager.getRunStorybookCommand()]); - logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org')); - - // Add a new line for the clear visibility. - logger.log(); - }; - - const REACT_NATIVE_REPO = 'https://github.com/storybookjs/react-native'; - const runGenerator: () => Promise = () => { switch (projectType) { case ProjectType.ALREADY_HAS_STORYBOOK: @@ -96,18 +81,17 @@ const installStorybook = ( case ProjectType.UPDATE_PACKAGE_ORGANIZATIONS: return updateOrganisationsGenerator(packageManager, options.parser, npmOptions) .then(() => null) // commandLog doesn't like to see output - .then(commandLog('Upgrading your project to the new Storybook packages.\n')) - .then(end); + .then(commandLog('Upgrading your project to the new Storybook packages.\n')); case ProjectType.REACT_SCRIPTS: - return reactScriptsGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Create React App" based project')) - .then(end); + return reactScriptsGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Create React App" based project') + ); case ProjectType.REACT: - return reactGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "React" app\n')) - .then(end); + return reactGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "React" app\n') + ); case ProjectType.REACT_NATIVE: { return ( @@ -124,112 +108,103 @@ const installStorybook = ( ]) as Promise<{ server: boolean }>) ) .then(({ server }) => reactNativeGenerator(packageManager, npmOptions, server)) - .then(commandLog('Adding Storybook support to your "React Native" app\n')) - .then(end) - .then(() => { - logger.log(chalk.red('NOTE: installation is not 100% automated.')); - logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`); - codeLog(["export {default} from './storybook';"]); - logger.log('\n For more in information, see the github readme:\n'); - logger.log(chalk.cyan(REACT_NATIVE_REPO)); - logger.log(); - }); + .then(commandLog('Adding Storybook support to your "React Native" app\n')); } case ProjectType.METEOR: - return meteorGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Meteor" app\n')) - .then(end); + return meteorGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Meteor" app\n') + ); case ProjectType.WEBPACK_REACT: - return webpackReactGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Webpack React" app\n')) - .then(end); + return webpackReactGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Webpack React" app\n') + ); case ProjectType.REACT_PROJECT: - return reactGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "React" library\n')) - .then(end); + return reactGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "React" library\n') + ); case ProjectType.SFC_VUE: - return sfcVueGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Single File Components Vue" app\n')) - .then(end); + return sfcVueGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Single File Components Vue" app\n') + ); case ProjectType.VUE: - return vueGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Vue" app\n')) - .then(end); + return vueGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Vue" app\n') + ); case ProjectType.VUE3: - return vue3Generator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Vue 3" app\n')) - .then(end); + return vue3Generator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Vue 3" app\n') + ); case ProjectType.ANGULAR: - return angularGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Angular" app\n')) - .then(end); + return angularGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Angular" app\n') + ); case ProjectType.EMBER: - return emberGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Ember" app\n')) - .then(end); + return emberGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Ember" app\n') + ); case ProjectType.MITHRIL: - return mithrilGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Mithril" app\n')) - .then(end); + return mithrilGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Mithril" app\n') + ); case ProjectType.MARIONETTE: - return marionetteGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Marionette.js" app\n')) - .then(end); + return marionetteGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Marionette.js" app\n') + ); case ProjectType.MARKO: - return markoGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Marko" app\n')) - .then(end); + return markoGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Marko" app\n') + ); case ProjectType.HTML: - return htmlGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "HTML" app\n')) - .then(end); + return htmlGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "HTML" app\n') + ); case ProjectType.WEB_COMPONENTS: - return webComponentsGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "web components" app\n')) - .then(end); + return webComponentsGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "web components" app\n') + ); case ProjectType.RIOT: - return riotGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "riot.js" app\n')) - .then(end); + return riotGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "riot.js" app\n') + ); case ProjectType.PREACT: - return preactGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Preact" app\n')) - .then(end); + return preactGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Preact" app\n') + ); case ProjectType.SVELTE: - return svelteGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Svelte" app\n')) - .then(end); + return svelteGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Svelte" app\n') + ); case ProjectType.RAX: - return raxGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Rax" app\n')) - .then(end); + return raxGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Rax" app\n') + ); case ProjectType.AURELIA: - return aureliaGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Aurelia" app\n')) - .then(end); + return aureliaGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Aurelia" app\n') + ); case ProjectType.SERVER: - return serverGenerator(packageManager, npmOptions, generatorOptions) - .then(commandLog('Adding Storybook support to your "Server" app\n')) - .then(end); + return serverGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Server" app\n') + ); case ProjectType.UNSUPPORTED: paddedLog(`We detected a project type that we don't support yet.`); @@ -294,7 +269,7 @@ const projectTypeInquirer = async ( export async function initiate(options: CommandOptions, pkg: Package): Promise { const packageManager = JsPackageManagerFactory.getPackageManager(options.useNpm); - const welcomeMessage = 'sb init - the simplest way to add a Storybook to your project.'; + const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.'; logger.log(chalk.inverse(`\n ${welcomeMessage} \n`)); if (!options.disableTelemetry) { @@ -337,7 +312,6 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise Date: Mon, 23 May 2022 15:08:03 +0200 Subject: [PATCH 2/2] CLI: fix automigration --yes flag --- lib/cli/src/automigrate/index.ts | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/lib/cli/src/automigrate/index.ts b/lib/cli/src/automigrate/index.ts index ad2dd67d7c4d..3913eab12dda 100644 --- a/lib/cli/src/automigrate/index.ts +++ b/lib/cli/src/automigrate/index.ts @@ -29,28 +29,31 @@ export const automigrate = async ({ fixId, dryRun, yes }: FixOptions = {}) => { boxen(message, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any) ); - const runAnswer = - yes || dryRun - ? { fix: false } - : await prompts([ - { - type: 'confirm', - name: 'fix', - message: `Do you want to run the '${chalk.cyan(f.id)}' fix on your project?`, - }, - ]); + let runAnswer: { fix: boolean }; + + if (dryRun) { + runAnswer = { fix: false }; + } else if (yes) { + runAnswer = { fix: true }; + } else { + runAnswer = await prompts({ + type: 'confirm', + name: 'fix', + message: `Do you want to run the '${chalk.cyan(f.id)}' fix on your project?`, + }); + } if (runAnswer.fix) { try { await f.run({ result, packageManager, dryRun }); - logger.info(`✅ fixed ${chalk.cyan(f.id)}`); + logger.info(`✅ ran ${chalk.cyan(f.id)} migration`); } catch (error) { - logger.info(`❌ error in ${chalk.cyan(f.id)}:`); + logger.info(`❌ error when running ${chalk.cyan(f.id)} migration:`); logger.info(error.message); logger.info(); } } else { - logger.info(`Skipping the ${chalk.cyan(f.id)} fix.`); + 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')}'`