Develop React Components in Isolation with Storybook and Nx
In this lesson, we develop a new React component in an Nx library with Storybook. We explore how to leverage Storybook to develop the component in isolation, how to expose the component props s.t. we can then dynamically change them in the Storybook rendering and much more.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] Now that we have Storybook as well as Tailwind configured, let's start and implement such a Topic button as we have discussed before.
[0:09] Let's adjust the interface of our React component here. What we want definitely to have here is a topic name, which we can pass in as a string, which then in turn, we can go down here and replace the current default text with a props.topicname rendering. Once we save this, we should see this reflected on our Storybook.
[0:30] Now, right now in the Storybook, it is empty. We can go here, and for the arguments of our component, we can go and specify the topic name, and also give it a default, so let's say Next.js. Once it refreshes, you can see here, we get the value displayed. Also, now the add-ons reflect the changes in our component here.
[0:52] We can also directly manipulate this string and say, ReactJS or egghead, and visualize that dynamically. This is the power of Storybook, such that we can see the changes live, based on what we manipulate down here.
[1:05] We can also go ahead and change this a bit, and add some Tailwind classes to make it look much more like a button. Let's go ahead and add here a couple of classes. You don't have to know the details of all those classes, you can explore this on your own. What we want to achieve here is to have more of such a button look.
[1:25] Let's add here also some of the paddings, and also make it a bit more bold. You can see how slowly this becomes an actual button, just as on my current block. One thing that is missing is, still, an image. Let me paste in here two SVGs, which I'm just placing directly into this Topic Button folder, so one for Next.js and one for React.
[1:46] Obviously, we might want to have multiple of these and, potentially, stored not inside this library, but from some external asset resource. Again, let me paste in here some code that allows us to dynamically load this icon in. Finally, also, to import the icon directly in here in our component.
[2:06] As you can see, what happened here now, based on the topic name, we are going to search for an icon, which in this case is Next.js. We do some cleanup on the actual name to exclude all the dots and stuff. This, here, now nicely visualized the icon, based on our file system SVG icon.
[2:22] Finally, what we also might definitely want to have is some possibility of capturing click events. Let's add some OnClick event directly to our typing. Let's also go down here and paste in some code for that click handler, which we then invoke directly on our div.
[2:39] To test this out in our Storybook, we would add such an argument which we can directly do up here, just below the title. This allows us to add some arg types, and here we add OnClick. With that, Storybook now knows that there is also an action defined on the button. We can refresh here. Let's add here Next.js, to get also some logo visualized.
[3:04] Then, if we click on this button here, you can see here in the actions, you would get here, "OnClick action executed -- Next.js," which is the current value. We might even want to have in our story, a bit more visual way of showing the click event has been clicked, by directly showing a message, for instance, just below the Topic button. We have all the freedom to add some code in here.
[3:25] What I do here is, for instance, I just use the onState hook to store some value, whether something has been clicked or not. Then, inside of our button here, let's add the click handler and implement it.
[3:38] What we do is, we grab here the topic name, we set it onto that state hook. Then, we have the clicked topic here, which allows us then, just below here, to add something like, if the clicked topic is visualized, then let's render out some text that allows us to see what has been clicked.
[3:57] Let's save this again. Let me refresh here the Story. If we click on top of here, you can see the text gets printed out below. If you now go and change, for instance, and say, "This is React," you will see the logo gets reflected, with the new logo of React. When I click, it would say, "Button has been clicked with React."
[4:15] You can now see how we can nicely, in an interactive fashion, develop our component here, and make it ready for then later being embedded into our application.