Finalizing the feature and integrating it into the app
Finalizing the feature and integrating it into the app.
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
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
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:
And there you go, when vising the story again, our component should render correctly: