vue export, tests + docs

addons/background/README.md

@@ -70,31 +70,16 @@ 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
 > import { storiesOf } from '@storybook/mithril';
 > import backgrounds from "@storybook/addon-backgrounds/mithril";
 > ```
+
+> In the case of Vue, use these imports:
+>
+> ```js
+> import { storiesOf } from '@storybook/vue';
+> import backgrounds from "@storybook/addon-backgrounds/vue";
+> ```

addons/background/src/__tests__/react.js

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

addons/background/src/index.js

@@ -1,7 +1,66 @@
-import { window } from 'global';
-import ReactBackground from './react';
-import VueBackground from './vue';
+import React from 'react';
+import { polyfill } from 'react-lifecycles-compat';
+import PropTypes from 'prop-types';
 
-const Background = window.STORYBOOK_ENV === 'vue' ? VueBackground : ReactBackground;
+import addons from '@storybook/addons';
 
-export default Background;
+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/react.js

@@ -1,66 +0,0 @@
-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/vue.js

@@ -0,0 +1 @@
+module.exports = require('./dist/vue');

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

@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/vue';
-import backgrounds from '@storybook/addon-backgrounds';
+import backgrounds from '@storybook/addon-backgrounds/vue';
 
 storiesOf('Addon|Backgrounds', module)
   .addDecorator(