All stories displayed on a single page (kitchen sink)

[design1online]

It would be nice if storybooks could run in a monorepo and generate a storybook for each package in the monorepo. It would also be nice if you had a kitchen sink that would show an example of all the components in the package in one spot rather than only seeing one at a time similar to how it's done in React Styleguide Generator Alt. This would in effect create a kitchen sink of all the components available in the mono repo. Here's a UI mock up of what this might look like:

[novascreen]

I don't think you need anything special to make this run in a monorep, just need to use the right require.context.
I've set this up for my monorepo:

const req = require.context('../../packages/', true, /src\/.*?story(\.test)?\.jsx?$/);

I suppose you are looking for the nesting? I think there are some other tickets about that.

[danielduan]

I think she's asking if there was a way to display all your stories in a single place, kind of like how bootstrap and foundation's kitchen sink looks like. Instead of clicking through to each component's story, you see everything together.

[ndelangen]

This asks for 2 things in 1 issue, and I think @novascreen answered the first:
Storybook has no concepts op repos, it looks at your filesystem, using webpack. So a monorepo can be traversed easily, all be it semi-manually. We currently have no autoloading of stories. But this is being discussed.

Secondly: The question of a "show me everything you've got" page. Thanks for the suggestion! I think this is something we should do some brainstorming on how to do a good UX for that.

[tmeasday]

I think this is something we should do some brainstorming on how to do a good UX for that.

Ideally this would be achievable via a plugin, although I don't think it is right now?

The tricky part is figuring out how to display stories side-by-side in a sensible fashion--does anyone have any ideas about how you could do that? I mean I guess you could literally just do:

<div>
  <Component1 {...story1}/>
  <Component1 {...story2}/>
</div>

But would that actually render properly in all cases?

[ndelangen]

If an addon could wrap storybook components... and thus add styling and or logic...
It could be conceivable that such an addon would completely replace the iframe component with something of their own..

If we provide a method for getting all the stories (in hierarchy) then such an addon should have no problem displaying everything on one page.

[usulpro]

I think this can be achieved by using the addon very similar to chapters.
In this case API could look like this:

storiesOf('Buttons Package')
  .addStyleGuide('Default button', guide => guide
        .add('with text', fn(1))
        .add('with icons', fn(2))
  )

where .add could be "normal" story or .addWithInfo

Looks like we can even add such API to chapters if there'll be an interest for that!
In fact, it is now already possible to add custom TOC to "chapter"

Looks really promising to continue this feature and implement something like #602

[ndelangen]

#1394 In progress here

[stale]

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 60 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!