Info addon for Vue components
Clone or download
Latest commit e7cd8ba Oct 31, 2018

README.md

storybook-addon-vue-info

Build Status npm version GitHub license Top Language GitHub last commit code style: prettier

A Storybook addon that shows component's information.

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

Or, set this addon as a decorator.

import { storiesOf } from '@storybook/vue'

import VueInfoAddon from 'storybook-addon-vue-info'

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

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.
styles object {} Styles override. See src/options/InfoAddonOptions.ts for available fields.
summary string '' Summary for the story. Accepts Markdown.
propTables (string|Component)[]|null null Display prop tables for these components. string[] is recommended. If specified null or false, this addon use outermost tag in template. When using render method in a story component, this option is required.
propTablesExclude (string|Component)[]|null null Don't display prop tables for these components. string[] is recommended.

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: {
      // These description will appear in `description` column in props table
      label: 'A label for my awesome component',
      visible: 'Whether component is visible or not'
    }
  })))

NOTE: This addon cannot distinguish props that have same name. For example, both <component-a> and <component-b> have prop named foo, and propsDescription has foo: 'bar', then description for foo of both components will be bar.

Example

For real example, see example directory.