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

package/src/utils/form.test.tsx

@@ -0,0 +1,138 @@
+import { fireEvent, render, 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 ──────────────────────────────────────────────────────────
+
+describe("parseFormValues", () => {
+  const schema = z.object({
+    name: z.string().min(1, "required"),
+    age: z.coerce.number().min(0),
+  });
+
+  it("returns data and empty errors on valid input", () => {
+    const result = parseFormValues(schema, { name: "Alice", age: "30" });
+    expect(result.data).toEqual({ name: "Alice", age: 30 });
+    expect(result.errors).toEqual({});
+  });
+
+  it("returns null data and field errors on invalid input", () => {
+    const result = parseFormValues(schema, { name: "", age: "30" });
+    expect(result.data).toBeNull();
+    expect(result.errors.name).toBeDefined();
+    expect(result.errors.name.length).toBeGreaterThan(0);
+  });
+
+  it("captures multiple field errors simultaneously", () => {
+    const result = parseFormValues(schema, { name: "", age: -1 });
+    expect(result.data).toBeNull();
+    expect(result.errors.name).toBeDefined();
+    expect(result.errors.age).toBeDefined();
+  });
+});
+
+// ─── useHookForm ──────────────────────────────────────────────────────────────
+
+describe("useHookForm", () => {
+  it("returns a react-hook-form instance", () => {
+    const schema = z.object({ email: z.string().email() });
+    const { result } = renderHook(() => useHookForm(schema));
+    expect(result.current.handleSubmit).toBeTypeOf("function");
+    expect(result.current.register).toBeTypeOf("function");
+  });
+});
+
+// ─── HookForm ─────────────────────────────────────────────────────────────────
+
+const loginSchema = z.object({ username: z.string().min(1, "required") });
+
+function LoginForm({ onSubmit }: { onSubmit: (v: { username: string }) => void }) {
+  const form = useHookForm(loginSchema);
+  return (
+    <HookForm form={form} onFormSubmit={onSubmit}>
+      <input {...form.register("username")} data-testid="username" />
+      <button type="submit">Submit</button>
+    </HookForm>
+  );
+}
+
+describe("HookForm", () => {
+  it("renders children", () => {
+    render(<LoginForm onSubmit={vi.fn()} />);
+    expect(screen.getByTestId("username")).toBeInTheDocument();
+  });
+
+  it("calls onFormSubmit with parsed values on valid submit", async () => {
+    const onSubmit = vi.fn();
+    render(<LoginForm onSubmit={onSubmit} />);
+
+    fireEvent.change(screen.getByTestId("username"), {
+      target: { value: "alice" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    expect(onSubmit).toHaveBeenCalledWith({ username: "alice" }, undefined);
+  });
+
+  it("does not call onFormSubmit on invalid submit", async () => {
+    const onSubmit = vi.fn();
+    render(<LoginForm onSubmit={onSubmit} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(onSubmit).not.toHaveBeenCalled());
+  });
+});
+
+// ─── HookField ────────────────────────────────────────────────────────────────
+
+function FieldForm({
+  onSubmit,
+}: {
+  onSubmit: (v: { email: string }) => void;
+}) {
+  const schema = z.object({ email: z.string().email("invalid email") });
+  const form = useHookForm(schema);
+  return (
+    <HookForm form={form} onFormSubmit={onSubmit}>
+      <HookField
+        name="email"
+        label="Email"
+        render={({ onChange, value, invalid }) => (
+          <input
+            data-testid="email"
+            data-invalid={invalid}
+            value={value}
+            onChange={onChange}
+          />
+        )}
+      />
+      <button type="submit">Submit</button>
+    </HookForm>
+  );
+}
+
+describe("HookField", () => {
+  it("renders the field input", () => {
+    render(<FieldForm onSubmit={vi.fn()} />);
+    expect(screen.getByTestId("email")).toBeInTheDocument();
+  });
+
+  it("exposes invalid=false initially", () => {
+    render(<FieldForm onSubmit={vi.fn()} />);
+    expect(screen.getByTestId("email").dataset.invalid).toBe("false");
+  });
+
+  it("marks invalid after failed submit", async () => {
+    render(<FieldForm onSubmit={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("email").dataset.invalid).toBe("true"),
+    );
+  });
+});

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/utils/functions/createSafeContext.test.tsx

@@ -0,0 +1,37 @@
+import { renderHook } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { createSafeContext } from "./createSafeContext";
+
+describe("createSafeContext", () => {
+  it("returns a [useContext, Provider] tuple", () => {
+    const [useCtx, Provider] = createSafeContext<string>();
+    expect(typeof useCtx).toBe("function");
+    expect(Provider).toBeDefined();
+  });
+
+  it("throws when used outside a provider", () => {
+    const [useCtx] = createSafeContext<string>();
+    expect(() => renderHook(() => useCtx())).toThrow("Context value is null");
+  });
+
+  it("returns value when wrapped in provider", () => {
+    const [useCtx, Provider] = createSafeContext<string>();
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider value="hello">{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useCtx(), { wrapper });
+    expect(result.current).toBe("hello");
+  });
+
+  it("returns object values correctly", () => {
+    const [useCtx, Provider] = createSafeContext<{ count: number }>();
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider value={{ count: 42 }}>{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useCtx(), { wrapper });
+    expect(result.current.count).toBe(42);
+  });
+});

package/src/utils/functions/ensureReactElement.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ensureReactElement } from "./ensureReactElement";
+
+describe("ensureReactElement", () => {
+  it("wraps a string in the default div", () => {
+    const el = ensureReactElement({ children: "hello" });
+    render(el);
+    expect(screen.getByText("hello").tagName).toBe("DIV");
+  });
+
+  it("returns a valid ReactElement as-is", () => {
+    const child = <span data-testid="span">content</span>;
+    const el = ensureReactElement({ children: child });
+    render(el);
+    expect(screen.getByTestId("span")).toBeInTheDocument();
+  });
+
+  it("calls a render function with props and returns the result", () => {
+    const renderFn = (props: { label: string }) => (
+      <span data-testid="fn-result">{props.label}</span>
+    );
+    const el = ensureReactElement({
+      children: renderFn,
+      props: { label: "from-fn" },
+    });
+    render(el);
+    expect(screen.getByTestId("fn-result")).toHaveTextContent("from-fn");
+  });
+
+  it("wraps a number in the default div", () => {
+    const el = ensureReactElement({ children: 42 as any });
+    render(el);
+    expect(screen.getByText("42").tagName).toBe("DIV");
+  });
+
+  it("uses custom wrapper element via as prop", () => {
+    const el = ensureReactElement({ children: "text", as: "section" });
+    render(el);
+    expect(screen.getByText("text").tagName).toBe("SECTION");
+  });
+
+  it("wraps in fallback when render fn returns non-element (null)", () => {
+    const renderFn = () => null as any;
+    const el = ensureReactElement({ children: renderFn, as: "span" });
+    const { container } = render(el);
+    expect(container.querySelector("span")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from "vitest";
+import { getFormData } from "./getFormData";
+import type { FormEvent } from "react";
+
+function makeFormEvent(
+  fields: { name: string; value: string }[],
+): FormEvent<HTMLFormElement> {
+  const form = document.createElement("form");
+  for (const { name, value } of fields) {
+    const input = document.createElement("input");
+    input.name = name;
+    input.value = value;
+    form.appendChild(input);
+  }
+
+  const event = new Event("submit") as unknown as FormEvent<HTMLFormElement>;
+  Object.defineProperty(event, "currentTarget", {
+    value: form,
+    writable: false,
+  });
+  (event as any).preventDefault = vi.fn();
+  return event;
+}
+
+describe("getFormData", () => {
+  it("calls event.preventDefault", () => {
+    const event = makeFormEvent([]);
+    getFormData(event);
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+  });
+
+  it("returns empty object when form has no inputs", () => {
+    const event = makeFormEvent([]);
+    expect(getFormData(event)).toEqual({});
+  });
+
+  it("returns named inputs as key-value pairs", () => {
+    const event = makeFormEvent([
+      { name: "username", value: "alice" },
+      { name: "email", value: "alice@example.com" },
+    ]);
+    expect(getFormData(event)).toEqual({
+      username: "alice",
+      email: "alice@example.com",
+    });
+  });
+
+  it("skips elements without a name", () => {
+    const event = makeFormEvent([
+      { name: "username", value: "alice" },
+      { name: "", value: "ignored" },
+    ]);
+    const data = getFormData(event);
+    expect(Object.keys(data)).toHaveLength(1);
+    expect(data.username).toBe("alice");
+  });
+});

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

@@ -0,0 +1,56 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { mergeRefs } from "./mergeRefs";
+
+describe("mergeRefs", () => {
+  it("returns a callback ref", () => {
+    expect(typeof mergeRefs([])).toBe("function");
+  });
+
+  it("sets .current on MutableRefObject refs", () => {
+    const a = createRef<HTMLDivElement>();
+    const b = createRef<HTMLDivElement>();
+    const el = document.createElement("div") as unknown as HTMLDivElement;
+
+    mergeRefs([a, b])(el);
+
+    expect(a.current).toBe(el);
+    expect(b.current).toBe(el);
+  });
+
+  it("calls function refs with value", () => {
+    const fn = vi.fn();
+    const el = document.createElement("div") as unknown as HTMLDivElement;
+
+    mergeRefs([fn])(el);
+
+    expect(fn).toHaveBeenCalledOnce();
+    expect(fn).toHaveBeenCalledWith(el);
+  });
+
+  it("skips null and undefined refs without throwing", () => {
+    const el = document.createElement("div") as unknown as HTMLDivElement;
+    expect(() => mergeRefs([null, undefined])(el)).not.toThrow();
+  });
+
+  it("passes null when clearing (e.g. on unmount)", () => {
+    const ref = createRef<HTMLDivElement>();
+    const fn = vi.fn();
+
+    mergeRefs([ref, fn])(null);
+
+    expect(ref.current).toBeNull();
+    expect(fn).toHaveBeenCalledWith(null);
+  });
+
+  it("handles mixed ref types in one call", () => {
+    const obj = createRef<HTMLDivElement>();
+    const fn = vi.fn();
+    const el = document.createElement("div") as unknown as HTMLDivElement;
+
+    mergeRefs([obj, fn, null, undefined])(el);
+
+    expect(obj.current).toBe(el);
+    expect(fn).toHaveBeenCalledWith(el);
+  });
+});

package/src/__doc__/Changelog.mdx

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-import { ChangelogViewer } from "./Examples";
-
-<Meta title="Documentation/Changelog" />
-
-<ChangelogViewer />

package/src/__doc__/Components.mdx

@@ -1,73 +0,0 @@
-import {
-  Canvas,
-  ColorItem,
-  ColorPalette,
-  Meta,
-  Source,
-} from "@storybook/addon-docs/blocks";
-import { BorderRadius, ExampleProps } from "./Examples";
-
-<Meta title="Documentation/Components" />
-
-# Componentes
-
-## Estilos personalizados
-
-Cada componente extiende las propiedades del elemento HTML correspondiente, esto permite pasar clases y estilos.
-Se utiliza la librería `tailwind-merge` para combinar clases, evitar repeticiones y problemas de conflictos
-
-```tsx
-// Agrega el color de fondo. No es necesario hacer un !important
-<Input className="bg-red-400" />
-```
-
-## Creación de variantes y extensión de props
-
-Acá se puede ver un ejemplo de cómo crear un componente personalizado `Input` que incluye un icono "x" para limpiar el valor del campo. Este componente personalizado hereda todas las propiedades y funcionalidades del componente Input de la librería.
-
-<ExampleProps />
-```tsx 
-import {Button, Input} from "../../components";
-// CustomInput.tsx
-import { Button, Input } from "../../components";
-import { ComponentPropsWithoutRef, useState } from "react";
-
-// Extraer Props de componente Input
-type InputProps = ComponentPropsWithoutRef<typeof Input>;
-
-export const CustomInput = (props: InputProps) => {
-  const [value, setValue] = useState<string>("");
-
-  return (
-    <div className="relative">
-      <Input
-        {...props}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        className={cn("pr-12", props.className)}
-      />
-      <Button
-        variant="icon"
-        onClick={() => setValue("")}
-        className={cn(
-          "absolute right-0 top-1/2 -translate-y-1/2",
-          "text-error hover:text-error text-xl font-bold"
-        )}
-      >
-        x
-      </Button>
-    </div>
-  );
-};
-
-```
-
-### Crear un nuevo componente
-Para mantener la consistencia de los componentes y las estructuras se recomienda utilizar el comando `npx create-component`
-
-Va a generar los siguientes cambios
-* Crear el componente en `src/components/NAME.tsx`
-* Crear/actualizar barrels en `src/components/NAME/index.ts` y en `src/components/index.ts`
-* Crear el archivo de storybook con un template en `src/components/NAME/__doc__/NAME.stories.tsx`
-* Crear el archivo de test con un template en `src/components/NAME/__test__/NAME.test.tsx`
-```

package/src/__doc__/Examples.tsx

@@ -1,69 +0,0 @@
-import { X } from "lucide-react";
-import { ComponentPropsWithoutRef, useEffect, useState } from "react";
-import Markdown from "react-markdown";
-import { Button } from "../components/button";
-import { Input } from "../components/input";
-import { cn } from "../lib";
-
-export const BorderRadius = () => {
-  const sizes = [
-    "rounded-sm",
-    "rounded",
-    "rounded-md",
-    "rounded-lg",
-    "rounded-xl",
-  ];
-  return (
-    <div className="flex justify-center gap-4">
-      {sizes.map((size) => (
-        <div
-          key={size}
-          className={`${size} bg-primary text-primary-foreground h-28 w-28 grid place-items-center`}
-        >
-          {size}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-type InputProps = ComponentPropsWithoutRef<typeof Input>;
-
-export const ExampleProps = (props: InputProps) => {
-  const [value, setValue] = useState<string>("");
-
-  return (
-    <div className="relative">
-      <Input
-        {...props}
-        value={value}
-        onValueChange={setValue}
-        className={cn("pr-12", props.className)}
-      />
-      <Button
-        size="icon"
-        variant="ghost"
-        onClick={(): void => setValue("")}
-        className={cn(
-          "absolute right-0 top-1/2 -translate-y-1/2 ",
-          "text-error hover:text-error text-xl font-bold",
-        )}
-      >
-        <X />
-      </Button>
-    </div>
-  );
-};
-
-export const ChangelogViewer = () => {
-  const [content, setContent] = useState("");
-
-  useEffect(() => {
-    fetch("../CHANGELOG.md")
-      .then((response) => response.text())
-      .then((text) => setContent(text))
-      .catch((error) => console.error("Error loading changelog:", error));
-  }, []);
-
-  return <Markdown>{content}</Markdown>;
-};

package/src/__doc__/Icons.mdx

@@ -1,41 +0,0 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-import React, { useState } from "react";
-import { Dog } from "lucide-react";
-
-<Meta title="Documentation/Icons" />
-
-# Documentación de Iconos
-
-En este proyecto se utiliza la librería de ícono [Lucide Icons](https://github.com/lucide-icons/lucide)
-
-## Instalación
-
-[Documentación de instalación](https://lucide.dev/guide/installation)
-
-```bash
-npm install lucide-react
-```
-
-## Utilización
-
-Basta con importar el ícono y usarlo como elemento JSX. Acá se puede ver el [listado de íconos](https://lucide.dev/icons/)
-
-<Dog />
-
-```jsx
-import { Dog } from "lucide-react";
-
-<Dog />;
-```
-
-## Personalización de los Iconos
-
-Puedes personalizar los íconos utilizando CSS. Por ejemplo, puedes cambiar el tamaño por defecto de los íconos ajustando la variable `--icon-size`
-Para más información, ver la documentación [Global Styles](https://lucide.dev/guide/advanced/global-styling)
-
-```css
-@theme {
-  /* ...Tus variables del theme */
-  --icon-size: 2rem;
-}
-```

package/src/__doc__/Intro.mdx

@@ -1,138 +0,0 @@
-import {
-  Canvas,
-  ColorItem,
-  ColorPalette,
-  Meta,
-  Source,
-} from "@storybook/addon-docs/blocks";
-import { BorderRadius } from "./Examples";
-
-<Meta title="Documentation/Intro" />
-
-# Librería de componentes de 📦
-
-La librería te ofrece una colección de componentes de UI personalizables que se adaptan fácilmente a lo que necesites.
-Ya sea que estés buscando consistencia o flexibilidad, estos componentes te permiten construir interfaces rápidamente sin perder control sobre el estilo.
-Además, incluye hooks y utilidades que te facilitan la vida al manejar estados y otras tareas comunes, todo pensado para que desarrollar en frontend sea más sencillo y rápido.
-
-![boxcustodia](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS87eAzcc4MxVVBZK4hO0SgjOSDBGah5zyO6g&s)
-
-## Instalación
-
-Para empezar, primero debes instalar la librería ejecutando el siguiente comando en tu proyecto:
-
-```ts filename="index.js"
-npm i @boxcustodia/library
-```
-
-Luego, agregá estas dos líneas en tu CSS principal:
-
-```css filename="index.css"
-@import "tailwindcss";
-@import "@boxcustodia/library/styles";
-```
-
-Un solo import incluye el tema, las variantes y los estilos pre-compilados de todos los componentes. No hace falta `@source` apuntando a `node_modules`.
-
-## Personalización del tema
-
-Para ajustar colores, radios u otras variables a la identidad visual de tu proyecto, sobreescribí los tokens con `@theme` después de los imports:
-
-```css filename="index.css"
-@import "tailwindcss";
-@import "@boxcustodia/library/styles";
-
-@theme {
-  --color-background: oklch(100% 0 0);
-  --color-foreground: oklch(13.63% 0.036 259.2);
-
-  --color-popover: oklch(100% 0 0);
-  --color-popover-foreground: oklch(13.63% 0.036 259.2);
-
-  --color-primary: oklch(59.5% 0.195 270.48);
-  --color-primary-foreground: oklch(100% 0 0);
-
-  --color-secondary: oklch(96.83% 0.007 247.9);
-  --color-secondary-foreground: oklch(20.77% 0.04 265.75);
-
-  --color-muted: oklch(96.83% 0.007 247.9);
-  --color-muted-foreground: oklch(55.44% 0.041 257.42);
-
-  --color-accent: oklch(96.74% 0.001 286.38);
-  --color-accent-foreground: oklch(19.06% 0.003 247.96);
-
-  --color-error: oklch(63.68% 0.208 25.33);
-  --color-error-foreground: oklch(98.42% 0.003 247.86);
-
-  --color-success: oklch(70.1% 0.146 156.33);
-  --color-success-foreground: oklch(98.42% 0.003 247.86);
-
-  --color-warning: oklch(79.65% 0.16 70.08);
-  --color-warning-foreground: oklch(17.97% 0.034 59.63);
-
-  --color-info: oklch(62.8% 0.152 237.57);
-  --color-info-foreground: oklch(98.42% 0.003 247.86);
-
-  --color-input: oklch(76.68% 0 0);
-  --color-checkbox: var(--color-primary);
-  --color-ring: oklch(13.63% 0.036 259.2);
-
-  --radius: 0.5rem;
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: calc(var(--radius));
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-tag: 0.375rem;
-  --radius-checkbox: 0.25rem;
-
-  --icon-size: 1rem;
-
-  --z-overlay: 50;
-  --z-float: 60;
-  --z-toast: 70;
-}
-```
-
-## Configuración del provider
-
-Envolvé tu app una sola vez con `<LibraryProvider>` — **es obligatorio**. Configura toda la infraestructura de la librería en un solo paso:
-
-```tsx
-// app.tsx
-import { LibraryProvider } from "@boxcustodia/library";
-
-export function App() {
-  return (
-    <LibraryProvider>
-      <Router />
-    </LibraryProvider>
-  );
-}
-```
-
-Incluye internamente:
-
-- **`TooltipProvider`** — agrupa el hover intent de todos los tooltips: una vez que uno se abre, los siguientes lo hacen sin delay hasta que el cursor salga.
-- **`ToastProvider`** — habilita la API imperativa `toast.*` desde cualquier parte del árbol.
-
-Props disponibles:
-
-- **`tooltipDelay`** (`number`, default `600`) — tiempo en ms antes de que se abra un tooltip.
-- **`toastManager`** (`ToastManager`, default singleton global) — pasá una instancia aislada para microfrontends o tests.
-
-## Tecnologías utilizadas
-
-- [React](https://reactjs.org/)
-- [Radix](https://www.radix-ui.com/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [Storybook](https://storybook.js.org/)
-- [Jest](https://jestjs.io/)
-- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
-- [Prettier](https://prettier.io/)
-- [ESLint](https://eslint.org/)
-- [Husky](https://typicode.github.io/husky/#/)
-- [CVA](https://www.npmjs.com/package/class-variance-authority)
-
-## Documentación
-
-- [Netlify (temporal)](https://libreria-box-test.netlify.app)