Wrap current API to extend it to align with Atomic Design

[travi]

I am a big fan of the idea behind atomic design and the pattern lab tools that have been built around it. React components fit this model incredibly well, but there is no implementation of pattern lab for React components (yet at least).

When I came across this project, pattern lab for React was the first thing that came to mind. Most of my desires for such an implementation are covered well by react-storybook, so I first want to say thank you very much for the work you've put into such a helpful tool.

The feature that I think would take react-storybook to the next level as a tool that would compare to pattern lab would be the ability to group stories into categories, like atoms, molecules, organisms, templates, and pages. The last bullet under the Basic API heading mentions prefixing a story with a ., but does not explain what to expect as a result. My hope was that this was syntax that would enable grouping, but I did not notice any change in the handling of a story that I applied this to.

Is there a plan to add the ability to group stories like I describe? Was the dot notation intended for something along these lines?

[arunoda]

Atomic design is kind cool. But the problem is I don't it's suitable for everyone. The components grouping in atomic may be too much for some apps. And for some components, it may be less.

So, currently this is our suggestion for this: #151 (comment)

I'm going to close this issue in-favour of #151

[travi]

Sorry that I missed that existing issue. I do want to clarify that my intent wasn't to suggest that react-storybook should shift to follow atomic design, but only to enable users that would like to follow it simply to have the ability to categorize stories that could align with its suggested groupings.

Enabling groups could simply provide added flexibility that could greatly improve the abiity to handle the needs of larger projects.

[arunoda]

@travi Yep. I got it.
But, I think it's better we provide some layer on top of React Storybook. I hard to get that a core feature in Storybook. This is just like the CSS issue.

I'll reopen this and you may change the title to mention Atomic Design.

[travi]

Honestly, I'm not sure that reopening this issue is actually beneficial since my intention of mentioning atomic design was really only to highlight one use case for grouping. Because of this, I think it was appropriate to close in favor of the other issue.

I agree that atomic design likely doesn't make sense as a core feature of storybook at this point. However, I'm not clear about what you mean by providing a layer on top of atomic design. I'm also not sure which css issue you are referring to. Are you suggesting some extension of storybook that could enable custom uses like this outside of the core?

I'm happy to discuss further if you are suggesting something like that happening in the future, but I do think groups/categories can satisfy my needs for now.

[arunoda]

Actually I was talking about a layer on top of Storybook. (sorry for the typo, I corrected that). CSS issue is there is no correct or wrong way. There are a lot of choices.

I think this can be closed. Feel free to do that.

[travi]

Well, before we close it, I am interested in your thoughts about this extra layer and how it would be approached. Would you like to expand on your thoughts?

[arunoda]

Basically, it's a way to wrap the current API for atomic design.
Then stories are created with dot(.)s.

If needed, we can introduce some core changes for additional things.

[travi]

If you see a reasonable way to get to that point and see value in getting there, I think that would be a great enhancement. How can I help make such an evolution successful?

[ndelangen]

#151 Support for deeper hierarchies is going to be released with 3.2.0, No API changes.

#1356
#1387
#1401
#1427