storybook-addon-vue-info
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.2 • Public • Published

    Want to automatically generate beautiful docs or write stories in docs? Try Storybook Docs!

    Docs Mode (docs-addon) is a successor of info-addon, and supports many frameworks/libraries, include Vue.js!


    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.

    Requirements

    • @storybook/vue>=4.0.0

    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 a webpack loader in order to extract component information with vue-docgen-api.

    npm install --save-dev vue-docgen-loader vue-docgen-api
     
    # yarn add -D vue-docgen-loader 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: 'vue-docgen-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.
    previewClassName string undefined Class name passed down to preview container.
    previewStyle Style object undefined Style passed down to preview container.
    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.
    casing "kebab" \| "camel" \| "pascal" \| undefined undefined Which case to use. For detailed usage, see below.

    Valid casing options

    {
      // Don't convert names
      casing: undefined
    }
     
    {
      // Show names in kebab-case
      casing 'kebab'
    }
     
    {
      // Show prop names in camelCase and
      // Show component names in PascalCase
      casing: 'camel' // or 'pascal'
    }
     
    {
      // Show prop names in camelCase and
      // Show component names in kebab-case
      casing: {
        props: 'camel',
        component: 'kebab'
      }
    }

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

    Set descriptions manually

    With vue-docgen-api, the addon automatically shows descriptions and types extracted by docgen (see example in vue-docgen-api README). However, if you want to explicitly specify desciprion for component props, events or slots, add description 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/>',
          description: {
            MyAwesomeComponent: {
              props: {
                // These description will appear in `description` column in props table
                label: 'A label for my awesome component',
                visible: 'Whether component is visible or not'
              },
              events: {
                click: 'Event for user clicking the component'
              },
              slots: {
                default: 'Place text or icon here'
              }
            }
          }
        }),
        {
          info: true
        }
      )

    For more detail, please take a look at live example.

    Example

    For real example, see example directory.

    Keywords

    Install

    npm i storybook-addon-vue-info

    DownloadsWeekly Downloads

    12,683

    Version

    1.4.2

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar