@praxisjs/motion 0.2.3 → 1.0.0

package/src/__tests__/use-motion.test.ts

@@ -1,172 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-
-import { useMotion } from "../use-motion";
-
-function makeRef(el: HTMLElement | null = null) {
-  return { current: el };
-}
-
-describe("useMotion", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.clearAllTimers();
-    vi.useRealTimers();
-  });
-
-  it("returns animate, enter, and exit functions", () => {
-    const ref = makeRef(document.createElement("div"));
-    const m = useMotion(ref);
-    expect(typeof m.animate).toBe("function");
-    expect(typeof m.enter).toBe("function");
-    expect(typeof m.exit).toBe("function");
-  });
-
-  it("returns a cancel function when ref.current is null", () => {
-    const ref = makeRef(null);
-    const m = useMotion(ref);
-    const cancel = m.animate({ opacity: [0, 1] });
-    expect(typeof cancel).toBe("function");
-    // calling cancel on null ref should not throw
-    expect(() => { cancel(); }).not.toThrow();
-  });
-
-  it("sets opacity style during animation", async () => {
-    const el = document.createElement("div");
-    const ref = makeRef(el);
-    const m = useMotion(ref);
-
-    const rafCallbacks: FrameRequestCallback[] = [];
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-      rafCallbacks.push(cb);
-      return 1;
-    });
-
-    m.animate({ opacity: [0, 1], duration: 100 });
-
-    // Simulate first frame at t=50 (half way through)
-    rafCallbacks[0]?.(50);
-    expect(el.style.opacity).not.toBe("");
-  });
-
-  it("sets transform style for x, y, scale, rotate", () => {
-    const el = document.createElement("div");
-    const ref = makeRef(el);
-    const m = useMotion(ref);
-
-    const rafCallbacks: FrameRequestCallback[] = [];
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-      rafCallbacks.push(cb);
-      return 1;
-    });
-
-    m.animate({ x: [0, 100], y: [0, 50], scale: [1, 2], rotate: [0, 90], duration: 200 });
-
-    rafCallbacks[0]?.(100);
-    expect(el.style.transform).toContain("translateX");
-    expect(el.style.transform).toContain("translateY");
-    expect(el.style.transform).toContain("scale");
-    expect(el.style.transform).toContain("rotate");
-  });
-
-  it("calls onComplete when animation finishes", () => {
-    const el = document.createElement("div");
-    const ref = makeRef(el);
-    const m = useMotion(ref);
-    const onComplete = vi.fn();
-
-    const rafCallbacks: FrameRequestCallback[] = [];
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-      rafCallbacks.push(cb);
-      return rafCallbacks.length;
-    });
-
-    m.animate({ opacity: [0, 1], duration: 100, onComplete });
-
-    // First frame sets startTime = 0
-    rafCallbacks[0](0);
-    // Second frame at ts=100: elapsed=100, t=1, onComplete fires
-    rafCallbacks[1](100);
-    expect(onComplete).toHaveBeenCalledTimes(1);
-  });
-
-  it("cancel() stops the animation", () => {
-    const el = document.createElement("div");
-    const ref = makeRef(el);
-    const m = useMotion(ref);
-
-    const cancelRaf = vi.fn();
-    const rafCallbacks: FrameRequestCallback[] = [];
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-      rafCallbacks.push(cb);
-      return 42;
-    });
-    vi.spyOn(window, "cancelAnimationFrame").mockImplementation(cancelRaf);
-
-    const cancel = m.animate({ opacity: [0, 1], duration: 300 });
-    cancel();
-
-    // After cancel, further frames should be no-ops
-    rafCallbacks[0]?.(100);
-    expect(cancelRaf).toHaveBeenCalledWith(42);
-  });
-
-  it("exit() reverses opacity and x/y values", () => {
-    const el = document.createElement("div");
-    const ref = makeRef(el);
-    const m = useMotion(ref);
-
-    const rafCallbacks: FrameRequestCallback[] = [];
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-      rafCallbacks.push(cb);
-      return 1;
-    });
-
-    // exit reverses opacity [0,1] → animates [1,0] and x [0,100] → [100,0]
-    m.exit({ opacity: [0, 1], x: [0, 100], duration: 100 });
-
-    rafCallbacks[0]?.(0);
-    // At t=0 (start), opacity should be 1 (the reversed start)
-    expect(el.style.opacity).toBe("1");
-  });
-
-  it("enter() is an alias for animate()", () => {
-    const el = document.createElement("div");
-    const ref = makeRef(el);
-    const m = useMotion(ref);
-    const onComplete = vi.fn();
-
-    const rafCallbacks: FrameRequestCallback[] = [];
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-      rafCallbacks.push(cb);
-      return rafCallbacks.length;
-    });
-
-    m.enter({ opacity: [0, 1], duration: 50, onComplete });
-
-    rafCallbacks[0](0);   // sets startTime=0
-    rafCallbacks[1](50);  // elapsed=50, t=1
-    expect(onComplete).toHaveBeenCalledTimes(1);
-  });
-
-  it("respects delay option — no progress before delay elapses", () => {
-    const el = document.createElement("div");
-    const ref = makeRef(el);
-    const m = useMotion(ref);
-
-    const rafCallbacks: FrameRequestCallback[] = [];
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-      rafCallbacks.push(cb);
-      return 1;
-    });
-
-    m.animate({ opacity: [0, 1], delay: 200, duration: 100 });
-
-    // At ts=50, delay not yet passed; opacity should be at start value (0)
-    rafCallbacks[0]?.(50);
-    expect(el.style.opacity).toBe("0");
-  });
-});

package/src/use-motion.ts

@@ -1,89 +0,0 @@
-import { resolveEasing, type Easing } from "./easings";
-
-export interface MotionKeyframes {
-  opacity?: [number, number];
-  x?: [number, number];
-  y?: [number, number];
-  scale?: [number, number];
-  rotate?: [number, number];
-  duration?: number;
-  easing?: Easing;
-  delay?: number;
-  onComplete?: () => void;
-}
-
-export function useMotion(ref: { current: HTMLElement | null }) {
-  function animate(keyframes: MotionKeyframes): () => void {
-    const el: HTMLElement | null = ref.current;
-    if (!el) return () => undefined;
-    const safeEl = el;
-
-    const {
-      opacity,
-      x,
-      y,
-      scale,
-      rotate,
-      duration = 300,
-      easing = "easeOut",
-      delay = 0,
-      onComplete,
-    } = keyframes;
-    const easeFn = resolveEasing(easing);
-    let raf: number | undefined;
-    let startTime: number | undefined;
-    let cancelled = false;
-
-    function frame(ts: number) {
-      if (cancelled) return;
-      startTime ??= ts + delay;
-      const elapsed = Math.max(0, ts - startTime);
-      const t = Math.min(elapsed / duration, 1);
-      const e = easeFn(t);
-
-      const transforms: string[] = [];
-      if (x)
-        transforms.push(`translateX(${String(x[0] + (x[1] - x[0]) * e)}px)`);
-      if (y)
-        transforms.push(`translateY(${String(y[0] + (y[1] - y[0]) * e)}px)`);
-      if (scale)
-        transforms.push(
-          `scale(${String(scale[0] + (scale[1] - scale[0]) * e)})`,
-        );
-      if (rotate)
-        transforms.push(
-          `rotate(${String(rotate[0] + (rotate[1] - rotate[0]) * e)}deg)`,
-        );
-
-      if (transforms.length) safeEl.style.transform = transforms.join(" ");
-      if (opacity)
-        safeEl.style.opacity = String(
-          opacity[0] + (opacity[1] - opacity[0]) * e,
-        );
-
-      if (t < 1) {
-        raf = requestAnimationFrame(frame);
-      } else {
-        onComplete?.();
-      }
-    }
-
-    raf = requestAnimationFrame(frame);
-    return () => {
-      cancelled = true;
-      if (raf) cancelAnimationFrame(raf);
-    };
-  }
-
-  return {
-    animate,
-    enter: (kf: MotionKeyframes) => animate(kf),
-    exit: (kf: MotionKeyframes) =>
-      animate({
-        ...kf,
-        opacity: kf.opacity ? [kf.opacity[1], kf.opacity[0]] : undefined,
-        x: kf.x ? [kf.x[1], kf.x[0]] : undefined,
-        y: kf.y ? [kf.y[1], kf.y[0]] : undefined,
-      }),
-  };
-}