typescript(vx-geo): re-write packages in TypeScript

packages/vx-geo/package.json

@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -31,16 +32,21 @@
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/d3-geo": "^1.11.1",
+    "@types/geojson": "*",
+    "@types/react": "*",
     "@vx/group": "0.0.192",
     "classnames": "^2.2.5",
     "d3-geo": "^1.11.3",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {
+    "@types/topojson-client": "^3.0.0",
     "topojson-client": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.3.0-0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Group } from '@vx/group';
+import { geoGraticule, GeoGraticuleGenerator } from 'd3-geo';
+// eslint-disable-next-line import/no-unresolved
+import { LineString, MultiLineString, Polygon } from 'geojson';
+
+export type GraticuleProps = {
+  /**
+   * Render function for graticules which is passed a GeoJSON MultiLineString geometry object
+   * representing all meridians and parallels for the graticule.
+   */
+  graticule?: (multiLineString: MultiLineString) => string;
+  /**
+   * Render function for graticule lines, which is invoked once for each meridian or parallel for the graticule,
+   * and is passed the GeoJSON LineString object representing said meridian or parallel.
+   */
+  lines?: (lineString: LineString) => string;
+  /**
+   * Render function for the outline of the graticule (i.e. along the meridians and parallels defining its extent).
+   * It is passed a GeoJSON Polygon geometry object representing the outline.
+   */
+  outline?: (polygon: Polygon) => string;
+  /** Override render function, which is passed the configured graticule generator. */
+  children?: ({ graticule }: { graticule: GeoGraticuleGenerator }) => React.ReactNode;
+  /** Sets the major and minor extents of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩. */
+  extent?: [[number, number], [number, number]];
+  /** Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -90° + ε⟩, ⟨180°, 90° - ε⟩⟩. */
+  extentMajor?: [[number, number], [number, number]];
+  /** Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩. */
+  extentMinor?: [[number, number], [number, number]];
+  /** Sets both the major and minor step of the graticule generator. */
+  step?: [number, number];
+  /** Sets the major step of the graticule generator, which defaults to ⟨90°, 360°⟩. */
+  stepMajor?: [number, number];
+  /** Sets the major step of the graticule generator, which defaults to ⟨10°, 10°⟩. */
+  stepMinor?: [number, number];
+  /** Sets the precision of the graticule generator, which defaults to 2.5°. */
+  precision?: number;
+};
+
+export default function Graticule({
+  graticule,
+  lines,
+  outline,
+  extent,
+  extentMajor,
+  extentMinor,
+  step,
+  stepMajor,
+  stepMinor,
+  precision,
+  children,
+  ...restProps
+}: GraticuleProps & Omit<React.SVGProps<SVGPathElement>, keyof GraticuleProps>) {
+  const currGraticule = geoGraticule();
+
+  if (extent) currGraticule.extent(extent);
+  if (extentMajor) currGraticule.extentMajor(extentMajor);
+  if (extentMinor) currGraticule.extentMinor(extentMinor);
+  if (step) currGraticule.step(step);
+  if (stepMajor) currGraticule.stepMajor(stepMajor);
+  if (stepMinor) currGraticule.stepMinor(stepMinor);
+  if (precision) currGraticule.precision(precision);
+
+  if (children) return <>{children({ graticule: currGraticule })}</>;
+
+  return (
+    <Group className="vx-geo-graticule">
+      {graticule && (
+        <path d={graticule(currGraticule())} fill="none" stroke="black" {...restProps} />
+      )}
+      {lines &&
+        currGraticule.lines().map((line, i) => (
+          <g key={i}>
+            <path d={lines(line)} fill="none" stroke="black" {...restProps} />
+          </g>
+        ))}
+      {outline && (
+        <path d={outline(currGraticule.outline())} fill="none" stroke="black" {...restProps} />
+      )}
+    </Group>
+  );
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import Projection, { ProjectionProps, GeoPermissibleObjects } from './Projection';
+
+/**
+ * All props pass through to `<Projection projection="albers" {...props} />`
+ */
+export default function Albers<Datum extends GeoPermissibleObjects>(props: ProjectionProps<Datum>) {
+  return <Projection<Datum> projection="albers" {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import Projection, { ProjectionProps, GeoPermissibleObjects } from './Projection';
+
+/**
+ * All props pass through to `<Projection projection="albersUsa" {...props} />`
+ */
+export default function AlbersUsa<Datum extends GeoPermissibleObjects>(
+  props: ProjectionProps<Datum>,
+) {
+  return <Projection<Datum> projection="albersUsa" {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import Projection, { ProjectionProps, GeoPermissibleObjects } from './Projection';
+
+/**
+ * All props pass through to `<Projection projection={customProjection} {...props} />`
+ */
+export default function CustomProjection<Datum extends GeoPermissibleObjects>(
+  props: ProjectionProps<Datum>,
+) {
+  return <Projection<Datum> {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import Projection, { ProjectionProps, GeoPermissibleObjects } from './Projection';
+
+/**
+ * All props pass through to `<Projection projection="equalEarth" {...props} />`
+ */
+export default function EqualEarth<Datum extends GeoPermissibleObjects>(
+  props: ProjectionProps<Datum>,
+) {
+  return <Projection<Datum> projection="equalEarth" {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import Projection, { ProjectionProps, GeoPermissibleObjects } from './Projection';
+
+/**
+ * All props pass through to `<Projection projection="mercator" {...props} />`
+ */
+export default function Mercator<Datum extends GeoPermissibleObjects>(
+  props: ProjectionProps<Datum>,
+) {
+  return <Projection<Datum> projection="mercator" {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import Projection, { ProjectionProps, GeoPermissibleObjects } from './Projection';
+
+/**
+ * All props pass through to `<Projection projection="naturalEarth" {...props} />`
+ */
+export default function NaturalEarth<Datum extends GeoPermissibleObjects>(
+  props: ProjectionProps<Datum>,
+) {
+  return <Projection<Datum> projection="naturalEarth" {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import Projection, { ProjectionProps, GeoPermissibleObjects } from './Projection';
+
+/**
+ * All props pass through to `<Projection projection="orthographic" {...props} />`
+ */
+export default function Orthographic<Datum extends GeoPermissibleObjects>(
+  props: ProjectionProps<Datum>,
+) {
+  return <Projection<Datum> projection="orthographic" {...props} />;
+}