How to Use the New Storybook Integration in v0.13.0

Get Help and Help Others
1

With v0.13.0, Storybook is just a command away (literally!):

yarn rw storybook

Storybook is part of the Redwood dream. We think the ideal development flow starts with Storybook entries. As @peterp likes to say, “Props in, views out! Make it simple to reason about.”

The step we’re taking here in v0.13.0 is just about integration and support. So for those with Storybook experience, know that you can use it as you normally would, but now in the context of your Redwood app. For those without, don’t worry–we have a Cookbook recipe coming up that’ll make everything clear. You can also check out the Storybook docs in the meantime.

Let’s see what you can do with it in this new release:

generators

As usual, we’ve got all the boilerplate already covered: the Layout, Page, Cell, and Component generators create Storybook entries now. Here’s an example of running the Page generator:

~/redwood-app$ yarn rw g page home /
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/rw g page home /
  ✔ Generating page files...
    ✔ Writing `./web/src/pages/HomePage/HomePage.stories.js`...
    ✔ Writing `./web/src/pages/HomePage/HomePage.test.js`...
    ✔ Writing `./web/src/pages/HomePage/HomePage.js`...
  ✔ Updating routes file...
Done in 1.00s.

See that stories.js file? Let’s open it up and see what it looks like:

// web/src/pages/HomePage/HomePage.stories.js

import HomePage from './HomePage'

export const generated = () => {
  return <HomePage />
}

export default { title: 'Pages/HomePage' }

This is a bona fide Storybook entry. In Storybook, there are two basic levels of organization: the component and its child stories. Here the component is HomePage and it has one child story: generated. Think of each child story as a permutation of its component. Here, generated is just the default permutation. But you can have as many as you want!

This is all still just code, so let’s see what this actually looks like by firing up Storybook:

yarn rw storybook

To fire up Storybook, run yarn rw storybook and navigate to http://localhost:7910:

rw-sb-sn
rw-sb-sn1366×731 32.5 KB

Now just start editing component and you’ll see your changes live in Storybook. It’s really that easy!

gif of the whole workflow

out
out1366×689 455 KB

up next

We’re not done with Storybook just yet. Here’s some of what we’ve got in store:

  • More docs: Cookbook recipes, Tutorial sections, Docs
  • Add stories to Scaffolds
  • Enable configuring Storybook: namely overwriting providers, adding addons
7 Likes
2

Quick question, can we use queries & mutations?

3

I’m very close to making that a pleasant experience!

3 Likes
4

Good work!

Might we see yarn rw g storybook <path-to-existing-component> or similar in the future? I.e. generate stories on already generated components.

5

Hmm, we haven’t discussed that option (which would be true as well for test template files). So not sure.

But for now, my recommendation would be to manually create the files and copy+paste the example from the appropriate file type.

1 Like
6

@jeliasson’s question/suggestion is a great one and right in the alley of the “visual CLI” (meaning CLI with the GUI) that I mentioned a few days back to you @thedavid. This approach expands the role of RW generators to RW editors - able to pick up previously “generated” (templated) application and continue supporting the app’s evolution.

Note: VS code becomes a key piece of the Redwood infrastructure (if it is not that already. Of course, the excitement with such fit should not prevent us from applying a lot of deep thinking about such integration.

1 Like