feat(sunburst): simplify types

packages/sunburst/src/Arcs.tsx

@@ -1,21 +1,21 @@
 import React, { createElement, useMemo } from 'react'
 import { ArcGenerator, ArcsLayer } from '@nivo/arcs'
-import { ComputedDatum, CompleteSvgProps } from './types'
+import { ComputedDatum, SunburstCommonProps, MouseHandlers } from './types'
 import { useTooltip } from '@nivo/tooltip'
 
 interface ArcsProps<RawDatum> {
     center: [number, number]
     data: ComputedDatum<RawDatum>[]
     arcGenerator: ArcGenerator
-    borderWidth: CompleteSvgProps<RawDatum>['borderWidth']
-    borderColor: CompleteSvgProps<RawDatum>['borderColor']
-    isInteractive: CompleteSvgProps<RawDatum>['isInteractive']
-    onClick?: CompleteSvgProps<RawDatum>['onClick']
-    onMouseEnter?: CompleteSvgProps<RawDatum>['onMouseEnter']
-    onMouseMove?: CompleteSvgProps<RawDatum>['onMouseMove']
-    onMouseLeave?: CompleteSvgProps<RawDatum>['onMouseLeave']
-    tooltip: CompleteSvgProps<RawDatum>['tooltip']
-    transitionMode: CompleteSvgProps<RawDatum>['transitionMode']
+    borderWidth: SunburstCommonProps<RawDatum>['borderWidth']
+    borderColor: SunburstCommonProps<RawDatum>['borderColor']
+    isInteractive: SunburstCommonProps<RawDatum>['isInteractive']
+    onClick?: MouseHandlers<RawDatum>['onClick']
+    onMouseEnter?: MouseHandlers<RawDatum>['onMouseEnter']
+    onMouseMove?: MouseHandlers<RawDatum>['onMouseMove']
+    onMouseLeave?: MouseHandlers<RawDatum>['onMouseLeave']
+    tooltip: SunburstCommonProps<RawDatum>['tooltip']
+    transitionMode: SunburstCommonProps<RawDatum>['transitionMode']
 }
 
 export const Arcs = <RawDatum,>({

packages/sunburst/src/ResponsiveSunburst.tsx

@@ -1,14 +1,17 @@
 import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
 import { Sunburst } from './Sunburst'
-import { SvgProps } from './types'
+import { SunburstSvgProps } from './types'
 
-export const ResponsiveSunburst = <RawDatum,>(
-    props: Omit<SvgProps<RawDatum>, 'width' | 'height'>
-) => (
+type ResponsiveSunburstProps<RawDatum> = Partial<
+    Omit<SunburstSvgProps<RawDatum>, 'data' | 'width' | 'height'>
+> &
+    Pick<SunburstSvgProps<RawDatum>, 'data'>
+
+export const ResponsiveSunburst = <RawDatum,>(props: ResponsiveSunburstProps<RawDatum>) => (
     <ResponsiveWrapper>
-        {({ width, height }: Required<Pick<SvgProps<RawDatum>, 'width' | 'height'>>) => (
-            <Sunburst width={width} height={height} {...props} />
+        {({ width, height }: { width: number; height: number }) => (
+            <Sunburst<RawDatum> width={width} height={height} {...props} />
         )}
     </ResponsiveWrapper>
 )

packages/sunburst/src/Sunburst.tsx

@@ -9,9 +9,17 @@ import {
 import { ArcLabelsLayer } from '@nivo/arcs'
 import { defaultProps } from './props'
 import { useSunburst, useSunburstLayerContext } from './hooks'
-import { SvgProps, SunburstLayerId, SunburstLayer, ComputedDatum } from './types'
+import { SunburstSvgProps, SunburstLayerId, SunburstLayer, ComputedDatum } from './types'
 import { Arcs } from './Arcs'
 
+type InnerSunburstProps<RawDatum> = Partial<
+    Omit<
+        SunburstSvgProps<RawDatum>,
+        'data' | 'width' | 'height' | 'isInteractive' | 'animate' | 'motionConfig'
+    >
+> &
+    Pick<SunburstSvgProps<RawDatum>, 'data' | 'width' | 'height' | 'isInteractive'>
+
 const InnerSunburst = <RawDatum,>({
     data,
     id = defaultProps.id,
@@ -56,7 +64,7 @@ const InnerSunburst = <RawDatum,>({
     onMouseEnter,
     onMouseLeave,
     onMouseMove,
-}: SvgProps<RawDatum>) => {
+}: InnerSunburstProps<RawDatum>) => {
     const { innerHeight, innerWidth, margin, outerHeight, outerWidth } = useDimensions(
         width,
         height,
@@ -164,7 +172,8 @@ export const Sunburst = <RawDatum,>({
     motionConfig = defaultProps.motionConfig,
     theme,
     ...otherProps
-}: SvgProps<RawDatum>) => (
+}: Partial<Omit<SunburstSvgProps<RawDatum>, 'data' | 'width' | 'height'>> &
+    Pick<SunburstSvgProps<RawDatum>, 'data' | 'width' | 'height'>) => (
     <Container {...{ isInteractive, animate, motionConfig, theme }}>
         <InnerSunburst<RawDatum> isInteractive={isInteractive} {...otherProps} />
     </Container>

packages/sunburst/src/hooks.ts

@@ -5,7 +5,13 @@ import { usePropertyAccessor, useTheme, useValueFormatter } from '@nivo/core'
 import { Arc, useArcGenerator } from '@nivo/arcs'
 import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'
 import { partition as d3Partition, hierarchy as d3Hierarchy } from 'd3-hierarchy'
-import { CommonProps, ComputedDatum, DataProps, DatumId, SunburstCustomLayerProps } from './types'
+import {
+    SunburstCommonProps,
+    ComputedDatum,
+    DataProps,
+    DatumId,
+    SunburstCustomLayerProps,
+} from './types'
 import { defaultProps } from './props'
 
 export const useSunburst = <RawDatum>({
@@ -23,9 +29,9 @@ export const useSunburst = <RawDatum>({
     value?: DataProps<RawDatum>['value']
     valueFormat?: DataProps<RawDatum>['valueFormat']
     radius: number
-    cornerRadius?: CommonProps<RawDatum>['cornerRadius']
-    colors?: CommonProps<RawDatum>['colors']
-    childColor?: CommonProps<RawDatum>['childColor']
+    cornerRadius?: SunburstCommonProps<RawDatum>['cornerRadius']
+    colors?: SunburstCommonProps<RawDatum>['colors']
+    childColor?: SunburstCommonProps<RawDatum>['childColor']
 }) => {
     const theme = useTheme()
     const getColor = useOrdinalColorScale<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>(

packages/sunburst/src/types.ts

@@ -2,7 +2,6 @@ import { Arc, ArcGenerator, ArcLabelsProps, ArcTransitionMode } from '@nivo/arcs
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import {
     Theme,
-    Dimensions,
     Box,
     ValueFormat,
     SvgDefsAndFill,
@@ -54,53 +53,42 @@ export interface ComputedDatum<RawDatum> {
     parent?: ComputedDatum<RawDatum>
 }
 
-export type CommonProps<RawDatum> = {
-    layers: SunburstLayer<RawDatum>[]
-
-    margin: Box
-
+export type SunburstCommonProps<RawDatum> = {
+    data: RawDatum
+    id: PropertyAccessor<RawDatum, DatumId>
+    value: PropertyAccessor<RawDatum, number>
+    valueFormat?: ValueFormat<number>
+    width: number
+    height: number
+    margin?: Box
     cornerRadius: number
-
+    theme: Theme
     colors: OrdinalColorScaleConfig<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>
+    childColor: InheritedColorConfig<ComputedDatum<RawDatum>>
     borderWidth: number
     borderColor: string
-
-    childColor: InheritedColorConfig<ComputedDatum<RawDatum>>
-
     enableArcLabels: boolean
-
+    layers: SunburstLayer<RawDatum>[]
     role: string
-
-    theme: Theme
-
     transitionMode: ArcTransitionMode
-
     isInteractive: boolean
     tooltip: (props: ComputedDatum<RawDatum>) => JSX.Element
+    animate: boolean
+    motionConfig: ModernMotionProps['motionConfig']
 } & ArcLabelsProps<ComputedDatum<RawDatum>>
 
-export type MouseEventHandler<RawDatum, ElementType> = (
+export type MouseHandler<RawDatum> = (
     datum: ComputedDatum<RawDatum>,
-    event: React.MouseEvent<ElementType>
+    event: React.MouseEvent
 ) => void
 
-export type MouseEventHandlers<RawDatum, ElementType> = Partial<{
-    onClick: MouseEventHandler<RawDatum, ElementType>
-    onMouseEnter: MouseEventHandler<RawDatum, ElementType>
-    onMouseLeave: MouseEventHandler<RawDatum, ElementType>
-    onMouseMove: MouseEventHandler<RawDatum, ElementType>
+export type MouseHandlers<RawDatum> = Partial<{
+    onClick: MouseHandler<RawDatum>
+    onMouseEnter: MouseHandler<RawDatum>
+    onMouseLeave: MouseHandler<RawDatum>
+    onMouseMove: MouseHandler<RawDatum>
 }>
 
-export type SvgProps<RawDatum> = DataProps<RawDatum> &
-    Dimensions &
-    SvgDefsAndFill<RawDatum> &
-    MouseEventHandlers<RawDatum, SVGPathElement> &
-    ModernMotionProps &
-    Partial<CommonProps<RawDatum>>
-
-export type CompleteSvgProps<RawDatum> = DataProps<RawDatum> &
-    Dimensions &
+export type SunburstSvgProps<RawDatum> = SunburstCommonProps<RawDatum> &
     SvgDefsAndFill<RawDatum> &
-    MouseEventHandlers<RawDatum, SVGPathElement> &
-    ModernMotionProps &
-    CommonProps<RawDatum>
+    MouseHandlers<RawDatum>

packages/sunburst/stories/sunburst.stories.tsx

@@ -4,7 +4,9 @@ import { action } from '@storybook/addon-actions'
 import { withKnobs, boolean, select } from '@storybook/addon-knobs'
 // @ts-ignore
 import { linearGradientDef, patternDotsDef, useTheme } from '@nivo/core'
+// @ts-ignore
 import { generateLibTree } from '@nivo/generators'
+// @ts-ignore
 import { Sunburst, ComputedDatum, SunburstCustomLayerProps } from '../src'
 
 interface RawDatum {

packages/sunburst/tests/Sunburst.test.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 // @ts-ignore
 import { linearGradientDef, patternDotsDef } from '@nivo/core'
+// @ts-ignore
 import { Sunburst } from '../src'
 
 interface CustomSampleData {