[Glitch] Remove react-motion library

Port 902aab1245 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/ui/components/upload_area.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { animated, config, useSpring } from '@react-spring/web';
+
+import { reduceMotion } from 'flavours/glitch/initial_state';
+
+interface UploadAreaProps {
+  active?: boolean;
+  onClose: () => void;
+}
+
+export const UploadArea: React.FC<UploadAreaProps> = ({ active, onClose }) => {
+  const handleKeyUp = useCallback(
+    (e: KeyboardEvent) => {
+      if (active && e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    },
+    [active, onClose],
+  );
+
+  useEffect(() => {
+    window.addEventListener('keyup', handleKeyUp, false);
+
+    return () => {
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [handleKeyUp]);
+
+  const wrapperAnimStyles = useSpring({
+    from: {
+      opacity: 0,
+    },
+    to: {
+      opacity: 1,
+    },
+    reverse: !active,
+    immediate: reduceMotion,
+  });
+  const backgroundAnimStyles = useSpring({
+    from: {
+      transform: 'scale(0.95)',
+    },
+    to: {
+      transform: 'scale(1)',
+    },
+    reverse: !active,
+    config: config.wobbly,
+    immediate: reduceMotion,
+  });
+
+  return (
+    <animated.div
+      className='upload-area'
+      style={{
+        ...wrapperAnimStyles,
+        visibility: active ? 'visible' : 'hidden',
+      }}
+    >
+      <div className='upload-area__drop'>
+        <animated.div
+          className='upload-area__background'
+          style={backgroundAnimStyles}
+        />
+        <div className='upload-area__content'>
+          <FormattedMessage
+            id='upload_area.title'
+            defaultMessage='Drag & drop to upload'
+          />
+        </div>
+      </div>
+    </animated.div>
+  );
+};