Storybook enhancements

[stefhatcher]

after switching to storybook 5, would be nice to have/look into:

• add markdown usage examples?
  • https://github.com/tuchk4/storybook-readme
  • https://github.com/storybooks/storybook/tree/master/addons/info
• live edit? https://github.com/vertexbz/storybook-addon-react-live-edit
• copy code blocks? https://github.com/Pickra/copy-code-block

[milesj]

1. I tried the info addon and it wasn't great at all. That's why I built a custom props panel. Also looked into the readme addon but it's geared towards Vue and adding README files for every component is overkill.

2. Sadly live-edit isn't v5 compatible.

3. Code block may be possible? The issue is that all code examples are in a story TS file, which isn't easily parsable to extract the specific "blocks".

[stefhatcher]

adding README files for every component is overkill.

especially since they were just converted during the migration to storybook 🤣

[Alphy11]

As a user of it, the code of how you generated the story is 80% of why I used the styleguideist before. It was far easier to figure out proper usage, especially for components that require specific children.

Also, the colors being in styleguide made it a really nice go-to when I was trying to convert designs into code in my head.

[milesj]

Added view source/story links. Looking into adding some design system stories.

[stefhatcher]

Looking into adding some design system stories.

some design system stories around colors and patterns, e.g. box shadow and button reset, would be great!

[jpdanks]

Any updates on adding design system info? need anything from us? @stefhatcher @milesj ?

[milesj]

@jpdanks Time? :P