Innovate with React

Hello, everyone. My name is Cristobal Chao. I live in New York City, but you can probably notice an accent. I am from Spain originally. I came to the States 10 years ago, live in San Francisco, and now I'm in New York, so closer and closer to Europe, little by little. Let's start. So here, probably you are already, you have in front of you the table of contents, what I am sharing with you right now. So what we can do is we have two types of navigations at this level. One is you can click on any of these sections and then it will get you there, or you can click here on the top right corner in next to go to the next section. All right. We will be covering the introduction, just a little bit of intro, then we will be doing the setting up the dev environment, and we will have three sections of implementations where we will cover the very basics of implementing as design system in react, and then we will be adding more and more complexity to it. All right. At the very end, on level up, that's the part that we will be covering at the very, very end, but in any case, I think is the most exciting part. Anyways, let's jump straight in. I know that there is a comment. All right. Let me double check. Yep. All right. It's time to go, guys. So the introduction. Well, before I jump into this as well, if you guys get stuck at any given point, every single section except the introduction has the downloaded file at the very end. So imagine that you are not in this section, on the next one, on setting up the environment, and you get stuck somewhere here. You can always get the latest from this section at the very end. You have the link down here. All right. I know that you may get stuck, so you can always get back in track. All right. Anyways, so introduction, guys. So what is a component system? So a lot of people have different opinions about what a component system is, but at the end of the day is a single source of truth. You have all the elements that are used across your application that pretty much communicates the values of your application, the tone of voice, the guidelines, the patterns. It's not a finished product. We think sometimes that a component system is just the final product, but no, it's not. At the end of the day is what the product is going to look like so things are more consistent. All right. You want to have a component system if you want to get an app that is consistent and cohesive. So I think if you have a small company, you probably are not thinking about this, but at the end of the day, this will hurt you. And it will hurt you two ways. One way is from a user level, people will get confused like, what am I? And from a developer perspective, you are not efficiently getting the most out of it because once you have a component system, you can reuse stuff and people know what is the latest and greatest. So it's a greatest source of communication. All right. We're going to jump into the setting up the environment. Now I have to say, I will be doing this with you. So we will be installing everything from scratch. I'm going to have this side by side. And if you guys, again, if you guys have any questions, let me know. But I'm not going to be able to address all of them. All right. So I have my terminal on the right side. I have on the left side where you should be as well. And we will be installing the packages first. You can go one by one if you don't have MPX or if you don't have yarn. I will be using yarn. All right. If you have, if you use npm, it's fine. Just understand that any time that you see a command in yarn, you will need to translate that into npm. All right. I think it's pretty straightforward. But in any case, we're going to do a create a new react app. I expect that all of you know what this is. There are links to the docs here. But I also have the snippet right there. So you can just copy this and paste it. If you don't have MPX, you need to install it on this first command right here. All right. I'm going to zoom this a little bit just in case if you don't see it well. Another thing while I'm installing this, I will be doing this in visual code. I think you can use any ID you want. But you may run into some issues with some of the stuff that I will be explaining. But we will cover that in a second. But the thing is, if you have Visual Studio, great. If you don't, best of luck. All right. I hope you will be able to get anywhere. But just in case, I'm just telling you this. So we are installing a new react app from the very beginning. I'm doing this with vue. And yeah, if you have Visual Studio, you're going to start starting that now because we will get there in a second. All right. I don't see any questions. I hope you guys are not shy. All right. Cool. So we installed our react app. And now we can just go to the next level, which is going to our new folder and starting the server. I do yarn start again. If you're using npm, it will be npm run start. All right. We're getting new people coming. All right. Cool. So I just run the app. I see it here. You probably are familiar with this. You have seen that before, I expect. Anyways, I'm going to come back to our presentation, our workshop. And the first thing we're going to do is we're going to open our IDE. In this case, I will be using Visual Studio, as I mentioned. And we're going to do some cleaning. All right. There are some files that we don't need. One of them is report vitals. And the other one are tests. All right. Tests are very important, guys. Don't get me wrong. But for this presentation, for this workshop, we don't need them. So I'm going to be removing those so things are a little bit cleaner. All right. So I'm going to be removing these files, report web vitals, setup tests, all gone. If I go now to index.js, I will need to remove some of these files and some of these instances because we don't want them to be around. All right. On the package JSON, you can also remove some of the stuff that we don't need. Like some of these dependencies on the top, we don't need them. But because we already installed it, I mean, it's fine. Same with the web vitals. We can just remove that. All right. Cool. I'm going to zoom this a little bit so you can also see that. All right. Fantastic. And I'm going to double check that the react app is still running. All right. Great. So we clean our app with the necessary dependencies. Next thing is installing a storybook. So you have the snippet right there. And you can use it on your terminal. All right. So I expect that you guys are right now with me. And if you get stuck, again, you can always follow me at the very end. You have the link to download the code. You will need to install the dependencies and run it. But you can always get back on track. All right. So we are installing a storybook. By the way, now we're going to run this storybook instance. And I just want to say that we're going to have two different servers running. One of them is a storybook. Another one is our app. The main reason why I want to show you the two of them is to showcase the reusable components that we will be creating. At the end of the day, a storybook will be used as our library. And the app is to showcase that we can reuse these components elsewhere. Right? So I recommend you to have these two tabs on your terminal, or however you do it, open. And you may need a third one if you want to do anything else. All right? So I have this tab right here. I'm going to call it storybook. And this other tab right here, I'm going to call it app. So for me, I can see it, and I know where I am. Okay? Okay. We've got more people coming. Now, things are happening because we're installing some instances, I believe. So what I'm going to do, I'm going to restart the app server. And now our storybook has been installed. And what I can do is type yarn storybook. So I run the second server. And usually, this is going to be running on 6006. All right? If you have something in 6006, it will ask you, and you will probably need to answer yes, and you will get it in the next port, which is 6007. All right. So storybook is starting, and we have it right here on the left side. You can see it. So I'm going to show you just a little bit about what the storybook is, if you haven't seen it before. So storybook allows you to have all the documentation you need for your single source of truth. This page right here is actually, you can find it under SRC stories and introduction stories. I recommend you to install an extension to actually see the MDX properly, because this is terrible. But in any case, everything that is here has been running here on the left side. Like, if I change this welcome to a storybook to welcome to innovate with react, I should see that in real time on the left side. All right? We're not going to attach this file anymore. I'm going to close it. But I'm going to show you also some of these components that came for free by just installing a storybook. So this is the first component that we have, which is a button. And there are different states of this button that you can see on the left side to showcase overview of its capabilities. You can also have these controls, which are down here, and you can toggle them on and off. So the primary is a primary prop, and you can see how it behaves when it's false and when it's true. You can also change the label to whatever you want. Then with react, for example, you can change the background color of the component, right? And then the size right here. There are some actions that I believe if you click on them, you can also see them. And interactions, to be honest, I still want to figure out what that is. I haven't used that. Then docs, which is pretty exciting. We have the docs for free. And that allows us to, when we are even changing the state of our component, we can get the code at every state. We can copy it, and we can paste it elsewhere, right? Pretty simple. So you can come here, change the state a little bit, and copy the component, and paste it to your ID. You can also see the other stories. And there are also more exciting stuff here, these controls. You can zoom in and out if you just want to make sure that things are working fine. You can have also like the dark backgrounds or light backgrounds. You also have the capabilities to see how these respond into different screen sizes, small mobile, preset viewport. You can see these guidelines, but if you are a developer, probably you won't get a lot from this because you are used to devtools, as I am. But this is a single source of truth that is supposed to be also used by people that are not technical, right? Like if you share this with designers, they can also see the latest and greatest. And for them, it's pretty friendly to use tools like this, all right? Which you can actually get all the different paddings, margins, and all the different guidelines of your component. So you have some tools right here. Some of them are useful. Some of them probably are not that useful. And then the last bit I want to show you is button.stories.jsx is actually the file that is rendering this one on the left side, all right? If you look at this, there is on line seven, it says example button. That example is how you want to organize. So whatever is on the left side of the slash, that is where this component is going to live in our left navigation. There is this collapsible section. It's called example. If I change this to, let's say, library instead of example, we're running into an issue. But as soon as I click elsewhere, then you're going to see like our component right there. All right, this under library now. As soon as I change this, it will go wherever I want to. And the reason why you run into an error is because this storybook instance is changing the URL constantly when I change any state, all right? So if I change this to somewhere else, then on library, I don't have anything else. And now it's running into an error. Now it's under FF, right? I'm going to get back to library. I'm going to save it. And probably that you'll see working. And this is also happening because we have whole like reloading happening, right? So just be conscious about it. Like if you run into issues, sometimes it's just a matter of changing where you are on a storybook, all right? Then we have here some archetypes. And these archetypes are defining some of the controls that we have right here. You see background control. But we also have the capabilities of adding other arguments under these different states. So we have primary, right? Anytime that we do a template bind, it's doing a template bind of our component button. And this button is being imported on the top. This button on the top, if you want to find it, it's also called button.jsx and has our component information, right? But if you go to button storage.jsx, you will have here what is rendering on the story, all right? If I change primary to something else, like let's say like workshop, and then I change as well this object right here, then it will be called workshop, all right? This is just like pretty beginning of storybook. If you are not used to it, this is just a sneak peek of what you're going to get, all right? So we also got other components like the header and the page. These are coming for free. storybook gives us access to them. One thing we have to do is we're going to clean things a little bit, all right? And the first thing first is this is a little bit messy right now. We have stories, but everything is inside the stories, and it doesn't make sense. Stories are supposed to be just for a storybook, but our components should be reusable. We want to reuse them elsewhere. So it doesn't make sense that we have our components inside the stories. So what we can do is we're going to create a new folder called components inside SRC, all right? And this folder is going to have the different components that we have in the stories, all right? So we're going to move there our button, the css of our button, and everything is going to crash now, all right? Because we're moving things around. We even are going to move the storage JSX there, and I'm going to go there in a second, all right? I'm going to move the header. I'm going to be moving everything, and because I'm using Mac, I'm going to do it even faster, all right? So I'm going to move the header and the pages. I'm going to copy this, paste it right there, and I'm going to remove them for some reason. My cat doesn't work, so I have to remove after copying. This is terrible. Anyways, components. So in components, we have everything there, right? And what we want at this point is to organize things a little bit. So we're going to create a new folder called button, and we're going to move all the button dependencies under there, the css, the JSX, and the stories. Same thing with the header. Everything is crashing because we're moving things around. With the header, we're going to do the same, and with the page, we're going to do exactly the same, all right? So we're moving things on their own folders, and everything is crashing because we have to still make a few configurations. So now everything is under button, header, page, under components, right? Everything is way more organized. So now we'll go to button, right? I'm going to close this, and then you're going to see that our button stories, JSX, is actually importing our button, but it's not importing our button by default, which is pretty strange why the storybook team did it that way. Under button, there is only a button, and usually when you have a reusable component, you want to export that as default. So how do we export this as default? I bet you know how to do it, but what we're going to do pretty much is removing this export, and then we can export it at the end. You can also do it up there, whatever you want, but I'm used to using this way of doing things. So I'm going to export by default the button and under stories, and I'm just going to remove these curly braces, because now I'm importing them on a new default way, all right? This component right here is already there, and I'm going to double check if it's working. Maybe there is something else that we are missing. All right, the header is complaining. So the header, same thing as we did with the button. So the header is importing our button. We're going to remove those curly braces, because now we're importing this on a default way, and same with the header. We're going to export this as default, all right? And in a second, we're going to do exactly the same for our page. If you go to header stories, you will also see that we need to remove those curly braces, all right? And because we have this under example, let's rename that to library, all right? And then if I see here, this is still complaining, it says, oh, if you look at the header, it's not dot slash storybook, all right? It should be dot dot button, right? Our button is now elsewhere. But here's the thing, right? Our button now lives under button JSX. So in order to import this, we need to do this terrible thing, which is a button slash button. Page is complaining. Let's go there. Let's fix what the page is saying here. So same, we're importing this by default, we're finding the header, and in order to find header, we're going to clean things up, guys. Don't worry, this is terrible. But we're going to do that in a second. All right, so now things are rendering. Our page is not complaining, but we also need to remove this, making sure that everything is important from a default perspective. And the title should be library, as we did before with the button and the header. And now everything is looking fine. The page, something is happening with the page, let's double check. Oh, yeah. So our page needs to be exported by default. We're just cleaning this a little bit. I wonder why other storybook people have it this way. Anyways, so we have the page now. Everything now is way cleaner, but it's not as clean as we want. This is a very, I don't know, like this pattern right here is terrible, guys. We're going to do two things, all right? Ideally, we're going to use absolute paths, right? And I have that as part of the documentation. As you see on the storybook cleanup, we move the components from stories to components. And the second thing is we're going to enable absolute paths. I see this technique pretty, pretty useful because it simplifies your imports quite a lot. And as soon as you have this well configured, that you can do it at the very beginning of your project, then make life way, way simpler. If you start building your application without these foundations, it's super easy to get super messy code elsewhere, and things start dragging everyone. So I believe if you said this earlier in the project, it's going to make you happier and all your developers. Anyways, so there is a new folder that we didn't talk about, which is called .storybook. And it's on the root, right? That folder right here has two different files. And those are like the files that help us actually import all the stories. Those are like part of the build system when we run the server, all right? What we're going to do now is you can actually copy and paste the whole thing and replace the whole file, all right? But what I want you to see is the last bit, because this is pretty much what we added, all right? This last bit right here that says webpack final allow us to have aliases. And aliases are going to enable these absolute paths, our capabilities for a storybook, all right? And as I mentioned, we have a storybook as one server, and we have our app in our other server, right? We have a storybook, and we have our app. This only influences a storybook, right? So if we want to have also absolute paths in our app, and this is the part I wanted to mention before, we are going to use, we're going to create a new file called jsconfig.js, all right? You may know about this file. It has like basic configuration for your IDE, and I have this in point number four. I'm going to do that right now with you. I know that I'm going back and forth, but it's better to do it once so we know what's going on. So we're adding, sorry, jsconfig.json, all right? No, js, json. Apologies about that. And what we're doing here is we're setting the base to src, right? And what we get is all the capabilities we need for absolute paths for our app. This works in Visual Studio. I don't know if every IDE allows you to have this. So if you get stuck because this is not working for you, you may just want to stick with relative paths, okay? In any case, now that we have our app set up with enabling absolute paths, as well as our storybook, we can go to our header, for example, and instead of importing this way, we can do this. Components slash button, right? If we want to import anything else, like let's say we have a folder called utils or constants and their source, we will say constant slash the name of the file instead of finding them, right? Which sometimes is very cumbersome because you may have like different like levels of an hierarchy, different hierarchy between like different files and different folders. So it gets pretty, pretty messy. So if we do this, it's way simpler, right? Anyways, now it's probably going to be breaking because the last bit that we need is to create a new file under any of these components called index.js. And this index.js is going to index our file. And you can grab this snippet right here on point two. And then you need to change this name of component. In this case, it will be button, right? So this is indexing our button, all right? Some people prefer to have on the index.js the logic of the button. I actually don't like that. And the reason being is once your product gets larger and larger, if you are using Visual Studio, for example, you are going to find that if you want to find any files, let's say like you want to find a button, the index, the primary search is going to be showing up right here. So think about it. If you have like a component called button, another component called button icon, you can have another component called button group, right? You're going to get all these index.js showing there. And you have to keep a closer look and try to find the path. This way, if I just find button, I see it right there. And I go there, right? So it's way simpler. And this way, I'm just indexing the button. So right now on the header, right, I can just import it this way, which is way simpler. If you look now, our button can resolve component button. All right. So if this happens, you have to restart your storybook instance. And I forgot to tell you, but anytime that you change files under .storybook, you want to restart your server, all right? You need to rebuild your app. So I'm restarting the server. And we will be seeing that hopefully working. All right. Here you go. So here it is. The button is right there. It's working. The different states are there. And this is way simpler, guys. Let me tell you. This pattern may look, oh my God, this is so many steps. Once you do it two or three times, it's super automated. And you can do it in seconds. So now we're going to go to header. And we're going to do exactly the same. Another index.js file. We're going to index our components. And we're going to do exactly the same. I usually copy my index.js from button and paste it to the new one and then change the name of the component. All right. And same we're going to do with the page. So we're going to do another file under page called index.js, paste it, and change our default. All right. Now, if we look at our header, it's working. But I think our page is working too. Let me double check our page. Yeah, but our page is importing our header in a very, very ugly way. So we're going to just do, now that we have absolute paths, component slash header. And that should be working. All right. It's working. And our header looks fine. And our button looks fine too. All right. So we clean everything up. Now we have absolute paths and we're ready to go. Now, one thing I have to mention is this button right here. You may find that it's fine, right? But let me tell you one thing. It's not accessible. All right. I found this recently and we have an add-on that we can use to see what's going on here. All right. So add-ons under storybook, you can find them on the website and you can actually get the snippet here. We're using JARN. If you're using npm, you can just copy this and paste it. We're going to install this accessibility add-on. I think it's very, very useful. So we're going to install that. So creating a new, adding a new tab. We're going to just copy and paste that snippet. And this should be installed pretty soon. All right. In the meantime, while it's installing, we can also add this new add-on under main.js. All right. You don't need to copy everything. Just make sure you get the the storybook slash add-on, A11Y, which stands for accessibility. All right. So in main.js under .storybook, you're going to see a new, like there is an array that is called add-ons. Every single add-on, you want to add it right here. All right. So in this case, we're going to create a new line and paste this storybook slash add-on accessibility. Since we change our main.js in a storybook, we need to restart our server. All right. But let's wait until the add-on is installed. All right. It seems it's installed. I'm going to restart the server. I'm going to restart the server, and we're going to see something pretty cool in a second. I am restarting the server. All right. All right. Here you go. So I don't know if you noticed something different, but there is a new icon on the app bar. This one right here. If you click on it, you can see how the component behaves with those different conditions. All right. This way helps you to actually understand what's going on, like from different user perspectives. Right. There is another tab also called here accessibility on your controls. By the way, these controls, you can have them down here or you can set it at 7 or 8. You can set it at 8. Set it up on the right side by using this control right here. Since I have my screen side by side with my terminal, I prefer to have it down there, but you can also have it here. For the sake of having that here, I'm going to keep it here. So there is this new tab called accessibility. If you click on it, this is the most useful part of this add-on. You're going to find any issues right away. As you can tell here, there is a violation. It's telling that elements must have sufficient color contrast. That's why this component is not accessible. What we have to do is change our background color or change the text color. If we change our text color, if you go to button.css and change this to color, let's say black. Sorry, black. Sorry, I'm using JSX. This is css. All right. I'm having a hard time. Wait. Oh, it's okay. It's a storybook button primary. That color white, we're going to change it to black. And is this okay? If you go back and forth with accessibility, now it says zero violations, four passes, zero incomplete. Look, this button now is accessible, but it's ugly. It's pretty ugly, right? I want to fix that in a second, but yeah, this button right now is accessible now, but again, it's not accessible. Well, it's accessible, but it's not beautiful. That's what I wanted to say. But anyways, with this button right here, we can also change that. Instead of being text black, we can also change the background color, the blue, to be a little bit darker so it's accessible. But in any case, we're going to keep it this way from now. We're going to fix it in a second. I'm just showing you the accessibility capabilities right here, which I think are pretty useful because you can get this information right away for any single component that you have under a storybook. All right? It's pretty useful stuff. All right. Now, coming back to where we are, so we change the primary color contrast because it's not enough, and then we copy and paste it to our app. And well, our app now doesn't have the button, so what about if we add the button right there? All right? So instead of this link, we can just import. Well, first, we will need to import our button. And since we have right now absolute paths, it's way simpler to import those, right? Because we know that button is under components. So it's import button from components slash button. It's that simple. All right? So button, button, right here. And let's see what's happening right there. Okay. We restarted the storybook, but we didn't restart our react server. So we need to restart the react server, too, and hopefully this is going to work. All right? When we add a new JSConfig, this will need to actually do the same thing. We are not seeing any button. Oh, my God. What's happening here, guys? So when this happens to you, and this is why a storybook is pretty useful, you can always go to the docs, get the code from your component, copy that, right? And paste it. In this case, in our app.js. All right? So instead of me guessing what I need to do, I can just copy the state of this component at this level and see it, right? Look. It's as simple as that. Instead of button, we can say, learn react as it was before. And that's it. So we completed our first section of the workshop. Again, if you guys got stuck, you can download right now and install it. You will be at this level. All right? Now we're going to go next. So we're going to press on the next button on the top right corner. And we're going to get into things that are more interesting. All right. Importing fonts. All right. One thing that I want to mention is this button right here. And again, this is also something that I am surprised to see it because this button right here, if you look at the css, it's supposed to be imported in Unitos fonts, right? But if you take a closer look and open our devtools, and I imagine you know how to open devtools, right click, inspect. If you open the computed tab under elements and scroll down, you're going to see that Helvetica new is being rendered, which is our second option in our font. So Unito is not being imported. And same thing with the app. So we have to fix it, right? We have to fix it because for some reason the storybook team didn't add that. Maybe they knew that we were doing a workshop. So we need to make things easier for everyone. And this way everyone can learn how to import fonts. So how can we import this? So what we can do is we can go to Google fonts. I don't know if you know about this website. It's pretty cool. And you can find fonts here that are mostly free. I think all of them are free. But anyways, I searched by the Unitos fonts. I can click on it. And this is a new version of Google fonts, which is pretty interesting because I believe the previous version for me was way more straightforward. But anyways, so Unitos fonts is right here. And what we're going to do, and I don't know if you are familiar with Google fonts, but the concept here is like you are like an e-commerce platform, but everything is free. So we can select our fonts and send them to our shopping cart. In this case, we only need the regular 400. So we can click on that button. I believe it's the 700 and the 900. So the 700 and the 900. If this right navigation doesn't show up, it's under this button on the top right corner. And you can see on the review, this is our shopping cart with our fonts. And it's free, as you may imagine. So here we can just copy this section. And what we have to do is we need to paste this in a new file under .storybook. This file under .storybook is called preview.head.html, all right? And we can paste it there. You can also find this on the documentation. Everything that I'm explaining to you here is on the doc, okay? As you can see here, we will import as part of preview.head.html. So what is this file? What is this file that we are adding here? Since we created a new file under .storybook, we need to restart the server. And I'm restarting the server so you can see what is going on. But what is this file, preview.head.html? So this canvas in the storybook is an iframe, all right? So anytime that we are switching between the different buttons, the different components, this is being rendered in different iframes, all right? That's how a storybook works. So preview.head.html is anything that we want to inject on the head of our iframe, all right? So what we imported from Google Fonts and pasted there now is it should live on the head somewhere, somewhere here. Look, I'm seeing it right there, all right? And I don't know if you notice it. I'm going to zoom in a little bit. But this button now, the label has changed. And we can double check that now is new needle, all right? Now the font is being rendered, finally. Fantastic. However, if you look at your app, this is not being rendered. And you can double check by checking in devtools. It's importing Helvetica new. And that's not what we want. So as I mentioned, storybook is one server. Our app is another server, all right? So we need to copy this snippet, right? And we're going to move it under public folder, under index.html. You can paste it under the logo if you want to. And now you can see that we have our new font right there, all right? Fantastic. So we have already our fonts imported in both places, ready to go. Great. So now, as I mentioned, do not forget to also import that as part of the app if you want to see with a better font, with the supposed font. Anyways, choosing a react component library, next section right here. So why are we choosing a react component library, right? Well, you may think that you prefer always building your own components, why using something else is going to add a lot of size to my bundle. I prefer to keep things simple. That's fine. But the thing is, when you choose a react component library, you're getting a lot of things for free, right? You're getting things like high quality components. If you look at our component right now on a storybook, this doesn't have any single interaction. You hover, I just see the pointer, but nothing else. I'm clicking on it, nothing happens, right? I mean, it's fine, this button, but it's not really responsive. So this is usually where you start, right? But when you have a component library, you're going to start reusing things from zero, and there are already high quality components that you can customize as you want, right? And make it custom to your own component system with your own color scheme, with your own typography. So you're building that, right? You're creating your own brand, right? The thing is, you also have a team working for you. For example, we're going to be using Material UI, and I'm going to go there in a second, but the Material UI team is a fantastic team. These guys are amazing. When I was part of Google, we tried to also do the same. We tried to create a react version of our component library. We ended up saying, pointing to Material UI, because they were doing a better job than us. I shouldn't say that, but I have to say that too, because the community around Material UI is so large, and the development team, they are constantly they are constantly making updates, making sure that everything is back free, and you get accessibility, you get extensibility, you get a lot of things for free. So it's like, if you have your own one-person company, by using a component library, this is like having a team that is working for you, which is amazing, right? Anyways, we're going to choose Material UI, as I mentioned, the reason being, if you click on this link, you can also find the communities that, from this article, this is recent from this year, and the comparison with other libraries. There is Ant, there is Chakra, Bootstrap, those are all great, but I think Material UI by far has the highest community, right? And when you have a very high community, you usually think of also having the right documentation. If you get stuck, you also know that this is being maintained by a team of people day by day, right? And this says origin is Google. Well, I would say it's backup by Google, but it's not made by from Googlers, as FYI. All right, anyways, Material UI, I don't know if you know about the UI, it's pretty cool. If you go to the website, you have the docs, you can search by components. For example, if we look at the button, you can get here, find the buttons, you can get the documentation of different states right here, all in react. This component, by default, I already use in Material design, and you have right here so many different components, like checkboxes, radios, selects, there is a lot of things going on that you get for free, all right? So this is pretty exciting, and anyways, we're going to jump to installing the library, all right? So here we have a link to install the library, and you also have the snippet, all right? So you can just copy and paste the snippet on your new tab, on your terminal, and we're going to be installing Material UI right now, right? All right, it's going to take a little bit. I don't think it takes a lot. Look at that, how fast that was. All right, we installed MUI, and we're going to do some cleanup, all right? So first things first, so our button component looks, as I mentioned, looks terrible, doesn't have any interactions. Look at that, it's so bad. Anyways, we're going to go to our button JSX, and we're going to import the button. You have the snippet, and you don't have the snippet, but it's pretty simple, guys. So what you need to do is, you can do just import button from at MUIMaterial slash button, all right? As we do with, well, we have to also know that if we're importing button, but our component, there is button, there is a conflict here. So instead of importing button, we're going to say MUI button instead, right? And hopefully, that's okay, fantastic. So this MUI button, I can just replace this button that I have here instead, and as soon as I have it, it is running into an error. Why is that? We need to restart a storybook probably because we install a new dependency, right? So we're going to restart a storybook, and hopefully, we're going to see this new button right away. And here you go, there is the button, right? You may notice that this button already has some interaction. However, if you look at the button documentation, by the way, if you got stuck into how to import the button, you can also get it from the docs, all right? It's right there. And as you can tell, there are different variants, and you also have access to the api on the right panel at the very bottom, but you can see, like, if you click on button, you have access to all the different props and values, all right? But just to make things easier, we're going to start by making some changes to our button. It is this variant here, all right, that as you can tell, there is text, contain, outline, and this is the representation of these three. So if I go here and change variant to contain, right, then our button looks way better, right? However, these props right here, right, we need to inject them so they support Material UI, all right? So it's going to be pretty simple. So first things first, we're going to add a new property called, we can add it at the very end, variant, and that variant, we're going to add it here, inject it to this prop right there, and you're not seeing anything, right? Why? Because we need to, in other stories, we need to inject that as well, all right? So this primary, what about if we call it contain instead? Because contain is the variant. So I'm going to say that, variant, contain. And if I do it, this is going to complain, but as soon as I click on it, I'll see it, all right? And instead of secondary, we can call it outline, which is the second version of the variant, and we're going to add a new prop called variant outline, all right? Same we will do with text. So in large, we can keep large. Large is, I think, is useful, and it's small. So let's create a new one, a new state, and we can call it text, and variant text, all right? Done. So if we now switch between the three, the testing is not showing, because I forgot to add, I forgot to bind it. Okay. Oh, it should be called, sorry, should be called text, and the arcs right now. It's right there, but what is going on with this border right there? I think there are some conflicts happening with our classes. We're going to remove the class name right there, and we're going to remove as well the style. We don't need that. Let's remove that, and now our button has three different versions, outline, contain, and we have it right there, all right? Which is great. It's looking good. Anyways, as you can tell now, our button is way more interactive. We have hover, we see the shadow, we can click. Everything looks way, way better. If you look at the docs, these descriptions right here, we got the new variant prop, but there is no description. In order to add it, you can just add these on prop types, and you can call it instead variant, and this is a string, right? And here you can add some documentation. In this case, this is the variant state of our button, whatever. Not great comment, but if I add it there, and then I refresh, hopefully I see it. Here you go. It's the variant state of our button, and it's a type of string, and I have the control right there. One thing that we would like to do now, our accessibility is passing, which is awesome, and one thing we need to do here is this contain is a string, but it would be very nice if we could do something like this, right, on our controls. But instead, we can also add selectors, well, select component instead of having ready buttons for that. So how do we do it? So under art types in our button stories, we can, this background color, we can just remove it. We don't need it, and then we will be adding variant, which is the name of our prop, and then we'll do type, and this is a select, and options, which is the second key, and this is an array of strings, and we can set contain, we can set outline, and we can set text. As soon as I do it, this component, it was a text field, now it's a selector, all right, and now I can just switch between the three different variants on the controls. How cool is that? So cool. Anyways, we have our library right there with our button looking great, the different versions of our button. This is great, guys. There is also things that we can add as well. If you look at the button itself, it also has colors, right? So we can also create a new one called color, and it's called type select. We're going to start adding the control first, and then we can set the different props. The very first one is the primary, then you can add the secondary, and then we also have success, and we can have also error, right? There are more. If you want to see the full list of these types, they are right here. So we have primary, secondary, success, error, info, warning, so we can also add those if we want to. I'm going to just add it, info, warning, fantastic. So we have it there, and then this color, I think we don't have it in our props yet, so we're going to include that, all right? So color, actually, it should be coming from this, but in this case, let's add that so we can see what's going on, and then we forgot to add the color, and then this mode right here, we can also remove that. We don't need it. Fantastic. So our button now, there is something going on. Very, very, very interesting what's happening here. Color, color, type, select options. There was something happened right there. Click the render version of our button. What did we do? Go on right here. Here you go. Something happened there. That was interesting. All right. Anyways, our color has also been imported because we are also destructuring props, right? So that should be there. Anyways, we have this color, new control down here, and we can see how it behaves, but we have a problem right there. Okay. Yeah. Okay. So I set this up, guys, but, well, I will reset that. I will reset that, and the reason being is we don't have our theme yet, all right? I went a little bit ahead. I got very excited. Okay. Our color now, let's keep it primary as it is. We will be doing more stuff, but that will be on a section that is coming next, all right? So we added this now. We go to our section. So we added color. Our size, I think our size is not there. Let's double check. Look, it's not there. This is a pretty simple one. So size, we just need to add it as well as part of our props, and now I can just switch between the three, all right? And if we want to as well, you can also add it as part of the art types and have a selector, but that's up to you. All right. Cool. Fantastic. So now we did the cleanup, and then finally our application, it has this new Material UI component, but it's not looking how we want. So as we did before, we can go to the docs and get the code from our component. We can copy that, and if we go to our app.js, we can just paste that and replace in our previous version of our button. And if we look now, here you go. Here it is, right? Looking way better than before. So now we have a high quality component right there. Right now. Anyways, here, this is the end of the first part. As I mentioned, you can download the code right here and get back on track. All right. And we're going to go now to the next section. So setting up a centralized theme. Why do we want a centralized theme? Well, you may know already, when we have a component system, we want to also showcase our brand, our colors, our typography, right? And having a centralized theme means that you can actually control everything from a single place, right? Which is pretty cool and reuse things across. So instead of hardcoding colors or hardcoding stuff, even typography stuff, you can just have one single place where you have both your colors, both your typography and reuse them across, right? With no dry code. Okay. Dry code is bad, guys. Avoid that. Anyways, you have also access here to colors for material UI. It explains to you that we're using the material foundation, right? And if you look at this tool right here, which is a pretty cool tool because, I mean, you can do a few things here, but I was also building this tool when I was part of Google. So that's FYI. I should not say that, but this tool was built in angular, which is a terrible decision. But anyways, that was back in 2014, so it was a long time ago. Anyways, but what I want to show you here is how the material color scheme has been implemented and how it works. So if you look here on the left side, we have all the different hues. Red, pink, purple, right? And then on the top, you see the different, you know, like colors 50, 100, 200. You can click on them and see them, right? These are, you know, like all the different tonalities of the color, right? It goes from the lightest to 900, which is the darkest. You also have access to the accents, but we're not going to cover that, all right? Anyways, I'm just showcasing to you, like, some of these capabilities. Then you also have access to the secondary, just in case you want to change things here, right? And see how it looks in different UIs. Fantastic. So now that you know a little bit about the color scheme, I want to also showcase to you this generation of colors, which allows you from a single color, generate all the different tonalities, right? This is pretty useful because just if you have a brand and you have one color, you can get the whole list of colors by using this. Which is pretty cool. You have access to the complementary, analogous, and the triadic, right? You can also see this in color tool if you click here with the colors that you selected, all right? Cool. Anyways, typography. So typography in material UI, they also use the material foundation, and it has all the different sizes that you can reuse across your app. It goes from H1, H2, S3, all the way to H6. You have subtitle one, subtitle two, body one, body two, the bottom text, the caption, and overline text. You can also add more as you want to, okay? And you can customize also the names of those typographies. But just in case you want to see how this works, if you look at the typography here, this is a reusable component, right? And if you set the variant, if it's H1, it will be using H1. If it's H2, it will be using H2, right? Instead of going to the css and changing and hard coding every single file with different sizes, you can have things consistent, and you are reusing this across your app, all right? It's way better, guys, way better. Anyways, that's why we want a centralized theme, and we're going to do it right now, all right? So the configuration is right there. I'm going to be closing some of these tabs because we don't need them. Well, we actually need the server, and we need to also have our app. Sorry about that. But in SRC index, this is the main file that we want to add our theme to to inject the theme in our app. This is not going to inject the theme in our storybook because, as you know, index.js is not rendering our storybook server, all right? So here you have these two imports that you can grab them. You can also grab everything before the three dots right there and paste it right there, and then you also need to, you can also copy and paste this root dot render and replace our root dot render, all right? And if you notice, there is a new high-level component here called theme provider that you can inject the theme, this theme right here, all right? So if you look at our react app, you're going to see right away that our bottom color has changed to red. Why is that? If you see here, it says palette primary main. This red 500, we're using that one for our primary, right? If we change red to red 700, it will be the darker version of the red. And this red right here, you can also see that on the color tool. It's the same red. It's the default material red. So the 700 right here is this one. This one right here is the same one, all right? So you can also access to 900 and see it darker, or you can go all the way to the lightest 100, and you see it. And look how cool material UI is, right? As soon as you change the color to a color that is pretty light, it will change the text color for you by default. So it's accessible, all right? You don't need to be making sure things are accessible. These are coming for free for you, you know? Pretty useful stuff. In any case, the red button, I was just showing you this, but let's make it blue. It's cleaner. So let's make blue 500, for example. Well, that's pretty light. Let's make it 600 instead. Okay. That's fine. Great. We have our theme right there. Fantastic. Things that you can do as well is if you look at the theme docs, right? Well, there is a bunch of information here, but give me one second. Actually, if you look at the theme docs on the typography, because we're going to do something pretty cool right now, is you can add a typography prop under palette, all right? And this typography, we can change, for example, our font family. Let's say like our font family is Arial instead, right? Wait, did that work? No. Wait, give me one second. Yeah, here you go. So you see, as soon as I set the typography to font family Arial, I see it right there. Okay? If you look at our app.js, this P right here, we can start replacing that to typography instead. So you can say import typography, and we can also do this instead. So we can have these components coming from just one liner in one liner. Just be careful with this, guys, because this adds some bundle size if you don't have a specific webpack builds. I think version five onwards, this is fine, but version before webpack doesn't really work well with this way of importing. The reason being is if you do that, this is going to add all the library every single time that you do that. So if you have a lot of these different imports in different files, this is going to add a lot of bundle size that you don't need. So that's why I don't recommend this approach if you are not using like a modern version of webpack. All right? In any case, we're adding this typography component, and we're going to replace our P tag with typography. All right? And we don't need the edit code, whatever. Edit app and save. Let's see. Okay. Edit app and save to reload. Anyways, we're going to change the variant as you saw before to H1. And look, it's so big. Oh, my God. What's going on here? Let's do H4. H4 looks a little bit better. But what's going on with our button? Something happened with our button. Oh, because we're importing it from material UI. We don't need that, right? Our button is our button component. It's not our material component. We already have our own custom component and their components button. That was a mistake I made. Sorry about that, guys. And now we see our typography, our button. We can also add some sort of like space between the two. So I'm going to introduce you to a box component, which is also it's like a div, but you can do cool things with box. With box, you can add margins. Margin top, for example. You can add margin top and specify, let's say, like three. And three is actually, and we will cover that in a second, is actually 24. And the reason being is the baseline that material UI uses. The material UI, every single baseline is a grid. And I'm going to every single baseline is a grid. And I'm going to be covering that in a second. But I'm not going to go there right now into that because there is a section talking about that in a second. But just what I want you to understand is three here is 24 because it's a multiplication of eight. So if I said one, it will be eight. If I said two, it will be 16. Three, 24. And you may ask, this is terrible. Why are you doing that? We will cover that in a second. It may not make sense to you right now. It will make sense once we get there. One thing we can do as well, this margin top that I added there, so there is some space between the two. I can also call it as MT. That stands for margin top. If I want to do margin bottom, I can do MB. It's margin, M, bottom, B. If I want to do M left, how is that? So it will be ML. That's not going to work there. But anyways, when I do that and I added this box, this box at the end of the day is a div that you can do cool things around it. Anyways, we have that. Our button is looking nice. Our typography is there. So coming back to our theme, the cool thing about this is you can also specify the different variants at this level. So we're using H4. So if we go to our index and add H4 and then add font weight bold, you can see that right away our H4 is being injected there. So in one file, we can specify the values of every single typography we have. And there is H1, H2, S3, S4. As I mentioned to you, we have all of these already to be used. And we can also add more. We can customize our fonts too. But this is a sneak peek of what you can do with the theme. So we did some color injection, some typography injection, and we're going to remove this aerial because aerial is terrible. Let's keep it as Nunito, how it was. I think it's not Nunito, to be honest. I think it's using Elvetica. So let's change that. So our font family should be Nunito Sans. And here you go. Here we go. Here we see it. It's right there. Fantastic. If we want to change our button, we can also do it at this level. As you saw on the typography, there is bottom text too. And the variant of the bottom text is bottom. So what we can do now is on bottom, we can set our font weight to bold so it's easier to read. Let's see that. Here you go. So now it's bold, easier to read. There are two ways that you can change your button. One is from your button component, or also from your theme now. You can change some of the stuff at this level. Cool. Cool. So now we're going to continue. We changed our button. Now it's better. 500. Well, I'm using 600 here. And I added some more stuff that what you are seeing right here. And now we need to do the same for a storybook because our storybook doesn't have any theme. All right. So in order to do that, we need to add a new decorator into preview. So under preview.jx, we see these parameters file, right, which has some configuration for our controls. But we can also import our theme right there. All right. So we're going to import the theme. Well, actually, our theme is not in ISRC theme. All right. Our theme right now is index, under index. So what we can do now, because we don't want them to conflict with each other, we're going to move this theme to a different file. So it can be reused in our app and also in a storybook. So how do we do it? We can create a new folder under SRC called theme. And under theme, we can create a new file called index.js. And we can just move our theme stuff, the theme provider, we don't need it. And we're going to export this theme as default. All right. Support default, create theme. And then under our index, we can just import the theme that we have under theme. Look how simple that is, the import now that we have absolute paths. It's way easier, right? Theme is under theme. So simple. So now if we look at, let's double check our app. So our app is working fine. Fantastic. We move things around so we don't duplicate code. And our preview, now we have SRC slash theme right there. Okay. Great. So also if you want to use absolute paths in a storybook, you can do it from main, all right? But you need to add the alias right here. So if I do that under components, I will be able to use absolute, well, in this case, it will be shortcuts, right? It won't be absolute anymore. So I want to preview and I can just take the same approach as I was doing before. And we also need to add this decorator right here, all right? What this decorator does, it allows us to add high-level components on top of our story. Our story is what is rendered on the iframe. In this case is whatever is under .stories. So you want to add context or you want to add other providers, you need to do it at this level, all right? And this is the function of decorators, pretty much. So our storybook is complaining because probably we need to restart our storybook server. So we have to restart that. And I'm seeing a question from an hour ago. Sorry, Ernesto. So what are the add-ons in the main JS of a storybook for? So if you look, if we look at those, those are like essential things that you can get. For example, if you see the add-on interactions, that is the tab called interactions. If you want to learn more, you can just click here and it's actually giving you a 404. That's why I didn't understand what this was. Yeah, we need to ask the storybook team to update some stuff here. But there are also essentials. The essentials are, I believe, the ones that you have over here. And I think also the actions. And I think the links, the links is a very good one. Where are the links here? I think these are related to the docs, but we need to double check that. We can do a quick search on Google and see. So this links the stories. All right, cool. So yeah, this links the stories. It allows you to pretty much have your stories linked in one single file. Not sure if it was useful, Ernesto, but hopefully you got the point here. Anyways, there is something going on here. Our theme provider is not defined. All right. How do we import our theme provider? So if you look at the index.js, this has already our import. For some reason, I think I didn't add it there. So that was a mistake. I will be updating the docs as well. So you need to import also the theme provider from MUI. And this is probably going to keep complaining. And look, it's showing up right there. Fantastic. And I don't know if you notice it, but we already have the theme. We have Nunito, the phone weight is bold. So we have our theme now in both the storybook and our app. All right. Fantastic. Fantastic. Great. Where are we? All right. We added theme stories. We already did that? No. Okay. This is cool. So I have two snippets here. All right. And what we're going to do is under stories, so SRC stories, we're going to create two new files. All right. This first file is going to be called typography.stories.jsx. And another one, we're going to call it colors.stories.jsx. I find this very useful because you can actually reuse this in any storybook you want to do. This is a snippet and it showcases your theme at a storybook level. All right. So feel free to use it. So if you click on the snippet link, you have access to the code and you can just copy entirely and paste it. I believe this one is the colors. Okay. The colors. And then we're going to do the same for typography. All right. So the typography, also the link. So I'm going to grab it and paste it on typography. This typography, by the way, is coming from here, from the MUI docs. I just made a few changes. So it's a story. So if we look at our storybook, it's not showing up. Interesting. Why is it not showing up? Oh, I had to hard refresh. If you hard refresh, you'll see it. So you're going to see a new section called under library theme, and we have the colors. All right. And we have our typography as well. All right. So at this level, we can see how our typography could be used. All right. This is pretty cool because you can see here in a pretty, in a glance, what's going on. All right. We changed the H4 to font weight to bold, right? So at this level, we can also make configurations, right? Let's say that H1, we want to change it to font weight bold as well. And we are seeing it now, right? And so at this level, we can make all the configuration we need and we know what's going on and then we can reuse it. This also helps, you know, other teams members to come here and understand what is the single source of truth. Like how are things being implemented from a reusable level and the colors, you can also see the colors that you're using. This by default are coming from material UI, but let's say that instead of this purple right here, right? We want to change it to red, right? So what we do is under palette secondary, we can change main to red 400 and we need to import that under colors. So we import the material colors and you see it right there. By just setting up the main, the light and dark and come to you for free. If you look at the color tool, those are the same as the ones that you see here in material. So anytime that you select a color, you get the light and dark versions, all right? So you see it there. I don't want to have it red mainly because I am a Real Madrid fan and sorry if you guys are some Barcelona fans here, but you know, I cannot stand for something like this. I need to change that. So let's make it green instead. Sorry, guys. If you want to keep it red, keep it red. I want to make it green. It doesn't look that nice, but anyways, green 400. I'm going to keep it. You see as well, there are some design tokens happening that I'm showcasing here. You have the secondary main, you have the secondary light, you have the secondary dark and you get also the secondary contrast text, all right? Those are properties that you can use across your app, right? And you don't need to be thinking about if it should be white or black depending on the accessibility contrast that you need, right? It comes for free already, all right? We're not injecting these properties yet. We will be doing that pretty soon. But at this point, I just want you to get a sneak peek of our colors, our typographies now as part of our component library. Fantastic. Great. We did that. Then the next thing is we want to inject our icons to our components. Well, I'm not actually going to do it because I don't have a lot of time for this, but it's not that hard. But one thing I want to mention is if you look at the docs, these material icons are a library of over 2,000 icons that you can use from Material UI right away. You need to install this package, but the cool thing about this, these are like all the material icons. And let's say you want to find something related to a map. You can find it here. And if you click in any of these icons, you have the import right there. So you can just copy and paste it. And these are like SVGs. So you can actually change the color as well. So it's pretty useful, right? Anyways, I have an exercise for you, but we're not going to do it, which is enabling the ability to add icons in our button component, right? If you look at the bottom docs, you will find information about it, but I'm not going to do it. In any case, I'm going to install the icons though. I'm going to install them. So you have the snippet right there. You can do also npm as I mentioned before, but we're going to install the icons. That's the only thing we're going to do on this particular section. And while it's installing, our next part is going to be very exciting. We're going to write our first components, because the previous ones, we didn't write them. We cleaned them up a little bit. All right. So we're going to write a few components here. First one is the avatar. So this is the cool thing about using a react library. You already have all these components for react. You can have all these components for free available for you, but you want to customize them, right? To make it your own. So you start here instead of building things from zero, right? This saves a lot of time. And all of these components, as I mentioned, they're already providing you accessibility props. They are extensible, so you get a lot of things for free, all right? So here, we also have, I have a link here that says start here, because our friends in Anima, they created some stories for us already. Not for us. They have a sample storybook, but we can use that, all right? We can leverage from it, because this way we can do things faster, all right? And since we don't have all the time in the world, we're going to be adding those. So how do we add those? So with the same principles that we talked before, right? We're going to create a folder per component, all right? So under components, we create a new folder called avatar. And this avatar is going to have three different files, index.js, remember? Then another one is avatar.jsx. Another one is avatar stories.jsx. And that's it, all right? For now, that's it. All right. So avatar stories.jsx. We're going to copy and paste this from there. And right now, if you check your storybook, you should actually see that. Let me refresh. Yeah. It's under material UI, all right? Why is material UI? So as I mentioned before on the title, we can change that to move things around. We're going to move it to library, all right? Because we want to keep our components under library. So here you go. We see our avatar is right there. SRC is the photo. You can also change the letter and make it letter instead. You can also change the background color of your letter if you want to by using this control right here. As you know, there are also docs. But this component right now is not reusable, right? This is just a story. We cannot reuse this, right? If we want to reuse this, we need to add it on the avatar.jsx. So first thing first, we're going to index this. And I'm going to go a little bit faster now, because this is like things that we did already. All right, avatar. So how about we import the avatar on the index? And then the avatar, we don't have anything here. So we can start adding our new react component const avatar. And then we cannot... This is the backbone of our avatar. So export default avatar. And here on the return, we're going to add all of this, all right? All of this that is under stories, under the template, we're going to copy and paste it under return. And it's complaining because these arcs don't make sense. Those are like actually the props. So we will add the props on the first argument of our function. Call it VGColor, letter, SRC. We can just remove the arcs. We don't need that. And there is also the letter. All right. I will call it character. But anyways, that's cool. All right. Here you go. So our avatar. But avatar is importing avatar. That doesn't make sense. So you look at avatar.stories. It's using the MUI avatar. And we can just cut it and paste it here. All right? And then this avatar is conflicting with our avatar. So we should call it MUI avatar. All right? And now on stories, we need to import our avatar that we just created. So import avatar from avatar because it's right there. It's on the same folder. All right. Cool. Now, this we don't need it anymore. So our avatar can be injected this way using the structuring. And something is happening with our render methods. Let's double check. What is going on with our avatar right now? You saw anything? Let me know. But there's something going on with our avatar for some reason. It doesn't like that. Element type is invalid. It sometimes are like the most stupid thing in the world. When things like this happen, I get confused. Right? I'm going to restart the server, but I don't think it's going to work. Fix it. I think there is something wrong. Oh, no. Avatar file. I'm not able to see it. We forgot default export maybe. Thank you, Epica. Export default avatar. But we have it right there, right? And all of a sudden it worked. I don't know. Sometimes this happens, guys. Like, magically this worked. Very interesting. All right. Sometimes things like this happen. I think it worked because the server restarted. All right? So when things like this happen, remember, sometimes it's just a matter of restarting the server. It shouldn't be that way. But because I added new files, that's probably something happened on the build. All right? So now it's there. It's working. We have a reusable avatar. Fantastic. So we're going to do the same with the other two. All right? The menu and the alert. So as we did with the alert, we're going to start here on the menu. And we're going to create a new folder under components. Call menu. And under menu, again, three new files. Index.js. Menu.jsx. And our menu.stories.jsx. That file can also get it from here. They call them UI. I'm going to call it menu because, ideally, this menu, we want to customize it as we want. But we're not doing it right now. We're just, like, making them reusable. All right. So our menu.stories looks there. We can also find it if we refresh our storybook. And it's right there. Here's our menu. Look at that. We have our menu. But it's not reusable. So we need to make it reusable. And, again, we can just get the index.js, paste it. And I don't know if you noticed it, but this is all the time the same story. All the time the same thing. ABC, ABC. We should create a script to automate all of this. Anyways. Our menu. We have it here under the template. We can copy the whole return and add it there. I pasted my avatar before so I have, like, some sort of template. And I'm going to change everything right there. All right. The menu. I'll change that. And then this has, like, all different components right there. If we look at our menu.stories, we have all the imports. So we can just copy those, paste them in. And these arcs, we need to change them. Right? We need to add them as props. So we have the open. We have the items. And I think that's pretty much it from what I'm seeing here. Right? I think this is pretty much it. I think so. Okay. So I'm going to open the stories. And I'm going to remove all of these imports. Now I'm using my own reusable menu component that I'm going to have as part of my story. So I'm going to replace this return with our menu. And then I deconstruct the arcs. And this menu list should be menu. All right. Now it's there. Everything is working. Our menu works. This button right here doesn't make sense. It's not even doing anything. So I'm going to just remove that. I don't need that button. So I'm going to remove the import as well. And I guess I will keep this as it is. But here's the thing, guys. When you are creating your own component, you can also customize it. You can do more things. But I want to cover styling in a second. But this is how you start. You're going to start from there. This menu, you can also get it from the MUI docs. Here you can search it. And if you look for menu, you will have access to all this code that you can just copy and paste it. But in any case, you can take any approach you want. Right there. So we have our menu. This label does work. We don't need that. All right. Fantastic. So our menu is there. And then the last component that we have there is the alert. So again, we're going to start here. And we're going to create this new folder under components. Same thing again. It's becoming a little bit repetitive. All right. So alert. We have index.js. Then alert.jsx. And alert.stories.jsx. So alert.stories.jsx. Again, we have a story here ready for us to copy and paste it. And if we look at our storybook, our alert should be showing up right there. Look how cool is this. We can change the severity to info, to warning, to success. And this is pretty cool. Anyways, this alert is not reusable. It's a story. It's just a story. We cannot use it in our app. So let's make it reusable. So again, the index, we're going to index our alert. And then we're going to copy the avatar.jsx on the alert.jsx. So we use it as a template. And then we can just get the return from the template inside alert.stories.jsx and paste it on the return. These arcs right here, we don't need them, as we also did before. So we need to add it as part of props. And we're going to start cleaning the things here. Action. Avatar is not avatar. This is alert, right? We need to change that too. And alert is going to conflict with alert in a second, but we're going to import the rest of things from a storybook. So in stories, we have all these imports and we can just paste those at the very top. And this letter, we don't need it. And I think that, okay, yeah, there is a conflict with alert. So let's do MUI alert instead. So there is no conflict with our component. And this icon right here, I'm going to remove it because the alert by default provides you an icon. I believe. Well, we haven't injected the component yet, but I'm going to delete some stuff. So we have the alert right there under the stories. We need to import a new alert. We're going to remove all of this code that we don't need. So import alert from alert. And on the template, we're going to just do the structuring with the arcs. And we're going to remove all these icons. We don't need that. And the thing is, we don't need the icon. You can add any icons you want. But on the alert component, if you change the different severity, you see how the icon changes already. So information has this icon. So they are coming for free. So you don't need to change that. Then you have the title. This is an error. And the title is not working. This is fantastic. Why is not working? Oh, look at that. This is how to code it here. It's terrible. So we need to add that. So in the title, that's why we're making this reusable, right, guys? We're making this extensible so that people can use it. And then we can add some sort of description to our alert component. So we have the title. We have the description. And then we can add here the arcs, the description. This is a very bad error. Let's see. Oh, I forgot to add the comma right there, I think. Oh, there's something going on. What else is going on here? Okay, I had to do a refresh and it worked. But as you can tell, now we're making this extensible. We have the description. We have the title. And we can change things over here as well. The different severity props. This icon, we're not using it. So we can remove that from our archetypes. So it doesn't show there. And for some reason, this happens. Oh, this icon right here in the arcs, we need to remove that, too. Fantastic. And this action, you can also have it. I mean, I'm going to keep it. Anyways, I think the last bit is having these components under material UI, I think we should move them to library instead. So on the title, we will be changing that on the alert. And also on the, I think, the menu, we haven't done that yet. So on the menu, we can just change that. And I think that's pretty much it, guys. So we already added these three components. Look how quickly we did it. They are extensible to be reused. Let's say we are in our app, right? And we have already this. So how easy it is to import our alert. It's super easy. So we will do is import alert from components alert, right? And you can get from a storybook already on the docs, the code, right? You can just copy this. I mean, you probably want to make this configurable, depending, but I'm just showcasing the capabilities of having the structure this way on your component system, right? I'm having a hard time here too. So we see the error here. There's something going on right there. I don't know what's going on. Something is grown. This is a very interesting error. Hello. There is something going on with this component. I don't know if something happened, but something is being... Oh, here you go. So our app is injecting some properties that we don't need. Okay. Now it's working fine. We need to be careful sometimes with those things. But anyways, I just showcased the alert right there. I'm going to keep it as an error. But instead of an error, let's make it an info because we don't have any issues right now. We can just call it like, hello, this is my app. I am making a reusable component application, whatever. Here you go. And then we see it right there. All right, cool. Fantastic. All right, guys. So we added the three components right there. And just FYI, we're almost ending the second section, implementation, and we're going to take a five-minute break once we do it. We haven't done that yet, but we're going to get very, very close. The archetypes controls, I already showed you what they do. And the last bit of this is writing custom styles to our components. That's probably something that you were started to wonder, like how can we do it? All right. So if you look at the docs on MUI, and there is a bunch of things that you can do in terms of styling, you can use plain css, you can use style components, you can use css modules, you could use Tailwind, and until a year ago, you could use JSX, now called TSX. Look, I'm a big fan of JSX, and I use it a lot, but yeah, it's sad that they're moving away from it. In any ways, I have to say that MUI now, the latest version is coming with emotion. So you already have emotion there. If you are a big fan of style components, you need to install the style components on your own. So if you look at here, you have the steps into how to install it. You have to install the library as well. That's FYI, all right? But emotion comes for free. And look, you may want to stick with css, but let me tell you what. If you use that, you're not going to get the full capabilities of MUI. All the theme stuff that we already created, that is the foundation of what is coming next. The capabilities that we're going to see now, you cannot really get it with plain css. So you may want to start setting your game to the next level, all right? And here, I'm going to be talking about emotion. I'm going to do this in emotion because that's how MUI works. Emotion is pretty similar as style components, by the way. I'm going to talk about this style and the SX prop, right? Styled is the engine behind this styling. The styles that we're going to add to the component now that is going to inject the theme to our components is using this function, the style, okay? And we're going to cover that in a second. It's pretty simple. Don't get scared. And one thing as well is the SX prop. The SX prop is also like a game changer. I think it is super, super useful, super simple. This is a quick comparison of style components api and using MUI system. So with SX prop, you can specify these props right there and start injecting your theme design tokens from there, right? Without adding all of these configuration, right? I mean, it looks way cleaner. You see the box. We used the box before already, right? So you can have SX and you can add the stuff right there, even move them to a different file. But if you see that, you see the color text secondary, those are like the design tokens that we added already under our theme, right? So this is how you will do it, right? Primary domain, secondary dark, and you can add more as you want to, all right? Which is super, super useful. Anyways, we're going to write just a very simple custom style so you see how it works. So under our button, this button css, we don't use it anymore, so we can just remove it. And we're going to add a new file called button styles. JS. The reason why I call it button styles is instead of styles is the same idea as I mentioned before. If your component library starts growing and it has like 30 components, but if you have 30 components, I've seen that, you're going to get like any time that you try to find a file, you will get like all these styles showing up when you try to find it. So it's harder to find those stuff. If you have the name of the component and the styles, then it's way simpler to find stuff, right? Like let's say I want to change, I want to find button configuration, so I just type button and then I get the styles, the logic, and the stories right away, right? It's way easier to discover things by following this approach. So how this works, I don't know if you guys are familiar with JSX. By the way, my Lynch is complaining. I'm going to just add this rule. This is not something that you want to do. You probably want to make a configuration for that. We're not going to cover this in this workshop, but just for the sake of looking better than just having those things right there, I'm going to just add this line on top, all right? So I added that, those styles. We're going to cover that in a second. This route is the name of the styles that I will be using. I like to keep my styles outside of the component logic. In that way, my component looks cleaner and is way better for me to do this way because, to be honest, once you keep doing that, it's the same sort of organization model and things become way more cleaner elsewhere, all right? So what we can do here is we can import styles from button styles, right? And then what we can do now is our button, we can just set the styles right there. So we use the SXProp, all right? The SXProp, we're going to use it, and now we'll say styles.route. I call it route because that's sort of like a consistent pattern I use, right? In any component, you have a route level, right? So if you use that approach, you can use it elsewhere. So that's the route. So if you look at our react app, okay, it can resolve our css. We need to remove that import. This is the button. You probably didn't notice much, but this PXProp right there is setting the padding on the horizontal level. This is horizontal. X goes for horizontal. Y goes for vertical. So if I change the X to Y, it's PY. P, I don't know if you noticed it, I mentioned that before, P is padding, right? P stands for padding. And you probably ask again, well, you didn't ask before, but three is not three, it's 24, right? I mentioned that before. And the reason being, and I'm going to explain this now, a material uses the material foundation, material UI uses the material foundation, and that uses this baseline grid. This baseline grid means that everything is aligned to eight point square baseline, all right? This is a way for us to specify some sort of rules across our frontend applications, right? If we use this baseline grid, things become better if we use that rule elsewhere. And what I mean using this rule elsewhere means that if you have certain paddings between elements, you need to keep this rule of eight pixels, or a multiplier of eight pixels away. So this is an example right here. This element is 12 pixels, but that's grown, right? Because it should be 16, right? For certain things, you don't care, but for other things, you want to do eight, or you can even do four. That's also okay, all right? But this is the four, sorry, this is not grown. By default, we have the eight, and there is also the four point grid. In order to use the four point grid, I think you can make a configuration on your theme, but we're not going to use the four, we're going to use the eight. But on this four, you could see like, this is a multiplier, 12 is a multiplier of three, right? Four multiplied by three, you will get the 12. In this case, we'll be using the eight. I don't know if you noticed, this fat component on the right side, you see these two little grid items, this is 16. So in order to specify that, with this rule, it will be two, right? Maybe at the beginning, it seems hard to follow, but once you do it, it becomes pretty consistent model. And let me tell you, it helps a lot in order to create things that look good. It's a very nice pattern. Anyways, we look at our button, this button looks terrible. Let's make it X, as it was before. And now we have 24 pixels each side. You can also see it on devtools. You see on the computed, you see the padding 24 on the left, 24 on the right, eight on the top, eight on the bottom, all right? We changed the text to capitalize instead of uppercase. We added some letter spacing and the font weight change. If you are used to CSX, this is different, right? We're using a camel case for any single property. And as I mentioned, because we're using SX, we have other things that we can use to make things more simple. P for padding, M for margin, and you can also get more stuff than that, but those are like the pretty basics. All right, guys, so we did that. And again, if you want to add more styles, you can just add new properties on this object and then inject those on your components, right? Sorry, here, right? So you will be using SXprop. It's a pretty simple example, but I think you can get how this styling works from a very high level. I have here an exercise that we don't need to do it now, but the idea is to change the background color using the SXprop. Pretty, pretty simple. I think you can do it in a second. But anyways, now we are at the very end of section two. All right, now we're going to take a five-minute break. The most exciting sections are coming. One is implementation three, which we're going to cover next, which is adding a more complex component. And we will be doing more stuff like adding some dark modes to our application as well as leveling this up. I was reading the thread about what Sebastian mentioned and Ernesto talking about the performance issue. And yeah, you guys are right. SX is not as performant as you can tell by using a basic class name. But what we're rendering here, you're talking about thousands of style primitives, right? I mean, it's pretty large, but I totally agree. I mean, SX is pretty useful if you want to do things quickly, but it is a disperformance trade-off, I have to say. This is something that actually is news to me. So thank you guys for sharing this because we are still using JSX, the previous version of MUI in most of our projects. And at some point, we need to actually evolve to the new version of MUI. And moving JSX to TSX for us probably is going to be what we will be doing. I think TSX is supposed to be an evolution of that, but we will need to take a look into it. JSX was pretty performant for static styles. I think for the dynamic styles, emotion is better, but SXProp is something pretty new. It's something that started with version 5 and it comes for free and it seems super useful for certain things in terms of like typing things faster and doing things faster and looking a little bit cleaner. But yeah, this performance trade-off is there, so FYI about it. You can also keep using class names instead, or whatever engine you're using. As I mentioned before, there are few engines that you can use for styling with MUI and you can find it on the docs. Anyways, I'm going to move forward with the next section. If you guys got stuck or you just got here, you can get ready for the next section by downloading the code and then making the installation on your own and starting both the app and the storybook instance. And you can find that as well on the first page of the workshop. Anyways, we continue. The workshop is already in Discord. I have the link right there and I think also it's in the chat and Zoom, so you have it there. But I'm going to expedite things a little bit because we have a little bit less than 45 minutes and we need to cover a couple of sections. So the first one is... I'm going to delete some... I'm going to remove some of these tabs so it's a little bit cleaner and we're going to add a more complex component. This is a card component and as we did with the alert and the avatar, we're going to do exactly the same because we're getting a lot of things here for free. As I mentioned, this is also part of the MUI docs and you can find them there. This component is pretty interesting and you're going to see it in a second. So as we did already before with the few components, we're going to add a new folder called cart. And then under cart, we're going to add three new files, index.js, cart.jsx to make it reusable in a second, and cart.stories.jsx. We're going to paste that in and our cart should be showing in our storybook. Right there. Okay, we have it there. It's pretty cool, right? We have the content, the variants. We can elevate the cart. We can set the footer. There is an image that we can also change that as we want to and remove the header. All right. So this component is there. We just copy and pasted it, but it's not part of our reusable component library. It's just showing up in a storybook. So as we did before with the avatar and the alert, I'm going to use the avatar as the template to index the file as well as the log because it's very simple and I have it there. So the stories on their template, I can just copy the entire html and replace the return and change the names because it's not an avatar anymore. It's a cart. And I will be also, these arcs are actually props, right? So we are going to set them as props. All right. And then this arcs header, we're going to add it there as well as the image, the content, the footer, and that's it. Now we need to remove that arcs key. All right. And these are some imports that we're going to get in a second. So you look at the cart stories, they have all the different imports on the very top and we can just paste them in. And the cart, we need to rename that because it's conflicting with our new component. Here you go. So we created our component and now we need to inject that onto our story. All right. So import cart from cart. And we can just remove all of this logic. And that's it. Here you go. So we got our cart right there. Fantastic. So ideally, and this is an exercise that if we will have had time, we'll have done that together, we can extend this cart to also use our menu, which is here, right? Ideally, you want to also make that sort of a reusable extensible property so you can inject that from the outside. At the end, you want to make your component as much as reusable as you can, right? But I leave it up to you in order to do it. All right. So we added this component. Cart is injected. We're going to add it as part of our library that we have in a storybook. So this is going to complain for a second, but it's there. Right. We got our cart. Great. So we have our cart. We made this component right there. This is the last component that we're adding. Now we're going to do a few things here. All right. We're going to make components responsive. This is pretty cool. This is very cool. So MUI allow us to make responsive behavior in our fonts from our theme. All right. As you can tell here, there is a snippet that you can start using with rems. But there is also this function called responsive font sizes. And look how cool this is because if you look, for example, our typography and check how this is looking in different sizes, right? In mobile or a small mobile or the tablet is not really responsive, right? But if we go to our theme and import these responsive font sizes, we can pretty much call our theme. Call our theme. So inside responsive font sizes, we want to add our theme. And then all of a sudden becomes all of them responsive. Look, I just did that, right? I just added this function and all our typography inputs are already responsive. This is pretty cool because you don't even need to think about doing much stuff. You're getting all of this for free, right? Now, if you want to make things more customized and particular to different pages, you can also use the styling engine to add that, all right? But this, I think, is pretty useful. And you can use it right away. So you can add some sort of responsiveness to your app from the very beginning, all right? So the cart, we look at our cart right now in a small mobile and large mobile is already responsive, right? It's pretty cool, right? Very nice. So I'm going to show you the breakpoints as well because this is pretty important. So the way that you make configurations on your breakpoints using Material UI, you need to know that there are six different properties and these are like the default breakpoints that Material UI uses. One is zero, 600, which is a small, medium 900, large 1200, and Excel is 1536, right? All of this, you can also customize them as you want, right? If you click here, so under theme, you can set your breakpoints, right? And set them up as you want to, right? If you don't do it, the ones that will come here by default will be the ones that you'll see it, all right? But let's say like our small version will be 400, so I do it here. If I don't set anything, I will just grab the default properties, all right? But this is pretty useful because I can also make, you know, like all the different breakpoints just in one file. So it's everything consistent and we can use it across, right? And our cart is responsive and that's fantastic. One thing I have to say is, if I would have had time, I would have shown you like how to, you can actually inject those from a responsive way. But since we don't have a lot of time, I cannot do it. But I have here D-Docs. So D-Docs allows you to actually find all the information you need. Like here, we're injecting from the typography H3, right? So you can do it this way or this way, which is even better, right? Instead of our coding, you will just use the theme. So you could do theme.breakpoints.app.md. Just for the sake of you can see it right now, I can do it very quickly with you. So what I can do is I can just grab that on the root and paste it here. And theme is complaining. The way that you inject the theme is by making this, this is also returning a function. So you can do this. And let's say like our font size, just to see working, let's double check. So our bottom font size, 2, 4 rem. Oh, it's app.md. So MD, I think it was 900. This is how you actually want to make media queries into your components using the styling engine. All right? Pretty cool. You can also take a different approach. Instead of doing that from the styling side, you can also do it from the component side. And that is what we're going to cover in a second. So we're going to add a hook called use media query hook. All right? And just one second. So this use media query hook is a snippet that you can just drag and drop it to your project. You probably know what hooks are. But hooks are super useful because these are like reusable business logic that you can reuse elsewhere on your components. Pretty cool. So under SRC, we're going to create a new folder called hooks. And we're going to add two files. One of them is index.js. And another one is use media query jx. All right? And then we will add the index.js as well as this use media query jx. And the reason being is if you start adding more hooks, you can inject them on the index. So you can just do in the import, open curly braces and name of your hook. Super simple. Anyways, we added this hook. It provides three different properties that pretty much extends our material use media query, right? So it's more specific. If it's a mobile screen or a tablet screen or desktop screen, you can reuse this in your project if you find it useful. I think I find it very useful. So for example, in our cart, right, since this is a more complex component, we can import our use media query from hooks, right? And this use media query comes with different properties, right? The first property, I think it was like his mobile screen. Yeah. So this is another way to know if it's a mobile screen or not. So let's say, like, if we look at our storybook, right, which for some reason is now complaining, okay, now it's not complaining. If we look at our storybook and we say that, you know, if his mobile screen not render the header, right, you can also see that working, right? Look at that. So in his small mobile, it's not working as soon as his large mobile works because that's not how we set it up our mobile screen. If we change now, right, like our, well, our hook is pointing to SM. So if we change in our theme, the SM version instead of 400 is 600, then we won't see the header, right? Because this is 414. So it's smaller than 600, right? In any case, I think you now have, like, a very good idea into, like, how you can use media queries inside your logic and also in your styling files. But yeah, if you guys have any questions, feel free to ask me. I will recommend you to ask in Discord because that will be the only place that I will be addressing questions. As soon as we close the call, you know, I won't be able to see anything. Anyways, here we are. We already added some responsiveness to our website, as well as we did some media queries. And now things are going to become very, very, very, very exciting. So the first thing is we're going to do, like, some dark mode capabilities. And first things first, let me tell you just a little bit about what this dark mode is. So if you look at our theme, under theme, right, there is this palette right there, right? So one thing you need to know is that if you look at the MUI docs, there is a section called dark mode. And as you can see, there is there is the mode colon dark that you can specify dark and it will by default start changing things for you. So we're going to create two different themes, one light, one dark. So what we can do now, instead of exporting by default this one, we can create a new const called light mode. Sorry, light theme. Let's call it light theme because it's a theme now. Light theme. And we're going to duplicate this. And down there we're going to have our dark theme. And just to start, we're going to just add this new prop called mode dark. That's it, right? Right now things are breaking because we had default before. Now we don't have any default themes. So we need to change our main JX, sorry, our preview JX. And instead of theme, let's just use the dark theme from now. For now, we are going to use the dark theme. And look at that. As soon as we added the dark theme, our component that was white before now is dark. It's just in the background and it already does transformation for you, right? That's super cool. We also need to do the same in our app, all right? So in our app, we have the index JS and this theme is no longer there. So we're going to just set the dark theme. And in our app right now, I think we don't have anything to see yet. Well, the alert is changing the color, which is cool. But we will be seeing more. Fantastic. So here we are. We added the dark theme, but it would be nice to switch between the two, right? That would be pretty cool. So I added this snippet for you. This has like a context util that you can also use in your projects. I find it very useful. So this uses the context api. So I don't know if you're familiar with the context api. I wish I had time to explain you what it does, but at the end of the day, what we are doing is adding some high level sort of providers that allow us to do certain things into our app, right? Like for example, if we want to change our light mode to dark mode, right? This is how we will do it at the very highest level of our app. So under SRC, we're going to create a new folder called context, right? Context. And inside context, we're going to have a few files as you see on the snippets. First one is index.js. We can just copy and paste everything, all right? And then we are going to add mode context.jsx and copy and paste the whole thing as well. And then, and then we're going to do something in the preview, but I'm going to stop here for a second just to show you what's going on. So the mode context, right? We have, we're importing the light theme, the dark theme, and it is also dark mode and light mode that we, two constants that we haven't specified yet. We will be doing that in a second. But this mode context is exposing two different functions. One is set mode and another one is total mode, all right? These are right now being memoized on our provider, which means that this is not being re-run all the time when the app changes, right? And then we also have the theme that when our mode changes to light mode, we will be exposing our light theme. Otherwise, we will be exposing our dark theme, all right? So this is the highest level of our app that we will be taking care of, of pretty much switching both themes, all right? So under theme, we just need to add two new constants. One of them is dark mode and another one is light mode. So we go there. Let's go there. So it's under theme. We will export const dark mode and that's equal to dark and light mode. That is equals to, oh, to light. Right? So dark mode. So dark mode, we can also use it here so we can clean this string so it's not hard-coded. Fantastic. So now this is clean and ready to go. And coming back to our mode context, this now is imported well. But I don't know if you notice it, but we are importing the theme provider here. So if we look at our app right now, on the index.js, right, we're importing the theme provider. We don't need to import the theme provider anymore. We will be importing this new provider, all right? And we're going to go there in a second. But before going there, I'm also showing you this index.js, which is exposing a few things. One is it is exposing the context and the provider, all right? But the two things that I want you to get from this is just this new hook, which is a context hook that we will be using to switch our themes, right? And then the provider that we will be injecting in the highest level of our app, right? That's it. So now on the preview. And the preview in our storybook, all right? We need to add a few things. Let's go one by one. So the first things first, the very top, the first five lines, let's copy that and paste it after. Well, actually this theme, we can remove that. And we can also remove the theme provider on the top, right? This goes straight there. Fantastic. We added there all of this, and we also want to add these parameters after the controls, all right? We're going to add that. And then things are going to become interesting now. So because we're using the theme provider, we need to use our new provider, which is the mode provider. In order to do that, we need to add a new story provider right there. So we can copy this. We can actually copy the whole thing, guys, and replace the last bit. And just to explain to you what it does, our decorators now is using our mode provider. Our mode provider is what we define in our context. And then we have this story provider, which will allow us to switch between the different modes. Now we need to actually restart the storybook to see this in action, all right? So let's restart the storybook. All right, fantastic. So if we want to change now to dark mode, look how simple it is. If you click on this icon right here and then you click on dark, then you will see the dark mode version. If you click on light, you will see the light version. So what we did right now, guys, by just importing few logic into our files, is to be able to switch between these two modes from a single application. That is super cool, right? As you can tell, now our storybook is working, but not our app. And I wish I have the time to show you that, but I will leave it up to you how to do it. I think you already have the information that you need to do that. I will recommend you to look at this file right here and also use the use mode context, which is the hook that we created to change the mode from anywhere in our app, all right? And yeah, that's pretty much it, guys. If you download the code, you also have access to this code that I was mentioning that will allow you to switch teams from the app itself, all right? And now we're getting to the last section. Things are going to get very excited now. So when you create your component system, it's useful to have it locally, but ideally, you can expose this so other teams, other team members can find it, right? Especially non-developers. So the easiest and fastest way that you can do it is the one that I'm about to show you. So we're going to do a JAR build storybook. You can also do npm run build storybook. And once you do it, a new folder will be created, all right? We're going to see that in a second. This new folder is called a storybook static, all right? You can also change that. If you want to change the folder, you go to package JSON and under build a storybook, what you need to do is add dash O, which goes for output, and then the name of your folder. So you can call it dist or however you want, all right? But what this is doing is building a storybook from from public as well, right? If there are things in public, they will be there. Okay, so we just built a storybook. So now, if you look at your files, there is a new folder called a storybook static. This is pretty much like a static file. Even if you open the index html, you have access to a storybook, right? With the things that we did right now. In order to deploy it, you can use Netlify drop. I would recommend you to actually create your account in Netlify because this is free, guys. If you don't log in when you are deploying, your site, I think, is going to be live for a few hours only. But if you create an account and it's free, I think it's forever. So this is something that I would recommend you to take a look because it's useful. So you can upload it and you can also even change the domain name, which is pretty cool, too. Have you guys used Netlify before? No one answers. Oh, yeah, Gabriel, that's cool. That's awesome. All right. We've got a 500. Look at that. Sorry. I think I'm doing it wrong, right? I am not exporting. I know it's important what I should be exporting. Sorry, guys. Give me one second. I need to export a storybook static. I don't know what I was exporting, guys. Sorry about that. It shouldn't take long, though. So, yeah, here you go. Your site is live and we have our storybook deployed there. And all the different versions of our components, even our dark mode that we added is there. So anyone can come here and use the latest and greatest, all right? Ideally, you have some CDCI integration in your GitHub so it deploys automatically to whoever instance you want. You can also use github actions for that, right? So this is just the quickest way to have your site out there, all right? Anyways, you can also, and this is the most exciting part, what I'm about to show you. So right now, Anima is making a new plugin. I don't know if you know Anima, but Anima app you can, this is a prototyping tool that allows you to get code straight from design assets, right? It's a pretty cool app, but I think what they're trying to do now, which is pretty new because this is in beta, this is not available for everyone yet. So what you're going to see now is pretty, pretty new, all right? You don't even have access to it yet. You need to request access, but it will be live soon. So keep an eye on this. So what we're going to do is we're going to add this new add-on and you have this snippet here. The thing is, at this point, I don't think you will be able to see what I'm about to see because you don't have access. So right now, what I recommend you to do is see what I'm doing because it's the only way that you will see it until it gets live, all right? And I think that will be pretty soon. So that's why you have access to the code once this is live, all right? So I installed storybook Anima and now I need to register the add-on on my storybook, all right? I'm going to add that add-on right there as we did with accessibility, all right? And then I need to set the Anima access token. Let me show you what I'm about to do. So I am showing like a new frame in Figma. I don't know if you guys know Figma. It's probably the most useful tool right now for designers to build any designs. So this is also something that you can open if you want to. But in Figma, when you create a new frame, it looks like this, right? And you can add stuff, right, on the Figma file. This is the empty project. So what I'm about to do is showcase this plugin called Anima, all right? If I run it, I have access to a storybook, but you don't have yet, okay? That's FYI, all right? I have some sync project. I'm going to forget that because I'm going to start from zero with you. So, okay, so as I mentioned, this is in beta, guys. You don't have access yet. You can request access. This will be live soon. But what I'm about to show you is this pretty cool feature, which allows us to import our components from a storybook to Figma, which is getting the latest and greatest from our storybook. And they are transitioning that into a design asset. So if you look at the docs, we need to add also a new file called .m, all right? And paste this storybook token, all right? We need to paste this token that I'm using, all right? And now we can sync all your components, but let me show you now. Now I have already installed Anima. I just need to restart our storybook server, all right? So you probably noticed that there is a new add-on right here. That's the Anima add-on, all right? So if we go to our button and click there, this is the Story got synced successfully. So we'll open our Figma, and I just need to add this URL right here. A font is missing. Anyways, I'm going to start generating the component. Okay, I'm generating now the component from storybook, all right? This is not the one. Okay, here you go. Here you go. So as you know, it's in beta, so things are like not working 100% right, but it will be there. So let me generate all the components, all right? Things are being generated, all right? I think we already have some stuff. We already have some stuff. Look at that, guys. So our button now is here in Figma, right? These are like the usable elements for designers to use right away, and they're coming straight from our storybook instance, right? Like what we just configure in storybook is here with all the different variants, so you can pretty much come here and start reusing those on your application, right? So you go here in Assets, you can look for button, for example, that we created. This one is showing red. I think like there is something going on probably. Oh, yeah, here you go. So these properties right here are the properties that we had in storybook. I'm going to put this side by side so you can see that. So this is a one-to-one match, but now we have the single source of truth in storybook. Now the designers, instead of creating a new library of components, they can just add it from our storybook library, right? And if you see here these colors, we can change those to Primary, Secondary, Success, Warning, right? As we did here too, right? Secondary. Oh, we have an error there. All right, guys, there is an error there. And Defining Reading Dark, whatever. Now it's not there, but I think something is wrong with our logic. We will need to fix that. But anyways, we have access to the different props, Medium, Small. By the way, this is not working right now, but this should be working. The disabled version as well. So we have access to all of the components that we created now, like the avatar as well, right? Straight from storybook. And the coolest thing about this, and this is something that is being developed, is at the end of the day, the goal is for all of these components to be useful as a prototype frame, right? If you go to Anima, you can actually preview this. And look at this. And preview it, which in a second should be showing up. Forgive me, guys, because I'm showing you something that is in beta. So it's not that stable. But hopefully we're going to see it now. This is taking longer than it should. This is not normal. When this happens, hmm, something is going on. But in any case, what I was about to show you, and this works. This has worked for me. Now it's working. Look at that. Now we have access to our production element. Look at that. We already have the ripple. So what we created on our storybook as a production component now is accessible for any designer, even you, to put together a prototype pretty quickly, drag and drop components, and create your own prototypes straight from your components in a storybook. That is super, super game changer. And that is what I mean by innovation. If you guys want to innovate, you want to start thinking about what is the fastest way to create something that you can put in front of users, right? And the closest to the product, that is, at the end, the best feedback that you can get from any single user. So if you can create this component library that we just did in less than three hours, and then start putting together prototypes by dragging and dropping your own components into Figma and put this in front of users, at the end of the day, you are innovating. So that's why this is called Innovate with react, because we're not innovating from a design tool, which is the usual process. We're innovating from the development side, which is now super, super new. And as I mentioned, guys, there are a few companies right now trying to do this. One of them is Anima. But if you look at no-code tools, it's a very similar concept. No-code tools are going to help us actually spend less time into building things, which we love doing, right? But we can also go a step above than that, which is innovating. All right, guys, this is pretty much it. We almost ran out of time. I showed you this last section of prototyping with your production components, because this is something super, super new. Until now in Figma, even if you try, there is no way that you can use input fields, right? But this is going to be a thing happening pretty soon, which is super exciting. Anyways, guys, I hope you enjoyed. It was great sharing with you all of this. I hope you like it. Thank you so much. Have a wonderful day, and I hope to see you soon, guys. Bye-bye.