diff --git a/code/lib/cli/src/babel-config.ts b/code/lib/cli/src/babel-config.ts index 31d024390395..9a2b288e080b 100644 --- a/code/lib/cli/src/babel-config.ts +++ b/code/lib/cli/src/babel-config.ts @@ -1,7 +1,8 @@ -import { writeFile, access } from 'fs-extra'; +import { writeFile, pathExists } from 'fs-extra'; import { logger } from '@storybook/node-logger'; import path from 'path'; import prompts from 'prompts'; +import { JsPackageManagerFactory } from './js-package-manager'; export const generateStorybookBabelConfigInCWD = async () => { const target = process.cwd(); @@ -10,23 +11,10 @@ export const generateStorybookBabelConfigInCWD = async () => { export const generateStorybookBabelConfig = async ({ target }: { target: string }) => { logger.info(`Generating the storybook default babel config at ${target}`); - const contents = JSON.stringify( - { - sourceType: 'unambiguous', - presets: [], - plugins: [], - }, - null, - 2 - ); - const fileName = '.babelrc.json'; const location = path.join(target, fileName); - const exists = await access(location).then( - () => true, - () => false - ); + const exists = await pathExists(location); if (exists) { const { overwrite } = await prompts({ @@ -42,6 +30,59 @@ export const generateStorybookBabelConfig = async ({ target }: { target: string } } + const { typescript, jsx } = await prompts([ + { + type: 'confirm', + initial: true, + name: 'typescript', + message: `Do you want to add the TypeScript preset?`, + }, + { + type: 'confirm', + initial: true, + name: 'jsx', + message: `Do you want to add the React preset?`, + }, + ]); + + const added = ['@babel/preset-env']; + const presets: (string | [string, any])[] = [['@babel/preset-env', { targets: { chrome: 100 } }]]; + + if (typescript) { + added.push('@babel/preset-typescript'); + presets.push('@babel/preset-typescript'); + } + + if (jsx) { + added.push('@babel/preset-react'); + presets.push('@babel/preset-react'); + } + + const contents = JSON.stringify( + { + sourceType: 'unambiguous', + presets, + plugins: [], + }, + null, + 2 + ); + logger.info(`Writing file to ${location}`); await writeFile(location, contents); + + const { runInstall } = await prompts({ + type: 'confirm', + initial: true, + name: 'runInstall', + message: `Shall we install the required dependencies now? (${added.join(', ')})`, + }); + + if (runInstall) { + logger.info(`Installing dependencies...`); + + const packageManager = JsPackageManagerFactory.getPackageManager(); + + packageManager.addDependencies({ installAsDevDependencies: true }, added); + } };