yarn add --dev storybook-markdown-decorator babel-plugin-transform-decorators-legacy react-markdown
Then add the following to you .babelrc
file:
"plugins": [
"transform-decorators-legacy"
]
You'll probably want to add the following alias for your non-storybook webpack:
{
'storybook-markdown-decorator': 'storybook-markdown-decorator/dist/no-storybook'
}
The following function signatures are available:
@storybook(title[String], name [String], description [String], reactExample [Function])
@storybook(name [String], description [String], reactExample [Function])
@storybook(name [String], description [String])
@storybook(description [String])
All parameters are optional, however:
Example:
import storybook from 'storybook-markdown-decorator';
@storybook('default', `
# \\<MyComponent /\\>
You can use any **markdown** here
\`\`\`
<MyComponent>
Test
</MyComponent>
\`\`\`
For more information, see:
* [linkTo('MyComponent', 'A')](A)
* [linkTo('MyComponent', 'B')](B)
`,
() => (
<MyComponent>
Test
</MyComponent
))
class MyComponent extends Component {
// ...
}
You can use a linkTo
in your markdown using the following (albeit odd) syntax:
[linkTo('Component Name', 'Story Name')](Text goes here)
Feel free to fork this repo, report an issue, or submit a pull request!