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

package/src/hooks/{usePagination/usePagination.tsx → use-pagination/use-pagination.tsx}

@@ -31,7 +31,7 @@ export type usePaginationProps = {
   onChange?: (value: { currentPage: number; pageSize: number }) => void;
 };
 
-function usePagination({
+export function usePagination({
   totalItems,
   pageSize,
   currentPage: currentPageProp,
@@ -83,4 +83,3 @@ function usePagination({
   };
 }
 
-export default usePagination;

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

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

package/src/hooks/{usePortal/__doc__/usePortal.stories.tsx → use-portal/use-portal.stories.tsx}

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react-vite";
-import usePortal from "../usePortal";
+import { usePortal } from "../use-portal";
 
 const meta: Meta = {
   title: "hooks/usePortal",

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

@@ -0,0 +1,77 @@
+import { render, renderHook, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { usePortal } from "../use-portal";
+
+describe("usePortal hook", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("should be defined", () => {
+    const { result } = renderHook(() => usePortal("id"));
+    expect(result.current).toBeDefined();
+  });
+
+  it("should render element", () => {
+    const Component = () => {
+      const { render } = usePortal("id2");
+      return render(<div>Hello World</div>);
+    };
+
+    render(<Component />);
+    expect(screen.getByText("Hello World")).toBeInTheDocument();
+  });
+
+  it("removes the wrapper from the DOM when the hook unmounts", () => {
+    const Component = () => {
+      const { render } = usePortal("created-by-hook");
+      return render(<span>portal child</span>);
+    };
+
+    const view = render(<Component />);
+    expect(document.getElementById("created-by-hook")).not.toBeNull();
+
+    view.unmount();
+    expect(document.getElementById("created-by-hook")).toBeNull();
+  });
+
+  it("does not remove a wrapper that already existed in the DOM", () => {
+    const preExisting = document.createElement("div");
+    preExisting.id = "pre-existing";
+    preExisting.textContent = "external";
+    document.body.appendChild(preExisting);
+
+    const Component = () => {
+      const { render } = usePortal("pre-existing");
+      return render(<span>child</span>);
+    };
+
+    const view = render(<Component />);
+    view.unmount();
+
+    expect(document.getElementById("pre-existing")).toBe(preExisting);
+    expect(preExisting.textContent).toContain("external");
+  });
+
+  it("shares a wrapper across multiple instances and removes it only after the last unmount", () => {
+    const A = () => {
+      const { render } = usePortal("shared");
+      return render(<span>a</span>);
+    };
+    const B = () => {
+      const { render } = usePortal("shared");
+      return render(<span>b</span>);
+    };
+
+    const viewA = render(<A />);
+    const viewB = render(<B />);
+
+    expect(document.getElementById("shared")).not.toBeNull();
+
+    viewA.unmount();
+    expect(document.getElementById("shared")).not.toBeNull();
+
+    viewB.unmount();
+    expect(document.getElementById("shared")).toBeNull();
+  });
+});

package/src/hooks/use-portal/use-portal.ts

@@ -0,0 +1,59 @@
+import type { ReactNode, ReactPortal } from "react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+type PortalEntry = {
+  node: HTMLElement;
+  count: number;
+  createdByHook: boolean;
+};
+
+const portals = new Map<string, PortalEntry>();
+
+function acquire(id: string): HTMLElement {
+  const existing = portals.get(id);
+  if (existing) {
+    existing.count += 1;
+    return existing.node;
+  }
+
+  const preExisting = document.getElementById(id);
+  if (preExisting) {
+    portals.set(id, { node: preExisting, count: 1, createdByHook: false });
+    return preExisting;
+  }
+
+  const node = document.createElement("div");
+  node.id = id;
+  document.body.appendChild(node);
+  portals.set(id, { node, count: 1, createdByHook: true });
+  return node;
+}
+
+function release(id: string) {
+  const entry = portals.get(id);
+  if (!entry) return;
+  entry.count -= 1;
+  if (entry.count > 0) return;
+  if (entry.createdByHook && entry.node.parentNode) {
+    entry.node.parentNode.removeChild(entry.node);
+  }
+  portals.delete(id);
+}
+
+export function usePortal(id: string) {
+  const [wrapper, setWrapper] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const node = acquire(id);
+    setWrapper(node);
+    return () => {
+      release(id);
+    };
+  }, [id]);
+
+  return {
+    render: (children: ReactNode): ReactPortal | null =>
+      wrapper ? createPortal(children, wrapper) : null,
+  };
+}

package/src/hooks/use-prevent-close-window/index.ts

@@ -0,0 +1 @@
+export * from "./use-prevent-close-window";

package/src/hooks/{usePreventCloseWindow/__doc__/usePreventCloseWindow.stories.tsx → use-prevent-close-window/use-prevent-close-window.stories.tsx}

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react-vite";
-import usePreventCloseWindow from "../usePreventCloseWindow";
+import { usePreventCloseWindow } from "./use-prevent-close-window";
 
 /**
  * Hook que permite prevenir que se cierre la ventana (muestra mensaje de aviso)

package/src/hooks/use-prevent-close-window/use-prevent-close-window.test.ts

@@ -0,0 +1,79 @@
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import usePreventCloseWindow from "./use-prevent-close-window";
+
+describe("usePreventCloseWindow", () => {
+  let addSpy: ReturnType<typeof vi.spyOn>;
+  let removeSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    addSpy = vi.spyOn(window, "addEventListener");
+    removeSpy = vi.spyOn(window, "removeEventListener");
+  });
+
+  afterEach(() => {
+    addSpy.mockRestore();
+    removeSpy.mockRestore();
+  });
+
+  it("registers beforeunload listener on mount", () => {
+    renderHook(() => usePreventCloseWindow({ shouldPrevent: true }));
+    expect(addSpy).toHaveBeenCalledWith("beforeunload", expect.any(Function));
+  });
+
+  it("removes beforeunload listener on unmount", () => {
+    const { unmount } = renderHook(() =>
+      usePreventCloseWindow({ shouldPrevent: true }),
+    );
+    unmount();
+    expect(removeSpy).toHaveBeenCalledWith(
+      "beforeunload",
+      expect.any(Function),
+    );
+  });
+
+  it("calls event.preventDefault when shouldPrevent is true", () => {
+    renderHook(() => usePreventCloseWindow({ shouldPrevent: true }));
+
+    const handler = addSpy.mock.calls.find(
+      ([event]: [string, EventListenerOrEventListenerObject]) =>
+        event === "beforeunload",
+    )?.[1] as EventListener;
+
+    const event = new Event("beforeunload");
+    const preventSpy = vi.spyOn(event, "preventDefault");
+    handler(event);
+
+    expect(preventSpy).toHaveBeenCalled();
+  });
+
+  it("does not call event.preventDefault when shouldPrevent is false", () => {
+    renderHook(() => usePreventCloseWindow({ shouldPrevent: false }));
+
+    const handler = addSpy.mock.calls.find(
+      ([event]: [string, EventListenerOrEventListenerObject]) =>
+        event === "beforeunload",
+    )?.[1] as EventListener;
+
+    const event = new Event("beforeunload");
+    const preventSpy = vi.spyOn(event, "preventDefault");
+    handler(event);
+
+    expect(preventSpy).not.toHaveBeenCalled();
+  });
+
+  it("re-registers listener when shouldPrevent changes", () => {
+    const { rerender } = renderHook(
+      ({ shouldPrevent }) => usePreventCloseWindow({ shouldPrevent }),
+      { initialProps: { shouldPrevent: false } },
+    );
+
+    rerender({ shouldPrevent: true });
+
+    expect(removeSpy).toHaveBeenCalledWith(
+      "beforeunload",
+      expect.any(Function),
+    );
+    expect(addSpy).toHaveBeenCalledTimes(2);
+  });
+});

package/src/hooks/{usePreventCloseWindow/usePreventCloseWindow.ts → use-prevent-close-window/use-prevent-close-window.ts}

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-interface UsePreventUnloadProps {
+interface UsePreventCloseWindowProps {
   /**
    * Propiedad que determina si la ventana se puede cerrar o no
    */
@@ -12,10 +12,10 @@ interface UsePreventUnloadProps {
   message?: string;
 }
 
-function usePreventClose({
+export function usePreventCloseWindow({
   shouldPrevent,
   message = "Es posible que no se guarden los cambios hayas hecho.",
-}: UsePreventUnloadProps) {
+}: UsePreventCloseWindowProps) {
   const handleBeforeUnload = (event: BeforeUnloadEvent): void | string => {
     if (!shouldPrevent) return;
 
@@ -30,4 +30,4 @@ function usePreventClose({
   }, [message, shouldPrevent]);
 }
 
-export default usePreventClose;
+export default usePreventCloseWindow;

package/src/hooks/use-range-pagination/index.ts

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

package/src/hooks/{useRangePagination/__test__/useRangePagination.test.tsx → use-range-pagination/use-range-pagination.test.tsx}

@@ -1,6 +1,6 @@
 import { renderHook } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import useRangePagination, { DOTS } from "../useRangePagination";
+import { useRangePagination, DOTS } from "../use-range-pagination";
 
 describe("usePagination hook", () => {
   it("should be defined", () => {

package/src/hooks/{useRangePagination/useRangePagination.tsx → use-range-pagination/use-range-pagination.tsx}

@@ -1,5 +1,7 @@
-import { range } from "lodash";
 import { useMemo } from "react";
+
+const range = (start: number, end: number): number[] =>
+  Array.from({ length: end - start }, (_, i) => i + start);
 import { usePagination, type usePaginationProps } from "../../hooks";
 
 export const DOTS = "...";
@@ -11,7 +13,7 @@ export type useRangePaginationProps = {
   siblingCount?: number;
 } & usePaginationProps;
 
-const useRangePagination = ({
+export const useRangePagination = ({
   siblingCount = 1,
   ...paginationProps
 }: useRangePaginationProps) => {
@@ -69,4 +71,3 @@ const useRangePagination = ({
   };
 };
 
-export default useRangePagination;

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

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

package/src/hooks/{useSelection/__doc__/useSelection.stories.tsx → use-selection/use-selection.stories.tsx}

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react-vite";
 import { Trash } from "lucide-react";
 import { useMemo, useState } from "react";
-import { Button, Checkbox } from "../../../components";
-import { cn } from "../../../lib";
-import useSelection from "../useSelection";
+import { Button, Checkbox } from "../../components";
+import { cn } from "../../lib";
+import { useSelection } from "../use-selection";
 
 /**
  * Gestión de la selección de elementos en una lista.

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

@@ -0,0 +1,79 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useSelection } from "../use-selection";
+
+describe("useSelection hook", () => {
+  it("initial state: isAllSelected=false, isNoneSelected=true", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    expect(result.current.isAllSelected).toBe(false);
+    expect(result.current.isNoneSelected).toBe(true);
+    expect(result.current.isSomeSelected).toBe(false);
+  });
+
+  it("select adds item to selected array", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.select(2));
+    expect(result.current.isSelected(2)).toBe(true);
+    expect(result.current.selected).toEqual([2]);
+  });
+
+  it("unselect removes item from selection", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.select(2));
+    expect(result.current.isSelected(2)).toBe(true);
+    act(() => result.current.unselect(2));
+    expect(result.current.isSelected(2)).toBe(false);
+    expect(result.current.selected).toEqual([]);
+  });
+
+  it("toggle adds unselected item", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.toggle(1));
+    expect(result.current.isSelected(1)).toBe(true);
+  });
+
+  it("toggle removes already-selected item", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.select(1));
+    act(() => result.current.toggle(1));
+    expect(result.current.isSelected(1)).toBe(false);
+  });
+
+  it("setSelected replaces selection with given items", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.setSelected([1, 3]));
+    expect(result.current.isSelected(1)).toBe(true);
+    expect(result.current.isSelected(2)).toBe(false);
+    expect(result.current.isSelected(3)).toBe(true);
+  });
+
+  it("toggleAll selects all when none selected", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.toggleAll());
+    expect(result.current.isAllSelected).toBe(true);
+    expect(result.current.isNoneSelected).toBe(false);
+  });
+
+  it("toggleAll deselects all when all selected", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.toggleAll());
+    act(() => result.current.toggleAll());
+    expect(result.current.isAllSelected).toBe(false);
+    expect(result.current.isNoneSelected).toBe(true);
+  });
+
+  it("isSomeSelected is true when partial selection", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.select(1));
+    expect(result.current.isSomeSelected).toBe(true);
+    expect(result.current.isAllSelected).toBe(false);
+  });
+
+  it("clear removes all selections", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.toggleAll());
+    act(() => result.current.clear());
+    expect(result.current.isNoneSelected).toBe(true);
+    expect(result.current.selected).toEqual([]);
+  });
+});

package/src/hooks/{useSelection/useSelection.ts → use-selection/use-selection.ts}

@@ -62,7 +62,7 @@ type Return<T> = {
    */
   clear: () => void;
 };
-function useSelection<T>(items: T[]): Return<T> {
+export function useSelection<T>(items: T[]): Return<T> {
   const [selected, setSelected] = useState(new Set<T>());
 
   const isSelected = useCallback((item: T) => selected.has(item), [selected]);
@@ -118,4 +118,3 @@ function useSelection<T>(items: T[]): Return<T> {
   };
 }
 
-export default useSelection;

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

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

package/src/hooks/{useStep/__doc__/useStep.stories.tsx → use-step/use-step.stories.tsx}

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react-vite";
-import { Button } from "../../../components";
-import { cn } from "../../../lib";
-import useStep from "../useStep";
+import { Button } from "../../components";
+import { cn } from "../../lib";
+import { useStep } from "../use-step";
 
 /**
  * Hook que recibe un array de elementos `T` y facita el manejo de vistas/formularios con múltiples pasos

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

@@ -0,0 +1,73 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useStep } from "../../hooks";
+
+describe("useStep hook", () => {
+  const steps = ["step1", "step2", "step3"];
+
+  it("starts at index 0 with isFirstStep=true", () => {
+    const { result } = renderHook(() => useStep(steps));
+    expect(result.current.currentStepIndex).toBe(0);
+    expect(result.current.step).toBe("step1");
+    expect(result.current.isFirstStep).toBe(true);
+    expect(result.current.isLastStep).toBe(false);
+    expect(result.current.steps).toBe(steps);
+  });
+
+  it("next advances to next step", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.next());
+    expect(result.current.currentStepIndex).toBe(1);
+    expect(result.current.step).toBe("step2");
+    expect(result.current.isFirstStep).toBe(false);
+  });
+
+  it("back returns to previous step", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.next());
+    act(() => result.current.back());
+    expect(result.current.currentStepIndex).toBe(0);
+    expect(result.current.isFirstStep).toBe(true);
+  });
+
+  it("next does not advance past last step", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.goTo(2));
+    expect(result.current.isLastStep).toBe(true);
+    act(() => result.current.next());
+    expect(result.current.currentStepIndex).toBe(2);
+  });
+
+  it("back does not go before first step", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.back());
+    expect(result.current.currentStepIndex).toBe(0);
+  });
+
+  it("goTo jumps to specified index", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.goTo(2));
+    expect(result.current.currentStepIndex).toBe(2);
+    expect(result.current.isLastStep).toBe(true);
+  });
+
+  it("findAndGo jumps to step matching predicate", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.findAndGo((s) => s === "step3"));
+    expect(result.current.currentStepIndex).toBe(2);
+  });
+
+  it("findAndGo does nothing when predicate matches nothing", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.findAndGo((s) => s === "nonexistent"));
+    expect(result.current.currentStepIndex).toBe(0);
+  });
+
+  it("respects amountSteps override for boundary checks", () => {
+    const { result } = renderHook(() => useStep(steps, 2));
+    act(() => result.current.goTo(1));
+    expect(result.current.isLastStep).toBe(true);
+    act(() => result.current.next());
+    expect(result.current.currentStepIndex).toBe(1);
+  });
+});

package/src/hooks/{useStep/useStep.ts → use-step/use-step.ts}

@@ -1,4 +1,3 @@
-import { findIndex, ListIterateeCustom } from "lodash";
 import { ReactNode, useState } from "react";
 
 interface Return<T = ReactNode> {
@@ -10,10 +9,10 @@ interface Return<T = ReactNode> {
   goTo: (i: number) => void;
   next: () => void;
   back: () => void;
-  findAndGo: (callback: ListIterateeCustom<T, boolean>) => void;
+  findAndGo: (predicate: (item: T) => boolean) => void;
 }
 
-function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T> {
+export function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T> {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const length = amountSteps ?? steps.length;
 
@@ -35,8 +34,8 @@ function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T> {
     setCurrentStepIndex(i);
   };
 
-  const findAndGo = (t: ListIterateeCustom<T, boolean>): void => {
-    const stepIndex = findIndex(steps, t);
+  const findAndGo = (predicate: (item: T) => boolean): void => {
+    const stepIndex = steps.findIndex(predicate);
     if (stepIndex === -1) return;
     goTo(stepIndex);
   };
@@ -54,4 +53,3 @@ function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T> {
   };
 }
 
-export default useStep;

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

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

package/src/hooks/{useToggle/__doc__/useToggle.stories.tsx → use-toggle/use-toggle.stories.tsx}

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

package/src/hooks/{useToggle/__test__/useToggle.test.tsx → use-toggle/use-toggle.test.tsx}

@@ -1,6 +1,6 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import useToggle from "../useToggle";
+import { useToggle } from "../use-toggle";
 
 describe("useToggle hook", () => {
   it("should be defined", () => {
@@ -40,4 +40,25 @@ describe("useToggle hook", () => {
       expect(state).toBe(false);
     });
   });
+
+  it("should flip twice when called twice in the same tick", () => {
+    const { result } = renderHook(() => useToggle(false));
+
+    act(() => {
+      const [, toggle] = result.current;
+      toggle();
+      toggle();
+    });
+
+    expect(result.current[0]).toBe(false);
+
+    act(() => {
+      const [, toggle] = result.current;
+      toggle();
+      toggle();
+      toggle();
+    });
+
+    expect(result.current[0]).toBe(true);
+  });
 });

package/src/hooks/{useToggle/useToggle.ts → use-toggle/use-toggle.ts}

@@ -2,15 +2,13 @@ import { useState } from "react";
 
 type Return = [boolean, (newValue?: boolean) => void];
 
-function useToggle(initialValue = false): Return {
+export function useToggle(initialValue = false): Return {
   const [value, setValue] = useState<boolean>(initialValue);
 
   const toggle = (newValue?: boolean): void => {
-    const isUndefined = newValue === undefined;
-    setValue(isUndefined ? !value : newValue);
+    setValue((prev) => (newValue === undefined ? !prev : newValue));
   };
 
   return [value, toggle] as const;
 }
 
-export default useToggle;