A Storybook addon that shows component's information

storybook-addon-vue-info

A Storybook addon that shows component's information.

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 with these components. string[] is recommended. If specified null or false, this addon use outermost tag in template.

Example

For real example, see example directory.

GitHub