How to add Complex Components to Storybook

[00:00 - 01:04] Throughout this course, we worked on adding a restaurant section feature and on the way, we added the most atomic components such as the badge and the review, we went up to the restaurant card and then all the way to the restaurant section. So wouldn't it be nice if we finished the cycle by adding the entire home page to storebook? Let's do that. So when we're back to our code, the home page is under source, pages and home page. Given that pages might include a variety of components which require many different functionalities like routing , state management, theming and whatnot, it's possible that we end up spending quite some effort to properly add a full page to storebook. But given that in this course, we went from simpler to more complex components and we already pretty much added support for a lot of things on the way. So we already made storebook pretty smart when we got into this lesson so we won't have too much trouble. So analyzing the home page, we see that it uses a page template which we just added in storebook in the previous lesson and the page template is connected to Redux. Also, the home page uses a lot of components using styled components but we also added support for that in the previous lessons.

[01:05 - 02:47] And finally, we have a restaurant section which does some data fetching. So we 're going to have to mark that request as well. So to start, we go to our home page folder and we add a new file called home page dot stories dot t is x. I'm going to paste that templates and basically the only difference is that the template doesn't contain arcs being passed to the component, mostly because the home page doesn't have any arcs. As you can see, there's no props. And also , I'm going to add a couple of things because we already know first of all that this is a page component. So we might as well add a layout of full screen. And lastly, in the designs, I'm just going to copy the link and add it to storebook because why not? So we have the design with type. In this case, I'm going to use Figma, you could also use fix back if you want, and the URL of which I just copied. So now, if we open storebook, we should see that under pages homepage, not only we have the components which are used under homepage, but also the default now, which will render the entire page. And as you can see here, this is working fine and great. The only thing is that the restaurant section is still fetching data. So let's add the marks for this as well. Over here, we add a new parameter for a sw and it's going to have a handler's property, which is an array. And that's going to receive pretty much the same things we did for the previous lessons. So that is a rest function coming from mock service worker. And then we're going to mock the get. And then we need the base URL, which comes from the API. And now we're going to have a callback with request response, a context. And this callback is going to return a response with a context.json.

[02:48 - 04:14] And for that, we need the restaurant's stub data. So we get the stub data from stub restaurants. And we call this restaurants. And then we're essentially passing that data over here. And that's basically going to apply the handlers for any story that we have. In this case, the homepage, we only have one story. But basically, once we're back to storybook, now things should be rendering correctly and loaded correctly. So this is pretty much it. We had a very straightforward process to add the homepage to storybook, because you know, we slowly prepared for this since the first lessons. And now we have a fully fledged page with the design on the side. We also have a possibility to change theming. And we can check the whole thing. And you know, it's pretty impressive . Now we have a badge component, we have a restaurant card, we have the review component, all of these are connecting to the restaurant card. And then we have the restaurant section, which is then used in the homepage. And we also have the page template used in the homepage. So how cool is that? We have basically the entire flow from a very basic component all the way to the homepage. So now we have an incredible overview of the components, as well as even the page, and we can work on them without even running the application. As a plus, the designers can also refer to these for taking decisions or for just sharing what they're looking for. And the homepage only has one variant. However, the next lessons we're going to go through a different page, which has a lot of interesting variants. So I'll see you in the next one.