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

package/src/utils/form.test.tsx

@@ -1,8 +1,13 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { z } from "zod";
 import { HookField, HookForm, parseFormValues, useHookForm } from "./form";
-import { renderHook } from "@testing-library/react";
 
 // ─── parseFormValues ──────────────────────────────────────────────────────────
 
@@ -48,7 +53,11 @@ describe("useHookForm", () => {
 
 const loginSchema = z.object({ username: z.string().min(1, "required") });
 
-function LoginForm({ onSubmit }: { onSubmit: (v: { username: string }) => void }) {
+function LoginForm({
+  onSubmit,
+}: {
+  onSubmit: (v: { username: string }) => void;
+}) {
   const form = useHookForm(loginSchema);
   return (
     <HookForm form={form} onFormSubmit={onSubmit}>
@@ -89,11 +98,7 @@ describe("HookForm", () => {
 
 // ─── HookField ────────────────────────────────────────────────────────────────
 
-function FieldForm({
-  onSubmit,
-}: {
-  onSubmit: (v: { email: string }) => void;
-}) {
+function FieldForm({ onSubmit }: { onSubmit: (v: { email: string }) => void }) {
   const schema = z.object({ email: z.string().email("invalid email") });
   const form = useHookForm(schema);
   return (

package/src/utils/form.tsx

@@ -22,6 +22,16 @@ import { Field, type FieldProps, Form as LibraryForm } from "../components";
  *
  * - `data` is the typed, parsed value, or `null` when validation fails.
  * - `errors` is the flattened `fieldErrors` object (empty on success).
+ *
+ * Value conventions worth knowing when writing the schema (these hold whether
+ * or not you use Zod):
+ * - `DateInput` and `DatePicker` submit an **ISO date string** (`yyyy-MM-dd`),
+ *   or `""` when empty. The format is locale-agnostic, sortable, and parseable
+ *   by `new Date()` or any backend without a custom parser. The displayed text
+ *   stays `dd/MM/yyyy` — display and value are different layers. To reformat,
+ *   it is a plain split: `iso.split("-").reverse().join("-")` → `dd-MM-yyyy`.
+ *   Avoid round-tripping through `new Date(iso)` + local getters (timezone
+ *   shift); split the string or use `parseISO`.
  */
 export function parseFormValues<T extends z.ZodType>(
   schema: T,

package/src/utils/functions/getFormData.test.ts

@@ -1,6 +1,6 @@
+import type { FormEvent } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { getFormData } from "./getFormData";
-import type { FormEvent } from "react";
 
 function makeFormEvent(
   fields: { name: string; value: string }[],

package/dist/hooks/use-hotkey/utils/create-hotkey-listener.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./is-input-field.cjs.js"),s=require("./match-key-modifiers.cjs.js"),u=(e,t,i,o,a)=>r=>{if(!a||n.shouldIgnoreEvent(r,o))return;(Array.isArray(e)?e:[e]).some(c=>s.matchKeyModifiers(r,c))&&(i&&r.preventDefault(),t(r))};exports.createListener=u;

package/dist/hooks/use-hotkey/utils/create-hotkey-listener.es.js

@@ -1,10 +0,0 @@
-import { shouldIgnoreEvent as c } from "./is-input-field.es.js";
-import { matchKeyModifiers as f } from "./match-key-modifiers.es.js";
-const h = (t, o, e, a, i) => (r) => {
-  if (!i || c(r, a))
-    return;
-  (Array.isArray(t) ? t : [t]).some((m) => f(r, m)) && (e && r.preventDefault(), o(r));
-};
-export {
-  h as createListener
-};

package/dist/hooks/use-prevent-close-window/use-prevent-close-window.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react");function t({shouldPrevent:n,message:e="Es posible que no se guarden los cambios hayas hecho."}){const o=r=>{if(n)return r.preventDefault(),r.returnValue=e,e};u.useEffect(()=>(window.addEventListener("beforeunload",o),()=>window.removeEventListener("beforeunload",o)),[e,n])}exports.default=t;exports.usePreventCloseWindow=t;

package/dist/hooks/use-prevent-close-window/use-prevent-close-window.es.js

@@ -1,15 +0,0 @@
-import { useEffect as t } from "react";
-function a({
-  shouldPrevent: n,
-  message: e = "Es posible que no se guarden los cambios hayas hecho."
-}) {
-  const o = (r) => {
-    if (n)
-      return r.preventDefault(), r.returnValue = e, e;
-  };
-  t(() => (window.addEventListener("beforeunload", o), () => window.removeEventListener("beforeunload", o)), [e, n]);
-}
-export {
-  a as default,
-  a as usePreventCloseWindow
-};

package/dist/hooks/use-toggle/use-toggle.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react");function l(t=!1){const[o,g]=u.useState(t);return[o,e=>{g(s=>e===void 0?!s:e)}]}exports.useToggle=l;

package/dist/hooks/use-toggle/use-toggle.es.js

@@ -1,10 +0,0 @@
-import { useState as l } from "react";
-function n(e = !1) {
-  const [o, g] = l(e);
-  return [o, (t) => {
-    g((s) => t === void 0 ? !s : t);
-  }];
-}
-export {
-  n as useToggle
-};

package/dist/src/hooks/use-hotkey/utils/create-hotkey-listener.d.ts

@@ -1 +0,0 @@
-export declare const createListener: (keys: string | string[], handler: (event: KeyboardEvent) => void, preventDefault: boolean, ignoreInputFields: boolean, watch: boolean) => (event: KeyboardEvent) => void;

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

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

package/dist/src/hooks/use-prevent-close-window/use-prevent-close-window.d.ts

@@ -1,13 +0,0 @@
-interface UsePreventCloseWindowProps {
-    /**
-     * Propiedad que determina si la ventana se puede cerrar o no
-     */
-    shouldPrevent: boolean;
-    /**
-     * Mensaje que se va a mostrar al usuario antes de cerrar la ventana
-     * @deprecated ya no es soportado por los navegadores modernos
-     */
-    message?: string;
-}
-export declare function usePreventCloseWindow({ shouldPrevent, message, }: UsePreventCloseWindowProps): void;
-export default usePreventCloseWindow;

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

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

package/dist/src/hooks/use-toggle/use-toggle.d.ts

@@ -1,3 +0,0 @@
-type Return = [boolean, (newValue?: boolean) => void];
-export declare function useToggle(initialValue?: boolean): Return;
-export {};

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

@@ -1,68 +0,0 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { useAsync } from "../use-async";
-
-const mockFetchSuccess = async (data: any) => {
-  return new Promise((resolve) => setTimeout(() => resolve(data), 100));
-};
-
-const mockFetchError = async () => {
-  return new Promise((_, reject) =>
-    setTimeout(() => reject(new Error("Fetch error")), 100),
-  );
-};
-
-describe("useAsync hook", () => {
-  it("should initialize with default state", () => {
-    const { result } = renderHook(() =>
-      useAsync({ fn: () => Promise.resolve("test") }),
-    );
-
-    expect(result.current.loading).toBe(true);
-    expect(result.current.error).toBeNull();
-    expect(result.current.data).toBeNull();
-  });
-
-  it("should handle success", async () => {
-    const { result } = renderHook(() =>
-      useAsync({ fn: () => mockFetchSuccess("success") }),
-    );
-
-    await waitFor(() => result.current.data);
-  });
-
-  it("should handle error", async () => {
-    const { result } = renderHook(() =>
-      useAsync({ fn: () => mockFetchError() }),
-    );
-
-    await waitFor(() => expect(result.current.error).not.toBeNull());
-  });
-
-  it("should call onSuccess callback", async () => {
-    const onSuccess = vi.fn();
-    renderHook(() =>
-      useAsync({ fn: () => mockFetchSuccess("success"), onSuccess }),
-    );
-
-    await waitFor(() => expect(onSuccess).toHaveBeenCalledWith("success"));
-  });
-
-  it("should call onError callback", async () => {
-    const onError = vi.fn();
-    renderHook(() => useAsync({ fn: () => mockFetchError(), onError }));
-
-    await waitFor(() =>
-      expect(onError).toHaveBeenCalledWith(expect.any(Error)),
-    );
-  });
-
-  it("should call onFinish callback", async () => {
-    const onFinish = vi.fn();
-    renderHook(() =>
-      useAsync({ fn: () => mockFetchSuccess("success"), onFinish }),
-    );
-
-    await waitFor(() => expect(onFinish).toHaveBeenCalled());
-  });
-});

package/src/hooks/use-hotkey/utils/create-hotkey-listener.ts

@@ -1,25 +0,0 @@
-import { shouldIgnoreEvent } from "./is-input-field";
-import { matchKeyModifiers } from "./match-key-modifiers";
-
-export const createListener = (
-  keys: string | string[],
-  handler: (event: KeyboardEvent) => void,
-  preventDefault: boolean,
-  ignoreInputFields: boolean,
-  watch: boolean,
-) => {
-  return (event: KeyboardEvent) => {
-    if (!watch) return;
-    if (shouldIgnoreEvent(event, ignoreInputFields)) {
-      return;
-    }
-
-    const keyArray = Array.isArray(keys) ? keys : [keys];
-    const match = keyArray.some((key) => matchKeyModifiers(event, key));
-
-    if (match) {
-      preventDefault && event.preventDefault();
-      handler(event);
-    }
-  };
-};

package/src/hooks/use-is-visible/use-is-visible.tsx

@@ -1,49 +0,0 @@
-import { RefObject, useCallback, useEffect, useRef, useState } from "react";
-
-interface UseIsVisibleProps extends IntersectionObserverInit {
-  onVisible?: () => void;
-}
-
-interface UseIsVisibleReturn<T> {
-  ref: RefObject<T | null>;
-  isVisible: boolean;
-}
-
-export function useIsVisible<T extends HTMLElement>({
-  onVisible,
-  root = null,
-  rootMargin = "0px",
-  threshold = 0,
-}: UseIsVisibleProps = {}): UseIsVisibleReturn<T> {
-  const [isVisible, setIsVisible] = useState<boolean>(false);
-  const ref = useRef<T | null>(null);
-
-  const handleIntersect: IntersectionObserverCallback = useCallback(
-    ([entry]) => {
-      const isIntersecting = entry.isIntersecting;
-      setIsVisible(isIntersecting);
-    },
-    [onVisible],
-  );
-
-  useEffect(() => {
-    if (ref.current == null) return;
-    const observer = new IntersectionObserver(handleIntersect, {
-      root,
-      rootMargin,
-      threshold,
-    });
-    observer.observe(ref.current);
-    return () => {
-      if (ref.current == null) return;
-      observer.unobserve(ref.current);
-    };
-  }, [ref, root, rootMargin, threshold, handleIntersect]);
-
-  useEffect(() => {
-    isVisible && onVisible?.();
-  }, [isVisible]);
-
-  return { ref, isVisible };
-}
-

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

@@ -1,83 +0,0 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { useMutation } from "../use-mutation";
-
-const mockMutationSuccess = async (data: any) => {
-  return new Promise((resolve) => setTimeout(() => resolve(data), 100));
-};
-
-const mockMutationError = async () => {
-  return new Promise((_, reject) =>
-    setTimeout(() => reject(new Error("Mutation error")), 100),
-  );
-};
-
-describe("useMutation hook", () => {
-  it("should initialize with default state", () => {
-    const { result } = renderHook(() =>
-      useMutation({ fn: () => Promise.resolve("test") }),
-    );
-
-    expect(result.current.loading).toBe(false);
-    expect(result.current.error).toBeNull();
-    expect(result.current.data).toBeNull();
-  });
-
-  it("should handle success", async () => {
-    const { result } = renderHook(() =>
-      useMutation({ fn: () => mockMutationSuccess("success") }),
-    );
-
-    result.current.mutate();
-    await waitFor(() => expect(result.current.data).toBe("success"));
-  });
-
-  it("should handle error", async () => {
-    const { result } = renderHook(() =>
-      useMutation({ fn: () => mockMutationError() }),
-    );
-
-    try {
-      await result.current.mutate();
-    } catch (e) {
-      console.log(e);
-      await waitFor(() => expect(result.current.error).not.toBeNull());
-    }
-  });
-
-  it("should call onSuccess callback", async () => {
-    const onSuccess = vi.fn();
-    const { result } = renderHook(() =>
-      useMutation({ fn: () => mockMutationSuccess("success"), onSuccess }),
-    );
-
-    result.current.mutate();
-    await waitFor(() => expect(onSuccess).toHaveBeenCalledWith("success"));
-  });
-
-  it("should call onError callback", async () => {
-    const onError = vi.fn();
-    const { result } = renderHook(() =>
-      useMutation({ fn: () => mockMutationError(), onError }),
-    );
-
-    try {
-      await result.current.mutate();
-    } catch (e) {
-      console.log(e);
-      await waitFor(() =>
-        expect(onError).toHaveBeenCalledWith(expect.any(Error)),
-      );
-    }
-  });
-
-  it("should call onFinish callback", async () => {
-    const onFinish = vi.fn();
-    const { result } = renderHook(() =>
-      useMutation({ fn: () => mockMutationSuccess("success"), onFinish }),
-    );
-
-    result.current.mutate();
-    await waitFor(() => expect(onFinish).toHaveBeenCalled());
-  });
-});

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

@@ -1,59 +0,0 @@
-import { useCallback, useState } from "react";
-
-type Mutation<TArgs extends any[], TReturn> = (
-  ...args: TArgs
-) => Promise<TReturn>;
-
-interface UseMutationOptions<TArgs extends any[], TReturn> {
-  fn: Mutation<TArgs, TReturn>;
-  onError?: (error: Error) => void;
-  onSuccess?: (data: TReturn) => void;
-  onFinish?: () => void;
-}
-
-interface UseMutationReturn<TArgs extends any[], TReturn> {
-  mutate: Mutation<TArgs, TReturn>;
-  loading: boolean;
-  error: Error | null;
-  data: TReturn | null;
-}
-
-export const useMutation = <TArgs extends any[], TReturn>(
-  opts: UseMutationOptions<TArgs, TReturn>,
-): UseMutationReturn<TArgs, TReturn> => {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [data, setData] = useState<TReturn | null>(null);
-
-  const mutate = useCallback(
-    async (...args: TArgs) => {
-      setLoading(true);
-      setError(null);
-      setData(null);
-
-      try {
-        const result = await opts.fn(...args);
-        opts.onSuccess?.(result);
-        setData(result);
-        return result;
-      } catch (err) {
-        const error = err as Error;
-        opts.onError?.(error);
-        setError(error);
-        throw error;
-      } finally {
-        opts.onFinish?.();
-        setLoading(false);
-      }
-    },
-    [opts],
-  );
-
-  return {
-    mutate,
-    loading,
-    error,
-    data,
-  };
-};
-

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

@@ -1,46 +0,0 @@
-import { useCallback, useState } from "react";
-
-type GenericObject = Record<string, any>;
-type Return<
-  TState,
-  TArgs = ((state: TState) => Partial<TState>) | Partial<TState>,
-> = [TState, (arg: TArgs) => void, () => void];
-type MaybeReturn<TState> = Return<
-  TState | undefined,
-  ((state: TState | undefined) => Partial<TState>) | Partial<TState>
->;
-
-export function useObject<T extends GenericObject>(): MaybeReturn<T>;
-export function useObject<T extends GenericObject>(initialValue: T): Return<T>;
-export function useObject<T extends GenericObject>(initialValue?: T) {
-  const [state, setState] = useState<T | undefined>(initialValue);
-
-  const reset = useCallback(() => setState(initialValue), [initialValue]);
-
-  const setNewState = useCallback(
-    (arg: ((state: T | undefined) => Partial<T>) | Partial<T>) => {
-      setState((prevState) => {
-        if (typeof arg === "function") {
-          const newState = arg(prevState);
-          if (newState !== null && typeof newState === "object") {
-            return {
-              ...prevState,
-              ...newState,
-            } as T;
-          }
-          return prevState;
-        } else if (arg !== null && typeof arg === "object") {
-          return {
-            ...prevState,
-            ...arg,
-          } as T;
-        }
-        return prevState;
-      });
-    },
-    [],
-  );
-
-  return [state, setNewState, reset] as const;
-}
-

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

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

package/src/hooks/use-prevent-close-window/use-prevent-close-window.stories.tsx

@@ -1,32 +0,0 @@
-import { Meta } from "@storybook/react-vite";
-import { usePreventCloseWindow } from "./use-prevent-close-window";
-
-/**
- * Hook que permite prevenir que se cierre la ventana (muestra mensaje de aviso)
- * Es útil para evitar que el usuario cierre la ventana accidentalmente mientras tiene cambios pendientes de guardar
- */
-const meta: Meta = {
-  title: "hooks/usePreventCloseWindow",
-  args: {
-    shouldPrevent: true,
-    message: "No te vayas 😞",
-  },
-  argTypes: {
-    shouldPrevent: {
-      description: "Propiedad que determina si la ventana se puede cerrar",
-    },
-    message: {
-      description:
-        "Mensaje que se muestra al cerrar la ventana, no soportado por navegadores modernos",
-    },
-  },
-};
-
-export default meta;
-
-export const Default = {
-  render: (args: any) => {
-    usePreventCloseWindow(args);
-    return <div>Intenta cerrar ventana</div>;
-  },
-};

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

@@ -1,79 +0,0 @@
-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/use-prevent-close-window/use-prevent-close-window.ts

@@ -1,33 +0,0 @@
-import { useEffect } from "react";
-
-interface UsePreventCloseWindowProps {
-  /**
-   * Propiedad que determina si la ventana se puede cerrar o no
-   */
-  shouldPrevent: boolean;
-  /**
-   * Mensaje que se va a mostrar al usuario antes de cerrar la ventana
-   * @deprecated ya no es soportado por los navegadores modernos
-   */
-  message?: string;
-}
-
-export function usePreventCloseWindow({
-  shouldPrevent,
-  message = "Es posible que no se guarden los cambios hayas hecho.",
-}: UsePreventCloseWindowProps) {
-  const handleBeforeUnload = (event: BeforeUnloadEvent): void | string => {
-    if (!shouldPrevent) return;
-
-    event.preventDefault();
-    event.returnValue = message;
-    return message;
-  };
-
-  useEffect(() => {
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-  }, [message, shouldPrevent]);
-}
-
-export default usePreventCloseWindow;

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

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

package/src/hooks/use-toggle/use-toggle.stories.tsx

@@ -1,25 +0,0 @@
-import { Meta } from "@storybook/react-vite";
-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
- */
-const meta: Meta = {
-  title: "hooks/useToggle",
-};
-
-export default meta;
-
-export const Default = {
-  render: () => {
-    const [isOpen, toggle] = useToggle();
-
-    return (
-      <div className="space-y-2">
-        <Checkbox name="open" checked={isOpen} />
-        <Button onClick={() => toggle()}>Toggle</Button>
-      </div>
-    );
-  },
-};