chore: cleanup (#17284)

packages/ui/src/components/animated-number.tsx

@@ -1,4 +1,5 @@
-import { For, Index, createEffect, createMemo, createSignal, on } from "solid-js"
+import { For, Index, createEffect, createMemo, on } from "solid-js"
+import { createStore } from "solid-js/store"
 
 const TRACK = Array.from({ length: 30 }, (_, index) => index % 10)
 const DURATION = 600
@@ -14,8 +15,12 @@ function spin(from: number, to: number, direction: 1 | -1) {
 }
 
 function Digit(props: { value: number; direction: 1 | -1 }) {
-  const [step, setStep] = createSignal(props.value + 10)
-  const [animating, setAnimating] = createSignal(false)
+  const [state, setState] = createStore({
+    step: props.value + 10,
+    animating: false,
+  })
+  const step = () => state.step
+  const animating = () => state.animating
   let last = props.value
 
   createEffect(
@@ -25,13 +30,13 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
         const delta = spin(last, next, props.direction)
         last = next
         if (!delta) {
-          setAnimating(false)
-          setStep(next + 10)
+          setState("animating", false)
+          setState("step", next + 10)
           return
         }
 
-        setAnimating(true)
-        setStep((value) => value + delta)
+        setState("animating", true)
+        setState("step", (value) => value + delta)
       },
       { defer: true },
     ),
@@ -43,8 +48,8 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
         data-slot="animated-number-strip"
         data-animating={animating() ? "true" : "false"}
         onTransitionEnd={() => {
-          setAnimating(false)
-          setStep((value) => normalize(value) + 10)
+          setState("animating", false)
+          setState("step", (value) => normalize(value) + 10)
         }}
         style={{
           "--animated-number-offset": `${step()}`,
@@ -63,8 +68,12 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
     return Math.max(0, Math.round(props.value))
   })
 
-  const [value, setValue] = createSignal(target())
-  const [direction, setDirection] = createSignal<1 | -1>(1)
+  const [state, setState] = createStore({
+    value: target(),
+    direction: 1 as 1 | -1,
+  })
+  const value = () => state.value
+  const direction = () => state.direction
 
   createEffect(
     on(
@@ -73,8 +82,8 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
         const current = value()
         if (next === current) return
 
-        setDirection(next > current ? 1 : -1)
-        setValue(next)
+        setState("direction", next > current ? 1 : -1)
+        setState("value", next)
       },
       { defer: true },
     ),