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

, we learned about important concepts such as Component-Driven Development and Atomic Design. Let's apply these concepts in our use case.

We want to replicate what would happen in your daily job, so let's start from the beginning:

Our task is to implement a section containing a carousel with restaurants on the Home page.

The designer handed to us the full design of the page, which we can access on 

Let's try to break everything down into components.

---
title: Breaking down our use-case
slug: breaking-down-our-use-case
description: Breaking down a use case using CDD.
privateVideoUrl: https://fullstack.wistia.com/medias/7rao48cf0z
isPublicLesson: false
---

In the [Key Concepts lesson](./key-concepts/), we learned about important concepts such as Component-Driven Development and Atomic Design. Let's apply these concepts in our use case.

## The use case

We want to replicate what would happen in your daily job, so let's start from the beginning:

Our task is to implement a section containing a carousel with restaurants on the Home page.

The designer handed to us the full design of the page, which we can access on [Figma](https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=135%3A258):

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

Let's try to break everything down into components.

From the design, we see:

-   A **RestaurantsSection** that is composed of:

    -   **Typography**
    -   **Carousel**
-   A **Carousel** that is composed of:

    -   a list of **RestaurantCard**
    -   **RoundButton**
-   A **RestaurantCard** that is composed of:

    -   **Image**
    -   **Typography**
    -   **Review** that is composed of:

        -   **Typography**
    -   **Badge** that is composed of:

Yann Braga

In the previous module, we learned about component driven development and

which revolve around starting from the bottom and going all the way to the top

making sure that you have the most atomic pieces first and then you compose

bigger, more complex structures. We want to apply these concepts while

meal drop. So let's start with the use case. The project manager comes to you

we're not really happy with the homepage. The homepage does not provide all the

we want and the restaurants are not as discoverable as they can be. So the

with a proposal. The proposal is to add a new section to the homepage with a

restaurants in a counter cell so that they are more discoverable and accessible

So once you're assigned to this task, you need to make sure that you have all

necessary to build it. And the first thing is, if this is all the asset that

image of the design, this is not enough. You need to make sure that you have

design files so that you have access to typography, to colors, to spaces and

And this way, you're making sure that you have a proper collaboration with the

of taking assumptions right into the first place and having them request

up making something that they were not happy with. So let's open the designs

description of this lesson. And once we're in the design, we can start

break it down into sub components. If you want, you can pause the video for a

do yourself. Otherwise, let's do it together. Over here, we have a typography

used also at here and there. There is also a badge component, which shows the

as well as a review for the restaurant. There is an image and all of these

a restaurant card and these restaurant cards are grouped into a carousel, which

button that serves as a way to navigate. And we also can notice that this

also used in the categories detail page, although not in a carousel. As well as

page, we also see that the review component and the badge component are used.

very interesting because first of all, these components, they should be

part of some sort of component library so that we can access them in different

Overall, the component breakdown will look like this. The restaurant section

a carousel of restaurant cards is broken down into a restaurant card, which

all of these atomic components. And this is pretty interesting because we

all of the react components that we need to build. This is a very interesting

should always apply whenever you're working in building UIs. And the very

the design is that if we go back to Figma, the designs were already made

If you double click in this restaurant card, you will see on the right side the

component and different states of it. If you go deeper, for instance, into the

you will see it's also a component. The same goes for the review. And in fact,

the restaurant card, you can click on this button, which will go to the

And this is actually part of the component library overview. And over here, you

visual states of the restaurant card, which is great because it serves for us

of how our component must react. And if you, for instance, if you clone this

to the side, you will see on the right side, there's a different property for

but you can also select closed. It will change how it visually looks like. And

and loading. And what are these things, if not just react props, right? These

props that we can think of when building our component. And this is a great

happening on the design tooling side of things, because all of the design tools

the concept of components and variants, which actually makes the designers

developers. And that makes life easier for all of us, which is great. So given

this information and we've got our component breakdown, I think it's time to

them. So I'll see you in the next lesson.