migration of @nivo/core to typescript and (partial) upgrade to React 18

packages/tooltip/src/BasicTooltip.tsx → deprecated/tooltip/src/BasicTooltip.tsx

@@ -17,7 +17,7 @@ export interface BasicTooltipProps {
 export const BasicTooltip = memo<BasicTooltipProps>(
     ({ id, value: _value, format, enableChip = false, color, renderContent }) => {
         const theme = useTheme()
-        const formatValue = useValueFormatter<number | string | Date>(format)
+        const formatValue = useValueFormatter<number | string | Date>(format ?? '')
 
         let content: JSX.Element
         if (typeof renderContent === 'function') {

packages/tooltip/src/TooltipProvider.tsx → deprecated/tooltip/src/TooltipProvider.tsx

@@ -1,9 +1,9 @@
-import { PropsWithChildren, MutableRefObject } from 'react'
+import { PropsWithChildren, RefObject } from 'react'
 import { TooltipActionsContext, TooltipStateContext } from './context'
 import { useTooltipHandlers } from './hooks'
 
 interface TooltipProviderProps {
-    container: MutableRefObject<HTMLDivElement>
+    container: RefObject<HTMLDivElement>
 }
 
 export const TooltipProvider = ({

packages/tooltip/src/TooltipWrapper.tsx → deprecated/tooltip/src/TooltipWrapper.tsx

@@ -1,11 +1,6 @@
 import { memo, useRef, PropsWithChildren, CSSProperties } from 'react'
 import { useSpring, animated } from '@react-spring/web'
-import {
-    useTheme,
-    useMotionConfig,
-    // @ts-ignore
-    useMeasure,
-} from '@nivo/core'
+import { useTheme, useMotionConfig, useMeasure } from '@nivo/core'
 import { TooltipStateContextDataVisible } from './context'
 
 const TOOLTIP_OFFSET = 14

packages/tooltip/src/hooks.ts → deprecated/tooltip/src/hooks.ts

@@ -1,4 +1,4 @@
-import { useState, useContext, useCallback, MutableRefObject, MouseEvent, useMemo } from 'react'
+import { useState, useContext, useCallback, RefObject, MouseEvent, useMemo } from 'react'
 import {
     TooltipActionsContext,
     TooltipActionsContextData,
@@ -8,7 +8,7 @@ import {
 } from './context'
 import { TooltipAnchor } from './types'
 
-export const useTooltipHandlers = (container: MutableRefObject<HTMLDivElement>) => {
+export const useTooltipHandlers = (container: RefObject<HTMLDivElement>) => {
     const [state, setState] = useState<TooltipStateContextData>(hiddenTooltipState)
 
     const showTooltipAt: TooltipActionsContextData['showTooltipAt'] = useCallback(
@@ -25,7 +25,9 @@ export const useTooltipHandlers = (container: MutableRefObject<HTMLDivElement>)
 
     const showTooltipFromEvent: TooltipActionsContextData['showTooltipFromEvent'] = useCallback(
         (content: JSX.Element, event: MouseEvent, anchor: TooltipAnchor = 'top') => {
-            const bounds = container.current.getBoundingClientRect()
+            const bounds = container.current
+                ? container.current.getBoundingClientRect()
+                : { left: 0, top: 0, width: 0 }
             const x = event.clientX - bounds.left
             const y = event.clientY - bounds.top
 

package.json

@@ -22,19 +22,19 @@
     "@nivo/generators": "*",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.1.1",
-    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/addon-storysource": "^6.4.9",
-    "@storybook/addons": "^6.4.9",
-    "@storybook/react": "^6.4.9",
-    "@storybook/theming": "^6.4.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-storysource": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/theming": "^6.5.9",
     "@types/enzyme": "^3.10.10",
     "@types/jest": "^27.0.3",
     "@types/lodash": "^4.14.170",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
@@ -66,9 +66,9 @@
     "prop-types": "^15.7.2",
     "puppeteer": "^0.13.0",
     "raf": "^3.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-test-renderer": "^18.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.61.1",
     "rollup-plugin-cleanup": "^3.2.1",
@@ -81,10 +81,11 @@
     "typescript": "^4.5.4"
   },
   "resolutions": {
-    "@types/react": "^17.0.11",
+    "@types/react": "^18.0.12",
     "@types/eslint": "7.29.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "@react-spring/web": "^9.4.5"
   },
   "scripts": {
     "changelog": "rm CHANGELOG.md && node scripts/generate-changelog.js",
@@ -104,6 +105,6 @@
     "node": "16.x"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.4.9"
+    "@storybook/addon-essentials": "^6.5.9"
   }
 }

packages/annotations/package.json

@@ -37,7 +37,7 @@
   },
   "peerDependencies": {
     "@nivo/core": "0.79.0",
-    "react": ">= 16.14.0 < 18.0.0"
+    "react": ">= 16.14.0 < 19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/annotations/src/compute.ts

@@ -1,10 +1,5 @@
 import { filter, isNumber, omit } from 'lodash'
-import {
-    radiansToDegrees,
-    absoluteAngleDegrees,
-    degreesToRadians,
-    positionFromAngle,
-} from '@nivo/core'
+import { radiansToDegrees, normalizeAngle, degreesToRadians, positionFromAngle } from '@nivo/core'
 import { defaultProps } from './props'
 import {
     AnnotationPositionGetter,
@@ -84,7 +79,7 @@ export const getLinkAngle = (
 ) => {
     const angle = Math.atan2(targetY - sourceY, targetX - sourceX)
 
-    return absoluteAngleDegrees(radiansToDegrees(angle))
+    return normalizeAngle(radiansToDegrees(angle))
 }
 
 export const computeAnnotation = <Datum>(

packages/arcs/package.json

@@ -38,7 +38,7 @@
   },
   "peerDependencies": {
     "@nivo/core": "0.79.0",
-    "react": ">= 16.14.0 < 18.0.0"
+    "react": ">= 16.14.0 < 19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/arcs/src/ArcShape.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react'
-import * as React from 'react'
+import { MouseEvent } from 'react'
 import { SpringValue, Interpolation, animated } from '@react-spring/web'
 import { DatumWithArcAndColor } from './types'
 
 export type ArcMouseHandler<Datum extends DatumWithArcAndColor> = (
     datum: Datum,
-    event: React.MouseEvent<SVGPathElement>
+    event: MouseEvent<SVGPathElement>
 ) => void
 
 export interface ArcShapeProps<Datum extends DatumWithArcAndColor> {
@@ -37,17 +37,23 @@ export const ArcShape = <Datum extends DatumWithArcAndColor>({
     onMouseMove,
     onMouseLeave,
 }: ArcShapeProps<Datum>) => {
-    const handleClick = useCallback(event => onClick?.(datum, event), [onClick, datum])
+    const handleClick = useCallback(
+        (event: MouseEvent<SVGPathElement>) => onClick?.(datum, event),
+        [onClick, datum]
+    )
 
     const handleMouseEnter = useCallback(
-        event => onMouseEnter?.(datum, event),
+        (event: MouseEvent<SVGPathElement>) => onMouseEnter?.(datum, event),
         [onMouseEnter, datum]
     )
 
-    const handleMouseMove = useCallback(event => onMouseMove?.(datum, event), [onMouseMove, datum])
+    const handleMouseMove = useCallback(
+        (event: MouseEvent<SVGPathElement>) => onMouseMove?.(datum, event),
+        [onMouseMove, datum]
+    )
 
     const handleMouseLeave = useCallback(
-        event => onMouseLeave?.(datum, event),
+        (event: MouseEvent<SVGPathElement>) => onMouseLeave?.(datum, event),
         [onMouseLeave, datum]
     )
 

packages/arcs/src/arc_link_labels/canvas.ts

@@ -1,8 +1,4 @@
-import {
-    // @ts-ignore
-    textPropsByEngine,
-    CompleteTheme,
-} from '@nivo/core'
+import { textPropsByEngine, CompleteTheme } from '@nivo/core'
 import { DatumWithArcAndColor } from '../types'
 import { ArcLinkLabel } from './types'
 
@@ -17,7 +13,7 @@ export const drawCanvasArcLinkLabels = <Datum extends DatumWithArcAndColor>(
 
     labels.forEach(label => {
         ctx.fillStyle = label.textColor
-        ctx.textAlign = textPropsByEngine.canvas.align[label.textAnchor]
+        ctx.textAlign = textPropsByEngine.canvas.align[label.textAnchor] as CanvasTextAlign
         ctx.fillText(`${label.label}`, label.x, label.y)
 
         ctx.beginPath()

packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts

@@ -78,7 +78,7 @@ const useTransitionPhases = <Datum extends DatumWithArcAndColor>({
                 opacity: 0,
             }),
         }),
-        [diagonalLength, straightLength, textOffset, getLinkColor, getTextColor]
+        [diagonalLength, straightLength, offset, textOffset, getLinkColor, getTextColor]
     )
 
 const interpolateLink = (

packages/arcs/src/centers.ts

@@ -1,11 +1,6 @@
 import { useMemo } from 'react'
 import { useTransition, to, SpringValue } from '@react-spring/web'
-import {
-    // @ts-ignore
-    midAngle,
-    positionFromAngle,
-    useMotionConfig,
-} from '@nivo/core'
+import { midAngle, positionFromAngle, useMotionConfig } from '@nivo/core'
 import { Arc, DatumWithArc, Point } from './types'
 import { filterDataBySkipAngle } from './utils'
 import { ArcTransitionMode, TransitionExtra, useArcTransitionMode } from './arcTransitionMode'

packages/axes/package.json

@@ -40,7 +40,7 @@
   "peerDependencies": {
     "@nivo/core": "0.79.0",
     "prop-types": ">= 15.5.10 < 16.0.0",
-    "react": ">= 16.14.0 < 18.0.0"
+    "react": ">= 16.14.0 < 19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/axes/src/canvas.ts

@@ -57,8 +57,8 @@ export const renderAxisToCanvas = <Value extends ScaleValue>(
     ctx.save()
     ctx.translate(x, y)
 
-    ctx.textAlign = textAlign
-    ctx.textBaseline = textBaseline
+    ctx.textAlign = textAlign as CanvasTextAlign
+    ctx.textBaseline = textBaseline as CanvasTextBaseline
     ctx.font = `${theme.axis.ticks.text.fontWeight ? `${theme.axis.ticks.text.fontWeight} ` : ''}${
         theme.axis.ticks.text.fontSize
     }px ${theme.axis.ticks.text.fontFamily}`

packages/axes/src/components/AxisTick.tsx

@@ -41,7 +41,7 @@ const AxisTick = <Value extends ScaleValue>({
                 transform={animatedProps.textTransform}
                 style={theme.axis.ticks.text}
             >
-                {value}
+                {value as string}
             </animated.text>
         </animated.g>
     )

packages/axes/src/compute.ts

@@ -1,6 +1,5 @@
 import { timeFormat } from 'd3-time-format'
 import { format as d3Format } from 'd3-format'
-// @ts-ignore
 import { textPropsByEngine } from '@nivo/core'
 import { ScaleValue, AnyScale, TicksSpec, getScaleTicks, centerScale } from '@nivo/scales'
 import { Point, ValueFormatter, Line } from './types'
@@ -36,8 +35,8 @@ export const computeCartesianTicks = <Value extends ScaleValue>({
 
     const isRTL = typeof document === 'object' ? document.dir === 'rtl' : false
     let translate: (value: Value) => Point
-    let textAlign: CanvasTextAlign = textProps.align.center
-    let textBaseline: CanvasTextBaseline = textProps.baseline.center
+    let textAlign = textProps.align.center
+    let textBaseline = textProps.baseline.center
 
     if (axis === 'x') {
         translate = d => ({ x: position(d) ?? 0, y: 0 })

packages/bar/package.json

@@ -34,7 +34,6 @@
     "@nivo/colors": "0.79.1",
     "@nivo/legends": "0.79.1",
     "@nivo/scales": "0.79.0",
-    "@nivo/tooltip": "0.79.0",
     "@react-spring/web": "9.4.5",
     "d3-scale": "^3.2.3",
     "d3-shape": "^1.2.2",
@@ -45,7 +44,7 @@
   },
   "peerDependencies": {
     "@nivo/core": "0.79.0",
-    "react": ">= 16.14.0 < 18.0.0"
+    "react": ">= 16.14.0 < 19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/bar/src/Bar.tsx

@@ -13,7 +13,6 @@ import {
     CartesianMarkers,
     Container,
     SvgWrapper,
-    // @ts-ignore
     bindDefs,
     useDimensions,
     useMotionConfig,

packages/bar/src/BarCanvas.tsx

@@ -12,6 +12,7 @@ import {
     isCursorInRect,
     useDimensions,
     useTheme,
+    useTooltip,
 } from '@nivo/core'
 import {
     ForwardedRef,
@@ -30,7 +31,6 @@ import {
 } from '@nivo/annotations'
 import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
 import { renderLegendToCanvas } from '@nivo/legends'
-import { useTooltip } from '@nivo/tooltip'
 import { useBar } from './hooks'
 
 type InnerBarCanvasProps<RawDatum extends BarDatum> = Omit<

packages/bar/src/BarItem.tsx

@@ -1,7 +1,6 @@
 import { createElement, MouseEvent, useCallback, useMemo } from 'react'
 import { animated, to } from '@react-spring/web'
-import { useTheme } from '@nivo/core'
-import { useTooltip } from '@nivo/tooltip'
+import { useTheme, useTooltip } from '@nivo/core'
 import { BarDatum, BarItemProps } from './types'
 
 export const BarItem = <RawDatum extends BarDatum>({

packages/bar/src/BarTooltip.tsx

@@ -1,5 +1,5 @@
 import { BarTooltipProps } from './types'
-import { BasicTooltip } from '@nivo/tooltip'
+import { BasicTooltip } from '@nivo/core'
 
 export const BarTooltip = <RawDatum,>({ color, label, ...data }: BarTooltipProps<RawDatum>) => {
     return <BasicTooltip id={label} value={data.formattedValue} enableChip={true} color={color} />

packages/bar/src/hooks.ts

@@ -72,9 +72,11 @@ export const useBar = <RawDatum extends BarDatum>({
     legendLabel?: BarCommonProps<RawDatum>['legendLabel']
 }) => {
     const [hiddenIds, setHiddenIds] = useState(initialHiddenIds ?? [])
-    const toggleSerie = useCallback(id => {
+    const toggleSerie = useCallback((id: string | number) => {
         setHiddenIds(state =>
-            state.indexOf(id) > -1 ? state.filter(item => item !== id) : [...state, id]
+            state.indexOf(String(id)) > -1
+                ? state.filter(item => item !== id)
+                : [...state, String(id)]
         )
     }, [])
 

packages/bar/src/props.ts

@@ -58,7 +58,7 @@ export const svgDefaultProps = {
     fill: [],
 
     animate: true,
-    motionConfig: 'default',
+    motionConfig: 'default' as const,
 
     role: 'img',
     isFocusable: false,

packages/bullet/package.json

@@ -32,15 +32,14 @@
     "@nivo/axes": "0.79.0",
     "@nivo/colors": "0.79.1",
     "@nivo/legends": "0.79.1",
-    "@nivo/tooltip": "0.79.0",
     "@react-spring/web": "9.4.5"
   },
   "devDependencies": {
     "@nivo/core": "0.79.0"
   },
   "peerDependencies": {
     "@nivo/core": "0.79.0",
-    "react": ">= 16.14.0 < 18.0.0"
+    "react": ">= 16.14.0 < 19.0.0"
   },
   "publishConfig": {
     "access": "public"