From 3854a7a18f65d75f7bf9074ec31412bb4089c95c Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 19 Jan 2023 14:42:40 +0100
Subject: [PATCH] turn missing-babelrc into an automatic migration

---
 .../src/automigrate/fixes/missing-babelrc.ts  | 21 ++++++++++---------
 code/lib/cli/src/babel-config.ts              | 13 +++++++++---
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts b/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts
index fd65f84faf3e..8214bd87fef2 100644
--- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts
+++ b/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();
+  },
 };
diff --git a/code/lib/cli/src/babel-config.ts b/code/lib/cli/src/babel-config.ts
index 9a2b288e080b..38cba3f60b55 100644
--- a/code/lib/cli/src/babel-config.ts
+++ b/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?`,
     },