feat(chord): init TypeScript migration

plouc · Jan 1, 2022 · 16c316b · 16c316b
1 parent 8faac86
commit 16c316b
Show file tree

Hide file tree

Showing 32 changed files with 1,057 additions and 844 deletions.
diff --git a/examples/codesandbox/src/charts/Chord.tsx b/examples/codesandbox/src/charts/Chord.tsx
@@ -11,8 +11,8 @@ export function Chord() {
   const [data, flavor] = useChart(() => generateChordData({ size: 7 }))
 
   if (flavor === 'canvas') {
-    return <ResponsiveChordCanvas {...data} {...props} />
+    return <ResponsiveChordCanvas {...props} data{data.matrix} keys={data.keys} />
   }
 
-  return <ResponsiveChord {...data} {...props} />
+  return <ResponsiveChord {...props} data{data.matrix} keys={data.keys} />
 }
diff --git a/packages/chord/index.d.ts → packages/chord/_old_index.d.ts b/packages/chord/index.d.ts → packages/chord/_old_index.d.ts
diff --git a/packages/chord/package.json b/packages/chord/package.json
@@ -21,11 +21,12 @@
   ],
   "main": "./dist/nivo-chord.cjs.js",
   "module": "./dist/nivo-chord.es.js",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "index.d.ts",
-    "dist/"
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
     "@nivo/arcs": "0.77.0",
@@ -38,11 +39,11 @@
     "react-motion": "^0.5.2"
   },
   "devDependencies": {
-    "@nivo/core": "0.77.0"
+    "@nivo/core": "0.77.0",
+    "@types/d3-chord": "^3.0.1"
   },
   "peerDependencies": {
     "@nivo/core": "0.77.0",
-    "prop-types": ">= 15.5.10 < 16.0.0",
     "react": ">= 16.14.0 < 18.0.0"
   },
   "publishConfig": {

diff --git a/packages/chord/src/Chord.js → packages/chord/src/Chord.tsx b/packages/chord/src/Chord.js → packages/chord/src/Chord.tsx
@@ -1,51 +1,55 @@
-import { Fragment } from 'react'
-import { withContainer, SvgWrapper, useDimensions, useTheme } from '@nivo/core'
+import { createElement, Fragment, ReactNode } from 'react'
+import { Container, SvgWrapper, useDimensions, useTheme } from '@nivo/core'
 import { useInheritedColor } from '@nivo/colors'
 import { BoxLegendSvg } from '@nivo/legends'
-import { ChordPropTypes, ChordDefaultProps } from './props'
-import { useChord, useChordSelection, useChordLayerContext } from './hooks'
-import ChordRibbons from './ChordRibbons'
-import ChordArcs from './ChordArcs'
-import ChordLabels from './ChordLabels'
+import { svgDefaultProps } from './defaults'
+import { useChord, useChordSelection, useCustomLayerProps } from './hooks'
+import { ChordRibbons } from './ChordRibbons'
+import { ChordArcs } from './ChordArcs'
+import { ChordLabels } from './ChordLabels'
+import { ChordSvgProps, LayerId } from './types'
 
-const Chord = ({
-    margin: partialMargin,
-    width,
-    height,
+type InnerChordProps = Omit<ChordSvgProps, 'animate' | 'motionConfig' | 'renderWrapper' | 'theme'>
 
+const InnerChord = ({
+    data,
     keys,
-    matrix,
     label,
     valueFormat,
-    innerRadiusRatio,
-    innerRadiusOffset,
-    padAngle,
-
-    layers,
-
-    colors,
-
-    arcBorderWidth,
-    arcBorderColor,
-    arcOpacity,
-    arcHoverOpacity,
-    arcHoverOthersOpacity,
-    arcTooltip,
-
-    ribbonBorderWidth,
-    ribbonBorderColor,
-    ribbonBlendMode,
-    ribbonOpacity,
-    ribbonHoverOpacity,
-    ribbonHoverOthersOpacity,
-    ribbonTooltip,
-
-    enableLabel,
-    labelOffset,
-    labelRotation,
-    labelTextColor,
-
-    isInteractive,
+
+    margin: partialMargin,
+    width,
+    height,
+
+    innerRadiusRatio = svgDefaultProps.innerRadiusRatio,
+    innerRadiusOffset = svgDefaultProps.innerRadiusOffset,
+    padAngle = svgDefaultProps.padAngle,
+
+    layers = svgDefaultProps.layers,
+
+    colors = svgDefaultProps.colors,
+
+    arcBorderWidth = svgDefaultProps.arcBorderWidth,
+    arcBorderColor = svgDefaultProps.arcBorderColor,
+    arcOpacity = svgDefaultProps.arcOpacity,
+    arcHoverOpacity = svgDefaultProps.arcHoverOpacity,
+    arcHoverOthersOpacity = svgDefaultProps.arcHoverOthersOpacity,
+    arcTooltip = svgDefaultProps.arcTooltip,
+
+    ribbonBorderWidth = svgDefaultProps.ribbonBorderWidth,
+    ribbonBorderColor = svgDefaultProps.ribbonBorderColor,
+    ribbonBlendMode = svgDefaultProps.ribbonBlendMode,
+    ribbonOpacity = svgDefaultProps.ribbonOpacity,
+    ribbonHoverOpacity = svgDefaultProps.ribbonHoverOpacity,
+    ribbonHoverOthersOpacity = svgDefaultProps.ribbonHoverOthersOpacity,
+    ribbonTooltip = svgDefaultProps.ribbonTooltip,
+
+    enableLabel = svgDefaultProps.enableLabel,
+    labelOffset = svgDefaultProps.labelOffset,
+    labelRotation = svgDefaultProps.labelRotation,
+    labelTextColor = svgDefaultProps.labelTextColor,
+
+    isInteractive = svgDefaultProps.isInteractive,
     onArcMouseEnter,
     onArcMouseMove,
     onArcMouseLeave,
@@ -55,18 +59,22 @@ const Chord = ({
     onRibbonMouseLeave,
     onRibbonClick,
 
-    legends,
-    role,
-}) => {
+    legends = svgDefaultProps.legends,
+
+    role = svgDefaultProps.role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+}: InnerChordProps) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
         height,
         partialMargin
     )
 
     const { center, radius, arcGenerator, ribbonGenerator, arcs, ribbons } = useChord({
+        data,
         keys,
-        matrix,
         label,
         valueFormat,
         width: innerWidth,
@@ -93,7 +101,7 @@ const Chord = ({
     const getArcBorderColor = useInheritedColor(arcBorderColor, theme)
     const getRibbonBorderColor = useInheritedColor(ribbonBorderColor, theme)
 
-    const layerContext = useChordLayerContext({
+    const customLayerProps = useCustomLayerProps({
         center,
         radius,
         arcs,
@@ -110,8 +118,15 @@ const Chord = ({
         color: arc.color,
     }))
 
-    const layerById = {
-        ribbons: (
+    const layerById: Record<LayerId, ReactNode> = {
+        ribbons: null,
+        arcs: null,
+        labels: null,
+        legends: null,
+    }
+
+    if (layers.includes('ribbons')) {
+        layerById.ribbons = (
             <g key="ribbons" transform={`translate(${center[0]}, ${center[1]})`}>
                 <ChordRibbons
                     ribbons={ribbons}
@@ -129,8 +144,11 @@ const Chord = ({
                     tooltip={ribbonTooltip}
                 />
             </g>
-        ),
-        arcs: (
+        )
+    }
+
+    if (layers.includes('arcs')) {
+        layerById.arcs = (
             <g key="arcs" transform={`translate(${center[0]}, ${center[1]})`}>
                 <ChordArcs
                     arcs={arcs}
@@ -147,25 +165,10 @@ const Chord = ({
                     tooltip={arcTooltip}
                 />
             </g>
-        ),
-        labels: null,
-        legends: (
-            <Fragment key="legends">
-                {legends.map((legend, i) => (
-                    <BoxLegendSvg
-                        key={i}
-                        {...legend}
-                        containerWidth={innerWidth}
-                        containerHeight={innerHeight}
-                        data={legendData}
-                        theme={theme}
-                    />
-                ))}
-            </Fragment>
-        ),
+        )
     }
 
-    if (enableLabel === true) {
+    if (layers.includes('labels') && enableLabel) {
         layerById.labels = (
             <g key="labels" transform={`translate(${center[0]}, ${center[1]})`}>
                 <ChordLabels
@@ -178,29 +181,60 @@ const Chord = ({
         )
     }
 
+    if (layers.includes('legends') && legends.length > 0) {
+        layerById.legends = (
+            <Fragment key="legends">
+                {legends.map((legend, i) => (
+                    <BoxLegendSvg
+                        key={i}
+                        {...legend}
+                        containerWidth={innerWidth}
+                        containerHeight={innerHeight}
+                        data={legendData}
+                    />
+                ))}
+            </Fragment>
+        )
+    }
+
     return (
         <SvgWrapper
             width={outerWidth}
             height={outerHeight}
             margin={margin}
-            theme={theme}
             role={role}
+            ariaLabel={ariaLabel}
+            ariaLabelledBy={ariaLabelledBy}
+            ariaDescribedBy={ariaDescribedBy}
         >
             {layers.map((layer, i) => {
-                if (layerById[layer] !== undefined) {
-                    return layerById[layer]
-                }
                 if (typeof layer === 'function') {
-                    return <Fragment key={i}>{layer(layerContext)}</Fragment>
+                    return <Fragment key={i}>{createElement(layer, customLayerProps)}</Fragment>
                 }
 
-                return null
+                return layerById?.[layer] ?? null
             })}
         </SvgWrapper>
     )
 }
 
-Chord.propTypes = ChordPropTypes
-Chord.defaultProps = ChordDefaultProps
-
-export default withContainer(Chord)
+export const Chord = ({
+    isInteractive = svgDefaultProps.isInteractive,
+    animate = svgDefaultProps.animate,
+    motionConfig = svgDefaultProps.motionConfig,
+    theme,
+    renderWrapper,
+    ...otherProps
+}: ChordSvgProps) => (
+    <Container
+        {...{
+            animate,
+            isInteractive,
+            motionConfig,
+            renderWrapper,
+            theme,
+        }}
+    >
+        <InnerChord isInteractive={isInteractive} {...otherProps} />
+    </Container>
+)