What is a storybook?

‍

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, separate from your application, preventing developers from being distracted by incomplete APIs, unstable data, and other external dependencies.

‍

It provides a mechanism for creating components, documenting their accessories, and providing interactive sample renderings in a web-based user interface. Storybook is framework agnostic: It integrates with frameworks like React, Vue, Svelte, Angular, and others.

‍

One of the requirements to work with Storybook is to know HTML, CSS, and JavaScript, and it is advisable to have bases in one of the most popular web frameworks: React, Angular, or Vue.

‍

How does the storybook work?

‍

It allows the creation of components in Angular, React, Vue, and other remarkable frameworks on the market.

‍

All components generated are reusable within our application, which makes development more straightforward and more practical precisely because it already fits the project's visual identity, for example.

‍

So we don't worry about the business logic of how to get the data; we can also extend its functionalities to improve your workflow by creating documentation inside the component.

‍

Although it can be used with a basic configuration and dedicated only to creating a gallery of components of our application, Storybook has a lot of functions.

‍

Stories: They are files in which we indicate how a component or a set of components works so that each story we indicate in the file can implement a component or set. It is common for our components to have input parameters that modify their behavior and the information or aspect that they show. The exposed use cases help us a lot to refresh our memory and help other teams to understand how a component works.

‍

Docs: These files allow us to create documentation pages to use stories and include guides or explanations about any aspect of our application. In short, any information we want to explain in detail could be done with the docs. These are especially useful if we want to create a website for our design system.

‍

Testing: testing of our components or integrations. This is especially useful for involving other teams to ensure the quality of the application that we are building. Apart from coming with a test runner that can execute our unit tests, Storybook allows us to do accessibility validations and snapshot checks that help verify if the source code of our components has changed (In this case, we must update them in Storybook, so Otherwise, it notifies us indicating the errors that have occurred), interaction tests simulating the behavior of a user as well as other functionalities that will make our application very robust, reducing the possibility of errors.

‍

So, in short, Storybook allows us to pre-visualize and generate testing components that allow us to check the development without much hassle, have the components in isolation, and develop them based on the SRP that will help us keep the code in better working conditions and making refactorizations and other modifications to the code ease.

‍

Noteworthy Examples

‍

We can use Storybook to render elements on our components. For example, we can use the following script to import a Task element and present it with some example test data (The task properties are id, title, and state).

‍

For example:

https://storybook.js.org/tutorials/ui-testing-handbook/react/en/visual-testing/

‍

‍

We can even present different scenarios with different data so we can render different components in different ways:

‍

‍

This allows us to create different component scenarios and achieve different states for the same component, rendering different information and variations on the UI.

Use Storybook on React

‍

To use Storybook, you can create your custom configuration following the official guides, or you can use a pre-existing boilerplate template that will allow you to ease up the development process and speed things up.

‍

Here’s a useful boilerplate you can use:

https://github.com/React-Avancado/boilerplate-tailwind?ref=reactjsexample.com

‍

It contains a very useful template for developing NextJS applications and building the proper stories and examples to run Storybook-at.

‍

As we can see from the repository, we have several different things to keep in mind:

‍

On package.json we have a particular command that’s worth noticing:

‍

"storybook": "start-storybook -p 6006"

‍

This command starts Storybook by running npm run storybook or yarn storybook and specifies the port it should run.

‍

We also have the folder that contains the configurations we’re interested in: .storybook

‍

These particular elements are main.js and preview.js. 

‍

These two files specify which storybook files we should run and further additional configurations that can be useful for setting up more details.

‍

Conclusion

‍

Considering the need to develop reusable, maintainable, easily-rewritable components on different frameworks like ReactJS, Angular, and Vue, this particular approach comes in very handy as the difficulties when testing, reviewing, or developing components that are not directly related or need complex data states and initializations can set back project delivery times several weeks in total.

‍

This approach also allows for customization and modifications that simply would be too cumbersome or difficult to achieve and shorter development time as the refresh feature for Storybook allows for ease of use and development when creating, adding, or modifying components code.

‍