@nivo/radar TypeScript migration

packages/core/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Interpolation, SpringConfig } from '@react-spring/web'
+import { CurveFactory } from 'd3-shape'
 
 declare module '@nivo/core' {
     export type DatumValue = string | number | Date
@@ -381,13 +382,18 @@ declare module '@nivo/core' {
         y: number
     }
 
-    export type ValueFormat<Value> =
-        // d3 formatter
-        | string
+    export type ValueFormat<Value, Context = void> =
+        | string // d3 formatter
         // explicit formatting function
-        | ((value: Value) => string)
-    export function getValueFormatter<Value>(format?: ValueFormat<Value>): (value: Value) => string
-    export function useValueFormatter<Value>(format?: ValueFormat<Value>): (value: Value) => string
+        | (Context extends void
+              ? (value: Value) => string
+              : (value: Value, context: Context) => string)
+    export function getValueFormatter<Value, Context = void>(
+        format?: ValueFormat<Value, Context>
+    ): Context extends void ? (value: Value) => string : (value: Value, context: Context) => string
+    export function useValueFormatter<Value, Context = void>(
+        format?: ValueFormat<Value, Context>
+    ): Context extends void ? (value: Value) => string : (value: Value, context: Context) => string
 
     export type PropertyAccessor<Datum, Value> =
         // path to use with `lodash.get()`
@@ -437,4 +443,84 @@ declare module '@nivo/core' {
         props: CartesianMarkersProps<X, Y>
     ) => JSX.Element
     export const CartesianMarkers: CartesianMarkersType
+
+    export type CurveFactoryId =
+        | 'basis'
+        | 'basisClosed'
+        | 'basisOpen'
+        | 'bundle'
+        | 'cardinal'
+        | 'cardinalClosed'
+        | 'cardinalOpen'
+        | 'catmullRom'
+        | 'catmullRomClosed'
+        | 'catmullRomOpen'
+        | 'linear'
+        | 'linearClosed'
+        | 'monotoneX'
+        | 'monotoneY'
+        | 'natural'
+        | 'step'
+        | 'stepAfter'
+        | 'stepBefore'
+
+    // Curve factories compatible d3 line shape generator
+    export type LineCurveFactoryId =
+        | 'basis'
+        | 'cardinal'
+        | 'catmullRom'
+        | 'linear'
+        | 'monotoneX'
+        | 'monotoneY'
+        | 'natural'
+        | 'step'
+        | 'stepAfter'
+        | 'stepBefore'
+
+    // Curve factories compatible d3 area shape generator
+    export type AreaCurveFactoryId =
+        | 'basis'
+        | 'cardinal'
+        | 'catmullRom'
+        | 'linear'
+        | 'monotoneX'
+        | 'monotoneY'
+        | 'natural'
+        | 'step'
+        | 'stepAfter'
+        | 'stepBefore'
+
+    export type ClosedCurveFactoryId =
+        | 'basisClosed'
+        | 'cardinalClosed'
+        | 'catmullRomClosed'
+        | 'linearClosed'
+    export const closedCurvePropKeys: ClosedCurveFactoryId[]
+
+    export const curveFromProp: (interpolation: CurveFactoryId) => CurveFactory
+
+    export const useCurveInterpolation: (interpolation: CurveFactoryId) => CurveFactory
+
+    export interface DotsItemSymbolProps {
+        size: number
+        color: string
+        borderWidth: number
+        borderColor: string
+    }
+    export type DotsItemSymbolComponent = React.FunctionComponent<DotsItemSymbolProps>
+
+    export interface DotsItemProps<D = any> {
+        datum: D
+        x: number
+        y: number
+        size: number
+        color: string
+        borderWidth: number
+        borderColor: string
+        label?: string | number
+        labelTextAnchor?: 'start' | 'middle' | 'end'
+        labelYOffset?: number
+        symbol?: DotsItemSymbolComponent
+    }
+    export const DotsItem: React.FunctionComponent<DotsItemProps>
 }

packages/core/package.json

@@ -34,7 +34,8 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@nivo/tooltip": "0.73.0"
+    "@nivo/tooltip": "0.73.0",
+    "@types/d3-shape": "^2.0.0"
   },
   "peerDependencies": {
     "@nivo/tooltip": "0.73.0",

packages/core/src/components/dots/DotsItem.js

@@ -1,34 +1,26 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import { createElement, memo } from 'react'
 import PropTypes from 'prop-types'
 import { useSpring, animated } from '@react-spring/web'
-import { dotsThemePropType } from '../../theming'
+import { useTheme } from '../../theming'
 import { useMotionConfig } from '../../motion'
 import DotsItemSymbol from './DotsItemSymbol'
 
 const DotsItem = ({
     x,
     y,
-    symbol,
+    symbol = DotsItemSymbol,
     size,
     datum,
     color,
     borderWidth,
     borderColor,
     label,
-    labelTextAnchor,
-    labelYOffset,
-    theme,
+    labelTextAnchor = 'middle',
+    labelYOffset = -12,
 }) => {
-    const { animate, config: springConfig } = useMotionConfig()
+    const theme = useTheme()
 
+    const { animate, config: springConfig } = useMotionConfig()
     const animatedProps = useSpring({
         transform: `translate(${x}, ${y})`,
         config: springConfig,
@@ -68,19 +60,6 @@ DotsItem.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     labelTextAnchor: PropTypes.oneOf(['start', 'middle', 'end']),
     labelYOffset: PropTypes.number.isRequired,
-
-    theme: PropTypes.shape({
-        dots: dotsThemePropType.isRequired,
-    }).isRequired,
 }
 
-export const DotsItemDefaultProps = {
-    symbol: DotsItemSymbol,
-
-    labelTextAnchor: 'middle',
-    labelYOffset: -12,
-}
-
-DotsItem.defaultProps = DotsItemDefaultProps
-
 export default memo(DotsItem)

packages/core/src/hooks/useValueFormatter.js

@@ -17,7 +17,7 @@ export const getValueFormatter = format => {
     }
 
     // no formatting
-    return v => `${v}`
+    return value => `${value}`
 }
 
 export const useValueFormatter = format => useMemo(() => getValueFormatter(format), [format])

packages/core/src/props/curve.js

@@ -48,8 +48,6 @@ export const curvePropType = PropTypes.oneOf(curvePropKeys)
 
 export const closedCurvePropKeys = curvePropKeys.filter(c => c.endsWith('Closed'))
 
-export const closedCurvePropType = PropTypes.oneOf(closedCurvePropKeys)
-
 // Safe curves to be used with d3 area shape generator
 export const areaCurvePropKeys = without(
     curvePropKeys,
@@ -63,8 +61,6 @@ export const areaCurvePropKeys = without(
     'linearClosed'
 )
 
-export const areaCurvePropType = PropTypes.oneOf(areaCurvePropKeys)
-
 // Safe curves to be used with d3 line shape generator
 export const lineCurvePropKeys = without(
     curvePropKeys,

packages/radar/package.json

@@ -21,11 +21,12 @@
   ],
   "main": "./dist/nivo-radar.cjs.js",
   "module": "./dist/nivo-radar.es.js",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "index.d.ts",
-    "dist/"
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
     "@nivo/colors": "0.73.0",
@@ -40,7 +41,6 @@
   },
   "peerDependencies": {
     "@nivo/core": "0.73.0",
-    "prop-types": ">= 15.5.10 < 16.0.0",
     "react": ">= 16.14.0 < 18.0.0"
   },
   "publishConfig": {