feat(linting): add eslint on several packages

.travis.yml

@@ -3,6 +3,7 @@ node_js:
   - '8'
 script:
   - make init
+  - make packages-lint
   - make packages-test
   - make website-build
   - make storybook-build

Makefile

@@ -89,6 +89,10 @@ endef
 #
 ########################################################################################################################
 
+packages-lint: ##@1 packages run eslint on packages
+	@echo "${YELLOW}Running eslint on all packages${RESET}"
+	@./node_modules/.bin/lerna run lint
+
 packages-test: ##@1 packages run tests for all packages
 	# stream can be used for a mire verbose output
 	#@./node_modules/.bin/lerna run --concurrency 1 --stream test

package.json

@@ -24,14 +24,15 @@
     "@storybook/react": "^3.2.17",
     "chalk": "^2.3.0",
     "clog-cli": "^1.0.0",
+    "eslint": "^4.12.1",
     "gh-pages": "^1.0.0",
     "lerna": "^2.5.1",
-    "prettier": "^1.6.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
     "lodash": "^4.17.4",
+    "prettier": "^1.6.1",
     "prop-types": "^15.5.10",
-    "puppeteer": "^0.13.0"
+    "puppeteer": "^0.13.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
   },
   "scripts": {
     "fmt": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --color --write \"{src,specs,test,.storybook,stories}/**/*.js\"",

packages/nivo-bar/.eslintrc.yml

@@ -0,0 +1,18 @@
+parser: babel-eslint
+
+parserOptions:
+  ecmaVersion: 6
+  sourceType: module
+  ecmaFeatures:
+    jsx: true
+    experimentalObjectRestSpread: true
+
+env:
+  browser: true
+
+globals:
+  global: true
+
+extends:
+  - eslint:recommended
+  - plugin:react/recommended

packages/nivo-bar/package.json

@@ -17,8 +17,11 @@
     "@nivo/babel-preset": "0.32.0",
     "@nivo/generators": "0.32.0",
     "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.0.3",
     "babel-jest": "^20.0.3",
     "cross-env": "^5.0.5",
+    "eslint": "^4.12.1",
+    "eslint-plugin-react": "^7.5.1",
     "jest": "^21.0.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
@@ -32,6 +35,7 @@
     "access": "public"
   },
   "scripts": {
+    "lint": "eslint src stories tests",
     "test": "jest --verbose ./tests",
     "test:cover": "jest --verbose --coverage ./tests",
     "build:commonjs": "rm -rf lib && cross-env NODE_ENV=commonjs babel src --out-dir lib",

packages/nivo-bar/src/BarItem.js

@@ -105,6 +105,7 @@ BarItem.propTypes = {
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
 
     theme: PropTypes.shape({
         tooltip: PropTypes.shape({}).isRequired,

packages/nivo-bar/src/ResponsiveBar.js

@@ -10,8 +10,10 @@ import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
 import Bar from './Bar'
 
-export default props => (
+const ResponsiveBar = props => (
     <ResponsiveWrapper>
         {({ width, height }) => <Bar width={width} height={height} {...props} />}
     </ResponsiveWrapper>
 )
+
+export default ResponsiveBar

packages/nivo-bar/src/ResponsiveBarCanvas.js

@@ -10,8 +10,10 @@ import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
 import BarCanvas from './BarCanvas'
 
-export default props => (
+const ResponsiveBarCanvas = props => (
     <ResponsiveWrapper>
         {({ width, height }) => <BarCanvas width={width} height={height} {...props} />}
     </ResponsiveWrapper>
 )
+
+export default ResponsiveBarCanvas

packages/nivo-bar/stories/.eslintrc.yml

@@ -0,0 +1,5 @@
+globals:
+  module: true
+
+rules:
+  react/prop-types: 0

packages/nivo-bar/tests/.eslintrc.yml

@@ -0,0 +1,2 @@
+env:
+  jest: true

packages/nivo-calendar/.eslintrc.yml

@@ -0,0 +1,18 @@
+parser: babel-eslint
+
+parserOptions:
+  ecmaVersion: 6
+  sourceType: module
+  ecmaFeatures:
+    jsx: true
+    experimentalObjectRestSpread: true
+
+env:
+  browser: true
+
+globals:
+  global: true
+
+extends:
+  - eslint:recommended
+  - plugin:react/recommended

packages/nivo-calendar/package.json

@@ -16,8 +16,11 @@
   "devDependencies": {
     "@nivo/babel-preset": "0.32.0",
     "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.0.3",
     "babel-jest": "^20.0.3",
     "cross-env": "^5.0.5",
+    "eslint": "^4.12.1",
+    "eslint-plugin-react": "^7.5.1",
     "jest": "^21.0.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"
@@ -30,6 +33,7 @@
     "access": "public"
   },
   "scripts": {
+    "lint": "eslint src stories tests",
     "build:commonjs": "rm -rf lib && cross-env NODE_ENV=commonjs babel src --out-dir lib",
     "build:commonjs:watch": "npm run build:commonjs -- --watch",
     "build:es": "rm -rf es && cross-env NODE_ENV=es babel src --out-dir es",

packages/nivo-calendar/src/ResponsiveCalendar.js

@@ -10,8 +10,10 @@ import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
 import Calendar from './Calendar'
 
-export default props => (
+const ResponsiveCalendar = props => (
     <ResponsiveWrapper>
         {({ width, height }) => <Calendar width={width} height={height} {...props} />}
     </ResponsiveWrapper>
 )
+
+export default ResponsiveCalendar

packages/nivo-calendar/src/enhance.js

@@ -6,7 +6,6 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React from 'react'
 import compose from 'recompose/compose'
 import defaultProps from 'recompose/defaultProps'
 import withPropsOnChange from 'recompose/withPropsOnChange'

packages/nivo-chord/.eslintrc.yml

@@ -0,0 +1,18 @@
+parser: babel-eslint
+
+parserOptions:
+  ecmaVersion: 6
+  sourceType: module
+  ecmaFeatures:
+    jsx: true
+    experimentalObjectRestSpread: true
+
+env:
+  browser: true
+
+globals:
+  global: true
+
+extends:
+  - eslint:recommended
+  - plugin:react/recommended

packages/nivo-chord/package.json

@@ -18,8 +18,11 @@
     "@nivo/babel-preset": "0.32.0",
     "@nivo/generators": "0.32.0",
     "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.0.3",
     "babel-jest": "^20.0.3",
     "cross-env": "^5.0.5",
+    "eslint": "^4.12.1",
+    "eslint-plugin-react": "^7.5.1",
     "jest": "^21.0.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"
@@ -32,6 +35,7 @@
     "access": "public"
   },
   "scripts": {
+    "lint": "eslint src stories tests",
     "build:commonjs": "rm -rf lib && cross-env NODE_ENV=commonjs babel src --out-dir lib",
     "build:commonjs:watch": "npm run build:commonjs -- --watch",
     "build:es": "rm -rf es && cross-env NODE_ENV=es babel src --out-dir es",

packages/nivo-chord/src/ChordArcTooltip.js

@@ -25,6 +25,7 @@ const ChordArcTooltip = ({ arc, theme, format }) => (
 ChordArcTooltip.propTypes = {
     arc: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
+    format: PropTypes.func,
 }
 
 export default pure(ChordArcTooltip)

packages/nivo-chord/src/ChordArcs.js

@@ -12,6 +12,11 @@ import { TransitionMotion, spring } from 'react-motion'
 import pure from 'recompose/pure'
 import { colorMotionSpring, getInterpolatedColor } from '@nivo/core'
 import ChordArcTooltip from './ChordArcTooltip'
+import {
+    defaultAnimate,
+    defaultMotionDamping,
+    defaultMotionStiffness,
+} from '../../nivo-core/src/defaults'
 
 const ChordArcs = ({
     arcs,
@@ -122,11 +127,16 @@ ChordArcs.propTypes = {
     arcs: PropTypes.array.isRequired,
     shapeGenerator: PropTypes.func.isRequired,
     borderWidth: PropTypes.number.isRequired,
+    getBorderColor: PropTypes.func.isRequired,
     getOpacity: PropTypes.func.isRequired,
     setCurrent: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    animate: defaultAnimate,
+    motionDamping: defaultMotionDamping,
+    motionStiffness: defaultMotionStiffness,
 }
 
 export default pure(ChordArcs)

packages/nivo-chord/src/ChordLabels.js

@@ -10,6 +10,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
 import { midAngle, getPolarLabelProps } from '@nivo/core'
+import {
+    defaultAnimate,
+    defaultMotionDamping,
+    defaultMotionStiffness,
+} from '../../nivo-core/src/defaults'
 
 const ChordLabels = ({
     arcs,
@@ -30,15 +35,17 @@ const ChordLabels = ({
                 {arcs.map(arc => {
                     const color = getColor(arc, theme)
                     const angle = midAngle(arc)
-                    const props = getPolarLabelProps(radius, angle, rotation)
+                    const textProps = getPolarLabelProps(radius, angle, rotation)
 
                     return (
                         <text
                             key={arc.key}
-                            transform={`translate(${props.x}, ${props.y}) rotate(${props.rotate})`}
+                            transform={`translate(${textProps.x}, ${textProps.y}) rotate(${
+                                textProps.rotate
+                            })`}
                             style={{ pointerEvents: 'none', fill: color }}
-                            textAnchor={props.align}
-                            alignmentBaseline={props.baseline}
+                            textAnchor={textProps.align}
+                            alignmentBaseline={textProps.baseline}
                         >
                             {getLabel(arc)}
                         </text>
@@ -71,17 +78,17 @@ const ChordLabels = ({
                 <g>
                     {interpolatedStyles.map(({ key, style, data: arc }) => {
                         const color = getColor(arc, theme)
-                        const props = getPolarLabelProps(radius, style.angle, rotation)
+                        const textProps = getPolarLabelProps(radius, style.angle, rotation)
 
                         return (
                             <text
                                 key={key}
-                                transform={`translate(${props.x}, ${props.y}) rotate(${
-                                    props.rotate
+                                transform={`translate(${textProps.x}, ${textProps.y}) rotate(${
+                                    textProps.rotate
                                 })`}
                                 style={{ pointerEvents: 'none', fill: color }}
-                                textAnchor={props.align}
-                                alignmentBaseline={props.baseline}
+                                textAnchor={textProps.align}
+                                alignmentBaseline={textProps.baseline}
                             >
                                 {getLabel(arc)}
                             </text>
@@ -100,6 +107,9 @@ ChordLabels.propTypes = {
     getLabel: PropTypes.func.isRequired,
     getColor: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,
+    animate: defaultAnimate,
+    motionDamping: defaultMotionDamping,
+    motionStiffness: defaultMotionStiffness,
 }
 
 export default ChordLabels

packages/nivo-chord/src/ChordRibbons.js

@@ -17,6 +17,11 @@ import pure from 'recompose/pure'
 import { colorMotionSpring, getInterpolatedColor } from '@nivo/core'
 import { midAngle } from '@nivo/core'
 import { TableTooltip, Chip } from '@nivo/core'
+import {
+    defaultAnimate,
+    defaultMotionDamping,
+    defaultMotionStiffness,
+} from '../../nivo-core/src/defaults'
 
 /**
  * Used to get ribbon angles, instead of using source and target arcs,
@@ -101,13 +106,13 @@ const ChordRibbons = ({
                 theme={theme}
                 rows={[
                     [
-                        <Chip color={ribbon.source.color} />,
-                        <strong>{ribbon.source.id}</strong>,
+                        <Chip key="chip" color={ribbon.source.color} />,
+                        <strong key="id">{ribbon.source.id}</strong>,
                         tooltipFormat ? tooltipFormat(ribbon.source.value) : ribbon.source.value,
                     ],
                     [
-                        <Chip color={ribbon.target.color} />,
-                        <strong>{ribbon.target.id}</strong>,
+                        <Chip key="chip" color={ribbon.target.color} />,
+                        <strong key="id">{ribbon.target.id}</strong>,
                         tooltipFormat ? tooltipFormat(ribbon.target.value) : ribbon.target.value,
                     ],
                 ]}
@@ -222,6 +227,10 @@ ChordRibbons.propTypes = {
     theme: PropTypes.object.isRequired,
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    animate: defaultAnimate,
+    motionDamping: defaultMotionDamping,
+    motionStiffness: defaultMotionStiffness,
 }
 
 const enhance = compose(

packages/nivo-chord/src/ResponsiveChord.js

@@ -10,8 +10,10 @@ import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
 import Chord from './Chord'
 
-export default props => (
+const ResponsiveChord = props => (
     <ResponsiveWrapper>
         {({ width, height }) => <Chord width={width} height={height} {...props} />}
     </ResponsiveWrapper>
 )
+
+export default ResponsiveChord

packages/nivo-chord/src/ResponsiveChordCanvas.js

@@ -10,8 +10,10 @@ import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
 import ChordCanvas from './ChordCanvas'
 
-export default props => (
+const ResponsiveChordCanvas = props => (
     <ResponsiveWrapper>
         {({ width, height }) => <ChordCanvas width={width} height={height} {...props} />}
     </ResponsiveWrapper>
 )
+
+export default ResponsiveChordCanvas

packages/nivo-chord/stories/.eslintrc.yml

@@ -0,0 +1,5 @@
+globals:
+  module: true
+
+rules:
+  react/prop-types: 0