airyhooks 0.2.0 → 0.3.0

package/dist/utils/get-hook-template.js

@@ -1,1431 +1,7 @@
-// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-// Generated by: pnpm --filter @airyhooks/hooks build:templates
-// Source: packages/hooks/src/*/use*.ts
-const templates = {
-    useBoolean: `import { useCallback, useState } from "react";
-
+import { templates } from "./hook-templates.js";
 /**
- * Boolean state with setTrue, setFalse, and toggle handlers.
- *
- * @param initialValue - Initial boolean value (default: false)
- * @returns Tuple of [value, { setTrue, setFalse, toggle }]
- *
- * @example
- * const [isEnabled, handlers] = useBoolean(false);
- *
- * return (
- *   <>
- *     <button onClick={handlers.toggle}>Toggle</button>
- *     <button onClick={handlers.setTrue}>Enable</button>
- *     <button onClick={handlers.setFalse}>Disable</button>
- *   </>
- * );
+ * Get the hook template from the generated template file.
  */
-export function useBoolean(initialValue = false): [
-  boolean,
-  {
-    setFalse: () => void;
-    setTrue: () => void;
-    toggle: () => void;
-  },
-] {
-  const [value, setValue] = useState(initialValue);
-
-  const toggle = useCallback(() => {
-    setValue((prev) => !prev);
-  }, []);
-
-  const setTrue = useCallback(() => {
-    setValue(true);
-  }, []);
-
-  const setFalse = useCallback(() => {
-    setValue(false);
-  }, []);
-
-  return [
-    value,
-    {
-      setFalse,
-      setTrue,
-      toggle,
-    },
-  ];
-}
-`,
-    useClickAway: `import { useEffect } from "react";
-
-/**
- * Detects clicks outside of a target element.
- *
- * @param ref - React ref to the target element
- * @param callback - Function to call when click outside is detected
- *
- * @example
- * const ref = useRef<HTMLDivElement>(null);
- *
- * useClickAway(ref, () => {
- *   setIsOpen(false);
- * });
- *
- * return <div ref={ref}>Content</div>;
- */
-export function useClickAway<T extends HTMLElement>(
-  ref: React.RefObject<null | T>,
-  callback: () => void,
-): void {
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const element = ref.current;
-      if (element && !element.contains(event.target as Node)) {
-        callback();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [ref, callback]);
-}
-`,
-    useCopyToClipboard: `import { useCallback, useState } from "react";
-
-export interface UseCopyToClipboardResult {
-  /** The currently copied text, or null if nothing has been copied */
-  copiedText: null | string;
-  /** Function to copy text to clipboard. Returns true if successful. */
-  copy: (text: string) => Promise<boolean>;
-  /** Function to reset the copied state */
-  reset: () => void;
-}
-
-/**
- * Copy text to the clipboard using the modern Clipboard API.
- *
- * @returns Object containing copiedText state, copy function, and reset function
- *
- * @example
- * const { copiedText, copy, reset } = useCopyToClipboard();
- *
- * return (
- *   <button onClick={() => copy("Hello, World!")}>
- *     {copiedText ? "Copied!" : "Copy"}
- *   </button>
- * );
- */
-export function useCopyToClipboard(): UseCopyToClipboardResult {
-  const [copiedText, setCopiedText] = useState<null | string>(null);
-
-  const copy = useCallback(async (text: string): Promise<boolean> => {
-    // Check if we're in a browser environment with clipboard support
-    const clipboard =
-      typeof window !== "undefined" ? navigator.clipboard : undefined;
-
-    if (!clipboard) {
-      console.warn("Clipboard API not available");
-      return false;
-    }
-
-    try {
-      await clipboard.writeText(text);
-      setCopiedText(text);
-      return true;
-    } catch (error) {
-      console.warn("Failed to copy to clipboard:", error);
-      setCopiedText(null);
-      return false;
-    }
-  }, []);
-
-  const reset = useCallback(() => {
-    setCopiedText(null);
-  }, []);
-
-  return { copiedText, copy, reset };
-}
-`,
-    useCounter: `import { useCallback, useState } from "react";
-
-/**
- * Manages numeric state with increment, decrement, reset, and set methods.
- *
- * @param initialValue - Initial numeric value (default: 0)
- * @returns Tuple of [value, { increment, decrement, reset, set }]
- *
- * @example
- * const [count, { increment, decrement, reset }] = useCounter(0);
- *
- * return (
- *   <>
- *     <p>Count: {count}</p>
- *     <button onClick={() => increment()}>+1</button>
- *     <button onClick={() => decrement()}>-1</button>
- *     <button onClick={() => increment(5)}>+5</button>
- *     <button onClick={() => reset()}>Reset</button>
- *   </>
- * );
- */
-export function useCounter(initialValue = 0): [
-  number,
-  {
-    decrement: (amount?: number) => void;
-    increment: (amount?: number) => void;
-    reset: () => void;
-    set: (value: ((prev: number) => number) | number) => void;
-  },
-] {
-  const [count, setCount] = useState<number>(initialValue);
-
-  const increment = useCallback((amount = 1) => {
-    setCount((prev) => prev + amount);
-  }, []);
-
-  const decrement = useCallback((amount = 1) => {
-    setCount((prev) => prev - amount);
-  }, []);
-
-  const reset = useCallback(() => {
-    setCount(initialValue);
-  }, [initialValue]);
-
-  const set = useCallback((value: ((prev: number) => number) | number) => {
-    setCount(value);
-  }, []);
-
-  return [
-    count,
-    {
-      decrement,
-      increment,
-      reset,
-      set,
-    },
-  ];
-}
-`,
-    useDebounce: `import { useEffect, useState } from "react";
-
-/**
- * Debounces a value by delaying updates until after the specified delay.
- *
- * @param value - The value to debounce
- * @param delay - The delay in milliseconds (default: 500ms)
- * @returns The debounced value
- *
- * @example
- * const [search, setSearch] = useState("");
- * const debouncedSearch = useDebounce(search, 300);
- *
- * useEffect(() => {
- *   // This effect runs 300ms after the user stops typing
- *   fetchResults(debouncedSearch);
- * }, [debouncedSearch]);
- */
-export function useDebounce<T>(value: T, delay = 500): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}
-`,
-    useDocumentTitle: `import { useEffect, useRef } from "react";
-
-/**
- * Dynamically update the document title.
- *
- * @param title - The title to set for the document
- * @param restoreOnUnmount - Whether to restore the previous title on unmount (default: true)
- *
- * @example
- * // Basic usage
- * useDocumentTitle('Home | My App');
- *
- * @example
- * // Dynamic title based on state
- * useDocumentTitle(\`\${unreadCount} new messages\`);
- *
- * @example
- * // Don't restore title on unmount
- * useDocumentTitle('Dashboard', false);
- */
-export function useDocumentTitle(title: string, restoreOnUnmount = true): void {
-  const previousTitle = useRef<string | undefined>(undefined);
-
-  useEffect(() => {
-    if (typeof document === "undefined") {
-      return;
-    }
-
-    // Store the previous title only on first mount
-    previousTitle.current ??= document.title;
-
-    document.title = title;
-  }, [title]);
-
-  useEffect(() => {
-    return () => {
-      if (restoreOnUnmount && previousTitle.current !== undefined) {
-        document.title = previousTitle.current;
-      }
-    };
-  }, [restoreOnUnmount]);
-}
-`,
-    useEventListener: `import { useEffect, useRef } from "react";
-
-/**
- * Attaches an event listener to a target element or window with automatic cleanup.
- *
- * @param eventName - The event type to listen for (e.g., 'click', 'scroll', 'keydown')
- * @param handler - The event handler function
- * @param element - The target element or window (default: window)
- * @param options - Event listener options (capture, passive, once)
- *
- * @example
- * // Listen for clicks on window
- * useEventListener('click', (e) => console.log('Clicked!'));
- *
- * @example
- * // Listen for clicks on a specific element
- * const buttonRef = useRef<HTMLButtonElement>(null);
- * useEventListener('click', handleClick, buttonRef);
- *
- * @example
- * // With options
- * useEventListener('scroll', handleScroll, window, { passive: true });
- */
-export function useEventListener<K extends keyof WindowEventMap>(
-  eventName: K,
-  handler: (event: WindowEventMap[K]) => void,
-  element?: Window,
-  options?: AddEventListenerOptions | boolean,
-): void;
-export function useEventListener<
-  K extends keyof HTMLElementEventMap,
-  T extends HTMLElement = HTMLDivElement,
->(
-  eventName: K,
-  handler: (event: HTMLElementEventMap[K]) => void,
-  element: React.RefObject<null | T>,
-  options?: AddEventListenerOptions | boolean,
-): void;
-export function useEventListener<K extends keyof DocumentEventMap>(
-  eventName: K,
-  handler: (event: DocumentEventMap[K]) => void,
-  element: Document,
-  options?: AddEventListenerOptions | boolean,
-): void;
-export function useEventListener<
-  KW extends keyof WindowEventMap,
-  KH extends keyof HTMLElementEventMap,
-  KD extends keyof DocumentEventMap,
-  T extends HTMLElement = HTMLElement,
->(
-  eventName: KD | KH | KW,
-  handler: (
-    event:
-      | DocumentEventMap[KD]
-      | Event
-      | HTMLElementEventMap[KH]
-      | WindowEventMap[KW],
-  ) => void,
-  element?: Document | React.RefObject<null | T> | Window,
-  options?: AddEventListenerOptions | boolean,
-): void {
-  const savedHandler = useRef(handler);
-
-  useEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-
-  useEffect(() => {
-    let targetElement: Document | Element | null | Window;
-
-    if (element === undefined) {
-      targetElement = window;
-    } else if (element instanceof Document || element instanceof Window) {
-      targetElement = element;
-    } else {
-      targetElement = element.current;
-    }
-
-    if (!targetElement?.addEventListener) {
-      return;
-    }
-
-    const eventListener: typeof handler = (event) => {
-      savedHandler.current(event);
-    };
-
-    targetElement.addEventListener(eventName, eventListener, options);
-
-    return () => {
-      targetElement.removeEventListener(eventName, eventListener, options);
-    };
-  }, [eventName, element, options]);
-}
-`,
-    useFetch: `import { useCallback, useEffect, useRef, useState } from "react";
-
-export interface UseFetchOptions<T> {
-  /** Whether to fetch immediately on mount (default: true) */
-  immediate?: boolean;
-  /** Initial data before fetch completes */
-  initialData?: T;
-}
-
-export interface UseFetchResult<T> {
-  /** The fetched data, or undefined if not yet loaded */
-  data: T | undefined;
-  /** Error object if the fetch failed */
-  error: Error | null;
-  /** Whether a fetch is currently in progress */
-  isLoading: boolean;
-  /** Function to manually trigger a refetch */
-  refetch: () => Promise<void>;
-}
-
-/**
- * Fetch data from a URL with loading and error states.
- *
- * @param url - The URL to fetch data from
- * @param options - Configuration options
- * @returns Object containing data, loading state, error, and refetch function
- *
- * @example
- * const { data, isLoading, error, refetch } = useFetch<User[]>('/api/users');
- *
- * if (isLoading) return <Spinner />;
- * if (error) return <Error message={error.message} />;
- * return <UserList users={data} />;
- *
- * @example
- * // With initial data and manual fetch
- * const { data, refetch } = useFetch<User>('/api/user', {
- *   initialData: { name: 'Loading...' },
- *   immediate: false,
- * });
- */
-export function useFetch<T>(
-  url: string,
-  options: UseFetchOptions<T> = {},
-): UseFetchResult<T> {
-  const { immediate = true, initialData } = options;
-
-  const [data, setData] = useState<T | undefined>(initialData);
-  const [error, setError] = useState<Error | null>(null);
-  const [isLoading, setIsLoading] = useState(immediate);
-
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const fetchData = useCallback(async () => {
-    // Cancel any in-flight request
-    abortControllerRef.current?.abort();
-    abortControllerRef.current = new AbortController();
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await fetch(url, {
-        signal: abortControllerRef.current.signal,
-      });
-
-      if (!response.ok) {
-        throw new Error(\`HTTP error! status: \${String(response.status)}\`);
-      }
-
-      const result = (await response.json()) as T;
-      setData(result);
-    } catch (err) {
-      if (err instanceof Error && err.name !== "AbortError") {
-        setError(err);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  }, [url]);
-
-  useEffect(() => {
-    if (immediate) {
-      void fetchData();
-    }
-
-    return () => {
-      abortControllerRef.current?.abort();
-    };
-  }, [fetchData, immediate]);
-
-  return { data, error, isLoading, refetch: fetchData };
-}
-`,
-    useHover: `import { useCallback, useRef, useState } from "react";
-
-/**
- * Tracks mouse hover state on a DOM element via ref.
- *
- * @returns Tuple of [isHovered, ref]
- *
- * @example
- * const [isHovered, ref] = useHover();
- *
- * return (
- *   <div
- *     ref={ref}
- *     style={{
- *       backgroundColor: isHovered ? "blue" : "gray",
- *     }}
- *   >
- *     Hover me!
- *   </div>
- * );
- */
-export function useHover<T extends HTMLElement = HTMLElement>(): [
-  boolean,
-  React.RefObject<T>,
-] {
-  const ref = useRef<T>(null);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseEnter = useCallback(() => {
-    setIsHovered(true);
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setIsHovered(false);
-  }, []);
-
-  // Attach event listeners to the ref
-  const setRef = useCallback(
-    (element: null | T) => {
-      if (ref.current) {
-        ref.current.removeEventListener("mouseenter", handleMouseEnter);
-        ref.current.removeEventListener("mouseleave", handleMouseLeave);
-      }
-
-      if (element) {
-        element.addEventListener("mouseenter", handleMouseEnter);
-        element.addEventListener("mouseleave", handleMouseLeave);
-      }
-
-      ref.current = element;
-    },
-    [handleMouseEnter, handleMouseLeave],
-  );
-
-  // Return a proxy ref that updates the internal ref
-  return [
-    isHovered,
-    {
-      get current() {
-        return ref.current;
-      },
-      set current(element: null | T) {
-        setRef(element);
-      },
-    } as React.RefObject<T>,
-  ];
-}
-`,
-    useIntersectionObserver: `import { useEffect, useRef, useState } from "react";
-
-export interface UseIntersectionObserverOptions {
-  /** Whether to stop observing after the first intersection (default: false) */
-  once?: boolean;
-  /** The element used as the viewport for checking visibility (default: browser viewport) */
-  root?: Element | null;
-  /** Margin around the root element (e.g., "10px 20px 30px 40px") */
-  rootMargin?: string;
-  /** A number or array of numbers indicating at what percentage of visibility the callback should trigger */
-  threshold?: number | number[];
-}
-
-export interface UseIntersectionObserverResult {
-  /** The current intersection observer entry */
-  entry: IntersectionObserverEntry | null;
-  /** Whether the element is currently intersecting */
-  isIntersecting: boolean;
-  /** Ref to attach to the element to observe */
-  ref: React.RefObject<HTMLElement | null>;
-}
-
-/**
- * Track the visibility of a DOM element within the viewport using IntersectionObserver.
- *
- * @param options - IntersectionObserver configuration options
- * @returns Object containing ref, entry, and isIntersecting state
- *
- * @example
- * // Basic usage - lazy load an image
- * const { ref, isIntersecting } = useIntersectionObserver();
- *
- * return (
- *   <div ref={ref}>
- *     {isIntersecting && <img src="large-image.jpg" />}
- *   </div>
- * );
- *
- * @example
- * // Infinite scroll with threshold
- * const { ref, isIntersecting } = useIntersectionObserver({
- *   threshold: 0.5,
- *   rootMargin: '100px',
- * });
- *
- * useEffect(() => {
- *   if (isIntersecting) loadMoreItems();
- * }, [isIntersecting]);
- */
-export function useIntersectionObserver(
-  options: UseIntersectionObserverOptions = {},
-): UseIntersectionObserverResult {
-  const {
-    once = false,
-    root = null,
-    rootMargin = "0px",
-    threshold = 0,
-  } = options;
-
-  const ref = useRef<HTMLElement | null>(null);
-  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
-  const hasTriggered = useRef(false);
-
-  useEffect(() => {
-    const element = ref.current;
-
-    if (!element || (once && hasTriggered.current)) {
-      return;
-    }
-
-    if (typeof IntersectionObserver === "undefined") {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([observerEntry]) => {
-        if (!observerEntry) {
-          return;
-        }
-
-        setEntry(observerEntry);
-
-        if (once && observerEntry.isIntersecting) {
-          hasTriggered.current = true;
-          observer.disconnect();
-        }
-      },
-      { root, rootMargin, threshold },
-    );
-
-    observer.observe(element);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [root, rootMargin, threshold, once]);
-
-  return {
-    entry,
-    isIntersecting: entry?.isIntersecting ?? false,
-    ref,
-  };
-}
-`,
-    useInterval: `import { useEffect } from "react";
-
-/**
- * Calls a callback at specified intervals.
- *
- * @param callback - Function to call on each interval
- * @param delay - Interval delay in milliseconds (null to pause)
- *
- * @example
- * useInterval(() => {
- *   setTime(new Date());
- * }, 1000);
- *
- * @example
- * // Pause interval by passing null
- * useInterval(callback, isPaused ? null : 1000);
- */
-export function useInterval(callback: () => void, delay: null | number): void {
-  useEffect(() => {
-    if (delay === null) return;
-
-    const interval = setInterval(callback, delay);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [callback, delay]);
-}
-`,
-    useIsClient: `import { useEffect, useState } from "react";
-
-/**
- * Determine if the code is running on the client-side.
- * Useful for SSR-safe code that needs to access browser APIs.
- *
- * @returns true if running on client, false during SSR
- *
- * @example
- * const isClient = useIsClient();
- *
- * if (!isClient) {
- *   return <div>Loading...</div>;
- * }
- *
- * // Safe to use browser APIs
- * return <div>Window width: {window.innerWidth}</div>;
- *
- * @example
- * // Conditionally render client-only components
- * const isClient = useIsClient();
- *
- * return (
- *   <div>
- *     <Header />
- *     {isClient && <ClientOnlyMap />}
- *     <Footer />
- *   </div>
- * );
- */
-export function useIsClient(): boolean {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  return isClient;
-}
-`,
-    useKeyPress: `import { useEffect, useState } from "react";
-
-/**
- * Detects if a specific keyboard key is currently pressed.
- *
- * @param targetKey - The key to detect (e.g., "Enter", "ArrowUp", " " for space)
- * @returns Whether the key is currently pressed
- *
- * @example
- * const isEnterPressed = useKeyPress("Enter");
- * const isArrowUpPressed = useKeyPress("ArrowUp");
- *
- * return (
- *   <div>
- *     <p>Enter pressed: {isEnterPressed ? "Yes" : "No"}</p>
- *     <p>Arrow Up pressed: {isArrowUpPressed ? "Yes" : "No"}</p>
- *   </div>
- * );
- */
-export function useKeyPress(targetKey: string): boolean {
-  const [isKeyPressed, setIsKeyPressed] = useState(false);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === targetKey) {
-        setIsKeyPressed(true);
-      }
-    };
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.key === targetKey) {
-        setIsKeyPressed(false);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("keyup", handleKeyUp);
-    };
-  }, [targetKey]);
-
-  return isKeyPressed;
-}
-`,
-    useLocalStorage: `import { useCallback, useEffect, useState } from "react";
-
-/**
- * Syncs state with localStorage, persisting across browser sessions.
- *
- * @param key - The localStorage key
- * @param initialValue - The initial value (used if no stored value exists)
- * @returns A tuple of [value, setValue, removeValue]
- *
- * @example
- * const [theme, setTheme, removeTheme] = useLocalStorage("theme", "light");
- *
- * // Update the theme (automatically persisted)
- * setTheme("dark");
- *
- * // Remove from localStorage
- * removeTheme();
- */
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: T,
-): [T, (value: ((prev: T) => T) | T) => void, () => void] {
-  // Get initial value from localStorage or use provided initial value
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    if (typeof window === "undefined") {
-      return initialValue;
-    }
-
-    try {
-      const item = window.localStorage.getItem(key);
-      return item ? (JSON.parse(item) as T) : initialValue;
-    } catch (error) {
-      console.warn(\`Error reading localStorage key "\${key}":\`, error);
-      return initialValue;
-    }
-  });
-
-  // Update localStorage when value changes
-  const setValue = useCallback(
-    (value: ((prev: T) => T) | T) => {
-      try {
-        setStoredValue((prev) => {
-          const valueToStore = value instanceof Function ? value(prev) : value;
-          if (typeof window !== "undefined") {
-            window.localStorage.setItem(key, JSON.stringify(valueToStore));
-          }
-          return valueToStore;
-        });
-      } catch (error) {
-        console.warn(\`Error setting localStorage key "\${key}":\`, error);
-      }
-    },
-    [key],
-  );
-
-  // Remove from localStorage
-  const removeValue = useCallback(() => {
-    try {
-      if (typeof window !== "undefined") {
-        window.localStorage.removeItem(key);
-      }
-      setStoredValue(initialValue);
-    } catch (error) {
-      console.warn(\`Error removing localStorage key "\${key}":\`, error);
-    }
-  }, [key, initialValue]);
-
-  // Listen for changes in other tabs/windows
-  useEffect(() => {
-    const handleStorageChange = (event: StorageEvent) => {
-      if (event.key === key && event.newValue !== null) {
-        try {
-          setStoredValue(JSON.parse(event.newValue) as T);
-        } catch (error) {
-          console.warn(\`Error parsing localStorage key "\${key}":\`, error);
-        }
-      }
-    };
-
-    window.addEventListener("storage", handleStorageChange);
-    return () => {
-      window.removeEventListener("storage", handleStorageChange);
-    };
-  }, [key]);
-
-  return [storedValue, setValue, removeValue];
-}
-`,
-    useLockBodyScroll: `import { useEffect, useRef } from "react";
-
-/**
- * Temporarily disable scrolling on the document body.
- * Useful for modals, drawers, and other overlays.
- *
- * @example
- * // Lock body scroll when modal is open
- * function Modal({ isOpen }) {
- *   useLockBodyScroll(isOpen);
- *
- *   if (!isOpen) return null;
- *   return <div className="modal">...</div>;
- * }
- *
- * @example
- * // Always lock when component is mounted
- * function FullscreenOverlay() {
- *   useLockBodyScroll();
- *   return <div className="overlay">...</div>;
- * }
- */
-export function useLockBodyScroll(lock = true): void {
-  const originalStyle = useRef<string | undefined>(undefined);
-
-  useEffect(() => {
-    if (typeof document === "undefined") {
-      return;
-    }
-
-    if (!lock) {
-      return;
-    }
-
-    // Store the original overflow style
-    originalStyle.current = document.body.style.overflow;
-
-    // Lock the body scroll
-    document.body.style.overflow = "hidden";
-
-    return () => {
-      // Restore the original overflow style
-      document.body.style.overflow = originalStyle.current ?? "";
-    };
-  }, [lock]);
-}
-`,
-    useMeasure: `import { useCallback, useEffect, useRef, useState } from "react";
-
-export interface UseMeasureRect {
-  /** Bottom position relative to viewport */
-  bottom: number;
-  /** Element height */
-  height: number;
-  /** Left position relative to viewport */
-  left: number;
-  /** Right position relative to viewport */
-  right: number;
-  /** Top position relative to viewport */
-  top: number;
-  /** Element width */
-  width: number;
-  /** X position (same as left) */
-  x: number;
-  /** Y position (same as top) */
-  y: number;
-}
-
-export interface UseMeasureResult<T extends Element> {
-  /** The measured dimensions of the element */
-  rect: UseMeasureRect;
-  /** Ref to attach to the element to measure */
-  ref: React.RefCallback<T>;
-}
-
-const defaultRect: UseMeasureRect = {
-  bottom: 0,
-  height: 0,
-  left: 0,
-  right: 0,
-  top: 0,
-  width: 0,
-  x: 0,
-  y: 0,
-};
-
-/**
- * Measure the dimensions of a DOM element using ResizeObserver.
- *
- * @returns Object containing ref callback and rect measurements
- *
- * @example
- * const { ref, rect } = useMeasure<HTMLDivElement>();
- *
- * return (
- *   <div ref={ref}>
- *     <p>Width: {rect.width}px</p>
- *     <p>Height: {rect.height}px</p>
- *   </div>
- * );
- *
- * @example
- * // Responsive component
- * const { ref, rect } = useMeasure<HTMLDivElement>();
- * const isCompact = rect.width < 400;
- *
- * return (
- *   <nav ref={ref} className={isCompact ? 'compact' : 'full'}>
- *     {isCompact ? <MobileMenu /> : <DesktopMenu />}
- *   </nav>
- * );
- */
-export function useMeasure<
-  T extends Element = HTMLDivElement,
->(): UseMeasureResult<T> {
-  const [element, setElement] = useState<null | T>(null);
-  const [rect, setRect] = useState<UseMeasureRect>(defaultRect);
-
-  const observerRef = useRef<null | ResizeObserver>(null);
-
-  const ref = useCallback((node: null | T) => {
-    setElement(node);
-  }, []);
-
-  useEffect(() => {
-    if (!element) {
-      return;
-    }
-
-    if (typeof ResizeObserver === "undefined") {
-      // Fallback: get initial dimensions without observing changes
-      const boundingRect = element.getBoundingClientRect();
-      setRect({
-        bottom: boundingRect.bottom,
-        height: boundingRect.height,
-        left: boundingRect.left,
-        right: boundingRect.right,
-        top: boundingRect.top,
-        width: boundingRect.width,
-        x: boundingRect.x,
-        y: boundingRect.y,
-      });
-      return;
-    }
-
-    observerRef.current = new ResizeObserver(([entry]) => {
-      if (entry) {
-        const boundingRect = entry.target.getBoundingClientRect();
-        setRect({
-          bottom: boundingRect.bottom,
-          height: boundingRect.height,
-          left: boundingRect.left,
-          right: boundingRect.right,
-          top: boundingRect.top,
-          width: boundingRect.width,
-          x: boundingRect.x,
-          y: boundingRect.y,
-        });
-      }
-    });
-
-    observerRef.current.observe(element);
-
-    return () => {
-      observerRef.current?.disconnect();
-    };
-  }, [element]);
-
-  return { rect, ref };
-}
-`,
-    useMedia: `import { useEffect, useState } from "react";
-
-/**
- * Reacts to CSS media query changes.
- *
- * @param query - CSS media query string (e.g., "(max-width: 768px)")
- * @returns Whether the media query matches
- *
- * @example
- * const isMobile = useMedia("(max-width: 768px)");
- * const isDarkMode = useMedia("(prefers-color-scheme: dark)");
- *
- * return (
- *   <div>
- *     <p>Is mobile: {isMobile ? "Yes" : "No"}</p>
- *     <p>Dark mode: {isDarkMode ? "Yes" : "No"}</p>
- *   </div>
- * );
- */
-export function useMedia(query: string): boolean {
-  const [matches, setMatches] = useState(false);
-
-  useEffect(() => {
-    // Check if window is defined (SSR safety)
-    if (typeof window === "undefined") {
-      return undefined;
-    }
-
-    try {
-      const mediaQueryList = window.matchMedia(query);
-
-      // Set initial value
-      setMatches(mediaQueryList.matches);
-
-      // Create listener function
-      const handleChange = (e: MediaQueryListEvent) => {
-        setMatches(e.matches);
-      };
-
-      // Modern browsers use addEventListener
-      mediaQueryList.addEventListener("change", handleChange);
-      return () => {
-        mediaQueryList.removeEventListener("change", handleChange);
-      };
-    } catch (error) {
-      console.warn(\`Invalid media query: "\${query}"\`, error);
-      return undefined;
-    }
-  }, [query]);
-
-  return matches;
-}
-`,
-    useMount: `import { useEffect } from "react";
-
-/**
- * Calls a callback on component mount.
- *
- * @param callback - Function to call on mount
- *
- * @example
- * useMount(() => {
- *   console.log("Component mounted");
- *   // Initialize resources
- * });
- */
-export function useMount(callback: () => void): void {
-  useEffect(callback, []);
-}
-`,
-    usePrevious: `import { useEffect, useRef } from "react";
-
-/**
- * Tracks the previous value or prop.
- *
- * @param value - The current value to track
- * @returns The previous value from the last render
- *
- * @example
- * const [count, setCount] = useState(0);
- * const prevCount = usePrevious(count);
- *
- * useEffect(() => {
- *   console.log(\`Current: \${count}, Previous: \${prevCount}\`);
- * }, [count, prevCount]);
- */
-export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T | undefined>(undefined);
-
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-}
-`,
-    useScroll: `import { useCallback, useEffect, useState } from "react";
-
-interface ScrollPosition {
-  x: number;
-  y: number;
-}
-
-/**
- * Tracks scroll position of an element or the window.
- *
- * @param ref - Optional ref to an element. If not provided, tracks window scroll
- * @returns Object with x and y scroll positions
- *
- * @example
- * // Track window scroll
- * const scroll = useScroll();
- * console.log(scroll.x, scroll.y);
- *
- * @example
- * // Track element scroll
- * const elementRef = useRef<HTMLDivElement>(null);
- * const scroll = useScroll(elementRef);
- * return <div ref={elementRef} style={{ overflow: 'auto' }}>Content</div>;
- */
-export function useScroll(
-  ref?: React.RefObject<HTMLElement | null>,
-): ScrollPosition {
-  const [scroll, setScroll] = useState<ScrollPosition>({ x: 0, y: 0 });
-
-  const handleScroll = useCallback(() => {
-    if (ref?.current) {
-      setScroll({
-        x: ref.current.scrollLeft,
-        y: ref.current.scrollTop,
-      });
-    } else if (typeof window !== "undefined") {
-      setScroll({
-        x: window.scrollX,
-        y: window.scrollY,
-      });
-    }
-  }, [ref]);
-
-  useEffect(() => {
-    // Set initial scroll position
-    handleScroll();
-
-    if (ref?.current) {
-      // Listen to element scroll
-      const target = ref.current;
-      target.addEventListener("scroll", handleScroll);
-      return () => {
-        target.removeEventListener("scroll", handleScroll);
-      };
-    } else if (typeof window !== "undefined") {
-      // Listen to window scroll
-      window.addEventListener("scroll", handleScroll);
-      return () => {
-        window.removeEventListener("scroll", handleScroll);
-      };
-    }
-  }, [ref, handleScroll]);
-
-  return scroll;
-}
-`,
-    useSessionStorage: `import { useCallback, useState } from "react";
-
-/**
- * Syncs state with sessionStorage, persisting only for the current session.
- *
- * @param key - The sessionStorage key
- * @param initialValue - The initial value (used if no stored value exists)
- * @returns A tuple of [value, setValue, removeValue]
- *
- * @example
- * const [sessionData, setSessionData, removeSessionData] = useSessionStorage("session", "default");
- *
- * // Update the session data (automatically persisted)
- * setSessionData("newData");
- *
- * // Remove from sessionStorage
- * removeSessionData();
- */
-export function useSessionStorage<T>(
-  key: string,
-  initialValue: T,
-): [T, (value: ((prev: T) => T) | T) => void, () => void] {
-  // Get initial value from sessionStorage or use provided initial value
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    if (typeof window === "undefined") {
-      return initialValue;
-    }
-
-    try {
-      const item = window.sessionStorage.getItem(key);
-      return item ? (JSON.parse(item) as T) : initialValue;
-    } catch (error) {
-      console.warn(\`Error reading sessionStorage key "\${key}":\`, error);
-      return initialValue;
-    }
-  });
-
-  // Update sessionStorage when value changes
-  const setValue = useCallback(
-    (value: ((prev: T) => T) | T) => {
-      try {
-        setStoredValue((prev) => {
-          const valueToStore = value instanceof Function ? value(prev) : value;
-          if (typeof window !== "undefined") {
-            window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
-          }
-          return valueToStore;
-        });
-      } catch (error) {
-        console.warn(\`Error setting sessionStorage key "\${key}":\`, error);
-      }
-    },
-    [key],
-  );
-
-  // Remove from sessionStorage
-  const removeValue = useCallback(() => {
-    try {
-      if (typeof window !== "undefined") {
-        window.sessionStorage.removeItem(key);
-      }
-      setStoredValue(initialValue);
-    } catch (error) {
-      console.warn(\`Error removing sessionStorage key "\${key}":\`, error);
-    }
-  }, [key, initialValue]);
-
-  return [storedValue, setValue, removeValue];
-}
-`,
-    useThrottle: `import { useEffect, useRef, useState } from "react";
-
-/**
- * Throttles a value to update at most once per specified interval.
- *
- * @param value - The value to throttle
- * @param interval - The throttle interval in milliseconds (default: 500ms)
- * @returns The throttled value
- *
- * @example
- * const [position, setPosition] = useState({ x: 0, y: 0 });
- * const throttledPosition = useThrottle(position, 100);
- *
- * useEffect(() => {
- *   // This effect runs at most every 100ms
- *   updateCursor(throttledPosition);
- * }, [throttledPosition]);
- */
-export function useThrottle<T>(value: T, interval = 500): T {
-  const [throttledValue, setThrottledValue] = useState<T>(value);
-  const lastUpdated = useRef<number>(Date.now());
-
-  useEffect(() => {
-    const now = Date.now();
-    const elapsed = now - lastUpdated.current;
-
-    if (elapsed >= interval) {
-      lastUpdated.current = now;
-      setThrottledValue(value);
-    } else {
-      const timer = setTimeout(() => {
-        lastUpdated.current = Date.now();
-        setThrottledValue(value);
-      }, interval - elapsed);
-
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  }, [value, interval]);
-
-  return throttledValue;
-}
-`,
-    useTimeout: `import { useEffect } from "react";
-
-/**
- * Calls a callback after a timeout.
- *
- * @param callback - Function to call after timeout
- * @param delay - Timeout delay in milliseconds (null to disable)
- *
- * @example
- * useTimeout(() => {
- *   console.log("Timeout completed");
- * }, 2000);
- *
- * @example
- * // Disable timeout by passing null
- * useTimeout(() => {
- *   console.log("This won't run");
- * }, null);
- */
-export function useTimeout(callback: () => void, delay: null | number): void {
-  useEffect(() => {
-    if (delay === null) return;
-
-    const timeout = setTimeout(callback, delay);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [callback, delay]);
-}
-`,
-    useToggle: `import { useCallback, useState } from "react";
-
-/**
- * Toggle a boolean value with a callback.
- *
- * @param initialValue - Initial boolean value (default: false)
- * @returns Tuple of [value, toggle, setValue]
- *
- * @example
- * const [isOpen, toggle] = useToggle(false);
- *
- * return (
- *   <>
- *     <button onClick={toggle}>Toggle</button>
- *     {isOpen && <div>Content</div>}
- *   </>
- * );
- */
-export function useToggle(
-  initialValue = false,
-): [boolean, () => void, (value: boolean) => void] {
-  const [value, setValue] = useState(initialValue);
-
-  const toggle = useCallback(() => {
-    setValue((prev) => !prev);
-  }, []);
-
-  return [value, toggle, setValue];
-}
-`,
-    useUnmount: `import { useEffect, useRef } from "react";
-
-/**
- * Calls a callback on component unmount.
- *
- * @param callback - Function to call on unmount
- *
- * @example
- * useUnmount(() => {
- *   console.log("Component unmounting");
- *   // Cleanup resources
- * });
- */
-export function useUnmount(callback: () => void): void {
-  const callbackRef = useRef(callback);
-
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    return () => {
-      callbackRef.current();
-    };
-  }, []);
-}
-`,
-    useWindowSize: `import { useEffect, useState } from "react";
-
-interface WindowSize {
-  height: number | undefined;
-  width: number | undefined;
-}
-
-/**
- * Tracks window dimensions.
- *
- * @returns Object with width and height of the window
- *
- * @example
- * const { width, height } = useWindowSize();
- *
- * return (
- *   <div>
- *     Window size: {width}x{height}
- *   </div>
- * );
- */
-export function useWindowSize(): WindowSize {
-  const [windowSize, setWindowSize] = useState<WindowSize>({
-    height: undefined,
-    width: undefined,
-  });
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize({
-        height: window.innerHeight,
-        width: window.innerWidth,
-      });
-    };
-
-    // Call once on mount
-    handleResize();
-
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  return windowSize;
-}
-`,
-};
 export function getHookTemplate(hookName) {
     const template = templates[hookName];
     if (!template) {
@@ -1433,4 +9,11 @@ export function getHookTemplate(hookName) {
     }
     return template;
 }
+export function getHookTestTemplate(hookName) {
+    const template = templates[`${hookName}_test`];
+    if (!template) {
+        throw new Error(`Test template for hook "${hookName}" not found`);
+    }
+    return template;
+}
 //# sourceMappingURL=get-hook-template.js.map