After building the
Review components in the previous lessons, we have the basics necessary for the
RestaurantCard component, let's go through the process of creating it.
We won't be creating the component from scratch, as it would be too much typing effort, and I don't want you to just copy-paste code, so let's just focus on the process.
As we are going through the process, there will be a few files with pre-configured code to show us every step in this lesson. We will temporarily use files located in the
RestaurantCard.unstyled.tsx. We will be commenting/uncommenting them in the imports of our stories file, then use the final version of the component:
RestaurantCard.tsx. Note that both
RestaurantCard.unstyled.tsx are there for presentational purposes, and you're free to delete the entire
progress folder if you want to.
If you're not running Storybook, please start it. Now let's get to it.
Defining the scenarios#
The first step is to think about the requisites of the component. Here are the possible scenarios for it:
The restaurant is currently open (default scenario)
The restaurant is new on the platform
The restaurant is currently closed
We can also prepare some mock data, and based on it, we can define the props for the component.
RestaurantCard.basic.tsx looks like, with a minimal template to show these scenarios:
In Storybook, every one of these scenarios would become a story. Let's create a
RestaurantCard.stories.tsx file and write the stories in it:
Good! This is the playground, and we will see the component evolve as we evolve the code. We can already play with controls to simulate the various scenarios the component handles: