refactor: switch to ripple (#15)

* refactor: switch to ripple

* fix: apply nit

Author: sasial-dev

package.json

@@ -47,9 +47,9 @@
 		"typescript": "^5.1.6"
 	},
 	"dependencies": {
-		"@rbxts/flipper": "^2.0.1",
 		"@rbxts/react": "*",
 		"@rbxts/react-roblox": "*",
+		"@rbxts/ripple": "*",
 		"@rbxts/services": "^1.5.1",
 		"@rbxts/set-timeout": "^1.1.2"
 	}

pnpm-lock.yaml

@@ -1,9 +1,6 @@
-export * from "@rbxts/flipper";
-
 export * from "./utils/binding";
 export * from "./utils/hoarcekat";
 export * from "./utils/math";
-export * from "./utils/motor";
 export * from "./utils/testez";
 
 export * from "./use-async";
@@ -25,7 +22,7 @@ export * from "./use-key-press";
 export * from "./use-latest";
 export * from "./use-latest-callback";
 export * from "./use-lifetime";
-export * from "./use-motor";
+export * from "./use-motion";
 export * from "./use-mount-effect";
 export * from "./use-mouse";
 export * from "./use-previous";

src/index.ts

@@ -0,0 +1,37 @@
+## 🪝 `useMotion`
+
+```ts
+function useMotion<T extends MotionGoal>(initialValue: T): LuaTuple<[value: Binding<T>, motor: Motion<T>]>
+```
+
+Creates a memoized Motion object set to the given initial value. Returns a binding that updates with the Motion, along with the Motion object.
+
+### 📕 Parameters
+
+-   `initialValue` - The initial value of the motor.
+
+### 📗 Returns
+
+-   A binding for the motor's value.
+-   The motion object. See the [Ripple Repo](https://github.com/littensy/ripple) for the docs.
+
+### 📘 Example
+
+A button that fades in and out when hovered.
+
+```tsx
+function Button() {
+	const [hover, hoverMotor] = useMotion(0);
+
+	return (
+		<textbutton
+			Event={{
+				MouseEnter: () => motion.spring(1, config.spring.stiff),
+				MouseLeave: () => motion.spring(0, config.spring.stiff),
+			}}
+			Size={new UDim2(0, 100, 0, 100)}
+			BackgroundTransparency={hover.map((t) => lerp(0.8, 0.5, t))}
+		/>
+	);
+}
+```

src/use-motion/README.md

@@ -0,0 +1 @@
+export * from "./use-motion";

src/use-motion/index.ts

@@ -0,0 +1,19 @@
+/// <reference types="@rbxts/testez/globals" />
+
+import { renderHook } from "../utils/testez";
+import { useMotion } from "./use-motion";
+
+export = () => {
+	it("should return a motor", () => {
+		const { result, unmount } = renderHook(() => {
+			const [value, motion] = useMotion(0);
+			return { value, motion };
+		});
+
+		expect(result.current.value.getValue()).to.be.a("number");
+		expect(result.current.value.getValue()).to.equal(0);
+		expect(result.current.motion).to.be.a("table");
+
+		unmount();
+	});
+};