feat(bump): migrate @nivo/bump to TypeScript

Author: plouc

packages/bump/index.d.ts packages/bump/_old_index.d.tspackages/bump/index.d.ts renamed to packages/bump/_old_index.d.ts

@@ -22,17 +22,18 @@
   ],
   "main": "./dist/nivo-bump.cjs.js",
   "module": "./dist/nivo-bump.es.js",
-  "typings": "./index.d.ts",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "index.d.ts",
-    "dist/"
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
     "@nivo/axes": "0.75.0",
     "@nivo/colors": "0.75.0",
     "@nivo/legends": "0.75.0",
+    "@nivo/scales": "0.75.0",
     "@nivo/tooltip": "0.75.0",
     "@react-spring/web": "9.3.1",
     "d3-shape": "^1.3.5"
@@ -42,7 +43,6 @@
   },
   "peerDependencies": {
     "@nivo/core": "0.75.0",
-    "prop-types": ">= 15.5.10 < 16.0.0",
     "react": ">= 16.14.0 < 18.0.0"
   },
   "publishConfig": {

packages/bump/package.json

@@ -1,10 +1,27 @@
-import { memo } from 'react'
-import PropTypes from 'prop-types'
 import { useSpring, animated } from '@react-spring/web'
-import { useAnimatedPath, useMotionConfig, blendModePropType } from '@nivo/core'
-import { useSerieHandlers } from './hooks'
+import { useAnimatedPath, useMotionConfig } from '@nivo/core'
+import { useAreaBumpSerieHandlers } from './hooks'
+import {
+    AreaBumpAreaGenerator,
+    AreaBumpCommonProps,
+    AreaBumpComputedSerie,
+    AreaBumpDatum,
+} from './types'
 
-const Area = ({
+interface AreaProps<D extends AreaBumpDatum> {
+    serie: AreaBumpComputedSerie<D>
+    areaGenerator: AreaBumpAreaGenerator
+    blendMode: AreaBumpCommonProps<D>['blendMode']
+    isInteractive: AreaBumpCommonProps<D>['isInteractive']
+    onMouseEnter?: AreaBumpCommonProps<D>['onMouseEnter']
+    onMouseMove?: AreaBumpCommonProps<D>['onMouseMove']
+    onMouseLeave?: AreaBumpCommonProps<D>['onMouseLeave']
+    onClick?: AreaBumpCommonProps<D>['onClick']
+    setCurrentSerie: any
+    tooltip: AreaBumpCommonProps<D>['tooltip']
+}
+
+export const Area = <D extends AreaBumpDatum>({
     serie,
     areaGenerator,
     blendMode,
@@ -15,8 +32,8 @@ const Area = ({
     onClick,
     setCurrentSerie,
     tooltip,
-}) => {
-    const handlers = useSerieHandlers({
+}: AreaProps<D>) => {
+    const handlers = useAreaBumpSerieHandlers<D>({
         serie,
         isInteractive,
         onMouseEnter,
@@ -29,8 +46,13 @@ const Area = ({
 
     const { animate, config: springConfig } = useMotionConfig()
 
-    const animatedPath = useAnimatedPath(areaGenerator(serie.areaPoints))
-    const animatedProps = useSpring({
+    const animatedPath = useAnimatedPath(areaGenerator(serie.areaPoints)!)
+    const animatedProps = useSpring<{
+        color: string
+        fillOpacity: number
+        stroke: string
+        strokeOpacity: number
+    }>({
         color: serie.color,
         fillOpacity: serie.style.fillOpacity,
         stroke: serie.style.borderColor,
@@ -55,29 +77,3 @@ const Area = ({
         />
     )
 }
-
-Area.propTypes = {
-    serie: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        color: PropTypes.string.isRequired,
-        fill: PropTypes.string,
-        areaPoints: PropTypes.array.isRequired,
-        style: PropTypes.shape({
-            fillOpacity: PropTypes.number.isRequired,
-            borderWidth: PropTypes.number.isRequired,
-            borderColor: PropTypes.string.isRequired,
-            borderOpacity: PropTypes.number.isRequired,
-        }).isRequired,
-    }).isRequired,
-    areaGenerator: PropTypes.func.isRequired,
-    blendMode: blendModePropType.isRequired,
-    isInteractive: PropTypes.bool.isRequired,
-    onMouseEnter: PropTypes.func,
-    onMouseMove: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    onClick: PropTypes.func,
-    setCurrentSerie: PropTypes.func.isRequired,
-    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-}
-
-export default memo(Area)