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>
     </>
   );
 }