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.
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.
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
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
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
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?
@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?
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 :(
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.
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
I can't thank you enough. I completely understand the storybook becz of your 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.
the most underrated tutorial !!
Good intro tutorial to Storybook.
Thanks for teaching how to organise my storybook with subfolder.
Good tutorial video in general, but the editing was fantastic! You kept everything moving at a steady pace with no unneeded detours.
Best tut on the tube
e: I havent even heard of this before. I wonder if it comes in tsc flavor.
I think I just found my favorite coding tutorials
A great tutorial, it's helped me very much, thank you!
Beautiful explaination! 🙏
Thank you, be blessed for the good work.
great tutorial, and love the way you positioned and cut your camera feed overlay!
Great tutorial!
Very useful video.
Thanks
Great, thanks for the practical training 👍
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.
thanks very helpful
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
cool，but how can storybook components used by reactjs for example?
Beautiful explanation🚀 thankyou
That was great! Is there a followup on how to use this setup to publish a component/hooks library to npm? Thank you
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
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
Fantastic tutorial!
Do you prefer yarn or npm when developing with react?
Thanks :D new sub here
hey after I do this can I just build with rollup and make it an npm package without adding anything further ?
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
perfect. thanks
It helped. Thanks :-)
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.
What VScode theme is this?
Any tutorial with mdx?
What device are you using? Yours is fast, but Mine is slow, delete and installing storybook
what if a component gets its some props from an external api call? how storybook can handle this props?
Where did you get that shirt? It’s so cool!!
Birthday present!
life saver !!
Should you NOT use storybook for normal react apps? Like, is this best used for libraries?
Hey! What is that theme you are using?
Yes
I think it's called LaserWave
@@s3nsej118 Thanks!
excellent tutorial....
Nice bro.
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 )
good one
Storybook can be work with native JavaScript?
@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.
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 :(
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'.
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!
understood, but its sooo fast, as everything, these days... sorry ))
Seems like lots of extra work
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