@poi/plugin-storybook
## Install
Last updated 2 years ago by rem .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @poi/plugin-storybook 
SYNC missed versions from official npm registry.

plugin-storybook

Install

yarn add @poi/plugin-storybook --dev

# Use React?
yarn add @storybook/react --dev
# Use Vue? 
yarn add @storybook/vue --dev

Usage

The first entry will be used as storybook config file, and the second one (optional) will be used as storybook addons file.

// poi.config.js
module.exports = {
  // Use your storybook config as entry
  entry: '.storybook/config.js',
  // If you want storybook addons:
  // entry: ['.storybook/config.js', '.storybook/addons.js']
  plugins: [
    require('@poi/plugin-storybook')()
  ],

  // To use with React:
  // The order matters!
  plugins: [
    require('@poi/plugin-react')(),
    require('@poi/plugin-storybook')()
  ]
}

Then create storybook config file and components:

Just like how the official storybook guide told you, but without installing storybook cli.

// .storybook/config.js
import { configure } from '@storybook/vue'

function loadStories() {
  // You can require as many stories as you need.
  require('../src/stories')
}

configure(loadStories, module)

And your actual story src/stories/index.js:

import { storiesOf } from '@storybook/vue'

import Mybutton from './path/to/your/lovely/Button.vue'

storiesOf('MyButton', module)
  .add('round component', () => ({
    components: { MyButton },
    template: '<my-button :rounded="true">rounded</my-button>'
  }))
  .add('jsx', () => ({
    render() {
      return <MyButton>JSX</MyButton>
    }
  }))

And you're all set, run poi to see your storybook in action:

poi
poi build

Here's the source code of a complete example.

Using markdown file

You can import .md files and they will be parsed by markdown-loader using marked, however you might want to use your own loader to parse markdown files:

// poi.config.js
module.exports = {
  chainWebpack(config) {
    const markdownRule = config.rules.get('markdown')
    // Use markdown-it instead
    markdownRule.replace('markdown-loader', 'markdown-it-loader', {
      /* maybe some options */
    })
  }
}

Options

managerTemplate

Type: string
Default: ./lib/manager.ejs

Path to the HTML template for generated index.html.

iframeTemplate

Type: string
Default: ./lib/iframe.ejs

Path to the HTML template for generated iframe.html.

markdown

Type: boolean
Default: undefined

Whether to support .md files or not.

Gotchas

Vue-devtools does not work for now.

License

MIT © EGOIST

Current Tags

  • 11.0.1                                ...           latest (2 years ago)
  • 10.0.0-beta.10                                ...           next (2 years ago)

14 Versions

  • 11.0.1                                ...           2 years ago
  • 11.0.0                                ...           2 years ago
  • 10.0.1                                ...           2 years ago
  • 10.0.0                                ...           2 years ago
  • 10.0.0-rc.3                                ...           2 years ago
  • 10.0.0-rc.2                                ...           2 years ago
  • 10.0.0-rc.1                                ...           2 years ago
  • 10.0.0-rc.0                                ...           2 years ago
  • 10.0.0-beta.10                                ...           2 years ago
  • 10.0.0-beta.9                                ...           3 years ago
  • 10.0.0-beta.8                                ...           3 years ago
  • 10.0.0-beta.7                                ...           3 years ago
  • 10.0.0-beta.2                                ...           3 years ago
  • 10.0.0-beta.1.0                                ...           3 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 17
Dependencies (2)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |