3 min to read
Storybook
Helloooo how are you? Today I bring you a little jewel, yeeeeee! It is Storybook !!!!
What is it
As always the idea is to summarize, so here goes! Storybook is another tool for frontend/UI development. It helps us to develop with more speed our components. Basically it allows us to develop and keep our visual components isolated! Cool, isn’t it?
Installation and Configuration
The cool thing about Storybook is its compatibility with Angular, React, Vue… so no excuses, go for it!
As always, I’m going to focus on the installation and configuration for our beloved Angular! :)
To install we go with
npx -p @storybook/cli sb init --type angular
This installation will create a .storybook folder in our root directory, with some stories and small base components so we can see how everything works. It will also generate some commands in our package.json to make use of the tool.
Watch out for the louse! With the latest version to date of Storybook (6), we may have compatibility problems with the core-js package, one of the workarounds is to upgrade the core-js version to 3.
Other alternatives here
Compilation and use
Once everything is installed, we send the magic with
npm run storybook
We will get something like this in chrome http://localhost:6006/ with all the base.
Now that we have everything ready, the only thing we have to do, is to create the stories for our components!
The stories are nothing more than files named as ourcomponent.stories.ts, where we are going to export on the one hand, the configuration and dependencies that we need to instantiate our component, and on the other hand, the constants that we want to make use of our component in different situations, parameters and contexts.
This will be easier to see with an example, here is a simple template for our first story:
import { moduleMetadata } from '@storybook/angular';
import { MyComponent } from './my-component.component';
export default {
title: 'MyComponent',
decorators: [moduleMetadata({
imports: [],
declarations: [MyComponent],
entryComponents: [MyComponent]
})]
};
export const Holis = () => ({
template: `
<my-component></my-component>
`});
We save, and Storybook will automatically refresh our browser to reflect the changes.
Later we can grow the story of our component, adding new constants to see how our component behaves to certain parameters and events.
Advantages
One of the reasons why storybook is chosen is because it not only helps us to create our app with greater speed, but also allows us to give us a quick visualization of the components we have in a repo, let alone if we work in a monorepo, where the app grows and grows and we do not even know that there is! So it helps us to avoid duplication of code and / or components, even when we create new ones it gives us some information so we can develop thinking in scale.
Another very cool advantage is that it helps us to prevent bugs. When something breaks, we can quickly know if the component is the one who needs the fix or if there are problems in the implementation of the component/context.
We can also highlight as an advantage that between developers and designers we can improve coordination and communication by having this tool, generating a unified design system right here.
Clearly there are many other advantages, in the official link that I left above you can see them, and if you dare the truth is that you invest little time to give it a try and you will see that it’s great!
Conclusion
In summary, Storybook not only allows us to manage our visual components, but also screens, data, testing, complex features, always in the contexts that we decide to define them.
BONUSSSSSSS! Yes, having Storybook we can go further and implement Chromatic, BackStopJS and other tools of choice for testing and visual regression.
Seeing all these advantages I invite you to give it a try.
Happy cooooooding!
