React Storybook Crash Course

when it comes to development testing and documenting of components and design systems storybook is the perfect tool and integrates with pretty much any front-end library out there and in this video i'm going to show you specifically how to use storybook with react [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video i'm going to show you how you can integrate storybook into any react project and this is actually the project we're going to be building out in this video and as you can see it's super clean really nice looking which is great about storybook we have documentation for every single component that we're going to be building that's automatically generated for us or we can customize as we need as you can see we have a bunch of different types of components like we have a red button a green button large small button with a longer label and we have the stack component that can do horizontal vertical stacking can do different spacing we can wrap with a stack and we can have an empty stack and best of all is we can modify all of these components so we can say you know what i want to have more children or i want to have more or less spacing or i want it to be column based row based add in wrapping so when we have more children's going to wrap or it's not going to wrap so that's the really nice thing about storybook is it allows you to do all this customization and it's really easy to implement so now in order to get started let's look at the project we're going to be using all i have is a really super simple basic react application i just ran npx create react app and i just made the app completely blank and the index here is also pretty much blank and i just have two components i have a button component here and i have a stack component the two components that you saw is testing inside of storybook and essentially what i want to do in this video show you how to implement storybook so you can test these components which makes development easier you can document them and all the stuff that i showed at the beginning because right now we're not using these components anywhere you can imagine that we just built these components and we want to be able to test them and view them in an environment that's not stuck somewhere in our app because our app may be huge and adding in this component is kind of difficult to do for testing so i want to build it develop in its own environment which is where storybook comes in so to get started with storybook we need to run storybook to initialize it we just say npx sb which stands for storybook and then init and what this is going to do is it's going to download all the storybook information into our application and the important thing to note is you need to do this after you create your application so if you're doing a react app you need to do after you create your react app or if you do an angular review whatever it is you need to be able to create the app first and then run the initializer after you create the app and it's going to come in it's going to download all the libraries you need add a bunch of information to like your package json and so on that way you can actually use storybook i'm going to come back to you once this finishes now that just finished download everything and you're going to notice we essentially have two new folders we have this storybook folder which contains our main.js which is like a config file essentially and a preview js which allows us to create some global different configurations so these are just like config files for the most part you don't really have to worry about them too much then we have this stories folder this is where all of your storybook code is going to go right now we have a bunch of different example code inside of here and then finally the most important thing is in our package json it actually added a script called storybook which we can run so we can say npm run storybook and that's just going to start up storybook and it's going to open it up inside of our web browser so we can start interacting with the example that storybook has given us with all these stories inside of here the important thing to note is when you're creating a storybook component so you're creating pages for storybook everything is going to be done inside this stories folder by default you can change this if you want but i kind of like having it in this folder as is so now that's going to open up and i'll just drag this over to my main screen so we can see and as you can see we have this example section and in here we have an introduction and this is just a documentation page right here we have this button component here which as you can see we can kind of loop through different types of buttons and we can even come in here we can say you know we don't want this to be primary we do want it to be primary as well as some documentation on this button as you can see we have a header section and we have a page section these are all the default pages and components that we have inside of storybook and if we open up our react application you can see we have our button.stories.js header.stories.js page.stories.js and then this introductionfile.stories.mdx right here those are kind of all the different things being mapped to storybook so what i want to do is i just want to delete all of this because this is a lot of information to look at at first and i just want to start by creating our stories from scratch so we're going to delete everything inside this stories folder and we're going to create our very own story so we're just going to call this button.stories.js the important thing is that you need to put this dot stories in here before your.js and that's going to tell storybook this is going to be a page that is an actual story and then we can call it whatever we want we're doing this for our button so we're going to call it button now inside of here we actually need to set up our story the way this works inside of storybook is you just need to export a default object and this object is going to be your actual story so in our case we need to give it a title and the title here is going to be for example button so we can just say button right here and then we also need to give it the component that we're going to be rendering in this story and we're going to be using our button component so let's just make sure up top here we import our button component from that component library or create it so dot dot slash components slash button and that's just this component right here so now we're saying hey this has a title button and we're going to be rendering out the component which is our button component then we need to tell a storybook what our different stories are if you remember when we looked we had the primary or large or small and so on as different types of stories inside of this button category so to create an actual named story all we need to do is export a function that is going to return our component so we'll come in here we'll say export a constant variable and whatever name we give this thing is going to be the name of our story so if we call this red we're going to have a story named red inside of the button folder and we're just going to set that equal to a function and this function is going to return our button component we're going to give it a label that just says press me and we're going to give it a background color which is going to be red and then let's just make sure that we close off this button and now we're going to have a story called red inside of our button folder and if i just drag over our storybook here you can see we have the button folder and inside of that we have this story named red which is the export that we just created and as you can see we have documentation for this button so we can see our label as a string background color is a string size is small medium or large and this on click is a function and you're probably wondering exactly where this documentation comes from and that actually comes from the prop types that i have defined so if you go inside of this button here you'll see at the bottom we have prop types defined and it says our size can be one of these three background colors a string label is a string and our on click is a function so if you have prop types in your application or you're using typescript storybook is going to be smart enough to look at that and be able to assume the types of all of your different props which is really nice also if you're unfamiliar with prop types i have an entire video covering it i'll link in the cards and description for you so you can check that out now let me just drag that over real quick so we can take a look at this again if we go back to the canvas you'll notice we have this action section and when i click on this button nothing's happening in the action section so we're going to need to implement that and also this control section down here none of it is configurable it says the story is not configured to handle controls so that's the main thing i want to work on next is how do we make it interactable which is the part that makes it so powerful now the actual code needed to set up this interactivity is really quite simple but it's a little bit confusing to understand the first thing that we need to do is we need to set up essentially a base function we're just going to set up a function we're going to call it our template because it's the template all of our different stories we create are going to follow and this template is just going to be equal to a function that takes in some arguments and those arguments are just going to go into our button so we're going to take our button and we're just going to pass in all of the different arguments and render out our button so really all that we've done right here is we've created a function that returns our button and passes all the arguments to it so this would be like passing in the props to our button essentially and then what i want to do is i just want to copy this function every single time i use it so for red down here i just want to copy this template function and to copy a function we can just use the bind method and pass it in an empty object and this is going to copy the template function so now we have a brand new version of our template function right here for our red and then we can just say red.args is equal to and define our arguments so we have a background color which we know is going to be red and let's just say we have a label here and this label is going to be press me and then finally we're going to give it a size which is medium and we can just save this real quick and we still have our button rendering over here so if we go to the add-ons section you can see we have our controls and now we can actually modify these controls so i could make this a large button and the button has become a large button now or i could change to a small button and now we have a smaller button if i just expand this to make it a little easier to see you can see if i change the color here to green you can see our button is green we make it a large button medium small change the text inside of it all of this is 100 configurable and when i click on this button you notice in this actions tab it's actually logging out our on click event now this is something that storybook is actually smart enough to see that this prop is called on click so it assumes that it is going to be linked up to some type of action such as clicking so it automatically does that linking for us but if we have for example here a prop in our button that's titled something different so example we change on click here let's change this to handle click i'm just going to change that in all places put it here and down here now storybook is not going to know that this is for handling our click event so if we just drag this back to be bigger and we click on this you're going to notice we no longer get any actions being fired so we need to link that up so inside of our story here we have something called arg types and the archetypes is essentially how we define the different types of all of our arguments and be able to define things such as actions for on click so we want to take our prop we just give it the prop name in our case which is handle click and then we want to say what action this does and this action just takes in a label we can call this whatever we want let's just call it handle click right here so all we're doing is saying hey this handle click prop that we're passing in it is an action it's going to be doing something so we want to log out when it does something when it's called essentially so whenever this handle click is called we want to log it in the action section so now if i click this a bunch of times and i go over to actions you can see we printed out handle click and that's just this label here i could call this whatever i want and now when i click on this button you can see it's just logging out that label and it's also passing along the information that is passed to that function and since we're just passing it an event it's just taking all of the event information now if we wanted to create multiple stories all we need to do is copy this current story and just create a brand new one we're going to call this one green and instead of being a red background color we're going to give it a green background color so our green arcs is going to be green here and let's copy down this again and we're going to do something for small so we're just going to change green here to small because that's going to be the name of this story that we're creating background color let's change it back to red and we're going to change the size to small i'm going to do the exact same thing but for large so we'll just come in here we'll say large large and we're going to change the size to large and then finally we'll do one more and this was just going to be for a long label and we're just going to take our label and we're just going to make it a really long label and we'll change the size back to medium so now if i just expand this out you can see we now have our red our green our small our large our long label and for some reason our red is actually showing up as green and if we just reset this down here you see this reset button in the bottom right that's going to reset all the changes we've made because we actually changed the background color we changed the label and so on so if we just make sure that we reset it it's going to go back to whatever the default is so if we change this click reset it goes back to all the default options now this right there is how you create the most basic of all the different types of stories and then next we're going to talk about our stack component which is going to be a little bit more involved so let me just bring this over we're going to go all the way to the top here and the first thing i want to do is i want to change our title to be nested inside of a components folder because we're going to have a components folder that contains our button our stack and so on so we're going to nest this inside that folder and then what i want to do is i just want to create a brand new story which is called stack.stories.js and inside here we need to do essentially the same thing i'm going to copy all this section at the top paste it in but instead of a button we're going to be using our stack so i'm just going to select where button is replace that with stack in all locations and down here for our template we want to render out our stack also our arc types here we don't care about this because there's no click event listeners to worry about so we can change that and there are button stories let's just change this to handle click since it makes a little bit more sense so now if i go back over here expand this out a little further you can see we have a components folder and inside that we now have our button so we kind of have those nested inside of each other which is nice so we can expand collapse all of them at the same time and if you have a larger application this can make organizing things so much easier now if we go ahead and we look at our stack component we can kind of see one thing interesting if we open up our stack component you'll see it takes in children and then it's going to take in spacing direction and a rap variable but the main thing that's important is it takes in children because we're just wrapping all the children inside of a stack that gives us some spacing and a direction for everything so inside of our story we need to essentially add children inside of our stack and i want to be able to determine the number of children being passed into our stack with the add-ons over here where we can actually you know change the label for example i want to be able to change the number of children but the number of children is not a prop for our stack so we need to add that as an additional argument we can pass in to storybook so to do that again we're going to use arc types and inside of here we want to create a brand new argument we can call it whatever we want i'm just going to call it number of children and this number of children is going to have a type so that storybook knows what this is we're going to give it a type of number and we're also going to give it a default value so by default this is going to be set to four so we're going to have a number of children which is a number and the default value for that is four then instead of our template what i want to do is i want to essentially get the number of children out of here and then all of the rest of our arguments and the reason i'm doing that is because number of children i don't need to pass it to my stack i need to use that to actually get the children to put inside of the stack so here let's put this on a new line so we can actually see this a little bit better we're going to make our stack so it's going to have children inside of it and the children are going to be based on this number of children here so to get the number of children into an array what we can do is we can just say array and pass it in the number of children and i want to convert this to an array where it has all of the keys essentially so i want to get the index of the array so we can say dot keys this is going to give us the index of all the different array elements and then i can just map that into an array by using triple dots here spread it out so now this just is an array that goes from 0 all the way to number of children so if number of children is 3 this will be an array that has 0 1 and 2 inside of it then what we can do is we can map over that and we're going to get a number and inside of here all we want to do is return a component that's going to act as our child it's going to be a placeholder so we're going to use a div i'm going to give it a style here and this style is just going to be a width of 50 pixels so say width 50 pixels height 50 pixels we're going to give it a background color which is going to be red and in order to put the text inside of it let's just do a quick display here of flex and we're going to justify the content in the center and we're going to align the items in the center and that should be all we need to do now what i want to do is inside of this div i just want to put the n that we're getting so this is just the number i'm going to add 1 to this number just so it starts at one instead of zero so we're just running here at a div essentially so we created our stack and then for each child number so for the number of children we're putting a red box inside of the stack and then what we can do down here is just export our story as normal so let's do a horizontal stack we'll just say horizontal that's going to be equal to our template.bind that should duplicate that function make sure this is a constant variable and then for our arguments we can just say horizontal.args and we want to say that our direction is going to be equal to a row so it's going to be horizontal we want spacing equal to 2 so we'll say spacing is 2 here and then finally we're going to set our wrap to false so now we have this horizontal component so what i can do is i can make this a little bit wider we can see over here in our stack we now have a horizontal stack and it's rendering out four children by default i can change that to render out more and more children and as you can see they're not wrapping but i could change rap to true and now they're going to wrap or i can go in the column direction row direction i could increase my spacing if i wanted i could decrease my spacing and so on the important thing to note about all of this is that as you could see here we needed to pass an additional argument an argument that's not at all needed anywhere in our component it's only needed for storybook so we define that inside of our archetypes and then we use that in our template right here to use that argument but pass all the additional arguments that the stack actually needs to the stack and only pull out the ones that doesn't need which in our case is number of children now let's just create a few more different stories here so we can kind of really see how this works for example we can make a vertical story this one's going to be in the column direction we can create another story that's going to be for what happens when there's no spacing so we'll say no spacing and we're going to just make this one a row and we'll change spacing to zero let's do another one for where we want to wrap so we'll say wrap overflow and this is going to be wrapping set to true let's put our spacing back to normal and in order to demonstrate how graphing works let's set the number of children to a large number such as 40. that way we always guarantee that there's going to be some type of wrapping and then finally i want to just do what happens when there's an empty container so for an empty container number of children will be set to zero we can get rid of wrapping here it doesn't really matter because there will be no children so now if i save this and i expand this over you'll see we have a bunch of different options we have our horizontal one and if we just make sure that we reset it to what it is you can see it's just four our vertical which is four vertically no spacing as you can see there's no space between our components we have a wrapping turned on and then we have an empty one which just has nothing inside of it and that's all there is to storybook if you enjoyed this video you should definitely check out my other react content including that react props video linked over here and subscribe to my channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 64,679

Keywords: webdevsimplified, storybook, storybookjs, storybook js, storybook js react, storybook react, storybook js tutorial, storybook tutorial, storybook javascript, storybook javascript tutorial, storybook reactjs, storybook react tutorial, storybook react crash course, storybook crash course, story book js tutorial, story book js crash course, learn storybook in 17 minutes

Id: FUKpWgRyPlU

Length: 17min 28sec (1048 seconds)

Published: Sat Sep 11 2021