Storybook 7 Crash Course - React Typescript

hey how's it going in this video we're going to briefly talk about storybook they recently released version 7 which has a lot of awesome features in it and I just want to walk you through how to set set up storybook for you know our react application for example it does work for other Frameworks it's pretty agnostic so you can see in the documentation it supports view angular even some stuff like Embers felt and some of these newer ones like quick by the way if you don't already know what Storybook is and what what it's used for at a super high level think of it as like a way to develop components in isolation so instead of you having a you know let's say you have a running application and you want to add a new widget in there right usually you might have to create the page in the route and then within that page you gotta set up some layouts and then eventually you start having a space where you start building out your new widget right and then within that widget it might have sub components storybook allows you to do somewhat of the inverse approach where you just start on your widget in pure isolation you don't need a page you don't need a running application you just write stories which are representations of your component so your component might have different variations you know visually or in terms of behavior and storybook allows you to develop those again in isolation and also kind of helps you create documentation for all of your components so imagine you're trying to create maybe a component Library a design system storybook is very useful for those use cases all right so let's go ahead and get storybook set up but before we can do that we actually need to set up an existing project that storybook would sort of latch onto so you can see in their documentation that you know the storybook initializer itself is actually designed to run off of existing projects so what we'll actually do is we'll create a let's pick Veet Veet is a great way to build modern react application nowadays so we'll do npm create beat at latest so on my desktop over here I'll do exactly that npm create the at latest I'm using node 18. let's provide a project name I'll just call this storybook demo and we'll do react with typescript and there we go let's open this in vs code all right so we got the code open here there's a lot of red squigglies I think because we need to First actually install the dependencies so do impairments on the terminal if you're trying to follow along all right so with our application created what we're going to do is is we're going to run this command npx storybook at latest init which is basically what it's going to do is it's going to take a look at your project and figure out what type of project is this and it'll automatically set up storybook for you for the most part so you can see here that it detects the project type it knows we're using V so it also sets up storybook to use Veet I believe if you're using like webpack for example with create rack tap I think it's also going to run on webpack and then it also sees that we're using react so it adds whatever necessary plugin that you need to use storybook with react and then it might ask you to install a couple other optional things like for example here it's asking me to perhaps we want to use the eslint plugin I'll hit yes for that as well and there is a little note here about uh storybook migration if you started from V6 or maybe you you watched my older storybook video and you want to upgrade that to V7 they do have this tool that you just run npx storybook Auto migrate and it'll just figure out what code needs to change and what things need to be installed and it'll do everything for you automatically and it's a very very good experience from from my experience right and you can see here that it says we just need to run npm run storybook so that means it added a npm script for us in package.json let's go ahead and run that and you can see that by default it's running on localhost 6006 and it'll come with a couple initial examples that will actually maybe play around with all right so if you've never used storybook before let's quickly walk through the UI just so you know where things are obviously at the top there's a search bar so you can find things easily so you know based on the name of the component for example or the name of the store itself and then below that you'll see that you have you know this navigation for the individual stories that you have you might have some kind of grouping element here so for example you see all these stories are under button and I'll show you how to do this kind of different organizations how you can Nest things if you wanted to but typically what happens is you'll have for example here a set of stories per component that you have so for example here they have button and they're showing the different variants of this button where they might have primary secondary large and small and then and then there's this thing called docs that's actually very useful you can see that it kind of groups together all of the individual stories that you have into one Doc Page so you can actually see you know as I scroll through this it shows you all those stories it shows you a way to view the code so that it works as a documentation for hey I want to get this variant of the component I want to use this there's some code there that you can copy and it also documents the props and you can even play around with these props dynamically right so if you wanted to kind of test how it looks with different text for example or maybe different colors right and this is assuming that your component has this API to change the looking Behavior this is just documenting basically what you have and same thing maybe you want to add descriptions to the prop API that you have again the documentation capabilities of a storybook it's just very very useful now within each individual story you also have stuff here that allows you to zoom in and out and then over here you have tools like being able to change the background color you can add custom background colors and I find this extremely useful for scenarios where uh perhaps I'm developing a you know a white box and I just want to see how that looks in different backgrounds like a dark background right so for example I might just do something like that and their support for adding grids which is really useful for you know understanding the scale and the size of things you can simulate the different layouts for example maybe you have mobile tablet right different viewports you can customize it up here this one is actually really useful it's like a ruler that allows you to measure the the different spacing and padding and margins and stuff that you have in your text so for example here you can kind of see you know that that there's 20 pixel padding left and right and like roughly 11 top and bottom right so here's another example of that with the header component example that they have and then they have this outlining thing that allows you to sort of show boxes around the the component boundaries that you have which is also very very useful so you can see you know each of these boxes might be individual divs or some kind of wrapping element now moving on to this bottom panel here that you can see in individual stories there's usually this controls thing which is very similar to what we saw in docs where you can kind of play around with the dynamic things that's coming into your component like the props and then there could be actions so for example if you want to track events and stuff you can see here that they have actions attached to the click event and in the third tab here interactions is for interaction testing it's actually something that just recently came out I believe with V7 you can now do interaction testing it's it's very similar to like unit testing except you're able to do it on a real browser visually I believe there is an example here with logged in a very simple example but if you had more uh assertions here you can actually step through your individual assertions so this is a great way to again test your different interactions for your component all right so that's the UI in a nutshell there's a bunch of other things in here but that's really most of the ones that you need to think about let's go back to the code and show you how to write these stories all right so back in vs code uh let's talk about some of the files that you need to care about so first of all you should expect to see a DOT storybook directory and that's going to have a lot of your storybook configuration so for example main.ts here but you can see that it documents and configures how to look for stories for example here it's looking for any file that has that stories in the file name within SRC again we're not going to touch this file too much in this video but it's important to know where this file is so that if you need to reconfigure or change things you know where to go so let's quickly talk about what we're going to try to build you know maybe something really simple that just showcases how to use storybook and why it might be useful so imagine that perhaps we're trying to build like a traffic light component you know like imagine a traffic light has uh different three different lights you know the red green yellow alright so let's create a new component uh let's call it uh let's start with maybe the individual lights right so we know that that has three different states let's just call it light.tsx right and let's initialize that to be an empty react component and then immediately I'm going to add a new file as well that is the story representation of this component so let's do light that's stories that TSX and remember in our main.ts config it's looking for that configuration right so that's why the naming convention is like that all right so first thing we're going to do in our story file we're going to import The Meta and the story object type from storybook itself next we'll import the light component itself and then at the top of every story file like this there's usually some meta configuration at the top that's why we have this type meta so we'll do const meta and it's going to have type meta of the type of of our component right so it accepts a generic there and then make sure to export default The Meta as well and then one of the things that you need to provide here is the component itself so we'll provide light let's provide a title so we'll do I mean let's just call it light and that's usually the bare minimum that you need you can there are other things that you can configure uh that I'll maybe talk about in this video but once you have that initial meta of what is the component that we're writing stories for and what is the title you can add the type for each individual story and then you can then start creating stories so for example let's do a a base story here and then usually you want to provide an args object in here which is actually going to be the props that feed into your component but first let's run storybook and see just you know what this initial configuration is providing for us by the way something extremely important is make sure that you export every story that you write otherwise storybook will not be able to find it so if you're wondering why your stories aren't showing up it needs to have at least one exported story for it to actually show up in storybook so back in store book we should be able to see a new grouping here of light and it has base for our initial story so if you click on that you should just see this thing that just says light because that's all our component is doing as of right now all right so at this point we have our initial story set up we've got our components set up now we can actually start developing with storybook again you don't need a running application we can kind of just make our changes here and you should see your changes reflected in the story right so Our intention is to again create some kind of traffic like component so let's go ahead and start building that so for example maybe let's start with a you know a green circle to represent a a green light all right so maybe let's start with uh adding 20 pixel padding let's do a background of green for the radius of 50 at width and then we don't actually need some text in there so we can probably get rid of that and a height of 20 right so now we got a green circle and using the tools over here I can verify that the sizing that I used is you know as expected right like maybe you're comparing with a figma design file it's saying that the content box the blue box in the inside of it is a 20 by 20 bucks as we dock as we as we coded here and then it's got 20 pixel padding around it right so you know in reality we could probably just simplify this to you know let's just do 50 50. no padding right because there's really nothing in there so we've got a green Circle pretty simple so we're talking about building a traffic light so this component has effectively three different states because it has three different variants so in our prop let's do variant and let's say that we have green yellow or red structure that and let's say it's initially by default a green variant let's just provide that as a value over here right now it's the same but imagine that okay I want to test the different variants of this component I want to test the yellow and red how do we do that well in this story we could pass in a an args here and it's going to feed that as props to our component so for example we can do variant red and you can see that it has some intellisense here so it's working off of the the typescript type of our component and it'll know if you're passing in a correct type so for example if I add like non-existing type here it's gonna tell me hey that's incorrect anyways now we've got a red dot here right but the better thing to do is to probably just create a new story for that variant so let's copy this twice let's call one uh yellow red and the bass really can be empty we can say that the variant is optional all right so now we've got three different stories base yellow and red and now it represents those three variants of our component and notice how the yellow is a little bit hard to see against the white background that's why this color switcher thing the background switcher is very useful so now I can put it against a dark background and I can see that yellow a little bit nicer alright so that's pretty much writing stories in a nutshell right it's very simple you just export an object and optionally provide args as basically your props there are other scenarios where perhaps you want to create a custom render so maybe this API doesn't work very well for you you can do something like this so let's do another story and instead of providing the RX object you can provide a render which has the args in it and you can actually just you know render your custom component in here and spread in the args right so that creates another story and if you wanted to you can still provide args in addition to that right so maybe we want to do red see so now we've got the the red light on the on the right here and of course if you wanted to you could just Define the props directly like so and this is very useful for cases where maybe you want to see how your component composes together like let's say if we had a grouping div of some kind so maybe we had a grouped uh green yellow red or I guess red would be at the top right so we're starting to see sort of like a group of Lights becoming a an actual traffic light and let's add a little bit of uh styling here right so maybe we'll put them in a flex container with a border and let's add a little bit of padding right so you're starting to see a sort of a traffic light so this container itself could probably be its own uh component its own story right that composes lights within it but you can kind of see how we're starting to develop a component from the ground up from the individual lights up to the things that composes the those components and then you could build up to the page that would actually contain that all right so we just covered how to do a custom render function what else can we do so something that you'll notice is in the other components like yellow not on base but on yellow the controls here actually has a an input box for the variant here so I can actually change it right here if I wanted to so this is sort of a way that that storybook allows you to play around with the component directly and it figures that out based on the the arcs that you provide so for example if I provide args on our base here let's just do green we should see the same thing with our our base component our base story here now has that control too but the thing that doesn't work super great here is technically uh I can pass in whatever I want in here right it's like for example maybe I passed in pink right now we have a pink light which technically is not supposed to be allowed right because we only have three variants does it support pink so one of the things you can do to improve the the documentation here for your controls is you can add archetypes on The Meta object here archetypes and this is a way for you to further document the the props that you have so for example we have a variant prop and we want to say that the control for this instead of it just being a an input will do we'll say that it's a radio and we can provide options like green yellow and red and actually sorry we had a typo here this is not a Boolean you're supposed to do type radio so now on the right side you should be able to see radio buttons for your different variants right so that's very useful um and you can even use a select if you want and that gives you like a drop down option so that's another thing right and going back to the button remember that we had for example these things right like they have like this Toggler they have an a text area that allows you to provide different text there's check boxes for not really check boxes but I'll Color Picker there's radios there's selects right so there's a different types of controls that you can use to document basically your your component uh prop API right and you'll see that defining the arc types up here updates the configuration for all of your stories so now all of our stories have these controls all right so that's archetypes another thing I want to cover real quick is the ability to add a docs page like this one we had before with the button how do we do that pretty easy on our meta we're just going to add a tags property here and we'll add Auto docs and that's actually something that is configurable again in the main.ts remember there's docs here Auto docs and it says that basically anything that has the auto docs tag any story file that has that will automatically have a docs page you can configure this to be enabled for all of your stories if you're just passing it through here for example right so now we on the right side you'll see that there's a new docs page here which as the name implies it effectively documents our our stories in a single page which is very useful for component libraries Design Systems and again it has those code things it's got the different controls here and our individual stories all in one page and then remember from the buttons example there's a lot more stuff in here right like descriptions and stuff like that a lot of that just comes from comments actually so for example if we go to our lite.tsx in our props type here if we just add to some description and then while we're here let's also add a comment here actually uh some comment about my light component now one gotcha is that this is not gonna automatically show up on your storybook uh for some reason I found that you have to restart a server so I'm actually gonna kill the Starbucks server and rerun and pay and run storybook and then when it runs again you should see in the docs page now it's I now it says some description down here and then also our uh comment for the component itself and then even in the stories himself actually you can add some comments in here like right and again you'll probably need to restart the server let's do that and that's going to add comments in your individual stories right so now you can add custom descriptions as well per story which is very nice so hopefully you're starting to see how this works again not only as a uh a place where you can develop your components in isolation and but also as a way to document your prop API the different variants of your component that's why it's very useful if you're creating a component Library a design system or just in general right think about how many components you create in an application how many of those things are really not documented until you just kind of ran into the code and have to read the code to understand how it works whereas storybook just allows you to have a nice catalog for all of those things a really good example actually is Airbnb has a public storybook out there that you can take a look at I think this is still running on the older version of storybook but you can see how they have like everything pretty much documented on on how it looks they've got uh their their buttons they've got their cards they've got the different interactions here like oh this one's clickable they got toasts right so in a more sophisticated uh example you could have literally a searchable catalog of your entire component set for your application so that's pretty much storybook really the the base fundamentals of it that you need to get started that's really all you need uh the only other thing I didn't really cover is uh changing the title here for different organizations so for example maybe I want light inside this grouping of example here I can just do example like that so then it'll know to group light inside this example directory so it's up to you how you organize that stuff but yeah at a high level that's really most of what you need to get started now there are a couple other things that's worth mentioning uh maybe I'll cover it in another follow-up video let me know in the comments if you're interested but uh the testing section here is super interesting you can add like I mentioned earlier I think you can add visual tests you can do interaction tests I'll probably definitely cover interaction tests in a follow-up video so but it's basically like using uh for example with react you can use a react testing Library to do your assertions so let me show you some code real quick so for example in your story you can actually provide a play function in here and there's a version of testing Library you'll see that's coming from storybook and you can use the same a lot of this it's basically the same syntax if you've ever used react testing Library so for example they have this within function that allows you to hook into the rendered story and then you can run assertions off of that story like like for example maybe you want to find a specific text like maybe a label for an input and then maybe you want to start typing into that input so you can simulate user events and then you can run your assertions of like uh do things show up on the screen do things get removed does it enter some kind of state so very very powerful tool to have in your tool belt in addition to just regular unit testing but again this is running off of a real Dom so that's pretty powerful in my mind and you can run these tests on the terminal as well it just needs to have a running store book server to latch onto to actually run the test so again maybe I'll cover this in a future video and in one lesson thing that I would mention is take a look at the add-ons that you can add there's a bunch coming from the community itself so for example one that I recommend for everybody I think I mentioned earlier is the accessibility add-on and you know you just install that and then it'll tell you for example here on the bottom if you have a potential accessibility violations like maybe there's not enough contrast between your your text color and your background color things like that it'll automatically just check it for you so as an example here you'll just install it and then in that main.ts file that we had earlier you just add it to your add-ons and then it should automatically just show up on one of the tabs at the bottom panel there's one here for a design so for example maybe you have a figma design you can actually add a configuration to your story so that the design shows up side by side with your story so if you want to be able to like see your your working implementation and the design at the bottom that's what this is for there's an add-on for MSW for if you want to have mock API calls so you know maybe you need to work with Dynamic data you can simulate actually making API calls if you need to again there's a bunch of other stuff in here that there's just there's too much to cover in one video but those are probably the two that I highly recommend this or three accessibility designs and MSW anyways that's it for me today if you want to learn more let me know in the comments what you think I should cover but everything that I covered here is honestly most of what you need to to get started so hopefully that helps you out anyways yeah that's it make sure to subscribe if you want to see more leave a comment and also like the video and I'll see you on the next one

Channel: Marius Espejo

Views: 6,741

Keywords: storybook, storybook7, react storybook, reactjs storybook, interaction testing, react testing library, component library, design system, tailwind, tailwindcss, react typescript, typescript

Id: CuGZgYo6-XY

Length: 28min 22sec (1702 seconds)

Published: Tue May 02 2023