A Storybook addon that shows component's information

A Storybook addon that shows component's information

A Storybook addon that shows component's information.

logo

Build Status npm version Monthly download GitHub license code style: prettier


storybook-addon-vue-info

A Storybook addon that shows Vue component's information.

Getting started

First, install the addon.

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

# yarn add -D storybook-addon-vue-info

Then register in addons.js.

// .storybook/addons.js

// Don't forget "/lib/" !!
import 'storybook-addon-vue-info/lib/register'

And setup custom webpack loader in order to extract component information with vue-docgen-api.

// .storybook/webpack.config.js

// This example uses "Full control mode + default".
// If you are using other mode, add payload of `config.module.rules.push` to rules list.
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.vue$/,
    loader: 'storybook-addon-vue-info/loader',
    enforce: 'post'
  })

  return config
}

Usage

Add withInfo decorator then set info options to the story.

NOTE: info option is required for the addon. If you omit it, the addon does nothing.

import { storiesOf } from '@storybook/vue'

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

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

You can set the addon as global decorator.

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

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

addDecorator(withInfo)

To set default options, use setDefaults.

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

setDefaults({
  header: false
})

For more details, see live examples.

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 inline 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.
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 explicitly specify desciprion for component props, add propsDescription option for your story component.

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

storiesOf('MyComponent', module)
  .addDecorator(withInfo)
  .add(
    'foo',
    () => ({
      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'
        }
      }
    }),
    {
      info: true
    }
  )

Example

For real example, see example directory.

Github Repository