Course Introduction

Introduction

Let's understand what this tool is all about.

What is Storybook? Better React UI Component Development

Storybook and Component Driven, Atomic Design in React

Let's learn about the installation process of Storybook.

How to Install Storybook and Add Stories to React Components

Let's learn about the very basics of Storybook stories

Intro to Storybook Component Story Format and args

Let's understand what Storybook decorators are and how to create them.

How to use Storybook Decorators to Style Components

Let's dive into the addons that come with the default Storybook template.

The 9 Best Storybook Addons to Build Better Story Workflows

Let's customize Storybook theme to match our brand!

How to Customize the Storybook React Theme for Your Brand

We have finished the first module! Let's discuss what we learned.

Wrapping up

Storybook - How it works

Now that you've learned the basics, it's time to start working on MealDrop, the main project of this course.

Section overview

We will be looking at the template project that we will use in this course.

Accessing the project

Breaking down our use-case

How to Write an Atomic Component in Storybook

Adding styled components support in Storybook.

How to Add Styled Component Themes to Storybook

Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.

Set Storybook Themes With Decorator Global Values and Parameters

How to Connect Storybook to Figma

How to Compose Components in Storybook

Finalizing the feature and integrating it into the app.

How to Integrate Storybook Components Into a React App

We have finished the second module! Let's discuss what we learned.

Starting the main project

It is time to learn how to deal with components that do fetch requests.

Using a container pattern to deal with complex components.

Fetch Data for Storybook Components With Container Pattern

Using conditional logic to deal with fetch requests.

Add Conditional Logic to Storybook Compontent Data Fetching

How to Mock Storybook Data Fetching Requests With MSW

Conclusion on data fetching strategies in Storybook.

Dealing with fetch requests

Let's learn how to work with page components on Storybook.

Let's add the page templates to Storybook.

Adding PageTemplate and Redux support to Storybook

Let's analyze the HomePage component and add it to Storybook.

How to add Complex Components to Storybook

Let's analyze the restaurant detail page component and add it to Storybook, including deeplinking and React portals support.

How to Add Deeplinking and React Portals to Storybook

How to Mock Storybook App Loading Scenarios With MSW

Adding Pages to Storybook

It is time to learn testing strategies in Storybook.

Let's add the official Storybook ESLint plugin

How to Install the Storybook ESLint plugin

Let's write some interaction tests directly in Storybook!

How to Use React Testing Library and Interactions in Storybook

Let's use the Storybook test runner to automate our tests!

How to Automate Storybook Testing With Test Runner

How to Run Accessibility Testing in Storybook With Addon-a11y

We have finished the fifth module! Let's discuss what we learned.

Storybook and testing

Using Chromatic for automatic Storybook deployment.

Deploy Storybook on Chromatic for Integrated Development

Using Chromatic and Storybook for visual regression testing.

Visual Regression Testing with Storybook and Chromatic

We have finished the sixth module! Let's discuss what we learned.

Deploying our Storybook

Conclusion and extra resources

Final thoughts

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using [Component Driven Development](https://www.componentdriven.org/)

![Showing a component breakdown process](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.03/public/assets/component-breakdown.png)

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

![Figma connected to Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/figspec-view.png)

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

![Full page in Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.04/public/assets/modal-working.gif)

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

![Storybook test runner](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/click-to-debug.gif)

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

![Chromatic dashboard](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/first-build.gif)

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work.
You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

Storybook for React Apps

Unleash the full potential of Storybook, adding features and pages

Tools to improve designer-developer collaboration

, you can install Storybook addons to provide extra functionality to your Storybook. Once installed, they can be located in the toolbar at the top or in a dedicated addon panel:

If you don't see the addon panel when running Storybook, you can type 

, the shortcut to show/hide the addons panel or click on the shortcuts button at the top left and select 

 official page, you can explore a vast amount of addons (both official and from the community) for all different scenarios – accessibility testing, design tool integrations, etc.

When you install Storybook via the CLI command (like we did in this module), it already comes with 

 installed, which is a bundle of official addons maintained by Storybook maintainers. Let's quickly go over them.

 is an addon that helps visualize when components emit events. If your component has functions like 

, etc., whenever those event handlers are fired, they will be logged in the addon actions panel, along with the data they emit.

, which just like args, argTypes and decorators, are annotations that can be applied globally (in preview), at the component level (meta) or for a single story.

In our project, Storybook globally preconfigured addon actions by passing the following parameter to 

// .storybook/preview.js
export const parameters = {
  // transform any arg whose name matches this regex into an action
  // Examples: onClick, onHover, onAccountSelect etc.
  actions: { argTypesRegex: "^on[A-Z].*" }
}

 works because addons have access to a story's args, which we set in the meta in our stories files. If you forget to set it, this configuration will not work!

You can also learn more about configuring the addon 

 is an addon that allows your stories to be displayed in different layouts and sizes to help you build responsive components. It comes with basic options like small, medium, and large devices, but you can extend it to contain a list of devices like iPhone X, Pixel, etc., or even create your own options with breakpoints from your project.

You can configure the addon by defining the 

 parameter, by either passing your own breakpoints for your app, or you can optionally use a predefined list of device breakpoints which are available from the library. Let's add this list in the 

// .storybook/preview.js
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'

export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS
  }
}

// ... rest of code removed for brevity

You should be able to see a list of devices now:

---
title: The 9 Best Storybook Addons to Build Better Story Workflows
slug: essential-addons
description: Let's dive into the addons that come with the default Storybook template.
privateVideoUrl: https://fullstack.wistia.com/medias/79uk93p8pg
isPublicLesson: false
---

## Storybook Addons

As mentioned in [previous lessons](./what-is-storybook#storybook-addons), you can install Storybook addons to provide extra functionality to your Storybook. Once installed, they can be located in the toolbar at the top or in a dedicated addon panel:

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.06/public/assets/addon-locations.png)

If you don't see the addon panel when running Storybook, you can type `A`, the shortcut to show/hide the addons panel or click on the shortcuts button at the top left and select **Show addons**:

<img width="300" src="https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.06/public/assets/storybook-settings-tooltip.png" />

<br />

In the [Storybook addons](https://storybook.js.org/addons/) official page, you can explore a vast amount of addons (both official and from the community) for all different scenarios – accessibility testing, design tool integrations, etc.

When you install Storybook via the CLI command (like we did in this module), it already comes with [addon-essentials](https://storybook.js.org/docs/react/essentials/introduction) installed, which is a bundle of official addons maintained by Storybook maintainers. Let's quickly go over them.

### Addons - Actions

[![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.06/public/assets/addon-actions.png)](https://storybook.js.org/docs/react/essentials/actions)
**[Actions](https://storybook.js.org/docs/react/essentials/actions)** is an addon that helps visualize when components emit events. If your component has functions like `onClick`, `onDrag`, `onSubmit`, etc., whenever those event handlers are fired, they will be logged in the addon actions panel, along with the data they emit.

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.06/public/assets/addon-actions.gif)

Addons can be configured by using **parameters**, which just like args, argTypes and decorators, are annotations that can be applied globally (in preview), at the component level (meta) or for a single story.

In our project, Storybook globally preconfigured addon actions by passing the following parameter to `preview.js`:

```tsx
// .storybook/preview.js
export const parameters = {
  // transform any arg whose name matches this regex into an action
  // Examples: onClick, onHover, onAccountSelect etc.
  actions: { argTypesRegex: "^on[A-Z].*" }
}
```

The automatic transformation of _args_ into _actions_ works because addons have access to a story's args, which we set in the meta in our stories files. If you forget to set it, this configuration will not work!

You can also learn more about configuring the addon [here](https://storybook.js.org/docs/react/essentials/actions).

### Addons - Viewport

[![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.06/public/assets/addon-viewport.png)](https://storybook.js.org/docs/react/essentials/viewport)

**[Viewport](https://storybook.js.org/docs/react/essentials/viewport)** is an addon that allows your stories to be displayed in different layouts and sizes to help you build responsive components. It comes with basic options like small, medium, and large devices, but you can extend it to contain a list of devices like iPhone X, Pixel, etc., or even create your own options with breakpoints from your project.

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.06/public/assets/addon-viewport.gif)

You can configure the addon by defining the `viewport` parameter, by either passing your own breakpoints for your app, or you can optionally use a predefined list of device breakpoints which are available from the library. Let's add this list in the `preview.js` file:  

```tsx
// .storybook/preview.js
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'

export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS
  }
}

// ... rest of code removed for brevity
```

You should be able to see a list of devices now:

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.06/public/assets/viewport-list.png)

You can also learn more about configuring the addon [here](https://storybook.js.org/docs/react/essentials/viewport#configuration).

### Addons - Docs

[![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.06/public/assets/addon-docs.png)](https://storybook.js.org/docs/react/writing-docs/introduction)

**[Docs](https://storybook.js.org/docs/react/writing-docs/introduction)** is an addon that provides support for authoring stories in MDX format, and also turns your components into living documentation. Out of the box, it will scan your components and automatically detect their metadata, providing you with a new tab called `Docs`. In this tab, you can see the primary story of your component, its source code, a table of its properties and their types, and even a way to change them at runtime and see your component responding to the changes, plus all its variations. This is also thanks to **args**. Docs takes advantage of the property `component` from a story's meta, and if you don't provide it, Storybook won't be able to fully scan your component for information.

Yann Braga

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

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

bundle of eight add-ons that will provide you all the tools necessary to get

They are registered in the main.js file as you can see over here and we see

add-on essentials is registered in this list. The first one in the list is add-

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

click on this button, you will see that there is a number which will keep

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

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-

by setting an annotation called parameters. And in this template, Storybook

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

and it provides you a drop-down for small mobile, large mobile and tablet.

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

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

initial viewports. And we can set this list by adding a global parameter for

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

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

your components. So for instance if we have this button over here, if we click

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

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

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.

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

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

to stories even if they're not props of that component. Sometimes you might

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