From 356ed95cc2895ff8cca7ce6ac33d111143bb44f8 Mon Sep 17 00:00:00 2001
From: Hoolean <me@hoolean.com>
Date: Sun, 6 Oct 2024 20:55:18 +0100
Subject: [PATCH] Refactor Drawer component and remove framer-motion dependency

Closes #1654

This commit replaces the `framer-motion` dependency with a custom CSS
transition.

To keep the implementation simple, the `visibility` property is being
toggled instead of `display`, as it still removes the element from the
accessibility tree but has the benefit of being animatable. As the
element has a fixed position, it should not have significantly worse
performance.
---
 package.json                                  |  1 -
 pnpm-lock.yaml                                | 36 -------------------
 .../components/Drawer/Drawer.tsx              | 33 +++++------------
 3 files changed, 8 insertions(+), 62 deletions(-)

diff --git a/package.json b/package.json
index 67659b53f..5a4aad121 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,6 @@
     "date-fns": "^2.30.0",
     "downshift": "6.1.12",
     "focus-visible": "^5.2.1",
-    "framer-motion": "^10.16.4",
     "graphql": "^16.9.0",
     "graphql-iso-date": "^3.6.1",
     "graphql-yoga": "^3.9.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6ae55e407..1b1c92aec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,9 +88,6 @@ importers:
       focus-visible:
         specifier: ^5.2.1
         version: 5.2.1
-      framer-motion:
-        specifier: ^10.16.4
-        version: 10.16.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       graphql:
         specifier: ^16.9.0
         version: 16.9.0
@@ -1261,15 +1258,9 @@ packages:
   '@emotion/hash@0.9.2':
     resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
 
-  '@emotion/is-prop-valid@0.8.8':
-    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
-
   '@emotion/is-prop-valid@1.3.1':
     resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
 
-  '@emotion/memoize@0.7.4':
-    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
-
   '@emotion/memoize@0.9.0':
     resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
 
@@ -5677,17 +5668,6 @@ packages:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
-  framer-motion@10.16.4:
-    resolution: {integrity: sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==}
-    peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -11064,18 +11044,10 @@ snapshots:
 
   '@emotion/hash@0.9.2': {}
 
-  '@emotion/is-prop-valid@0.8.8':
-    dependencies:
-      '@emotion/memoize': 0.7.4
-    optional: true
-
   '@emotion/is-prop-valid@1.3.1':
     dependencies:
       '@emotion/memoize': 0.9.0
 
-  '@emotion/memoize@0.7.4':
-    optional: true
-
   '@emotion/memoize@0.9.0': {}
 
   '@emotion/react@11.13.3(@types/react@18.3.8)(react@18.3.1)':
@@ -17234,14 +17206,6 @@ snapshots:
 
   forwarded@0.2.0: {}
 
-  framer-motion@10.16.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      tslib: 2.6.2
-    optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   fresh@0.5.2: {}
 
   from@0.1.7: {}
diff --git a/src/design-system/components/Drawer/Drawer.tsx b/src/design-system/components/Drawer/Drawer.tsx
index 45214b12e..6b57b1e55 100644
--- a/src/design-system/components/Drawer/Drawer.tsx
+++ b/src/design-system/components/Drawer/Drawer.tsx
@@ -1,38 +1,21 @@
 import DrawerProps from './Drawer.types';
 
-import { motion } from 'framer-motion';
-
 const Drawer = ({ children, visible, animateFrom }: DrawerProps) => {
   const animateTo = animateFrom === 'right' ? 'left' : 'right';
 
-  const variants = {
-    open: {
-      display: 'block',
-      [animateTo]: '0%',
-    },
-    closed: {
-      [animateTo]: '100%',
-      transitionEnd: {
-        // avoids keyboard users being able to navigate to off-screen elements
-        display: 'none',
-      },
-    },
-  };
-
   return (
-    <motion.div
+    <div
       className="drawer"
-      // motion props
-      variants={variants}
-      animate={visible ? 'open' : 'closed'}
-      transition={{
-        ease: 'easeInOut',
-        duration: 0.3,
+      style={{
+        transition: `0.3s ${animateTo} ease-in-out, 0.3s visibility ease-in-out`,
+        [animateTo]: visible ? '0%' : '100%',
+
+        // Avoids keyboard users being able to navigate to off-screen elements
+        visibility: visible ? 'visible' : 'hidden',
       }}
-      initial={false}
     >
       {children}
-    </motion.div>
+    </div>
   );
 };