turn missing-babelrc into an automatic migration

code/lib/cli/src/automigrate/fixes/missing-babelrc.ts

@@ -5,6 +5,7 @@ import { getStorybookInfo } from '@storybook/core-common';
 import { loadPartialConfigAsync } from '@babel/core';
 import { readConfig } from '@storybook/csf-tools';
 import type { Fix } from '../types';
+import { generateStorybookBabelConfigInCWD } from '../../babel-config';
 
 interface MissingBabelRcOptions {
   needsBabelRc: boolean;
@@ -22,7 +23,6 @@ const frameworksThatNeedBabelConfig = [
 
 export const missingBabelRc: Fix<MissingBabelRcOptions> = {
   id: 'missing-babelrc',
-  promptOnly: true,
 
   async check({ packageManager }) {
     const packageJson = packageManager.retrievePackageJson();
@@ -61,6 +61,7 @@ export const missingBabelRc: Fix<MissingBabelRcOptions> = {
     if (frameworksThatNeedBabelConfig.includes(frameworkPackage) && !hasCraPreset) {
       const config = await loadPartialConfigAsync({
         babelrc: true,
+        filename: '__fake__.js', // somehow needed to detect .babelrc.* files
       });
 
       if (!config.config && !config.babelrc && !packageJson.babel) {
@@ -72,19 +73,15 @@ export const missingBabelRc: Fix<MissingBabelRcOptions> = {
   },
   prompt() {
     return dedent`
-      ${chalk.bold(
-        chalk.red('Attention')
-      )}: We could not automatically make this change. You'll need to do it manually.
-
       We detected that your project does not have a babel configuration (.babelrc, babel.config.js, etc.).
 
-      In version 6.x, Storybook provided its own babel settings out of the box. Now, Storybook re-uses your project's babel configuration, with small, incremental updates from Storybook addons.
-
-      If your project does not have a babel configuration file, you can generate one that's equivalent to the 6.x defaults with the following command in your project directory:
+      In version 6.x, Storybook provided its own babel settings out of the box. Now, Storybook re-uses ${chalk.bold(
+        "your project's babel configuration"
+      )}, with small, incremental updates from Storybook addons.
 
-      ${chalk.blue('npx storybook@next babelrc')}
+      If your project does not have a babel configuration file, we can generate one that's equivalent to the 6.x defaults for you. Keep in mind that this can affect your project if it uses babel, and you may need to make additional changes based on your projects needs.
 
-      This will create a ${chalk.blue(
+      We can create a ${chalk.blue(
         '.babelrc.json'
       )} file with some basic configuration and add any necessary package devDependencies.
 
@@ -94,4 +91,8 @@ export const missingBabelRc: Fix<MissingBabelRcOptions> = {
       )}
     `;
   },
+  async run() {
+    logger.info();
+    await generateStorybookBabelConfigInCWD();
+  },
 };

code/lib/cli/src/babel-config.ts

@@ -2,6 +2,7 @@ import { writeFile, pathExists } from 'fs-extra';
 import { logger } from '@storybook/node-logger';
 import path from 'path';
 import prompts from 'prompts';
+import chalk from 'chalk';
 import { JsPackageManagerFactory } from './js-package-manager';
 
 export const generateStorybookBabelConfigInCWD = async () => {
@@ -19,7 +20,7 @@ export const generateStorybookBabelConfig = async ({ target }: { target: string
   if (exists) {
     const { overwrite } = await prompts({
       type: 'confirm',
-      initial: true,
+      initial: false,
       name: 'overwrite',
       message: `${fileName} already exists. Would you like overwrite it?`,
     });
@@ -30,16 +31,22 @@ export const generateStorybookBabelConfig = async ({ target }: { target: string
     }
   }
 
+  logger.info(
+    `The config will contain ${chalk.yellow(
+      '@babel/preset-env'
+    )} and you will be prompted for additional presets, if you wish to add them depending on your project needs.`
+  );
+
   const { typescript, jsx } = await prompts([
     {
       type: 'confirm',
-      initial: true,
+      initial: false,
       name: 'typescript',
       message: `Do you want to add the TypeScript preset?`,
     },
     {
       type: 'confirm',
-      initial: true,
+      initial: false,
       name: 'jsx',
       message: `Do you want to add the React preset?`,
     },