feat(bump): fix Bump linting errors & warnings

Author: plouc

packages/bump/src/bump/Bump.tsx

@@ -2,8 +2,11 @@ import { createElement, useMemo, Fragment, ReactNode } from 'react'
 import { Container, useDimensions, SvgWrapper } from '@nivo/core'
 import { Grid, Axes } from '@nivo/axes'
 import {
+    BumpCustomLayerProps,
     BumpDatum,
+    BumpLayer,
     BumpLayerId,
+    BumpLineTooltip,
     BumpSerieExtraProps,
     BumpSvgProps,
     DefaultBumpDatum,
@@ -26,7 +29,7 @@ const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPro
     height,
     margin: partialMargin,
 
-    layers = bumpSvgDefaultProps.layers,
+    layers = bumpSvgDefaultProps.layers as BumpLayer<Datum, ExtraProps>[],
 
     interpolation = bumpSvgDefaultProps.interpolation,
     xPadding = bumpSvgDefaultProps.xPadding,
@@ -48,7 +51,10 @@ const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPro
     endLabelPadding = bumpSvgDefaultProps.endLabelPadding,
     endLabelTextColor = bumpSvgDefaultProps.endLabelTextColor,
 
-    pointComponent = bumpSvgDefaultProps.pointComponent,
+    pointComponent = bumpSvgDefaultProps.pointComponent as Exclude<
+        BumpSvgProps<Datum, ExtraProps>['pointComponent'],
+        undefined
+    >,
     pointSize = bumpSvgDefaultProps.pointSize,
     activePointSize = bumpSvgDefaultProps.activePointSize,
     inactivePointSize = bumpSvgDefaultProps.inactivePointSize,
@@ -71,7 +77,7 @@ const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPro
     onMouseMove,
     onMouseLeave,
     onClick,
-    tooltip = bumpSvgDefaultProps.tooltip,
+    tooltip = bumpSvgDefaultProps.tooltip as BumpLineTooltip<Datum, ExtraProps>,
     role = bumpSvgDefaultProps.role,
 }: InnerBumpProps<Datum, ExtraProps>) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
@@ -201,7 +207,7 @@ const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPro
         )
     }
 
-    const customLayerProps = useMemo(
+    const customLayerProps: BumpCustomLayerProps<Datum, ExtraProps> = useMemo(
         () => ({
             innerHeight,
             innerWidth,
@@ -241,7 +247,7 @@ const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPro
 
 export const Bump = <
     Datum extends BumpDatum = DefaultBumpDatum,
-    ExtraProps extends BumpSerieExtraProps = {}
+    ExtraProps extends BumpSerieExtraProps = Record<string, never>
 >({
     isInteractive = bumpSvgDefaultProps.isInteractive,
     animate = bumpSvgDefaultProps.animate,

packages/bump/src/bump/Line.tsx

@@ -42,7 +42,7 @@ export const Line = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraP
 
     const { animate, config: springConfig } = useMotionConfig()
 
-    const linePath = lineGenerator(serie.linePoints)!
+    const linePath = lineGenerator(serie.linePoints) || ''
 
     const animatedPath = useAnimatedPath(linePath)
     const animatedProps = useSpring<{

packages/bump/src/bump/ResponsiveBump.tsx

@@ -4,7 +4,7 @@ import { Bump } from './Bump'
 
 export const ResponsiveBump = <
     Datum extends BumpDatum = DefaultBumpDatum,
-    ExtraProps extends BumpSerieExtraProps = {}
+    ExtraProps extends BumpSerieExtraProps = Record<string, never>
 >(
     props: Omit<BumpSvgProps<Datum, ExtraProps>, 'width' | 'height'>
 ) => (

packages/bump/src/bump/defaults.ts

@@ -1,10 +1,10 @@
 import { ModernMotionProps } from '@nivo/core'
 import { LineTooltip } from './LineTooltip'
 import { Point } from './Point'
-import { BumpCommonProps, BumpPointComponent } from './types'
+import { BumpCommonProps, BumpPointComponent, BumpDatum } from './types'
 
 const commonDefaultProps: Omit<
-    BumpCommonProps<any, any>,
+    BumpCommonProps<BumpDatum, Record<string, unknown>>,
     | 'onMouseEnter'
     | 'onMouseMove'
     | 'onMouseLeave'
@@ -59,7 +59,7 @@ const commonDefaultProps: Omit<
 }
 
 export const bumpSvgDefaultProps: typeof commonDefaultProps & {
-    pointComponent: BumpPointComponent<any, any>
+    pointComponent: BumpPointComponent<BumpDatum, Record<string, unknown>>
     animate: boolean
     motionConfig: ModernMotionProps['motionConfig']
 } = {

packages/bump/src/bump/hooks.ts

@@ -159,7 +159,7 @@ const usePointStyle = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtr
 
 export const useBump = <
     Datum extends BumpDatum = DefaultBumpDatum,
-    ExtraProps extends BumpSerieExtraProps = {}
+    ExtraProps extends BumpSerieExtraProps = Record<string, never>
 >({
     width,
     height,
@@ -332,15 +332,15 @@ export const useBumpSerieHandlers = <
             setActiveSerieIds([serie.id])
             onMouseEnter && onMouseEnter(serie, event)
         },
-        [serie, onMouseEnter, showTooltipFromEvent, setActiveSerieIds]
+        [serie, onMouseEnter, showTooltipFromEvent, setActiveSerieIds, tooltip]
     )
 
     const handleMouseMove = useCallback(
         event => {
             showTooltipFromEvent(createElement(tooltip, { serie }), event)
             onMouseMove && onMouseMove(serie, event)
         },
-        [serie, onMouseMove, showTooltipFromEvent]
+        [serie, onMouseMove, showTooltipFromEvent, tooltip]
     )
 
     const handleMouseLeave = useCallback(
@@ -430,5 +430,5 @@ export const useBumpSeriesLabels = <
         })
 
         return labels
-    }, [series, position, padding, getColor])
+    }, [series, position, padding, getColor, getLabel])
 }

packages/bump/src/bump/types.ts

@@ -1,7 +1,9 @@
 import { FunctionComponent, MouseEvent } from 'react'
+import { Line as D3Line } from 'd3-shape'
 import { Theme, Box, Dimensions, ModernMotionProps } from '@nivo/core'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { AxisProps } from '@nivo/axes'
+import { ScalePoint } from '@nivo/scales'
 
 export interface BumpDatum {
     x: number | string
@@ -14,7 +16,7 @@ export interface DefaultBumpDatum {
 }
 
 export type BumpSerieExtraProps = {
-    [key: string]: any
+    [key: string]: unknown
 }
 
 export type BumpSerie<
@@ -92,8 +94,34 @@ export type BumpMouseHandler<Datum extends BumpDatum, ExtraProps extends BumpSer
 ) => void
 
 export type BumpLayerId = 'grid' | 'axes' | 'labels' | 'lines' | 'points'
-export interface BumpCustomLayerProps {}
-export type BumpCustomLayer = FunctionComponent<BumpCustomLayerProps>
+export interface BumpCustomLayerProps<
+    Datum extends BumpDatum,
+    ExtraProps extends BumpSerieExtraProps
+> {
+    innerHeight: number
+    innerWidth: number
+    lineGenerator: D3Line<[number, number | null]>
+    points: BumpPoint<Datum, ExtraProps>[]
+    series: BumpComputedSerie<Datum, ExtraProps>[]
+    xScale: ScalePoint<Datum['x']>
+    yScale: ScalePoint<number>
+    activeSerieIds: string[]
+    setActiveSerieIds: (serieIds: string[]) => void
+}
+export type BumpCustomLayer<
+    Datum extends BumpDatum,
+    ExtraProps extends BumpSerieExtraProps
+> = FunctionComponent<BumpCustomLayerProps<Datum, ExtraProps>>
+export type BumpLayer<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> =
+    | BumpLayerId
+    | BumpCustomLayer<Datum, ExtraProps>
+
+export type BumpLineTooltip<
+    Datum extends BumpDatum,
+    ExtraProps extends BumpSerieExtraProps
+> = FunctionComponent<{
+    serie: BumpComputedSerie<Datum, ExtraProps>
+}>
 
 export type BumpCommonProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> = {
     margin: Box
@@ -136,15 +164,15 @@ export type BumpCommonProps<Datum extends BumpDatum, ExtraProps extends BumpSeri
     axisTop: AxisProps | null
 
     isInteractive: boolean
-    defaultActiveSerieIds: BumpSerie<Datum, ExtraProps>['id'][]
+    defaultActiveSerieIds: string[]
     onMouseEnter: BumpMouseHandler<Datum, ExtraProps>
     onMouseMove: BumpMouseHandler<Datum, ExtraProps>
     onMouseLeave: BumpMouseHandler<Datum, ExtraProps>
     onClick: BumpMouseHandler<Datum, ExtraProps>
-    tooltip: FunctionComponent<{ serie: BumpComputedSerie<Datum, ExtraProps> }>
+    tooltip: BumpLineTooltip<Datum, ExtraProps>
     role: string
 
-    layers: (BumpLayerId | BumpCustomLayer)[]
+    layers: BumpLayer<Datum, ExtraProps>[]
 
     renderWrapper: boolean
 }

website/src/components/components/ComponentTemplate.tsx

@@ -79,7 +79,7 @@ export const ComponentTemplate = <
 
     const [actions, logAction] = useActionsLogger()
 
-    let mappedProperties = settings
+    let mappedProperties = settings as unknown as Props
     if (propertiesMapper !== undefined) {
         mappedProperties = propertiesMapper(settings, data)
     }
@@ -92,7 +92,7 @@ export const ComponentTemplate = <
     const code = generateChartCode(`Responsive${name}`, codeProperties, {
         pkg: meta.package,
         defaults: defaultProperties,
-        dataKey: hasData ? dataKey : null,
+        dataKey: hasData ? dataKey : undefined,
     })
 
     const hasStories = meta.stories !== undefined && meta.stories.length > 0

website/src/pages/bump/index.tsx

@@ -3,21 +3,25 @@ import range from 'lodash/range'
 import shuffle from 'lodash/shuffle'
 import { graphql, useStaticQuery } from 'gatsby'
 import { ResponsiveBump, bumpSvgDefaultProps as defaults, BumpCommonProps } from '@nivo/bump'
+import { ModernMotionProps } from '@nivo/core'
+import { AxisProps } from '@nivo/axes'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/bump/meta.yml'
 import { groups } from '../../data/components/bump/props'
 import mapper from '../../data/components/bump/mapper'
 
+interface Datum {
+    x: number
+    y: number
+}
+
 const generateData = () => {
     const years = range(2000, 2005)
     const ranks = range(1, 13)
 
     const series: {
         id: string
-        data: {
-            x: number
-            y: number
-        }[]
+        data: Datum[]
     }[] = ranks.map(rank => {
         return {
             id: `Serie ${rank}`,
@@ -37,38 +41,34 @@ const generateData = () => {
     return series
 }
 
-type UnmappedProps = Omit<BumpCommonProps<{ x: number; y: number }, {}>, 'whatever'>
-
-type Props = UnmappedProps
+type Props = Omit<
+    BumpCommonProps<Datum, {}>,
+    'theme' | 'onMouseEnter' | 'onMouseMove' | 'onMouseLeave' | 'onClick' | 'renderWrapper'
+> &
+    ModernMotionProps
+
+type UnmappedProps = Omit<Props, 'axisTop' | 'axisRight' | 'axisBottom' | 'axisLeft'> & {
+    axisTop: AxisProps & { enable: boolean }
+    axisRight: AxisProps & { enable: boolean }
+    axisBottom: AxisProps & { enable: boolean }
+    axisLeft: AxisProps & { enable: boolean }
+}
 
 const initialProperties: UnmappedProps = {
+    ...defaults,
     margin: {
         top: 40,
         right: 100,
         bottom: 40,
         left: 60,
     },
 
-    interpolation: defaults.interpolation,
-    xPadding: defaults.xPadding,
-    xOuterPadding: defaults.xOuterPadding,
-    yOuterPadding: defaults.yOuterPadding,
-
     colors: { scheme: 'spectral' },
     lineWidth: 3,
     activeLineWidth: 6,
     inactiveLineWidth: 3,
-    opacity: defaults.opacity,
-    activeOpacity: defaults.activeOpacity,
     inactiveOpacity: 0.15,
 
-    startLabel: false,
-    startLabelPadding: defaults.startLabelPadding,
-    startLabelTextColor: defaults.startLabelTextColor,
-    endLabel: true,
-    endLabelPadding: defaults.endLabelPadding,
-    endLabelTextColor: defaults.endLabelTextColor,
-
     pointSize: 10,
     activePointSize: 16,
     inactivePointSize: 0,
@@ -78,8 +78,6 @@ const initialProperties: UnmappedProps = {
     inactivePointBorderWidth: 0,
     pointBorderColor: { from: 'serie.color' },
 
-    enableGridX: true,
-    enableGridY: true,
     axisTop: {
         enable: true,
         tickSize: 5,
@@ -118,11 +116,6 @@ const initialProperties: UnmappedProps = {
         legendPosition: 'middle',
         legendOffset: -40,
     },
-
-    isInteractive: true,
-
-    animate: defaults.animate,
-    motionConfig: defaults.motionConfig,
 }
 
 const Bump = () => {
@@ -156,7 +149,7 @@ const Bump = () => {
         >
             {(properties, data, theme, logAction) => {
                 return (
-                    <ResponsiveBump<{ x: number; y: number }>
+                    <ResponsiveBump<Datum>
                         data={data}
                         {...properties}
                         theme={theme}