CLI: Add interactive babel config file generation

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);
+  }
 };