Merge pull request #50 from objectstack-ai/copilot/complete-roadmap-development-yet-again

Author: hotlong

ROADMAP.md

@@ -0,0 +1,128 @@
+/**
+ * Tests for useAnimationProtocol – validates animation and transition
+ * registration, removal, retrieval, and reduced-motion awareness.
+ */
+import { renderHook, act } from "@testing-library/react-native";
+import { useAnimationProtocol, AnimationConfig, TransitionConfig } from "~/hooks/useAnimationProtocol";
+
+const fadeIn: AnimationConfig = {
+  type: "fade",
+  duration: 300,
+  delay: 0,
+  easing: "ease-in-out",
+  iterations: 1,
+};
+
+const slideUp: TransitionConfig = {
+  property: "translateY",
+  from: 100,
+  to: 0,
+  duration: 250,
+  easing: "ease-out",
+};
+
+describe("useAnimationProtocol", () => {
+  it("returns default initial state", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    expect(result.current.animations.size).toBe(0);
+    expect(result.current.transitions.size).toBe(0);
+    expect(result.current.motionConfig).toEqual({
+      reducedMotion: false,
+      prefersContrast: false,
+      animationScale: 1,
+    });
+    expect(result.current.isReduced).toBe(false);
+  });
+
+  it("registers and retrieves an animation", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerAnimation("fadeIn", fadeIn);
+    });
+
+    expect(result.current.animations.size).toBe(1);
+    expect(result.current.getAnimation("fadeIn")).toEqual(fadeIn);
+  });
+
+  it("removes an animation", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerAnimation("fadeIn", fadeIn);
+    });
+
+    act(() => {
+      result.current.removeAnimation("fadeIn");
+    });
+
+    expect(result.current.animations.size).toBe(0);
+    expect(result.current.getAnimation("fadeIn")).toBeUndefined();
+  });
+
+  it("registers and retrieves a transition", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerTransition("slideUp", slideUp);
+    });
+
+    expect(result.current.transitions.size).toBe(1);
+    expect(result.current.getTransition("slideUp")).toEqual(slideUp);
+  });
+
+  it("removes a transition", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerTransition("slideUp", slideUp);
+    });
+
+    act(() => {
+      result.current.removeTransition("slideUp");
+    });
+
+    expect(result.current.transitions.size).toBe(0);
+    expect(result.current.getTransition("slideUp")).toBeUndefined();
+  });
+
+  it("sets motion config and computes isReduced", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.setMotionConfig({
+        reducedMotion: true,
+        prefersContrast: true,
+        animationScale: 0.5,
+      });
+    });
+
+    expect(result.current.isReduced).toBe(true);
+    expect(result.current.motionConfig.animationScale).toBe(0.5);
+  });
+
+  it("returns undefined for unregistered ids", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    expect(result.current.getAnimation("nonexistent")).toBeUndefined();
+    expect(result.current.getTransition("nonexistent")).toBeUndefined();
+  });
+
+  it("replaces an existing animation config", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerAnimation("fadeIn", fadeIn);
+    });
+
+    const updated: AnimationConfig = { ...fadeIn, duration: 500 };
+
+    act(() => {
+      result.current.registerAnimation("fadeIn", updated);
+    });
+
+    expect(result.current.animations.size).toBe(1);
+    expect(result.current.getAnimation("fadeIn")!.duration).toBe(500);
+  });
+});

__tests__/hooks/useAnimationProtocol.test.ts

@@ -0,0 +1,125 @@
+/**
+ * Tests for useBlankPageLayout – validates blank page layout management,
+ * item addition, removal, reordering, updates, and template selection.
+ */
+import { renderHook, act } from "@testing-library/react-native";
+import { useBlankPageLayout, LayoutItem } from "~/hooks/useBlankPageLayout";
+
+describe("useBlankPageLayout", () => {
+  it("returns default state initially", () => {
+    const { result } = renderHook(() => useBlankPageLayout());
+
+    expect(result.current.items).toEqual([]);
+    expect(result.current.template).toBe("blank");
+  });
+
+  it("sets layout items", () => {
+    const { result } = renderHook(() => useBlankPageLayout());
+
+    const items: LayoutItem[] = [
+      { id: "i1", type: "text", config: { content: "Hello" }, order: 0 },
+      { id: "i2", type: "image", config: { src: "img.png" }, order: 1 },
+    ];
+
+    act(() => {
+      result.current.setItems(items);
+    });
+
+    expect(result.current.items).toHaveLength(2);
+  });
+
+  it("adds an item sorted by order", () => {
+    const { result } = renderHook(() => useBlankPageLayout());
+
+    act(() => {
+      result.current.addItem({ id: "i2", type: "image", config: {}, order: 2 });
+    });
+
+    act(() => {
+      result.current.addItem({ id: "i1", type: "text", config: {}, order: 1 });
+    });
+
+    expect(result.current.items).toHaveLength(2);
+    expect(result.current.items[0].id).toBe("i1");
+    expect(result.current.items[1].id).toBe("i2");
+  });
+
+  it("removes an item by id", () => {
+    const { result } = renderHook(() => useBlankPageLayout());
+
+    act(() => {
+      result.current.setItems([
+        { id: "i1", type: "text", config: {}, order: 0 },
+        { id: "i2", type: "image", config: {}, order: 1 },
+      ]);
+    });
+
+    act(() => {
+      result.current.removeItem("i1");
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].id).toBe("i2");
+  });
+
+  it("moves an item to a new order", () => {
+    const { result } = renderHook(() => useBlankPageLayout());
+
+    act(() => {
+      result.current.setItems([
+        { id: "i1", type: "text", config: {}, order: 0 },
+        { id: "i2", type: "image", config: {}, order: 1 },
+        { id: "i3", type: "video", config: {}, order: 2 },
+      ]);
+    });
+
+    act(() => {
+      result.current.moveItem("i1", 5);
+    });
+
+    expect(result.current.items[0].id).toBe("i2");
+    expect(result.current.items[2].id).toBe("i1");
+    expect(result.current.items[2].order).toBe(5);
+  });
+
+  it("updates an item's configuration", () => {
+    const { result } = renderHook(() => useBlankPageLayout());
+
+    act(() => {
+      result.current.setItems([
+        { id: "i1", type: "text", config: { content: "Hello" }, order: 0 },
+      ]);
+    });
+
+    act(() => {
+      result.current.updateItem("i1", { config: { content: "Updated" } });
+    });
+
+    expect(result.current.items[0].config).toEqual({ content: "Updated" });
+  });
+
+  it("sets the template type", () => {
+    const { result } = renderHook(() => useBlankPageLayout());
+
+    act(() => {
+      result.current.setTemplate("dashboard");
+    });
+
+    expect(result.current.template).toBe("dashboard");
+  });
+
+  it("changes template without affecting items", () => {
+    const { result } = renderHook(() => useBlankPageLayout());
+
+    act(() => {
+      result.current.addItem({ id: "i1", type: "text", config: {}, order: 0 });
+    });
+
+    act(() => {
+      result.current.setTemplate("form");
+    });
+
+    expect(result.current.template).toBe("form");
+    expect(result.current.items).toHaveLength(1);
+  });
+});

__tests__/hooks/useBlankPageLayout.test.ts

@@ -0,0 +1,125 @@
+/**
+ * Tests for useComponentAnimation – validates per-component animation
+ * registration, removal, partial updates, and computed component list.
+ */
+import { renderHook, act } from "@testing-library/react-native";
+import { useComponentAnimation, ComponentAnimationConfig } from "~/hooks/useComponentAnimation";
+
+const cardConfig: ComponentAnimationConfig = {
+  componentId: "card-1",
+  enter: { duration: 200, easing: { type: "ease_in" } },
+  exit: { duration: 150, easing: { type: "ease_out" } },
+};
+
+const buttonConfig: ComponentAnimationConfig = {
+  componentId: "btn-1",
+  hover: { duration: 100, easing: { type: "linear" } },
+  disabled: false,
+};
+
+describe("useComponentAnimation", () => {
+  it("returns empty initial state", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    expect(result.current.componentAnimations.size).toBe(0);
+    expect(result.current.registeredComponents).toEqual([]);
+  });
+
+  it("sets and retrieves a component animation", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+    });
+
+    expect(result.current.componentAnimations.size).toBe(1);
+    expect(result.current.getComponentAnimation("card-1")).toEqual(cardConfig);
+    expect(result.current.registeredComponents).toEqual(["card-1"]);
+  });
+
+  it("removes a component animation", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+      result.current.setComponentAnimation("btn-1", buttonConfig);
+    });
+
+    act(() => {
+      result.current.removeComponentAnimation("card-1");
+    });
+
+    expect(result.current.componentAnimations.size).toBe(1);
+    expect(result.current.getComponentAnimation("card-1")).toBeUndefined();
+    expect(result.current.registeredComponents).toEqual(["btn-1"]);
+  });
+
+  it("updates only the enter animation", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+    });
+
+    const newEnter = { duration: 400, easing: { type: "spring" as const } };
+
+    act(() => {
+      result.current.updateEnterAnimation("card-1", newEnter);
+    });
+
+    const updated = result.current.getComponentAnimation("card-1")!;
+    expect(updated.enter).toEqual(newEnter);
+    expect(updated.exit).toEqual(cardConfig.exit);
+  });
+
+  it("updates only the exit animation", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+    });
+
+    const newExit = { duration: 500, easing: { type: "ease_in_out" as const } };
+
+    act(() => {
+      result.current.updateExitAnimation("card-1", newExit);
+    });
+
+    const updated = result.current.getComponentAnimation("card-1")!;
+    expect(updated.exit).toEqual(newExit);
+    expect(updated.enter).toEqual(cardConfig.enter);
+  });
+
+  it("updateEnterAnimation is a no-op for unregistered component", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.updateEnterAnimation("unknown", { duration: 100, easing: { type: "linear" } });
+    });
+
+    expect(result.current.componentAnimations.size).toBe(0);
+  });
+
+  it("returns undefined for unregistered component id", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    expect(result.current.getComponentAnimation("nonexistent")).toBeUndefined();
+  });
+
+  it("replaces an existing component config", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+    });
+
+    const updated: ComponentAnimationConfig = { ...cardConfig, disabled: true };
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", updated);
+    });
+
+    expect(result.current.componentAnimations.size).toBe(1);
+    expect(result.current.getComponentAnimation("card-1")!.disabled).toBe(true);
+  });
+});