From 1afc0a4bd078ea5701a00f384febf5449d39c307 Mon Sep 17 00:00:00 2001 From: plouc Date: Wed, 29 Dec 2021 16:17:50 +0900 Subject: [PATCH] feat(bump): fix Bump linting errors & warnings --- packages/bump/src/bump/Bump.tsx | 16 ++++-- packages/bump/src/bump/Line.tsx | 2 +- packages/bump/src/bump/ResponsiveBump.tsx | 2 +- packages/bump/src/bump/defaults.ts | 6 +-- packages/bump/src/bump/hooks.ts | 8 +-- packages/bump/src/bump/types.ts | 40 ++++++++++++--- .../components/ComponentTemplate.tsx | 4 +- website/src/pages/bump/index.tsx | 51 ++++++++----------- 8 files changed, 78 insertions(+), 51 deletions(-) diff --git a/packages/bump/src/bump/Bump.tsx b/packages/bump/src/bump/Bump.tsx index cbf82dcd25..5128010e13 100644 --- a/packages/bump/src/bump/Bump.tsx +++ b/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 = [], interpolation = bumpSvgDefaultProps.interpolation, xPadding = bumpSvgDefaultProps.xPadding, @@ -48,7 +51,10 @@ const InnerBump = ['pointComponent'], + undefined + >, pointSize = bumpSvgDefaultProps.pointSize, activePointSize = bumpSvgDefaultProps.activePointSize, inactivePointSize = bumpSvgDefaultProps.inactivePointSize, @@ -71,7 +77,7 @@ const InnerBump = , role = bumpSvgDefaultProps.role, }: InnerBumpProps) => { const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions( @@ -201,7 +207,7 @@ const InnerBump = = useMemo( () => ({ innerHeight, innerWidth, @@ -241,7 +247,7 @@ const InnerBump = >({ isInteractive = bumpSvgDefaultProps.isInteractive, animate = bumpSvgDefaultProps.animate, diff --git a/packages/bump/src/bump/Line.tsx b/packages/bump/src/bump/Line.tsx index 99a76434b5..48c329ff7e 100644 --- a/packages/bump/src/bump/Line.tsx +++ b/packages/bump/src/bump/Line.tsx @@ -42,7 +42,7 @@ export const Line = >( props: Omit, 'width' | 'height'> ) => ( diff --git a/packages/bump/src/bump/defaults.ts b/packages/bump/src/bump/defaults.ts index 1a23818020..fe72ae3c84 100644 --- a/packages/bump/src/bump/defaults.ts +++ b/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, + BumpCommonProps>, | 'onMouseEnter' | 'onMouseMove' | 'onMouseLeave' @@ -59,7 +59,7 @@ const commonDefaultProps: Omit< } export const bumpSvgDefaultProps: typeof commonDefaultProps & { - pointComponent: BumpPointComponent + pointComponent: BumpPointComponent> animate: boolean motionConfig: ModernMotionProps['motionConfig'] } = { diff --git a/packages/bump/src/bump/hooks.ts b/packages/bump/src/bump/hooks.ts index c378e24221..de2f5a563b 100644 --- a/packages/bump/src/bump/hooks.ts +++ b/packages/bump/src/bump/hooks.ts @@ -159,7 +159,7 @@ const usePointStyle = >({ width, height, @@ -332,7 +332,7 @@ export const useBumpSerieHandlers = < setActiveSerieIds([serie.id]) onMouseEnter && onMouseEnter(serie, event) }, - [serie, onMouseEnter, showTooltipFromEvent, setActiveSerieIds] + [serie, onMouseEnter, showTooltipFromEvent, setActiveSerieIds, tooltip] ) const handleMouseMove = useCallback( @@ -340,7 +340,7 @@ export const useBumpSerieHandlers = < 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]) } diff --git a/packages/bump/src/bump/types.ts b/packages/bump/src/bump/types.ts index 273be56118..be62259cf9 100644 --- a/packages/bump/src/bump/types.ts +++ b/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 void export type BumpLayerId = 'grid' | 'axes' | 'labels' | 'lines' | 'points' -export interface BumpCustomLayerProps {} -export type BumpCustomLayer = FunctionComponent +export interface BumpCustomLayerProps< + Datum extends BumpDatum, + ExtraProps extends BumpSerieExtraProps +> { + innerHeight: number + innerWidth: number + lineGenerator: D3Line<[number, number | null]> + points: BumpPoint[] + series: BumpComputedSerie[] + xScale: ScalePoint + yScale: ScalePoint + activeSerieIds: string[] + setActiveSerieIds: (serieIds: string[]) => void +} +export type BumpCustomLayer< + Datum extends BumpDatum, + ExtraProps extends BumpSerieExtraProps +> = FunctionComponent> +export type BumpLayer = + | BumpLayerId + | BumpCustomLayer + +export type BumpLineTooltip< + Datum extends BumpDatum, + ExtraProps extends BumpSerieExtraProps +> = FunctionComponent<{ + serie: BumpComputedSerie +}> export type BumpCommonProps = { margin: Box @@ -136,15 +164,15 @@ export type BumpCommonProps['id'][] + defaultActiveSerieIds: string[] onMouseEnter: BumpMouseHandler onMouseMove: BumpMouseHandler onMouseLeave: BumpMouseHandler onClick: BumpMouseHandler - tooltip: FunctionComponent<{ serie: BumpComputedSerie }> + tooltip: BumpLineTooltip role: string - layers: (BumpLayerId | BumpCustomLayer)[] + layers: BumpLayer[] renderWrapper: boolean } diff --git a/website/src/components/components/ComponentTemplate.tsx b/website/src/components/components/ComponentTemplate.tsx index 0094ba75b7..82fd8c5d8e 100644 --- a/website/src/components/components/ComponentTemplate.tsx +++ b/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 diff --git a/website/src/pages/bump/index.tsx b/website/src/pages/bump/index.tsx index 74d610bbaf..ec93445d26 100644 --- a/website/src/pages/bump/index.tsx +++ b/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,11 +41,21 @@ const generateData = () => { return series } -type UnmappedProps = Omit, 'whatever'> - -type Props = UnmappedProps +type Props = Omit< + BumpCommonProps, + 'theme' | 'onMouseEnter' | 'onMouseMove' | 'onMouseLeave' | 'onClick' | 'renderWrapper' +> & + ModernMotionProps + +type UnmappedProps = Omit & { + 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, @@ -49,26 +63,12 @@ const initialProperties: UnmappedProps = { 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 ( - + data={data} {...properties} theme={theme}