@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/number-input/number-input.stories.tsx

@@ -0,0 +1,232 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Field } from "../field";
+import { Label } from "../label";
+import {
+  NumberInput,
+  NumberInputCursorIcon,
+  NumberInputDecrement,
+  NumberInputGroup,
+  NumberInputIncrement,
+  NumberInputInput,
+  NumberInputRoot,
+  NumberInputScrubArea,
+  NumberInputScrubAreaCursor,
+} from "./number-input";
+
+// TODO: Mostrar borde rojo si es invalid
+/**
+ * Input numérico construido sobre Base UI NumberField.
+ * Soporta incremento/decremento por botones, teclado y scrub (drag horizontal).
+ * Usá `hideControls` para renderizar sólo el input sin botones.
+ * Para composición avanzada, usá los primitivos `NumberInputRoot`, `NumberInputGroup`, etc.
+ */
+const meta: Meta<typeof NumberInput> = {
+  title: "Components/NumberInput",
+  component: NumberInput,
+  parameters: { layout: "centered" },
+  args: {
+    name: "quantity",
+    defaultValue: 0,
+  },
+  argTypes: {
+    classNames: { control: false },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NumberInput>;
+
+export const Default: Story = {};
+
+/**
+ * `className` estila el grupo (el contenedor con borde — root visual del
+ * componente). `classNames` expone los slots `input`, `controls`,
+ * `increment` y `decrement` para personalizar las partes internas.
+ */
+export const WithClassNames: Story = {
+  args: {
+    className: "outline-primary",
+    classNames: {
+      input: "font-mono text-primary",
+      increment: "text-primary",
+      decrement: "text-primary",
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: 42,
+  },
+};
+
+/**
+ * `hideControls` oculta los botones +/- y renderiza sólo el input.
+ * Útil cuando el espacio es limitado o los controles resultan innecesarios.
+ */
+export const HideControls: Story = {
+  args: {
+    hideControls: true,
+  },
+};
+
+/**
+ * El `ScrubArea` permite cambiar el valor arrastrando horizontalmente sobre la etiqueta.
+ * Requiere composición manual con los primitivos exportados.
+ */
+export const Scrub: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <NumberInputRoot
+        value={value}
+        onValueChange={(v) => v !== null && setValue(v)}
+        name="opacity"
+        allowWheelScrub
+      >
+        <div className="flex flex-col gap-2">
+          <NumberInputScrubArea>
+            <Label className="cursor-ew-resize" htmlFor="scrub-input">
+              Opacity
+            </Label>
+            <NumberInputScrubAreaCursor>
+              <NumberInputCursorIcon />
+            </NumberInputScrubAreaCursor>
+          </NumberInputScrubArea>
+          <NumberInputGroup>
+            <NumberInputDecrement />
+            <NumberInputInput id="scrub-input" />
+            <NumberInputIncrement />
+          </NumberInputGroup>
+        </div>
+      </NumberInputRoot>
+    );
+  },
+};
+
+/**
+ * Usá `value` + `onValueChange` para controlar el valor externamente.
+ * `onValueChange` recibe `number | null` — `null` cuando el campo está vacío o contiene un valor inválido.
+ */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(0);
+    return (
+      <div className="flex w-48 flex-col gap-2">
+        <NumberInput
+          name="quantity"
+          value={value}
+          onValueChange={(v) => setValue(v)}
+        />
+        <p className="text-muted-foreground text-xs">
+          Valor: {value ?? "vacío"}
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * Usá `min` y `max` para restringir el rango de valores.
+ * Los botones se deshabilitan automáticamente al alcanzar los límites.
+ */
+export const Range: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <div className="flex w-64 flex-col gap-2">
+        <NumberInput
+          name="progress"
+          value={value}
+          onValueChange={(v) => v !== null && setValue(v)}
+          min={0}
+          max={100}
+          step={10}
+        />
+        <p className="text-muted-foreground text-xs">
+          Valor: {value} (0 – 100, paso 10)
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * Pasá un objeto `format` compatible con `Intl.NumberFormat` para formatear el valor mostrado.
+ * El formato se aplica al mostrar y no interfiere con la edición ni con el valor interno.
+ *
+ * Para `style: "percent"`, el valor interno es decimal (0–1) y se muestra multiplicado por 100.
+ * Al tipear manualmente, incluí el símbolo "%" (ej: "80%") para que el parser lo interprete correctamente.
+ *
+ * Para campos tipo DNI, omitir `min`/`max` evita que el campo auto-corrija valores parciales mientras
+ * se escribe. La validación del rango se realiza en submit vía `Field` con el prop `error`.
+ *
+ * ```tsx
+ * <NumberInput
+ *   name="dni"
+ *   placeholder="Ej: 33.456.789"
+ *   format={{ useGrouping: true, maximumFractionDigits: 0 }}
+ *   hideControls
+ * />
+ * ```
+ */
+export const FormattedValue: Story = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-4">
+      <NumberInput
+        name="price"
+        defaultValue={1299}
+        locale="es-AR"
+        format={{ style: "currency", currency: "ARS" }}
+      />
+      <NumberInput
+        name="ratio"
+        defaultValue={0.75}
+        step={0.05}
+        min={0}
+        max={1}
+        format={{ style: "percent" }}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Controlá la precisión y el incremento mínimo con `step`.
+ * `largeStep` (Page Up / Page Down) multiplica el paso por defecto.
+ */
+export const Step: Story = {
+  args: {
+    name: "rating",
+    step: 0.5,
+    largeStep: 2,
+    min: 0,
+    max: 10,
+    defaultValue: 2.5,
+    format: { minimumFractionDigits: 1, maximumFractionDigits: 1 },
+  },
+};
+
+/**
+ * Integrá el `NumberInput` con el componente `Field` para obtener label, descripción y errores.
+ * Cuando `Field` tiene un `error`, el borde rojo se aplica automáticamente vía el contexto de Base UI.
+ * Para usarlo sin `Field`, pasá `invalid` directamente al componente.
+ */
+export const FormIntegration: Story = {
+  render: () => {
+    return (
+      <div className="w-64">
+        <Field
+          label="Edad"
+          description="Ingresá tu edad en años."
+          error="El valor debe estar entre 18 y 99."
+        >
+          <NumberInput name="age" />
+        </Field>
+      </div>
+    );
+  },
+};

package/src/components/number-input/number-input.test.tsx

@@ -0,0 +1,260 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  NumberInput,
+  NumberInputCursorIcon,
+  NumberInputDecrement,
+  NumberInputGroup,
+  NumberInputIncrement,
+  NumberInputInput,
+  NumberInputPrimitive,
+  NumberInputRoot,
+  NumberInputScrubArea,
+  NumberInputScrubAreaCursor,
+} from "../../components";
+import { click } from "../../utils/tests";
+
+describe("NumberInput composite", () => {
+  it("renders an input with the group role", () => {
+    render(<NumberInput name="amount" />);
+
+    expect(screen.getByRole("group")).toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("displays the controlled value", () => {
+    render(<NumberInput name="amount" value={10} />);
+
+    expect(screen.getByRole("textbox")).toHaveValue("10");
+  });
+
+  it("respects the disabled prop", () => {
+    render(<NumberInput name="amount" disabled />);
+
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+
+  it("forwards placeholder to the underlying input", () => {
+    render(<NumberInput name="amount" placeholder="Cantidad" />);
+
+    expect(screen.getByPlaceholderText("Cantidad")).toBeInTheDocument();
+  });
+
+  it("marks the input as invalid when invalid is true", () => {
+    render(<NumberInput name="amount" invalid />);
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
+    expect(screen.getByRole("group")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("calls onValueChange when the value changes", () => {
+    const onValueChange = vi.fn();
+    render(<NumberInput name="amount" onValueChange={onValueChange} />);
+
+    fireEvent.input(screen.getByRole("textbox"), { target: { value: "5" } });
+
+    expect(onValueChange).toHaveBeenCalled();
+  });
+
+  it("clamps to the min value on blur", () => {
+    render(<NumberInput name="amount" min={0} />);
+
+    const input = screen.getByRole("textbox");
+    fireEvent.input(input, { target: { value: "-5" } });
+    fireEvent.blur(input);
+
+    expect(input).toHaveValue("0");
+  });
+
+  it("clamps to the max value on blur", () => {
+    render(<NumberInput name="amount" max={100} />);
+
+    const input = screen.getByRole("textbox");
+    fireEvent.input(input, { target: { value: "150" } });
+    fireEvent.blur(input);
+
+    expect(input).toHaveValue("100");
+  });
+
+  it("increments the value via the increment button", () => {
+    render(<NumberInput name="amount" defaultValue={5} />);
+
+    click(screen.getByTestId("increment-trigger"));
+
+    expect(screen.getByRole("textbox")).toHaveValue("6");
+  });
+
+  it("decrements the value via the decrement button", () => {
+    render(<NumberInput name="amount" defaultValue={5} />);
+
+    click(screen.getByTestId("decrement-trigger"));
+
+    expect(screen.getByRole("textbox")).toHaveValue("4");
+  });
+
+  it("hides the increment and decrement controls when hideControls is true", () => {
+    render(<NumberInput name="amount" hideControls />);
+
+    expect(screen.queryByTestId("increment-trigger")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("decrement-trigger")).not.toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("applies className to the group and classNames to each slot", () => {
+    render(
+      <NumberInput
+        name="amount"
+        className="group-class"
+        classNames={{
+          input: "input-class",
+          controls: "controls-class",
+          increment: "increment-class",
+          decrement: "decrement-class",
+        }}
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="number-input-group"]'),
+    ).toHaveClass("group-class");
+    expect(
+      document.querySelector('[data-slot="number-input-input"]'),
+    ).toHaveClass("input-class");
+    expect(screen.getByTestId("increment-trigger")).toHaveClass(
+      "increment-class",
+    );
+    expect(screen.getByTestId("decrement-trigger")).toHaveClass(
+      "decrement-class",
+    );
+    expect(screen.getByTestId("increment-trigger").parentElement).toHaveClass(
+      "controls-class",
+    );
+  });
+});
+
+describe("NumberInput primitives", () => {
+  const setup = (
+    children?: React.ReactNode,
+    rootProps?: React.ComponentProps<typeof NumberInputRoot>,
+  ) =>
+    render(
+      <NumberInputRoot name="amount" {...rootProps}>
+        <NumberInputGroup>
+          <NumberInputDecrement data-testid="decrement">-</NumberInputDecrement>
+          <NumberInputInput data-testid="input" />
+          <NumberInputIncrement data-testid="increment">+</NumberInputIncrement>
+          {children}
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+  it("composes Root, Group, Input, Increment, and Decrement directly", () => {
+    setup(undefined, { defaultValue: 2 });
+
+    expect(screen.getByTestId("input")).toHaveValue("2");
+
+    click(screen.getByTestId("increment"));
+    expect(screen.getByTestId("input")).toHaveValue("3");
+
+    click(screen.getByTestId("decrement"));
+    expect(screen.getByTestId("input")).toHaveValue("2");
+  });
+
+  it("forwards a ref to the underlying input via NumberInputInput", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputInput ref={ref} />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it("is controlled by the value prop on the Root", () => {
+    const onValueChange = vi.fn();
+    render(
+      <NumberInputRoot name="amount" value={7} onValueChange={onValueChange}>
+        <NumberInputGroup>
+          <NumberInputInput data-testid="input" />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+    expect(screen.getByTestId("input")).toHaveValue("7");
+  });
+
+  it("exposes the Base UI namespace via NumberInputPrimitive", () => {
+    expect(NumberInputPrimitive).toBeDefined();
+    expect(NumberInputPrimitive.Root).toBeDefined();
+    expect(NumberInputPrimitive.Input).toBeDefined();
+    expect(NumberInputPrimitive.Increment).toBeDefined();
+    expect(NumberInputPrimitive.Decrement).toBeDefined();
+  });
+});
+
+describe("NumberInput scrub primitives", () => {
+  it("NumberInputScrubArea renders data-slot=number-input-scrub-area", () => {
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputScrubArea>Drag</NumberInputScrubArea>
+          <NumberInputInput />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="number-input-scrub-area"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("NumberInputScrubArea merges className", () => {
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputScrubArea className="scrub-cls">
+            Drag
+          </NumberInputScrubArea>
+          <NumberInputInput />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="number-input-scrub-area"]'),
+    ).toHaveClass("scrub-cls");
+  });
+
+  it("NumberInputScrubAreaCursor renders inside a ScrubArea without crashing", () => {
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputScrubArea>
+            <NumberInputScrubAreaCursor />
+            Drag
+          </NumberInputScrubArea>
+          <NumberInputInput />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="number-input-scrub-area"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("NumberInputCursorIcon renders an SVG element", () => {
+    const { container } = render(<NumberInputCursorIcon />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("NumberInputCursorIcon forwards props to SVG", () => {
+    const { container } = render(
+      <NumberInputCursorIcon data-testid="cursor-icon" />,
+    );
+    expect(
+      container.querySelector("[data-testid='cursor-icon']"),
+    ).toBeInTheDocument();
+  });
+});