fix motion variants typing issues and update declarations for sheet height

Author: ChainArts

src/components/atoms/ActionButton/ActionButton.tsx

@@ -1,27 +1,27 @@
 import { useLocation } from "react-router-dom";
 import "./ActionButton.scss";
-import { motion } from "motion/react";
+import { motion, cubicBezier } from "motion/react";
 
-const getActionButtonVariants = () => ({
+const actionButtonVariants = {
     initial: {
         opacity: 0,
     },
     in: {
         opacity: 1,
         transition: {
             duration: 0.5,
-            ease: [0.14, 0.8, 0.4, 1],
+            ease: cubicBezier(0.14, 0.8, 0.4, 1),
             delay: 0.3,
         },
     },
     out: {
         opacity: 0,
         transition: {
             duration: 0.25,
-            ease: [0.14, 0.8, 0.4, 1],
+            ease: cubicBezier(0.14, 0.8, 0.4, 1),
         },
     },
-});
+};
 
 type ActionButtonProps = {
     icon: React.ReactNode;
@@ -33,7 +33,7 @@ const ActionButton = ({ children, onClick, icon }: ActionButtonProps) => {
     const location = useLocation();
 
     return (
-        <motion.div key={`action-btn-${location.pathname}`} className="action-button" variants={getActionButtonVariants()} initial="initial" animate="in" exit="out" onClick={onClick} whileTap={{ scale: 0.9 }}>
+        <motion.div key={`action-btn-${location.pathname}`} className="action-button" variants={actionButtonVariants} initial="initial" animate="in" exit="out" onClick={onClick} whileTap={{ scale: 0.9 }}>
             {children}
             <button onClick={onClick}>{icon}</button>
         </motion.div>

src/components/atoms/InfoBlob/InfoBlob.tsx

@@ -1,9 +1,9 @@
 import { BsQuestionCircle } from "react-icons/bs";
 import "./InfoBlob.scss";
 import { useState } from "react";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, cubicBezier, type Variants } from "motion/react";
 
-const blobVariants = {
+const blobVariants: Variants = {
     initial: { opacity: 0, scale: 0.8 },
     animate: {
         opacity: 1,
@@ -21,12 +21,12 @@ const blobVariants = {
         scale: 0.8,
         transition: {
             duration: 0.3,
-            ease: [0.14, 0.8, 0.4, 1],
+            ease: cubicBezier(0.14, 0.8, 0.4, 1),
         },
     },
 };
 
-const blobArrowVariants = {
+const blobArrowVariants: Variants = {
     initial: { opacity: 0, y: -10, x: "-50%" },
     animate: {
         opacity: 1,
@@ -45,7 +45,7 @@ const blobArrowVariants = {
         x: "-50%",
         transition: {
             duration: 0.1,
-            ease: [0.14, 0.8, 0.4, 1],
+            ease: cubicBezier(0.14, 0.8, 0.4, 1),
         },
     },
 };

src/components/organisms/HabitForm/HabitForm.tsx

@@ -239,7 +239,7 @@ const EmojiPickerComponent = ({ emojiPickerOpen, setEmojiPickerOpen }: EmojiPick
     const { setFieldValue } = useFormikContext();
 
     return (
-        <Sheet isOpen={emojiPickerOpen} onClose={() => setEmojiPickerOpen(false)} className="emoji-picker__sheet" detent="content-height">
+        <Sheet isOpen={emojiPickerOpen} onClose={() => setEmojiPickerOpen(false)} className="emoji-picker__sheet" detent="content">
             <Sheet.Container>
                 <Sheet.Header />
                 <Sheet.Content>

src/components/organisms/IslandMenu/IslandMenu.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { PiPawPrintFill, PiShoppingCartFill } from "react-icons/pi";
 import { HiX, HiChevronLeft, HiChevronRight } from "react-icons/hi";
 import { FaCheck } from "react-icons/fa";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion, cubicBezier } from "motion/react";
 import "./IslandMenu.scss";
 import chickenThumbnail from "/src/assets/thumbnails/chicken.png";
 import foxThumbnail from "/src/assets/thumbnails/fox.png";
@@ -28,20 +28,20 @@ const containerVariants = {
 
 const menuVariants = {
     initial: { opacity: 0 },
-    animate: { opacity: 1, transition: { duration: 0.3, ease: [0.14, 0.8, 0.4, 1] } },
-    exit: { opacity: 0, transition: { duration: 0.3, ease: [0.14, 0.8, 0.4, 1] } },
+    animate: { opacity: 1, transition: { duration: 0.3, ease: cubicBezier(0.14, 0.8, 0.4, 1)}},
+    exit: { opacity: 0, transition: { duration: 0.3, ease: cubicBezier(0.14, 0.8, 0.4, 1) } },
 };
 
 const islandMenuButtonVariants = {
     initial: { opacity: 0, scale: 0 },
-    animate: { opacity: 1, scale: 1, transition: { duration: 0.3, ease: [0.14, 0.8, 0.4, 1] } },
-    exit: { opacity: 0, scale: 0, transition: { duration: 0.3, ease: [0.14, 0.8, 0.4, 1] } },
+    animate: { opacity: 1, scale: 1, transition: { duration: 0.3, ease: cubicBezier(0.14, 0.8, 0.4, 1) } },
+    exit: { opacity: 0, scale: 0, transition: { duration: 0.3, ease: cubicBezier(0.14, 0.8, 0.4, 1) } },
 };
 
 const islandMenuOverlayVariants = {
     initial: { y: 500, x: "-50%" },
-    animate: { y: 0, x: "-50%", transition: { staggerChildren: 0.2, delay: 0.1, duration: 0.3, ease: [0.14, 0.8, 0.4, 1] } },
-    exit: { y: 500, x: "-50%", transition: { duration: 0.3, ease: [0.14, 0.8, 0.4, 1] } },
+    animate: { y: 0, x: "-50%", transition: { staggerChildren: 0.2, delay: 0.1, duration: 0.3, ease: cubicBezier(0.14, 0.8, 0.4, 1) } },
+    exit: { y: 500, x: "-50%", transition: { duration: 0.3, ease: cubicBezier(0.14, 0.8, 0.4, 1) } },
 };
 
 export const itemListVariants = {
@@ -52,8 +52,8 @@ export const itemListVariants = {
 
 export const itemVariants = {
     initial: { opacity: 0, y: 5 },
-    animate: { opacity: 1, y: 0, transition: { duration: 1, ease: [0.14, 0.8, 0.4, 1] } },
-    exit: { opacity: 0, y: -5, transition: { duration: 1, ease: [0.14, 0.8, 0.4, 1] } },
+    animate: { opacity: 1, y: 0, transition: { duration: 1, ease: cubicBezier(0.14, 0.8, 0.4, 1) } },
+    exit: { opacity: 0, y: -5, transition: { duration: 1, ease: cubicBezier(0.14, 0.8, 0.4, 1) } },
 };
 
 const IslandMenu = () => {