How to Compose Components in Storybook

[00:00 - 00:08] When analyzing the component breakdown section for the previous lessons, we see that we pretty much finished the atomic components. So let's jump one level ahead for the Restoring Card.

[00:09 - 00:16] If you don't have Storybook running, feel free to already start. And the first thing we need to do is to define the use cases.

[00:17 - 00:27] So in the design, we have access to the Restoring Card, which states every single variant of the Restoring. We see the default states, we see the closed states, the new and the loading.

[00:28 - 00:40] Now building this component from scratch would take too much time and typing effort, so we're not going to be doing that. However, I made some templates for you, which already contain the progress of the component under Restoring Card and Progress.

[00:41 - 00:52] And you see that there is a basic version, which is just the bare bones of the component, but already with our use cases. And then an unstiled version, which is starting to use some stuff, but still not done.

[00:53 - 01:04] And then the very final version of the Restoring Card, which contains everything that we need. And apart from that, we have a folder called stub, which contains restaurant mock data so we can use.

[01:05 - 01:17] We essentially can use the data from the first entry of this array and start using in our stories. So let's go ahead and create our Storyfile called Restoring Card, got Stories.

[01:18 - 01:24] tsx. We're going to need to export our meta. We're going to need to create a template.

[01:25 - 01:30] And we're going to have to export our stories. So let's start with the default one, for instance.

[01:31 - 01:49] We then import the types that we need from Storybook React, component meta and component story. We type this as a component meta type of then we need to import our Restoring Card from basic.

[01:50 - 01:59] That's the very first one we're going to be using. And our template is going to be component story type of Restoring Card as well.

[02:00 - 02:13] The template will receive arcs and pass to the Restoring Card. And the default is going to be a clone of template.

[02:14 - 02:29] We also need to define a title of component Restoring Card as well as set the component as a reference. And there we have it.

[02:30 - 02:39] We know that we have the use cases of loading new closed and the default. So what we can do here is create our four stories.

[02:40 - 02:50] So let's call this one new closed and loading. And it's time to pass the props to the component.

[02:51 - 02:58] Our stories, they will all have similar data. The difference is going to be in the new closed and loading as they have different flags.

[02:59 - 03:07] Because we want to apply data for every single story, we put arcs in the level of our meta. And we see all the props that we need to pass.

[03:08 - 03:21] However, we can use these properties from the stubs that we have defined were over there. So let's import from stubs, Restorants, and the Restorants array.

[03:22 - 03:38] We get basically the Restorants array, we get the first value from there and we spread the props over arcs. And that means that essentially every property over here, it's going to be passed down to our stories.

[03:39 - 03:50] The new is going to have different arcs, which is just passing the flag is new to true. And because we have arcs here, they will be merged together with these.

[03:51 - 04:03] So it will keep all the rest of the arcs, but it will override this one. And then we do pretty much the same thing for closed.

[04:04 - 04:19] And loading. Then when we visit Storybook, we see that there's a new story called Restorant card, default new closed and loading.

[04:20 - 04:30] And that's essentially a great way to start, even though you don't have necessarily anything in your components. It's an incredible way to start because this serves as a to do list.

[04:31 - 04:39] So that once you finish your first variant of your component, you can go ahead for the next one and the next one. And once you finish all of the stories, that means that your component is done.

[04:40 - 04:48] So we're done with the first step, which is defining the use cases of our components. And we have access to the designs that we should be integrating into Storybook.

[04:49 - 05:01] So we will copy the link of the design, go back to our story and define a design parameter, just like we learned in the previous lesson. So the type could be either Figma or Figsback.

[05:02 - 05:06] I'm just going to be using Figsback. And the URL is going to be the one we copied.

[05:07 - 05:17] You can also find this URL in the description of the course. And when we visit Storybook, we see that there is a panel for design, which contains the design of the Restorant card.

[05:18 - 05:28] So you have the bare bones of your component, you have the use cases and you have the design to the site. Basically what you do now is to start working on implementing the component.

[05:29 - 05:35] And let's just say you start implementing the component, but you don't care too much about the style so far, only the structure. And you start adding some stuff there.

[05:36 - 05:49] And that will basically become the Restorant card dot unstyled version. And the unstyled version of the component contains already the badge and the review and some other things to come up to this.

[05:50 - 06:03] And as you can see, the component is not properly ready, but it's starting to take its shape. And every story sends specific props to our component so we can check whether the component reacts correctly to each one of the variants.

[06:04 - 06:15] And suppose we finalize working on the Restorant card, we have the correct styles, all the logic we need. So in order to get that version, we delete the import from progress and we use the Restorant card.

[06:16 - 06:25] So if we go back to Storybook, then we see the final version of the component in every single variant looking and behaving just as expected following the designs. And that's just incredible.

[06:26 - 06:28] So that's pretty much it for the lesson. I hope you enjoyed it.

[06:29 - 06:46] We saw the evolution of the Restorant card from a bare-bones template to the final version, which is well documented in Storybook for every single use case. But also we got extra value by using Storybook such as we could use the entire add-on ecosystem to test whether the component looks correct in different themes.

[06:47 - 07:00] We could compare directly with the designs which are embedded in the Storybook. But also we could use add-on measure to get some spacing information as well as add-on viewports to check whether the component looks fine in different viewports.

[07:01 - 07:08] And just to finalize, if we wanted to get some alignment, we could use the add- on outline to make sure that things are aligned correctly. So that's basically all.

[07:09 - 07:09] I'll see you in the next one.