Skip to content

Latest commit

 

History

History
100 lines (66 loc) · 3.46 KB

README.md

File metadata and controls

100 lines (66 loc) · 3.46 KB
Raw

Storybook Docs Common Setup

Storybook Docs transforms your Storybook stories into world-class component documentation. Docs supports all web frameworks that Storybook supports.

Popular frameworks like React/Vue/Angular/Ember/Web components have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations.

Installation

First add the package. Make sure that the versions for your @storybook/* packages match:

yarn add -D @storybook/addon-docs@next

Then add the following to your .storybook/main.js addons:

module.exports = {
  addons: ['@storybook/addon-docs'],
};

DocsPage

When you install docs you should get basic DocsPage documentation automagically for all your stories, available in the Docs tab of the Storybook UI.

MDX

MDX is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.

Docs has peer dependencies on react, react-is, and babel-loader. If you want to write stories in MDX, you'll need to add these dependencies as well:

yarn add -D react react-is babel-loader

Then update your .storybook/main.js to make sure you load MDX files:

module.exports = {
  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
};

Finally, you can create MDX files like this:

import { Meta, Story, Props } from '@storybook/addon-docs/blocks';

<Meta title='App Component' />

# App Component

Some **markdown** description, or whatever you want.

<Story name='basic' height='400px'>{() => {
return { ... }; // should match the typical story format for your framework
}}</Story>

IFrame height

In the "common" setup, Storybook Docs renders stories inside iframes, with a default height of 60px. You can update this default globally, or modify the iframe height locally per story in DocsPage and MDX.

To update the global default, modify .storybook/preview.js:

import { addParameters } from '@storybook/ember';

addParameters({ docs: { iframeHeight: 400 } });

For DocsPage, you need to update the parameter locally in a story:

export const basic = () => ...
basic.parameters = {
  docs: { iframeHeight: 400 }
}

And for MDX you can modify it as an attribute on the Story element:

<Story name='basic' height='400px'>{...}</Story>

More resources

Want to learn more? Here are some more articles on Storybook Docs: