Finally! I understand what storybook is for. Omg, I spent 12h today and only now I get it. Its for a component library without an app... Thank you my dude.
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
Would you recommend MDX over normal stories. What are possible pros and cons with using both? Great video by the way. Leading my team to create a component library and this was very helpful
I am getting error in project setup at running npm sb init error @storybook/addon-postcss@3.0.0-alpha.1: The engine "yarn" is incompatible with this module. Expected version "^1.17.0". Got "1.13.0" error Found incompatible module
For those of you that run into this error when starting storybook --> Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' Just run this --> npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware
How would this work regarding business logic of components? If you can't re-use them, is there any tangible benefit to creating re-useable components through storybook for complex components coupled with unique business logic?
hmm for me adding proptypes does not automatically generates the controls. I would have to manually go to stories and add args or argTypes to show the controls :(
@34:45, how are args getting into the function? I see that it works, but whats the mechanism? Put another way: how is adding a property to Default (Default.args = {...} ) connected to Default(args)? Hows args getting in there?
Hello , storybook has a problem when installing it. My audit was clean before I installed storybook. It says: "19 high severity vulnerabilities". These vulnerabilities are about "chokidar" , "webpack" and so on. Could you tell me how to solve this problem ? I have googled and tried many things and as far as I have become I think it's Storybook's own problem. Anyone any help ? Thanks in advance.
Thanks, shows truly high level knowledge, yet swoops down low enough so develepers of every ability can cross the finish line! There are not enough teachers like this. ⭐Liked and subscribed.
Cool tutorial man, thank you!
Small tip at 5:00, you can just type " code . " in command line and it'll open vscode in current directory.
now this is how you learn storybook...thanks man your content is top notch
the most underrated tutorial !!
Finally! I understand what storybook is for. Omg, I spent 12h today and only now I get it. Its for a component library without an app... Thank you my dude.
It can also be for an app with custom components or complex components. If you want to document and test your components in isolation is a good unit.
I can't thank you enough. I completely understand the storybook becz of your tutorial 😄
Good intro tutorial to Storybook.
Thanks for teaching how to organise my storybook with subfolder.
I think I just found my favorite coding tutorials
Best tut on the tube
e: I havent even heard of this before. I wonder if it comes in tsc flavor.
Good tutorial video in general, but the editing was fantastic! You kept everything moving at a steady pace with no unneeded detours.
Thank you, be blessed for the good work.
A great tutorial, it's helped me very much, thank you!
Beautiful explaination! 🙏
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
great tutorial, and love the way you positioned and cut your camera feed overlay!
Great, thanks for the practical training 👍
Great tutorial!
That was great! Is there a followup on how to use this setup to publish a component/hooks library to npm? Thank you
Very useful video.
Thanks
cool，but how can storybook components used by reactjs for example?
Great tutorial
Would you recommend MDX over normal stories. What are possible pros and cons with using both? Great video by the way. Leading my team to create a component library and this was very helpful
Beautiful explanation🚀 thankyou
Where did you get that shirt? It’s so cool!!
Birthday present!
thanks very helpful
I am getting error in project setup at running npm sb init
error @storybook/addon-postcss@3.0.0-alpha.1: The engine "yarn" is incompatible with this module. Expected version "^1.17.0". Got "1.13.0"
error Found incompatible module
hey after I do this can I just build with rollup and make it an npm package without adding anything further ?
Fantastic tutorial!
For those of you that run into this error when starting storybook --> Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Just run this --> npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware
Thanks, that helps a lot
Thank you
Awesome
Thanks :D new sub here
Do you prefer yarn or npm when developing with react?
What VScode theme is this?
Hey! What is that theme you are using?
Yes
I think it's called LaserWave
@@s3nsej118 Thanks!
What device are you using? Yours is fast, but Mine is slow, delete and installing storybook
How would this work regarding business logic of components? If you can't re-use them, is there any tangible benefit to creating re-useable components through storybook for complex components coupled with unique business logic?
If you use those components throughout the codebase and you want to document how they are used and how to use them, then yes.
Any tutorial with mdx?
I have a question How to use the block in the MDX file. when I try it the code color come gray ( and I hade the language :jsx attribute )
It helped. Thanks :-)
what if a component gets its some props from an external api call? how storybook can handle this props?
Nice bro.
excellent tutorial....
life saver !!
Should you NOT use storybook for normal react apps? Like, is this best used for libraries?
anyone know how to get ccs modules working? I'm getting 'CSS Loader has been initialized using an options object that does not match API schema'.
hmm for me adding proptypes does not automatically generates the controls. I would have to manually go to stories and add args or argTypes to show the controls :(
perfect. thanks
good one
@34:45, how are args getting into the function? I see that it works, but whats the mechanism? Put another way: how is adding a property to Default (Default.args = {...} ) connected to Default(args)? Hows args getting in there?
I think it's spread operation,
Template.bind({}) makes it a copy/paste. Thus, the args ride along and you can manipulate them since they're spread.
Storybook can be work with native JavaScript?
Tutorials is more about, how to delete files :-)
Awesome video, but one thing: this must be the first time I've heard someone pronounce `Enum` as `eenoom`
Enumerate or enumeration is pronounced "ee-noom-er-ate", so calling it either "ee-noom" or "ee-numb" is pretty common.
can anyone explain what " Template.bind({}) " do here in stories?
I think it adds a sub list on the left sides components accordeon. I mean visually not sure of what it really does under the hood besides that.
it helps to bind different variations of your component to your template function
Why is he removing react-scripts?
23:36
Storybook is free ?
Yes
"--save"? You must be old ;p
...and if that is the case then you should mind your elders and learn something! Oh that's right... Trolls don't believe in such constructs!
Seems like lots of extra work
understood, but its sooo fast, as everything, these days... sorry ))
Hello , storybook has a problem when installing it. My audit was clean before I installed storybook. It says: "19 high severity vulnerabilities". These vulnerabilities are about "chokidar" , "webpack" and so on. Could you tell me how to solve this problem ? I have googled and tried many things and as far as I have become I think it's Storybook's own problem. Anyone any help ? Thanks in advance.
Great tutorial
Thanks, shows truly high level knowledge, yet swoops down low enough so develepers of every ability can cross the finish line! There are not enough teachers like this. ⭐Liked and subscribed.