[vx] fix all eslint errors + warnings, add missing propTypes. fixes #10

.eslintignore

@@ -2,6 +2,10 @@
 node_modules
 build
 dist
+test
+rollup.config.js
+vx-demo
+scripts
 bundle.js
 test/tmp
 *.log

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "node": true,
+    "es6": true,
+    "browser": true
+  },
+  "rules": {
+    "linebreak-style": 0,
+    "operator-linebreak": 0,
+    "comma-dangle": 0,
+    "no-use-before-define": 0,
+    "object-curly-newline": 0,
+    "indent": 0,
+    "arrow-parens": 0,
+    "consistent-return": 0,
+    "no-restricted-syntax": 0,
+    "no-nested-ternary": 0,
+    "no-bitwise": 0,
+    "no-unused-vars": 0,
+    "no-mixed-operators": 0,
+    "no-param-reassign": 0,
+    "no-extra-boolean-cast": 0,
+    "prefer-destructuring": 0,
+    "lines-between-class-members": 0,
+    "arrow-body-style": 0,
+    "import/prefer-default-export": 0,
+    "import/order": 0,
+    "react/sort-comp": 0,
+    "react/jsx-filename-extension": 0,
+    "react/require-default-props": 0,
+    "react/forbid-prop-types": 0,
+    "react/destructuring-assignment": 0,
+    "react/no-array-index-key": 0,
+    "react/no-children-prop": 0
+  }
+}

package.json

@@ -8,9 +8,9 @@
     "docs": "node ./scripts/docs/index.js",
     "prepare-release": "git checkout master && git pull --rebase origin master && npm run docs && lerna updated",
     "release": "npm run prepare-release && lerna publish --exact",
-    "lint": "eslint \"{packages,scripts}/**/*.js\"",
-    "lint:fix": "eslint \"{packages,scripts}/**/*.js\" --fix",
-    "format": "prettier-eslint \"{packages,scripts}/**/*.js\" --write",
+    "lint": "eslint \"{packages}/**/*.js\" --config \"./.eslintrc\"",
+    "lint:fix": "eslint \"{packages}/**/*.js\" --config \"./.eslintrc\" --fix",
+    "format": "prettier-eslint \"{packages}/**/*.js\" --config \"./.eslintrc\" --write",
     "precommit": "lint-staged"
   },
   "eslintConfig": {

packages/vx-annotation/src/annotations/LinePath.js

@@ -15,7 +15,6 @@ LinePathAnnotation.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
   labelAnchor: PropTypes.oneOf(['start', 'middle', 'end']),
-  labelOrientation: PropTypes.string,
   labelDx: PropTypes.number,
   labelDy: PropTypes.number,
   labelFill: PropTypes.string,
@@ -34,9 +33,6 @@ export default function LinePathAnnotation({
   className,
   label,
   labelAnchor = 'middle',
-  labelOrientation = 'horizontal',
-  labelVerticalAlign = 'top',
-  labelHorizontalAlign = 'right',
   labelDx = 0,
   labelDy = 0,
   labelFill,

packages/vx-axis/src/utils/center.js

@@ -1,7 +1,7 @@
 export default function center(scale) {
-  var offset = scale.bandwidth() / 2;
+  let offset = scale.bandwidth() / 2;
   if (scale.round()) offset = Math.round(offset);
-  return function(d) {
+  return d => {
     return scale(d) + offset;
   };
 }

packages/vx-axis/src/utils/labelTransform.js

@@ -10,9 +10,10 @@ export default function labelTransform({
 }) {
   const sign = orientation === ORIENT.left || orientation === ORIENT.top ? -1 : 1;
 
-  let x,
-    y,
-    transform = null;
+  let x;
+  let y;
+  let transform = null;
+
   if (orientation === ORIENT.top || orientation === ORIENT.bottom) {
     x = (range[0] + range[range.length - 1]) / 2;
     y =

packages/vx-brush/src/utils/getCoordsFromEvent.js

@@ -11,7 +11,7 @@ export default function getCoordsFromEvent(node, event) {
       y: point.y
     };
   }
-  let rect = node.getBoundingClientRect();
+  const rect = node.getBoundingClientRect();
   return {
     x: event.clientX - rect.left - node.clientLeft,
     y: event.clientY - rect.top - node.clientTop

packages/vx-drag/src/Drag.js

@@ -73,7 +73,7 @@ export default class Drag extends React.Component {
               onMouseUp={this.dragEnd}
               fill="transparent"
             />
-          )}
+        )}
         {children({
           x,
           y,
@@ -94,7 +94,10 @@ Drag.propTypes = {
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
   captureDragArea: PropTypes.bool,
-  resetOnStart: PropTypes.bool
+  resetOnStart: PropTypes.bool,
+  onDragEnd: PropTypes.func,
+  onDragMove: PropTypes.func,
+  onDragStart: PropTypes.func
 };
 
 Drag.defaultProps = {

packages/vx-event/src/localPoint.js

@@ -1,47 +1,47 @@
-import { Point } from '@vx/point';
-
-export default function localPoint(node, event) {
-  // called with no args
-  if (!node) return;
-
-  // called with localPoint(event)
-  if (node.target) {
-    event = node;
-
-    // set node to targets owner svg
-    node = event.target.ownerSVGElement;
-
-    // find the outermost svg
-    while (node.ownerSVGElement) {
-      node = node.ownerSVGElement;
-    }
-  }
-
-  // default to mouse event
-  let { clientX, clientY } = event;
-
-  // support touch event
-  if (event.changedTouches) {
-    clientX = event.changedTouches[0].clientX;
-    clientY = event.changedTouches[0].clientY;
-  }
-
-  // calculate coordinates from svg
-  if (node.createSVGPoint) {
-    let point = node.createSVGPoint();
-    point.x = clientX;
-    point.y = clientY;
-    point = point.matrixTransform(node.getScreenCTM().inverse());
-    return new Point({
-      x: point.x,
-      y: point.y
-    });
-  }
-
-  // fallback to calculating position from non-svg dom node
-  let rect = node.getBoundingClientRect();
-  return new Point({
-    x: clientX - rect.left - node.clientLeft,
-    y: clientY - rect.top - node.clientTop
-  });
-}
+import { Point } from '@vx/point';
+
+export default function localPoint(node, event) {
+  // called with no args
+  if (!node) return;
+
+  // called with localPoint(event)
+  if (node.target) {
+    event = node;
+
+    // set node to targets owner svg
+    node = event.target.ownerSVGElement;
+
+    // find the outermost svg
+    while (node.ownerSVGElement) {
+      node = node.ownerSVGElement;
+    }
+  }
+
+  // default to mouse event
+  let { clientX, clientY } = event;
+
+  // support touch event
+  if (event.changedTouches) {
+    clientX = event.changedTouches[0].clientX;
+    clientY = event.changedTouches[0].clientY;
+  }
+
+  // calculate coordinates from svg
+  if (node.createSVGPoint) {
+    let point = node.createSVGPoint();
+    point.x = clientX;
+    point.y = clientY;
+    point = point.matrixTransform(node.getScreenCTM().inverse());
+    return new Point({
+      x: point.x,
+      y: point.y
+    });
+  }
+
+  // fallback to calculating position from non-svg dom node
+  const rect = node.getBoundingClientRect();
+  return new Point({
+    x: clientX - rect.left - node.clientLeft,
+    y: clientY - rect.top - node.clientTop
+  });
+}

packages/vx-event/src/touchPoint.js

@@ -1,20 +1,21 @@
-import { Point } from '@vx/point';
-export default function touchPoint(node, event) {
-  if (!node) return;
-  const svg = node.ownerSVGElement || node;
-  if (svg.createSVGPoint) {
-    let point = svg.createSVGPoint();
-    point.x = event.changedTouches[0].clientX;
-    point.y = event.changedTouches[0].clientY;
-    point = point.matrixTransform(node.getScreenCTM().inverse());
-    return new Point({
-      x: point.x,
-      y: point.y
-    });
-  }
-  const rect = node.getBoundingClientRect();
-  return new Point({
-    x: event.changedTouches[0].clientX - rect.left - node.clientLeft,
-    y: event.changedTouches[0].clientY - rect.top - node.clientTop
-  });
-}
+import { Point } from '@vx/point';
+
+export default function touchPoint(node, event) {
+  if (!node) return;
+  const svg = node.ownerSVGElement || node;
+  if (svg.createSVGPoint) {
+    let point = svg.createSVGPoint();
+    point.x = event.changedTouches[0].clientX;
+    point.y = event.changedTouches[0].clientY;
+    point = point.matrixTransform(node.getScreenCTM().inverse());
+    return new Point({
+      x: point.x,
+      y: point.y
+    });
+  }
+  const rect = node.getBoundingClientRect();
+  return new Point({
+    x: event.changedTouches[0].clientX - rect.left - node.clientLeft,
+    y: event.changedTouches[0].clientY - rect.top - node.clientTop
+  });
+}

packages/vx-geo/src/graticule/Graticule.js

@@ -28,7 +28,7 @@ export default function Graticule({
   if (precision) currGraticule.stepMinor(precision);
 
   return (
-    <Group className={`vx-geo-graticule`}>
+    <Group className="vx-geo-graticule">
       {graticule && (
         <path d={graticule(currGraticule())} fill="none" stroke="black" {...restProps} />
       )}

packages/vx-geo/src/projections/Projection.js

@@ -14,6 +14,23 @@ const projectionMapping = {
   naturalEarth: () => geoNaturalEarth1()
 };
 
+Projection.propTypes = {
+  data: PropTypes.array.isRequired,
+  projection: PropTypes.string,
+  projectionFunc: PropTypes.func,
+  clipAngle: PropTypes.number,
+  clipExtent: PropTypes.array,
+  scale: PropTypes.number,
+  translate: PropTypes.array,
+  center: PropTypes.array,
+  rotate: PropTypes.array,
+  precision: PropTypes.number,
+  fitExtent: PropTypes.array,
+  fitSize: PropTypes.array,
+  centroid: PropTypes.func,
+  className: PropTypes.string
+};
+
 /**
  * Component for all projections.
  */
@@ -56,7 +73,7 @@ export default function Projection({
   if (pointRadius) path.pointRadius(pointRadius);
 
   return (
-    <Group className={`vx-geo`}>
+    <Group className="vx-geo">
       {graticule && !graticule.foreground && <Graticule graticule={g => path(g)} {...graticule} />}
       {graticuleLines &&
         !graticuleLines.foreground && <Graticule lines={g => path(g)} {...graticuleLines} />}
@@ -93,20 +110,3 @@ export default function Projection({
     </Group>
   );
 }
-
-Projection.propTypes = {
-  data: PropTypes.array.isRequired,
-  projection: PropTypes.string,
-  projectionFunc: PropTypes.func,
-  clipAngle: PropTypes.number,
-  clipExtent: PropTypes.array,
-  scale: PropTypes.number,
-  translate: PropTypes.array,
-  center: PropTypes.array,
-  rotate: PropTypes.array,
-  precision: PropTypes.number,
-  fitExtent: PropTypes.array,
-  fitSize: PropTypes.array,
-  centroid: PropTypes.func,
-  className: PropTypes.string
-};

packages/vx-glyph/package.json

@@ -65,7 +65,8 @@
   "dependencies": {
     "@vx/group": "0.0.170",
     "classnames": "^2.2.5",
-    "d3-shape": "^1.2.0"
+    "d3-shape": "^1.2.0",
+    "prop-types": "^15.6.2"
   },
   "jest": {
     "setupFiles": [

packages/vx-glyph/src/glyphs/Glyph.js

@@ -1,6 +1,14 @@
 import React from 'react';
-import { Group } from '@vx/group';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { Group } from '@vx/group';
+
+Glyph.propTypes = {
+  top: PropTypes.number,
+  left: PropTypes.number,
+  className: PropTypes.string,
+  children: PropTypes.any
+};
 
 export default function Glyph({ top = 0, left = 0, className, children }) {
   return (

packages/vx-grid/package.json

@@ -63,7 +63,8 @@
     "@vx/group": "0.0.170",
     "@vx/point": "0.0.165",
     "@vx/shape": "0.0.178",
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.2"
   },
   "publishConfig": {
     "access": "public"

packages/vx-grid/src/grids/Columns.js

@@ -1,9 +1,24 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { Line } from '@vx/shape';
 import { Group } from '@vx/group';
 import { Point } from '@vx/point';
 
+Columns.propTypes = {
+  top: PropTypes.number,
+  left: PropTypes.number,
+  className: PropTypes.string,
+  stroke: PropTypes.string,
+  strokeWidth: PropTypes.string,
+  strokeDasharray: PropTypes.string,
+  numTicks: PropTypes.number,
+  lineStyle: PropTypes.object,
+  offset: PropTypes.number,
+  scale: PropTypes.func.isRequired,
+  height: PropTypes.number.isRequired
+};
+
 export default function Columns({
   top = 0,
   left = 0,