chore(deps): Use @react-spring/web (#1517)

Replace use of multi target react-spring to avoid peer dependency
warnings. Update package.json files, JS imports and lock deps

Close #1505

packages/annotations/package.json

@@ -29,7 +29,7 @@
  "dependencies": {
  "@nivo/colors": "0.69.0",
  "lodash": "^4.17.11",
- "react-spring": "9.1.2"
+ "@react-spring/web": "9.1.2"
  },
  "devDependencies": {
  "@nivo/core": "0.69.0"
@@ -42,4 +42,4 @@
  "publishConfig": {
  "access": "public"
  }
-}
+}

packages/annotations/src/AnnotationLink.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { animated } from 'react-spring'
+import { animated } from '@react-spring/web'
 import { useAnimatedPath, useTheme } from '@nivo/core'
 
 const AnnotationLink = memo(({ isOutline, ...props }) => {

packages/annotations/src/AnnotationNote.js

@@ -9,7 +9,7 @@
 import React, { memo } from 'react'
 import omit from 'lodash/omit'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated } from '@react-spring/web'
 import { useTheme, useMotionConfig } from '@nivo/core'
 
 const AnnotationNote = memo(({ datum, x, y, note }) => {

packages/annotations/src/CircleAnnotationOutline.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated } from '@react-spring/web'
 import { useMotionConfig, useTheme } from '@nivo/core'
 
 const CircleAnnotationOutline = memo(({ x, y, size }) => {

packages/annotations/src/DotAnnotationOutline.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated } from '@react-spring/web'
 import { useMotionConfig, useTheme } from '@nivo/core'
 
 const DotAnnotationOutline = memo(({ x, y, size }) => {

packages/annotations/src/RectAnnotationOutline.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated } from '@react-spring/web'
 import { useMotionConfig, useTheme } from '@nivo/core'
 
 const RectAnnotationOutline = memo(({ x, y, width, height }) => {

packages/arcs/package.json

@@ -30,7 +30,7 @@
  "dependencies": {
  "@nivo/colors": "0.69.0",
  "d3-shape": "^1.3.5",
- "react-spring": "9.1.2"
+ "@react-spring/web": "9.1.2"
  },
  "devDependencies": {
  "@nivo/core": "0.69.0",
@@ -43,4 +43,4 @@
  "publishConfig": {
  "access": "public"
  }
-}
+}

packages/arcs/src/ArcShape.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import { SpringValue, Interpolation, animated } from 'react-spring'
+import { SpringValue, Interpolation, animated } from '@react-spring/web'
 import { DatumWithArcAndColor } from './types'
 
 export type ArcMouseHandler<Datum extends DatumWithArcAndColor> = (

packages/arcs/src/arc_labels/ArcLabel.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react'
-import { SpringValue, Interpolation, animated } from 'react-spring'
+import { SpringValue, Interpolation, animated } from '@react-spring/web'
 import { useTheme } from '@nivo/core'
 import { DatumWithArcAndColor } from '../types'
 

packages/arcs/src/arc_link_labels/ArcLinkLabel.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTheme } from '@nivo/core'
-import { SpringValue, Interpolation, animated } from 'react-spring'
+import { SpringValue, Interpolation, animated } from '@react-spring/web'
 import { DatumWithArcAndColor } from '../types'
 
 export interface ArcLinkLabelProps<Datum extends DatumWithArcAndColor> {

packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { SpringValue, useTransition, to } from 'react-spring'
+import { SpringValue, useTransition, to } from '@react-spring/web'
 import { line } from 'd3-shape'
 import { useMotionConfig, useTheme } from '@nivo/core'
 import { InheritedColorConfig, useInheritedColor } from '@nivo/colors'

packages/arcs/src/centers.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useTransition, to, SpringValue } from 'react-spring'
+import { useTransition, to, SpringValue } from '@react-spring/web'
 import {
  // @ts-ignore
  midAngle,

packages/arcs/src/interpolateArc.ts

@@ -1,4 +1,4 @@
-import { to, SpringValue } from 'react-spring'
+import { to, SpringValue } from '@react-spring/web'
 import { ArcGenerator } from './types'
 
 /**

packages/arcs/src/useAnimatedArc.ts

@@ -1,4 +1,4 @@
-import { useSpring } from 'react-spring'
+import { useSpring } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
 import { Arc, ArcGenerator } from './types'
 import { interpolateArc } from './interpolateArc'

packages/arcs/src/useArcsTransition.ts

@@ -1,4 +1,4 @@
-import { useTransition } from 'react-spring'
+import { useTransition } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
 import { DatumWithArc } from './types'
 import { ArcTransitionMode, useArcTransitionMode, TransitionExtra } from './arcTransitionMode'

packages/axes/package.json

@@ -31,7 +31,7 @@
  "d3-format": "^1.4.4",
  "d3-time": "^1.0.11",
  "d3-time-format": "^2.1.3",
- "react-spring": "9.1.2"
+ "@react-spring/web": "9.1.2"
  },
  "devDependencies": {
  "@nivo/core": "0.69.0",
@@ -47,4 +47,4 @@
  "publishConfig": {
  "access": "public"
  }
-}
+}

packages/axes/src/components/Axis.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { useSpring, useTransition, animated } from 'react-spring'
+import { useSpring, useTransition, animated } from '@react-spring/web'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { computeCartesianTicks, getFormatter } from '../compute'
 import { AxisTick } from './AxisTick'

packages/axes/src/components/AxisTick.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { animated } from 'react-spring'
+import { animated } from '@react-spring/web'
 import { useTheme } from '@nivo/core'
 import { AxisTickProps, AxisValue } from '../types'
 

packages/axes/src/components/GridLine.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SpringValues, animated } from 'react-spring'
+import { SpringValues, animated } from '@react-spring/web'
 import { useTheme } from '@nivo/core'
 
 export const GridLine = ({

packages/axes/src/components/GridLines.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTransition } from 'react-spring'
+import { useTransition } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
 import { GridLine } from './GridLine'
 import { Line } from '../types'

packages/axes/src/types.ts

@@ -1,4 +1,4 @@
-import { SpringValues } from 'react-spring'
+import { SpringValues } from '@react-spring/web'
 import {
  ScaleBand,
  ScaleLinear,

packages/bullet/package.json

@@ -34,7 +34,7 @@
  "@nivo/legends": "0.69.0",
  "@nivo/tooltip": "0.69.0",
  "d3-scale": "^3.2.3",
- "react-spring": "9.1.2"
+ "@react-spring/web": "9.1.2"
  },
  "devDependencies": {
  "@nivo/core": "0.69.0",
@@ -47,4 +47,4 @@
  "publishConfig": {
  "access": "public"
  }
-}
+}

packages/bullet/src/BulletItem.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated } from '@react-spring/web'
 import { Axis } from '@nivo/axes'
 // @ts-ignore
 import { getColorScale, useMotionConfig, useTheme } from '@nivo/core'

packages/bullet/src/BulletMarkers.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { useTransition } from 'react-spring'
+import { useTransition } from '@react-spring/web'
 // @ts-ignore
 import { useMotionConfig } from '@nivo/core'
 import {

packages/bullet/src/BulletMarkersItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { BulletMarkersItemProps } from './types'
-import { animated } from 'react-spring'
+import { animated } from '@react-spring/web'
 
 export const BulletMarkersItem = ({
  animatedProps: { color, transform, x, y1, y2 },

packages/bullet/src/BulletRects.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { useTransition, animated, to } from 'react-spring'
+import { useTransition, animated, to } from '@react-spring/web'
 // @ts-ignore
 import { useMotionConfig } from '@nivo/core'
 import { computeRects } from './compute'

packages/bullet/src/BulletRectsItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { BulletRectsItemProps } from './types'
-import { animated, to } from 'react-spring'
+import { animated, to } from '@react-spring/web'
 
 export const BulletRectsItem = ({
  animatedProps: { x, y, width, height, color },

packages/bullet/src/types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Box, Dimensions, Theme, Colors, ModernMotionProps } from '@nivo/core'
 import { ScaleLinear } from 'd3-scale'
-import { SpringValues } from 'react-spring'
+import { SpringValues } from '@react-spring/web'
 
 export type DatumId = string | number
 export type DatumValue = number

packages/bump/package.json

@@ -35,7 +35,7 @@
  "@nivo/legends": "0.69.0",
  "@nivo/tooltip": "0.69.0",
  "d3-shape": "^1.3.5",
- "react-spring": "9.1.2"
+ "@react-spring/web": "9.1.2"
  },
  "devDependencies": {
  "@nivo/core": "0.69.0"
@@ -48,4 +48,4 @@
  "publishConfig": {
  "access": "public"
  }
-}
+}

packages/bump/src/area-bump/Area.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated } from '@react-spring/web'
 import { useAnimatedPath, useMotionConfig, blendModePropType } from '@nivo/core'
 import { useSerieHandlers } from './hooks'
 

packages/bump/src/area-bump/AreasLabels.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSprings, animated } from 'react-spring'
+import { useSprings, animated } from '@react-spring/web'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { inheritedColorPropType } from '@nivo/colors'
 import { useSeriesLabels } from './hooks'

packages/bump/src/bump/Line.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated } from '@react-spring/web'
 import { useAnimatedPath, useMotionConfig } from '@nivo/core'
 import { useSerieHandlers } from './hooks'
 

packages/bump/src/bump/LinesLabels.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSprings, animated } from 'react-spring'
+import { useSprings, animated } from '@react-spring/web'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { inheritedColorPropType } from '@nivo/colors'
 import { useSeriesLabels } from './hooks'

packages/bump/src/bump/Point.js

@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated, to } from 'react-spring'
+import { useSpring, animated, to } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
 
 const pointStyle = { pointerEvents: 'none' }

packages/circle-packing/package.json

@@ -33,7 +33,7 @@
  "@nivo/tooltip": "0.69.0",
  "d3-hierarchy": "^1.1.8",
  "lodash": "^4.17.11",
- "react-spring": "9.1.2"
+ "@react-spring/web": "9.1.2"
  },
  "devDependencies": {
  "@nivo/core": "0.69.0",
@@ -47,4 +47,4 @@
  "publishConfig": {
  "access": "public"
  }
-}
+}

packages/circle-packing/src/CircleHtml.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { animated, to, SpringValue, Interpolation } from 'react-spring'
+import { animated, to, SpringValue, Interpolation } from '@react-spring/web'
 import { CircleProps } from './types'
 import { useNodeMouseHandlers } from './hooks'
 

packages/circle-packing/src/CircleSvg.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { animated } from 'react-spring'
+import { animated } from '@react-spring/web'
 import { CircleProps } from './types'
 import { useNodeMouseHandlers } from './hooks'
 

packages/circle-packing/src/Circles.tsx

@@ -1,5 +1,5 @@
 import React, { createElement, useMemo, MouseEvent } from 'react'
-import { useTransition, to, SpringValue } from 'react-spring'
+import { useTransition, to, SpringValue } from '@react-spring/web'
 import { useMotionConfig, useTheme } from '@nivo/core'
 import { useInheritedColor } from '@nivo/colors'
 import { useTooltip } from '@nivo/tooltip'

packages/circle-packing/src/LabelHtml.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { animated } from 'react-spring'
+import { animated } from '@react-spring/web'
 import { useTheme } from '@nivo/core'
 import { LabelProps } from './types'
 import { interpolatePosition, interpolateSize } from './CircleHtml'

packages/circle-packing/src/LabelSvg.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { animated } from 'react-spring'
+import { animated } from '@react-spring/web'
 import { useTheme } from '@nivo/core'
 import { LabelProps } from './types'
 

packages/circle-packing/src/Labels.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { useTransition } from 'react-spring'
+import { useTransition } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
 import { CirclePackingCommonProps, ComputedDatum, LabelComponent, ComputedLabel } from './types'
 import { useCirclePackingLabels } from './hooks'

packages/circle-packing/src/types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Interpolation, SpringValue } from 'react-spring'
+import { Interpolation, SpringValue } from '@react-spring/web'
 import {
  Box,
  ModernMotionProps,

packages/core/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Interpolation, SpringConfig } from 'react-spring'
+import { Interpolation, SpringConfig } from '@react-spring/web'
 
 declare module '@nivo/core' {
  export type DatumValue = string | number | Date

packages/core/package.json

@@ -30,7 +30,7 @@
  "d3-shape": "^1.3.5",
  "d3-time-format": "^2.1.3",
  "lodash": "^4.17.11",
- "react-spring": "9.1.2",
+ "@react-spring/web": "9.1.2",
  "resize-observer-polyfill": "^1.5.1"
  },
  "devDependencies": {
@@ -44,4 +44,4 @@
  "publishConfig": {
  "access": "public"
  }
-}
+}