DEV Community

Cover image for How I manage to make my Storybook project the most efficient possible

How I manage to make my Storybook project the most efficient possible

Loïc Goyet on October 22, 2019

We are living the "component-based" era, where any user interface is split into small reusable pieces that we assemble into pages. Whenever it's in...
Collapse
 
georgecoldham profile image
George

I’m currently working with a system with 30-50 (never counted) components and then more composite components (think confirmation dialogs containing buttons, dialogs, checkboxes).

We have a components repository, each component has a directory with tests the component and a story.

It means we can keep logical separation of our stories and scope the file we are looking at.

You should try it, I can’t imagine how hard it becomes to search for components etc. When you have so many in one file.

Good read though!

Collapse
 
loicgoyet profile image
Loïc Goyet

Actually I don't think we need it even if we have more components that you have.

As our design system is really used to one project, I feel like it could be a bit overkill to me.

But if our components are shared to several projects we will certainly do something in this taste

Collapse
 
georgecoldham profile image
George

Fair enough, I like working with small focused files. If it’s not for you or your project 🤷‍♀️.

TBF I am working on a huge multi service project.

Collapse
 
loicgoyet profile image
Loïc Goyet

thanks !

Collapse
 
b3kay profile image
B3kay

Good read!
What's your thoughts on the atomic design approach with atoms => molecules => organisms => templates => pages?

We're using Storybook in a Lerna mono repo with the business logic in a separate package. We're about to restructure our Storybook as it's starting to get a little bit cluttered and we don't have a clear structure.

atomicdesign.bradfrost.com/chapter...

Collapse
 
marcandrewb profile image
Marc Bernstein

I would like to see some example of container stories

Collapse
 
ryzhov profile image
Aleksandr N. Ryzhov

Wow!

Collapse
 
tncho profile image
Martín Maturano

Very useful article indeed ! 🙌

Collapse
 
deansacramone profile image
Deano Macaroni

Hey, how are you "exporting" out your components to be used by your project? OR are you sitting this storybook IN your repo? What if you have another project that needs your Button component?

Collapse
 
wenukagtx profile image
Suresh Wenuka Godakanda • Edited

@loicgoyet & all. I have a already created project with separated components (Button, Input, Card). How can I manage variations of those components with Storybooks.

Collapse
 
loicgoyet profile image
Loïc Goyet

Hello Suresh, if you want to start out with Storybook you should learnstorybook.com. The website is maintained by the Storybook core team and provides all the resources to discover the library the concept of a design system.