This video is available to students only

Adding the HomePage to Storybook

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

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 for theming, so the styled-components support is necessary. Given we already added a global decorator for this in the theme support lesson, there's no need to do anything more as it is already applied to all stories!

  1. State management (Redux)

The shopping cart button in the PageTemplate used inside of the HomePage communicates to a Redux 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!

  1. 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:


This page is a preview of Storybook for React Apps

Start a new discussion. All notification go to the author.