Write Beautiful Stories

January 10, 2020

image

Storybook πŸ“’

No matter how big or small the application is, everyone should have their own storybook. Storybook helps in building and maintaining the UI components seamlessly.

Are you using React ? Vue ? Angular ? It supports all of them.

Storybook acts as a tool where you can build your components in isolation, do your unit/visual testing of components and also showcase your components to the outside world. When you build a reusable component that can be used by others, please integrate them with the storybook. By doing this you can help your teammates to get an idea that such a reusable component exists and how it works.

Addons brings more power ⚑️

There are addons that you can add to your storybook to get some extra features.

For example, Knobs allow you to play with your component by passing the props dynamically. This gives a live experience of how your components behave for various kinds of input.

Docs creates a documentation page by pulling information from your stories, components, source code, and story metadata. It doesn’t require any configuration, it builds the docs page automatically. Similarly, there are various addons that improve the developer experience.

You can find some of the storybook examples here: https://storybook.js.org/docs/examples

This website is made of many reusable components. I'll share them on the storybook shortly. 😎