How to Add Deeplinking and React Portals to Storybook

In this lesson, we will be adding the RestaurantDetailPage to Storybook. It is a quite interesting page as it is interactive (you can add select items to be added to the cart), it fetches data, and presents multiple states whether the page was successfully loaded or something failed:

Analyzing the component#

Like it was mentioned in previous lessons, it's important to understand what the page needs in order to render correctly. Let's first run the app and interact with it to understand more about the RestaurantDetailPage.

xxxxxxxxxx

yarn start

From the Home page, select a restaurant to get to the Restaurant detail page:

For reference, let's open the src/pages/RestaurantDetailPage/RestaurantDetailPage.tsx file as well. This is a relatively complex page that does a bunch of things! Let's break it down:

1. Styled components

The RestaurantDetailPage contains lots of components that use styled-components for theming, so the styled-components decorator is necessary. Given we already added a global decorator for this in a previous lesson, there's no need to do anything as it will be applied for all stories!

2. State management (Redux)

In order to keep things in sync between the food items, shopping cart and the rest of the application, this page uses functionality from Redux, such as useSelector and useDispatch. We already created a decorator to add support for that in the previous lesson, so there's no need to do anything!

3. Routing

The page uses functionality from react-router-dom such as useParams (to get the restaurant ID via query params), which requires the component to be rendered with a simulated browser history in order to reproduce deeplinking. We will be adding support for it.

4. Modals

The RestaurantDetailPage presents a modal when interacting with the menu items. Modals are dynamically projected into elements by using React portals, and we need to add support for these as well if we want modals to be shown on screen:

We will be adding support for it.

5. Data fetching

After getting the restaurant ID via query params, the page fetches detailed data about the restaurant and can result in the following states: loading (while the data is fetching), success (when data returns with status 200), not found (when response has status 404) and error (when response has status 500). We already know how to mock these requests using MSW, and we'll go over it one more time to add stories for each of these scenarios.

Creating the stories file#

Let's create the src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx file. Let's also add the layout and design parameters to have a fullscreen experience and connect the Figma design.

Let's add the design parameter at the story level this time, because every story has a different design. Also, the designs addon allows us to embed Figma prototypes which are interactive in the panel, so let's try that! Here's the design link for the default (success) state: https://www.figma.com/proto/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=169%3A510&scaling=scale-down-width&page-id=135%3A257&starting-point-node-id=135%3A258

xxxxxxxxxx

// src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx

import { ComponentStory, ComponentMeta } from '@storybook/react'

​

import { RestaurantDetailPage } from './RestaurantDetailPage'

​

export default {

  title: 'Pages/RestaurantDetailPage',

  component: RestaurantDetailPage,

  parameters: {

    layout: 'fullscreen',

  },

} as ComponentMeta<typeof RestaurantDetailPage>

​

const Template: ComponentStory<typeof RestaurantDetailPage> = () => <RestaurantDetailPage />

​

export const Success = Template.bind({})

Success.parameters = {

  design: {

    type: 'figma',

    url: 'https://www.figma.com/proto/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=169%3A510&scaling=scale-down-width&page-id=135%3A257&starting-point-node-id=135%3A258',

  },

}

Now let's see how it looks like on Storybook: