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

 in the previous module. How cool would it be if we also added that page to Storybook as well? Let's do that!

Given that pages might include a variety of components which require many different functionalities (e.g. routing, state management, theming, etc), it's possible that we end up spending quite some effort to properly add a full page to Storybook. Given that in this course, we went from simpler to more complex components, we already made Storybook pretty smart when we got to this lesson, so we won't have too much trouble. That's why I think it's better to leave adding the pages last in your Storybook.

 component and its usage in the app, let's break down all the functionality it needs to render properly:

 for theming, so the styled-components support is necessary. Given we already added a global decorator for this in the 

, there's no need to do anything more as it is already applied to all stories!

 store in order to keep things in sync between the food items that are added to the shopping cart from the restaurant pages and will break if there's no Redux store available. We already added support in the previous lesson, so there's no need to do anything here!

 fetches data, and we already know how to mock these requests using MSW. We will be using the same mocks in this lesson.

Now that we know our path forward, run Storybook and create a stories file at 

 with the boilerplate that you're used to, with only one minor difference: Given that the 

 component does not have any props, we don't pass args down to the component in the 

 function. Also, let's link the Figma design as well: 

https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=135%3A258

---
title: How to add Complex Components to Storybook
slug: adding-the-homepage
description: Let's analyze the HomePage component and add it to Storybook.
privateVideoUrl: https://fullstack.wistia.com/medias/d2gt5fj04m
isPublicLesson: false
---

We just worked on the `RestaurantsSection` component and integrated it to the `HomePage` in the previous module. How cool would it be if we also added that page to Storybook as well? Let's do that!

## Analyzing the component

Given that pages might include a variety of components which require many different functionalities (e.g. routing, state management, theming, etc), it's possible that we end up spending quite some effort to properly add a full page to Storybook. Given that in this course, we went from simpler to more complex components, we already made Storybook pretty smart when we got to this lesson, so we won't have too much trouble. That's why I think it's better to leave adding the pages last in your Storybook.

Regarding the `src/pages/HomePage/HomePage.tsx` component and its usage in the app, let's break down all the functionality it needs to render properly:

1.  **Styled components**

The `HomePage` contains lots of components that use [styled-components](https://styled-components.com/) for theming, so the styled-components support is necessary. Given we already added a global decorator for this in the [theme support lesson](./decorators-theme-support), there's no need to do anything more as it is already applied to all stories!

2.  **State management (Redux)** 

The shopping cart button in the `PageTemplate` used inside of the `HomePage` communicates to a [Redux](https://redux.js.org/) store in order to keep things in sync between the food items that are added to the shopping cart from the restaurant pages and will break if there's no Redux store available. We already added support in the previous lesson, so there's no need to do anything here!

3.  **Data fetching**

The `RestaurantsSection` component used in the `HomePage` fetches data, and we already know how to mock these requests using MSW. We will be using the same mocks in this lesson.

### Creating the stories file

Now that we know our path forward, run Storybook and create a stories file at `src/pages/HomePage/HomePage.stories.tsx` with the boilerplate that you're used to, with only one minor difference: Given that the `HomePage` component does not have any props, we don't pass args down to the component in the _Template_ function. Also, let's link the Figma design as well: <https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=135%3A258>

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

Yann Braga

Throughout this course, we worked on adding a restaurant section feature and on

we added the most atomic components such as the badge and the review, we went

restaurant card and then all the way to the restaurant section. So wouldn't it

we finished the cycle by adding the entire home page to storebook? Let's do

to our code, the home page is under source, pages and home page. Given that

variety of components which require many different functionalities like routing

theming and whatnot, it's possible that we end up spending quite some effort to

full page to storebook. But given that in this course, we went from simpler to

components and we already pretty much added support for a lot of things on the

already made storebook pretty smart when we got into this lesson so we won't

So analyzing the home page, we see that it uses a page template which we just

in the previous lesson and the page template is connected to Redux. Also, the

lot of components using styled components but we also added support for that in

And finally, we have a restaurant section which does some data fetching. So we

to mark that request as well. So to start, we go to our home page folder and we

called home page dot stories dot t is x. I'm going to paste that templates and

difference is that the template doesn't contain arcs being passed to the

the home page doesn't have any arcs. As you can see, there's no props. And also

couple of things because we already know first of all that this is a page

as well add a layout of full screen. And lastly, in the designs, I'm just going

and add it to storebook because why not? So we have the design with type. In

to use Figma, you could also use fix back if you want, and the URL of which I

if we open storebook, we should see that under pages homepage, not only we have

which are used under homepage, but also the default now, which will render the

And as you can see here, this is working fine and great. The only thing is that

section is still fetching data. So let's add the marks for this as well. Over

parameter for a sw and it's going to have a handler's property, which is an

to receive pretty much the same things we did for the previous lessons. So that

coming from mock service worker. And then we're going to mock the get. And then

URL, which comes from the API. And now we're going to have a callback with

a context. And this callback is going to return a response with a context.json.

we need the restaurant's stub data. So we get the stub data from stub

this restaurants. And then we're essentially passing that data over here. And

going to apply the handlers for any story that we have. In this case, the

one story. But basically, once we're back to storybook, now things should be

loaded correctly. So this is pretty much it. We had a very straightforward

homepage to storybook, because you know, we slowly prepared for this since the

now we have a fully fledged page with the design on the side. We also have a

theming. And we can check the whole thing. And you know, it's pretty impressive

badge component, we have a restaurant card, we have the review component, all

connecting to the restaurant card. And then we have the restaurant section,

homepage. And we also have the page template used in the homepage. So how cool

basically the entire flow from a very basic component all the way to the

have an incredible overview of the components, as well as even the page, and we

without even running the application. As a plus, the designers can also refer

decisions or for just sharing what they're looking for. And the homepage only

the next lessons we're going to go through a different page, which has a lot of

variants. So I'll see you in the next one.