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

package/src/hooks/use-on-mount/use-on-mount.test.tsx

@@ -0,0 +1,44 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useOnMount } from "./use-on-mount";
+
+describe("useOnMount", () => {
+  it("runs the callback once on mount", () => {
+    const fn = vi.fn();
+    renderHook(() => useOnMount(fn));
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not re-run on subsequent renders", () => {
+    const fn = vi.fn();
+    const { rerender } = renderHook(() => useOnMount(fn));
+    rerender();
+    rerender();
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not re-run when the callback identity changes", () => {
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+    const { rerender } = renderHook(({ cb }) => useOnMount(cb), {
+      initialProps: { cb: fn1 },
+    });
+    rerender({ cb: fn2 });
+    expect(fn1).toHaveBeenCalledTimes(1);
+    expect(fn2).not.toHaveBeenCalled();
+  });
+
+  it("runs the returned cleanup function on unmount", () => {
+    const cleanup = vi.fn();
+    const { unmount } = renderHook(() => useOnMount(() => cleanup));
+    expect(cleanup).not.toHaveBeenCalled();
+
+    unmount();
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not throw when the callback returns nothing", () => {
+    const { unmount } = renderHook(() => useOnMount(() => undefined));
+    expect(() => unmount()).not.toThrow();
+  });
+});

package/src/hooks/use-on-mount/use-on-mount.tsx

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+
+export type UseOnMountCallback = () => void | (() => void);
+
+export function useOnMount(callback: UseOnMountCallback): void {
+  const hasRunRef = useRef(false);
+
+  useEffect(() => {
+    if (hasRunRef.current) return;
+    hasRunRef.current = true;
+    return callback();
+  }, []);
+}

package/src/utils/form.tsx

@@ -44,10 +44,8 @@ export function useHookForm<T extends FieldValues = FieldValues>(
   schema: z.ZodType<T>,
   options?: Partial<UseFormProps<T>>,
 ): UseFormReturn<T> {
-  // @ts-expect-error RHF's UseFormReturn has 3 generics; narrowing to <T> is safe here.
   return rhfUseForm<T>({
     ...options,
-    // @ts-expect-error zodResolver returns Resolver<any, any, any>; incompatible with Resolver<T, any, T>.
     resolver: zodResolver(schema as any),
   });
 }

package/src/hooks/useClipboard/__doc__/useClipboard.stories.tsx

@@ -1,43 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "../../../components";
-import useClipboard from "../useClipboard";
-
-/**
- * Permite copiar texto al portapapeles del usuario. Devuelve el texto copiado actualmente y una función para copiar nuevo texto. Incluye manejo de compatibilidad y errores.
- */
-const meta: Meta = {
-  title: "hooks/useClipboard",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      source: { type: "code" },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  name: "Copia al portapapeles",
-  args: {
-    textoACopiar: "Hello world",
-  },
-  render: (args) => {
-    const [copiedText, copy] = useClipboard();
-    return (
-      <div className="space-y-2">
-        <pre className="rounded-md bg-slate-950 p-4 text-white">
-          <code className="block">
-            Texto copiado:{" "}
-            <span className="text-blue-300">
-              {JSON.stringify(copiedText, null, 2)}
-            </span>
-          </code>
-        </pre>
-
-        <Button onClick={() => copy(args.textoACopiar)}>Copy</Button>
-      </div>
-    );
-  },
-};

package/src/hooks/useClipboard/__test__/useClipboard.test.tsx

@@ -1,19 +0,0 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import useClipboard from "../useClipboard";
-
-describe("useClipboard", () => {
-  it("should be defined", () => {
-    expect(useClipboard).toBeDefined();
-  });
-
-  it("should copy to clipboard", () => {
-    const { result } = renderHook(useClipboard);
-    const [copiedValue, copy] = result.current;
-
-    copy("test");
-    waitFor(() => {
-      expect(copiedValue).toEqual("test");
-    });
-  });
-});

package/src/hooks/useClipboard/index.ts

@@ -1 +0,0 @@
-export { default as useClipboard } from "./useClipboard";

package/src/hooks/useClipboard/useClipboard.tsx

@@ -1,28 +0,0 @@
-import { useCallback, useState } from "react";
-
-type CopiedValue = string | null;
-type CopyFunction = (text: string) => Promise<boolean>;
-
-function useCopyToClipboard(): [CopiedValue, CopyFunction] {
-  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
-
-  const copy = useCallback(async (text: string) => {
-    if (!navigator?.clipboard) {
-      return false;
-    }
-
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedText(text);
-      return true;
-    } catch (error) {
-      console.error(error);
-      setCopiedText(null);
-      return false;
-    }
-  }, []);
-
-  return [copiedText, copy];
-}
-
-export default useCopyToClipboard;

package/src/hooks/useDocumentTitle/__doc__/useDocumentTitle.stories.tsx

@@ -1,26 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { Button, Input } from "../../../components";
-import useDocumentTitle from "../useDocumentTitle";
-
-const meta: Meta = {
-  title: "hooks/useDocumentTitle",
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [title, setTitle] = useState("");
-    useDocumentTitle(title);
-
-    return (
-      <div className="space-y-2">
-        <Input onValueChange={setTitle} value={title} />
-        <Button onClick={() => setTitle(title)}>Set document title</Button>
-      </div>
-    );
-  },
-};

package/src/hooks/useDocumentTitle/index.ts

@@ -1 +0,0 @@
-export { default as useDocumentTitle } from "./useDocumentTitle";

package/src/hooks/useDocumentTitle/useDocumentTitle.tsx

@@ -1,11 +0,0 @@
-import { useEffect } from "react";
-
-function useDocumentTitle(title: string) {
-  useEffect(() => {
-    if (typeof title === "string" && title.trim().length > 0) {
-      document.title = title.trim();
-    }
-  }, [title]);
-}
-
-export default useDocumentTitle;

package/src/hooks/useHover/__doc__/useHover.stories.tsx

@@ -1,41 +0,0 @@
-import { Meta } from "@storybook/react-vite";
-import { cn } from "../../../lib";
-import useHover from "../useHover";
-
-/**
- * Hook que facilita el manejo de un estado booleano. Provee métodos para abrir, cerrar y toggle el estado
- */
-const meta: Meta = {
-  title: "hooks/useHover",
-};
-
-export default meta;
-
-export const Default = {
-  render: () => {
-    const { ref, isHovering } = useHover<HTMLDivElement>();
-
-    return (
-      <div className="space-y-2">
-        <div
-          ref={ref}
-          className={cn(
-            "rounded transition-colors w-32 h-32 shadow text-3xl grid place-items-center cursor-pointer",
-            { "bg-accent": isHovering },
-          )}
-        >
-          🍅
-        </div>
-
-        <pre className="rounded-md bg-slate-950 p-4 text-white">
-          <code className="block">
-            hover?:{" "}
-            <span className={isHovering ? "text-green-500" : "text-red-500"}>
-              {JSON.stringify(isHovering, null, 2)}
-            </span>
-          </code>
-        </pre>
-      </div>
-    );
-  },
-};

package/src/hooks/useHover/__test__/useHover.test.tsx

@@ -1,45 +0,0 @@
-import { fireEvent } from "@testing-library/dom";
-import { render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import useHover from "../useHover";
-
-describe("useHover hook", () => {
-  it("should be defined", () => {
-    expect(useHover).toBeDefined();
-  });
-
-  it("should handle hover start and end events", async () => {
-    const handleHoverStart = vi.fn();
-    const handleHoverEnd = vi.fn();
-
-    const Component = () => {
-      const { ref, isHovering } = useHover<HTMLDivElement>({
-        onHoverStart: handleHoverStart,
-        onHoverEnd: handleHoverEnd,
-      });
-      return (
-        <div ref={ref} data-testid="hover-target">
-          {isHovering ? "Hovering" : "Not Hovering"}
-        </div>
-      );
-    };
-
-    render(<Component />);
-
-    const target = screen.getByTestId("hover-target");
-
-    fireEvent.mouseOver(target);
-
-    await waitFor(() => {
-      expect(handleHoverStart).toHaveBeenCalled();
-      expect(target.textContent).toBe("Hovering");
-    });
-
-    fireEvent.mouseOut(target);
-
-    await waitFor(() => {
-      expect(handleHoverEnd).toHaveBeenCalled();
-      expect(target.textContent).toBe("Not Hovering");
-    });
-  });
-});

package/src/hooks/useHover/index.ts

@@ -1 +0,0 @@
-export { default as useHover } from "./useHover";

package/src/hooks/useHover/useHover.tsx

@@ -1,40 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-type UseHoverOptions = {
-  onHoverStart?: (event: MouseEvent) => void;
-  onHoverEnd?: (event: MouseEvent) => void;
-};
-
-function useHover<T extends HTMLElement>(
-  options?: UseHoverOptions,
-): { ref: React.RefObject<T | null>; isHovering: boolean } {
-  const [isHovering, setIsHovering] = useState(false);
-  const ref = useRef<T | null>(null);
-
-  useEffect(() => {
-    const handleMouseOver = (event: MouseEvent) => {
-      setIsHovering(true);
-      options?.onHoverStart?.(event);
-    };
-
-    const handleMouseOut = (event: MouseEvent) => {
-      setIsHovering(false);
-      options?.onHoverEnd?.(event);
-    };
-
-    const node = ref.current;
-    if (node) {
-      node.addEventListener("mouseover", handleMouseOver);
-      node.addEventListener("mouseout", handleMouseOut);
-
-      return () => {
-        node.removeEventListener("mouseover", handleMouseOver);
-        node.removeEventListener("mouseout", handleMouseOut);
-      };
-    }
-  }, [options]);
-
-  return { ref, isHovering };
-}
-
-export default useHover;