How should we support static html in storybook?

[stephenp]

Should we make separate stories for the react components vs static components?

[bernabe9]

Good question.
I think it would be confusing to have static components mixed in with react component.
But we can set up another storybook in this repository.

Also, Im not sure if supporting static html structures should be in the scope of library 🤔

Any thoughts? @a-axton @jesseocon

[a-axton]

We could have two root sections for static/react using this https://storybook.js.org/basics/writing-stories/#nesting-stories

[jstnjns]

@a-axton I think that's right on the money. There will be a lot of things that are simply foundational to build apps that aren't necessarily React components, but still need to be in here (grid, typography, CSS util classes).

[jstnjns]

I did a little bit of digging, and to add some more structure to the navigation (and better segment non-React UI from the actual components) I think it'd be a good idea to make use of the hierarchyRootSeparator (storybookjs/storybook#2452).

My proposal for initial high level organization:

• Foundation (CSS)
  • Typography
  • Grid
• Components (React)
  • Forms
  • Media
  • Global

[bernabe9]

@jstnjns I love it. This way we can keep only one storybook and differentiate between non-react and React components using two high levels

[bernabe9]

It would be good to create a new folder inside the src to include there all the stories for the foundation (CSS).

[stephenp]

Fixed with #53 - if we want additional features (like actual subfolders in addition to UI subfolders), we should re-create this issue.