FIX linting

addons/background/src/BackgroundPanel.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import addons from '@storybook/addons';
+import EventEmitter from 'events';
 
 import Swatch from './Swatch';
 
@@ -56,9 +58,11 @@ export default class BackgroundPanel extends Component {
   constructor(props) {
     super(props);
 
+    const { channel, api } = props;
+
     // A channel is explicitly passed in for testing
-    if (this.props.channel) {
+    if (channel) {
-      this.channel = this.props.channel;
+      this.channel = channel;
     } else {
       this.channel = addons.getChannel();
     }
@@ -67,7 +71,7 @@ export default class BackgroundPanel extends Component {
 
     this.channel.on('background-set', backgrounds => {
       this.setState({ backgrounds });
-      const currentBackground = this.props.api.getQueryParam('background');
+      const currentBackground = api.getQueryParam('background');
 
       if (currentBackground) {
         this.setBackgroundInPreview(currentBackground);
@@ -77,9 +81,9 @@ export default class BackgroundPanel extends Component {
       }
     });
 
-    this.channel.on('background-unset', backgrounds => {
+    this.channel.on('background-unset', () => {
       this.setState({ backgrounds: [] });
-      this.props.api.setQueryParams({ background: null });
+      api.setQueryParams({ background: null });
     });
   }
 
@@ -109,3 +113,13 @@ export default class BackgroundPanel extends Component {
     );
   }
 }
+BackgroundPanel.propTypes = {
+  api: PropTypes.shape({
+    getQueryParam: PropTypes.func,
+    setQueryParams: PropTypes.func,
+  }).isRequired,
+  channel: PropTypes.instanceOf(EventEmitter),
+};
+BackgroundPanel.defaultProps = {
+  channel: undefined,
+};

addons/background/src/__tests__/BackgroundPanel.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import EventEmitter from 'events';
 
 import BackgroundPanel from '../BackgroundPanel';
 
-const EventEmitter = require('events');
-// const TestUtils = require('react-dom/test-utils');
-
 const backgrounds = [
   { name: 'black', value: '#000000' },
   { name: 'secondary', value: 'rgb(123,123,123)' },

addons/background/src/index.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import EventEmitter from 'events';
+
 import addons from '@storybook/addons';
 
 const style = {
@@ -17,19 +20,21 @@ const style = {
 };
 
 export class BackgroundDecorator extends React.Component {
-  state = { background: 'transparent' };
-
   constructor(props) {
     super(props);
 
+    const { channel, story } = props;
+
     // A channel is explicitly passed in for testing
-    if (this.props.channel) {
+    if (channel) {
-      this.channel = this.props.channel;
+      this.channel = channel;
     } else {
       this.channel = addons.getChannel();
     }
 
-    this.story = this.props.story();
+    this.state = { background: 'transparent' };
+
+    this.story = story();
   }
 
   componentWillMount() {
@@ -56,6 +61,15 @@ export class BackgroundDecorator extends React.Component {
     return <div style={Object.assign({}, styles)}>{this.story}</div>;
   }
 }
+BackgroundDecorator.propTypes = {
+  backgrounds: PropTypes.arrayOf(PropTypes.object),
+  channel: PropTypes.instanceOf(EventEmitter),
+  story: PropTypes.func.isRequired,
+};
+BackgroundDecorator.defaultProps = {
+  backgrounds: [],
+  channel: undefined,
+};
 
 export default backgrounds => story => (
   <BackgroundDecorator story={story} backgrounds={backgrounds} />