Storybook: Add a category feature to Storybook.

[arunoda]

[kevinSuttle]

What are you thinking this could be used for? I'm interested.

[arunoda]

It's about organizing a pretty large storybook. Now we are thinking about moving this into tags.

We can tag stories. Then we can filter them our focus on a set of tags at a moment.

[jbovenschen]

We need this also, we do have a internal storybook with around 200 different stories of different "packages", I like the idea of tagging stories so you can have some overlap between them.

[siddharthlatest]

Is this on the roadmap?

[ndelangen]

@jbovenschen I'd love to hear about your idea's how your large library could be improved.

Technically, I think what would be interesting is to allow addons to provide custom UI, in this department. that way, people can create or choose a story-navigator that suits their project.

[jbovenschen]

The structure of our repo is as follows;

It's a mono-repo build using lerna, so we have around 30 packages, with all of their own primitives and stories.

Those packages could have both bindings to react-dom and react-native.
The biggest hickup was that we could not define the packages to target within the running storybook.

This could be solved with some kind of glob you could pass to the start-storybook command.
$ start-storybook --filter ./packages/(ui-grid|ui-flex)/*.stories.js or something.

Another issue is when trying to run all the storybook packages at once, this will be super heavy for a clean webpack run, because you would not change most of the packages, could possibly be solved by using dll's within webpack, dll's would also be nice for the core packages and plugins used by storybook because you would definitely not change them when building ui-components.

Improving the ui could be done with the earlier idea of tag's where you could define the used packages per story.

Hope this helps to give you any idea.

[UsulPro]

Looks like tags is something that could be implementing via addons like storybook-chapters + custom ui addons, but we need to provide better API for that.

[shilman]

@jbovenschen FYI you can control the loader like this in .storybook/config.js:

  const regex = process.env.YOUR_VAR ? /(ui-grid|ui-flex)/*\.stories.js/ : ...
  const context = require.context('../packages', true, regex)
  context.keys().map(context)

I'm sure there are good reasons to build this into storybook, but just wanted to let you know that it should be easy to get something working on the current version.

[ndelangen]

Improving webpack performance using:

Another issue is when trying to run all the storybook packages at once, this will be super heavy for a clean webpack run, because you would not change most of the packages, could possibly be solved by using dll's within webpack, dll's would also be nice for the core packages and plugins used by storybook because you would definitely not change them when building ui-components.

IS something I have in mind doing.
Maybe someone would like to do a POC for that. After webpack 2 release is working well.

[ndelangen]

I'm not sure what you mean by:

The biggest hickup was that we could not define the packages to target within the running storybook.

Do you mean you want to control which versions of react storybook uses?

[jbovenschen]

Improving webpack performance using:

Currently I don't have much time to work on another project, besides other stuff. But if nobody takes it maybe I will in the future.

The biggest hickup was that we could not define the packages to target within the running storybook.

I meant to say that there is no "Build in method" to filter stories, so we use a method like @shilman describes.

Maybe something we could add to the docs?

[ndelangen]

Yes, we should add this to the docs, and have a demo-setup using it!
I created an issue for this: https://github.com/storybooks/react-storybook/issues/746

[ndelangen]

1356 #1387 #1401 #1427 #151

About to get released in 3.2.0