add eslint to CI check and lint codebase

Author: bpostlethwaite

package.json

@@ -19,7 +19,8 @@
     "make:dist:css": "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
     "prepublishOnly": "npm run make:lib",
     "lint": "prettier  --write \"src/**/*.js\"",
-    "test": "prettier -l \"src/**/*.js\" && jest",
+    "test": "eslint src && prettier -l \"src/**/*.js\" && jest",
+    "test-js": "jest",
     "watch": "nodemon --exec \"npm run make:lib\" -w src",
     "watch-test": "jest --watch",
     "eslint:check": "eslint --print-config .eslintrc | eslint-config-prettier-check"

src/DefaultEditor.js

@@ -258,21 +258,21 @@ class DefaultEditor extends Component {
             </Section>
           </AxesFold>
 
-          {/* <AxesFold name={_('Lines')}>
-              <AxesSelector />
-              </AxesFold>
-              <AxesFold name={_('Tick Labels')}>
-              <AxesSelector />
-              </AxesFold>
-              <AxesFold name={_('Tick Markers')}>
-              <AxesSelector />
-              </AxesFold>
-              <AxesFold name={_('Zoom Interactivity')}>
-              <AxesSelector />
-              </AxesFold>
-              <AxesFold name={_('Layout')}>
-              <AxesSelector />
-              </AxesFold> */}
+          <AxesFold name={_('Lines')}>
+            <AxesSelector />
+          </AxesFold>
+          <AxesFold name={_('Tick Labels')}>
+            <AxesSelector />
+          </AxesFold>
+          <AxesFold name={_('Tick Markers')}>
+            <AxesSelector />
+          </AxesFold>
+          <AxesFold name={_('Zoom Interactivity')}>
+            <AxesSelector />
+          </AxesFold>
+          <AxesFold name={_('Layout')}>
+            <AxesSelector />
+          </AxesFold>
         </LayoutPanel>
 
         <LayoutPanel group="Style" name={_('Legend')}>
@@ -382,6 +382,10 @@ class DefaultEditor extends Component {
   }
 }
 
+DefaultEditor.propTypes = {
+  localize: PropTypes.func,
+};
+
 DefaultEditor.contextTypes = {
   dataSourceNames: PropTypes.array.isRequired,
 };

src/PlotlyEditor.js

@@ -38,7 +38,9 @@ class PlotlyEditor extends Component {
 
   updateProp(event) {
     const {graphDiv} = this.props;
-    this.props.onUpdate && this.props.onUpdate({graphDiv, ...event});
+    if (this.props.onUpdate) {
+      this.props.onUpdate({graphDiv, ...event});
+    }
   }
 
   render() {
@@ -52,11 +54,12 @@ class PlotlyEditor extends Component {
 }
 
 PlotlyEditor.propTypes = {
-  onUpdate: PropTypes.func,
-  plotly: PropTypes.object,
+  children: PropTypes.node,
+  dataSources: PropTypes.object,
   graphDiv: PropTypes.object,
   locale: PropTypes.string,
-  dataSources: PropTypes.object,
+  onUpdate: PropTypes.func,
+  plotly: PropTypes.object,
 };
 
 PlotlyEditor.defaultProps = {

src/components/PanelMenuWrapper.js

@@ -1,5 +1,6 @@
-import SidebarGroup from './sidebar/SidebarGroup';
+import PropTypes from 'prop-types';
 import React, {cloneElement, Component} from 'react';
+import SidebarGroup from './sidebar/SidebarGroup';
 import {bem} from '../lib';
 
 class PanelsWithSidebar extends Component {
@@ -87,4 +88,8 @@ class PanelsWithSidebar extends Component {
   }
 }
 
+PanelsWithSidebar.propTypes = {
+  children: PropTypes.node,
+};
+
 export default PanelsWithSidebar;

src/components/containers/Fold.js

@@ -1,11 +1,11 @@
-import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import {bem} from '../../lib';
 
 export default class Fold extends Component {
   renderHeader() {
     const {deleteContainer} = this.context;
-    const {canDelete, name} = this.props;
+    const {canDelete} = this.props;
     const doDelete = canDelete && typeof deleteContainer === 'function';
     return (
       <div className={bem('fold', 'top', ['active'])}>
@@ -36,6 +36,7 @@ export default class Fold extends Component {
 
 Fold.propTypes = {
   canDelete: PropTypes.bool,
+  children: PropTypes.node,
   hideHeader: PropTypes.bool,
   name: PropTypes.string,
 };

src/components/containers/Panel.js

@@ -6,13 +6,13 @@ class Panel extends Component {
   render() {
     if (this.props.visible) {
       return <div className={bem('panel')}>{this.props.children}</div>;
-    } else {
-      return <div />;
     }
+    return <div />;
   }
 }
 
 Panel.propTypes = {
+  children: PropTypes.node,
   visible: PropTypes.bool,
 };
 

src/components/containers/__tests__/Layout-test.js

@@ -41,10 +41,11 @@ Layouts.forEach(Layout => {
         .find('[attr="width"]')
         .find(NumericInput);
 
-      wrapper.prop('onChange')(200);
+      const widthUpdate = 200;
+      wrapper.prop('onChange')(widthUpdate);
       const event = onUpdate.mock.calls[0][0];
       expect(event.type).toBe(EDITOR_ACTIONS.UPDATE_LAYOUT);
-      expect(event.payload).toEqual({update: {width: 200}});
+      expect(event.payload).toEqual({update: {width: widthUpdate}});
     });
   });
 });

src/components/containers/__tests__/Section-test.js

@@ -33,13 +33,15 @@ describe('Section', () => {
     expect(
       wrapper
         .find(Flaglist)
-        .childAt(0) // unwrap higher-level component
+        // unwrap higher-level component
+        .childAt(0)
         .exists()
     ).toBe(true);
     expect(
       wrapper
         .find(Numeric)
-        .childAt(0) // unwrap higher-level component
+        // unwrap higher-level component
+        .childAt(0)
         .exists()
     ).toBe(false);
   });

src/components/fields/Color.js

@@ -2,7 +2,7 @@ import ColorPicker from '../widgets/ColorPicker';
 import Field from './Field';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {bem, connectToContainer} from '../../lib';
+import {connectToContainer} from '../../lib';
 
 class Color extends Component {
   render() {

src/components/fields/DataSelector.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Field from './Field';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
-import {connectToContainer, unpackPlotProps} from '../../lib';
+import {connectToContainer} from '../../lib';
 
 function attributeIsData(meta = {}) {
   return meta.valType === 'data_array' || meta.arrayOk;

src/components/fields/Flaglist.js

@@ -2,7 +2,7 @@ import Field from './Field';
 import FlaglistCheckboxGroup from '../widgets/FlaglistCheckboxGroup';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {bem, connectToContainer} from '../../lib';
+import {connectToContainer} from '../../lib';
 
 class Flaglist extends Component {
   render() {

src/components/sidebar/SidebarGroup.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {bem} from '../../lib';
 
@@ -58,6 +59,10 @@ export default class SidebarGroup extends Component {
   }
 }
 
-SidebarGroup.defaultProps = {
-  expanded: false,
+SidebarGroup.propTypes = {
+  group: PropTypes.string,
+  onChangeGroup: PropTypes.func,
+  panels: PropTypes.array,
+  selectedGroup: PropTypes.string,
+  selectedPanel: PropTypes.string,
 };

src/components/sidebar/SidebarItem.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {bem} from '../../lib';
 
@@ -13,3 +14,9 @@ export default class SidebarItem extends Component {
     );
   }
 }
+
+SidebarItem.propTypes = {
+  active: PropTypes.bool,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+};

src/components/widgets/ColorPicker.js

@@ -12,6 +12,7 @@ import {
 import {CustomPicker as customPicker} from 'react-color';
 import {localize} from '../../lib';
 
+/* eslint-disable no-inline-comments */
 const defaultColors = [
   '#444444',
   '#ffffff',
@@ -26,6 +27,7 @@ const defaultColors = [
   '#bcbd22', // curry yellow-green
   '#17becf', // blue-teal
 ];
+/* eslint-enable no-inline-comments */
 
 // Utility functions for converting ColorPicker color objects or raw strings
 // into TinyColor objects.

src/components/widgets/Dropdown.js

@@ -1,6 +1,6 @@
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Select from 'react-select';
-import PropTypes from 'prop-types';
 
 class Dropdown extends Component {
   constructor(props) {
@@ -15,9 +15,8 @@ class Dropdown extends Component {
     if (!selection) {
       return onChange(null);
     } else if (multi) {
-      console.log(valueKey, selection);
       throw new Error('TODO: de-ramda');
-      //return onChange(map(prop(valueKey), selection));
+      // return onChange(map(prop(valueKey), selection));
     }
 
     return onChange(selection[valueKey]);

src/components/widgets/EditableText.js

@@ -1,5 +1,7 @@
-import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+
+const ENTER_KEYCODE = 13;
 
 // A generic component to handle text that can be edited when the user
 // clicks on it.
@@ -41,7 +43,7 @@ class EditableText extends Component {
 
   handleKeyPress(event) {
     // This will force handleUpdate to be called via the input's onBlur
-    if ((event.keyCode || event.which) === 13) {
+    if ((event.keyCode || event.which) === ENTER_KEYCODE) {
       this._ref.blur();
     }
   }

src/components/widgets/FlaglistCheckboxGroup.js

@@ -68,7 +68,7 @@ class FlaglistCheckboxGroup extends Component {
   renderCheckedOption() {
     const activeOptions = this.state.activeOption.split('+');
     const allOptions = this.props.options;
-    let newOptions = [];
+    const newOptions = [];
 
     allOptions.map(option => {
       let currentChecked;