feat(line): init typescript migration

plouc · Dec 4, 2023 · 18caae7 · 18caae7
1 parent 4423820
commit 18caae7
Show file tree

Hide file tree

Showing 34 changed files with 1,339 additions and 987 deletions.
diff --git a/packages/colors/src/inheritedColor.ts b/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

diff --git a/packages/core/index.d.ts b/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

diff --git a/packages/legends/src/types.ts b/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

diff --git a/packages/line/package.json b/packages/line/package.json
@@ -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"

diff --git a/packages/line/src/Areas.js → packages/line/src/Areas.tsx b/packages/line/src/Areas.js → packages/line/src/Areas.tsx
@@ -1,9 +1,16 @@
-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)
@@ -26,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)