Merge pull request #1595 from kazupon/improve/decorator-for-vue

Improve the decorator for vue

addons/centered/README.md

@@ -10,7 +10,9 @@
 Storybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybook.js.org).
 
 This addon works with Storybook for:
-[React](https://github.com/storybooks/storybook/tree/master/app/react).
+
+- [React](https://github.com/storybooks/storybook/tree/master/app/react)
+- [Vue](https://github.com/storybooks/storybook/tree/master/app/vue)
 
 ### Usage
 
@@ -20,7 +22,9 @@ npm install @storybook/addon-centered --save-dev
 
 #### As a decorator
 
-You can set the decorator locally:
+You can set the decorator locally.
+
+exampwle for React:
 
 ```js
 import { storiesOf } from '@storybook/react';
@@ -34,11 +38,45 @@ storiesOf('MyComponent', module)
  .add('with some props', () => (<MyComponent text="The Comp"/>));
 ```
 
-Or you can also add this decorator globally:
+example for Vue:
+
+```js
+import { storiesOf } from '@storybook/vue';
+import centered from '@storybook/addon-centered';
+
+import MyComponent from '../Component.vue';
+storiesOf('MyComponent', module)
+ .addDecorator(centered)
+ .add('without props', () => ({
+ components: { MyComponent },
+ template: '<my-component />'
+ })
+ .add('with some props', () => ({
+ components: { MyComponent },
+ template: '<my-component text="The Comp"/>'
+ });
+```
+
+Also, you can also add this decorator globally
+
+example for React:
 
 ```js
 import { configure, addDecorator } from '@storybook/react';
-import centered from '@storybook/react-storybook-decorator-centered';
+import centered from '@storybook/addon-centered';
+
+addDecorator(centered);
+
+configure(function () {
+ //...
+}, module);
+```
+
+example for Vue:
+
+```js
+import { configure, addDecorator } from '@storybook/vue';
+import centered from '@storybook/addon-centered';
 
 addDecorator(centered);
 

addons/centered/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-centered",
- "version": "3.2.0",
+ "version": "3.2.1",
  "description": "Storybook decorator to center components",
  "license": "MIT",
  "author": "Muhammed Thanish <mnmtanish@gmail.com>",

addons/centered/src/index.js

@@ -1,27 +1,7 @@
-import React from 'react';
+import { window } from 'global';
+import ReactCentered from './react';
+import VueCentered from './vue';
 
-const style = {
- position: 'fixed',
- top: 0,
- left: 0,
- bottom: 0,
- right: 0,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- overflow: 'auto',
-};
+const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
 
-const innerStyle = {
- margin: 'auto',
-};
-
-export default function(storyFn) {
- return (
- <div style={style}>
- <div style={innerStyle}>
- {storyFn()}
- </div>
- </div>
- );
-}
+export default Centered;

addons/centered/src/react.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const style = {
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ overflow: 'auto',
+};
+
+const innerStyle = {
+ margin: 'auto',
+};
+
+export default function(storyFn) {
+ return (
+ <div style={style}>
+ <div style={innerStyle}>
+ {storyFn()}
+ </div>
+ </div>
+ );
+}

addons/centered/src/vue.js

@@ -0,0 +1,29 @@
+export default function () {
+ return {
+ template: `
+ <div :style="style">
+ <div :style="innerStyle">
+ <story/>
+ </div>
+ </div>
+ `,
+ data() {
+ return {
+ style: {
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ overflow: 'auto',
+ },
+ innerStyle: {
+ margin: 'auto',
+ }
+ }
+ }
+ }
+}

app/vue/package.json

@@ -67,11 +67,11 @@
  "url-loader": "^0.5.8",
  "util-deprecate": "^1.0.2",
  "uuid": "^3.1.0",
- "vue": "^2.4.1",
+ "vue": "^2.4.2",
  "vue-hot-reload-api": "^2.1.0",
  "vue-loader": "^12.2.1",
  "vue-style-loader": "^3.0.1",
- "vue-template-compiler": "^2.4.1",
+ "vue-template-compiler": "^2.4.2",
  "webpack": "^2.5.1 || ^3.0.0",
  "webpack-dev-middleware": "^1.10.2",
  "webpack-hot-middleware": "^2.18.0"

app/vue/src/client/preview/client_api.js

@@ -54,6 +54,13 @@ export default class ClientApi {
  };
  });
 
+ const createWrapperComponent = Target => ({
+ functional: true,
+ render (h, c) {
+ return h(Target, c.data, c.children);
+ }
+ });
+
  api.add = (storyName, getStory) => {
  if (typeof storyName !== 'string') {
  throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
@@ -69,7 +76,13 @@ export default class ClientApi {
  const decorators = [...localDecorators, ...this._globalDecorators];
 
  const getDecoratedStory = decorators.reduce(
- (decorated, decorator) => context => decorator(() => decorated(context), context),
+ (decorated, decorator) => context => {
+ const story = () => decorated(context);
+ const decoratedStory = decorator(story, context);
+ decoratedStory.components = decoratedStory.components || {};
+ decoratedStory.components.story = createWrapperComponent(story());
+ return decoratedStory
+ },
  getStory
  );
 

app/vue/src/client/preview/client_api.test.js

@@ -134,62 +134,62 @@ describe('preview.client_api', () => {
  const storyStore = new StoryStore();
  const api = new ClientAPI({ storyStore });
  const localApi = api.storiesOf('none');
- localApi.addDecorator(fn => `aa-${fn()}`);
+ localApi.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
 
- localApi.add('storyName', () => 'Hello');
- expect(storyStore.stories[0].fn()).toBe('aa-Hello');
+ localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
+ expect(storyStore.stories[0].fn().template).toBe('<div>aa<p>hello</p></div>');
  });
 
  it('should add global decorators', () => {
  const storyStore = new StoryStore();
  const api = new ClientAPI({ storyStore });
- api.addDecorator(fn => `bb-${fn()}`);
+ api.addDecorator(fn => ({ template: `<div>bb${fn().template}</div>` }));
  const localApi = api.storiesOf('none');
 
- localApi.add('storyName', () => 'Hello');
- expect(storyStore.stories[0].fn()).toBe('bb-Hello');
+ localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
+ expect(storyStore.stories[0].fn().template).toBe('<div>bb<p>hello</p></div>');
  });
 
  it('should utilize both decorators at once', () => {
  const storyStore = new StoryStore();
  const api = new ClientAPI({ storyStore });
  const localApi = api.storiesOf('none');
 
- api.addDecorator(fn => `aa-${fn()}`);
- localApi.addDecorator(fn => `bb-${fn()}`);
+ api.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
+ localApi.addDecorator(fn => ({ template: `<div>bb${fn().template}</div>` }));
 
- localApi.add('storyName', () => 'Hello');
- expect(storyStore.stories[0].fn()).toBe('aa-bb-Hello');
+ localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
+ expect(storyStore.stories[0].fn().template).toBe('<div>aa<div>bb<p>hello</p></div></div>');
  });
 
  it('should pass the context', () => {
  const storyStore = new StoryStore();
  const api = new ClientAPI({ storyStore });
  const localApi = api.storiesOf('none');
- localApi.addDecorator(fn => `aa-${fn()}`);
+ localApi.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
 
- localApi.add('storyName', ({ kind, story }) => `${kind}-${story}`);
+ localApi.add('storyName', ({ kind, story }) => ({ template: `<p>${kind}-${story}</p>` }));
 
  const kind = 'dfdfd';
  const story = 'ef349ff';
 
  const result = storyStore.stories[0].fn({ kind, story });
- expect(result).toBe(`aa-${kind}-${story}`);
+ expect(result.template).toBe(`<div>aa<p>${kind}-${story}</p></div>`);
  });
 
  it('should have access to the context', () => {
  const storyStore = new StoryStore();
  const api = new ClientAPI({ storyStore });
  const localApi = api.storiesOf('none');
- localApi.addDecorator((fn, { kind, story }) => `${kind}-${story}-${fn()}`);
+ localApi.addDecorator((fn, { kind, story }) => ({ template: `<div>${kind}-${story}-${fn().template}</div>` }));
 
- localApi.add('storyName', () => 'Hello');
+ localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
 
  const kind = 'dfdfd';
  const story = 'ef349ff';
 
  const result = storyStore.stories[0].fn({ kind, story });
- expect(result).toBe(`${kind}-${story}-Hello`);
+ expect(result.template).toBe(`<div>${kind}-${story}-<p>hello</p></div>`);
  });
  });
 

examples/vue-kitchen-sink/package.json

@@ -9,21 +9,21 @@
  "@storybook/addons": "^3.2.0",
  "@storybook/addon-notes": "^3.2.0",
  "@storybook/addon-knobs": "^3.2.0",
- "vue-hot-reload-api": "^2.1.0",
- "vue-style-loader": "^3.0.1",
- "vue-loader": "^12.2.1",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.0.0",
  "babel-preset-env": "^1.6.0",
  "cross-env": "^3.0.0",
  "css-loader": "^0.28.1",
  "file-loader": "^0.11.1",
- "vue-template-compiler": "^2.4.1",
+ "vue-hot-reload-api": "^2.1.0",
+ "vue-loader": "^12.2.1",
+ "vue-style-loader": "^3.0.1",
+ "vue-template-compiler": "^2.4.2",
  "webpack": "^2.5.1 || ^3.0.0",
  "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
- "vue": "^2.4.1",
+ "vue": "^2.4.2",
  "vuex": "^2.3.1"
  },
  "scripts": {

examples/vue-kitchen-sink/src/stories/index.js

@@ -1,11 +1,8 @@
 import Vuex from 'vuex';
 import { storiesOf } from '@storybook/vue';
-
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
-
 import { withNotes } from '@storybook/addon-notes';
-
 import {
  withKnobs,
  text,
@@ -16,6 +13,7 @@ import {
  color,
  date,
 } from '@storybook/addon-knobs';
+import Centered from '@storybook/addon-centered';
 
 import MyButton from './Button.vue';
 import Welcome from './Welcome.vue';
@@ -30,6 +28,7 @@ storiesOf('App', module).add('App', () => ({
 }));
 
 storiesOf('Button', module)
+ .addDecorator(Centered)
  // Works if Vue.component is called in the config.js in .storybook
  .add('rounded', () => ({
  template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
@@ -117,6 +116,36 @@ storiesOf('Method for rendering Vue', module)
  </p>`,
  }));
 
+storiesOf('Decorator for Vue', module)
+ .addDecorator(story => {
+ // Decorated with story function
+ const WrapButton = story();
+ return {
+ components: { WrapButton },
+ template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
+ data() {
+ return { borderStyle: 'medium solid red' };
+ },
+ };
+ })
+ .addDecorator(() => ({
+ // Decorated with `story` component
+ template: '<div :style="{ border: borderStyle }"><story/></div>',
+ data() {
+ return {
+ borderStyle: 'medium solid blue',
+ };
+ },
+ }))
+ .add('template', () => ({
+ template: '<my-button>MyButton with template</my-button>',
+ }))
+ .add('render', () => ({
+ render(h) {
+ return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
+ },
+ }));
+
 storiesOf('Addon Actions', module)
  .add('Action only', () => ({
  template: '<my-button :handle-click="log">Click me to log the action</my-button>',