Course Introduction

Introduction

What is Storybook? Better React UI Component Development

Storybook and Component Driven, Atomic Design in React

How to Install Storybook and Add Stories to React Components

Intro to Storybook Component Story Format and args

How to use Storybook Decorators to Style Components

The 9 Best Storybook Addons to Build Better Story Workflows

How to Customize the Storybook React Theme for Your Brand

Wrapping up

Storybook - How it works

Section overview

Accessing the project

Breaking down our use-case

How to Write an Atomic Component in Storybook

How to Add Styled Component Themes to Storybook

Set Storybook Themes With Decorator Global Values and Parameters

How to Connect Storybook to Figma

How to Compose Components in Storybook

How to Integrate Storybook Components Into a React App

Starting the main project

Fetch Data for Storybook Components With Container Pattern

Add Conditional Logic to Storybook Compontent Data Fetching

How to Mock Storybook Data Fetching Requests With MSW

Dealing with fetch requests

Adding PageTemplate and Redux support to Storybook

How to add Complex Components to Storybook

How to Add Deeplinking and React Portals to Storybook

How to Mock Storybook App Loading Scenarios With MSW

Adding Pages to Storybook

How to Install the Storybook ESLint plugin

How to Use React Testing Library and Interactions in Storybook

How to Automate Storybook Testing With Test Runner

How to Run Accessibility Testing in Storybook With Addon-a11y

Storybook and testing

Deploy Storybook on Chromatic for Integrated Development

Visual Regression Testing with Storybook and Chromatic

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'

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

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Storybook for React Apps

Module 1: Introduction

Introduction:

Start Here

Introduction:

Course Introduction

Module 2: Storybook - How it works

Lesson 1: (5:26)

What is Storybook? Better React UI Component Development

Lesson 2: (2:22)

Storybook and Component Driven, Atomic Design in React

Lesson 3: (5:55)

How to Install Storybook and Add Stories to React Components

Lesson 4: (11:42)

Intro to Storybook Component Story Format and args

Lesson 5: (6:29)

How to use Storybook Decorators to Style Components

Lesson 6: (8:39)

The 9 Best Storybook Addons to Build Better Story Workflows

Lesson 7: (4:38)

How to Customize the Storybook React Theme for Your Brand

Lesson 8:

Wrapping up

Module 3: Starting the main project

Introduction:

Section overview

Lesson 1: (5:08)

Accessing the project

Lesson 2: (4:32)

Breaking down our use-case

Lesson 3: (9:57)

How to Write an Atomic Component in Storybook

Lesson 4: (10:41)

How to Add Styled Component Themes to Storybook

Lesson 5: (6:00)

Set Storybook Themes With Decorator Global Values and Parameters

Lesson 6: (8:32)

How to Connect Storybook to Figma

Lesson 7: (7:11)

How to Compose Components in Storybook

Lesson 8: (7:54)

How to Integrate Storybook Components Into a React App

Lesson 9:

Wrapping up

Module 4: Dealing with fetch requests

Introduction:

Section overview

Lesson 1: (5:31)

Fetch Data for Storybook Components With Container Pattern

Lesson 2: (5:30)

Add Conditional Logic to Storybook Compontent Data Fetching

Lesson 3: (7:45)

How to Mock Storybook Data Fetching Requests With MSW

Lesson 4:

Wrapping up

Module 5: Adding Pages to Storybook

Introduction:

Section overview

Lesson 1: (9:52)

Adding PageTemplate and Redux support to Storybook

Lesson 2: (4:12)

How to add Complex Components to Storybook

Lesson 3: (9:51)

How to Add Deeplinking and React Portals to Storybook

Lesson 4: (3:00)

How to Mock Storybook App Loading Scenarios With MSW

Lesson 5:

Wrapping up

Module 6: Storybook and testing

Introduction:

Introduction

Lesson 1: (2:04)

How to Install the Storybook ESLint plugin

Lesson 2: (11:10)