Line package TypeScript migration

packages/colors/src/inheritedColor.ts

@@ -59,7 +59,7 @@ const isInheritedColorConfigFromContext = <Datum>(
 export const getInheritedColorGenerator = <Datum = any>(
     config: InheritedColorConfig<Datum>,
     theme?: Theme
-) => {
+): ((datum: Datum) => string) => {
     // user provided function
     if (typeof config === 'function') {
         return config

packages/core/index.d.ts

@@ -543,7 +543,7 @@ interface CartesianMarkersProps<
     height: number
     xScale: (value: X) => number
     yScale: (value: Y) => number
-    markers: CartesianMarkerProps<X | Y>[]
+    markers: readonly CartesianMarkerProps<X | Y>[]
 }
 type CartesianMarkersType = <X extends DatumValue = DatumValue, Y extends DatumValue = DatumValue>(
     props: CartesianMarkersProps<X, Y>
@@ -623,7 +623,7 @@ export interface DotsItemProps<D = any> {
     color: string
     borderWidth: number
     borderColor: string
-    label?: string | number
+    label?: string | number | null
     labelTextAnchor?: 'start' | 'middle' | 'end'
     labelYOffset?: number
     symbol?: DotsItemSymbolComponent

packages/legends/src/types.ts

@@ -65,7 +65,7 @@ export type Datum = {
 }
 
 type CommonLegendProps = {
-    data?: Datum[]
+    data?: readonly Datum[]
     direction: LegendDirection
     padding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>
     justify?: boolean

packages/line/index.d.ts

@@ -1,11 +1,3 @@
-/*
- * 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 * as React from 'react'
 import {
     Dimensions,

packages/line/package.json

@@ -21,12 +21,12 @@
     ],
     "main": "./dist/nivo-line.cjs.js",
     "module": "./dist/nivo-line.es.js",
-    "types": "./index.d.ts",
+    "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
         "LICENSE.md",
-        "index.d.ts",
-        "dist/"
+        "dist/",
+        "!dist/tsconfig.tsbuildinfo"
     ],
     "dependencies": {
         "@nivo/annotations": "workspace:*",
@@ -38,8 +38,8 @@
         "@nivo/tooltip": "workspace:*",
         "@nivo/voronoi": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2",
-        "d3-shape": "^1.3.5",
-        "prop-types": "^15.7.2"
+        "@types/d3-shape": "^2.0.0",
+        "d3-shape": "^1.3.5"
     },
     "peerDependencies": {
         "react": ">= 16.14.0 < 19.0.0"

packages/line/src/Areas.js → packages/line/src/Areas.tsx

@@ -1,17 +1,16 @@
-/*
- * 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 { memo } from 'react'
-import PropTypes from 'prop-types'
 import { useSpring, animated } from '@react-spring/web'
-import { useAnimatedPath, useMotionConfig, blendModePropType } from '@nivo/core'
+import { useAnimatedPath, useMotionConfig, CssMixBlendMode } from '@nivo/core'
+import { AreaGenerator, ComputedSeries, LineSeries } from './types'
+
+interface AreaPathProps {
+    areaBlendMode: CssMixBlendMode
+    areaOpacity: number
+    color: string
+    fill?: string
+    path: string
+}
 
-const AreaPath = ({ areaBlendMode, areaOpacity, color, fill, path }) => {
+const AreaPath = ({ areaBlendMode, areaOpacity, color, fill, path }: AreaPathProps) => {
     const { animate, config: springConfig } = useMotionConfig()
 
     const animatedPath = useAnimatedPath(path)
@@ -34,35 +33,30 @@ const AreaPath = ({ areaBlendMode, areaOpacity, color, fill, path }) => {
     )
 }
 
-AreaPath.propTypes = {
-    areaBlendMode: blendModePropType.isRequired,
-    areaOpacity: PropTypes.number.isRequired,
-    color: PropTypes.string,
-    fill: PropTypes.string,
-    path: PropTypes.string.isRequired,
+interface AreasProps<Series extends LineSeries> {
+    areaGenerator: AreaGenerator
+    areaOpacity: number
+    areaBlendMode: CssMixBlendMode
+    lines: readonly ComputedSeries<Series>[]
 }
 
-const Areas = ({ areaGenerator, areaOpacity, areaBlendMode, lines }) => {
+export const Areas = <Series extends LineSeries>({
+    areaGenerator,
+    areaOpacity,
+    areaBlendMode,
+    lines,
+}: AreasProps<Series>) => {
     const computedLines = lines.slice(0).reverse()
 
     return (
         <g>
             {computedLines.map(line => (
                 <AreaPath
                     key={line.id}
-                    path={areaGenerator(line.data.map(d => d.position))}
+                    path={areaGenerator(line.data.map(d => d.position)) as string}
                     {...{ areaOpacity, areaBlendMode, ...line }}
                 />
             ))}
         </g>
     )
 }
-
-Areas.propTypes = {
-    areaGenerator: PropTypes.func.isRequired,
-    areaOpacity: PropTypes.number.isRequired,
-    areaBlendMode: blendModePropType.isRequired,
-    lines: PropTypes.arrayOf(PropTypes.object).isRequired,
-}
-
-export default memo(Areas)