Create your own design system! with Storybook React and TypeScript | Storybook 6 Crash Course

hey how's it going today we're going to talk about storybook if you've ever thought about creating your own component library you know for example your own material ui or your own chakra ui your own bootstrap whatever storybook is the perfect tool for developing things like that where you can use it to make components in isolation it also works as a documentation tool that you can expose to your consumers so that's what we're going to focus on in this video today now if you were trying to create code like a library that you want to expose to consumers you might want to do that in typescript because it's just going to improve your overall experience as well as the experience for your consumers where they probably are also writing in typescript so they need type definitions or in just generally you want to provide some better intellisense for them writing in typescript helps with that so in this case we're going to use tsdx as our zero config cli to create a package that we can deploy to npm now in this video we are going to stick to typescript react but you can use storybook with a bunch of other things like vue angular and all other things it's very agnostic in that sense so a lot of things that you learn from this video even if you're not a react developer i think will transfer to whatever framework of choice that you have all right so let's jump right in the way you get started the way we're going to get started is actually using tsdx which has a quick start documentation here that tells you you can run this command to create a new library and then it's going to take care of all the configuration for you and then it's also going to ask you what template you want to use so there's a basic one in here if you were just creating you know any typescript based library but then specifically if we were trying to create a library with react and storybook we're going to use this specific template to react with storybook template which we're going to show in just a second here and there are other ways to install storybooks so for example maybe you have a create react app application you can actually just run a command and it'll install it automatically but the thing is if we're trying to create a library we're not creating an app right so create react app is meant for apps hence the name create react app and tsdx is meant for libraries that's why we're going to use tsdx instead of create react app so what i'm going to do here is in my terminal i'm going create a new tsdx library by doing npx tsdx create and then the name of your your your project your library so perhaps i'm gonna call this my components after you hit enter there it's going to ask you what template you want to use and we we're talking about storybook right and react and typescript so we're going to go with react with storybook hit enter there author provides something and then it's going to start installing the npm modules for you so after this installs i'm going to go ahead and open this in vs code alright so here it is in vs code you can see that's got a couple of things generated here for you first of all there is the src folder which is where our actual code will be and then there is the stories folder which is where our stories are going to be for storybook which i'll cover in a second here and then you've got a test folder to add any tests pretty simple right it also comes with a very simple read media tells you exactly how you get started so for example it says that the recommended workflow is to run tx tsdx in one terminal and then in another terminal you're gonna run storybook so that's what we're gonna do exactly all right so in one terminal i'm gonna run npm start which runs tsdx in watch mode so what that's going to do is as we're writing the code it's going to automatically build our typescript files and put it into the transpiled javascript in the dist folder and you can see it's watching for changes compiled successfully and then on another terminal i'm gonna start my storybook so npm bronze storybook once that starts running you'll see that it runs in localhost 6006 and if i open that up looks like this right if you got a starting uh just a welcome section here and a default for the component that we have and it just says the snazberries tastes like snazberries and there's some some bottom panels here controls and actions and a bunch of other things here we're going to go over every single option here but we're gonna take it one step at a time but first of all let's take a look at what is generating this text that comes from the code where there is the src and within that you'll notice that there is an initial example component here that just called that's just called thing and it's got the the snoz barriers taste like snazz bears in there right and then so that's just the source code within stories there is also a thing that stories.tsx which has all the stuff in it we'll talk about in a little bit and then it's got this this template story thing which effectively just renders the component right so that's how it ends up in the ui like this now let's break this up into each of the individual pieces so that you know how to do it yourself so let's start with maybe your component library you wanted to create your own personal button right so in the src folder here we're going to create a new button.tsx all right and within this new button.tsx file i'm just going to create a shell of a react component there we go since we're trying to create a button we should change this to a button and for now let's just spread the props in there because likely you're going to pass in things like on click and stuff like that right now up here you can start defining your own custom props so for example maybe you want to explicitly call out that the children is a required prop so let's do that children act node and let's say that we want to pass in a variant prop of let's do primary and secondary right this is a pretty typical pattern that you'll see in other component libraries like material ui or chakra where there's usually a primary one where it's uh has a different color than a secondary one you know what i'm talking about right so this is just saying that the very prop has to be a string and it needs to be one of the choices that we apply here by the way if you're completely new to using typescript with react i do have a separate video specifically covering that topic if you just want to learn that first might be a good background if you don't already know how to do it anyways so since we have children here and we do want that sort of rendered we're going to add that to children over here and we still do want to spread props because again we're going to have other props being passed into this button so for example things like on click perhaps there's a you want to allow people to disable the button you know that's all from the default props of a component which we can also actually add extends html attributes of type html button element right and the combination of that just allows us to pass in props that are specific to a button element like things like on click disabled etc alright so we've got a basic button component here but it's not going to show up in our storybook until we start creating stories for it so within our stories folder we're going to create a new file called button.stories.tsx all right there's a couple of things we need to sort of import and configure here for every story uh first of all we need react in here next we need to import meta and story from storybook react which you'll see how we use that in a second here and then we also need to import our button itself along with its props and if it's not already being exported we need to add an export on our interface here right so we're importing the component and its type definition or specifically its props now next we need to configure some metadata here for the stories of this button and this has the type meta and first we need to create a title which is required so perhaps we want to put it in let's just call it button for now and we'll see what are the different ways we can do with this we need to add component which is the button the actual imported button that we have here and then we need to make sure that we export default this meta all right with that out of the way we can start creating our stories and the way the syntax works here is basically just create a a named function let's call one default which returns a rendering of your component right so for example uh in our case we want to render maybe a button that says click me and this is saying it's got the reg swiggly because we require variant right so let's add that in for now let's do this as primary and i believe that's it that's a minimum that you need to have to make this show up in storybook so you can see that there's now a new button section over here and if we go into that there's our default right and it shows click me alright so that's how you get a basic story out there let's create another story perhaps we wanted a specific story for what does secondary look like a secondary variant now we didn't write any css yet so this is not going to look any different right so we got a new story in here and if we go back to our ui our storybook ui you'll see that now there is a secondary story in here so you can think of it as stories are sort of the the different variations of your component that you want to document as well as develop for so for example let's say that we're moving towards all right i want to make a button that is blue and maybe rounded and that's going to be the primary and the secondary might be gray so how do we move towards something like that so if we were to open our code again so let's add a little bit of css here just so that we can get it working properly so maybe let's do just a basic inline style here and you can use whatever styling strategy that you want if you want to use css files or sas or css in javascript that all works with style components as well but we're going to keep it simple let's just say that if the the background color is let's pull out variant here in our destructuring all right so we're going to say if the variant that's passed in is primary we're going to color this blue otherwise let's make it gray all right pretty simple let's take a look at what that does it's got a blue button and if you go to secondary it's got a grey button now the text is pretty terrible shouldn't be that dark so let's add some extra styles in here let's just default the text color to perhaps white alright so we're setting the color to where you can see that now we've got a white button or sorry white text and that shows up in both our variants here and then you can kind of see how the canvas in storybook sort of acts as your isolated development environment right so it does react to our code changes so for example if i wanted to side by side start manipulating this css to be a little bit different if i want to start developing towards the looking field that i want so for example i don't really like that border let's do border none um maybe let's make this into a rounded button so let's do border radius i don't know 100 all right and then that's a little tight so let's add some padding that is 20 pixels sound there you go maybe a little too much let's do 10 pixels all right so there's our basic custom button maybe let's also add a cursor pointer right so now we got the pointer so you can kind of see how you can very quickly iterate on your components like this so if we switch over to secondary see we got a gray you know our ability to change the variance is is working now let's say that you had multiple variants right so you can probably imagine in our stories we would just create you know however many of these that we want but that would get pretty painful very quickly so another thing that you can do with storybook is it this idea of a template so for example perhaps you wanted to do and this is where that story import comes into play perhaps that we wanted our template to just be the button and then we pass in our our args in here and args comes in as a parameter right so once we have a template like that we can then change this to just be a template dot bind right and if you're not familiar what all that does is basically it creates a clone of this function right so it's effectively creating a button right and then secondary here we can also simplify to be template.bind but since secondary has different props what we need to do is do secondary dot args right and you can see we're passing args in here this is where we can start differentiating the props that we pass in for the button so for example we said that we want this to be variant secondary and then children let's do i am secondary right and before we go back to the ui it's probably good to notice that all right the default doesn't really have any props defined so it's probably a good idea to define some defaults in our button so for example let's set the default to be primary and it also would be nice to add a default value for the children but i only want to do that in the stories not really in the component itself right it doesn't make sense for a button to have a default children so if i want to do that i can add within the meta arc types and we can add our children prop in here and say that i want a default value of let's just call it default text alright with all of those things in place let's go back to storybook and take a look now we've got a default primary button with the default text and then in secondary right we passed in the the children text as i am secondary and then the variant as secondary pretty cool right now there's something here that i haven't talked about yet which is in the controls notice what happens now when we do that arg stuff with a template now there's a controls in here which is actually one of the add-ons that you can add to storybook that's already configured for us here but notice that i can actually dynamically change this if i want to for example do something else and the ui is just going to react to that so it's a really nice way to create a playground not only for yourself but also the the consumers of your library if you were to deploy this this storybook as its own sort of documentation right and you can see that i can also dynamically switch my my variant so that's really cool now this is probably a good place to segue towards add-ons which as you can see in the documentation for storybook there's a bunch of different ones in here and then actually in the documentation it also says that here's this here's a list of essential add-ons that we think are sort of needed or required in basically every storybook app and we're going to talk about some of these but you'll notice that in our code there is this dot storybook directory and within that is a main.js file now within this file is where you can configure your add-ons and notice that with tsdx store book template that we had it automatically has specifically add-on essentials in here which adds all of those things that they talk about in this page so what are some of that let's start by talking about let's go back to the ui so first of all we have right so we already talked about controls actually so that's this tab over here let's talk about actions which is basically it allows you to track actions so for example if we went back to our code back in my button stories in here i can actually add a on click and i'm going to say action and i'll just provide a text here and what that allows us to do is if we go back to storybook i'm sorry i'm jumping around so much if i click this default text button now it's going to say on click right it's now able to track that action so adding this sort of think of it as it's adding a default behavior that says on click track that action and log it out now this defines it for every usage of the button throughout this entire stories file but if you wanted to you can also do it individually on each button so for example we can do on click action and i'll provide another custom string in here and this action method actually comes in from the add-on actions itself which you can think about the add-on essentials has that add-on actions inside it right so once i add that and go back to my storybook when i go to my secondary and i click that you can see that's where our secondary click is so that's a good way for you to sort of track as you're developing your component in isolation right is it able to is it able to trigger callbacks and stuff like that you know specifically with anything that has an on in it right like on change on click stuff like that with events next let's talk about this docs page reset which is actually very cool uh you might have noticed there's another tab in here that says docs docs is actually is sort of a stand-alone section in your storybook that acts like documentation hence why it's called docs right so this is pretty similar to what you might see in other component libraries where they have you know they have the component description and then they have examples and then notice that we have a props table here which is very nice documentation right and it has that same configurability that we had with controls it also has a section for you to show the code right so that's so think of this page as the consumer page the people that are gonna use your your library your components this is probably the main page that they're gonna go to right and then it's gonna list out every story that you have so if you had more it would be down here as well and that can also show the code to see to show that how does this variant or this story differ from the default one that you have up here is you go take a look at the code and see how it differs and what props are being passed in right so you can kind of think of it as canvas is your is your view as a developer to develop this in isolation while docs is your consumer view for the people that are actually going to use your component now the docs view would be nice if you had a little bit more extra text in it to explain you know what is this component what are these props and you can actually add that very easily in the code itself so going back into our button source code button.tsx you can add for example some comments in here for example provide a text for the button or you know whatever description that you want that you have would you like to use and then you can also add a comment above the component this is i don't know a special button all right now let's take a look at what are the changes in the docs page once we start adding those comments you can see that in the top here that now has that the text that we added above the component right so that's a that comment is a good place to add descriptions for the component itself and then within our props table it also added you know it's the descriptions here from our comments and other other things that are nice to see here is you can see that it shows what are the defaults so for example this is default primary and then of course the controls that we talked about so that's the docs page and you can actually use mdx to customize this even further which i'll cover maybe towards the later end of this video but i want to finish walking through some of these other essential add-ons so what else we want to look at here so there is these uh i'm not sure actually if this is an add-on or not but it allows you to zoom in and out and you can kind of go back to the default using this third selection now these guys are definitely add-ons so this one allows you to change the background right so you can see you can change it from light to dark maybe you're developing i don't know dark mode and and various different um if you're trying to develop your your component and you want to see how does it look in light and dark backgrounds right this is a good option to have you've also got the ability to add grids you can see probably a good way if you're trying to measure how does it space out there is sort of this view changer that allows you to switch between oh how does it look on mobile devices large mobile tablets very good for maybe you're trying to achieve a mobile first design there is this measuring add-on i forget what they call it i think they just call it measure and it allows you to measure the different pixels and stuff like that so you might be used to seeing something like this in sketch or figma or any other similar tool where it shows you you know what are the widths of some things this is not a great example but you can see that it's measuring margins and padding and stuff like that width and height so that's pretty useful and then this i believe is sort of just a it just marks the spacing so this is the outline add-on it just helps you so to kind of determine you know how are your things sort of laid out so it kind of adds you know borders and stuff around the things that you make you know so you can see that there's a line here and it shows that this spans the full width so this is probably more useful for more complex components like the the example they have here where you really want to pay attention to layout right so those are pretty much the essential add-ons and then there are extra add-ons in here that you can kind of look through what's what are the things that are available to you you know for example let's do a quick example of adding a new add-on that's not already in our application you know for example i really like this accessibility add-on honestly it should be essential in my opinion so if you click into that it tells you that you can add this by installing a storybook add-on alley and then it'll also tell you that all you need to add it to your add-ons already like this so we'll do that in a second here so back in our code in a new terminal i'm just going to do npm install dash d store book add-on alley all right once complete i'm going to go to that main.js file and remember this is in the dot storybook directory and i'm going to add that as a new add-on over here so that would be at storybook slash i believe they said ally like that and then let's take a look at our updated storybook back in storybook it's not showing up here yet so i might need to actually restart storybook so i'm gonna kill this and then i'm just gonna [Music] rerun storybook again all right now that i've restarted storybook back in our store book ui there is a new accessibility tab here that does a couple other things so this is similar to i think you can see this in chrome dev tools as well but it's nice to just have it in here directly so you can see that it automatically checks a bunch of accessibility rules for you so for example you know ensures the buttons have discernible text so it just runs it through a bunch of rules to make sure that your your library component whatever is accessible as accessible as it could be and then it kind of informs you if not so for example if we were to make our code a little bit less accessible by you know perhaps we had really bad colors in here so for example if we just said that i'm going to override the the colors here if our background color you know if our background color was just black and then color as well as just black then you don't have any contrast right and let me comment this out so it doesn't complain at me back in our storybook we just have a black button that is pretty useless right so you want to have text that people can actually read so you notice that now that we have an incomplete here which says ensures the contrast between foreground and background colors meets the wcag contrast ratio thresholds right so if the colors in the foreground and the background are too close or not what's a good word for that not far enough not different enough to contrast with each other the text is not going to be readable enough right so this is just a really nice add-on in my opinion and again there's a bunch of other add-ons that you can use here to look through i'm not going to demo every single one of them designs is a nice one if you want to embed uh designs so for example maybe you have a a figma that's hosted somewhere or a sketch file or something like that you can add a new file in here that shows the design side by side with your component there's stuff here for next js story shots is pretty interesting it allows you to do automatic snapshot testing of each of your stories so take a look through the add-ons in here and see what is going to be useful for your own workflows now i don't actually want to have black buttons like that that you can't read the text so we're going to go back to what we have before here all right so that's add-ons for you again there's a lot more to to learn about here and to see but uh there's the gist of it now there's a couple other things that i wanted to talk about so i mentioned that in the docs page that there is a way to further customize this using mdx right so the com the ability to add comments like this is really nice but it's not enough if you wanted to have a very sort of custom documentation layout that's where mdx comes in so to enable mdx what i'm going to do is first i'm going to kill storybook again and then within my main.js i'm going to add mdx here so you can see that there's this stories property which looks for any file that has dot stories and in the various file types that we enable here so we specifically want to add mdx all right with that in place i'm going to go back into my stories directory here and i'm going to add a new let's just reuse button again button that's stories.mdx and then from here i am going to restart storybook alright so we got an empty mdx file here and if you're not familiar with mdx you can kind of just think about it as a fusion between markdown so if you're familiar with markdown syntax that's going to work in this file and then it's kind of a fusion with jsx so you're able to use effectively react code and we're going to see an example of that in a second here first i'm going to import a couple of things in here so like i said with mdx it's sort of like a fusion between markdown and sort of javascript so we should be able to use import statements like this and then i also want to import my button again and its props and similar to how over here we're setting up our stories with the meta we're going to do the same thing in our mdx file here using the meta component and we're going to add title and let's do mdx slash i don't know let's call this button again and then you have to provide a component which is button so you can kind of see that this is effectively equivalent to what we're doing over here where we have title and component and as you can see with title you can kind of add paths to it i didn't really talk about that to differentiate where it gets placed or organized in the ui so if we go back into our storybook there is now a new mdx section in here with our new button and it's empty because we didn't really added anything else in here but just to show again how this title while we're talking about it affects the placement right so if you add a a sort of a prefix path like this you can see that it adds it in its own section so for example maybe i want to add this in a components section like this that changes that great text over here and then maybe it's even more nested in something else like that component something slash button so then there's you know nested folders so you can make this be as you know whatever hierarchy you want to have in here but i'm just going to go back to mdx slash button just so we can kind of differentiate between uh the button that we had before as and the mdx button that we're creating now all right so let's start adding stuff to this to actually show how it works now similar to how we're able to create templates in the tsx button like we have over here we can also add that in here so that we can again utilize the same exact idea where we have reusable templates and then we can start creating our our documentation so here's where the mdx really shines is that you now have the ability to just add whatever you want whatever text you want however you want to lay it out so for example let's define a story for our button component right so i expect this to show up as a string in a ui and then i can define stories for this page again similar to how we're doing it in the the typescript file but in this case we're doing it in mdx so this needs to have a name uh maybe let's just call this my component or my button and then similar to how we have args right you can do do children imn mdx variant and we'll just leave virus empty because it's default to primary anyways and then within this we're just going to do our template.bind again and we'll make sure to close this right let's take a look at how that looks in the ui and now we got this new docs page and notice that with mdx um it's specifically customizing this docs page right so we've got our our text our header and then our button right and it works just as we expect it to be now to make it kind of comparable to the one we had before you might want to have like a props table as well right so you can add that in as blocks so back in our code in the mdx file notice that we also imported args table in here you can provide that as a new thing down here and we're going to say story for the name that we have up here so args table for my button story close that and back in the ui again now we've got that same view where we have the props table as well as the controls so you can kind of imagine it as we're basically moving towards what we have over here but we have a much greater level of flexibility in terms of layout and text and stuff like that right so for example maybe i want to have extra text description here right and then what else we want to do maybe we want to add additional stories in this documentation kind of like how our button stories has multiple different ones right so for example um you can actually use canvas by the way which allows you to well you'll see in a second so let's add a new story in here let's name it secondary similar to what we had before and then this has its own args mdx secondary and we want the variant to be secondary right and then same thing we're gonna do template.bind close the story a little bit of formatting and go back to the ui and now it's gonna start looking similar to what we had before right where we have the same split here where we have the default and secondary now we have my button and secondary right so that's how you add extra stories and then the canvas that we added is the thing that allows you to add this uh code viewer so now you can see what what's the code for each individual story from the mdx right but again this mdx allows you to add whatever custom thing you want to have so for example maybe you just had a bunch of extra text over here you know now that shows up in here so again it's it's all about you for further customizing the defaults that we're able to get with docs just from the typical stories which is already pretty good it lays it out really well with a header a props table and the individual stories but the really nice thing here is the mdx files allows you to create sort of standalone documentation pages like maybe maybe you want to add documentation that's not even for components you just want to add you know installation instructions or usage instructions and stuff like that um and kind of like in this example here maybe you want to add a bigger block to the text which would be painful to do via the comments strategy that we had or just in general if you want to lay it out in a completely different way mdx is very useful for that and then i didn't talk about it here but there is this really nice search bar you know you can kind of filter it down to what you have or really this is more for your consumer i guess if they're looking for a specific component that's the search that they're gonna use at a high level that's really all you need right you've got storybook that allows you to create components in isolation and at the big and sort of a big idea behind storybook is that it's component driven and it kind of flips the development model around where if you're making a an application right and you're adding features to it you might go from a a top-down model where you first create uh the page for that and then within the page you maybe start laying things out and then within that you create your smaller components storybook kind of flips that around where instead you start to build the lower level components like your buttons your panels and then you can kind of start composing those components into effectively as it builds up towards your full page so it's a bottom up development model if you can kind of think about it that way and in general it allows you to do all these things in isolation it doesn't have to have a page it doesn't have to have a running component or a running application it just needs to be able to render itself so that's why it says that it streamlines ui development testing and documentation so um even if you were using storybook with an application you know for example maybe you would create react app it might still be a very useful development tool for you to allow you to create you know really nice components that work well in isolation and in composition now we did start this video talking about tsdx as well right we said that we're ultimately trying to create component libraries that you know maybe it's something that you would publish in npm sort of like how chakra ui or material ui is something that you can install from npm right perhaps you want to do something the same or maybe you're trying to do something similar internally with your own company this is where txdx comes in right so we didn't really talk about it that much but once you've built out all your code like this you know maybe you know you start to have your base set of components tsdx has a build command as you can see here which if we run that you can see that what it ultimately does is it starts to compile in your code and transpile it down to javascript it actually uses roll up behind the scenes so if you need to further configure that build process you can if you're familiar with roll up and then once you build it creates this new dist folder what you can see within that is basically your your code minified and uh now in javascript right and it also has different builds so for example uh depending on the the environment if it's for production or development it can provide a different type of build for that so for example you know you can see that in production they're using the minified version that looks something like this right it's just like one crazy minified line of code and then the development one is something that's a little bit more readable but in general what is in this this folder is something that you'll be able to publish in npm if you wanted to and notice that it also adds the typescript definition so that's really nice for your consumers that are also using typescript in general if you write your code your library and typescript it benefits everyone even the people that are not using typescript it improves their intellisense in vs code and then for the people that do use typescript you automatically are supporting those people and you don't need to rely on third-party type definitions so again just to summarize you can run npm run build and that's going to build your entire set of components into one deployable that you can put out into something like npm now one thing that i think i forgot to mention is that anything that you actually want to expose on the library that you're publishing you want to make sure that's discoverable through your your entry file which is this index.tsx file so for example in our case if we were trying to make sure our button is something that you know people can import after you publish your library you probably want to export it in here so we're going to add export button from button right so if i run my build again we should be able to see an updated this folder here where the index is ultimately going to import whatever is from that entry file so in our case it should have button in here right you can see here in the development build it has exports that button equals button right and that'll be in the production one as well except it's gonna be minified right so with that this folder all that's really missing is just an npm publish so it's very close to being an actual library so that's why we're using tsdx now you might also be wondering what about the storybook right we have this ui which was a great development environment but what if you also want to use it as an actual documentation page right you want to expose this easily usable documentation to your library consumers well there is also a build storybook here npm run build storybook if we run that what that's going to do is again it's going to build our storybook into a static ui that you can basically deploy wherever you want the one kind of tricky part with this setup is that storybook i believe by default compiles and bundles your code using webpack and we might we just mentioned that tstx is using roll up so there's a little bit of a bundler difference there so just something to watch out for so if you're trying to add different loaders you might want to make sure that it works for both rollup and webpack but you can see that once it's built it's going to have it's going to add the storybook static folder in here which again is just a static build of the application you can see that it also bundles the the various javascript and stuff and then within here there is an index.html um you know if i were to just open that in my browser you can see here index.html if i open that with chrome you know it just it's just that ui that we have but now it's just the static version of it right and it works just like before all those features are still working so all you need to do is deploy that index.html and the set of static javascript and css that comes with it and you have your documentation right so kind of uh in conclusion to bring the whole picture together as a summary we used storybook to develop our components in isolation we're also using typescript to provide the type definitions for our props which also becomes very useful in store book itself because it auto-generates the props table from that and then we're using tsdx to compile our typescript code down to javascript and then also basically turn it into a package that we can publish into npm if we wanted to and then finally the storybook ui itself we're able to build into a static ui that we can deploy anywhere so the combination of those two things is sort of your your power tools and creating your own design system your your own component library right you can publish the package to npm and then you have your deployable documentation now if you didn't want to use storybook kind of like how chakra is doing it you can make your own documentation but still have the storybook just probably for your local development and then still publish your code to npm alright guys so there's a quick uh crash course of storybook with react and typescript ntsdx hopefully that was useful for you let me know in the comments what you think make sure to hit the like button and if you want to see more of these types of videos let me know let me know in the video in the comments and make sure to subscribe to see more

Channel: Marius Espejo

Views: 89,574

Keywords: storybook js react, storybook js tutorial, storybook js react tutorial, introduction to storybook, react storybook, react storybook tutorial, react storybook demo, react storybook setup, react storybook best practices, how to use storybook react, how to use storybook, how to install storybook, storybook components, storybook react components, storybook ui components, storybook guide, storybook, storybook react typescript, react typescript, typescript, react

Id: qSkHRVLcj6U

Length: 46min 5sec (2765 seconds)

Published: Mon Jul 19 2021