make the babel cli command functional

lib/cli/package.json

@@ -49,6 +49,7 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@storybook/codemod": "6.4.0-alpha.32",
+    "@storybook/core-common": "6.4.0-alpha.32",
     "@storybook/node-logger": "6.4.0-alpha.32",
     "@storybook/semver": "^7.3.2",
     "boxen": "^4.2.0",

lib/cli/src/babal-config.ts

@@ -1,6 +1,41 @@
+import { writeFile, access } from 'fs-extra';
 import { logger } from '@storybook/node-logger';
+import { getStorybookBabelConfig } from '@storybook/core-common';
+import path from 'path';
+import prompts from 'prompts';
 
-export const generateStorybookBabelConfig = async () => {
-  const cwd = process.cwd();
-  logger.info(`Generating the storybook default babel config at ${cwd}`);
+export const generateStorybookBabelConfigInCWD = async () => {
+  const target = process.cwd();
+  return generateStorybookBabelConfig({ target });
+};
+export const generateStorybookBabelConfig = async ({ target }: { target: string }) => {
+  logger.info(`Generating the storybook default babel config at ${target}`);
+
+  const config = getStorybookBabelConfig();
+  const contents = JSON.stringify(config, null, 2);
+
+  const fileName = '.babelrc.json';
+  const location = path.join(target, fileName);
+
+  const exists = await access(location).then(
+    () => true,
+    () => false
+  );
+
+  if (exists) {
+    const { overwrite } = await prompts({
+      type: 'confirm',
+      initial: true,
+      name: 'overwrite',
+      message: `${fileName} already exists. Would you like overwrite it?`,
+    });
+
+    if (overwrite === false) {
+      logger.warn(`Cancelled, babel config file was NOT written to file-system.`);
+      return;
+    }
+  }
+
+  logger.info(`Writing file to ${location}`);
+  await writeFile(location, contents);
 };

lib/cli/src/generate.ts

@@ -11,7 +11,7 @@ import { extract } from './extract';
 import { upgrade } from './upgrade';
 import { repro } from './repro';
 import { link } from './link';
-import { generateStorybookBabelConfig } from './babal-config';
+import { generateStorybookBabelConfigInCWD } from './babal-config';
 
 const pkg = sync({ cwd: __dirname }).packageJson;
 
@@ -41,7 +41,7 @@ program
 program
   .command('babelrc')
   .description('generate the default storybook babel config into your current working directory')
-  .action(() => generateStorybookBabelConfig());
+  .action(() => generateStorybookBabelConfigInCWD());
 
 program
   .command('upgrade')

lib/core-common/src/utils/babel.ts

@@ -1,56 +1,52 @@
 import { TransformOptions } from '@babel/core';
 
-const plugins = [
-  require.resolve('@babel/plugin-transform-shorthand-properties'),
-  require.resolve('@babel/plugin-transform-block-scoping'),
-  /*
-   * Added for TypeScript experimental decorator support
-   * https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options
-   */
-  [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-  [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
-  [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
-  require.resolve('@babel/plugin-proposal-export-default-from'),
-  require.resolve('@babel/plugin-syntax-dynamic-import'),
-  [
-    require.resolve('@babel/plugin-proposal-object-rest-spread'),
-    { loose: true, useBuiltIns: true },
-  ],
-  require.resolve('@babel/plugin-transform-classes'),
-  require.resolve('@babel/plugin-transform-arrow-functions'),
-  require.resolve('@babel/plugin-transform-parameters'),
-  require.resolve('@babel/plugin-transform-destructuring'),
-  require.resolve('@babel/plugin-transform-spread'),
-  require.resolve('@babel/plugin-transform-for-of'),
-  require.resolve('babel-plugin-macros'),
-  /*
-   * Optional chaining and nullish coalescing are supported in
-   * @babel/preset-env, but not yet supported in Webpack due to support
-   * missing from acorn. These can be removed once Webpack has support.
-   * See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250
-   */
-  require.resolve('@babel/plugin-proposal-optional-chaining'),
-  require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-  [
-    require.resolve('babel-plugin-polyfill-corejs3'),
-    {
-      method: 'usage-global',
-      absoluteImports: require.resolve('core-js'),
-      // eslint-disable-next-line global-require
-      version: require('core-js/package.json').version,
-    },
-  ],
-];
-
-const presets = [
-  [require.resolve('@babel/preset-env'), { shippedProposals: true, loose: true }],
-  require.resolve('@babel/preset-typescript'),
-];
-
-export const getStorybookBabelConfig: () => TransformOptions = () => {
+export const getStorybookBabelConfig = () => {
   return {
     sourceType: 'unambiguous',
-    presets: [...presets],
-    plugins: [...plugins],
-  };
+    presets: [
+      [require.resolve('@babel/preset-env'), { shippedProposals: true, loose: true }],
+      require.resolve('@babel/preset-typescript'),
+    ],
+    plugins: [
+      require.resolve('@babel/plugin-transform-shorthand-properties'),
+      require.resolve('@babel/plugin-transform-block-scoping'),
+      /*
+       * Added for TypeScript experimental decorator support
+       * https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options
+       */
+      [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
+      [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+      [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
+      require.resolve('@babel/plugin-proposal-export-default-from'),
+      require.resolve('@babel/plugin-syntax-dynamic-import'),
+      [
+        require.resolve('@babel/plugin-proposal-object-rest-spread'),
+        { loose: true, useBuiltIns: true },
+      ],
+      require.resolve('@babel/plugin-transform-classes'),
+      require.resolve('@babel/plugin-transform-arrow-functions'),
+      require.resolve('@babel/plugin-transform-parameters'),
+      require.resolve('@babel/plugin-transform-destructuring'),
+      require.resolve('@babel/plugin-transform-spread'),
+      require.resolve('@babel/plugin-transform-for-of'),
+      require.resolve('babel-plugin-macros'),
+      /*
+       * Optional chaining and nullish coalescing are supported in
+       * @babel/preset-env, but not yet supported in Webpack due to support
+       * missing from acorn. These can be removed once Webpack has support.
+       * See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250
+       */
+      require.resolve('@babel/plugin-proposal-optional-chaining'),
+      require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
+      [
+        require.resolve('babel-plugin-polyfill-corejs3'),
+        {
+          method: 'usage-global',
+          absoluteImports: require.resolve('core-js'),
+          // eslint-disable-next-line global-require
+          version: require('core-js/package.json').version,
+        },
+      ],
+    ],
+  } as TransformOptions;
 };

yarn.lock

@@ -7775,6 +7775,7 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@storybook/client-api": 6.4.0-alpha.32
     "@storybook/codemod": 6.4.0-alpha.32
+    "@storybook/core-common": 6.4.0-alpha.32
     "@storybook/node-logger": 6.4.0-alpha.32
     "@storybook/semver": ^7.3.2
     "@types/cross-spawn": ^6.0.2