Removes Framer Motion (#1055)

components/cart/modal.tsx

@@ -22,10 +22,10 @@ type MerchandiseSearchParams = {
 
 export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdUpdated: boolean }) {
   const [, setCookie] = useCookies(['cartId']);
-  const [cartIsOpen, setCartIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const quantityRef = useRef(cart.totalQuantity);
-  const openCart = () => setCartIsOpen(true);
-  const closeCart = () => setCartIsOpen(false);
+  const openCart = () => setIsOpen(true);
+  const closeCart = () => setIsOpen(false);
 
   useEffect(() => {
     if (cartIdUpdated) {
@@ -42,21 +42,21 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
     // Open cart modal when when quantity changes.
     if (cart.totalQuantity !== quantityRef.current) {
       // But only if it's not already open (quantity also changes when editing items in cart).
-      if (!cartIsOpen) {
-        setCartIsOpen(true);
+      if (!isOpen) {
+        setIsOpen(true);
       }
 
       // Always update the quantity reference
       quantityRef.current = cart.totalQuantity;
     }
-  }, [cartIsOpen, cart.totalQuantity, quantityRef]);
+  }, [isOpen, cart.totalQuantity, quantityRef]);
 
   return (
     <>
       <button aria-label="Open cart" onClick={openCart} data-testid="open-cart">
         <CartIcon quantity={cart.totalQuantity} />
       </button>
-      <Transition show={cartIsOpen}>
+      <Transition show={isOpen}>
         <Dialog onClose={closeCart} className="relative z-50" data-testid="cart">
           <Transition.Child
             as={Fragment}

components/layout/navbar/mobile-menu.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import { Dialog } from '@headlessui/react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { Dialog, Transition } from '@headlessui/react';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 
 import CloseIcon from 'components/icons/close';
 import MenuIcon from 'components/icons/menu';
@@ -14,105 +13,90 @@ import Search from './search';
 export default function MobileMenu({ menu }: { menu: Menu[] }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const openMobileMenu = () => setIsOpen(true);
+  const closeMobileMenu = () => setIsOpen(false);
 
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth > 768) {
-        setMobileMenuIsOpen(false);
+        setIsOpen(false);
       }
     };
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, [mobileMenuIsOpen]);
+  }, [isOpen]);
 
   useEffect(() => {
-    setMobileMenuIsOpen(false);
+    setIsOpen(false);
   }, [pathname, searchParams]);
 
   return (
     <>
       <button
-        onClick={() => {
-          setMobileMenuIsOpen(!mobileMenuIsOpen);
-        }}
+        onClick={openMobileMenu}
         aria-label="Open mobile menu"
         className="md:hidden"
         data-testid="open-mobile-menu"
       >
         <MenuIcon className="h-6" />
       </button>
-      <AnimatePresence initial={false}>
-        {mobileMenuIsOpen && (
-          <Dialog
-            as={motion.div}
-            initial="closed"
-            animate="open"
-            exit="closed"
-            key="dialog"
-            static
-            open={mobileMenuIsOpen}
-            onClose={() => {
-              setMobileMenuIsOpen(false);
-            }}
-            className="relative z-50"
+      <Transition show={isOpen}>
+        <Dialog onClose={closeMobileMenu} className="relative z-50">
+          <Transition.Child
+            as={Fragment}
+            enter="transition-all ease-in-out duration-300"
+            enterFrom="opacity-0 backdrop-blur-none"
+            enterTo="opacity-100 backdrop-blur-[.5px]"
+            leave="transition-all ease-in-out duration-200"
+            leaveFrom="opacity-100 backdrop-blur-[.5px]"
+            leaveTo="opacity-0 backdrop-blur-none"
           >
-            <motion.div
-              variants={{
-                open: { opacity: 1, backdropFilter: 'blur(0.5px)' },
-                closed: { opacity: 0, backdropFilter: 'blur(0px)' }
-              }}
-              className="fixed inset-0 bg-black/30"
-              aria-hidden="true"
-            />
-            <div className="fixed inset-0 flex justify-end" data-testid="mobile-menu">
-              <Dialog.Panel
-                as={motion.div}
-                variants={{
-                  open: { translateX: 0 },
-                  closed: { translateX: '-100%' }
-                }}
-                transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
-                className="flex w-full flex-col bg-white pb-6 dark:bg-black"
-              >
-                <div className="p-4">
-                  <button
-                    className="mb-4"
-                    onClick={() => {
-                      setMobileMenuIsOpen(false);
-                    }}
-                    aria-label="Close mobile menu"
-                    data-testid="close-mobile-menu"
-                  >
-                    <CloseIcon className="h-6" />
-                  </button>
+            <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+          </Transition.Child>
+          <Transition.Child
+            as={Fragment}
+            enter="transition-all ease-in-out duration-300"
+            enterFrom="translate-x-[-100%]"
+            enterTo="translate-x-0"
+            leave="transition-all ease-in-out duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-[-100%]"
+          >
+            <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
+              <div className="p-4">
+                <button
+                  className="mb-4"
+                  onClick={closeMobileMenu}
+                  aria-label="Close mobile menu"
+                  data-testid="close-mobile-menu"
+                >
+                  <CloseIcon className="h-6" />
+                </button>
 
-                  <div className="mb-4 w-full">
-                    <Search />
-                  </div>
-                  {menu.length ? (
-                    <ul className="flex flex-col">
-                      {menu.map((item: Menu) => (
-                        <li key={item.title}>
-                          <Link
-                            href={item.path}
-                            className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white"
-                            onClick={() => {
-                              setMobileMenuIsOpen(false);
-                            }}
-                          >
-                            {item.title}
-                          </Link>
-                        </li>
-                      ))}
-                    </ul>
-                  ) : null}
+                <div className="mb-4 w-full">
+                  <Search />
                 </div>
-              </Dialog.Panel>
-            </div>
-          </Dialog>
-        )}
-      </AnimatePresence>
+                {menu.length ? (
+                  <ul className="flex flex-col">
+                    {menu.map((item: Menu) => (
+                      <li key={item.title}>
+                        <Link
+                          href={item.path}
+                          className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white"
+                          onClick={closeMobileMenu}
+                        >
+                          {item.title}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition>
     </>
   );
 }

package.json

@@ -25,7 +25,6 @@
     "@headlessui/react": "^1.7.15",
     "@vercel/og": "^0.5.6",
     "clsx": "^1.2.1",
-    "framer-motion": "^10.12.16",
     "is-empty-iterable": "^3.0.0",
     "next": "13.4.6",
     "react": "18.2.0",

pnpm-lock.yaml

@@ -10,9 +10,6 @@ dependencies:
   clsx:
     specifier: ^1.2.1
     version: 1.2.1
-  framer-motion:
-    specifier: ^10.12.16
-    version: 10.12.16(react-dom@18.2.0)(react@18.2.0)
   is-empty-iterable:
     specifier: ^3.0.0
     version: 3.0.0
@@ -117,19 +114,6 @@ packages:
       regenerator-runtime: 0.13.11
     dev: true
 
-  /@emotion/is-prop-valid@0.8.8:
-    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
-    requiresBuild: true
-    dependencies:
-      '@emotion/memoize': 0.7.4
-    dev: false
-    optional: true
-
-  /@emotion/memoize@0.7.4:
-    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
-    dev: false
-    optional: true
-
   /@eslint-community/eslint-utils@4.4.0(eslint@8.42.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1635,24 +1619,6 @@ packages:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
     dev: true
 
-  /framer-motion@10.12.16(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-w/SfWEIWJkYSgRHYBmln7EhcNo31ao8Xexol8lGXf1pR/tlnBtf1HcxoUmEiEh6pacB4/geku5ami53AAQWHMQ==}
-    peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      tslib: 2.5.3
-    optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
-    dev: false
-
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true