From eab01b80933a2fd7dc404b95fab3ba089ca5e0a1 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris_williams@airbnb.com>
Date: Tue, 24 Sep 2019 11:54:34 -0700
Subject: [PATCH 1/7] deps(vx-glyph): update deps for typescript, add types
 entry in package.json

---
 packages/vx-glyph/package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/vx-glyph/package.json b/packages/vx-glyph/package.json
index 186ee4ff9..1cb4e53ec 100644
--- a/packages/vx-glyph/package.json
+++ b/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"
@@ -36,6 +37,9 @@
     "react": "^15.0.0-0 || ^16.0.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",

From d97c4fe8c353fafe77599f54eb34e33e0d795f43 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris_williams@airbnb.com>
Date: Tue, 24 Sep 2019 12:10:57 -0700
Subject: [PATCH 2/7] typescript(vx-glyph): rename .jsx? => .tsx?

---
 packages/vx-glyph/.eslintrc                                       | 0
 packages/vx-glyph/src/glyphs/{Glyph.jsx => Glyph.tsx}             | 0
 packages/vx-glyph/src/glyphs/{GlyphCircle.jsx => GlyphCircle.tsx} | 0
 packages/vx-glyph/src/glyphs/{GlyphCross.jsx => GlyphCross.tsx}   | 0
 .../vx-glyph/src/glyphs/{GlyphDiamond.jsx => GlyphDiamond.tsx}    | 0
 packages/vx-glyph/src/glyphs/{GlyphDot.jsx => GlyphDot.tsx}       | 0
 packages/vx-glyph/src/glyphs/{GlyphSquare.jsx => GlyphSquare.tsx} | 0
 packages/vx-glyph/src/glyphs/{GlyphStar.jsx => GlyphStar.tsx}     | 0
 .../vx-glyph/src/glyphs/{GlyphTriangle.jsx => GlyphTriangle.tsx}  | 0
 packages/vx-glyph/src/glyphs/{GlyphWye.jsx => GlyphWye.tsx}       | 0
 packages/vx-glyph/src/{index.js => index.ts}                      | 0
 packages/vx-glyph/test/{Circle.test.jsx => Circle.test.tsx}       | 0
 packages/vx-glyph/test/{Cross.test.jsx => Cross.test.tsx}         | 0
 packages/vx-glyph/test/{Diamond.test.jsx => Diamond.test.tsx}     | 0
 packages/vx-glyph/test/{Dot.test.jsx => Dot.test.tsx}             | 0
 packages/vx-glyph/test/{Glyph.test.jsx => Glyph.test.tsx}         | 0
 packages/vx-glyph/test/{Square.test.jsx => Square.test.tsx}       | 0
 packages/vx-glyph/test/{Star.test.jsx => Star.test.tsx}           | 0
 packages/vx-glyph/test/{Triangle.test.jsx => Triangle.test.tsx}   | 0
 packages/vx-glyph/test/{Wye.test.jsx => Wye.test.tsx}             | 0
 20 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/vx-glyph/.eslintrc
 rename packages/vx-glyph/src/glyphs/{Glyph.jsx => Glyph.tsx} (100%)
 rename packages/vx-glyph/src/glyphs/{GlyphCircle.jsx => GlyphCircle.tsx} (100%)
 rename packages/vx-glyph/src/glyphs/{GlyphCross.jsx => GlyphCross.tsx} (100%)
 rename packages/vx-glyph/src/glyphs/{GlyphDiamond.jsx => GlyphDiamond.tsx} (100%)
 rename packages/vx-glyph/src/glyphs/{GlyphDot.jsx => GlyphDot.tsx} (100%)
 rename packages/vx-glyph/src/glyphs/{GlyphSquare.jsx => GlyphSquare.tsx} (100%)
 rename packages/vx-glyph/src/glyphs/{GlyphStar.jsx => GlyphStar.tsx} (100%)
 rename packages/vx-glyph/src/glyphs/{GlyphTriangle.jsx => GlyphTriangle.tsx} (100%)
 rename packages/vx-glyph/src/glyphs/{GlyphWye.jsx => GlyphWye.tsx} (100%)
 rename packages/vx-glyph/src/{index.js => index.ts} (100%)
 rename packages/vx-glyph/test/{Circle.test.jsx => Circle.test.tsx} (100%)
 rename packages/vx-glyph/test/{Cross.test.jsx => Cross.test.tsx} (100%)
 rename packages/vx-glyph/test/{Diamond.test.jsx => Diamond.test.tsx} (100%)
 rename packages/vx-glyph/test/{Dot.test.jsx => Dot.test.tsx} (100%)
 rename packages/vx-glyph/test/{Glyph.test.jsx => Glyph.test.tsx} (100%)
 rename packages/vx-glyph/test/{Square.test.jsx => Square.test.tsx} (100%)
 rename packages/vx-glyph/test/{Star.test.jsx => Star.test.tsx} (100%)
 rename packages/vx-glyph/test/{Triangle.test.jsx => Triangle.test.tsx} (100%)
 rename packages/vx-glyph/test/{Wye.test.jsx => Wye.test.tsx} (100%)

diff --git a/packages/vx-glyph/.eslintrc b/packages/vx-glyph/.eslintrc
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/vx-glyph/src/glyphs/Glyph.jsx b/packages/vx-glyph/src/glyphs/Glyph.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/Glyph.jsx
rename to packages/vx-glyph/src/glyphs/Glyph.tsx
diff --git a/packages/vx-glyph/src/glyphs/GlyphCircle.jsx b/packages/vx-glyph/src/glyphs/GlyphCircle.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/GlyphCircle.jsx
rename to packages/vx-glyph/src/glyphs/GlyphCircle.tsx
diff --git a/packages/vx-glyph/src/glyphs/GlyphCross.jsx b/packages/vx-glyph/src/glyphs/GlyphCross.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/GlyphCross.jsx
rename to packages/vx-glyph/src/glyphs/GlyphCross.tsx
diff --git a/packages/vx-glyph/src/glyphs/GlyphDiamond.jsx b/packages/vx-glyph/src/glyphs/GlyphDiamond.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/GlyphDiamond.jsx
rename to packages/vx-glyph/src/glyphs/GlyphDiamond.tsx
diff --git a/packages/vx-glyph/src/glyphs/GlyphDot.jsx b/packages/vx-glyph/src/glyphs/GlyphDot.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/GlyphDot.jsx
rename to packages/vx-glyph/src/glyphs/GlyphDot.tsx
diff --git a/packages/vx-glyph/src/glyphs/GlyphSquare.jsx b/packages/vx-glyph/src/glyphs/GlyphSquare.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/GlyphSquare.jsx
rename to packages/vx-glyph/src/glyphs/GlyphSquare.tsx
diff --git a/packages/vx-glyph/src/glyphs/GlyphStar.jsx b/packages/vx-glyph/src/glyphs/GlyphStar.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/GlyphStar.jsx
rename to packages/vx-glyph/src/glyphs/GlyphStar.tsx
diff --git a/packages/vx-glyph/src/glyphs/GlyphTriangle.jsx b/packages/vx-glyph/src/glyphs/GlyphTriangle.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/GlyphTriangle.jsx
rename to packages/vx-glyph/src/glyphs/GlyphTriangle.tsx
diff --git a/packages/vx-glyph/src/glyphs/GlyphWye.jsx b/packages/vx-glyph/src/glyphs/GlyphWye.tsx
similarity index 100%
rename from packages/vx-glyph/src/glyphs/GlyphWye.jsx
rename to packages/vx-glyph/src/glyphs/GlyphWye.tsx
diff --git a/packages/vx-glyph/src/index.js b/packages/vx-glyph/src/index.ts
similarity index 100%
rename from packages/vx-glyph/src/index.js
rename to packages/vx-glyph/src/index.ts
diff --git a/packages/vx-glyph/test/Circle.test.jsx b/packages/vx-glyph/test/Circle.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Circle.test.jsx
rename to packages/vx-glyph/test/Circle.test.tsx
diff --git a/packages/vx-glyph/test/Cross.test.jsx b/packages/vx-glyph/test/Cross.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Cross.test.jsx
rename to packages/vx-glyph/test/Cross.test.tsx
diff --git a/packages/vx-glyph/test/Diamond.test.jsx b/packages/vx-glyph/test/Diamond.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Diamond.test.jsx
rename to packages/vx-glyph/test/Diamond.test.tsx
diff --git a/packages/vx-glyph/test/Dot.test.jsx b/packages/vx-glyph/test/Dot.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Dot.test.jsx
rename to packages/vx-glyph/test/Dot.test.tsx
diff --git a/packages/vx-glyph/test/Glyph.test.jsx b/packages/vx-glyph/test/Glyph.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Glyph.test.jsx
rename to packages/vx-glyph/test/Glyph.test.tsx
diff --git a/packages/vx-glyph/test/Square.test.jsx b/packages/vx-glyph/test/Square.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Square.test.jsx
rename to packages/vx-glyph/test/Square.test.tsx
diff --git a/packages/vx-glyph/test/Star.test.jsx b/packages/vx-glyph/test/Star.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Star.test.jsx
rename to packages/vx-glyph/test/Star.test.tsx
diff --git a/packages/vx-glyph/test/Triangle.test.jsx b/packages/vx-glyph/test/Triangle.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Triangle.test.jsx
rename to packages/vx-glyph/test/Triangle.test.tsx
diff --git a/packages/vx-glyph/test/Wye.test.jsx b/packages/vx-glyph/test/Wye.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Wye.test.jsx
rename to packages/vx-glyph/test/Wye.test.tsx

From daa5c9c17c5852b4c31d85545b4a397092cbd62f Mon Sep 17 00:00:00 2001
From: Chris Williams <chris_williams@airbnb.com>
Date: Tue, 24 Sep 2019 12:46:11 -0700
Subject: [PATCH 3/7] fix(vx-glyph): remove eslintrc

---
 packages/vx-glyph/.eslintrc | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/vx-glyph/.eslintrc

diff --git a/packages/vx-glyph/.eslintrc b/packages/vx-glyph/.eslintrc
deleted file mode 100644
index e69de29bb..000000000

From 89acdeeb5f99c2c545355dfdf37b65445a767bb6 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris_williams@airbnb.com>
Date: Tue, 24 Sep 2019 12:46:47 -0700
Subject: [PATCH 4/7] typescript(vx-glyph): re-write package in TypeScript

---
 packages/vx-glyph/src/glyphs/Glyph.tsx        | 17 +++++---
 packages/vx-glyph/src/glyphs/GlyphCircle.tsx  | 42 ++++++++++++------
 packages/vx-glyph/src/glyphs/GlyphCross.tsx   | 42 ++++++++++++------
 packages/vx-glyph/src/glyphs/GlyphDiamond.tsx | 43 +++++++++++++------
 packages/vx-glyph/src/glyphs/GlyphDot.tsx     | 26 ++++++++---
 packages/vx-glyph/src/glyphs/GlyphSquare.tsx  | 42 ++++++++++++------
 packages/vx-glyph/src/glyphs/GlyphStar.tsx    | 41 ++++++++++++------
 .../vx-glyph/src/glyphs/GlyphTriangle.tsx     | 43 +++++++++++++------
 packages/vx-glyph/src/glyphs/GlyphWye.tsx     | 41 ++++++++++++------
 9 files changed, 232 insertions(+), 105 deletions(-)

diff --git a/packages/vx-glyph/src/glyphs/Glyph.tsx b/packages/vx-glyph/src/glyphs/Glyph.tsx
index 844b0b30d..1a25f4fd0 100644
--- a/packages/vx-glyph/src/glyphs/Glyph.tsx
+++ b/packages/vx-glyph/src/glyphs/Glyph.tsx
@@ -1,16 +1,19 @@
 import React from 'react';
 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 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 }) {
+export default function Glyph({ top = 0, left = 0, className, children }: GlyphProps) {
   return (
     <Group className={cx('vx-glyph', className)} top={top} left={left}>
       {children}
diff --git a/packages/vx-glyph/src/glyphs/GlyphCircle.tsx b/packages/vx-glyph/src/glyphs/GlyphCircle.tsx
index c6996b15a..36ef1c2b9 100644
--- a/packages/vx-glyph/src/glyphs/GlyphCircle.tsx
+++ b/packages/vx-glyph/src/glyphs/GlyphCircle.tsx
@@ -1,25 +1,41 @@
 import React from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolCircle } from 'd3-shape';
+import { Symbol, symbol, symbolCircle } from 'd3-shape';
 import Glyph from './Glyph';
 
-GlyphCircle.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+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({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
+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);
-  if (size) path.size(size);
-  if (children) return children({ path });
+
+  // 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} />
+      <path className={cx('vx-glyph-circle', className)} d={path() || ''} {...restProps} />
     </Glyph>
   );
 }
diff --git a/packages/vx-glyph/src/glyphs/GlyphCross.tsx b/packages/vx-glyph/src/glyphs/GlyphCross.tsx
index cf8467b3c..ab4353ad8 100644
--- a/packages/vx-glyph/src/glyphs/GlyphCross.tsx
+++ b/packages/vx-glyph/src/glyphs/GlyphCross.tsx
@@ -1,25 +1,41 @@
 import React from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolCross } from 'd3-shape';
+import { Symbol, symbol, symbolCross } from 'd3-shape';
 import Glyph from './Glyph';
 
-GlyphCross.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+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({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
+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);
-  if (size) path.size(size);
-  if (children) return children({ path });
+
+  // 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} />
+      <path className={cx('vx-glyph-cross', className)} d={path() || ''} {...restProps} />
     </Glyph>
   );
 }
diff --git a/packages/vx-glyph/src/glyphs/GlyphDiamond.tsx b/packages/vx-glyph/src/glyphs/GlyphDiamond.tsx
index 3ab4697ba..082cd20d5 100644
--- a/packages/vx-glyph/src/glyphs/GlyphDiamond.tsx
+++ b/packages/vx-glyph/src/glyphs/GlyphDiamond.tsx
@@ -1,25 +1,42 @@
 import React from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolDiamond } from 'd3-shape';
+import { Symbol, symbol, symbolDiamond } from 'd3-shape';
 import Glyph from './Glyph';
 
-GlyphDiamond.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+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({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
+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);
-  if (size) path.size(size);
-  if (children) return children({ path });
+
+  // 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} />
+      <path className={cx('vx-glyph-diamond', className)} d={path() || ''} {...restProps} />
     </Glyph>
   );
 }
diff --git a/packages/vx-glyph/src/glyphs/GlyphDot.tsx b/packages/vx-glyph/src/glyphs/GlyphDot.tsx
index 2bd873134..a7e436022 100644
--- a/packages/vx-glyph/src/glyphs/GlyphDot.tsx
+++ b/packages/vx-glyph/src/glyphs/GlyphDot.tsx
@@ -1,16 +1,28 @@
 import React from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
 import Glyph from './Glyph';
 
-GlyphDot.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
+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, children, ...restProps }) {
+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} />
diff --git a/packages/vx-glyph/src/glyphs/GlyphSquare.tsx b/packages/vx-glyph/src/glyphs/GlyphSquare.tsx
index b1fe362e8..e2a2915e8 100644
--- a/packages/vx-glyph/src/glyphs/GlyphSquare.tsx
+++ b/packages/vx-glyph/src/glyphs/GlyphSquare.tsx
@@ -1,25 +1,41 @@
 import React from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolSquare } from 'd3-shape';
+import { Symbol, symbol, symbolSquare } from 'd3-shape';
 import Glyph from './Glyph';
 
-GlyphSquare.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+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({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
+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);
-  if (size) path.size(size);
-  if (children) return children({ path });
+
+  // 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} />
+      <path className={cx('vx-glyph-square', className)} d={path() || ''} {...restProps} />
     </Glyph>
   );
 }
diff --git a/packages/vx-glyph/src/glyphs/GlyphStar.tsx b/packages/vx-glyph/src/glyphs/GlyphStar.tsx
index 5055a9d0d..278d4a049 100644
--- a/packages/vx-glyph/src/glyphs/GlyphStar.tsx
+++ b/packages/vx-glyph/src/glyphs/GlyphStar.tsx
@@ -1,25 +1,40 @@
 import React from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolStar } from 'd3-shape';
+import { Symbol, symbol, symbolStar } from 'd3-shape';
 import Glyph from './Glyph';
 
-GlyphStar.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+export type GlyphStarProps<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 star in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
 };
 
-export default function GlyphStar({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
+export default function GlyphStar<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphStarProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphStarProps<Datum>>) {
+  const path = symbol<Datum>();
   path.type(symbolStar);
-  if (size) path.size(size);
-  if (children) return children({ path });
+
+  // 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-star', className)} d={path()} {...restProps} />
+      <path className={cx('vx-glyph-star', className)} d={path() || ''} {...restProps} />
     </Glyph>
   );
 }
diff --git a/packages/vx-glyph/src/glyphs/GlyphTriangle.tsx b/packages/vx-glyph/src/glyphs/GlyphTriangle.tsx
index d3a901bb2..a5a01db21 100644
--- a/packages/vx-glyph/src/glyphs/GlyphTriangle.tsx
+++ b/packages/vx-glyph/src/glyphs/GlyphTriangle.tsx
@@ -1,25 +1,42 @@
 import React from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolTriangle } from 'd3-shape';
+import { Symbol, symbol, symbolTriangle } from 'd3-shape';
 import Glyph from './Glyph';
 
-GlyphTriangle.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+export type GlyphTriangleProps<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 triangle in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
 };
 
-export default function GlyphTriangle({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
+export default function GlyphTriangle<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphTriangleProps<Datum> &
+  Omit<React.SVGProps<SVGPathElement>, keyof GlyphTriangleProps<Datum>>) {
+  const path = symbol<Datum>();
   path.type(symbolTriangle);
-  if (size) path.size(size);
-  if (children) return children({ path });
+
+  // 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-triangle', className)} d={path()} {...restProps} />
+      <path className={cx('vx-glyph-triangle', className)} d={path() || ''} {...restProps} />
     </Glyph>
   );
 }
diff --git a/packages/vx-glyph/src/glyphs/GlyphWye.tsx b/packages/vx-glyph/src/glyphs/GlyphWye.tsx
index 9c5ba2903..65faca813 100644
--- a/packages/vx-glyph/src/glyphs/GlyphWye.tsx
+++ b/packages/vx-glyph/src/glyphs/GlyphWye.tsx
@@ -1,25 +1,40 @@
 import React from 'react';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolWye } from 'd3-shape';
+import { Symbol, symbol, symbolWye } from 'd3-shape';
 import Glyph from './Glyph';
 
-GlyphWye.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+export type GlyphWyeProps<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 wye glyph in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
 };
 
-export default function GlyphWye({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
+export default function GlyphWye<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphWyeProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphWyeProps<Datum>>) {
+  const path = symbol<Datum>();
   path.type(symbolWye);
-  if (size) path.size(size);
-  if (children) return children({ path });
+
+  // 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-wye', className)} d={path()} {...restProps} />
+      <path className={cx('vx-glyph-wye', className)} d={path() || ''} {...restProps} />
     </Glyph>
   );
 }

From c1559263f18070cc110947086aa7635707466b72 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris_williams@airbnb.com>
Date: Tue, 24 Sep 2019 14:50:09 -0700
Subject: [PATCH 5/7] deps(vx-glyph): require react@^16.3.0-0 peerDep

---
 packages/vx-glyph/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vx-glyph/package.json b/packages/vx-glyph/package.json
index 1cb4e53ec..5aa7cebce 100644
--- a/packages/vx-glyph/package.json
+++ b/packages/vx-glyph/package.json
@@ -34,7 +34,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.3.0-0"
   },
   "dependencies": {
     "@types/classnames": "^2.2.9",

From e5d9dd0f79efb5bfc8a218d7f5bc11f14e7894b7 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris_williams@airbnb.com>
Date: Mon, 21 Oct 2019 21:11:14 -0700
Subject: [PATCH 6/7] fix(vx-glyph): fix any in Glyph.test

---
 packages/vx-glyph/test/Glyph.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vx-glyph/test/Glyph.test.tsx b/packages/vx-glyph/test/Glyph.test.tsx
index 6f316cf2e..f83e0e34d 100644
--- a/packages/vx-glyph/test/Glyph.test.tsx
+++ b/packages/vx-glyph/test/Glyph.test.tsx
@@ -20,6 +20,6 @@ describe('<Glyph />', () => {
 
   test('it should take top,left number props', () => {
     const wrapper = render(<Glyph top={2} left={2} />);
-    expect(wrapper['0'].attribs.transform).toBe('translate(2, 2)');
+    expect(wrapper['0'].attribs.transform as string).toBe('translate(2, 2)');
   });
 });

From 0bc1d0ac33f2eb5fefc783fa0d7539b0501decdd Mon Sep 17 00:00:00 2001
From: Chris Williams <chris_williams@airbnb.com>
Date: Wed, 18 Dec 2019 10:54:17 -0800
Subject: [PATCH 7/7] test(vx-glyph): fix type

---
 packages/vx-glyph/test/Glyph.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vx-glyph/test/Glyph.test.tsx b/packages/vx-glyph/test/Glyph.test.tsx
index f83e0e34d..3cd356f34 100644
--- a/packages/vx-glyph/test/Glyph.test.tsx
+++ b/packages/vx-glyph/test/Glyph.test.tsx
@@ -20,6 +20,6 @@ describe('<Glyph />', () => {
 
   test('it should take top,left number props', () => {
     const wrapper = render(<Glyph top={2} left={2} />);
-    expect(wrapper['0'].attribs.transform as string).toBe('translate(2, 2)');
+    expect(wrapper[0].attribs.transform as string).toBe('translate(2, 2)');
   });
 });