poi-plugin-storybook v10.0.0-alpha.0
poi-plugin-storybook
Install
yarn add poi-plugin-storybook --dev
# Use React?
yarn add @storybook/react --dev
# Use Vue?
yarn add @storybook/vue --dev
You can use storybook-react
and storybook-vue
which are drop-in replacements for @storybook/react
and @storybook/vue
without unnecessary build dependencies if you want.
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, suffix poi commands with --storybook
to see it in action:
poi --storybook
poi build --storybook
Here's the source code of a complete example.
Note:
templateCompiler
istrue
by default in--storybook
mode.
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 = {
extendWebpack(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
6 years ago