What is Storybook
Storybook is a great tool used to build UI components in isolation. To learn more about Storybook, please visit Storybook docs.
TL;DR
We love to refer to Storybook as the closest representation of our production components. It is an interactive directory of your UI components and their variants.
What is a story
A story is an additional file we add to a component, that defines the different render states it can have. (it’s a function that returns a component’s state given a set of arguments).
*Note: The Story file lives alongside the component file and doesn't affect your component itself.
Example
- We can have in our library components for Avatar, Badge, Button, Card.
- Each component will have a story, that represent it
What are controls (Args)
For each component, we can add a set of arguments that define how the component should render.
Note
You do not need to modify your underlying component code to use args.
Example
A Button component can have different controls:
- Variant: Primary, secondary, tertiary
- Size: sm, md
- Squared: True/False
- Border: True/False
These conrols will define all the possible combinations of the Button component, which in this case would be 24 (322*2). (Primary-sm-squared-withBorder, Primary-md-squared-withBorder..)
What is a Storybook?
The collection of all of your components' stories - is your Storybook.
This asset was taken from Storybook docs. Visit the Storybook website for more information