feat(annotations): migrate to TypeScript

packages/annotations/src/Annotation.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { defaultProps } from './props'
+import { useComputedAnnotation } from './hooks'
+import { AnnotationNote } from './AnnotationNote'
+import { AnnotationLink } from './AnnotationLink'
+import { CircleAnnotationOutline } from './CircleAnnotationOutline'
+import { DotAnnotationOutline } from './DotAnnotationOutline'
+import { RectAnnotationOutline } from './RectAnnotationOutline'
+import { AnnotationType, RelativeOrAbsolutePosition } from './types'
+
+export const Annotation = <Datum,>({
+    datum,
+    type,
+    x,
+    y,
+    size,
+    width,
+    height,
+    noteX,
+    noteY,
+    noteWidth = defaultProps.noteWidth,
+    noteTextOffset = defaultProps.noteTextOffset,
+    note,
+}: {
+    datum: Datum
+    type: AnnotationType
+    x: number
+    y: number
+    size?: number
+    width?: number
+    height?: number
+    noteX: RelativeOrAbsolutePosition
+    noteY: RelativeOrAbsolutePosition
+    noteWidth?: number
+    noteTextOffset?: number
+    note: any
+}) => {
+    const computed = useComputedAnnotation({
+        type,
+        x,
+        y,
+        size,
+        width,
+        height,
+        noteX,
+        noteY,
+        noteWidth,
+        noteTextOffset,
+    })
+
+    return (
+        <>
+            <AnnotationLink points={computed.points} isOutline={true} />
+            {type === 'circle' && <CircleAnnotationOutline x={x} y={y} size={size} />}
+            {type === 'dot' && <DotAnnotationOutline x={x} y={y} size={size} />}
+            {type === 'rect' && <RectAnnotationOutline x={x} y={y} width={width} height={height} />}
+            <AnnotationLink points={computed.points} />
+            <AnnotationNote datum={datum} x={computed.text[0]} y={computed.text[1]} note={note} />
+        </>
+    )
+}

packages/annotations/src/AnnotationLink.js → packages/annotations/src/AnnotationLink.tsx

@@ -1,9 +1,40 @@
-import React, { memo } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import { animated } from '@react-spring/web'
 import { useAnimatedPath, useTheme } from '@nivo/core'
 
-const AnnotationLink = memo(({ isOutline, ...props }) => {
+export const AnnotationLink = ({
+    points,
+    isOutline = false,
+}: {
+    points: [number, number][]
+    isOutline?: boolean
+}) => {
+    const theme = useTheme()
+    const [firstPoint, ...otherPoints] = points
+
+    const path = otherPoints.reduce(
+        (acc, [x, y]) => `${acc} L${x},${y}`,
+        `M${firstPoint[0]},${firstPoint[1]}`
+    )
+    const animatedPath = useAnimatedPath(path)
+
+    if (isOutline && theme.annotations.link.outlineWidth <= 0) {
+        return null
+    }
+
+    const style = { ...theme.annotations.link }
+    if (isOutline) {
+        style.strokeLinecap = 'square'
+        style.strokeWidth =
+            theme.annotations.link.strokeWidth + theme.annotations.link.outlineWidth * 2
+        style.stroke = theme.annotations.link.outlineColor
+    }
+
+    return <animated.path fill="none" d={animatedPath} style={style} />
+}
+
+/*
+export const AnnotationLink = memo(({ isOutline, ...props }) => {
     const theme = useTheme()
     const [point, ...points] = props.points
 
@@ -33,5 +64,4 @@ AnnotationLink.propTypes = {
 AnnotationLink.defaultProps = {
     isOutline: false,
 }
-
-export default AnnotationLink
+*/

packages/annotations/src/AnnotationNote.js → packages/annotations/src/AnnotationNote.tsx

@@ -1,17 +1,27 @@
-import React, { memo } from 'react'
+import React from 'react'
 import omit from 'lodash/omit'
-import PropTypes from 'prop-types'
 import { useSpring, animated } from '@react-spring/web'
 import { useTheme, useMotionConfig } from '@nivo/core'
 
-const AnnotationNote = memo(({ datum, x, y, note }) => {
+export const AnnotationNote = <Datum,>({
+    datum,
+    x,
+    y,
+    note,
+}: {
+    datum: Datum
+    x: number
+    y: number
+    // PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
+    note: any
+}) => {
     const theme = useTheme()
-    const { animate, config: springConfiig } = useMotionConfig()
+    const { animate, config: springConfig } = useMotionConfig()
 
     const animatedProps = useSpring({
         x,
         y,
-        config: springConfiig,
+        config: springConfig,
         immediate: !animate,
     })
 
@@ -44,15 +54,4 @@ const AnnotationNote = memo(({ datum, x, y, note }) => {
             </animated.text>
         </>
     )
-})
-
-AnnotationNote.displayName = 'AnnotationNote'
-AnnotationNote.propTypes = {
-    datum: PropTypes.object.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    note: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
 }
-AnnotationNote.defaultProps = {}
-
-export default AnnotationNote

packages/annotations/src/CircleAnnotationOutline.js → packages/annotations/src/CircleAnnotationOutline.tsx

@@ -1,9 +1,8 @@
-import React, { memo } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import { useSpring, animated } from '@react-spring/web'
 import { useMotionConfig, useTheme } from '@nivo/core'
 
-const CircleAnnotationOutline = memo(({ x, y, size }) => {
+export const CircleAnnotationOutline = ({ x, y, size }: { x: number; y: number; size: number }) => {
     const theme = useTheme()
     const { animate, config: springConfig } = useMotionConfig()
 
@@ -40,13 +39,4 @@ const CircleAnnotationOutline = memo(({ x, y, size }) => {
             />
         </>
     )
-})
-
-CircleAnnotationOutline.displayName = 'CircleAnnotationOutline'
-CircleAnnotationOutline.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    size: PropTypes.number.isRequired,
 }
-
-export default CircleAnnotationOutline

packages/annotations/src/DotAnnotationOutline.js → packages/annotations/src/DotAnnotationOutline.tsx

@@ -1,9 +1,16 @@
-import React, { memo } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import { useSpring, animated } from '@react-spring/web'
 import { useMotionConfig, useTheme } from '@nivo/core'
 
-const DotAnnotationOutline = memo(({ x, y, size }) => {
+export const DotAnnotationOutline = ({
+    x,
+    y,
+    size = 4,
+}: {
+    x: number
+    y: number
+    size?: number
+}) => {
     const theme = useTheme()
     const { animate, config: springConfig } = useMotionConfig()
 
@@ -38,16 +45,4 @@ const DotAnnotationOutline = memo(({ x, y, size }) => {
             />
         </>
     )
-})
-
-DotAnnotationOutline.displayName = 'DotAnnotationOutline'
-DotAnnotationOutline.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    size: PropTypes.number.isRequired,
-}
-DotAnnotationOutline.defaultProps = {
-    size: 4,
 }
-
-export default DotAnnotationOutline

packages/annotations/src/RectAnnotationOutline.js → packages/annotations/src/RectAnnotationOutline.tsx

@@ -1,9 +1,18 @@
-import React, { memo } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import { useSpring, animated } from '@react-spring/web'
 import { useMotionConfig, useTheme } from '@nivo/core'
 
-const RectAnnotationOutline = memo(({ x, y, width, height }) => {
+export const RectAnnotationOutline = ({
+    x,
+    y,
+    width,
+    height,
+}: {
+    x: number
+    y: number
+    width: number
+    height: number
+}) => {
     const theme = useTheme()
     const { animate, config: springConfig } = useMotionConfig()
 
@@ -43,14 +52,4 @@ const RectAnnotationOutline = memo(({ x, y, width, height }) => {
             />
         </>
     )
-})
-
-RectAnnotationOutline.displayName = 'RectAnnotationOutline'
-RectAnnotationOutline.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
 }
-
-export default RectAnnotationOutline

packages/annotations/src/canvas.js → packages/annotations/src/canvas.ts

@@ -1,4 +1,6 @@
-const drawPoints = (ctx, points) => {
+import { CompleteTheme } from '@nivo/core'
+
+const drawPoints = (ctx: CanvasRenderingContext2D, points: [number, number][]) => {
     points.forEach(([x, y], index) => {
         if (index === 0) {
             ctx.moveTo(x, y)
@@ -8,7 +10,16 @@ const drawPoints = (ctx, points) => {
     })
 }
 
-export const renderAnnotationsToCanvas = (ctx, { annotations, theme }) => {
+export const renderAnnotationsToCanvas = (
+    ctx: CanvasRenderingContext2D,
+    {
+        annotations,
+        theme,
+    }: {
+        annotations: any[]
+        theme: CompleteTheme
+    }
+) => {
     if (annotations.length === 0) return
 
     ctx.save()