Storybook: CRA: Move cra-config into a separate preset

[shilman]

Currently CRA config is a magic step that happens during @storybook/react loading. It should be split out into its own preset so that it is more transparent and easier to reason about.

For example in https://github.com/storybookjs/presets/issues/20, CRA is silently removing the docgen information added by preset-typescript.

There are also other cases, e.g. supporting custom forks of CRA, where we want to give users more control: https://github.com/storybookjs/storybook/issues/6973

It would be great to:

• [x] Move CRA-config into its own preset
• [x] Auto-detect react-scripts in the CLI and add that preset automatically
• [x] Provide a clean migration path for existing CRA apps (a warning if preset is not defined + instructions in MIGRATION.md?)

In addition (probably a separate issue?) preset-cra should log when it's removing rules using #7220.

[mrmckeb]

Hey @shilman, I could possibly pick this up over the weekend?

We'll have to think about how to handle customisation - I think we could probably just say that if you've modified CRA, you'll probably need to modify this config (or write your own).

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Hey @mrmckeb I think this would be a big milestone towards getting presets adopted. We're in the thick of the 5.2 release, so we probably wouldn't get it in until 5.3, but if you wanted to take a stab at it, it would be much appreciated!! 🙇

[mrmckeb]

Thanks @shilman, I think this weekend I can start looking at it ;)

[mrmckeb]

I've started on this today @shilman, I'll try to get it done in the next 7-10 days :)

[shilman]

Awesome!!! Thanks for taking this on. I'm really excited about where this is headed and have been doing some interesting preset work in docs-land. I think we can make this really sweet 🔥

[mrmckeb]

@shilman In case you see this first, I pinged you for a quick discussion on this ;)

[shilman]

Migration path for CRA users:

5.2 (master): if user adds CRA preset, we use that. if not, we use the built-in CRA hack. sb init does nothing special in a CRA project.

5.3 (next): if user adds CRA preset, we use that. if not, we use the CRA preset automatically and maybe log a warning that it will be required in 6.0. sb init adds the CRA preset automatically in presets.js.

6.0: if user adds CRA preset, we use that. if not, log a warning that CRA preset is required in 6.0. sb init adds the CRA preset automatically in presets.js.

[mrmckeb]

Thanks @shilman, so in short, we 5.3 progresses as is - but use the preset if it exists. In 6.0, we require the preset.

[shilman]

@mrmckeb The diff between 5.2 and 5.3 in my proposal is that 5.2 uses the built-in preset, whereas 5.3 uses your preset package. If that's possible?

[mrmckeb]

Ah, OK - yes... will take a look today.

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.19 containing PR #8416 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.21 containing PR #8449 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.