@pyreon/hooks 0.11.1 → 0.11.3

package/src/__tests__/useKeyboard.test.ts

@@ -0,0 +1,144 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+let mountCallbacks: Array<() => void> = []
+let unmountCallbacks: Array<() => void> = []
+
+vi.mock("@pyreon/core", () => ({
+  onMount: (fn: () => unknown) => {
+    mountCallbacks.push(fn as () => void)
+  },
+  onUnmount: (fn: () => void) => {
+    unmountCallbacks.push(fn)
+  },
+}))
+
+import { useKeyboard } from "../useKeyboard"
+
+describe("useKeyboard", () => {
+  beforeEach(() => {
+    mountCallbacks = []
+    unmountCallbacks = []
+  })
+
+  it("calls handler when the target key is pressed", () => {
+    const handler = vi.fn()
+    useKeyboard("Enter", handler)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    const event = new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+    document.dispatchEvent(event)
+
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(handler).toHaveBeenCalledWith(event)
+  })
+
+  it("does not call handler for different keys", () => {
+    const handler = vi.fn()
+    useKeyboard("Enter", handler)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+    document.dispatchEvent(event)
+
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it("listens for keydown by default", () => {
+    const handler = vi.fn()
+    const addSpy = vi.spyOn(document, "addEventListener")
+    useKeyboard("Escape", handler)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(addSpy).toHaveBeenCalledWith("keydown", expect.any(Function))
+    addSpy.mockRestore()
+  })
+
+  it("supports keyup event option", () => {
+    const handler = vi.fn()
+    useKeyboard("Space", handler, { event: "keyup" })
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    const keydownEvent = new KeyboardEvent("keydown", { key: "Space", bubbles: true })
+    document.dispatchEvent(keydownEvent)
+    expect(handler).not.toHaveBeenCalled()
+
+    const keyupEvent = new KeyboardEvent("keyup", { key: "Space", bubbles: true })
+    document.dispatchEvent(keyupEvent)
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it("supports custom target", () => {
+    const handler = vi.fn()
+    const customTarget = document.createElement("div")
+    document.body.appendChild(customTarget)
+    const addSpy = vi.spyOn(customTarget, "addEventListener")
+
+    useKeyboard("Enter", handler, { target: customTarget })
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(addSpy).toHaveBeenCalledWith("keydown", expect.any(Function))
+
+    const event = new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+    customTarget.dispatchEvent(event)
+    expect(handler).toHaveBeenCalledTimes(1)
+
+    addSpy.mockRestore()
+    document.body.removeChild(customTarget)
+  })
+
+  it("removes listeners on unmount", () => {
+    const handler = vi.fn()
+    const removeSpy = vi.spyOn(document, "removeEventListener")
+    useKeyboard("Enter", handler)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    unmountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(removeSpy).toHaveBeenCalledWith("keydown", expect.any(Function))
+    removeSpy.mockRestore()
+  })
+
+  it("removes listeners from custom target on unmount", () => {
+    const handler = vi.fn()
+    const customTarget = document.createElement("div")
+    const removeSpy = vi.spyOn(customTarget, "removeEventListener")
+
+    useKeyboard("Enter", handler, { target: customTarget })
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    unmountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(removeSpy).toHaveBeenCalledWith("keydown", expect.any(Function))
+    removeSpy.mockRestore()
+  })
+
+  it("calls handler multiple times for repeated key presses", () => {
+    const handler = vi.fn()
+    useKeyboard("a", handler)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }))
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }))
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }))
+
+    expect(handler).toHaveBeenCalledTimes(3)
+  })
+})

package/src/__tests__/useLatest.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest"
+import { useLatest } from "../useLatest"
+
+describe("useLatest", () => {
+  it("returns a ref with the current value", () => {
+    const ref = useLatest(42)
+    expect(ref.current).toBe(42)
+  })
+
+  it("ref object can be manually updated", () => {
+    const ref = useLatest("a")
+    expect(ref.current).toBe("a")
+
+    // In Pyreon, since component runs once, the caller updates .current manually
+    ;(ref as { current: string }).current = "b"
+    expect(ref.current).toBe("b")
+  })
+
+  it("returns a stable ref identity", () => {
+    const ref = useLatest("hello")
+    const same = ref
+    expect(same).toBe(ref)
+  })
+})

package/src/__tests__/useMediaQuery.test.ts

@@ -0,0 +1,143 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+let mountCallbacks: Array<() => unknown> = []
+let unmountCallbacks: Array<() => void> = []
+
+vi.mock("@pyreon/core", () => ({
+  onMount: (fn: () => unknown) => {
+    mountCallbacks.push(fn)
+  },
+  onUnmount: (fn: () => void) => {
+    unmountCallbacks.push(fn)
+  },
+}))
+
+import { useMediaQuery } from "../useMediaQuery"
+
+describe("useMediaQuery", () => {
+  let listeners: Map<string, (e: MediaQueryListEvent) => void>
+  let matchMediaMock: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    mountCallbacks = []
+    unmountCallbacks = []
+    listeners = new Map()
+
+    matchMediaMock = vi.fn((query: string) => {
+      const mql = {
+        matches: false,
+        media: query,
+        addEventListener: vi.fn((event: string, cb: (e: MediaQueryListEvent) => void) => {
+          if (event === "change") listeners.set(query, cb)
+        }),
+        removeEventListener: vi.fn((event: string) => {
+          if (event === "change") listeners.delete(query)
+        }),
+        dispatchEvent: vi.fn(),
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }
+      return mql
+    })
+
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: matchMediaMock,
+    })
+  })
+
+  it("returns false initially before mount", () => {
+    const matches = useMediaQuery("(min-width: 768px)")
+    expect(matches()).toBe(false)
+  })
+
+  it("returns the current match state after mount", () => {
+    matchMediaMock.mockReturnValue({
+      matches: true,
+      media: "(min-width: 768px)",
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    })
+
+    const matches = useMediaQuery("(min-width: 768px)")
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(matches()).toBe(true)
+  })
+
+  it("updates when media query changes", () => {
+    const mql = {
+      matches: false,
+      media: "(min-width: 768px)",
+      addEventListener: vi.fn((event: string, cb: (e: MediaQueryListEvent) => void) => {
+        if (event === "change") listeners.set("(min-width: 768px)", cb)
+      }),
+      removeEventListener: vi.fn(),
+    }
+    matchMediaMock.mockReturnValue(mql)
+
+    const matches = useMediaQuery("(min-width: 768px)")
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(matches()).toBe(false)
+
+    // Simulate media query change
+    const changeListener = listeners.get("(min-width: 768px)")
+    changeListener?.({ matches: true } as MediaQueryListEvent)
+    expect(matches()).toBe(true)
+  })
+
+  it("removes listener on unmount", () => {
+    const removeEventListenerSpy = vi.fn()
+    const mql = {
+      matches: false,
+      media: "(min-width: 768px)",
+      addEventListener: vi.fn(),
+      removeEventListener: removeEventListenerSpy,
+    }
+    matchMediaMock.mockReturnValue(mql)
+
+    useMediaQuery("(min-width: 768px)")
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    unmountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("change", expect.any(Function))
+  })
+
+  it("passes the correct query string to matchMedia", () => {
+    useMediaQuery("(prefers-color-scheme: dark)")
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(matchMediaMock).toHaveBeenCalledWith("(prefers-color-scheme: dark)")
+  })
+
+  it("updates from true to false on change", () => {
+    const mql = {
+      matches: true,
+      media: "(min-width: 768px)",
+      addEventListener: vi.fn((event: string, cb: (e: MediaQueryListEvent) => void) => {
+        if (event === "change") listeners.set("q", cb)
+      }),
+      removeEventListener: vi.fn(),
+    }
+    matchMediaMock.mockReturnValue(mql)
+
+    const matches = useMediaQuery("(min-width: 768px)")
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(matches()).toBe(true)
+
+    const changeListener = listeners.get("q")
+    changeListener?.({ matches: false } as MediaQueryListEvent)
+    expect(matches()).toBe(false)
+  })
+})

package/src/__tests__/useMergedRef.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it, vi } from "vitest"
+import { useMergedRef } from "../useMergedRef"
+
+describe("useMergedRef", () => {
+  it("sets object refs", () => {
+    const ref1 = { current: null as HTMLDivElement | null }
+    const ref2 = { current: null as HTMLDivElement | null }
+
+    const merged = useMergedRef(ref1, ref2)
+
+    const node = document.createElement("div")
+    merged(node)
+
+    expect(ref1.current).toBe(node)
+    expect(ref2.current).toBe(node)
+  })
+
+  it("calls callback refs", () => {
+    const cb = vi.fn()
+    const objRef = { current: null as HTMLDivElement | null }
+
+    const merged = useMergedRef(cb, objRef)
+
+    const node = document.createElement("div")
+    merged(node)
+
+    expect(cb).toHaveBeenCalledWith(node)
+    expect(objRef.current).toBe(node)
+  })
+
+  it("skips undefined refs", () => {
+    const ref = { current: null as HTMLDivElement | null }
+    const merged = useMergedRef(undefined, ref)
+
+    const node = document.createElement("div")
+    merged(node)
+
+    expect(ref.current).toBe(node)
+  })
+
+  it("handles null node (unmount)", () => {
+    const cb = vi.fn()
+    const merged = useMergedRef(cb)
+
+    merged(null)
+    expect(cb).toHaveBeenCalledWith(null)
+  })
+})

package/src/__tests__/usePrevious.test.ts

@@ -0,0 +1,70 @@
+import { signal } from "@pyreon/reactivity"
+import { describe, expect, it } from "vitest"
+import { usePrevious } from "../usePrevious"
+
+describe("usePrevious", () => {
+  it("returns undefined initially", () => {
+    const source = signal(1)
+    const prev = usePrevious(source)
+    expect(prev()).toBeUndefined()
+  })
+
+  it("returns the previous value after source changes", () => {
+    const source = signal(1)
+    const prev = usePrevious(source)
+    expect(prev()).toBeUndefined()
+
+    source.set(2)
+    expect(prev()).toBe(1)
+  })
+
+  it("tracks multiple changes", () => {
+    const source = signal("a")
+    const prev = usePrevious(source)
+    expect(prev()).toBeUndefined()
+
+    source.set("b")
+    expect(prev()).toBe("a")
+
+    source.set("c")
+    expect(prev()).toBe("b")
+
+    source.set("d")
+    expect(prev()).toBe("c")
+  })
+
+  it("works with number values", () => {
+    const source = signal(10)
+    const prev = usePrevious(source)
+    expect(prev()).toBeUndefined()
+
+    source.set(20)
+    expect(prev()).toBe(10)
+
+    source.set(30)
+    expect(prev()).toBe(20)
+  })
+
+  it("works with object values", () => {
+    const obj1 = { x: 1 }
+    const obj2 = { x: 2 }
+    const source = signal(obj1)
+    const prev = usePrevious(source)
+    expect(prev()).toBeUndefined()
+
+    source.set(obj2)
+    expect(prev()).toBe(obj1)
+  })
+
+  it("works with null values", () => {
+    const source = signal<string | null>("hello")
+    const prev = usePrevious(source)
+    expect(prev()).toBeUndefined()
+
+    source.set(null)
+    expect(prev()).toBe("hello")
+
+    source.set("world")
+    expect(prev()).toBeNull()
+  })
+})

package/src/__tests__/useReducedMotion.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+let mountCallbacks: Array<() => unknown> = []
+let unmountCallbacks: Array<() => void> = []
+
+vi.mock("@pyreon/core", () => ({
+  onMount: (fn: () => unknown) => {
+    mountCallbacks.push(fn)
+  },
+  onUnmount: (fn: () => void) => {
+    unmountCallbacks.push(fn)
+  },
+}))
+
+import { useReducedMotion } from "../useReducedMotion"
+
+describe("useReducedMotion", () => {
+  let changeListeners: Map<string, (e: MediaQueryListEvent) => void>
+
+  beforeEach(() => {
+    mountCallbacks = []
+    unmountCallbacks = []
+    changeListeners = new Map()
+
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn((query: string) => ({
+        matches: false,
+        media: query,
+        addEventListener: vi.fn((event: string, cb: (e: MediaQueryListEvent) => void) => {
+          if (event === "change") changeListeners.set(query, cb)
+        }),
+        removeEventListener: vi.fn(),
+      })),
+    })
+  })
+
+  it("returns false when no motion preference", () => {
+    const reduced = useReducedMotion()
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(reduced()).toBe(false)
+  })
+
+  it("returns true when reduced motion is preferred", () => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn((query: string) => ({
+        matches: true,
+        media: query,
+        addEventListener: vi.fn((event: string, cb: (e: MediaQueryListEvent) => void) => {
+          if (event === "change") changeListeners.set(query, cb)
+        }),
+        removeEventListener: vi.fn(),
+      })),
+    })
+
+    const reduced = useReducedMotion()
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(reduced()).toBe(true)
+  })
+
+  it("updates when preference changes", () => {
+    const reduced = useReducedMotion()
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(reduced()).toBe(false)
+
+    const listener = changeListeners.get("(prefers-reduced-motion: reduce)")
+    listener?.({ matches: true } as MediaQueryListEvent)
+    expect(reduced()).toBe(true)
+  })
+
+  it("queries the correct media string", () => {
+    const matchMediaSpy = vi.fn((query: string) => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }))
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: matchMediaSpy,
+    })
+
+    useReducedMotion()
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(matchMediaSpy).toHaveBeenCalledWith("(prefers-reduced-motion: reduce)")
+  })
+})

package/src/__tests__/useRootSize.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it, vi } from "vitest"
+
+// Mock @pyreon/styler to provide theme values
+vi.mock("@pyreon/styler", () => ({
+  useTheme: () => ({}),
+}))
+
+import { useRootSize } from "../useRootSize"
+
+describe("useRootSize", () => {
+  it("defaults rootSize to 16", () => {
+    const result = useRootSize()
+    expect(result.rootSize).toBe(16)
+  })
+
+  it("pxToRem converts correctly with default rootSize", () => {
+    const result = useRootSize()
+    expect(result.pxToRem(32)).toBe("2rem")
+    expect(result.pxToRem(8)).toBe("0.5rem")
+  })
+
+  it("remToPx converts correctly with default rootSize", () => {
+    const result = useRootSize()
+    expect(result.remToPx(2)).toBe(32)
+    expect(result.remToPx(0.5)).toBe(8)
+  })
+})

package/src/__tests__/useScrollLock.test.ts

@@ -0,0 +1,123 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+vi.mock("@pyreon/core", () => ({
+  onMount: (_fn: () => unknown) => {
+    /* no-op */
+  },
+  onUnmount: (_fn: () => void) => {
+    /* no-op */
+  },
+}))
+
+describe("useScrollLock", () => {
+  beforeEach(async () => {
+    vi.resetModules()
+    document.body.style.overflow = ""
+  })
+
+  afterEach(() => {
+    document.body.style.overflow = ""
+  })
+
+  async function getUseScrollLock() {
+    // Re-mock after resetModules
+    vi.doMock("@pyreon/core", () => ({
+      onMount: (_fn: () => unknown) => {
+        /* no-op */
+      },
+      onUnmount: (_fn: () => void) => {
+        /* no-op */
+      },
+    }))
+    const mod = await import("../useScrollLock")
+    return mod.useScrollLock
+  }
+
+  it("sets overflow to hidden when locked", async () => {
+    const useScrollLock = await getUseScrollLock()
+    const { lock } = useScrollLock()
+    lock()
+    expect(document.body.style.overflow).toBe("hidden")
+  })
+
+  it("does not change overflow until lock is called", async () => {
+    const useScrollLock = await getUseScrollLock()
+    document.body.style.overflow = "auto"
+    useScrollLock()
+    expect(document.body.style.overflow).toBe("auto")
+  })
+
+  it("restores overflow when unlocked", async () => {
+    const useScrollLock = await getUseScrollLock()
+    document.body.style.overflow = "auto"
+    const { lock, unlock } = useScrollLock()
+    lock()
+    expect(document.body.style.overflow).toBe("hidden")
+    unlock()
+    expect(document.body.style.overflow).toBe("auto")
+  })
+
+  it("lock is idempotent", async () => {
+    const useScrollLock = await getUseScrollLock()
+    const { lock, unlock } = useScrollLock()
+    lock()
+    lock() // second call should be no-op
+    expect(document.body.style.overflow).toBe("hidden")
+    unlock()
+    expect(document.body.style.overflow).toBe("")
+  })
+
+  it("unlock is idempotent", async () => {
+    const useScrollLock = await getUseScrollLock()
+    const { lock, unlock } = useScrollLock()
+    lock()
+    unlock()
+    unlock() // second call should be no-op
+    expect(document.body.style.overflow).toBe("")
+  })
+
+  it("handles concurrent locks with reference counting", async () => {
+    const useScrollLock = await getUseScrollLock()
+    const lock1 = useScrollLock()
+    const lock2 = useScrollLock()
+
+    lock1.lock()
+    expect(document.body.style.overflow).toBe("hidden")
+
+    lock2.lock()
+    expect(document.body.style.overflow).toBe("hidden")
+
+    // Unlocking first should not restore (still 1 active)
+    lock1.unlock()
+    expect(document.body.style.overflow).toBe("hidden")
+
+    // Unlocking second should restore
+    lock2.unlock()
+    expect(document.body.style.overflow).toBe("")
+  })
+
+  it("preserves original overflow across concurrent locks", async () => {
+    const useScrollLock = await getUseScrollLock()
+    document.body.style.overflow = "scroll"
+
+    const lock1 = useScrollLock()
+    const lock2 = useScrollLock()
+
+    lock1.lock()
+    lock2.lock()
+
+    lock1.unlock()
+    expect(document.body.style.overflow).toBe("hidden")
+
+    lock2.unlock()
+    expect(document.body.style.overflow).toBe("scroll")
+  })
+
+  it("unlock without prior lock is no-op", async () => {
+    const useScrollLock = await getUseScrollLock()
+    document.body.style.overflow = "auto"
+    const { unlock } = useScrollLock()
+    unlock()
+    expect(document.body.style.overflow).toBe("auto")
+  })
+})

package/src/__tests__/useSpacing.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it, vi } from "vitest"
+
+// Mock @pyreon/styler to provide theme values
+vi.mock("@pyreon/styler", () => ({
+  useTheme: () => ({}),
+}))
+
+import { useSpacing } from "../useSpacing"
+
+describe("useSpacing", () => {
+  it("returns spacing function with default base (rootSize/2 = 8)", () => {
+    const spacing = useSpacing()
+    expect(spacing(1)).toBe("8px")
+    expect(spacing(2)).toBe("16px")
+    expect(spacing(0.5)).toBe("4px")
+  })
+
+  it("accepts custom base unit", () => {
+    const spacing = useSpacing(4)
+    expect(spacing(1)).toBe("4px")
+    expect(spacing(3)).toBe("12px")
+  })
+})