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

Have you ever though about creating your own design system or component library? This is the video for you. You mostly really need two things. First, a development environment which allows you create and design components in isolation. Second, the proper tooling to bundle and package your code!
In this video we are going to utilize Storybook JS to develop React JS component libraries or design systems. We're also going to use TSDX as our typescript tooling, it will help us get started quickly with zero configuration!
00:00 - Intro
02:18 - Installation and setup
05:27 - Creating a new component
08:00 - Creating our first story
13:47 - Templates for stories
16:17 - Controls
16:57 - Intro to addons
17:56 - Actions
19:44 - Docs page
22:43 - Overview of the rest of essential addons
24:42 - Installing a new addon (accesibility addon)
28:40 - Using MDX for Docs
37:27 - The idea behind storybook
38:58 - TSDX overview
39:28 - Building our code as a package to publish to npm
42:36 - Building a deployable static version of our storybook docs
44:30 - Wrap up summary
45:44 - Outro

[@mariusespejo]

Hello! I recently made an updated Storybook 7 crash course here 👉 kzbin.info/www/bejne/eaaqi5qPpJtgjrs

[@AwakeningofAI]

this was precisely what I was looking for. great tutorial mate. neat and clean concepts.

[@mariusespejo]

Glad you liked it!

[@gavdev12]

Perfect video for someone who knows react but has never made a package before. Love it

[@stevesmith0624]

I was looking for resources on creating a design system with React, this was the perfect video for it. Thanks alot!

[@ya2138]

After searching for a while of this topic, you may be the only one who explain the doc section even with tsdx. Damn awesome, thank you dude.

[@mariusespejo]

Glad to help!!

[@samueldusek70]

Hi Marius, thanks for this video. It was exactly what I was looking for. Keep the good work. :)

[@icutshapes8164]

Exactly what I was looking for. Thanks for introducing me to TSDX.

[@mariusespejo]

Tsdx is great! Glad to help 🙌

[@codefork94]

phenomenal walkthrough 🔥🔥🔥

[@OliverKelso]

This is great man, thank you. I've recently been thrown into React and Storybook, coming from Vue. I was having a lot of trouble understanding what the real benefit of Storybook was, but this really cleared up a lot of questions I has having! Thanks!

[@mariusespejo]

One big benefit, which I don’t remember if I mentioned in the video: is that it promotes this idea of developing “component first”. Rather than the usual first you make a page then, you add layout, then you add components within. With storybook you can decide to go bottom up, from component to page. Which in my opinion encourages really thinking about having good component boundaries and ultimately having a really good component API. Also this video is already a bit old and the newest storybook 6.5 has some really cool features such as various testing tools that you can use for unit testing

[@OliverKelso]

@@mariusespejo Absolutely, and it was when you said "A bottom up approach" is when the light bulb went off in my head. Again thank you!

[@hw7416]

You are a blessing! Thank you!

[@jacqueskorb879]

Thank you. All good so far!

[@MrIgorii]

Noice man, so clear and well structured

[@mariusespejo]

thanks Igor 🙏

[@diegoscastanho]

Amazing, thank you!

[@andybliss5965]

Thanks for this nice video. I need this for my work. What's quite funny is you suddenly sound British like my when you pronounce 'Button'

[@anhnguyenduy1077]

Awesome tutorial. Thank you very much

[@mariusespejo]

You’re welcome!

[@LeslieDuan]

great content, very informative

[@yourfavoritefounder7203]

Nice job!

[@sergeykahnwald6640]

Storybook is a cool package) But there are some cases when we don’t need all the power of storybook, but just a simple “test page” with all our components where we can play with its props. There is one package that works just fine for this, called storybox-react

[@magdasokolovic]

great video! Thanks, Marius :)

[@mariusespejo]

You’re welcome!

[@mariusespejo]

Interested in adding dark mode to your React app? Take a look! kzbin.info/www/bejne/fIeqYYF5rM-Gp5o

[@Play-Date-Care]

Thank you so much for the video, sending you lots of respect for the wonderful explanation!

Thanks man, very informative video

[@mariusespejo]

Glad it’s helpful!

[@mk9834]

interesting video as always!

[@mariusespejo]

glad you think so! thanks!

[@shivanshpatel4072]

Awesome video 🤩

[@mariusespejo]

🙂

[@shahmirjadoon3587]

Very good video. Helped alot

[@mariusespejo]

Glad it helped!

[@fabbyptc]

Man, I have no words enought to thank you! You've saved me! I had to create a library for work and failed with all the tutorials I've tried. Your tutorial was the one that resolved my problem. Thanks a lot!

[@mariusespejo]

No problem! Happy to have helped 🙂

[@kurniawanhendra2683]

thanks man,

[@johnddonnet5151]

Finally learnt how to correctly create a button :D

[@mariusespejo]

Gotta start somewhere 😄

[@oguzhanbayrak8046]

If you are watching this video after storybook published newest version(^7.0.*) of storybook, you will encounter problem that's your storybook server couldn't be initialize. because of cound't found "start-storybook". Because of storybook changed "start-storybook" to "storybook dev". You can run this command for autofix your storybook config. "npx storybook@next automigrate". and thanks for video :)

[@mariusespejo]

Thank you for the tip! I actually am planning to create an updated v7 video covering some of the new features, stay tuned!

[@jaammmiiii]

Great tutorial! Thanks! Can you share your extension/settings for VSCode so it auto-formats (Prettier) on save? I've installed the MDX extension and while it does provide syntax highlighting, it doesn't help with formatting.

[@mariusespejo]

I don’t have auto format on save, I find it sometimes tries to format too early that way (while I’m still typing). I don’t use anything for formatting other than just prettier, it also works for markdown. Sometimes I edit out me doing right click and selecting format so it might seem like I’m formatting automatically when I’m not. I believe I’ve also used Markdown All In One extension which is really nice and can also do formatting I think

[@devendrasaroj8919]

Got mdx running through this tsdx, otherwise with standard setup I was getting errors for mdx files. Thanks for tutorial.

[@muxammad2777]

How did you run it, I have done exactly like him added mdx efter |, and maked i file under stories and called the file Button.histories.mdx .. when I'm writing something in the file i see there are something wrong. since the color is the same for (import ) and the other text.

[@Gusfaria11]

This is great. Thank you. Any ideas on how to structure the css? Is this on top of webpack?

[@mariusespejo]

really up to you, but I personally like css-in-js solutions for React stuff. I mention towards the end of the video storybook is built with webpack while the code/package itself is compiled with rollup. So if you decide to add a specific css loader, you just have to work with both configurations

[@sergeykahnwald6640]

great!

[@ap86]

Thanks for the walkthrough 👍Have you managed to get mdx to be type safe when using typescript? Editor doesn't complain about errors, and build doesn't break when I pass an invalid value to a prop. This makes it pretty fragile. But I love the idea of using mdx

[@mariusespejo]

Hmm that’s a good point, I haven’t looked into that yet. It looks like folks have opened a ticket on it but it doesn’t sound like there is any traction: github.com/microsoft/TypeScript/issues/36440

[@ap86]

@@mariusespejo yeah it seems so. Have to go with tsx for now and follow the progress on types in mdx files. Thanks for replying 👍😊

[@shuaib-hasan-akib]

Hello Marius, great video. Please, make a project with React, TS, and Redux.

[@mariusespejo]

Will do soon

[@AlEgorova]

Thanks for video! Github's repo would be helpful )))

[@av03]

subscribed!

[@mariusespejo]

Thanks!!

[@skoizumi291101]

Thanks for detail video on storybook and react. When starting new application with the new style do we develop two react applications? One works with storybook and the other for real application?

[@mariusespejo]

You can think of storybook as simply a alternative development environment which also acts as documentation for your components, so it has nothing to do with the number of applications that you would have. Whatever component you develop in storybook should be reusable in your actual applications

[@natikranz4407]

Hello, great tutorial! Is there a way that I can use styled-components on project? I've searched many erros on build with it

[@mariusespejo]

yes absolutely! you can use any CSS-in-JS solution including styled-components, emotion, etc. it's actually simpler to use those in my opinion because then you don't have to worry about css processors and such

[@regilearn2138]

It would be grate if you can do a video adding material ui to this setup

[@mariusespejo]

I mean you can do that if you’re maybe using storybook as docs for your components in an app, but really the intent of this video was if imagine you were making your own version of material-ui, your own component library. In that case it wouldn’t be something I’d add to this setup, but instead my own styling strategy like styled-components or something similar

[@amphibia95]

Learned a lot, thank you so much! Somewhat unrelated question but how did you manage to have JSX + Markdown syntax highlighting for .mdx files in Vscode?

[@mariusespejo]

ah if you search for mdx in vs code extensions it should pop up as an option!

[@amphibia95]

@@mariusespejo sorry, completely missed the notification for this message :D thank you so much!

[@mariusespejo]

No problem!

[@OttoAgne]

Great tutorial! Thanks! Is a different to VUE 3 app? Do you have any VUE 3, VITE crash courses?

[@mariusespejo]

I know that storybook is fairly agnostic and can work with vue, however the specifics of that I’m not very aware of.. I have not had a chance to try vue so I also don’t have any content on it. Perhaps in the future

[@starlite7249]

YYYYEESSSS!!!! just what i wanted Storybook React with Typescript. But Marius no discord still .... BigSad

[@mariusespejo]

😅

[@iamchiragarora]

As of 24th May 2023, after installing react+storybook template with tsdx, storybook is not a part of dependencies. So I faced multiple errors like "start-storybook" is not recognized. I had to add it as a dependency and then run npx storybook@next automigrate to fix the issue.

[@mariusespejo]

Thanks for the note. It seems tsdx is not much maintained anymore unfortunately.

[@luisalonsoramirezcamareno2223]

great video but i'm stuck cause of this err: Unexpected default export without title: {"includeStories":[],"parameters":{"docs":{}}} . Help! It happened when i was trying to create the Button.stories.mdx file

[@saisudheerreddy2657]

Hello Marius, Your video makes me better understanding the storybook. but I have one confusion is the storybook end-user UI builder or it's just for the developer documentation?

[@mariusespejo]

It can serve both purposes! You can use it to develop components in isolation and once you’re happy with your component API you can integrate it with your actual app

[@saisudheerreddy2657]

@@mariusespejo Thanks a lot

[@ConnorM468]

Awesome tutorial! For whatever reason when I want to add a description to my component with the comments I have to terminate my storybook connection and restart it to get it to show. Any fixes? Thanks!

[@mariusespejo]

That has happened to me before actually, I was actually surprised it didn’t happen when I was recording. I’m not entirely sure what prevents it from being picked up, sorry

[@ConnorM468]

@@mariusespejo Not a big deal. Do you happen to know how to use css files with rollup? Can't seem to figure out how to build with it.

[@mariusespejo]

There is a plug-in for css. Or you can use any css-in-js solution and it should just work

[@victorhugoolvera8773]

How do you apply conditional styles to more than two variants? Ternary operators only support two variants.

[@mariusespejo]

You technically can chain ternaries but that would be ugly lol. What I would suggest is creating maps for things that vary, e.g. const paddingByVariant = { sm: 10, md: 20, lg: 30 }; Then in your code you just do a lookup like: paddingByVariant[props.variant]

[@yo921124]

Great video, but im having an issue, as soon as i add the button component into the storybook and try to open it, the app crashes, and the ram consumption goes all the way to 100%, do you know what could it be? i actually have 16gb ram, and i read some error reports in github, but there is nothing too concret

[@mariusespejo]

Honestly likely a problem with storybook which doesn’t seem to follow semver very well, lots of big changes happen even on minor version updates

[@mybird7272]

how to run react?

[@mr.random8447]

What typescript react snippets you using? My snippets default with a type instead of an interface

[@mariusespejo]

If you search “react snippets” in extensions it’s the one that starts with ES7. Honestly though using type is fine unless you really want users to extend an interface

[@erickllerenas6751]

How to decide which files to export and which to exclude based on good practices? (Im talking about the index.js file where you export all your components)

[@mariusespejo]

Well basically whatever you want exposed to consumers, and even better things that you’ve actually documented usage for

[@erickllerenas6751]

@@mariusespejo But there should be a script that generates the index for this file, what do you think?

[@mariusespejo]

I mean that’s up to you, depends on how complex it is for you to just write the index file

[@parthasarathimondal7190]

Hey when I am creating a secondary button, I am getting no stories up there for secondary button but the default button is showing up.

[@mariusespejo]

Did you create the secondary story itself?

[@amitavroydev]

I am not sure if it's an isolated event, but when I run the tsdx create command.. it fails and hence I am not able to install the stuff and even get started.

[@mariusespejo]

I assume it tells you in the install logs why it failed?

[@amitavroydev]

@@mariusespejo Might sound so silly but I tried to install it on a different folder and it just worked which really doesn't make sense but yeah it happened. So, for now I guess I am able to work. However, I am for sure going to look at what just happened. Because I had even tried using different node versions using NVM to check... :) Anyways, thanks for the reply

[@jihyunlee1340]

same here. I got the same problem and stucked at the beginning

[@amitavroydev]

@Jihyun Lee now have you solved the problem

[@jihyunlee1340]

@@amitavroydev Yup! I tried it again on another computer installed node v14 it works perfectly. I feel like I struggled for nothing...🤣

[@carljkempe]

What extension are you using for snippets?

[@mariusespejo]

Don’t remember the specific name but they’re honestly all mostly the same, just search for “react snippets” and pick one you like

[@glancecx]

I've tried to get this running and open a browser in port 6006 but the new version of Storybook 7.0 runs and error with yarn storybook. I believe its because storybook no longer uses start-storybook and build-storybook. Anyone figure out how to get this working?

[@mariusespejo]

To follow this tutorial I suggest installing at v6, then take a look at the v7 upgrade guide, they have a tool to automatically upgrade your code to v7. Will try to make a new v7 video soon

[@rickvian]

if i want to setup storybook for existing next typescript project, do i follow the same process?

[@mariusespejo]

Not exactly, this is more for when you want a standalone project/library. For existing projects you likely will want to use storybooks’s “sb init” command, might want to check the docs. If you google “storybook init nextjs” the first article will probably give you some ideas

[@muxammad2777]

thank you for the video. what is the meta been used for ? I dont understand there where you export Meta what is that ? thank you brother

[@mariusespejo]

Meta is basically metadata for the storybook view, e.g. the title you provide there determines the title for that component’s set of stories on the storybook ui

[@muxammad2777]

@@mariusespejo ooh okay I understand now thank you very much.

[@MaxViews24]

how to deploy storybook in static site at the same time library to npm?

[@mariusespejo]

Depends on what your deployment pipeline looks like, do you have it automated? A storybook deployment in general just means run storybook build and have some server to host it, github pages might be easiest, assuming your library is open source anyways

[@vladimirmryscuk8409]

hi, great video! what's this vscode theme?

[@mariusespejo]

Either github dark or nightowl I usually used in videos

[@storm-bl5br]

teachers,the code repository could share with us ,thanks for you

[@none0n]

What if I want to publish each component into individual packages? Could you check out Turbo and how us how to set it up? Thanks.

[@mariusespejo]

All you need are separate builds and individual publishing.. yes you can also do a monorepo with turborepo

[@none0n]

@@mariusespejo I finally got this sorted out

[@none0n]

@@mariusespejo thank you

[@AdityaBrahmin]

Thank, but apart from that try to explore about real usage cases like not explaining storybook just apply it in any react application.

[@dodv6]

why i'm getting 'start-storybook' is not recognized as an internal or external command, error

[@mariusespejo]

Storybook recently came out with a new major version, and also tsdx seems like it’s not as maintained as before. Might be a good idea to just setup storybook yourself from scratch. I recently made a storybook 7 setup video if you’re interested

[@ashish2010ful]

How to host different versions of Storybook using local server and not npm or chromatic ?

[@mariusespejo]

When you build storybook it just ends up being basically a static SPA that you can use whatever to serve it up

[@thongtech1984]

Can you do a similar videos with Angular?

[@mariusespejo]

Sorry I haven’t really used much of angular, it’s all the same fundamentals though basically you use angular components instead of react… most of the core topics I covered here will be the same

[@emanuelameh5722]

Stories not displaying in my browser. Any idea why?

[@mariusespejo]

Perhaps you didn’t add .stories to the file name? If all else fails try restarting your storybook

[@thalibmuhammad9519]

which one is better? docosaurus or storybook?

[@mariusespejo]

Both are good for different purposes. Storybook is sort of a component development environment that also happens to document component usage. Docusaurus works as a general purpose docs site for… anything!

[@muxammad2777]

by the way 'subscribed: 'done'

[@oscar_cornejo]

how use lerna with this?

[@mariusespejo]

Sorry not familiar with lerna

[@haribabumanoharan5366]

1. 'tsdx' is not recognized as an internal or external command, operable program or batch file. 2. $ yarn start bash: yarn: command not found How to solve this errors ?

[@mariusespejo]

Did you install both globally?

[@thalibmuhammad9519]

whats the difference between tsdx and npx? why its exist?

[@mariusespejo]

Totally different tools. Npx is usually a command used to initialize projects using npm. Tsdx is sort of a build tool for typescript projects that are meant to be libraries (e.g. to be packed up for npm distribution). I suggest reading documentation about both.

[@Fatima-ie5kj]

sir one little request can u make a short project with react & typescript using reducer & context?

[@mariusespejo]

I actually have a vid in my channel on react + typescript and it covers reducers

[@Fatima-ie5kj]

@@mariusespejo thnx

[@AN-qw7ye]

the updated version storybook v7 cannot use npm run storybook anymore 😓

[@mariusespejo]

Storybook has a really good migration tool. You can follow this video using v6 and run the auto migration to upgrade to v7. But I do plan to make a v7 tutorial soon!

[@AN-qw7ye]

@@mariusespejo As I just install storybook it will automatically installed v7 for me. Hence, I cant run storybook as it will cause error. What I've to do is doing one more step which is ```npx storybook@latest upgrade``` then the storybook can be run again :) Awesome!! looking forward to your v7 tutorial! Cheers

[@mariusespejo]

Just posted! kzbin.info/www/bejne/eaaqi5qPpJtgjrs

[@shoaibsayyed3358]

How to add scss support for the react components and for storybook?

[@mariusespejo]

Storybook has a webpack config that you can customize

[@shoaibsayyed3358]

@@mariusespejo What I did is, I have created a tsdx.config.js and post CSS rollup plugin to handle scss to CSS compilation, and also added @storybook/preset-scss for storybook in main.js, And it is working.

[@mariusespejo]

Great! Glad you figured it out, thanks for sharing

[@islamis_powerful]

Hi there, How are you? I have issue that I have mentioned below. I'm using storybook v7. Facing this issue in your tutorial. 'start-storybook' is not recognized as an internal or external command, operable program or batch file. Thanks Regards: Muhammad Fizan Iqbal

[@mariusespejo]

V7 is a major update that just came out, please check official docs for how to migrate

[@islamis_powerful]

@@mariusespejo I'm still on same issue.I have saw about migration but didn't work.

[@mariusespejo]

It would be best for you to follow the official docs on how to create a new storybook with your project. You can use this video to give you some ideas but but be aware that it’s not going to map to v7 one to one.

[@islamis_powerful]

@@mariusespejo Yup I know. Thanks for letting me know man. I'll try it own my own. Thanks a lot for your positive response.

[@muxammad2777]

Hello Marius Again The two Buttons don't shown in the strorybook, but the two names is shown. what im doing wrong her const Template: Story = (args) => ; export const Default = () => Template.bind({}); export const Secondary = () => Template.bind({}); Secondary.args = { variant: 'secondary', children: 'I am secondary bro', }; Button is her import React, { HtmlHTMLAttributes, ReactNode } from 'react'; export interface Props extends HtmlHTMLAttributes { children: ReactNode; variant: 'primary' | 'secondary'; } export const Button = ({ children, variant = 'primary', ...props }: Props) => { return ( {children} ); }; thank you 🙏

[@muxammad2777]

my mistake and stupid mistake. 🙊🙊 export const Default = Template.bind({}); export const Secondary = Template.bind({});

[@mariusespejo]

I don’t see any obvious issues with your code. Maybe just try restarting the storybook server?

[@martinui4892]

Storybook es Free ?

[@mariusespejo]

Yes

[@jihyunlee1340]

Anyone has a problem with tsdx installation, change your node version. In my case... node v17.8.0 / npm v7.0.0 (x) node v14.17.0 / npm v 6.14.13 (o)

[@mariusespejo]

Npm v7+ installs in a slightly different way, e.g. it usually tries to automatically install peer dependencies. You can opt out of that usually by doing npm install -legacy-peer-deps

[@jihyunlee1340]

@@mariusespejo Thank you so much! Best channel I've ever watched! I'm happy to study with your tutorials.

[@mariusespejo]

Thank you, glad you like the content 🙂

[@yaktd5704]

As a Nestjs Developer, I thought you would use Angular!

[@mariusespejo]

It’s all about picking the right tool for the job

[@jihyunlee1340]

After npx tsdx create file-name, it says Failed to install dependencies Error: Command failed with exit code 1: npm install @babel/core @size-limit/preset-small-lib @storybook/addon-essentials @storybook/addon-info @storybook/addon-links @storybook/addons @storybook/react @types/react @types/react-dom babel-loader husky react react-dom react-is size-limit tsdx tslib typescript --save-dev I did install one by one and I work found out I can't install from react to typescript part. so sad...

[@mariusespejo]

Might want to create an issue on the tsdx repo, likely just a problem with the current version, I’m sure it’ll be fixed

[@jihyunlee1340]

@@mariusespejo I changed node, npm version and worked well!