FIX linting issues after eslint upgrade (partial fix)

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   plugins: ['prettier', 'jest', 'import', 'react', 'jsx-a11y', 'json'],
   parser: 'babel-eslint',
   parserOptions: {
+    ecmaVersion: 8,
     sourceType: 'module',
   },
   env: {

addons/a11y/src/components/Panel.js

@@ -35,21 +35,27 @@ class Panel extends Component {
   };
 
   componentDidMount() {
-    this.props.channel.on(CHECK_EVENT_ID, this.onUpdate);
-    this.props.channel.on(STORY_RENDERED, this.requestCheck);
-    this.props.channel.on(RERUN_EVENT_ID, this.requestCheck);
+    const { channel } = this.props;
+
+    channel.on(CHECK_EVENT_ID, this.onUpdate);
+    channel.on(STORY_RENDERED, this.requestCheck);
+    channel.on(RERUN_EVENT_ID, this.requestCheck);
   }
 
   componentDidUpdate(prevProps) {
-    if (!prevProps.active && this.props.active) {
+    const { active } = this.props;
+
+    if (!prevProps.active && active) {
       this.requestCheck();
     }
   }
 
   componentWillUnmount() {
-    this.props.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
-    this.props.channel.removeListener(STORY_RENDERED, this.requestCheck);
-    this.props.channel.removeListener(RERUN_EVENT_ID, this.requestCheck);
+    const { channel } = this.props;
+
+    channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
+    channel.removeListener(STORY_RENDERED, this.requestCheck);
+    channel.removeListener(RERUN_EVENT_ID, this.requestCheck);
   }
 
   onUpdate = ({ passes, violations }) => {
@@ -60,8 +66,10 @@ class Panel extends Component {
   };
 
   requestCheck = () => {
-    if (this.props.active) {
-      this.props.channel.emit(REQUEST_CHECK_EVENT_ID);
+    const { channel, active } = this.props;
+
+    if (active) {
+      channel.emit(REQUEST_CHECK_EVENT_ID);
     }
   };
 

addons/a11y/src/components/Report/Elements.js

@@ -40,7 +40,9 @@ Element.propTypes = {
 /* eslint-disable react/no-array-index-key */
 const Elements = ({ elements, passes }) => (
   <ol>
-    {elements.map((element, index) => <Element passes={passes} element={element} key={index} />)}
+    {elements.map((element, index) => (
+      <Element passes={passes} element={element} key={index} />
+    ))}
   </ol>
 );
 

addons/a11y/src/components/Report/Rules.js

@@ -61,7 +61,11 @@ Rule.propTypes = {
 /* eslint-disable react/no-array-index-key */
 function Rules({ rules, passes }) {
   return (
-    <List>{rules.map((rule, index) => <Rule passes={passes} rule={rule} key={index} />)}</List>
+    <List>
+      {rules.map((rule, index) => (
+        <Rule passes={passes} rule={rule} key={index} />
+      ))}
+    </List>
   );
 }
 Rules.propTypes = {

addons/a11y/src/components/Report/Tags.js

@@ -17,7 +17,13 @@ const Item = styled('div')(({ theme }) => ({
 }));
 
 function Tags({ tags }) {
-  return <Wrapper>{tags.map(tag => <Item key={tag}>{tag}</Item>)}</Wrapper>;
+  return (
+    <Wrapper>
+      {tags.map(tag => (
+        <Item key={tag}>{tag}</Item>
+      ))}
+    </Wrapper>
+  );
 }
 Tags.propTypes = {
   tags: PropTypes.arrayOf(PropTypes.node).isRequired,

addons/actions/src/containers/ActionLogger/index.js

@@ -6,8 +6,8 @@ import deepEqual from 'deep-equal';
 import { CYCLIC_KEY, retrocycle } from '../../lib';
 import { isObject } from '../../lib/util';
 
-import ActionLoggerComponent from '../../components/ActionLogger/';
-import { EVENT_ID } from '../../';
+import ActionLoggerComponent from '../../components/ActionLogger';
+import { EVENT_ID } from '../..';
 
 export default class ActionLogger extends React.Component {
   constructor(props, ...args) {
@@ -18,12 +18,16 @@ export default class ActionLogger extends React.Component {
   }
 
   componentDidMount() {
-    this.props.channel.on(EVENT_ID, this._actionListener);
-    this.stopListeningOnStory = this.props.api.onStory(this._storyChangeListener);
+    const { channel, api } = this.props;
+
+    channel.on(EVENT_ID, this._actionListener);
+    this.stopListeningOnStory = api.onStory(this._storyChangeListener);
   }
 
   componentWillUnmount() {
-    this.props.channel.removeListener(EVENT_ID, this._actionListener);
+    const { channel } = this.props;
+
+    channel.removeListener(EVENT_ID, this._actionListener);
     if (this.stopListeningOnStory) {
       this.stopListeningOnStory();
     }
@@ -37,9 +41,11 @@ export default class ActionLogger extends React.Component {
   }
 
   addAction(action) {
+    let { actions = [] } = this.state;
+    actions = [...actions];
+
     action.data.args = action.data.args.map(arg => retrocycle(arg)); // eslint-disable-line
     const isCyclic = !!action.data.args.find(arg => isObject(arg) && arg[CYCLIC_KEY]);
-    const actions = [...this.state.actions];
     const previous = actions.length && actions[0];
 
     if (previous && !isCyclic && deepEqual(previous.data, action.data, { strict: true })) {
@@ -56,9 +62,10 @@ export default class ActionLogger extends React.Component {
   }
 
   render() {
+    const { actions = [] } = this.state;
     const { active } = this.props;
     const props = {
-      actions: this.state.actions,
+      actions,
       onClear: () => this.clearActions(),
     };
     return active ? <ActionLoggerComponent {...props} /> : null;

addons/actions/src/lib/decycle.js

@@ -2,7 +2,7 @@ import { DecycleError } from './errors';
 
 import { getPropertiesList, typeReplacer, omitProperty } from './util';
 
-import { CYCLIC_KEY } from './';
+import { CYCLIC_KEY } from '.';
 
 import { objectType } from './types';
 

addons/actions/src/lib/retrocycle.js

@@ -1,6 +1,6 @@
 import reviver from './reviver';
 import { muteProperty } from './util';
-import { CYCLIC_KEY } from './';
+import { CYCLIC_KEY } from '.';
 
 // eslint-disable-next-line no-control-regex
 const pathReg = /^\$(?:\[(?:\d+|"(?:[^\\"\u0000-\u001f]|\\([\\"/bfnrt]|u[0-9a-zA-Z]{4}))*")])*$/;

addons/actions/src/lib/types/date/__tests__/index.js

@@ -1,4 +1,4 @@
-import dateType from '../';
+import dateType from '..';
 
 const date = new Date(1512137134873);
 const isoString = date.toISOString();

addons/actions/src/lib/types/function/__tests__/index.js

@@ -1,4 +1,4 @@
-import functionType from '../';
+import functionType from '..';
 import reservedKeywords from '../reservedKeywords';
 import createFunction from '../createFunction';
 import createBoundFunction from '../createBoundFunction';

addons/actions/src/lib/types/infinity/__tests__/index.js

@@ -1,4 +1,4 @@
-import infinityType from '../';
+import infinityType from '..';
 
 describe('Infinity', () => {
   it('Recognizes Infinity', () => {

addons/actions/src/lib/types/nan/__tests__/index.js

@@ -1,4 +1,4 @@
-import nanType from '../';
+import nanType from '..';
 
 describe('NaN', () => {
   it('Recognizes NaN', () => {

addons/actions/src/lib/types/object/__tests__/index.js

@@ -1,4 +1,4 @@
-import objectType from '../';
+import objectType from '..';
 import { DEPTH_KEY } from '../configureDepth';
 
 describe('Object', () => {

addons/actions/src/lib/types/regexp/__tests__/index.js

@@ -1,4 +1,4 @@
-import regExpType from '../';
+import regExpType from '..';
 
 const regExp = /aRegExp/g;
 

addons/actions/src/lib/types/symbol/__tests__/index.js

@@ -1,4 +1,4 @@
-import symbolType from '../';
+import symbolType from '..';
 
 const symbol = Symbol('S');
 

addons/actions/src/lib/types/undefined/__tests__/index.js

@@ -1,4 +1,4 @@
-import undefinedType from '../';
+import undefinedType from '..';
 
 describe('undefined', () => {
   it('Recognizes undefined', () => {

addons/actions/src/manager.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import addons from '@storybook/addons';
 import ActionLogger from './containers/ActionLogger';
-import { ADDON_ID, PANEL_ID } from './';
+import { ADDON_ID, PANEL_ID } from '.';
 
 export function register() {
   addons.register(ADDON_ID, api => {

addons/actions/src/preview/__tests__/action.test.js

@@ -1,5 +1,5 @@
 import addons from '@storybook/addons';
-import { action, configureActions } from '../../';
+import { action, configureActions } from '../..';
 
 jest.mock('@storybook/addons');
 

addons/actions/src/preview/__tests__/configureActions.test.js

@@ -1,5 +1,5 @@
 import { config } from '../configureActions';
-import { configureActions } from '../../';
+import { configureActions } from '../..';
 
 describe('Configure Actions', () => {
   it('can configure actions', () => {

addons/actions/src/preview/__tests__/preview.test.js

@@ -1,6 +1,6 @@
 import addons from '@storybook/addons';
 import uuid from 'uuid/v1';
-import { action } from '../';
+import { action } from '..';
 import { undefinedType, symbolType } from '../../lib/types';
 
 jest.mock('uuid/v1');

addons/actions/src/preview/action.js

@@ -1,6 +1,6 @@
 import uuid from 'uuid/v1';
 import addons from '@storybook/addons';
-import { EVENT_ID } from '../';
+import { EVENT_ID } from '..';
 import { canConfigureName, prepareArguments } from '../lib/util';
 import { config } from './configureActions';
 

addons/backgrounds/src/BackgroundPanel.js

@@ -120,8 +120,9 @@ export default class BackgroundPanel extends Component {
   }
 
   setBackgroundFromSwatch = background => {
+    const { api } = this.props;
     this.updateIframe(background);
-    this.props.api.setQueryParams({ background });
+    api.setQueryParams({ background });
   };
 
   updateIframe(background) {
@@ -130,7 +131,8 @@ export default class BackgroundPanel extends Component {
 
   render() {
     const { active } = this.props;
-    const backgrounds = [...this.state.backgrounds];
+    const { backgrounds = [] } = this.state;
+
     if (!active) {
       return null;
     }

addons/events/src/components/Event.js

@@ -101,20 +101,6 @@ class Item extends Component {
     isTextAreaShowed: false,
   };
 
-  static getDerivedStateFromProps = ({ payload }, { prevPayload }) => {
-    if (payload !== prevPayload) {
-      const payloadString = json.plain(payload);
-
-      return {
-        failed: false,
-        payload: getJSONFromString(payloadString),
-        payloadString,
-        prevPayload,
-      };
-    }
-    return null;
-  };
-
   onChange = ({ target: { value } }) => {
     const newState = {
       payloadString: value,
@@ -131,9 +117,12 @@ class Item extends Component {
   };
 
   onEmitClick = () => {
-    this.props.onEmit({
-      name: this.props.name,
-      payload: this.state.payload,
+    const { onEmit, name } = this.props;
+    const { payload } = this.state;
+
+    onEmit({
+      name,
+      payload,
     });
   };
 
@@ -143,9 +132,23 @@ class Item extends Component {
     }));
   };
 
+  static getDerivedStateFromProps = ({ payload }, { prevPayload }) => {
+    if (payload !== prevPayload) {
+      const payloadString = json.plain(payload);
+
+      return {
+        failed: false,
+        payload: getJSONFromString(payloadString),
+        payloadString,
+        prevPayload,
+      };
+    }
+    return null;
+  };
+
   render() {
     const { title, name } = this.props;
-    const { failed, isTextAreaShowed } = this.state;
+    const { failed, isTextAreaShowed, payloadString } = this.state;
 
     return (
       <Wrapper>
@@ -158,7 +161,7 @@ class Item extends Component {
         <StyledTextarea
           shown={isTextAreaShowed}
           failed={failed}
-          value={this.state.payloadString}
+          value={payloadString}
           onChange={this.onChange}
         />
         {isTextAreaShowed ? (

addons/events/src/components/Panel.js

@@ -28,27 +28,35 @@ export default class Events extends Component {
   };
 
   componentDidMount() {
-    this.props.channel.on(EVENTS.ADD, this.onAdd);
+    const { channel } = this.props;
+
+    channel.on(EVENTS.ADD, this.onAdd);
   }
 
   componentWillUnmount() {
-    this.props.channel.removeListener(EVENTS.ADD, this.onAdd);
+    const { channel } = this.props;
+
+    channel.removeListener(EVENTS.ADD, this.onAdd);
   }
 
   onAdd = events => {
     this.setState({ events });
   };
 
   onEmit = event => {
-    this.props.channel.emit(EVENTS.EMIT, event);
+    const { channel } = this.props;
+
+    channel.emit(EVENTS.EMIT, event);
   };
 
   render() {
     const { events } = this.state;
     const { active } = this.props;
     return active ? (
       <Wrapper>
-        {events.map(event => <Event key={event.name} {...event} onEmit={this.onEmit} />)}
+        {events.map(event => (
+          <Event key={event.name} {...event} onEmit={this.onEmit} />
+        ))}
       </Wrapper>
     ) : null;
   }

addons/graphql/src/components/FullScreen/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import style from './style';
 
-export default function FullScreen(props) {
-  return <div style={style.wrapper}>{props.children}</div>;
+export default function FullScreen({ children }) {
+  return <div style={style.wrapper}>{children}</div>;
 }
 
 FullScreen.defaultProps = { children: null };