Storybook-addon-vue-info NPM

Top Language

A Storybook addon that shows component's information.

Demo

Screenshot

Install

npm install --save-dev storybook-addon-vue-info

Usage

Wrap story with withInfo function.

import { storiesOf } from '@storybook/vue'

import { withInfo } from 'storybook-addon-vue-info'

storiesOf('MyComponent', module).add(
  'foo',
  withInfo({
    summary: 'Summary for MyComponent'
  })(() => ({
    components: { MyAwesomeComponent },
    template: '<my-awesome-component/>'
  }))
)

You can specify default options with setDefaults.

// config.js
import { setDefaults } from 'storybook-addon-vue-info'

setDefaults({
  header: false
})

NOTE: Using this addon as decorator is deprecated (detail).

Setup docgen loader

// .storybook/webpack.config.js
module.exports = {
  // ...
  module: {
    // ...
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'storybook-addon-vue-info/loader',
        enforce: 'post'
      }
    ]
    // ...
  }
  // ...
}

NOTE: This loader tries to attach component's meta generated by vue-docgen-api, but sometimes Module not found error occures in dev mode then rebuilded immediately.

Options

This addon accepts @storybook/addon-info like options.

Name	Data type	Default value	Description
`header`	`boolean`	`true`	Whether to show header or not.
`source`	`boolean`	`true`	Whether to show source(usage) or not.
`wrapperComponent`	`Component`	default wrapper	Override docs component.
`summary`	`string`	`''`	Summary for the story. Accepts Markdown.
`components`	`{ [name: string]: Component }\\|null`	`null`	Display info for these components. Same type as component's `components` property. If `null` or `false`, this addon tries to use `components` property in story component then outermost tag in `template`.
`docsInPanel`	`boolean`	`true`	Whether to show docs in addon panel.
`useDocgen`	`boolean`	`true`	Whether to use result of vue-docgen-api.

In addition to addon options, we have a component option.

`propsDescription`

If you want to add desciprion for component props, you can add propsDescription option for your story component.

Assume <my-awesome-component> have props label and visible.

storiesOf('MyComponent', module).add(
  'foo',
  withInfo({})(() => ({
    components: { MyAwesomeComponent },
    template: '<my-awesome-component/>',
    propsDescription: {
      MyAwesomeComponent: {
        // These description will appear in `description` column in props table
        label: 'A label for my awesome component',
        visible: 'Whether component is visible or not'
      }
    }
  }))
)