The 9 Best Storybook Addons to Build Better Story Workflows

[00:00 - 01:52] Storybook add-ons can be installed to provide extra functionality to your Storybook. Once they're installed, they can be located in the toolbar at the top or in a dedicated add-on panel. In the official Storybook website, there is a section called add-ons. In this section you can explore all kinds of different add-ons coming from the community or official-wise storybook for all different kinds of situations such as accessibility testing or integration with design tools. By default, Storybook comes with add-on essentials which is a bundle of eight add-ons that will provide you all the tools necessary to get going. They are registered in the main.js file as you can see over here and we see that add-on essentials is registered in this list. The first one in the list is add- on actions. Add-on actions helps you visualize when components emit events. If your component has functions like unclick for instance like a button, whenever those event handlers are fired, they will be logged in the actions panel. So if I click on this button, you will see that there is a number which will keep growing as long as I keep on clicking. If we click on actions, we see a list of unclick events as I click them which contains the information from my event which might as well be the return value of your functions. And just like you can set annotations like RX on a story level, meta or globally, you can configure add- ons by setting an annotation called parameters. And in this template, Storybook already provided in the preview.js file a global configuration for actions called Arc-types-Rejects which essentially tells Storybook that any arcs whose name matches this reject suggest unclick, un-drag, un-hover should be automatically turned into an action. Next on the list we have viewport. An add-on that allows your stories to be displayed in different layouts and sizes to help you build responsive components. If we look at the toolbar, this is the option for view ports and it provides you a drop-down for small mobile, large mobile and tablet.

[01:53 - 08:38] This is more helpful when we look at pages and you can see how they behave in like small mobile, you can change the orientation and see how it looks on the tablet or whatever else. But you can also define your own options for viewports in case you have specific raypoints in your app as well as use a list of devices coming from Storybook. So let's just add a list of devices to improve our functionality over here. We import from Storybook add-on viewport and it's called initial viewports. And we can set this list by adding a global parameter for the viewport add-on with the key viewport and then you will define that the view ports list is initial viewports. So now when we select a drop-down again we should see a list of all kinds of different devices which might be pretty helpful for us. Next on the list is add-on-docs. And add-on-docs is used to do a couple of things. First of all it will provide you support for writing stories in the MDX format as we saw before which will allow you to document components with arbitrary text as well as HTML and React components in that documentation page. Additionally, docs also provides automatically generated documentation for your components. So for instance if we have this button over here, if we click on the docs tab, it will provide us an overview of all of these stories and it will link us to this specific story. But it will show you an overview of the component with some descriptions which are inherited from the implementation of the button itself as we can see here. So primary UI component is coming from the description here as well as a table of the properties from this component including the JS doc for each of them. You get an overview of the default value of the component. You can see the code. You can play around with the ARX table here which actually works similarly to the controls and the code will change accordingly. So this is great because your components automatically get a leaving documentation which means that as you make changes to your components documentation and implementation, Storybook will reflect automatically without you having to do anything. And all of this is only possible because of the construct of ARX and the metadata that we provide to Storybook. So if we look at the button.story's TSX, in case we remove the component from here, what actually happens is that Storybook will not have the metadata necessary to extract that information anymore and as you can see we have less information. So it's pretty important to always keep defining the component in the method. The next in the list is called controls. And that we already know, right? In the canvas if you open the add-on span on either by clicking here or clicking on A, we see all of the properties that we played around before. And similarly to docs, all of the information over these ARX come from the component property defined in the meta. And in case you want to have a similar documentation experience, you can actually define maybe in a global level a new configuration to add on controls. By default there is already a configuration called control mattress which defines for Storybook controls to automatically turn ARX into the type of color picker and date in case the prop names they match these rejects. And in fact if we go back to button.story's because the background color prop fits the rejects that we defined in the preview.js we can actually just entirely remove this and we'll work the same. And you can pass additional ARX to stories even if they're not props of that component. Sometimes you might want ARX to be handled inside of the template function before passing to the component. Because I want to show the controls match for the dates, let's say I add a property called birth date which is a new date because we are deciding that the date components following this rejects should be a date picker, the controls will become a date picker. And there's an option to extract the documentation from jstalk and provide them in the control spinner as well. We can provide a new flag called expanded and set it to true. And as you can see here we get more information about the component which could be pretty helpful for people using this component for the first time. The next in the list is atom backgrounds. Atom backgrounds provides you a way to define different backgrounds for your component so that you can see how it looks like for instance in a light background or a dark background. And these options come out of the box as an example but of course you can configure input your own over here. It also comes with a grid visualizer that allows you to quickly see whether the parts of your components are aligned properly together. We can configure stories to already select a background by default for instance if we go to the button dot stories and let's just say the primary story has a parameter which we can set on the story level of backgrounds. And we say that the default value is dark because the atoms persist the values you select as global career perms in the URL let's say you select light or you select the background dark or even if you clear the background as transparent in case you're making these changes and they're not getting affected it's because you have to remove them from the URL. So in this case we see that the story is rendering with the background of dark by default and if you switch to a different story it's just using the normal background. Next in the list we have toolbars. Toolbars is an add-on that controls global rendering options for your stories. It's a general purpose add-on that can be used to achieve things such as creating a theme switcher or a language switcher for your stories and we will have an entire lesson in this course that goes over that so let's skip this one for now. And then we have a combination of measure and outline. Both are visual tools that help you visualize alignments, spacings and dimensions of your components. So let's see how they look like. They're more interesting as you get into complex components such as this page. So let's see we have this ruler icon for the add- on measure which essentially enters the measure mode of which you can visualize the widths, the dimensions, the spacings, the margins of the components that you highlight. You can also press M to toggle the mode and the other one is odd line. So essentially it will outline every single element in your page and it will show you whether the elements are properly aligned or not. And those things are pretty neat for designers to check out. And these were all of the add-ons that compose the essentials package from Storybook. There's one extra thing that comes in the template that we see it's called add-on interactions and it's used in this page component because it's a state for component that needs interactions in order to change its visual state. If you open the add-on spanner you will see that there is a list of interactions which were defined in this play function for the logged-in story. But we have an entire lesson that goes through this into detail so we'll skip it for now. I'll see you in the next