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

Now that we have Storybook installed in our project, let's understand what's going on with the examples that it came with.

If you don't have Storybook running yet, make sure to run it with:

Storybook supports Component Story Format (CSF), an open standard based on ES6 modules which was introduced in Storybook 6.0 as the main way to write 

In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required default export and one or more named exports.

, the metadata that describes and configures a component. This is the place where you can set the title, which will be shown in the list of stories, or set extra configuration, which can be used by addons.

// Button.stories.tsx
import { ComponentMeta } from '@storybook/react'
import { Button } from './Button'

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as ComponentMeta<typeof Button>; // ComponentMeta automatically infers the props from Button

 in the sidebar. Storybook uses the property 

 to read metadata about the component, which is important internally and also for a few addons. The 

 type automatically infers the props from the 

 component and provides autocompletion for 

. This is going to be useful soon, we'll circle back to that.

The second piece that a story file needs is a 

. Storybook expects the functions that you export in a story file to represent a state of a component, and that's what we call a story. The story is function that renders the component and optionally has annotations, like 

// Button.stories.tsx
import { ComponentMeta, ComponentStory } from '@storybook/react'
import { Button } from './Button'

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as ComponentMeta<typeof Button>;

// Common template defined which receives args and passes down to component
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

// Primary variant, which clones the Template and sets specific args
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

// Secondary variant, which clones the Template and sets specific args
export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

// ... more stories

As a result, we can see that in Storybook, we have 

 on the sidebar, and it presents four stories, one for each named function in the file. This is a great way for developers and designers to understand the possible states of our component!

Let's add a new story to this file. Let's say we want a story to represent the Button with a red background. We create a new named export called 

 defined previously, and adds args for the props we want:

// Button.stories.tsx
export const Red = Template.bind({});
Red.args = {
  label: 'Button',
  backgroundColor: 'red',
};

We should now have a new story for that visual state in Storybook. Nice!

---
title: Intro to Storybook Component Story Format and args
slug: what-makes-up-a-story
description: Let's learn about the very basics of Storybook stories
privateVideoUrl: https://fullstack.wistia.com/medias/00hbeafotf
isPublicLesson: false
---

Now that we have Storybook installed in our project, let's understand what's going on with the examples that it came with.

If you don't have Storybook running yet, make sure to run it with:

```sh
yarn storybook
```

## Component Story Format (CSF)

Storybook supports Component Story Format (CSF), an open standard based on ES6 modules which was introduced in Storybook 6.0 as the main way to write **stories**.

In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required default export and one or more named exports.

### Default export

The [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) is what we call **Meta**, the metadata that describes and configures a component. This is the place where you can set the title, which will be shown in the list of stories, or set extra configuration, which can be used by addons.

Let's start by adding the following:

```tsx
// Button.stories.tsx
import { ComponentMeta } from '@storybook/react'
import { Button } from './Button'

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as ComponentMeta<typeof Button>; // ComponentMeta automatically infers the props from Button
```

This is telling Storybook to display `Example/Button` in the sidebar. Storybook uses the property `component` to read metadata about the component, which is important internally and also for a few addons. The `ComponentMeta` type automatically infers the props from the `Button` component and provides autocompletion for **args** and **argTypes**. This is going to be useful soon, we'll circle back to that.

### Named exports

The second piece that a story file needs is a [named export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export). Storybook expects the functions that you export in a story file to represent a state of a component, and that's what we call a story. The story is function that renders the component and optionally has annotations, like **args**:

```tsx
// Button.stories.tsx
import { ComponentMeta, ComponentStory } from '@storybook/react'
import { Button } from './Button'

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as ComponentMeta<typeof Button>;

// Common template defined which receives args and passes down to component
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

// Primary variant, which clones the Template and sets specific args
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

// Secondary variant, which clones the Template and sets specific args
export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

// ... more stories
```

As a result, we can see that in Storybook, we have **Example/Button** on the sidebar, and it presents four stories, one for each named function in the file. This is a great way for developers and designers to understand the possible states of our component!

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

Let's add a new story to this file. Let's say we want a story to represent the Button with a red background. We create a new named export called `Red`, which clones the `Template` defined previously, and adds args for the props we want:

```tsx
// Button.stories.tsx
export const Red = Template.bind({});
Red.args = {
  label: 'Button',
  backgroundColor: 'red',
};
```

We should now have a new story for that visual state in Storybook. Nice!

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.04/public/assets/red-story.png)

### What about args?

[Args](https://storybook.js.org/docs/react/writing-stories/args) is a concept in Storybook that represents data which can be passed around. This helps us create a master template that can be reused in every story, where each story clones that template and just sets different args. Let's look at the `Template` function again:

```tsx
// Common template defined which receives args and passes down to component
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
```

Storybook will make sure that the args we set for the `Red` story will be passed down to that render function. You could think of them as props. Storybook comes with an addon called **Controls**, which detects the args for a given story and provides a panel where you can tweak with them.

Yann Braga

So, we've seen our Storybook and its stories.

Well, it's first of all important to understand that Storybook follows a format

Story Format" which is an open standard based on ESX modules that is portable

That means that other tools can take advantage of the same format and you have

So if we look at this, let's say the button components, we have the button.

The CSF format consists of, first of all, a default export which we call the

And the default export is where you actually define the title of your component

We pass the component so that Storybook uses it internally to get a lot of

And then we can pass extra information which we'll get into detail later.

The second aspect of a CSF file is that it has to have named exports and those

exports are expected to be a story of which could be composed of a render

Remember, a story is nothing more than a combination of a component and some

And if you look at this, there's like template.bind but what exactly does this

Well, essentially, you could easily just define a render function directly in

But that also means that you're just repeating code over and over.

So the idea of the template is to essentially create a master template of which

this function which will render your component.

And then you can reuse it by cloning that function as well as adding some extra

So what exactly are these arcs things that we see here?

So Storybook has a construct called arcs which you could think of something

let's say, props but it's used extensively in many parts of Storybook.

So given that our render function receives arcs and passes them down to the

props, by setting primary.arks and putting these things, the primary story will

those props and the component will render accordingly.

So using that logic, let's create a new story and let's set a background caller

Let's say this would be background caller and let's set it as a red.

We call the story red, let's say, and once we save it, Storybook will add it to

We have a component which is rendering by receiving the label button and then

And like I mentioned before, the arcs are actually used by other tools inside

So if we actually open up the panel of add-ons, we could either click here or

We see that there's an add-on called controls and add-on controls detects the

a given story and provides this panel where you can tweak with them.

So over here we see, okay, initial value of background caller is red.

However, I can actually play around and set it to something else.

And that's pretty useful for especially designers to check whether component is

So we could basically play around and the component will re-render with those

And as you can see in this panel, we have different kinds of controls per prop.

So primary is a boolean, a size is actually a radio group and the background

Well, that comes with another concept called art types.

So each of these arcs, they have types such as a string or a boolean or etc.

And the control add-ons uses these types to provide you the correct elements in

These types are called art types and they are automatically processed by Story

using the component which we declared in the meta, which is why we should

And from that, it was able to infer all of these things.

However, a background caller, given that we are just setting it this as a

really be turned into a caller picker unless we set something more complex.

So if you see in the meta, this was already set in the template.

So we're defining the art types for the components of which if you have a prop

And it's interesting that art types by being set on the level of meta, which is

the component level, they will be applied automatically in each and every story

However, you can also manually set art types to a very specific story, such as