hive/frontend/node_modules/@storybook/addon-docs/common

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 3/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
• DocsPage
• MDX
• IFrame height
• More resources

Installation

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

yarn add -D @storybook/addon-docs

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

export default {
  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. If you want to write stories in MDX, you may need to add this dependency as well:

yarn add -D react

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

export default {
  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
};

Finally, you can create MDX files like this:

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

<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:

export const parameters = { docs: { story: { iframeHeight: '400px' } } };

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

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

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:

• References: DocsPage / MDX / FAQ / Recipes / Theming / Props
• Announcements: Vision / DocsPage / MDX / Framework support
• Example: Storybook Design System