Skip to content

Instantly share code, notes, and snippets.

@tmeasday
Last active February 14, 2019 22:54
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 tmeasday/0be69fb669f5cc37e983f0d697705a8f to your computer and use it in GitHub Desktop.
Save tmeasday/0be69fb669f5cc37e983f0d697705a8f to your computer and use it in GitHub Desktop.
Docs mode "low profile" design
  1. Refactor each view layer to export a "story" component

(sort of like I imagined on this PR: storybookjs/storybook#3360)

So, you could this:

import React from 'react';
import { Story }  from '@storybook/react';

import { myStory } from './MyComponent.stories';

export () => (
  <div>
    <h1>Here's my component</h1>
    <Story story={myStory} />
  </div>
)

The above works in React, but essentially the same code can be written in any view layer (importing from the correct storybook app package of course).

  1. Create "prop table" etc components in a lightweight way that can be consumed in any view layer:
import React from 'react';
import { Story, Doc }  from '@storybook/react';
import { PropTable } from '@storybook/docs';

import { myStory } from './MyComponent.stories';

export () => (
  <div>
    <h1>Here's my component</h1>
    <Story story={myStory} />
    <Doc component={PropTable} story={myStory} />
  </div>
)

Note again that the above is written in React but could be any view layer.

The PropTable export is something that can easily be rendered within any view layer. Options include:

  1. Using something self contained like Svelte.
  2. Using React (which embeds OK?), at a cost of including the React runtime in every x-framework docs app.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment