Storybook 7 Crash Course - React Typescript

In this video I'll walk you through how to setup storybook for the first time as well as the fundamentals you need to know to create stories and develop ui or react JS / TS components in isolation.

[@mariusespejo]

Here's a follow up video covering interaction testing: kzbin.info/www/bejne/gpiQmYdmhJd5bac Let me know what you think! 😄

[@md.lutfullahillabib]

Can you make full tutorial from scratch including testing , build a full storybook like for a company with best coding? using vitejs, reactjs, javascript, tailwind-css. All latest versions. please? 🙏 & explaining everything.

[@mariusespejo]

@md.lutfullahillabib the fundamentals are all here, and the testing follow up is linked above, I don’t really see what else there would be to cover. Creating a “full” storybook would just be reiterating the same patterns

[@rajatguptanarwana]

Please share github repo link.

[@mariusespejo]

@rajatguptanarwana it’s not really worth cloning, there’s very little code written. I suggest running the storybook init in your own project, it will come with much better examples to play around with.

[@yajirushik2871]

Personally this one video clearly introduces Storybook for me, even if it's outdated version, works perfectly. Thank You!

[@ChrisHowardG]

Really awesome overview! Much better than some of the "Storybook in 10 min" videos I've seen. Thanks!

[@mariusespejo]

Thank you!

[@jacquitratongamanahaja979]

You are amazing Marius Espejo. The content and your explanation are very clear. It is very easy to follow along and understand everything. I can't wait to see the next video.

[@mariusespejo]

Thank you Jacquit!

[@joicyjoy9658]

Awesome ....I have got clear idea about Storybook. I am usually a fan of WebDevSimplified you tube channel. But your channel is something I have recently explored. I could say you have nailed it by vivid explanation.

[@mariusespejo]

Thank you! Glad you are enjoying the channel

[@rrenildopereiraa]

Woah, super useful!!! This is a gem, TYSM 🙏🏽

[@filiptaticek1381]

Great video! I appreciate that it is very up to date, and you explained all the things clearly.

[@waseemmn2007]

Good video, simple and to the point for a quick overview of Storybook. keep it up 👏

[@mariusespejo]

Thanks man!

[@kranthikumar5215]

The way you are explaining is awesome.....rocking star.God bless you ma n❤

[@mariusespejo]

Hey! Thank you so much 🙏

[@dobingify3130]

You're teaching is very clear and straightforward. I highly recommend this!

[@mariusespejo]

Thank you 🙏

[@rakeshkharvi4145]

Wow!, great video. very simple and elagant. beatifully expalined

[@user-zw1pz2pj3p]

Really do like the way you explain! Liked other videos too! Keep up the good work!

[@user-zw1pz2pj3p]

Do you recommend this video too? kzbin.info/www/bejne/p4TOeYWMgcidbLc

[@rajkiranchaudhary8769]

Nice crash course. Thank you for making this video

[@mariusespejo]

Totally, thanks for the comment!

[@alexandrdermenji2428]

Nice to see video about testing with storybook

[@AshlyLaMarr]

Great job!

[@mariusespejo]

Thank you! 🙌

[@f0j1]

OMG Thank you so much! There was not a good documentation about Storybook 7. Cheers from 🇨🇱 Chile! :)

[@jacquitratongamanahaja979]

It would be really nice if you can cover the visual test and interaction test in the next video.

[@mariusespejo]

posted! kzbin.info/www/bejne/gpiQmYdmhJd5bac

[@fadliblight2822]

Thankyou I quickly learn a lot from this video bro

[@ifedayoagboola2763]

A very big thanks for this. You're the best!

[@joeshepherd6590]

Great intro. Thank you!

[@ahsanabrar880]

Good video quality, thanks

[@doomnationalist]

This was really helpful, thank you!

[@veritatas678]

Cool video. I am interested in the visual testing.

[@mariusespejo]

posted! kzbin.info/www/bejne/gpiQmYdmhJd5bac

[@DanEMO592]

Amazing! Thank you so much!!! :D

[@user-bd3cr8lc5l]

thank you very much)))

[@mariusespejo]

You’re welcome!

[@loribryant4999]

I dont like the sound of your voice man, but your are really freaking good

[@dweebycat9929]

Amazing tutorial, thank you!

[@mariusespejo]

You’re welcome!

[@someoneelse1952]

Dude, did you go to css school or something? You are very fast and fluent. Thanks for the video. Very useful. I may have to use this tool for a while to determine what value this will add to my work flow & whether the benefits outweigh the cons.

[@mariusespejo]

Nah I play around with CSS until it looks right just like most people haha. As for the “cons” of storybook it’s really mostly the added code to write stories, but it’s up to you how much you utilize it. In my mind a lot of the benefits definitely outweighs a little extra code but definitely it also depends on your workflow

[@amirhossein570]

Good video

[@user-zh6hj7ng6s]

Hello, I'm new to Storybook, and I found this video very instructive. Could you share an example of how to use React Context API with Storybook? Thanks in advance.

[@mariusespejo]

Hey there, there’s nothing special about using context in storybook. Just as usual you just need to have a provider to your stories, e.g. to provide mock data. Basically just follow typical usage as shown in react docs

[@user-zh6hj7ng6s]

@@mariusespejoReally thanks

[@mariusespejo]

Here’s an example of where you can add decorators wrapping your stories, you can place providers in there storybook.js.org/docs/writing-stories/decorators#story-decorators

[@user-zh6hj7ng6s]

@@mariusespejoThank you very much.

[@david_kent7302]

Great video! Curious to know your theme you're using.

[@elkhial]

Adding this to the config object in main.ts makes the UI read the comments on PAGE REFRESH without having to restart the sevre. typescript: { reactDocgen: 'react-docgen', },

[@paieu]

I learnt something today:: anyway thanks hehe

[@mariusespejo]

😄

[@IneyeGabriel]

Do you have a discord I can follow? Your teaching is clear. The video quality is superb, and the sound is great.

[@mariusespejo]

Thank you! I don’t at this time but will think about it

[@rufok5336]

Can you make another video for storybook? This was really useful thank you so much!!

[@mariusespejo]

I can think about it! Was there something specific that you thought was missing in the video?

[@rufok5336]

@@mariusespejo I received an internship offer for a really nice company which they asked me to look at Storybook and this video was amazing from someone who never coded in my life hahaha Probably I would like to know more how it is used in a professional environment with examples etc

[@mariusespejo]

Ah I see, to a degree the fundamentals are all here. It honestly is mostly about isolated development, documentation, and testing. I do have a video on storybook interaction testing. You also can find a bunch of public company storybooks you can use to see how others are using it. Most people would use it to build design systems, component libraries, etc. Will think about other video topics for this space. Anyways good luck on your internship!

[@jacqueskorb879]

Hi. Thank you. How do I change my existing stories seeing that ComponentStory, ComponentMeta does not exist anymore in the latest version of Storybook? Any ideas? Tx in advance.

[@mariusespejo]

In newer versions of storybook if you use their upgrade command it typically will auto migrate some changes for you.

[@skoizumi291101]

Thanks for the great video. I have one question. What we be the development workflow once you are done the development? Copy and paste? Or is there any easier and better way to bring this to my application?

[@mariusespejo]

Sorry not sure I understand your question. Creating stories itself is one of the development workflows. Build components and use them as usual.

[@dawid_dahl]

Thank you! 🙏🏻

[@victorolimpio91]

Great video! you hard define variant props as 'green' on the Light component why the stories args was able to change the circle's color?

[@mariusespejo]

That’s kind of the point of args, you can set an initial prop but the controls allows you dynamically update. The core idea is it’s like documentation that isn’t static, you can play around with it

[@artem_zakharchuk]

It is very explicit, thank you! I have signed up) I use stories only to develop small Components, right? And for the App, I should use a simple Component with props (like Light.ts in your video)? I know that it is quite a stupid question, but still)

[@mariusespejo]

There is no restriction on how “small” but the point is that you start with small and those components you should be able to compose into larger components which those could have stories as well

[@sergeyfilippov2522]

thx, diamond lesson )

[@tzuilee588]

Yo, nice content man!

[@mariusespejo]

Thanks!

[@user-fh2po8id9e]

how can i add boostrap to storybook, i try to run it but my styles are not showing

[@mariusespejo]

Need to import the css in the preview.js storybook.js.org/recipes/bootstrap

[@vidyasagarkushwaha8080]

Please make view with redux and router setup

[@poojaagarwal2041]

hey am create boilerplate react with antd 5, styled-component, typescript, storybook 7 but I am confused to how can i add antd 5 css customisation file in storybook preview.js file

[@poojaagarwal2041]

import React from "react"; import { StoryObj, Meta } from "@storybook/react"; import Button from "./Button"; export default { title: "Components/Button", component: Button, } as Meta; // type individual stories type Story = StoryObj; export const Base: Story = { args: {}, }; export const Another: Story = { args: { label = "Button", }, render: (args) => , }; i am create same as your tutorial but strill getting error 'Button' refers to a value, but is being used as a type here. Did you mean 'typeof Button'?

[@danielguldbergaaes6432]

Thanks for another great video! Can I ask which browser you are using, it looks really nice!

[@mariusespejo]

The Ark browser! Check it out it’s pretty cool

[@danielguldbergaaes6432]

@@mariusespejo Thanks! It seems like I'm not cool enough to get access to it yet though ;)

[@mariusespejo]

I was on the waitlist for maybe a week or two, it shouldn’t take long!

[@danielguldbergaaes6432]

@@mariusespejo Got it today :D what did you do to get that topbar isntead of the sidebar? if you don't mind me asking.

[@mariusespejo]

I think it automatically does that for localhost but for any other site you can click on the little info icon next to the url and set it to developer mode. It’s on a per site basis unfortunately

[@TheSodaMaster87]

IDK whats going on, I follow every one of these tutorials step by step exactly and it always ends up breaking or crashing in someway. I get this error : Can't resolve "./Light" not sure why this is doing this...

[@mariusespejo]

Are you sure you’re importing with the right path?

[@TheSodaMaster87]

@@mariusespejo Just figured it out, I just had to restart StoryBook. For some reason, it was giving me errors over an old component I had already deleted..but it didnt register until restarting StoryBook. Thanks man

[@user-rm1dj7sk4c]

👍

[@nguyenkhoi3775]

Do you know the way to publish this package on npm

[@mariusespejo]

You can use tools like rollup to bundle your code, the rest of how to publish I suggest reading npm docs

[@sauravbhagat4737]

How to build this project for deploying this to npm?

[@mariusespejo]

You need a tool designed for doing those kinds of builds, take a look at tsdx as an example or you can use rollup if you want to configure it yourself

[@sauravbhagat4737]

@@mariusespejo I think tsdx is too outdated now. Have you used it recently?

[@mariusespejo]

i don’t know that i would call it outdated, it still solves the same problem although perhaps just not being actively maintained. There is a fork of it called dts-cli that you can perhaps consider. Again also if you’re concerned then you can configure tools like rollup yourself, tsdx is just the zero config get started quickly path to that

[@sauravbhagat4737]

@@mariusespejo just FYR Tried tsdx, lot of errors due to internal roll-up version conflicts. As you've suggested, using vite + roll-up config. It's working fine now. Thanks

[@user-db7fu5yo6i]

Could you share link for github repo please?

[@mariusespejo]

It’s not in a repo at the moment, I recommend just coding along with the video, there’s not much code written

[@jkmoijul8559]

can you share link to the source code?

[@mariusespejo]

It’s not on a repo. Honestly if you watch the video it’s literally just running two commands (vite & storybook) and writing the two files… it would take you 5min to write

[@kacperkepinski4990]

you missed steps

[@mariusespejo]

What do you mean?

[@henriquekramer_]

thanks

[@SkippyMcfee]

Thank you!!!