Switch to use decorator API

README.md

@@ -26,27 +26,46 @@ A Storybook addon that shows component's information.
 ## Install
 
 ```sh
-npm install --save-dev storybook-addon-vue-info
+npm install --save-dev storybook-addon-vue-info@alpha
+
+# or
+# yarn add -D storybook-addon-vue-info@alpha
 ```
 
 ## Usage
 
-Wrap story with `withInfo` function.
+Add `withInfo` decorator then set `info` options to the story.
 
 ```js
 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/>'
-  }))
-)
+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.
+
+```js
+// config.js
+import { addDecorator } from '@storybook/vue'
+
+import { withInfo } from 'storybook-addon-vue-info'
+
+addDecorator(withInfo)
 ```
 
 You can specify default options with `setDefaults`.
@@ -60,8 +79,6 @@ setDefaults({
 })
 ```
 
-NOTE: Using this addon as decorator is deprecated ([detail](https://github.com/pocka/storybook-addon-vue-info/commit/d11151d69988f3a0f192e04e9714e154578094a6)).
-
 ### Setup docgen loader
 
 ```js
@@ -84,12 +101,8 @@ module.exports = {
 }
 ```
 
-NOTE: This loader tries to attach component's meta generated by [vue-docgen-api](https://github.com/vue-styleguidist/vue-docgen-api), but sometimes `Module not found` error occures in dev mode then rebuilded immediately.
-
 ## Options
 
-This addon accepts [@storybook/addon-info](https://github.com/storybooks/storybook/tree/master/addons/info) like options.
-
 | Name               | Data type                             | Default value                                       | Description                                                                                                                                                                                                 |
 | ------------------ | ------------------------------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `header`           | `boolean`                             | `true`                                              | Whether to show header or not.                                                                                                                                                                              |
@@ -109,20 +122,25 @@ If you want to add desciprion for component props, you can add `propsDescription
 Assume `<my-awesome-component>` have props `label` and `visible`.
 
 ```js
-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'
+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

example/.storybook/config.js

@@ -1,14 +1,18 @@
-import { configure } from '@storybook/vue'
+import { configure, addDecorator } from '@storybook/vue'
 
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
+import { withInfo } from 'storybook-addon-vue-info'
+
 import BaseButton from '../components/BaseButton.vue'
 
 Vue.component('base-button', BaseButton)
 
 Vue.use(VueI18n)
 
+addDecorator(withInfo)
+
 const req = require.context('../stories', true, /\.stories\.js$/)
 
 function loadStories() {

example/stories/compatibilities/official/a11y.stories.js

@@ -1,7 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 
 import { checkA11y } from '@storybook/addon-a11y'
-import { withInfo } from 'storybook-addon-vue-info'
 
 import MyButton from './components/MyButton.vue'
 
@@ -14,17 +13,23 @@ storiesOf('Compatibilities/@storybook/addon-a11y', module)
   .addDecorator(checkA11y)
   .add(
     'panel',
-    withInfo({})(() => ({
+    () => ({
       components: { MyButton },
       template: '<my-button bad-a11y>FOO</my-button>'
-    }))
+    }),
+    {
+      info: {}
+    }
   )
   .add(
     'inline',
-    withInfo({
-      docsInPanel: false
-    })(() => ({
+    () => ({
       components: { MyButton },
       template: '<my-button bad-a11y>FOO</my-button>'
-    }))
+    }),
+    {
+      info: {
+        docsInPanel: false
+      }
+    }
   )

example/stories/compatibilities/official/backgrounds.stories.js

@@ -1,14 +1,10 @@
 import { storiesOf } from '@storybook/vue'
 
 import { withBackgrounds } from '@storybook/addon-backgrounds'
-import { withInfo } from 'storybook-addon-vue-info'
 
 import MyButton from './components/MyButton.vue'
 
-storiesOf(
-  'Compatibilities/@storybook/addon-backgrounds',
-  module
-)
+storiesOf('Compatibilities/@storybook/addon-backgrounds', module)
   .addDecorator(
     withBackgrounds([
       { name: 'twitter', value: '#00aced' },
@@ -18,17 +14,23 @@ storiesOf(
   )
   .add(
     'panel',
-    withInfo({})(() => ({
+    () => ({
       components: { MyButton },
       template: '<my-button>FOO</my-button>'
-    }))
+    }),
+    {
+      info: {}
+    }
   )
   .add(
     'inline',
-    withInfo({
-      docsInPanel: false
-    })(() => ({
+    () => ({
       components: { MyButton },
       template: '<my-button>FOO</my-button>'
-    }))
+    }),
+    {
+      info: {
+        docsInPanel: false
+      }
+    }
   )

example/stories/compatibilities/official/knobs.stories.js

@@ -1,7 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 
 import { withKnobs, text } from '@storybook/addon-knobs'
-import { withInfo } from 'storybook-addon-vue-info'
 
 import MyButton from './components/MyButton.vue'
 
@@ -15,7 +14,7 @@ storiesOf('Compatibilities/@storybook/addon-knobs', module)
   .addDecorator(withKnobs)
   .add(
     'panel',
-    withInfo({})(() => ({
+    () => ({
       props: {
         label: {
           type: String,
@@ -24,13 +23,14 @@ storiesOf('Compatibilities/@storybook/addon-knobs', module)
       },
       components: { MyButton },
       template: '<my-button>{{label}}</my-button>'
-    }))
+    }),
+    {
+      info: {}
+    }
   )
   .add(
     'inline',
-    withInfo({
-      docsInPanel: false
-    })(() => ({
+    () => ({
       props: {
         label: {
           type: String,
@@ -39,5 +39,8 @@ storiesOf('Compatibilities/@storybook/addon-knobs', module)
       },
       components: { MyButton },
       template: '<my-button>{{label}}</my-button>'
-    }))
+    }),
+    {
+      info: { docsInPanel: false }
+    }
   )