Open-Assistant icon indicating copy to clipboard operation
Open-Assistant copied to clipboard

Setup Storybook for website

Open fozziethebeat opened this issue 2 years ago • 2 comments

Configure and setup Storybook to run on any visual components we build. This will help anyone developing components test their visual look and feel without worrying about any backend business.

Key qualities:

  • The setup should include both tailwindcss and chakra-ui styles to ensure the storybook view matches what'll be in the website.
  • Any storybook setup should make it easy to mock out the data needed.
  • Storybook can focus just on components in components/ rather than pages/
  • Can be run with npm run storybook

It would also be helpful to add to the README how someone can setup a storybook config for a new component they write (such as pointing to an example they can copy).

fozziethebeat avatar Dec 28 '22 05:12 fozziethebeat

I have some experience in using/setting up storyboard and could try to do this

jojopirker avatar Dec 28 '22 06:12 jojopirker

Great! I've done it before with nextJS so if you run into issues please let me know.

For setting up the component stories, an idea would be to let us write our components like in this example. Then we can write the component and the story in the same directory and storybook just figures it all out.

fozziethebeat avatar Dec 28 '22 06:12 fozziethebeat