pl-fe: migrate AnimatedNumber, remove react-motion dependency

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/package.json

@@ -122,7 +122,6 @@
     "react-hot-toast": "^2.5.2",
     "react-inlinesvg": "^4.1.8",
     "react-intl": "^7.0.4",
-    "react-motion": "^0.5.2",
     "react-redux": "^9.0.4",
     "react-sparklines": "^1.7.0",
     "react-sticky-box": "^2.0.5",
@@ -158,7 +157,6 @@
     "@types/react": "^18.3.18",
     "@types/react-color": "^3.0.13",
     "@types/react-dom": "^18.3.5",
-    "@types/react-motion": "^0.0.40",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-sparklines": "^1.7.5",
     "@types/react-swipeable-views": "^0.13.6",

packages/pl-fe/src/components/animated-number.tsx

@@ -1,6 +1,6 @@
+import { animated, config, useTransition } from '@react-spring/web';
 import React, { useEffect, useState } from 'react';
 import { useIntl, type IntlShape } from 'react-intl';
-import { TransitionMotion, spring } from 'react-motion';
 
 import { useSettings } from 'pl-fe/stores/settings';
 import { isNumber, roundDown } from 'pl-fe/utils/numbers';
@@ -52,7 +52,7 @@ const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate, short, ma
   const intl = useIntl();
   const { reduceMotion } = useSettings();
 
-  const [direction, setDirection] = useState(1);
+  const [direction, setDirection] = useState(0);
   const [displayedValue, setDisplayedValue] = useState<number>(value);
   const [formattedValue, setFormattedValue] = useState<string>(intl.formatNumber(value, { numberingSystem: 'latn' }));
 
@@ -68,37 +68,34 @@ const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate, short, ma
       : short
         ? shortNumberFormat(value, intl, max)
         : intl.formatNumber(value, { numberingSystem: 'latn' }));
-  }, [value]);
+  }, [value, intl, max, obfuscate, short]);
 
-  const willEnter = () => ({ y: -1 * direction });
-
-  const willLeave = () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) });
+  const transitions = useTransition(formattedValue, {
+    from: { y: -1 * direction },
+    enter: { y: 0 },
+    leave: { y: 1 * direction },
+    config: config.slow,
+    immediate: reduceMotion || direction === 0,
+  });
 
   if (reduceMotion) {
     return <>{formattedValue}</>;
   }
 
-  const styles = [{
-    key: `${formattedValue}`,
-    data: formattedValue,
-    style: { y: spring(0, { damping: 35, stiffness: 400 }) },
-  }];
-
   return (
-    <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
-      {items => (
-        <span className='⁂-animated-number'>
-          {items.map(({ key, data, style }) => (
-            <span
-              key={key}
-              style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}
-            >
-              {data}
-            </span>
-          ))}
-        </span>
-      )}
-    </TransitionMotion>
+    <span className='⁂-animated-number'>
+      {transitions((style, item) => (
+        <animated.span
+          key={item}
+          style={{
+            position: item === formattedValue ? 'static' : 'absolute',
+            transform: style.y.to(y => `translateY(${y * 100}%)`),
+          }}
+        >
+          {item}
+        </animated.span>
+      ))}
+    </span>
   );
 };