[Feature] Add Storybook to the "Supported Tooling Table"

[crubier]

• I'd be willing to implement this feature if given some directions
• This feature can already be implemented through a plugin

Describe the user story

Storybook has 43k stars on Github, more than jest, twice the number of stars of mocha, three times husky, etc. It is a massively useful and used tool in the community.

This request is to add Storybook to the supported tooling table on the main Readme.md.

Sadly, the yarn berry / storybook story is really bad right now, I did not manage to make it work despite a lot of efforts (I managed to make storybook work with yarn v1 with pnp though).

This is a big blocker for me and others as shown here for example #484

Just this element means we cannot consider using yarn v2 despite all its advantages. Supporting such a massively used package should be more of an objective.

Describe the solution you'd like

Test Yarn berry with storybook, make it work and add it to the front page table.

Describe the drawbacks of your solution

I can't see much, appart from the development effort, which might actually not be that big (Making storybook work is probably just about creating a preset for storybook using the webpack plugin)

Describe alternatives you've considered

Trying myself to create a storybook preset.

Additional context

#484

[arcanis]

I'd be very happy to solve the Storybook story - ironically, what I'm missing too is some direction 😄 Keep in mind I've literally never used it before, so I'd probably lose a lot of time just reading the Getting Started (the setup looked a bit complex last time I checked).

For example, in order to add support for Vue (it was a very similar case - I've never used Vue, and even less its CLI), someone made the following very useful document. Thanks to it I was able to have a better overview of what I was supposed to do to create a project from scratch and the problem encountered, and spend my efforts to fixing them rather than learning how to actually use Vue.

If someone could setup some kind of similar document I'd be happy to help figuring out the Storybook story!

[crubier]

@arcanis , I will try to make such a document, thanks for the pointer.

However the big difference (so far) is that unlike the document you link, I was unable to make storybook work with yarn v2 at all. I'll report back

[crubier]

Here is the repo with the guide. Right now it only reproduces the problem, with a guide to get there.

https://github.com/crubier/yarnv2-storybook

I will try to apply the fixes I have in my toolbelt.

[crubier]

I tried several possible solutions, to no avail. The full guide is the Readme here:

https://github.com/crubier/yarnv2-storybook

[crubier]

@arcanis the guide is complete, along with a working solution! I tried to make it as simple as possible. Thanks to @larixer for his help!

https://github.com/crubier/yarnv2-storybook

I opened an issue in storybook there:

storybookjs/storybook#8944

I don't know if more work is needed on yarn's side. Support for packageExtensions was super useful!

[crubier]

I also opened an MR there ndelangen/corejs-upgrade-webpack-plugin#4

[arcanis]

I wonder how much work it would take to write an E2E test for Storybook - @crubier do you have an idea? Have things improved since you started the investigation described in your repo?

[crubier]

I tried to add one there with the bare "ideal" process where you just install CRA and storybook with the factory settings...

https://github.com/crubier/berry/blob/master/.github/workflows/e2e-cra-storybook-workflow.yml

But it fails:

https://github.com/crubier/berry/commit/78acb633a0ad411ed173dae0a0037ab82fe346ad/checks?check_suite_id=407781418

[crubier]

Reported the problem there: storybookjs/storybook#9527

The storybook-yarn story is not the easiest one... I feel like I am the only storybook user who wants to use yarn v2, I don't get it ...

[gaetanmaisse]

@crubier you're definitely not the only one 😉 I will take a look at all your posts, issues & repo and try to make things better on Storybook side!

=> 🏗storybookjs/storybook#9527