@boxcustodia/library 2.0.0-alpha.18 → 2.0.0-alpha.19

package/src/hooks/index.ts

@@ -1,27 +1,27 @@
 export { useControllableState } from "@radix-ui/react-use-controllable-state";
-export * from "./useArray";
-export * from "./useAsync";
-export * from "./useClickOutside";
+export * from "./use-array";
+export * from "./use-async";
+export * from "./use-click-outside";
 export * from "./use-clipboard";
-export * from "./useDebounceCallback";
-export * from "./useDebounceValue";
-export * from "./useDisclosure";
+export * from "./use-debounce-callback";
+export * from "./use-debounce-value";
+export * from "./use-disclosure";
 export * from "./use-document-title";
-export * from "./useEventListener";
-export * from "./useFocusTrap";
-export * from "./useHotkey";
+export * from "./use-event-listener";
+export * from "./use-focus-trap";
+export * from "./use-hotkey";
 export * from "./use-hover";
-export * from "./useIsVisible";
-export * from "./useLocalStorage";
-export * from "./useMediaQuery";
-export * from "./useMemoizedFn";
-export * from "./useMutation";
-export * from "./useObject";
+export * from "./use-is-visible";
+export * from "./use-local-storage";
+export * from "./use-media-query";
+export * from "./use-memoized-fn";
+export * from "./use-mutation";
+export * from "./use-object";
 export * from "./use-on-mount";
-export * from "./usePagination";
-export * from "./usePortal";
-export * from "./usePreventCloseWindow";
-export * from "./useRangePagination";
-export * from "./useSelection";
-export * from "./useStep";
-export * from "./useToggle";
+export * from "./use-pagination";
+export * from "./use-portal";
+export * from "./use-prevent-close-window";
+export * from "./use-range-pagination";
+export * from "./use-selection";
+export * from "./use-step";
+export * from "./use-toggle";

package/src/hooks/internal/index.ts

@@ -0,0 +1,2 @@
+export { isBrowser } from "./is-browser";
+export { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";

package/src/hooks/internal/is-browser.ts

@@ -0,0 +1 @@
+export const isBrowser = typeof window !== "undefined";

package/src/hooks/internal/use-isomorphic-layout-effect.ts

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "./is-browser";
+
+export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;

package/src/hooks/use-array/index.ts

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

package/src/hooks/{useArray/__doc__/useArray.stories.tsx → use-array/use-array.stories.tsx}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react-vite";
 import { Trash } from "lucide-react";
-import { Button } from "../../../components";
-import useArray from "../useArray";
+import { Button } from "../../components";
+import { useArray } from "../use-array";
 
 /**
  * Hook que facilita el manejo de estado de una lista

package/src/hooks/{useArray/__test__/useArray.test.tsx → use-array/use-array.test.tsx}

@@ -1,6 +1,6 @@
 import { act, renderHook } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import useArray from "../useArray";
+import { useArray } from "../use-array";
 
 describe("useArray hook", () => {
   it("should initialize with default value", () => {
@@ -85,4 +85,28 @@ describe("useArray hook", () => {
 
     expect(result.current[0]).toEqual(["First", "Updated", "Third"]);
   });
+
+  it("pop removes last item", () => {
+    const { result } = renderHook(() => useArray(["a", "b", "c"]));
+    act(() => result.current[1].pop());
+    expect(result.current[0]).toEqual(["a", "b"]);
+  });
+
+  it("set replaces entire list", () => {
+    const { result } = renderHook(() => useArray(["a", "b"]));
+    act(() => result.current[1].set(["x", "y", "z"]));
+    expect(result.current[0]).toEqual(["x", "y", "z"]);
+  });
+
+  it("update with function callback transforms matched item", () => {
+    const { result } = renderHook(() => useArray([1, 2, 3]));
+    act(() => result.current[1].update((n) => n === 2, (n) => n * 10));
+    expect(result.current[0]).toEqual([1, 20, 3]);
+  });
+
+  it("update does nothing when predicate matches nothing", () => {
+    const { result } = renderHook(() => useArray([1, 2, 3]));
+    act(() => result.current[1].update((n) => n === 99, 0));
+    expect(result.current[0]).toEqual([1, 2, 3]);
+  });
 });

package/src/hooks/{useArray/useArray.ts → use-array/use-array.ts}

@@ -1,7 +1,6 @@
-import { findIndex, isFunction, ListIterateeCustom } from "lodash";
 import { useState } from "react";
 
-function useArray<T>(defaultProp: T[]) {
+export function useArray<T>(defaultProp: T[]) {
   const [list = [], setList] = useState(defaultProp);
 
   const insertAt = (index: number, item: T) => {
@@ -45,14 +44,14 @@ function useArray<T>(defaultProp: T[]) {
   };
 
   const update = (
-    predicate: ListIterateeCustom<T, boolean>,
+    predicate: (item: T) => boolean,
     newItem: T | ((item: T) => T),
   ) => {
     setList((prevList = []) => {
       const newList = [...prevList];
-      const index = findIndex(newList, predicate);
+      const index = newList.findIndex(predicate);
       if (index === -1) return newList;
-      newList[index] = isFunction(newItem) ? newItem(newList[index]) : newItem;
+      newList[index] = typeof newItem === "function" ? (newItem as (item: T) => T)(newList[index]) : newItem;
       return newList;
     });
   };
@@ -73,4 +72,3 @@ function useArray<T>(defaultProp: T[]) {
   ] as const;
 }
 
-export default useArray;

package/src/hooks/use-async/index.ts

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

package/src/hooks/{useAsync/__doc__/useAsync.stories.tsx → use-async/use-async.stories.tsx}

@@ -1,11 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react-vite";
-import { isUndefined } from "lodash";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useState } from "react";
-import { Button, createToastManager, Input } from "../../../components";
-import { LibraryProvider } from "../../../providers/library-provider";
-import useDebouncedValue from "../../useDebounceValue/useDebouncedValue";
-import useAsync from "../useAsync";
+import { Button, createToastManager, Input } from "../../components";
+import { LibraryProvider } from "../../providers/library-provider";
+import { useDebouncedValue } from "../use-debounce-value/use-debounced-value";
+import { useAsync } from "../use-async";
 
 const toastManager = createToastManager();
 
@@ -56,7 +55,7 @@ export const Basic = {
 };
 
 const fetchPokemonById = async (id: number) => {
-  if (isUndefined(id)) throw new Error("id is required");
+  if (id === undefined) throw new Error("id is required");
   const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
   if (!response.ok) throw new Error("Pokemon not found");
   return response.json();

package/src/hooks/{useAsync/__test__/useAsync.test.tsx → use-async/use-async.test.tsx}

@@ -1,6 +1,6 @@
 import { renderHook, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import useAsync from "../useAsync";
+import { useAsync } from "../use-async";
 
 const mockFetchSuccess = async (data: any) => {
   return new Promise((resolve) => setTimeout(() => resolve(data), 100));

package/src/hooks/{useAsync/useAsync.ts → use-async/use-async.ts}

@@ -18,7 +18,7 @@ interface Props<T> extends UseAsyncOptions<T> {
   dependencies?: DependencyList;
 }
 
-function useAsync<T>({
+export function useAsync<T>({
   fn,
   dependencies = [],
   onError,
@@ -55,4 +55,3 @@ function useAsync<T>({
   return { loading, error, data, refetch: fnMemoized };
 }
 
-export default useAsync;

package/src/hooks/use-click-outside/index.ts

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

package/src/hooks/{useClickOutside/__doc__/useClickOutside.stories.tsx → use-click-outside/use-click-outside.stories.tsx}

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react-vite";
 import { useState } from "react";
-import { Button } from "../../../components";
-import useClickOutside from "../useClickOutside";
+import { Button } from "../../components";
+import { useClickOutside } from "../use-click-outside";
 
 const meta: Meta = {
   title: "hooks/useClickOutside",

package/src/hooks/use-click-outside/use-click-outside.test.tsx

@@ -0,0 +1,39 @@
+import { act, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useClickOutside } from "../use-click-outside";
+
+function Component({ onOutside, watch }: { onOutside: () => void; watch?: boolean }) {
+  const ref = useClickOutside<HTMLDivElement>(onOutside, watch);
+  return (
+    <div data-testid="wrapper">
+      <div ref={ref} data-testid="target" />
+    </div>
+  );
+}
+
+function fireMousedown(el: Element) {
+  el.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+}
+
+describe("useClickOutside", () => {
+  it("calls callback when clicking outside the ref element", () => {
+    const fn = vi.fn();
+    render(<Component onOutside={fn} />);
+    act(() => fireMousedown(screen.getByTestId("wrapper")));
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it("does not call callback when clicking inside the ref element", () => {
+    const fn = vi.fn();
+    render(<Component onOutside={fn} />);
+    act(() => fireMousedown(screen.getByTestId("target")));
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it("does not attach listener when watch=false", () => {
+    const fn = vi.fn();
+    render(<Component onOutside={fn} watch={false} />);
+    act(() => fireMousedown(screen.getByTestId("wrapper")));
+    expect(fn).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/{useClickOutside/useClickOutside.ts → use-click-outside/use-click-outside.ts}

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-const useClickOutside = <T extends HTMLElement = HTMLElement>(
+export const useClickOutside = <T extends HTMLElement = HTMLElement>(
   callback: () => void,
   watch: boolean = true,
 ) => {
@@ -23,4 +23,3 @@ const useClickOutside = <T extends HTMLElement = HTMLElement>(
   return ref;
 };
 
-export default useClickOutside;

package/src/hooks/use-clipboard/use-clipboard.test.tsx

@@ -69,6 +69,37 @@ describe("useClipboard", () => {
     expect(result.current.copied).toBe(false);
   });
 
+  it("resets copied to false when a later copy fails", async () => {
+    const failure = new Error("denied");
+    const { result } = renderHook(() => useClipboard());
+
+    act(() => result.current.copy("first"));
+    await waitFor(() => expect(result.current.copied).toBe(true));
+
+    writeText.mockRejectedValueOnce(failure);
+    act(() => result.current.copy("second"));
+
+    await waitFor(() => expect(result.current.error).toBe(failure));
+    expect(result.current.copied).toBe(false);
+  });
+
+  it("resets copied to false when clipboard becomes unavailable", async () => {
+    const { result } = renderHook(() => useClipboard());
+
+    act(() => result.current.copy("first"));
+    await waitFor(() => expect(result.current.copied).toBe(true));
+
+    Object.defineProperty(navigator, "clipboard", {
+      value: undefined,
+      configurable: true,
+    });
+
+    act(() => result.current.copy("second"));
+
+    expect(result.current.copied).toBe(false);
+    expect(result.current.error?.message).toMatch(/not supported/);
+  });
+
   it("clears copied and error on reset()", async () => {
     const { result } = renderHook(() => useClipboard());
 

package/src/hooks/use-clipboard/use-clipboard.tsx

@@ -42,6 +42,8 @@ export function useClipboard(
 
   const copy = (value: string) => {
     if (!navigator.clipboard?.writeText) {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+      setCopied(false);
       setError(new Error("useClipboard: navigator.clipboard is not supported"));
       return;
     }
@@ -51,7 +53,11 @@ export function useClipboard(
         setError(null);
         handleCopyResult(true);
       })
-      .catch((err: Error) => setError(err));
+      .catch((err: Error) => {
+        if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+        setCopied(false);
+        setError(err);
+      });
   };
 
   const reset = () => {

package/src/hooks/use-debounce-callback/index.ts

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

package/src/hooks/{useDebounceCallback/__doc__/useDebouncedCallback.stories.tsx → use-debounce-callback/use-debounced-callback.stories.tsx}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react-vite";
-import { Input } from "../../../components";
-import { createToastManager, ToastProvider } from "../../../components/toast";
-import { useDebouncedCallback } from "../../useDebounceCallback";
+import { Input } from "../../components";
+import { createToastManager, ToastProvider } from "../../components/toast";
+import { useDebouncedCallback } from "./use-debounced-callback";
 
 const toastManager = createToastManager();
 

package/src/hooks/use-debounce-callback/use-debounced-callback.test.ts

@@ -0,0 +1,88 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDebouncedCallback } from "./use-debounced-callback";
+
+describe("useDebouncedCallback", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("returns a stable function reference", () => {
+    const cb = vi.fn();
+    const { result, rerender } = renderHook(() =>
+      useDebouncedCallback(cb, 200),
+    );
+    const first = result.current;
+    rerender();
+    expect(result.current).toBe(first);
+  });
+
+  it("does not call callback before delay elapses", () => {
+    const cb = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(cb, 300));
+
+    act(() => {
+      result.current("a");
+    });
+
+    vi.advanceTimersByTime(299);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it("calls callback after delay with correct args", () => {
+    const cb = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(cb, 300));
+
+    act(() => {
+      result.current("hello", 42);
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(cb).toHaveBeenCalledOnce();
+    expect(cb).toHaveBeenCalledWith("hello", 42);
+  });
+
+  it("resets the timer on consecutive calls (debounce behavior)", () => {
+    const cb = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(cb, 300));
+
+    act(() => {
+      result.current("first");
+      vi.advanceTimersByTime(200);
+      result.current("second");
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(cb).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(cb).toHaveBeenCalledOnce();
+    expect(cb).toHaveBeenCalledWith("second");
+  });
+
+  it("invokes callback multiple times when enough time passes between calls", () => {
+    const cb = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(cb, 100));
+
+    act(() => {
+      result.current("a");
+      vi.advanceTimersByTime(200);
+      result.current("b");
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(cb).toHaveBeenCalledTimes(2);
+    expect(cb).toHaveBeenNthCalledWith(1, "a");
+    expect(cb).toHaveBeenNthCalledWith(2, "b");
+  });
+});

package/src/hooks/{useDebounceCallback/useDebouncedCallback.ts → use-debounce-callback/use-debounced-callback.ts}

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
 
-function useDebouncedCallback<T extends (...args: any[]) => any>(
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
   callback: T,
   delay: number,
 ): (...args: Parameters<T>) => void {
@@ -20,4 +20,3 @@ function useDebouncedCallback<T extends (...args: any[]) => any>(
   );
 }
 
-export default useDebouncedCallback;

package/src/hooks/use-debounce-value/index.ts

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

package/src/hooks/{useDebounceValue/__doc__/useDebouncedValue.stories.tsx → use-debounce-value/use-debounced-value.stories.tsx}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
-import { Input } from "../../../components";
-import { useDebouncedValue } from "../../useDebounceValue";
+import { Input } from "../../components";
+import { useDebouncedValue } from "./use-debounced-value";
 
 const meta: Meta = {
   title: "hooks/useDebouncedValue",

package/src/hooks/use-debounce-value/use-debounced-value.test.ts

@@ -0,0 +1,101 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDebouncedValue } from "./use-debounced-value";
+
+describe("useDebouncedValue", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("returns initial value immediately", () => {
+    const { result } = renderHook(() => useDebouncedValue("init", 300));
+    expect(result.current).toBe("init");
+  });
+
+  it("does not update before delay elapses", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useDebouncedValue(value, 300),
+      { initialProps: { value: "a" } },
+    );
+
+    rerender({ value: "b" });
+    act(() => {
+      vi.advanceTimersByTime(299);
+    });
+
+    expect(result.current).toBe("a");
+  });
+
+  it("updates after delay elapses", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useDebouncedValue(value, 300),
+      { initialProps: { value: "a" } },
+    );
+
+    rerender({ value: "b" });
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(result.current).toBe("b");
+  });
+
+  it("cancels pending update when value changes again before delay", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useDebouncedValue(value, 300),
+      { initialProps: { value: "a" } },
+    );
+
+    rerender({ value: "b" });
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    rerender({ value: "c" });
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(result.current).toBe("a");
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(result.current).toBe("c");
+  });
+
+  it("works with non-string values", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useDebouncedValue(value, 100),
+      { initialProps: { value: 0 } },
+    );
+
+    rerender({ value: 42 });
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(result.current).toBe(42);
+  });
+
+  it("clears timeout on unmount (no state update after unmount)", () => {
+    const { rerender, unmount } = renderHook(
+      ({ value }) => useDebouncedValue(value, 300),
+      { initialProps: { value: "a" } },
+    );
+
+    rerender({ value: "b" });
+    unmount();
+
+    expect(() => {
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+    }).not.toThrow();
+  });
+});

package/src/hooks/{useDebounceValue/useDebouncedValue.ts → use-debounce-value/use-debounced-value.ts}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-function useDebouncedValue<T>(value: T, delay: number): T {
+export function useDebouncedValue<T>(value: T, delay: number): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   useEffect(() => {
@@ -14,4 +14,3 @@ function useDebouncedValue<T>(value: T, delay: number): T {
   return debouncedValue;
 }
 
-export default useDebouncedValue;

package/src/hooks/use-disclosure/index.ts

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

package/src/hooks/{useDisclosure/__doc__/useDisclosure.stories.tsx → use-disclosure/use-disclosure.stories.tsx}

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react-vite";
-import { Button } from "../../../components";
-import { cn } from "../../../lib";
-import useDisclosure from "../useDisclosure";
+import { Button } from "../../components";
+import { cn } from "../../lib";
+import { useDisclosure } from "../use-disclosure";
 
 /**
  * Hook que facilita el manejo de un estado booleano. Provee métodos para abrir, cerrar y toggle el estado

package/src/hooks/use-disclosure/use-disclosure.test.ts

@@ -0,0 +1,72 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useDisclosure } from "../use-disclosure";
+
+describe("useDisclosure", () => {
+  it("starts closed by default", () => {
+    const { result } = renderHook(() => useDisclosure());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("starts open when initialState=true", () => {
+    const { result } = renderHook(() => useDisclosure(true));
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("open() opens disclosure", () => {
+    const { result } = renderHook(() => useDisclosure());
+    act(() => result.current[1].open());
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("open() is idempotent when already open", () => {
+    const { result } = renderHook(() => useDisclosure(true));
+    act(() => result.current[1].open());
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("close() closes disclosure", () => {
+    const { result } = renderHook(() => useDisclosure(true));
+    act(() => result.current[1].close());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("close() is a no-op when already closed", () => {
+    const { result } = renderHook(() => useDisclosure(false));
+    act(() => result.current[1].close());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("toggle() opens when closed", () => {
+    const { result } = renderHook(() => useDisclosure());
+    act(() => result.current[1].toggle());
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("toggle() closes when open", () => {
+    const { result } = renderHook(() => useDisclosure(true));
+    act(() => result.current[1].toggle());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("calls onOpen callback when opening", () => {
+    const onOpen = vi.fn();
+    const { result } = renderHook(() => useDisclosure(false, { onOpen }));
+    act(() => result.current[1].open());
+    expect(onOpen).toHaveBeenCalledOnce();
+  });
+
+  it("calls onClose callback when closing", () => {
+    const onClose = vi.fn();
+    const { result } = renderHook(() => useDisclosure(true, { onClose }));
+    act(() => result.current[1].close());
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("does not call onOpen when already open", () => {
+    const onOpen = vi.fn();
+    const { result } = renderHook(() => useDisclosure(true, { onOpen }));
+    act(() => result.current[1].open());
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+});