Skip to content

Instantly share code, notes, and snippets.

@shilman
Last active February 7, 2019 23:47
Show Gist options
  • Save shilman/dadf9f38e87ad7fc22e14556de86c519 to your computer and use it in GitHub Desktop.
Save shilman/dadf9f38e87ad7fc22e14556de86c519 to your computer and use it in GitHub Desktop.
Storybook Doc Blocks

Storybook Doc Blocks

Turn your stories into living documentation.

Storybook is the leading component workshop, now we're making it a lot easier to create a storefront for your design system.

What it is:

  1. Embeddable stories
  2. New story format
  3. docs addon = notes + info

Goals:

  • Short-term (5.1?): technical infrastructure to support styleguide documentation from stories
  • Medium-term (6.0?): design and build best practices for component styleguides into Storybook
  • Long-term (???): make stories pervasive across entire front-end ecosystem

Embeddable stories

Typescript React component library for:

  • stories
  • props table
  • tsdoc / jsdoc / docgen
  • source?

Embed these components in storybook or in other documentation sites e.g. Gatsby, etc.

Show multiple stories on the same screen, using some method TBD:

  1. Multiple iframes (prototyped by @ndelangen)
  2. Embeddable react (will POC)
  3. Overriding JSX tags (will investigate)

New story format

Make it easier to write stories without exposing the story store:

  • designed/prototyped by @tmeasday (design)
  • update as needed to support doc blocks
  • document for release

Docs addon

New addon to replace notes and info:

  • Run in manager
  • Take advantage of 5.0 addons APIs
  • Reference other stories

May simply improve upon what's there, or grow into a core "storefront" feature of Storybook (TBD @domyen)

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