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

packages/vx-glyph/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,12 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.3.0-0"
   },
   "dependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/d3-shape": "^1.3.1",
+    "@types/react": "*",
     "@vx/group": "0.0.192",
     "classnames": "^2.2.5",
     "d3-shape": "^1.2.0",

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import cx from 'classnames';
+import { Group } from '@vx/group';
+
+export type GlyphProps = {
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** classname to apply to glyph g element container. */
+  className?: string;
+  /** Children to render. */
+  children?: React.ReactNode;
+};
+
+export default function Glyph({ top = 0, left = 0, className, children }: GlyphProps) {
+  return (
+    <Group className={cx('vx-glyph', className)} top={top} left={left}>
+      {children}
+    </Group>
+  );
+}

packages/vx-glyph/src/glyphs/GlyphCircle.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolCircle } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphCircleProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of circle in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphCircle<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphCircleProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphCircleProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolCircle);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-circle', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}

packages/vx-glyph/src/glyphs/GlyphCross.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolCross } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphCrossProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of cross in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphCross<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphCrossProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphCrossProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolCross);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-cross', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}

packages/vx-glyph/src/glyphs/GlyphDiamond.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolDiamond } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphDiamondProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of diamond in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphDiamond<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphDiamondProps<Datum> &
+  Omit<React.SVGProps<SVGPathElement>, keyof GlyphDiamondProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolDiamond);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-diamond', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}

packages/vx-glyph/src/glyphs/GlyphDot.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import cx from 'classnames';
+import Glyph from './Glyph';
+
+export type GlyphDotProps = {
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Radius of dot. */
+  r?: number;
+  /** x coordinate of the center of the dot. */
+  cx?: number;
+  /** y coordinate of the center of the dot. */
+  cy?: number;
+};
+
+export default function GlyphDot({
+  top = 0,
+  left = 0,
+  className,
+  ...restProps
+}: GlyphDotProps & Omit<React.SVGProps<SVGCircleElement>, keyof GlyphDotProps>) {
+  return (
+    <Glyph top={top} left={left}>
+      <circle className={cx('vx-glyph-dot', className)} {...restProps} />
+    </Glyph>
+  );
+}

packages/vx-glyph/src/glyphs/GlyphSquare.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolSquare } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphSquareProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of square in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphSquare<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphSquareProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphSquareProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolSquare);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-square', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}