feat: add Vue support to @addons/background

addons/background/README.md

@@ -70,6 +70,28 @@ storiesOf("Button", module)
   .add("with text", () => <button>Click me</button>);
 ```
 
+In the case of Vue, use it similarly to React!
+
+```js
+import { storiesOf } from '@storybook/vue';
+import backgrounds from '@storybook/addon-backgrounds';
+
+storiesOf('Addon|Backgrounds', module)
+  .addDecorator(
+    backgrounds([
+      { name: 'twitter', value: '#00aced' },
+      { name: 'facebook', value: '#3b5998', default: true },
+    ])
+  )
+  .add('story 1', () => {
+    const content = 'You should be able to switch backgrounds for this story';
+
+    return {
+      template: `<button>${content}</button>`,
+    };
+  })
+```
+
 > In the case of Mithril, use these imports:
 >
 > ```js

addons/background/package.json

@@ -30,6 +30,9 @@
     "prop-types": "^15.6.1",
     "react-lifecycles-compat": "^3.0.2"
   },
+  "devDependencies": {
+    "vue": "^2.5.16"
+  },
   "peerDependencies": {
     "react": "*"
   }

addons/background/src/__tests__/index.js → addons/background/src/__tests__/react.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { BackgroundDecorator } from '../index';
+import { BackgroundDecorator } from '../react';
 
 const EventEmitter = require('events');
 

addons/background/src/__tests__/vue.js

@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import { vueHandler } from '../vue';
+
+describe('Vue handler', () => {
+  it('Returns a component with a created function', () => {
+    const testChannel = { emit: jest.fn() };
+    const testStory = () => ({ template: '<div> testStory </div>' });
+    const testContext = {
+      kind: 'Foo',
+      story: 'bar baz',
+    };
+    const testBackground = [
+      { name: 'twitter', value: '#00aced' },
+      { name: 'facebook', value: '#3b5998', default: true },
+    ];
+    const component = vueHandler(testChannel, testBackground)(testStory, testContext);
+
+    expect(component).toMatchObject({
+      created: expect.any(Function),
+      beforeDestroy: expect.any(Function),
+      render: expect.any(Function),
+    });
+  });
+
+  it('Subscribes to the channel on creation', () => {
+    const testChannel = { emit: jest.fn() };
+    const testStory = () => ({ render: h => h('div', ['testStory']) });
+    const testContext = {
+      kind: 'Foo',
+      story: 'bar baz',
+    };
+    const testBackground = [
+      { name: 'twitter', value: '#00aced' },
+      { name: 'facebook', value: '#3b5998', default: true },
+    ];
+
+    new Vue(vueHandler(testChannel, testBackground)(testStory, testContext)).$mount();
+
+    expect(testChannel.emit).toHaveBeenCalledTimes(1);
+    expect(testChannel.emit).toHaveBeenCalledWith('background-set', expect.any(Array));
+  });
+});

addons/background/src/index.js

@@ -1,66 +1,7 @@
-import React from 'react';
-import { polyfill } from 'react-lifecycles-compat';
-import PropTypes from 'prop-types';
+import { window } from 'global';
+import ReactBackground from './react';
+import VueBackground from './vue';
 
-import addons from '@storybook/addons';
+const Background = window.STORYBOOK_ENV === 'vue' ? VueBackground : ReactBackground;
 
-export class BackgroundDecorator extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const { channel } = props;
-
-    // A channel is explicitly passed in for testing
-    if (channel) {
-      this.channel = channel;
-    } else {
-      this.channel = addons.getChannel();
-    }
-
-    this.state = {};
-  }
-
-  componentDidMount() {
-    this.channel.emit('background-set', this.props.backgrounds);
-  }
-
-  componentWillUnmount() {
-    this.channel.emit('background-unset');
-  }
-
-  render() {
-    return this.state.story;
-  }
-}
-
-BackgroundDecorator.getDerivedStateFromProps = ({ story }, { prevStory }) => {
-  if (story !== prevStory) {
-    return {
-      story: story(),
-      prevStory: story,
-    };
-  }
-  return null;
-};
-
-BackgroundDecorator.propTypes = {
-  backgrounds: PropTypes.arrayOf(PropTypes.object),
-  channel: PropTypes.shape({
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    removeListener: PropTypes.func,
-  }),
-  // eslint-disable-next-line react/no-unused-prop-types
-  story: PropTypes.func.isRequired,
-};
-
-BackgroundDecorator.defaultProps = {
-  backgrounds: [],
-  channel: undefined,
-};
-
-polyfill(BackgroundDecorator);
-
-export default backgrounds => story => (
-  <BackgroundDecorator story={story} backgrounds={backgrounds} />
-);
+export default Background;

addons/background/src/react.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { polyfill } from 'react-lifecycles-compat';
+import PropTypes from 'prop-types';
+
+import addons from '@storybook/addons';
+
+export class BackgroundDecorator extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { channel } = props;
+
+    // A channel is explicitly passed in for testing
+    if (channel) {
+      this.channel = channel;
+    } else {
+      this.channel = addons.getChannel();
+    }
+
+    this.state = {};
+  }
+
+  componentDidMount() {
+    this.channel.emit('background-set', this.props.backgrounds);
+  }
+
+  componentWillUnmount() {
+    this.channel.emit('background-unset');
+  }
+
+  render() {
+    return this.state.story;
+  }
+}
+
+BackgroundDecorator.getDerivedStateFromProps = ({ story }, { prevStory }) => {
+  if (story !== prevStory) {
+    return {
+      story: story(),
+      prevStory: story,
+    };
+  }
+  return null;
+};
+
+BackgroundDecorator.propTypes = {
+  backgrounds: PropTypes.arrayOf(PropTypes.object),
+  channel: PropTypes.shape({
+    emit: PropTypes.func,
+    on: PropTypes.func,
+    removeListener: PropTypes.func,
+  }),
+  // eslint-disable-next-line react/no-unused-prop-types
+  story: PropTypes.func.isRequired,
+};
+
+BackgroundDecorator.defaultProps = {
+  backgrounds: [],
+  channel: undefined,
+};
+
+polyfill(BackgroundDecorator);
+
+export default backgrounds => story => (
+  <BackgroundDecorator story={story} backgrounds={backgrounds} />
+);

addons/background/src/vue.js

@@ -0,0 +1,28 @@
+import addons from '@storybook/addons';
+
+export const vueHandler = (channel, backgrounds) => (getStory, context) => ({
+  data() {
+    return {
+      context,
+      getStory,
+      story: getStory(context),
+    };
+  },
+
+  render(h) {
+    return h(this.story);
+  },
+
+  created() {
+    channel.emit('background-set', backgrounds);
+  },
+
+  beforeDestroy() {
+    channel.emit('background-unset');
+  },
+});
+
+export default function makeDecorator(backgrounds) {
+  const channel = addons.getChannel();
+  return vueHandler(channel, backgrounds);
+}

examples/vue-kitchen-sink/.storybook/addons.js

@@ -5,3 +5,4 @@ import '@storybook/addon-notes/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-viewport/register';
 import '@storybook/addon-options/register';
+import '@storybook/addon-backgrounds/register';

examples/vue-kitchen-sink/package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "4.0.0-alpha.3",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.3",
     "@storybook/addon-centered": "4.0.0-alpha.3",
     "@storybook/addon-knobs": "4.0.0-alpha.3",
     "@storybook/addon-links": "4.0.0-alpha.3",

examples/vue-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+<button>
+  You should be able to switch backgrounds for this story
+</button>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+<button>
+  This one too!
+</button>
+`;

examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js

@@ -0,0 +1,24 @@
+import { storiesOf } from '@storybook/vue';
+import backgrounds from '@storybook/addon-backgrounds';
+
+storiesOf('Addon|Backgrounds', module)
+  .addDecorator(
+    backgrounds([
+      { name: 'twitter', value: '#00aced' },
+      { name: 'facebook', value: '#3b5998', default: true },
+    ])
+  )
+  .add('story 1', () => {
+    const content = 'You should be able to switch backgrounds for this story';
+
+    return {
+      template: `<button>${content}</button>`,
+    };
+  })
+  .add('story 2', () => {
+    const content = 'This one too!';
+
+    return {
+      template: `<button>${content}</button>`,
+    };
+  });