codebase cleanup, consistent ui tests, update svelte version and more…

… debugging
JonathonRP · Dec 16, 2024 · d2b7633 · d2b7633
1 parent 23f98fc
commit d2b7633
Show file tree

Hide file tree

Showing 63 changed files with 695 additions and 741 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -43,30 +43,31 @@
 		"tailwind-variants": "^0.2.1"
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
 		"@biomejs/biome": "^1.9.4",
 		"@changesets/cli": "^2.27.10",
 		"@emotion/is-prop-valid": "^1.3.1",
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.9.1",
+		"@sveltejs/kit": "^2.11.1",
 		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.2",
+		"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
 		"@tailwindcss/typography": "^0.5.15",
-		"@tailwindcss/vite": "^4.0.0-beta.6",
+		"@tailwindcss/vite": "^4.0.0-beta.7",
 		"@tsconfig/svelte": "^5.0.4",
-		"@types/node": "^20.17.9",
+		"@types/node": "^20.17.10",
 		"@vitest/ui": "latest",
 		"csstype": "^3.1.3",
 		"publint": "^0.2.12",
+		"runed": "^0.18.0",
 		"sv": "^0.5.11",
 		"svelte-check": "^4.1.1",
-		"tailwindcss": "^4.0.0-beta.6",
+		"tailwindcss": "^4.0.0-beta.7",
 		"typescript": "^5.7.2",
 		"vite": "latest",
 		"vitest": "latest"
 	},
 	"peerDependencies": {
-		"svelte": "^5.10.1"
+		"svelte": "^5.14.0"
 	},
 	"engines": {
 		"bun": ">=1.0.0",

diff --git a/src/lib/components/Box.svelte b/src/lib/components/Box.svelte
@@ -5,7 +5,7 @@
 
 <div
     style="min-height: {minHeight}px; height:fit-content; touch-action: none;"
-    class="{cls} dark:bg-white/5 flex justify-center items-center border border-primary/40 rounded-xl my-2 p-4 md:p-6 w-full"
+    class="{cls} dark:bg-white/5 dark:text-black flex justify-center items-center border border-primary/40 rounded-xl my-2 p-4 md:p-6 w-full"
 >
     <slot></slot>
 </div>
diff --git a/src/lib/components/motion/AnimateLayout.svelte b/src/lib/components/motion/AnimateLayout.svelte
@@ -1,4 +1,5 @@
 <script>
+    import Box from "../Box.svelte";
     import { motion } from "$lib/motion-start";
 
     const spring = {
@@ -12,20 +13,24 @@
     function toggleSwitch() {
         active = !active;
     }
+
+    // active={1 * !active} do we still need this??
 </script>
 
-<div
-    class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
->
-    <button class="switch" data-active={active} onclick={toggleSwitch}>
-        <motion.div
-            active={1 * !active}
-            layout
-            class="handle"
-            transition={spring}
-        />
-    </button>
-</div>
+<Box>
+    <div
+        class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
+    >
+        <button class="switch" data-active={active} onclick={toggleSwitch}>
+            <motion.div
+                active={1 * !active}
+                layout
+                class="handle"
+                transition={spring}
+            />
+        </button>
+    </div>
+</Box>
 
 <style>
     .switch {

diff --git a/src/lib/components/motion/AnimatePresenceStack.svelte b/src/lib/components/motion/AnimatePresenceStack.svelte
@@ -1,15 +1,18 @@
 <script>
+    import Box from "../Box.svelte";
     import { AnimatePresence } from "$lib/motion-start";
     import Card from "$lib/components/Card.svelte";
     let index = 0;
     $: mint = index + 1;
 </script>
 
-<div
-    class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
->
-    <AnimatePresence initial={false} list={[{ key: index }]}>
-        <Card bind:index={mint} frontCard={false} />
-        <Card bind:index drag="x" frontCard={true} />
-    </AnimatePresence>
-</div>
+<Box>
+    <div
+        class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
+    >
+        <AnimatePresence initial={false} list={[{ key: index }]}>
+            <Card bind:index={mint} frontCard={false} />
+            <Card bind:index drag="x" frontCard={true} />
+        </AnimatePresence>
+    </div>
+</Box>
diff --git a/src/lib/components/motion/AnimationSequence.svelte b/src/lib/components/motion/AnimationSequence.svelte
@@ -21,7 +21,7 @@
     };
 </script>
 
-<Box cls="bg-slate-800 text-black">
+<Box>
     <motion.div animate={controls} onTap={startCode} class="box">Tap</motion.div
     >
 </Box>
diff --git a/src/lib/components/motion/ColorInterpolation.svelte b/src/lib/components/motion/ColorInterpolation.svelte
@@ -1,4 +1,5 @@
 <script>
+    import Box from "../Box.svelte";
     import { motion, useMotionValue, useTransform } from "$lib/motion-start";
     let x = useMotionValue(0);
     let background = useTransform(
@@ -9,21 +10,23 @@
 </script>
 
 <!-- Color Interpolation -->
-<motion.div
-    style={{
-        background,
-    }}
-    class=" h-[350px] border border-dashed flex justify-center items-center rounded-3xl"
->
+<Box cls="grid cols-1 rows-1 justify-stretch">
     <motion.div
         style={{
-            x: x,
+            background,
         }}
-        drag="x"
-        dragConstraints={{ right: 0, left: 0 }}
-        whileTap={{ cursor: "grabbing" }}
-        class="w-32 h-32 text-black rounded-full bg-white cursor-grab flex justify-center items-center select-none"
+        class="h-full w-full border border-dashed flex justify-center items-center rounded-3xl"
     >
-        Drag me
+        <motion.div
+            style={{
+                x: x,
+            }}
+            drag="x"
+            dragConstraints={{ right: 0, left: 0 }}
+            whileTap={{ cursor: "grabbing" }}
+            class="w-32 h-32 text-black rounded-full bg-white cursor-grab flex justify-center items-center select-none"
+        >
+            Drag me
+        </motion.div>
     </motion.div>
-</motion.div>
+</Box>
diff --git a/src/lib/components/motion/CyclingThroughStates.svelte b/src/lib/components/motion/CyclingThroughStates.svelte
@@ -25,7 +25,7 @@
     );
 </script>
 
-<Box cls="bg-slate-800 text-black">
+<Box>
     <motion.div
         animate={{
             scale: $scale,

diff --git a/src/lib/components/motion/Drag3DTransform.svelte b/src/lib/components/motion/Drag3DTransform.svelte
@@ -7,7 +7,7 @@
     let rotateY = useTransform(x, [-100, 100], [-60, 60]);
 </script>
 
-<Box cls="bg-slate-800 flex text-black" minHeight={350}>
+<Box>
     <div class="small_circle">
         <motion.div
             style={{

diff --git a/src/lib/components/motion/DragConstraints.svelte b/src/lib/components/motion/DragConstraints.svelte
@@ -1,10 +1,9 @@
 <script>
     import Box from "../Box.svelte";
-    import { motion, useAnimation } from "$lib/motion-start";
-    let controls = useAnimation();
+    import { motion } from "$lib/motion-start";
 </script>
 
-<Box cls="bg-slate-800 text-black" minHeight={350}>
+<Box>
     <div
         class="bg-gray-500/10 h-72 w-72 flex justify-center items-center rounded-xl shadow-md"
     >

diff --git a/src/lib/components/motion/DragDirectionLocking.svelte b/src/lib/components/motion/DragDirectionLocking.svelte
@@ -3,7 +3,7 @@
     import { motion } from "$lib/motion-start";
 </script>
 
-<Box cls="bg-slate-800 flex text-black" minHeight={350}>
+<Box>
     <motion.div
         drag={true}
         dragDirectionLock

diff --git a/src/lib/components/motion/DragTransform.svelte b/src/lib/components/motion/DragTransform.svelte
@@ -7,7 +7,7 @@
     // let borderRadius = useTransform(x, [-150, 0, 150], [50, 50, 100]);
 </script>
 
-<Box cls="bg-slate-800 text-black" minHeight={350}>
+<Box>
     <motion.div
         style={{
             x,

diff --git a/src/lib/components/motion/DurBasedSpring.svelte b/src/lib/components/motion/DurBasedSpring.svelte
@@ -5,7 +5,7 @@
     let i = 0;
 </script>
 
-<Box cls="bg-slate-800 flex-col gap-20" minHeight={350}>
+<Box cls="flex-col gap-20">
     {#key i}
         <motion.div
             animate={{

diff --git a/src/lib/components/motion/KeyFramesPosition.svelte b/src/lib/components/motion/KeyFramesPosition.svelte
@@ -1,13 +1,46 @@
 <script>
+    import Box from "../Box.svelte";
+    import Button from "../ui/button/button.svelte";
     import { motion } from "$lib/motion-start";
+    let i = 0;
 </script>
 
-<motion.div
-    animate={{
-        x: [0, 100, 100, 0, 0],
-        y: [0, 0, 100, 100, 0],
-        backgroundColor: ["#fd3", "#60f", "#fd3"],
-    }}
-    transition={{ duration: 4, ease: "linear" }}
-    class="w-20 h-20 rounded-xl"
-></motion.div>
+<Box cls="flex-col gap-10">
+    <div class="h-[180px] w-[180px]">
+        {#key i}
+            <motion.div
+                animate={{
+                    x: [0, 100, 100, 0, 0],
+                    y: [0, 0, 100, 100, 0],
+                    backgroundColor: ["#fd3", "#60f", "#fd3"],
+                }}
+                transition={{ duration: 4, ease: "linear" }}
+                class="w-20 h-20 rounded-xl"
+            ></motion.div>
+        {/key}
+    </div>
+    <div>
+        <Button
+            on:click={() => (i += 1)}
+            variant="outline"
+            class="bg-gray-700/30 border-white/30 text-white"
+            size="sm"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="lucide lucide-rotate-ccw"
+                ><path
+                    d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+                /><path d="M3 3v5h5" /></svg
+            >
+        </Button>
+    </div>
+</Box>
diff --git a/src/lib/components/motion/MorphSVG.svelte b/src/lib/components/motion/MorphSVG.svelte
@@ -1,33 +1,36 @@
 <script>
+    import Box from "../Box.svelte";
     import { motion } from "$lib/motion-start";
 </script>
 
-<svg
-    width={200}
-    height={200}
-    class="bg-white rounded-3xl"
-    stroke="#70f"
-    stroke-width={20}
-    stroke-linecap="round"
-    fill="transparent"
->
-    <motion.path
-        animate={{
-            d: [
-                "M 40,40 Q 160,40 160,160",
-                "M 160,40 Q 100,100 40,160",
-                "M 160,160 Q 100,160 40,160",
-                "M 160,40 Q 100,160 40,40",
-                "M 160,40 Q 100,40 40,40",
-                "M 40,40 Q 160,40 160,160",
-            ],
-        }}
-        transition={{
-            repeat: Infinity,
-            ease: "easeInOut",
-            duration: 6,
-            times: [0, 0.16, 0.33, 0.5, 0.66, 0.83],
-        }}
-        d="M 40,40 Q 160,40 160,160"
-    />
-</svg>
+<Box>
+    <svg
+        width={200}
+        height={200}
+        class="bg-white rounded-3xl"
+        stroke="#70f"
+        stroke-width={20}
+        stroke-linecap="round"
+        fill="transparent"
+    >
+        <motion.path
+            animate={{
+                d: [
+                    "M 40,40 Q 160,40 160,160",
+                    "M 160,40 Q 100,100 40,160",
+                    "M 160,160 Q 100,160 40,160",
+                    "M 160,40 Q 100,160 40,40",
+                    "M 160,40 Q 100,40 40,40",
+                    "M 40,40 Q 160,40 160,160",
+                ],
+            }}
+            transition={{
+                repeat: Infinity,
+                ease: "easeInOut",
+                duration: 6,
+                times: [0, 0.16, 0.33, 0.5, 0.66, 0.83],
+            }}
+            d="M 40,40 Q 160,40 160,160"
+        />
+    </svg>
+</Box>
diff --git a/src/lib/components/motion/Repeat.svelte b/src/lib/components/motion/Repeat.svelte
@@ -4,7 +4,7 @@
     let i = 0;
 </script>
 
-<Box cls="bg-slate-800 flex" minHeight={350}>
+<Box>
     {#key i}
         <motion.div
             animate={{

diff --git a/src/lib/components/motion/ReverseEffect.svelte b/src/lib/components/motion/ReverseEffect.svelte
@@ -4,7 +4,7 @@
     let i = 0;
 </script>
 
-<Box cls="bg-slate-800 flex">
+<Box>
     {#key i}
         <motion.div
             animate={{