fix most lint errors

addons/viewport/manager.js

@@ -1,2 +1,3 @@
 const manager = require('./dist/manager');
+
 manager.init();

addons/viewport/src/components/Panel.jsx

@@ -1,54 +1,40 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { viewports } from './viewportInfo';
 
 const storybookIframe = 'storybook-preview-iframe';
-const configuredStyles = {
-    border: '1px solid #728099',
-    display: 'flex',
-    margin: '0 auto',
-    boxShadow: 'rgba(0,0,0,0.2) 0px 0px 60px 12px',
-};
-
 
 export class Panel extends Component {
-    static propTypes = {
-        channel: PropTypes.object.isRequired,
-    }
+  static propTypes = {
+    channel: PropTypes.object.isRequired,
+  };
 
-    iframe = undefined;
+  constructor(props, context) {
+    super(props, context);
+    this.state = { viewport: null };
 
-    constructor(props, context) {
-        super(props, context);
-        this.state = { viewport: null };
+    this.props.channel.on('addon:viewport:update', this.changeViewport);
+  }
 
-        this.props.channel.on(
-            'addon:viewport:update',
-            this.changeViewport
-        );
-    }
+  componentDidMount() {
+    this.iframe = document.getElementById(storybookIframe);
+  }
 
-    componentDidMount() {
-        this.iframe = document.getElementById(storybookIframe);
-    }
+  iframe = undefined;
 
-    setIframeStyles(styles) {
-        this.iframe.style = styles;
-    }
+  changeViewport = viewport => {
+    this.iframe.style = viewport.styles;
+  };
 
-    changeViewport = (viewport) => {
-        const size = viewports[viewport] || viewports.reset;
-        this.setIframeStyles(viewport.styles);
-    }
-
-    render() {
-        return (
-            <div>
-                { viewportSizes.map((viewport) => {
-                    <button onClick={() => this.changeViewport(viewport)}>
-                        {viewport.name}
-                    </button>
-                })}
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div>
+        {viewports.map(viewport =>
+          <button onClick={() => this.changeViewport(viewport)}>
+            {viewport.name}
+          </button>
+        )}
+      </div>
+    );
+  }
 }

addons/viewport/src/components/WrapStory.jsx

@@ -3,19 +3,19 @@ import addons from '@storybook/addons';
 import PropTypes from 'prop-types';
 
 export class WrapStory extends Component {
-    static propTypes = {
-        channel: PropTypes.object.isRequired,
-        context: PropTypes.object.isRequired,
-        storyFn: PropTypes.func.isRequired,
-    }
+  static propTypes = {
+    channel: PropTypes.object.isRequired,
+    context: PropTypes.object.isRequired,
+    storyFn: PropTypes.func.isRequired,
+  };
 
-    componentDidMount() {
-        const { channel } = this.props;
-        channel.emit('addon:viewport:update', 'reset');
-    }
+  componentDidMount() {
+    const { channel } = this.props;
+    channel.emit('addon:viewport:update', 'reset');
+  }
 
-    render() {
-        const { storyFn, context } = this.props;
-        return storyFn(context);
-    }
+  render() {
+    const { storyFn, context } = this.props;
+    return storyFn(context);
+  }
 }

addons/viewport/src/components/viewportInfo.js

@@ -1,21 +1,28 @@
-export const viewports = {
-    iphone6: {
-        name: 'iPhone 6',
-        styles: {
-            height: '667px',
-            width: '375px',
-            ...configuredStyles,
-        },
-    },
-    reset: {
-        name: 'Reset'
-        styles: {
-            width: '100%',
-            height: '100%',
-            border: 'none',
-            display: 'block',
-            margin: '0',
-            boxShadow: 'none',
-        },
-    },
+const configuredStyles = {
+  border: '1px solid #728099',
+  display: 'flex',
+  margin: '0 auto',
+  boxShadow: 'rgba(0,0,0,0.2) 0px 0px 60px 12px',
+};
+
+export const viewports = {
+  iphone6: {
+    name: 'iPhone 6',
+    styles: {
+      height: '667px',
+      width: '375px',
+      ...configuredStyles,
+    },
+  },
+  reset: {
+    name: 'Reset',
+    styles: {
+      width: '100%',
+      height: '100%',
+      border: 'none',
+      display: 'block',
+      margin: '0',
+      boxShadow: 'none',
+    },
+  },
 };

addons/viewport/src/index.jsx

@@ -4,17 +4,17 @@ import addons from '@storybook/addons';
 import { WrapStory } from './components/WrapStory';
 
 class ViewportManager {
-    wrapStory(channel, storyFn, context) {
-        const props = { context, storyFn, channel };
-        return <WrapStory {...props} />
-    }
+  wrapStory(channel, storyFn, context) {
+    const props = { context, storyFn, channel };
+    return <WrapStory {...props} />;
+  }
 }
 
 const manager = new ViewportManager();
 
 function withViewport(storyFn, context) {
-    const channel = addons.getChannel();
-    return manager.wrapStory(channel, storyFn, context);
+  const channel = addons.getChannel();
+  return manager.wrapStory(channel, storyFn, context);
 }
 
 export { withViewport };

addons/viewport/src/manager.jsx

@@ -5,19 +5,18 @@ import { Panel } from './components/Panel';
 
 const ADDON_ID = 'storybook-addon-viewport';
 const PANEL_ID = `${ADDON_ID}/addon-panel`;
-const EVENT_ID = `${ADDON_ID}/addon-event`;
 
 function init() {
-    addons.register(ADDON_ID, api => {
-        const channel = addons.getChannel();
+  addons.register(ADDON_ID, api => {
+    const channel = addons.getChannel();
 
-        addons.addPanel(PANEL_ID, {
-            title: 'Viewport',
-            render() {
-                return <Panel channel={channel} api={api} />;
-            }
-        });
+    addons.addPanel(PANEL_ID, {
+      title: 'Viewport',
+      render() {
+        return <Panel channel={channel} api={api} />;
+      },
     });
+  });
 }
 
-export { init }
+export { init };