@storybook-addons/docs ·

Documentation layout for official @storybook/addon-docs with the ability to embed examples and placeholders.

Install

npm i -D @storybook-addons/docs @storybook/addon-docs

Usage

1. Add @storybook/addon-docs into addons in main.js file:

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

2. Set DocsPage in preview.js file:

import { addParameters } from '@storybook/react'
import { DocsPage } from '@storybook-addons/docs'

addParameters({
  docs: {
    container: DocsPage,
  },
})

3. Add documentation for your story:

import documentation from './Component.md'

export default {
  title: 'Controls/Component',
  parameters: {
    docs: {
      readme: documentation,
    },
  },
}

Params

| Option | Description | Default | | ---------------- | ------------------------------------------------ | ------- | | enableNavigation | Show navigation at right sidebar | true | | readme | Documentation content | | | placeholders | Object with placeholder which should be replaced | |

Markdown syntax

Inline stories

Your can embeded single or multipile stories (with tabs) in documentation:

<!-- single story -->

{{%story::story-id%}}

<!-- multi stories with tab names -->

{{%story::tabName:story-id|tabName:story-id%}}

Placeholders

If necessary you can embedded placeholder for example other part of documentation:

{{%inject::placeholderName%}}

License

Project is MIT licensed.