Here's a follow up video covering interaction testing: kzread.info/dash/bejne/fpthyrZpf5WsZ6g.html 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

4 ай бұрын

Please share github repo link.

@mariusespejo

4 ай бұрын

@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.

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

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!

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

@mariusespejo

Жыл бұрын

Thank you 🙏

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

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

@mariusespejo

3 ай бұрын

Thank you!

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

7 ай бұрын

Thank you! Glad you are enjoying the channel

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

@user-zw1pz2pj3p

Жыл бұрын

Do you recommend this video too? kzread.info/dash/bejne/o4efqrSPfMbQZrg.html

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

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

Nice to see video about testing with storybook

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

@mariusespejo

2 ай бұрын

Thanks man!

Great intro. Thank you!

This was really helpful, thank you!

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

Thankyou I quickly learn a lot from this video bro

Amazing! Thank you so much!!! :D

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

@mariusespejo

5 ай бұрын

Hey! Thank you so much 🙏

Nice crash course. Thank you for making this video

@mariusespejo

2 ай бұрын

Totally, thanks for the comment!

Amazing tutorial, thank you!

@mariusespejo

Жыл бұрын

You’re welcome!

Good video quality, thanks

Great job!

@mariusespejo

2 ай бұрын

Thank you! 🙌

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

Thank you! 🙏🏻

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

@mariusespejo

Жыл бұрын

posted! kzread.info/dash/bejne/fpthyrZpf5WsZ6g.html

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

Thank you!!!

Yo, nice content man!

@mariusespejo

Жыл бұрын

Thanks!

Cool video. I am interested in the visual testing.

@mariusespejo

Жыл бұрын

posted! kzread.info/dash/bejne/fpthyrZpf5WsZ6g.html

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

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

Good video

thx, diamond lesson )

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

6 ай бұрын

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

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

6 ай бұрын

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

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

@mariusespejo

11 ай бұрын

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

@rufok5336

11 ай бұрын

@@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

11 ай бұрын

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!

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

I learnt something today:: anyway thanks hehe

@mariusespejo

6 ай бұрын

😄

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

4 ай бұрын

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

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

6 ай бұрын

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

6 ай бұрын

@@mariusespejoReally thanks

@mariusespejo

6 ай бұрын

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

6 ай бұрын

@@mariusespejoThank you very much.

👍

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

what is the extension in 9:52?

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

11 ай бұрын

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'?

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

@mariusespejo

7 ай бұрын

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

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

11 ай бұрын

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

@TheSodaMaster87

11 ай бұрын

@@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

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', },

Do you know the way to publish this package on npm

@mariusespejo

10 ай бұрын

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

Please make view with redux and router setup

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

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

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

you missed steps

@mariusespejo

3 ай бұрын

What do you mean?

thanks