Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CLI: Fix automigration scripts #18302

Merged
merged 2 commits into from May 23, 2022
Merged

CLI: Fix automigration scripts #18302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c48845
CLI: wait until deps are installed to automigrate
yannbf May 23, 2022
9afa130
CLI: fix automigration --yes flag
yannbf May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 16 additions & 13 deletions lib/cli/src/automigrate/index.ts
View file
Open in desktop
Expand Up @@ -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')}'`
Expand Down
183 changes: 90 additions & 93 deletions lib/cli/src/initiate.ts
View file
Open in desktop
Expand Up @@ -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<void> = () => {
switch (projectType) {
case ProjectType.ALREADY_HAS_STORYBOOK:
Expand All @@ -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 (
Expand All @@ -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.`);
Expand Down Expand Up @@ -294,7 +269,7 @@ const projectTypeInquirer = async (

export async function initiate(options: CommandOptions, pkg: Package): Promise<void> {
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) {
Expand Down Expand Up @@ -337,7 +312,6 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise<v
} catch (ex) {
done(ex.message);
process.exit(1);
return;
}
done();

Expand All @@ -346,5 +320,28 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise<v
...(isEsm ? { commonJs: true } : undefined),
});

await automigrate();
if (!options.skipInstall) {
packageManager.installDependencies();
}

await automigrate({ yes: process.env.CI === 'true' });

logger.log('\nTo run your Storybook, type:\n');
codeLog([packageManager.getRunStorybookCommand()]);
logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));

if (projectType === ProjectType.REACT_NATIVE) {
const REACT_NATIVE_REPO = 'https://github.com/storybookjs/react-native';

logger.log();
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();
}

// Add a new line for the clear visibility.
logger.log();
}