storybook-markdown-decorator

1.0.7 • Public • Published

Storybook Markdown Decorator

Getting Started

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'
}

Usage

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)

Contributing

Feel free to fork this repo, report an issue, or submit a pull request!

Readme

Keywords

none

Package Sidebar

Install

npm i storybook-markdown-decorator

Weekly Downloads

2

Version

1.0.7

License

MIT

Unpacked Size

25.9 kB

Total Files

11

Last publish

Collaborators

  • idmontie