typescript(vx-drag): re-write package in TypeScript

README.md

@@ -114,14 +114,8 @@ const yScale = scaleLinear({
 
 // Compose together the scale and accessor functions to get point functions
 const compose = (scale, accessor) => data => scale(accessor(data));
-const xPoint = compose(
-  xScale,
-  x,
-);
-const yPoint = compose(
-  yScale,
-  y,
-);
+const xPoint = compose(xScale, x);
+const yPoint = compose(yScale, y);
 
 // Finally we'll embed it all in an SVG
 function BarGraph(props) {
@@ -273,7 +267,9 @@ Lots coming soon, check out the [roadmap](./ROADMAP.md).
 
 ## Development
 
-[Yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) are used to manage dependencies and build config across packages in the umbrella `vx` monorepo, and [lerna](https://github.com/lerna/lerna/) is used to manage versioning.
+[Yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) are used to manage dependencies and
+build config across packages in the umbrella `vx` monorepo, and
+[lerna](https://github.com/lerna/lerna/) is used to manage versioning.
 
 ```
 vx/
@@ -308,14 +304,14 @@ yarn
 yarn build
 ```
 
-Upon modification of a signle `package` you can run `yarn build-one --workspaces=@vx/package` from 
-the `vx` monorepo root to re-build the package with your changes. You can use the local 
-[`next.js`](https://nextjs.org) dev server within `packages/vx-demo` to view and iterate on your 
-changes in the gallery. From the `packages/vx-demo` folder run `yarn dev` to start the next server 
-which (if correctly sym-linked) will also watch for changes you make to other packages (upon 
+Upon modification of a signle `package` you can run `yarn build-one --workspaces=@vx/package` from
+the `vx` monorepo root to re-build the package with your changes. You can use the local
+[`next.js`](https://nextjs.org) dev server within `packages/vx-demo` to view and iterate on your
+changes in the gallery. From the `packages/vx-demo` folder run `yarn dev` to start the next server
+which (if correctly sym-linked) will also watch for changes you make to other packages (upon
 re-building them).
 
-`vx` uses [`@airbnb/nimbus`](https://github.com/airbnb/nimbus) to generate build configuration for 
+`vx` uses [`@airbnb/nimbus`](https://github.com/airbnb/nimbus) to generate build configuration for
 `eslint`, `prettier`, `jest`, `babel`, and `typescript`.
 
 :v:

packages/vx-demo/src/components/tiles/network.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Graph } from '@vx/network';
 
-const nodes = [{ x: 50, y: 20 }, { x: 200, y: 300 }, { x: 300, y: 40 }];
+const nodes = [
+  { x: 50, y: 20 },
+  { x: 200, y: 300 },
+  { x: 300, y: 40 },
+];
 const links = [
   { source: nodes[0], target: nodes[1] },
   { source: nodes[1], target: nodes[2] },

packages/vx-drag/package.json

@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -33,9 +34,10 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.3.0-0"
   },
   "dependencies": {
+    "@types/react": "*",
     "@vx/event": "0.0.192",
     "prop-types": "^15.5.10"
   }

packages/vx-drag/src/Drag.tsx

@@ -0,0 +1,139 @@
+import { localPoint } from '@vx/event';
+import React from 'react';
+
+type MouseOrTouchEvent = React.MouseEvent | React.TouchEvent;
+
+export type DragProps = {
+  /** Children render function which is passed the state of dragging and callbacks for drag start/end/move. */
+  children: (args: ChildrenArgs) => React.ReactNode;
+  /** Width of the drag container. */
+  width: number;
+  /** Height of the drag container. */
+  height: number;
+  /** Whether to render an invisible rect below children to capture the drag area as defined by width and height. */
+  captureDragArea?: boolean;
+  /** Whether to reset drag state upon the start of a new drag. */
+  resetOnStart?: boolean;
+  /** Optional callback invoked upon drag end. */
+  onDragEnd?: (args: HandlerArgs) => void;
+  /** Optional callback invoked upon drag movement. */
+  onDragMove?: (args: HandlerArgs) => void;
+  /** Optional callback invoked upon drag start. */
+  onDragStart?: (args: HandlerArgs) => void;
+};
+
+type DragState = {
+  x: number | undefined;
+  y: number | undefined;
+  dx: number;
+  dy: number;
+  isDragging: boolean;
+};
+
+type HandlerArgs = DragState & { event: MouseOrTouchEvent };
+
+type ChildrenArgs = DragState & {
+  dragEnd: (event: MouseOrTouchEvent) => void;
+  dragMove: (event: MouseOrTouchEvent) => void;
+  dragStart: (event: MouseOrTouchEvent) => void;
+};
+
+export default class Drag extends React.Component<DragProps, DragState> {
+  static defaultProps = {
+    captureDragArea: true,
+    resetOnStart: false,
+  };
+
+  state = {
+    x: undefined,
+    y: undefined,
+    dx: 0,
+    dy: 0,
+    isDragging: false,
+  };
+
+  handleDragStart = (event: MouseOrTouchEvent) => {
+    const { onDragStart, resetOnStart } = this.props;
+    event.persist();
+
+    this.setState(
+      ({ dx, dy }) => {
+        const point = localPoint(event) || { x: 0, y: 0 };
+        return {
+          isDragging: true,
+          dx: resetOnStart ? 0 : dx,
+          dy: resetOnStart ? 0 : dy,
+          x: resetOnStart ? point.x : -dx + point.x,
+          y: resetOnStart ? point.y : -dy + point.y,
+        };
+      },
+      onDragStart &&
+        (() => {
+          onDragStart({ ...this.state, event });
+        }),
+    );
+  };
+
+  handleDragMove = (event: MouseOrTouchEvent) => {
+    const { onDragMove } = this.props;
+    event.persist();
+
+    this.setState(
+      ({ x, y, isDragging }) => {
+        const point = localPoint(event) || { x: 0, y: 0 };
+        return isDragging
+          ? {
+              isDragging: true,
+              dx: -((x || 0) - point.x),
+              dy: -((y || 0) - point.y),
+            }
+          : null;
+      },
+      onDragMove &&
+        (() => {
+          if (this.state.isDragging) onDragMove({ ...this.state, event });
+        }),
+    );
+  };
+
+  handleDragEnd = (event: MouseOrTouchEvent) => {
+    const { onDragEnd } = this.props;
+    event.persist();
+
+    this.setState(
+      { isDragging: false },
+      onDragEnd &&
+        (() => {
+          onDragEnd({ ...this.state, event });
+        }),
+    );
+  };
+
+  render() {
+    const { x, y, dx, dy, isDragging } = this.state;
+    const { children, width, height, captureDragArea } = this.props;
+    return (
+      <>
+        {isDragging && captureDragArea && (
+          <rect
+            width={width}
+            height={height}
+            onMouseMove={this.handleDragMove}
+            onMouseUp={this.handleDragEnd}
+            fill="transparent"
+          />
+        )}
+        {children({
+          x,
+          y,
+          dx,
+          dy,
+          isDragging,
+          dragEnd: this.handleDragEnd,
+          dragMove: this.handleDragMove,
+          dragStart: this.handleDragStart,
+        })}
+      </>
+    );
+  }
+}

packages/vx-drag/src/util/raise.ts

@@ -0,0 +1,8 @@
+/** Given at an array of items, moves the item at the specified index to the end of the array. */
+export default function raise<T>(items: T[], raiseIndex: number) {
+  const array = [...items];
+  const lastIndex = array.length - 1;
+  const [raiseItem] = array.splice(raiseIndex, 1);
+  array.splice(lastIndex, 0, raiseItem);
+  return array;
+}

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

@@ -11,14 +11,14 @@ import {
   geoPath,
   GeoPath,
   GeoProjection,
-  GeoPermissibleObjects,
+  GeoPermissibleObjects as GeoPermissibleObjectType,
 } from 'd3-geo';
 // eslint-disable-next-line import/no-unresolved
 import { LineString, Polygon, MultiLineString } from 'geojson';
 
 import Graticule, { GraticuleProps } from '../graticule/Graticule';
 
-export type GeoPermissibleObjects = GeoPermissibleObjects;
+export type GeoPermissibleObjects = GeoPermissibleObjectType;
 
 // TODO: Implement all projections of d3-geo
 type ProjectionPreset =

packages/vx-pattern/src/patterns/Circles.tsx

@@ -42,7 +42,12 @@ export default function PatternCircles({
 }: PatternCirclesProps) {
   let corners: [number, number][] | undefined;
   if (complement) {
-    corners = [[0, 0], [0, height], [width, 0], [width, height]];
+    corners = [
+      [0, 0],
+      [0, height],
+      [width, 0],
+      [width, height],
+    ];
   }
   return (
     <Pattern id={id} width={width} height={height}>

packages/vx-responsive/package.json

@@ -31,6 +31,7 @@
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
+    "@types/lodash": "^4.14.146",
     "@types/react": "*",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",

packages/vx-responsive/test/withParentSize.test.tsx

@@ -13,6 +13,9 @@ describe('withParentSize', () => {
       left: 0,
       bottom: 0,
       right: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => '',
     }));
   });