CLI: Add interactive babel config file generation

[ndelangen]

Issue: #20220

What I did

I made the babel config file more interactive, it will now ask you if you'd like typescript and or react.

And it will add preset-env by default with the right target.

[ndelangen]

I still need to figure out how to actually make this install dependencies, because that would require picking the right package manager..

[shilman]

I thought the goal here was to replicate the 6.5 config for backwards compatbility.

Re: installation, we should be able to use our PackageManager abstraction that handles this already no matter what package manager you use

[ndelangen]

The 6.5 default babel config was/is an absolute mess, it contains like 20+ presets and plugins and actually conflict with the modern code output we have today. (regeneratorRuntime issue).

I suspect adding preset-react and preset-typescript will fix 98.45% of users' issues. And will leave them with having to install 3 extra packages, and a babel config file that is human understandable; and does not contain plugins for transpiling down to code that is actively supported by the browser we target.

[yannbf]

I thought the goal here was to replicate the 6.5 config for backwards compatibility.

If we do that, we're essentially adding this to user's code, and depending on like 20 different packages:

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "shippedProposals": true,
        "loose": true
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-shorthand-properties",
    "@babel/plugin-transform-block-scoping",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-proposal-private-methods",
      {
        "loose": true
      }
    ],
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "loose": true,
        "useBuiltIns": true
      }
    ],
    "@babel/plugin-transform-classes",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-parameters",
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-transform-spread",
    "@babel/plugin-transform-for-of",
    "babel-plugin-macros",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    [
      "babel-plugin-polyfill-corejs3",
      {
        "method": "usage-global",
        "absoluteImports": "core-js",
        "version": "3.18.3"
      }
    ]
  ]
}

My feeling is that this would make people feel that Storybook is convoluted, where something simpler like this has proven enough:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript"
  ]
}

[shilman]

@ndelangen @yannbf OK i'm on board with that

[ndelangen]

Cool, I'll continue working on installing the dependencies for the user automatically.

I think we might want to create a separate ticket for adding a suggestion in the "migration end-report".

[shilman]

Here's an example of using the user's package manager to install deps on their behalf:

https://github.com/storybookjs/storybook/blob/next/code/lib/cli/src/add.ts#L107

[ndelangen]

I ran this locally (in a place where it makes no sense to do so and it worked (well the yarn install failed due to reasons, but the code all worked well)

info Generating the storybook default babel config at /Users/me/Projects/Storybook/core/code/ui
✔ Do you want to add the TypeScript preset? … yes
✔ Do you want to add the React preset? … yes
info Writing file to /Users/me/Projects/Storybook/core/code/ui/.babelrc.json
✔ Shall we install the required dependencies now? (@babel/preset-env, @babel/preset-typescript, @babel/preset-react) … yes
info Installing dependencies...
Usage Error: Package "@babel/preset-env" is already listed as a regular dependency - remove the -D,-P flags or remove it from your dependencies first

$ yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
An error occurred while installing dependencies.

I think it is good to go.

It generated:

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": []
}

[shilman]

Looks great! 💯