Skip to content

Instantly share code, notes, and snippets.

@yogain123

yogain123/Storybook

Last active February 24, 2024 13:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yogain123/9fc02c012991b5709045c821a13fb1dc to your computer and use it in GitHub Desktop.
Save yogain123/9fc02c012991b5709045c821a13fb1dc to your computer and use it in GitHub Desktop.
Download ZIP
Storybook
@yogain123
Copy link
Author

What and Why?

Screen Shot 2022-11-12 at 2 19 55 PM

@yogain123
Copy link
Author

start

npx sb init

Screen Shot 2022-11-12 at 2 21 35 PM

@yogain123
Copy link
Author

writing stories

Screen Shot 2022-11-12 at 2 26 00 PM

Screen Shot 2022-11-12 at 2 26 28 PM

Screen Shot 2022-11-12 at 2 28 01 PM

Screen Shot 2022-11-12 at 2 28 06 PM

When you run storybook command, then it goes to .storybook and main.js and check patter to pickup snd run storybook files

@yogain123
Copy link
Author

Renaming Stories

Screen Shot 2022-11-12 at 2 32 40 PM

Screen Shot 2022-11-12 at 2 32 46 PM

@yogain123
Copy link
Author

Story Hirercy

Screen Shot 2022-11-12 at 2 33 38 PM

Screen Shot 2022-11-12 at 2 33 45 PM

@yogain123
Copy link
Author

Story within Story

Screen Shot 2022-11-12 at 2 35 07 PM

Screen Shot 2022-11-12 at 2 35 22 PM

@yogain123
Copy link
Author

Using args

Screen Shot 2022-11-12 at 2 37 29 PM

Screen Shot 2022-11-12 at 2 37 43 PM

Screen Shot 2022-11-12 at 2 38 30 PM

Screen Shot 2022-11-12 at 2 38 40 PM

@yogain123
Copy link
Author

Decorators in Storybook

lets say you want to center all stories to center, then what you will do, this->

Screen Shot 2022-11-12 at 2 40 20 PM

but instread you can use decoratos to give to all stories, like beloew

Screen Shot 2022-11-12 at 2 41 19 PM

Or you can also add global Decorator

Screen Shot 2022-11-12 at 2 42 05 PM

@yogain123
Copy link
Author

Add ons in Storybook

Screen Shot 2022-11-12 at 2 45 04 PM

Screen Shot 2022-11-12 at 2 45 11 PM

Screen Shot 2022-11-12 at 2 46 24 PM

Screen Shot 2022-11-12 at 2 46 30 PM

@yogain123
Copy link
Author

Building Storybook

run the build command, it will generstor static web app, put/deploy it in github pages

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment