feat(motion): remove all references to react-motion

Makefile

@@ -159,6 +159,9 @@ pkgs-build: pkgs-types ##@1 packages build all packages
 pkgs-types: ##@1 packages build all package types
 	@pnpm tsc --build ./tsconfig.monorepo.json
 
+pkgs-types-clean: ##@1 packages clean all package types
+	@pnpm tsc --build --clean ./tsconfig.monorepo.json
+
 pkg-types-%: ##@1 packages generate types for a specific package
 	@if [ "$${SKIP_TYPES}" != "TRUE" ]; \
     then \

packages/annotations/src/props.ts

@@ -3,6 +3,4 @@ export const defaultProps = {
     noteWidth: 120,
     noteTextOffset: 8,
     animate: true,
-    motionStiffness: 90,
-    motionDamping: 13,
 }

packages/bar/src/types.ts

@@ -6,7 +6,7 @@ import {
     CartesianMarkerProps,
     Dimensions,
     Margin,
-    ModernMotionProps,
+    MotionProps,
     PropertyAccessor,
     SvgDefsAndFill,
     Theme,
@@ -266,7 +266,7 @@ export type BarSvgProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawD
     BarHandlers<RawDatum, SVGRectElement> &
     SvgDefsAndFill<ComputedBarDatum<RawDatum>> &
     Dimensions &
-    ModernMotionProps &
+    MotionProps &
     Partial<{
         axisBottom: AxisProps | null
         axisLeft: AxisProps | null

packages/boxplot/src/types.ts

@@ -6,7 +6,7 @@ import {
     CartesianMarkerProps,
     Dimensions,
     Margin,
-    ModernMotionProps,
+    MotionProps,
     PropertyAccessor,
     SvgDefsAndFill,
     Theme,
@@ -244,7 +244,7 @@ export type BoxPlotSvgProps<RawDatum extends BoxPlotDatum> = Partial<BoxPlotComm
     BoxPlotHandlers<SVGRectElement> &
     SvgDefsAndFill<ComputedBoxPlotSummary> &
     Dimensions &
-    ModernMotionProps &
+    MotionProps &
     Partial<{
         axisBottom: AxisProps | null
         axisLeft: AxisProps | null

packages/bullet/src/types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Dimensions, Theme, Colors, ModernMotionProps } from '@nivo/core'
+import { Box, Dimensions, Theme, Colors, MotionProps } from '@nivo/core'
 import { InheritedColorConfig } from '@nivo/colors'
 import { ScaleLinear } from '@nivo/scales'
 import { SpringValues } from '@react-spring/web'
@@ -91,7 +91,7 @@ export type BulletHandlers = {
 export type BulletSvgProps = Partial<CommonBulletProps> &
     Dimensions &
     BulletHandlers &
-    ModernMotionProps & {
+    MotionProps & {
         data: Datum[]
     }
 
@@ -200,7 +200,7 @@ export type BulletItemProps = Omit<
 > &
     BulletHandlers &
     EnhancedDatum &
-    ModernMotionProps &
+    MotionProps &
     Point & {
         measureHeight: number
         markerHeight: number

packages/bump/src/area-bump/defaults.ts

@@ -1,4 +1,4 @@
-import { ModernMotionProps, SvgDefsAndFill } from '@nivo/core'
+import { MotionProps, SvgDefsAndFill } from '@nivo/core'
 import { AreaBumpCommonProps, AreaBumpComputedSerie, DefaultAreaBumpDatum } from './types'
 import { AreaTooltip } from './AreaTooltip'
 
@@ -54,7 +54,7 @@ const commonDefaultProps: Omit<
 export const areaBumpSvgDefaultProps: typeof commonDefaultProps &
     SvgDefsAndFill<AreaBumpComputedSerie<DefaultAreaBumpDatum, Record<string, unknown>>> & {
         animate: boolean
-        motionConfig: ModernMotionProps['motionConfig']
+        motionConfig: MotionProps['motionConfig']
     } = {
     ...commonDefaultProps,
     defs: [],

packages/bump/src/area-bump/types.ts

@@ -1,13 +1,6 @@
 import { FunctionComponent, MouseEvent } from 'react'
 import { Area } from 'd3-shape'
-import {
-    Box,
-    Theme,
-    Dimensions,
-    ModernMotionProps,
-    CssMixBlendMode,
-    SvgDefsAndFill,
-} from '@nivo/core'
+import { Box, Theme, Dimensions, MotionProps, CssMixBlendMode, SvgDefsAndFill } from '@nivo/core'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { AxisProps } from '@nivo/axes'
 import { ScalePoint } from '@nivo/scales'
@@ -188,4 +181,4 @@ export type AreaBumpSvgProps<
     AreaBumpDataProps<Datum, ExtraProps> &
     SvgDefsAndFill<AreaBumpComputedSerie<Datum, ExtraProps>> &
     Dimensions &
-    ModernMotionProps
+    MotionProps

packages/bump/src/bump/defaults.ts

@@ -1,4 +1,4 @@
-import { ModernMotionProps } from '@nivo/core'
+import { MotionProps } from '@nivo/core'
 import { LineTooltip } from './LineTooltip'
 import { Point } from './Point'
 import { BumpCommonProps, BumpPointComponent, DefaultBumpDatum } from './types'
@@ -61,7 +61,7 @@ const commonDefaultProps: Omit<
 export const bumpSvgDefaultProps: typeof commonDefaultProps & {
     pointComponent: BumpPointComponent<DefaultBumpDatum, Record<string, unknown>>
     animate: boolean
-    motionConfig: ModernMotionProps['motionConfig']
+    motionConfig: MotionProps['motionConfig']
 } = {
     ...commonDefaultProps,
     pointComponent: Point,

packages/bump/src/bump/types.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, MouseEvent } from 'react'
 import { Line as D3Line } from 'd3-shape'
-import { Theme, Box, Dimensions, ModernMotionProps } from '@nivo/core'
+import { Theme, Box, Dimensions, MotionProps } from '@nivo/core'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { AxisProps } from '@nivo/axes'
 import { ScalePoint } from '@nivo/scales'
@@ -181,4 +181,4 @@ export type BumpSvgProps<Datum extends BumpDatum, ExtraProps extends BumpSerieEx
     BumpDataProps<Datum, ExtraProps> & {
         pointComponent?: BumpPointComponent<Datum, ExtraProps>
     } & Dimensions &
-    ModernMotionProps
+    MotionProps

packages/chord/src/types.ts

@@ -5,7 +5,7 @@ import {
     Box,
     Theme,
     Dimensions,
-    ModernMotionProps,
+    MotionProps,
     CssMixBlendMode,
     PropertyAccessor,
     ValueFormat,
@@ -150,7 +150,7 @@ export type ChordCommonProps = {
     ariaLabel: AriaAttributes['aria-label']
     ariaLabelledBy: AriaAttributes['aria-labelledby']
     ariaDescribedBy: AriaAttributes['aria-describedby']
-} & Required<ModernMotionProps>
+} & Required<MotionProps>
 
 export type ChordSvgProps = Partial<ChordCommonProps> &
     ChordDataProps &

packages/circle-packing/src/types.ts

@@ -1,13 +1,6 @@
 import * as React from 'react'
 import { Interpolation, SpringValue } from '@react-spring/web'
-import {
-    Box,
-    ModernMotionProps,
-    Theme,
-    PropertyAccessor,
-    ValueFormat,
-    SvgDefsAndFill,
-} from '@nivo/core'
+import { Box, MotionProps, Theme, PropertyAccessor, ValueFormat, SvgDefsAndFill } from '@nivo/core'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 
 export interface ComputedDatum<RawDatum> {
@@ -82,7 +75,7 @@ export interface CirclePackingCommonProps<RawDatum> {
     tooltip: (props: ComputedDatum<RawDatum>) => JSX.Element
     zoomedId?: string | null
     animate: boolean
-    motionConfig: ModernMotionProps['motionConfig']
+    motionConfig: MotionProps['motionConfig']
     role: string
     renderWrapper?: boolean
 }

packages/core/index.d.ts

@@ -196,23 +196,13 @@ export function useTheme(): CompleteTheme
 export function usePartialTheme(theme?: Theme): CompleteTheme
 
 export type MotionProps = Partial<{
-    animate: boolean
-    motionDamping: number
-    motionStiffness: number
-}>
-
-export type ModernMotionProps = Partial<{
     animate: boolean
     motionConfig: string | SpringConfig
 }>
 
 export function useMotionConfig(): {
     animate: boolean
     config: SpringConfig
-    springConfig: {
-        stiffness: number
-        damping: number
-    }
 }
 
 export type SvgFillMatcher<T> = (datum: T) => boolean
@@ -343,13 +333,9 @@ export function Defs(props: DefsProps): JSX.Element
 // ------------------------------------------------------------------------
 
 export const defaultAnimate = true
-export const defaultMotionStiffness = 90
-export const defaultMotionDamping = 15
 
 type MotionDefaultProps = {
     animate: true
-    stiffness: 90
-    damping: 15
     config: 'default'
 }
 export const motionDefaultProps: MotionDefaultProps
@@ -409,8 +395,6 @@ interface ContainerProps {
     renderWrapper?: boolean
     isInteractive?: boolean
     animate?: boolean
-    motionStiffness?: number
-    motionDamping?: number
     motionConfig?: string | SpringConfig
 }
 type ContainerType = (props: React.PropsWithChildren<ContainerProps>) => JSX.Element

packages/core/src/components/Container.js

@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import { useRef } from 'react'
 import PropTypes from 'prop-types'
 import { TooltipProvider, Tooltip } from '@nivo/tooltip'
@@ -23,20 +15,13 @@ export const Container = ({
     renderWrapper = true,
     isInteractive = true,
     animate,
-    motionStiffness,
-    motionDamping,
     motionConfig,
 }) => {
     const container = useRef(null)
 
     return (
         <ThemeProvider theme={theme}>
-            <MotionConfigProvider
-                animate={animate}
-                stiffness={motionStiffness}
-                damping={motionDamping}
-                config={motionConfig}
-            >
+            <MotionConfigProvider animate={animate} config={motionConfig}>
                 <TooltipProvider container={container}>
                     {/* we should not render the div element if using the HTTP API */}
                     <ConditionalWrapper
@@ -58,8 +43,6 @@ Container.propTypes = {
     renderWrapper: PropTypes.bool,
     theme: PropTypes.object,
     animate: PropTypes.bool,
-    motionStiffness: PropTypes.number,
-    motionDamping: PropTypes.number,
     motionConfig: PropTypes.string,
 }
 

packages/core/src/components/LegacyContainer.js

@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import { useRef, useMemo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import {
@@ -36,8 +28,6 @@ export const LegacyContainer = ({
     isInteractive = true,
     renderWrapper = true,
     animate,
-    motionStiffness,
-    motionDamping,
     motionConfig,
 }) => {
     const container = useRef(null)
@@ -58,12 +48,7 @@ export const LegacyContainer = ({
 
     return (
         <ThemeProvider theme={theme}>
-            <MotionConfigProvider
-                animate={animate}
-                stiffness={motionStiffness}
-                damping={motionDamping}
-                config={motionConfig}
-            >
+            <MotionConfigProvider animate={animate} config={motionConfig}>
                 <TooltipActionsContext.Provider value={tooltipActions}>
                     <TooltipStateContext.Provider value={tooltipState}>
                         {/* we should not render the div element if using the HTTP API */}
@@ -87,7 +72,5 @@ LegacyContainer.propTypes = {
     renderWrapper: PropTypes.bool,
     theme: PropTypes.object.isRequired,
     animate: PropTypes.bool.isRequired,
-    motionStiffness: PropTypes.number,
-    motionDamping: PropTypes.number,
     motionConfig: PropTypes.string,
 }

packages/core/src/defaults/index.js

@@ -1,19 +1,9 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import { scaleOrdinal } from 'd3-scale'
 import { schemeSet3 } from 'd3-scale-chromatic'
 import { nivoCategoricalColors } from '../lib/colors'
 
 // motion
 export const defaultAnimate = true
-export const defaultMotionStiffness = 90
-export const defaultMotionDamping = 15
 
 // colors
 export const defaultCategoricalColors = nivoCategoricalColors

packages/core/src/hocs/withContainer.js

@@ -14,24 +14,14 @@ export const withContainer = WrappedComponent => {
     return class extends Component {
         render() {
             // eslint-disable-next-line react/prop-types
-            const {
-                theme,
-                renderWrapper,
-                animate,
-                motionStiffness,
-                motionDamping,
-                motionConfig,
-                ...childProps
-            } = this.props
+            const { theme, renderWrapper, animate, motionConfig, ...childProps } = this.props
 
             return (
                 <Container
                     theme={theme}
                     renderWrapper={renderWrapper}
                     isInteractive={childProps.isInteractive}
                     animate={animate}
-                    motionStiffness={motionStiffness}
-                    motionDamping={motionDamping}
                     motionConfig={motionConfig}
                 >
                     <WrappedComponent {...childProps} />