@storybook-addons/docs · 

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

Install

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

Usage

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

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

2. Set DocsPage in preview.js file:

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

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

3. Add documentation for your story:

`js
import documentation from './Component.md'

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

$3

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

Markdown syntax

$3

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

`markdown


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

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

$3

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

`markdown
{{%inject::placeholderName%}}
``

License

Project is MIT licensed.