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.
src/pages/HomePage/HomePage.tsx component and its usage in the app, let's break down all the functionality it needs to render properly:
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!
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!
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