How to Integrate Storybook Components Into a React App

[00:00 - 00:08] The last component in our process is the restaurant section. It receives a title as a prop, fetches back in data and renders in a car cell.

[00:09 - 00:17] You can find it in the designs under pages and the home page contains the designs for it. In fact, let me copy the link and use it later.

[00:18 - 00:25] And you can find it in VS Code by going to source. It's not under components because this is not a component library component.

[00:26 - 00:36] It's a feature specific to the home page, so you will find it under pages, home page, components, restaurants section. Now please ignore this file.

[00:37 - 00:42] We're not going to be using it in this module. And once you open restaurant section, you see what it's done.

[00:43 - 00:47] It's always important to analyze components before adding to Storybook. So let's see what it actually uses.

[00:48 - 00:52] So it uses styled components. This is something we already support in Storybook.

[00:53 - 00:59] It uses React Router DOM for navigation. And it uses a React multi-carousel library for the carousel.

[01:00 - 01:08] And then it does a bunch of other things. And the component itself receives the title as a prop, which passes down to this page section component.

[01:09 - 01:19] And the carousel does a bunch of stuff with different states. So there's a loading state and there's a success state where if you click on the restaurant, it navigates to a different page.

[01:20 - 01:23] So to the restaurant detail page. And that's pretty much it for the component.

[01:24 - 01:31] It's not a presentation or component like we have before. It's a more complex component that we're going to add to Storybook right now.

[01:32 - 01:40] So you know the drill. We essentially create a new file, rest, the runs section.stories.tsx.

[01:41 - 01:56] And this file will be importing types from a Storybook React component meta component story. It will import the component from restaurant section and it's called restaurant section.

[01:57 - 02:06] It's going to export a meta with a title. And this is where things are a bit different because it's under homepage component restaurant section.

[02:07 - 02:17] We basically follow that structure. So it's actually pages, homepage, components, restaurants, section.

[02:18 - 02:28] The component is a restaurant section. We typecast this as component meta type of restaurant section.

[02:29 - 02:52] We create our templates, which is a component story type of restaurant section, which receives arcs and passes down to restaurant section. And then we export a named const called default because well, this component is going to have a default state, which is a clone of our template.

[02:53 - 03:00] And it's arcs. We add the title and we can see in the design, it's called our favorite picks.

[03:01 - 03:11] So we do our favorite picks. And one additional thing because we have access to the designs, we should also add a parameter for the design.

[03:12 - 03:21] And we do type, fix back and the URL is what we copied before. That's pretty much it.

[03:22 - 03:25] It seems pretty simple, right? So let's check storybook and see what happened.

[03:26 - 03:36] We see that there is a new section called pages with a folder called homepage and under homepage, we see components and the restaurant section. Oh no, there's an error.

[03:37 - 03:43] Well, the error is quite descriptive. It says that the use navigate function can only be used in the context of a router component.

[03:44 - 04:03] So if we check back at the components, we noticed before that it uses something from react router DOM. Now if we want to check how the application handles it, normally we go for apts x and we see that the very first decorator in our application is actually a browser router from react router DOM.

[04:04 - 04:17] So I think by now it should click to you that this means that we need to add a new decorator to storybook. So let's copy this, go to storybook decorators and put the import here.

[04:18 - 04:34] We don't necessarily need to alias it because we know that this is just a browser router and let's create our decorator. So we could call it with router, which is a decorator function that receives the story event and renders something.

[04:35 - 04:51] We will add the browser router and the story event and that should be pretty much it. So we get the router, we add it to our list of decorators, we save it and check storybook.

[04:52 - 04:56] And there you go. We see the component rendering correctly, we can interact with it and it works as intended.

[04:57 - 05:09] However, there is one possible limitation of this component. And if we use the viewport's add-on for instance, it's supposed to have touch capabilities, but the viewport add-on does not support that at the moment.

[05:10 - 05:16] And the car itself behaves differently on mobile devices than it behaves on desktop. Because we cannot test this thing out, it seems limited.

[05:17 - 05:27] However, storybook has a feature that not many people know. It's essentially this button over here, where if you click on it, it opens that specific story as a standalone application.

[05:28 - 05:44] And what we can do about it is if we go back to our editor and bring up the terminal, if we scroll all the way to the banner that storybook provides when it runs, we see that it actually exposes storybook in our local network. So if we open storybook in that specific link, it works the same.

[05:45 - 06:06] However, if we copy this link, we can actually paste it in our mobile phones and that will open the component in isolation in our real device where we can test all of the touch capabilities and see if the component behaves as it should on mobile phones. And that's pretty neat, isn't it?

[06:07 - 06:16] Not a lot of people know about this feature, but it's really helpful. And actually, if you make changes to your code, the hot module reloading will kick in in both your mobile phone and your desktop.

[06:17 - 06:35] So the last piece of our journey is to actually forget about storybook now that we're pretty much done building the component using storybook and we run the application. So we do yarn start and we need to integrate the component we just build into the home page.

[06:36 - 07:06] So we see this gap that is supposed to contain our restaurant section component and we could open the home page where we see there's an indication we should add the restaurant section right here. So we delete this and we add the restaurant section component and make sure that it's importing the correct one with a title of our favorite restaurants and we save it.

[07:07 - 07:19] And when we switch back to the home page, we see that the restaurant section is just there working perfectly and you can interact going to the detail of that restaurant and that just works fine. And how cool was it?

[07:20 - 07:27] We didn't have to do any effort in the application. We essentially just did the whole thing in storybook and that's just the magic of developing things in isolation.

[07:28 - 07:46] You put in the application and it just works. And also as a plus, you get to document all of the components involved in the development of your feature as well as their themes, their designs, their different use cases, which is not only helpful for you in the future, but also for your colleagues to understand more about the application and the components involved in all of it.

[07:47 - 07:52] So that's pretty much it for the lesson. I really hope you enjoyed it because I certainly did and I'll see you in the next one.