Upgrading storybook to v6

Get Help and Help Others
1

I really want addons and default decorator support for storybook.

Scared of running into webpack configurations myself,
I’ve been waiting for adding custom Providers and configurations#1595 to be resolved,
until today I tried just hacking the stuff to see if I can just get it working. (By hacking I mean editing files in node_modules/@redwoodjs/core/)

However I noticed storybook is going through a lot of changes itself, and now it has v6. Currently redwood has “5.3.21”.

The biggest challenge regarding to the upgrade is that you can’t really find the documentation for the old version. I did manage to find the doc files inside pile of past commits (configuration, using addons). I’ve only reached partial success though, because only some of the addons seem to work.

// core/config/storybook/main.js

image
image1180×524 91.2 KB

I’ve installed the packages and injected them into the addons array, but for some reason I don’t see the knobs panel in my storybook. I do see a Notes tab though.

image
image797×568 54.5 KB

To make things more difficult, they don’t use “knobs” anymore in storybook, it’s “controls” now, so it gets harder to find relevant information.

Does anyone have a nice reference or a guide to setup storybook addons for redwood?
I began to think that upgrading to v6 is inevitable, but I’m not sure how much load there would be to change the codes for configuration.

2

There’s a lot of config going on under the hood, so this will need to happen within Redwood itself. And we are talking about it and have it on the list (currently) as a v1 release requirement.

Looping in @peterp

@jangxyz might you be interested/available in helping out with the process?

3

@thedavid I’m afraid I don’t have much experience on storybook itself.
Even so, I do would like to know about the process to see if there’s anything I can help.

FYI for the hacked version above, it started showing knobs after several more launches. I must have slipped something on the process.

4

FYI, the next Redwood release should include Storybook 6.1! Bump Storybook to 6.1 by corbt · Pull Request #2054 · redwoodjs/redwood · GitHub

2 Likes
5

Thanks @corbt and welcome \o/

6

And, also thanks to @corbt, you’ll now be able to override/extend config!

Look for v0.28 releasing later today Pacific time :rocket:

7

@corbt both were very much expected on my side :smiley: so double thanks :+1:

That’s gonna be sleepy time for me x) I’ll save it for tomorrow’s breakfast :croissant: :rocket: :coffee: .

8

Awesome! Checking it out :smiley:

Meanwhile I found a typo in the storybook docs and files a PR.

Redwood is just getting more cooler and cooler :sunglasses:

1 Like
9

Did the upgrade and worked a bit on it.

So @corbt I was wondering, did you try out the Docs addon? I’m fiddling with it and we can’t use the source type "code", nothing pops out. Apparently it’s related to sourceLoaderOptions: null.

10

Haven’t tested any addons, sorry.

11

Hey Noire!

You can get the source working by making the following adjustment to web/config/storybook.config.js (you may have to click another Story within the same group, so on the same Doc-page, to get it to show the option).

module.exports = {
  addons: [
    {
      name: '@storybook/addon-essentials',
      options: {
        sourceLoaderOptions: null,
      },
    },
  ],
}

This comment on the Storybook repo led me in the direction for the solution; which I assume is needed because Redwood uses source-loader in its storybook/main.js.

I’ve tested a few of the addons, I’ve always found Storybook to be really… particular. Most addons work as well as they ever have for me. I’ve made use of most every Essential addons with no real issue, besides the one above.

I’m more than happy to share my repository if it’ll help anyone, it’s just very much a WIP.

2 Likes
12

Aaaah awesome, thanks a lot @realStandal ! Will try as soon as my IDE loads >< :smiley:

That’s pretty cool! I’d be interested eventually.

Also there are some places with more conversation about Storybook, I’d invite you to have a look here: https://github.com/redwoodjs/redwoodjs.com/pull/611, sounds like you’d have a fair share to contribute.
And for information I had created this one, RFC: Storybook v6 with AddOn and Config Support · Issue #2064 · redwoodjs/redwood · GitHub, lining up what we were planing on my current project :), if you have any thoughts feel free to share.

13

Thanks for pointing those issues out, I’ll add that solution above to #611; if you wanna let me know here or there if it worked for you too I’d appreciate it.

1 Like