The last component in our process is the RestaurantsSection. First of all, here's a quick overview of this component:

RestaurantsSection shows a section with a title and a list of RestaurantCards inside a Carousel. The only prop it receives is the title displayed at the top of the carousel. The data is fetched from a backend service, and when clicking on a RestaurantCard, the user is redirected to the detail page of that restaurant.

This component is not a generic component, it's a feature specifically used in HomePage, so it is located under src/pages/HomePage/components/ and not under src/components. The component is already done for you, so let's just worry about adding it to Storybook.

Adding to Storybook#

As usual, let's create the RestaurantsSection.stories.tsx file colocated with the component and add the boilerplate. As discussed in the "Breaking down our use case" lesson, the story title should reflect the location of the component file so we set it as Pages/HomePage/Components/RestaurantsSection:

// src/pages/HomePage/components/RestaurantSection/RestaurantSection.stories.tsx

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

import {

  RestaurantsSection,

} from './RestaurantsSection'

export default {

  title: 'Pages/HomePage/Components/RestaurantsSection',

  component: RestaurantsSection,

} as ComponentMeta<typeof RestaurantsSection>

const Template: ComponentStory<typeof RestaurantsSection> = (args) => (

  <RestaurantsSection {...args} />

)

export const Default = Template.bind({})

Default.args = {

  title: 'Our favorite picks',

}

Now let's save the file and check Storybook (run it if you aren't already). That seems simple enough, right? The feature itself only requires a simple title prop.

Well.. if only things were that simple. We just bumped into a fancy error:

The error is quite descriptive: useNavigate() may be used only in the context of a <Router> component. That's because the component has a navigation feature (should take the user to a detail page of a restaurant when clicking on it) and requires to be wrapped in a Router from react-router-dom. From our experience in previous lessons, we know that components that require smart features also require Storybook to become smarter.

By now, it should click to you that this means creating another decorator (or using an addon!). We foresee other components needing similar functionality (especially when we get to page components), so let's add a global decorator to add Routing support for every story:

import { DecoratorFn } from '@storybook/react'

import { BrowserRouter } from 'react-router-dom'

// ... other decorators

export const withRouter: DecoratorFn = (StoryFn) => (

  <BrowserRouter>

    <StoryFn />

  </BrowserRouter>

)

export const globalDecorators = [

  withTheme,

  withDesign,

  withRouter,

]

And there you go, when vising the story again, our component should render correctly: