I will show you what Storybook is all about and hopefully help you decide if you need it in your next project. Don't worry if you have limited experience as an engineer because you don't need to have an advanced technical background to make use of Storybook.
What is Storybook?
Storybook is a tool for developing UIs that allows you to work on one component at a time.
What is a component?
A component is smallest part of a UI. In chemistry, we refer to it as an atom(Smallest unit of a matter). Most frameworks are now components based.
Storybook allows you to actually develop the entire UIs without starting the major application.
But in order to cleary state why one would choose to use it, lets look at some benefits and challenges of Storybook.
- Being able to build components in isolation,and not having to think about integrations or other systems running in your stack is a blessing
- A clearer vision of your components styling and layout
- Navigating between UI component as you get to see all component as a sidebar item
- Communicating with other devs. It really allows you to show how your new component is supposed to be used and which features it boasts.
- You can manipulate props value
- Its is not framework agnostic i.e you can use for Vue, React, Angular, etc.
- Great for documenting
- If you’re integrating it into an existing project, there is some migration work to be done.
- You rely on addons and decorators for handling data.
- It can take up a lot of time to maintain and properly set up.
- It takes team commitment to keep it updated and ensure everything still works.
What are add-ons actually?
Add-ons are plugins that can be added to make certain feature work. For example, by default
scss doesn't work on Storybook, so you will have to install an add-on to make it work as expected.
When to use Storybook
starter.dev is built using a variety of technologies to demonstrate architectural patterns and best practices using these tools. This project uses these technologies like Vue, React, Nextjs, Angular, etc to show various ways Github can be implemented!.
Every conponent has a control tab that allows us to manipulte the props if there be any.
Here, looking at the image with the props, you will notice some properties:
- cardType: This is a dropdown/select option with two opions issue and pullrequest.
- state: this defines the state of the card
- author: the person who created it or a name, or whatever, you get the point.
Lets change some of the props and see the result
- cardType will be pullrequest
- state will be closed
Here, we can see there has been a change. This is so helpful, and tells the team members what the component can and can't do.
Looking at other interesting features like
Here, we can toggle for feature like side nav, the controls (which, in the dropdown option, is call addons)
There are few options that help us test for responsivess. Below, you will find an image showing those options:
Here we can select any option to see the responsiveness of that component.
Hover state of the card
Here, we can see certain properties like padding, and current width and height
Looking to get started
To get started, all you need is to visit this sites based on your prefered technology
- Storybook with Vue
- Storybook with React
- Storybook with Angular
- Storybook with Web Components
- Storybook with Web Svelte
- Storybook with Web Preact
- Storybook with Web Ember
It's up to you to decide if Storybook helps you achieve your goals faster, or if you think it's useful for your project setup. It's important to look at what it could offer and what it can't. You can decide to use it for just plain documentation or for components, or both.