Merge pull request #507 from hshoff/chris--typescript-vx-shape

typescript(vx-shape): Re-write package in TypeScript

packages/vx-shape/package.json

@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "repository": "https://github.com/hshoff/vx",
   "files": [
     "lib",
@@ -23,21 +24,25 @@
   "author": "@hshoff",
   "license": "MIT",
   "dependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/d3-path": "^1.0.8",
+    "@types/d3-shape": "^1.3.1",
+    "@types/react": "*",
     "@vx/curve": "0.0.192",
     "@vx/group": "0.0.192",
-    "@vx/point": "0.0.192",
     "classnames": "^2.2.5",
     "d3-path": "^1.0.5",
     "d3-shape": "^1.2.0",
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.3.0-0"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
+    "@types/d3-hierarchy": "^1.1.6",
     "d3-hierarchy": "^1.1.8"
   }
 }

packages/vx-shape/src/shapes/Arc.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import React from 'react';
+import cx from 'classnames';
+import { arc as d3Arc, Arc as ArcType } from 'd3-shape';
+import setNumOrAccessor, { NumberAccessor } from '../util/setNumberOrNumberAccessor';
+import { $TSFIXME } from '../types';
+
+export type ArcProps<Datum> = {
+  /** className applied to path element. */
+  className?: string;
+  /** A Datum for which to generate an arc. */
+  data?: Datum;
+  /** Override render function which is passed the configured arc generator as input. */
+  children?: (args: { path: ArcType<$TSFIXME, Datum> }) => React.ReactNode;
+  /** React ref to the path element. */
+  innerRef?: React.Ref<SVGPathElement>;
+  /** Number or accessor function which returns a number, which defines the arc innerRadius. */
+  innerRadius?: NumberAccessor<Datum> | number;
+  /** Number or accessor function which returns a number, which defines the arc outerRadius. */
+  outerRadius?: NumberAccessor<Datum> | number;
+  /** Number or accessor function which returns a number, which defines the arc cornerRadius. */
+  cornerRadius?: NumberAccessor<Datum> | number;
+  /** Number or accessor function which returns a number, which defines the arc startAngle. */
+  startAngle?: NumberAccessor<Datum> | number;
+  /** Number or accessor function which returns a number, which defines the arc endAngle. */
+  endAngle?: NumberAccessor<Datum> | number;
+  /** Number or accessor function which returns a number, which defines the arc padAngle. */
+  padAngle?: NumberAccessor<Datum> | number;
+  /** Number or accessor function which returns a number, which defines the arc padRadius. */
+  padRadius?: NumberAccessor<Datum> | number;
+};
+
+export default function Arc<Datum>({
+  className,
+  data,
+  innerRadius,
+  outerRadius,
+  cornerRadius,
+  startAngle,
+  endAngle,
+  padAngle,
+  padRadius,
+  children,
+  innerRef,
+  ...restProps
+}: ArcProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof ArcProps<Datum>>) {
+  const arc = d3Arc<Datum>();
+  if (innerRadius != null) setNumOrAccessor(arc.innerRadius, innerRadius);
+  if (outerRadius != null) setNumOrAccessor(arc.outerRadius, outerRadius);
+  if (cornerRadius != null) setNumOrAccessor(arc.cornerRadius, cornerRadius);
+  if (startAngle != null) setNumOrAccessor(arc.startAngle, startAngle);
+  if (endAngle != null) setNumOrAccessor(arc.endAngle, endAngle);
+  if (padAngle != null) setNumOrAccessor(arc.padAngle, padAngle);
+  if (padRadius != null) setNumOrAccessor(arc.padRadius, padRadius);
+
+  if (children) return <>{children({ path: arc })}</>;
+  if (!data) return null;
+
+  return (
+    <path ref={innerRef} className={cx('vx-arc', className)} d={arc(data) || ''} {...restProps} />
+  );
+}

packages/vx-shape/src/shapes/Area.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import cx from 'classnames';
+import { area, Area as AreaType, CurveFactory } from 'd3-shape';
+import setNumOrAccessor from '../util/setNumberOrNumberAccessor';
+
+type NumberAccessor<Datum> = (datum: Datum, index: number, data: Datum[]) => number;
+
+export type AreaProps<Datum> = {
+  /** Override render function which is passed the configured area generator as input. */
+  children?: (args: { path: AreaType<Datum> }) => React.ReactNode;
+  /** Classname applied to path element. */
+  className?: string;
+  /** Array of data for which to generate an area shape. */
+  data?: Datum[];
+  /** The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined. */
+  defined?: (datum: Datum, index: number, data: Datum[]) => boolean;
+  /** Sets the curve factory (from @vx/curve or d3-curve) for the area generator. Defaults to curveLinear. */
+  curve?: CurveFactory;
+  /** React RefObject passed to the path element. */
+  innerRef?: React.Ref<SVGPathElement>;
+  /** Sets the x0 accessor function, and sets x1 to null. */
+  x?: NumberAccessor<Datum> | number;
+  /** Specifies the x0 accessor function which defaults to d => d[0]. */
+  x0?: NumberAccessor<Datum> | number;
+  /** Specifies the x1 accessor function which defaults to null. */
+  x1?: NumberAccessor<Datum> | number;
+  /** Sets the y0 accessor function, and sets y1 to null. */
+  y?: NumberAccessor<Datum> | number;
+  /** Specifies the y0 accessor function which defaults to d => 0. */
+  y0?: NumberAccessor<Datum> | number;
+  /** Specifies the y1 accessor function which defaults to d => d[1]. */
+  y1?: NumberAccessor<Datum> | number;
+};
+
+export default function Area<Datum>({
+  children,
+  x,
+  x0,
+  x1,
+  y,
+  y0,
+  y1,
+  data = [],
+  defined = () => true,
+  className,
+  curve,
+  innerRef,
+  ...restProps
+}: AreaProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof AreaProps<Datum>>) {
+  const path = area<Datum>();
+  if (x) setNumOrAccessor(path.x, x);
+  if (x0) setNumOrAccessor(path.x0, x0);
+  if (x1) setNumOrAccessor(path.x1, x1);
+  if (y) setNumOrAccessor(path.y, y);
+  if (y0) setNumOrAccessor(path.y0, y0);
+  if (y1) setNumOrAccessor(path.y1, y1);
+  if (defined) path.defined(defined);
+  if (curve) path.curve(curve);
+  if (children) return <>{children({ path })}</>;
+  return (
+    <path ref={innerRef} className={cx('vx-area', className)} d={path(data) || ''} {...restProps} />
+  );
+}

packages/vx-shape/src/shapes/AreaClosed.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import React from 'react';
+import cx from 'classnames';
+import { area } from 'd3-shape';
+import { AreaProps } from './Area';
+import { ScaleType } from '../types';
+import setNumOrAccessor from '../util/setNumberOrNumberAccessor';
+
+export type AreaClosedProps<Datum> = {
+  yScale: ScaleType;
+} & Pick<
+  AreaProps<Datum>,
+  | 'className'
+  | 'innerRef'
+  | 'children'
+  | 'curve'
+  | 'defined'
+  | 'data'
+  | 'x'
+  | 'x0'
+  | 'x1'
+  | 'y'
+  | 'y0'
+  | 'y1'
+>;
+
+export default function AreaClosed<Datum>({
+  x,
+  x0,
+  x1,
+  y,
+  y1,
+  y0,
+  yScale,
+  data = [],
+  defined = () => true,
+  className,
+  curve,
+  innerRef,
+  children,
+  ...restProps
+}: AreaClosedProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof AreaClosedProps<Datum>>) {
+  const path = area<Datum>();
+  if (x) setNumOrAccessor(path.x, x);
+  if (x0) setNumOrAccessor(path.x0, x0);
+  if (x1) setNumOrAccessor(path.x1, x1);
+  if (y0) {
+    setNumOrAccessor(path.y0, y0);
+  } else {
+    /**
+     * by default set the baseline to the first element of the yRange
+     * @TODO take the minimum instead?
+     */
+    path.y0(yScale.range()[0]);
+  }
+  if (y && !y1) setNumOrAccessor(path.y1, y);
+  if (y1 && !y) setNumOrAccessor(path.y1, y1);
+  if (defined) path.defined(defined);
+  if (curve) path.curve(curve);
+  if (children) return <>{children({ path })}</>;
+  return (
+    <path
+      ref={innerRef}
+      className={cx('vx-area-closed', className)}
+      d={path(data) || ''}
+      {...restProps}
+    />
+  );
+}