Add linting (#13)

* Adding a bunch of rules and fixes.

* Adding jsx-a11y linting.

.eslintrc.js

@@ -0,0 +1,59 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+     "jsx-a11y"
+  ],
+  "rules": {
+    "strict": 0,
+    "camelcase": "error",
+    "indent": [ "error", 2, { "SwitchCase": 1 }],
+    "linebreak-style": [ "error", "unix" ],
+    "quotes": [ "error", "single" ],
+    "semi": [ "error", "never" ],
+    "max-len": ["error", {
+      "code": 120,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true
+    }],
+    "max-params": ["error", 3],
+    "no-console": "off",
+    "no-alert": "error",
+    "no-duplicate-imports": "error",
+    "no-else-return": "error",
+    "no-empty-function": "error",
+    "no-lonely-if": "error",
+    "no-var": "error",
+    "no-tabs": "error",
+    "prefer-const": "error",
+    "prefer-template": "error",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "react/default-props-match-prop-types": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/prefer-stateless-function": [2, { "ignorePureComponents": true }],
+    "react/prop-types": [2, { "ignore": ["children"] }],
+    "react/sort-comp": [2],
+    "react/jsx-closing-tag-location": "error",
+    "react/jsx-closing-bracket-location": "error",
+    "react/jsx-indent": [2, 2],
+    "react/jsx-key": "error",
+    "react/jsx-no-duplicate-props": [2],
+    "jsx-a11y/label-has-for": "off"
+  }
+}

package.json

@@ -6,11 +6,13 @@
   "scripts": {
     "build": "npm test && webpack --progress --config webpack.config.js src/index.js dist/snacks.js",
     "prepublish": "npm run build",
+    "lint": "eslint src --ext .js,.jsx --ignore-pattern '*.spec.js'",
+    "test:lint": "npm run lint -- --quiet",
     "start": "webpack --progress --watch --config webpack.config.js src/index.js dist/snacks.js",
     "styleguide": "styleguidist server",
     "styleguide:build": "styleguidist build && node scripts/moveBuildAssets.js",
     "test:watch": "npm test -- --watch --bail",
-    "test": "jest --coverage"
+    "test": "jest --coverage --silent && npm run test:lint"
   },
   "repository": {
     "type": "git",
@@ -32,6 +34,7 @@
   "homepage": "https://github.com/instacart/Snacks#readme",
   "devDependencies": {
     "babel-core": "^6.21.0",
+    "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
     "babel-loader": "^6.2.10",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -40,6 +43,9 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.22.0",
     "enzyme": "^2.9.1",
+    "eslint": "^4.4.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.1.0",
     "jest": "^20.0.4",
     "radium": "^0.18.2",
     "react": "^15.5.0",

src/components/Grid/Column.js

@@ -6,8 +6,10 @@ import responsive from '../../styles/responsive'
 const Column = props => {
   if (props.sizes.xs) {
     console.warn('xs size prop passed to Column!',
-    'This will be ignored. All columns at xs screen size are full-width. ',
-    'Please remove this definition. Sizes passed: ', props.sizes)
+      'This will be ignored. All columns at xs screen size are full-width. ',
+      'Please remove this definition. Sizes passed: ',
+      props.sizes
+    )
   }
 
   const getSizedStyles = () => {
@@ -49,6 +51,7 @@ const Column = props => {
 Column.propTypes = {
   /** object where keys are breakpoint and value is number of columns to span at that breakpoint */
   sizes: PropTypes.shape({
+    xs: PropTypes.number, // should never be passed
     sm: PropTypes.number,
     md: PropTypes.number,
     mdLg: PropTypes.number,

src/components/Grid/Grid.js

@@ -33,7 +33,8 @@ const styles = {
 
 const Grid = props => {
   return (
-    <div style={[
+    <div
+      style={[
         styles,
         props.styles
       ]}

src/components/Grid/Row.js

@@ -77,7 +77,8 @@ const Row = props => {
   }
 
   return (
-    <div style={[
+    <div
+      style={[
         styles,
         getMaxColumnsStyles(),
         props.styles

src/components/NavigationPills/NavigationPills.js

@@ -1,7 +1,6 @@
 import React           from 'react'
 import PropTypes       from 'prop-types'
 import Radium          from 'radium'
-import Icon            from '../Icon/Icon'
 import NavigationPill  from './NavigationPill'
 import ScrollTrack     from '../ScrollTrack/ScrollTrack'
 import colors          from '../../styles/colors'

src/components/ScrollTrack/ScrollTrack.js

@@ -1,10 +1,9 @@
 import componentStyles from './ScrollTrackStyles'
 
-import React, { Component } from "react";
+import React, { Component } from 'react'
 import CircleButton  from '../Buttons/CircleButton'
 import Icon          from '../Icon/Icon'
 import Radium        from 'radium'
-import ReactDOM      from 'react-dom'
 import PropTypes     from 'prop-types'
 import _             from 'underscore'
 
@@ -36,6 +35,14 @@ class ScrollTrack extends Component {
     window.addEventListener('resize', this.debouncdComputeSlideAttributes)
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.leftOverride !== this.props.leftOverride) {
+      // this allows for control of the scrolltrack by parent components
+      this.setState({ left: nextProps.leftOverride })
+      this.computeSlideAttributes()
+    }
+  }
+
   componentDidUpdate(prevProps) {
     const prevChildren = prevProps.children || []
     const newChildren = this.props.children || []
@@ -45,14 +52,6 @@ class ScrollTrack extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.leftOverride !== this.props.leftOverride) {
-      // this allows for control of the scrolltrack by parent components
-      this.setState({ left: nextProps.leftOverride })
-      this.computeSlideAttributes()
-    }
-  }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.debouncdComputeSlideAttributes)
   }
@@ -115,7 +114,7 @@ class ScrollTrack extends Component {
   }
 
   slideBack = () => {
-    const { parentWidth, trackWidth, trackBounds } = this.getNodeWidths()
+    const { parentWidth } = this.getNodeWidths()
     let nextBack = this.state.left + parentWidth
 
     // already is, or is going to be, full back
@@ -125,7 +124,7 @@ class ScrollTrack extends Component {
   }
 
   renderRightArrow = () => {
-    const { slideButtonStyles, icons } = componentStyles
+    const { slideButtonStyles } = componentStyles
 
     if (!this.state.showRightArrow) { return }
 

src/styles/SetStyles.js

@@ -1,4 +1,4 @@
-import React, { Component }       from "react"
+import React, { Component }       from 'react'
 import PropTypes                  from 'prop-types'
 import Radium, { Style }          from 'radium'
 import { Normalize, GlobalTheme } from '../index'

src/styles/responsive.js

@@ -1,6 +1,5 @@
 const COLUMN_WIDTH =    104               // 1/2 Item Card width
 
-const SCREEN_XS_MIN =   0                 // full width
 const SCREEN_SM_MIN =   768               // 6 columns rounded
 const SCREEN_MD_MIN =   COLUMN_WIDTH * 8  // 832
 const SCREEN_MDLG_MIN = COLUMN_WIDTH * 10 // 1040
@@ -12,7 +11,6 @@ const SCREEN_SM_MAX = SCREEN_MD_MIN - 1   // 831
 const SCREEN_MD_MAX = SCREEN_MDLG_MIN - 1 // 1039
 const SCREEN_MDLG_MAX = SCREEN_LG_MIN - 1 // 1247
 const SCREEN_LG_MAX = SCREEN_XL_MIN - 1   // 1455
-const SCREEN_XL_MAX = Infinity            // Infinity
 
 export default {
   xs:   `@media (max-width: ${SCREEN_XS_MAX}px)`,

src/styles/themer/index.js

@@ -20,7 +20,7 @@ class Themer {
 
   get(section, sectionKey) {
     if (!this._themeConfig) {
-      console.warn(`Snacks theme error: No themeConfig defined. Please use Themer template: `, themeTemplate)
+      console.warn('Snacks theme error: No themeConfig defined. Please use Themer template: ', themeTemplate)
     } else if (validConfigValue(section, sectionKey)) {
       return this._themeConfig[section][sectionKey]
     }