Skip to content

Latest commit

 

History

History
 
 

common

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
index.js
index.js
 
 
preset.js
preset.js
 
 

README.md

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 and babel-loader. If you want to write stories in MDX, you'll need to add these dependencies as well:

yarn add -D react 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, ArgsTable } 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, especially if you work with some components using fixed or sticky positions, 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: