feat(geo): add TypeScript definitions

Makefile

@@ -129,6 +129,7 @@ packages-tslint: ##@1 packages run tslint on all packages
         ./packages/bar/index.d.ts \
         ./packages/calendar/index.d.ts \
         ./packages/core/index.d.ts \
+		./packages/geo/index.d.ts \
         ./packages/heatmap/index.d.ts \
         ./packages/legends/index.d.ts \
         ./packages/line/index.d.ts \

packages/core/src/components/Container.js

@@ -22,11 +22,6 @@ const tooltipStyle = {
     zIndex: 10,
 }
 
-const noopHandlers = {
-    showTooltip: noop,
-    hideTooltip: noop,
-}
-
 const Container = ({ children, theme, isInteractive = true }) => {
     const containerEl = useRef(null)
     const [state, setState] = useState({

packages/core/src/hocs/withContainer.js

@@ -90,8 +90,10 @@ Container.propTypes = {
 }
 
 export const withContainer = WrappedComponent => {
+    // eslint-disable-next-line react/display-name
     return class extends Component {
         render() {
+            // eslint-disable-next-line react/prop-types
             const { theme, ...rest } = this.props
 
             return (

packages/core/src/tooltip/BasicTooltip.js

@@ -60,4 +60,6 @@ BasicTooltip.defaultProps = {
     enableChip: false,
 }
 
+BasicTooltip.displayName = 'BasicTooltip'
+
 export default BasicTooltip

packages/core/src/tooltip/Chip.js

@@ -24,4 +24,6 @@ Chip.defaultProps = {
     style: {},
 }
 
+Chip.displayName = 'Chip'
+
 export default Chip

packages/core/src/tooltip/TableTooltip.js

@@ -53,4 +53,6 @@ TableTooltip.propTypes = {
     renderContent: PropTypes.func,
 }
 
+TableTooltip.displayName = 'TableTooltip'
+
 export default TableTooltip

packages/geo/index.d.ts

@@ -0,0 +1,129 @@
+import * as React from 'react'
+import { Dimensions, Theme, Box, BoxAlign } from '@nivo/core'
+
+declare module '@nivo/geo' {
+    ///////////////////////////////////////////////////////////////////////////
+    // Common
+    ///////////////////////////////////////////////////////////////////////////
+
+    export type GeoProjectionType =
+        | 'azimuthalEqualArea'
+        | 'azimuthalEquidistant'
+        | 'gnomonic'
+        | 'orthographic'
+        | 'stereographic'
+        | 'equalEarth'
+        | 'equirectangular'
+        | 'mercator'
+        | 'transverseMercator'
+        | 'naturalEarth1'
+
+    type FeatureAccessor<F, T> = (feature: F) => T
+
+    interface CommonProps {
+        features: any[]
+
+        margin?: Partial<Box>
+
+        projectionType?: GeoProjectionType
+        projectionScale?: number
+        projectionTranslation?: [number, number]
+        projectionRotation?: [number, number, number]
+
+        enableGraticule?: boolean
+        graticuleLineWidth?: number
+        graticuleLineColor?: string
+
+        isInteractive?: boolean
+
+        theme?: Partial<Theme>
+    }
+
+    ///////////////////////////////////////////////////////////////////////////
+    // GeoMap
+    ///////////////////////////////////////////////////////////////////////////
+
+    export type GeoMapTooltip = React.FunctionComponent<{
+        feature: any
+    }>
+
+    export type GeoMapEventHandler = (feature: any, event: React.MouseEvent<any>) => void
+
+    interface GeoMapCommonProps extends CommonProps {
+        fillColor?: string | FeatureAccessor<any, string>
+        borderWidth?: number | FeatureAccessor<any, number>
+        borderColor?: string | FeatureAccessor<any, number>
+
+        onMouseEnter?: GeoMapEventHandler
+        onMouseMove?: GeoMapEventHandler
+        onMouseLeave?: GeoMapEventHandler
+        onClick?: GeoMapEventHandler
+
+        tooltip?: GeoMapTooltip
+    }
+
+    export interface GeoMapProps extends GeoMapCommonProps {}
+    export interface GeoMapCanvasProps extends GeoMapCommonProps {
+        pixelRatio?: number
+    }
+
+    export class GeoMap extends React.Component<GeoMapProps & Dimensions> {}
+    export class ResponsiveGeoMap extends React.Component<GeoMapProps> {}
+    export class GeoMapCanvas extends React.Component<GeoMapCanvasProps & Dimensions> {}
+    export class ResponsiveGeoMapCanvas extends React.Component<GeoMapCanvasProps> {}
+
+    ///////////////////////////////////////////////////////////////////////////
+    // Choropleth
+    ///////////////////////////////////////////////////////////////////////////
+
+    export interface ChoroplethBoundFeature {
+        label: string
+        value: number
+        formattedValue: 'string | number'
+        color: string
+        data: any
+    }
+
+    export type ChoroplethEventHandler = (
+        feature: ChoroplethBoundFeature,
+        event: React.MouseEvent<any>
+    ) => void
+
+    export type ChoroplethTooltip = React.FunctionComponent<{
+        feature: ChoroplethBoundFeature
+    }>
+
+    type DatumMatcher = (...args: any[]) => boolean
+
+    interface ChoroplethCommonProps extends CommonProps {
+        data: any[]
+
+        match?: string | DatumMatcher
+        label?: string | FeatureAccessor<any, string>
+        value?: string | FeatureAccessor<any, number>
+        valueFormat?: string | FeatureAccessor<any, string | number>
+        colors?: string | string[] | FeatureAccessor<any, string>
+        unknownColor?: string
+
+        fillColor?: string | FeatureAccessor<ChoroplethBoundFeature, string>
+        borderWidth?: number | FeatureAccessor<ChoroplethBoundFeature, number>
+        borderColor?: string | FeatureAccessor<ChoroplethBoundFeature, number>
+
+        tooltip?: ChoroplethTooltip
+
+        onMouseEnter?: ChoroplethEventHandler
+        onMouseMove?: ChoroplethEventHandler
+        onMouseLeave?: ChoroplethEventHandler
+        onClick?: ChoroplethEventHandler
+    }
+
+    export interface ChoroplethProps extends ChoroplethCommonProps {}
+    export interface ChoroplethCanvasProps extends ChoroplethCommonProps {
+        pixelRatio?: number
+    }
+
+    export class Choropleth extends React.Component<ChoroplethProps & Dimensions> {}
+    export class ResponsiveChoropleth extends React.Component<ChoroplethProps> {}
+    export class ChoroplethCanvas extends React.Component<ChoroplethCanvasProps & Dimensions> {}
+    export class ResponsiveChoroplethCanvas extends React.Component<ChoroplethCanvasProps> {}
+}

packages/geo/src/ChoroplethTooltip.js

@@ -27,4 +27,6 @@ ChoroplethTooltip.propTypes = {
     feature: PropTypes.object.isRequired,
 }
 
+ChoroplethTooltip.displayName = 'ChoroplethTooltip'
+
 export default ChoroplethTooltip

packages/geo/src/GeoGraticule.js

@@ -20,4 +20,6 @@ GeoGraticule.propTypes = {
     lineColor: PropTypes.string.isRequired,
 }
 
+GeoGraticule.displayName = 'GeoGraticule'
+
 export default GeoGraticule

packages/geo/src/GeoMapCanvas.js

@@ -18,32 +18,34 @@ const getFeatureFromMouseEvent = (event, el, features, projection) => {
     return features.find(f => geoContains(f, projection.invert([x, y])))
 }
 
-const GeoMapCanvas = ({
-    width,
-    height,
-    margin: partialMargin,
-    pixelRatio,
-    features,
-    layers,
-
-    projectionType,
-    projectionScale,
-    projectionTranslation,
-    projectionRotation,
-
-    fillColor,
-    borderWidth,
-    borderColor,
-
-    enableGraticule,
-    graticuleLineWidth,
-    graticuleLineColor,
-
-    isInteractive,
-    onClick,
-    onMouseMove,
-    tooltip: Tooltip,
-}) => {
+const GeoMapCanvas = props => {
+    const {
+        width,
+        height,
+        margin: partialMargin,
+        pixelRatio,
+        features,
+        layers,
+
+        projectionType,
+        projectionScale,
+        projectionTranslation,
+        projectionRotation,
+
+        fillColor,
+        borderWidth,
+        borderColor,
+
+        enableGraticule,
+        graticuleLineWidth,
+        graticuleLineColor,
+
+        isInteractive,
+        onClick,
+        onMouseMove,
+        tooltip: Tooltip,
+    } = props
+
     const canvasEl = useRef(null)
     const theme = useTheme()
     const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
@@ -164,16 +166,3 @@ GeoMapCanvas.propTypes = GeoMapCanvasPropTypes
 GeoMapCanvas.defaultProps = GeoMapCanvasDefaultProps
 
 export default withContainer(GeoMapCanvas)
-
-/*
-handleClick = event => {
-    const { isInteractive, onClick } = this.props
-
-    if (isInteractive !== true) return
-
-    const feature = this.getFeatureFromMouseEvent(event)
-    if (feature) {
-        onClick(feature, event)
-    }
-}
-*/

packages/geo/src/GeoMapFeature.js

@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { memo, useCallback } from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 
 const GeoMapFeature = memo(
@@ -57,21 +57,6 @@ GeoMapFeature.propTypes = {
     onClick: PropTypes.func.isRequired,
 }
 
-export default GeoMapFeature
-
-/*
-handleMouseEnter = event => {
-    const { onMouseEnter, feature } = this.props
-    onMouseEnter(feature, event)
-}
+GeoMapFeature.displayName = 'GeoMapFeature'
 
-handleMouseMove = event => {
-    const { onMouseMove, feature } = this.props
-    onMouseMove(feature, event)
-}
-
-handleMouseLeave = event => {
-    const { onMouseLeave, feature } = this.props
-    onMouseLeave(feature, event)
-}
-*/
+export default GeoMapFeature

packages/geo/src/props.js

@@ -26,14 +26,14 @@ const commonPropTypes = {
     projectionTranslation: PropTypes.arrayOf(PropTypes.number).isRequired,
     projectionRotation: PropTypes.arrayOf(PropTypes.number).isRequired,
 
-    enableGraticule: PropTypes.bool.isRequired,
-    graticuleLineWidth: PropTypes.number.isRequired,
-    graticuleLineColor: PropTypes.string.isRequired,
-
     fillColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
     borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
 
+    enableGraticule: PropTypes.bool.isRequired,
+    graticuleLineWidth: PropTypes.number.isRequired,
+    graticuleLineColor: PropTypes.string.isRequired,
+
     isInteractive: PropTypes.bool.isRequired,
     onMouseEnter: PropTypes.func.isRequired,
     onMouseMove: PropTypes.func.isRequired,

tslint.json

@@ -6,6 +6,7 @@
         "ordered-imports": false,
         "max-classes-per-file": false,
         "interface-name": false,
+        "no-empty-interface": false,
         "trailing-comma": [
             true,
             {