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

package/src/components/button/components/base-button.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { LoaderCircle } from "lucide-react";
+import { type ComponentProps } from "react";
+
+interface Props extends ComponentProps<typeof ButtonPrimitive> {
+  loading?: boolean;
+}
+
+type OnClickEvent = Parameters<
+  NonNullable<ComponentProps<typeof ButtonPrimitive>["onClick"]>
+>[0];
+
+export const BaseButton = ({
+  onClick,
+  loading: prop,
+  style,
+  children,
+  ...props
+}: Props) => {
+  const [loading = false, setLoading] = useControllableState<boolean>({
+    prop,
+    defaultProp: false,
+  });
+
+  const handleClick = async (e: OnClickEvent) => {
+    if (!onClick || loading) return;
+
+    const onClickResult = onClick(e) as unknown;
+
+    if (onClickResult instanceof Promise) {
+      setLoading(true);
+      await onClickResult.finally(() => setLoading(false));
+    }
+  };
+
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      data-loading={loading || undefined}
+      aria-busy={loading || undefined}
+      {...props}
+      onClick={handleClick}
+      style={style}
+    >
+      {children}
+      {loading && (
+        <LoaderCircle
+          data-loader
+          data-testid="btn-loader"
+          className="absolute inset-0 m-auto size-4 animate-spin text-[var(--btn-loader-color,currentColor)]"
+        />
+      )}
+    </ButtonPrimitive>
+  );
+};

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./components/base-button";

package/src/components/calendar/calendar.stories.tsx

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import type { DateRange } from "react-day-picker";
+import { action } from "storybook/actions";
+import { Calendar } from "./calendar";
+
+/**
+ * Envoltorio estilizado sobre el `DayPicker` de react-day-picker. Soporta los
+ * modos de selección `single`, `range` y `multiple`. Acepta todas las props de `DayPicker`.
+ *
+ * Por defecto usa `captionLayout="dropdown"` con el componente `Select` de la librería
+ * para navegar por mes y año. El rango navegable cubre 100 años hacia atrás y 100 hacia
+ * adelante desde el año actual. Para volver al caption de texto, pasá `captionLayout="label"`.
+ *
+ * Sobreescribí `components.Dropdown` para reemplazar el dropdown por defecto con cualquier
+ * componente custom. Para apuntar solo al mes o al año, usá `components.MonthsDropdown`
+ * o `components.YearsDropdown`.
+ *
+ * Referencia: [react-day-picker](https://daypicker.dev/)
+ */
+const meta: Meta<typeof Calendar> = {
+  title: "Components/Calendar",
+  component: Calendar,
+  parameters: { layout: "centered" },
+  argTypes: {
+    mode: {
+      control: "select",
+      options: ["single", "multiple", "range"],
+      description: "Modo de selección.",
+      table: { defaultValue: { summary: "single" } },
+    },
+    captionLayout: {
+      control: "select",
+      options: ["label", "dropdown", "dropdown-months", "dropdown-years"],
+      description:
+        'Layout del encabezado. Usá `"dropdown"` para activar los dropdowns de mes/año.',
+      table: { defaultValue: { summary: "dropdown" } },
+    },
+    showOutsideDays: {
+      control: "boolean",
+      description: "Mostrar días de los meses adyacentes.",
+      table: { defaultValue: { summary: "true" } },
+    },
+    selected: { control: false },
+    onSelect: { control: false },
+    components: { control: false },
+    classNames: { control: false },
+    formatters: { control: false },
+    labels: { control: false },
+    startMonth: {
+      control: false,
+      description: "Primer mes navegable al usar la navegación por dropdown.",
+    },
+    endMonth: {
+      control: false,
+      description: "Último mes navegable al usar la navegación por dropdown.",
+    },
+    disabled: {
+      control: false,
+      description:
+        "Matcher o función `(date: Date) => boolean` para deshabilitar días específicos.",
+    },
+    hidden: {
+      control: false,
+      description: "Matcher para ocultar días específicos del calendario.",
+    },
+    modifiers: { control: false },
+    modifiersClassNames: { control: false },
+    modifiersStyles: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {};
+
+/**
+ * `mode="range"` habilita la selección de un rango contiguo. `selected` debe ser
+ * un objeto `DateRange` con forma `{ from: Date | undefined; to?: Date | undefined }`.
+ * Los rangos parciales (solo `from`) son válidos mientras el usuario selecciona.
+ */
+export const Range: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange | undefined>();
+    return (
+      <Calendar
+        mode="range"
+        selected={range}
+        onSelect={(value) => {
+          setRange(value);
+          action("onSelect")(value);
+        }}
+      />
+    );
+  },
+};
+
+/**
+ * `mode="multiple"` permite seleccionar cualquier cantidad de días individuales.
+ * `selected` es un `Date[]`.
+ */
+export const Multiple: Story = {
+  render: () => {
+    const [dates, setDates] = useState<Date[] | undefined>();
+    return (
+      <Calendar
+        mode="multiple"
+        selected={dates}
+        onSelect={(value) => {
+          setDates(value);
+          action("onSelect")(value);
+        }}
+      />
+    );
+  },
+};
+
+/**
+ * `captionLayout="label"` muestra el mes y año como texto estático con botones
+ * de navegación. Útil cuando no se necesita saltar entre meses o años lejanos.
+ */
+export const LabelCaption: Story = {
+  render: () => <Calendar captionLayout="label" />,
+};
+
+/**
+ * `disabled` acepta una función `(date: Date) => boolean` para deshabilitar
+ * días específicos. Los matchers de `date-fns` funcionan bien acá.
+ *
+ * ```tsx
+ * import { isWeekend } from "date-fns";
+ *
+ * <Calendar disabled={(date) => isWeekend(date)} />
+ * ```
+ */
+export const Disabled: Story = {
+  render: () => (
+    <Calendar disabled={(date) => date.getDay() === 0 || date.getDay() === 6} />
+  ),
+};
+
+/**
+ * Tamaño de celda personalizado mediante la custom property `--cell-size`.
+ * Sobreescribila vía `className` para escalar toda la grilla del calendario.
+ *
+ * ```tsx
+ * <Calendar className="[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]" />
+ * ```
+ */
+export const CustomCellSize: Story = {
+  render: () => (
+    <Calendar className="[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]" />
+  ),
+};

package/src/components/calendar/calendar.test.tsx

@@ -0,0 +1,174 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Calendar } from "../../components";
+
+describe("Calendar component", () => {
+  it("renders the day-picker root with the calendar slot", () => {
+    render(<Calendar mode="single" />);
+
+    expect(
+      document.querySelector('[data-slot="calendar"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("applies the cell-size variables and merges a custom className on root", () => {
+    render(<Calendar mode="single" className="my-calendar" />);
+
+    const root = document.querySelector('[data-slot="calendar"]');
+    expect(root).toHaveClass("my-calendar");
+    expect(root).toHaveClass("w-fit");
+  });
+
+  it("renders month and year dropdowns with captionLayout='dropdown'", () => {
+    render(<Calendar mode="single" captionLayout="dropdown" />);
+
+    // CalendarDropdown wraps each react-day-picker dropdown in a Base UI Select.
+    const triggers = document.querySelectorAll('[data-slot="select-trigger"]');
+    expect(triggers.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("renders a label caption (no dropdowns) with captionLayout='label'", () => {
+    render(<Calendar mode="single" captionLayout="label" />);
+
+    expect(document.querySelector('[data-slot="select-trigger"]')).toBeNull();
+    expect(
+      document.querySelector('[data-slot="calendar"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders previous and next navigation buttons (Chevron left/right)", () => {
+    render(<Calendar mode="single" />);
+
+    expect(
+      screen.getByRole("button", { name: /previous|anterior/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /next|siguiente/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("merges a custom classNames entry onto the matching slot", () => {
+    render(
+      <Calendar mode="single" classNames={{ month: "custom-month-class" }} />,
+    );
+
+    const month = document.querySelector(".custom-month-class");
+    expect(month).not.toBeNull();
+    // Base class is preserved alongside the custom one.
+    expect(month).toHaveClass("w-full");
+  });
+
+  it("renders selected day for a single date", () => {
+    const selected = new Date(2024, 0, 15);
+    render(
+      <Calendar
+        mode="single"
+        selected={selected}
+        defaultMonth={selected}
+        captionLayout="label"
+      />,
+    );
+
+    const day = screen.getByRole("button", { name: /15/ });
+    expect(day).toBeInTheDocument();
+  });
+
+  it("supports range mode rendering", () => {
+    const from = new Date(2024, 0, 10);
+    const to = new Date(2024, 0, 20);
+    render(
+      <Calendar
+        mode="range"
+        selected={{ from, to }}
+        defaultMonth={from}
+        captionLayout="label"
+      />,
+    );
+
+    expect(document.querySelector(".range-start")).not.toBeNull();
+    expect(document.querySelector(".range-end")).not.toBeNull();
+  });
+
+  it("supports multiple mode rendering", () => {
+    const selected = [new Date(2024, 0, 10), new Date(2024, 0, 12)];
+    render(
+      <Calendar
+        mode="multiple"
+        selected={selected}
+        defaultMonth={selected[0]}
+        captionLayout="label"
+      />,
+    );
+
+    expect(
+      document.querySelectorAll('[data-selected="true"]').length,
+    ).toBeGreaterThanOrEqual(1);
+  });
+
+  it("hides outside days when showOutsideDays is false", () => {
+    render(
+      <Calendar
+        mode="single"
+        showOutsideDays={false}
+        defaultMonth={new Date(2024, 0, 1)}
+        captionLayout="label"
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="calendar"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("merges user-provided components over the defaults", () => {
+    const CustomChevron = () => <span data-testid="custom-chevron" />;
+    render(<Calendar mode="single" components={{ Chevron: CustomChevron }} />);
+
+    expect(screen.getAllByTestId("custom-chevron").length).toBeGreaterThan(0);
+  });
+
+  it("formats the month dropdown labels in Spanish (short form)", () => {
+    render(
+      <Calendar
+        mode="single"
+        captionLayout="dropdown"
+        defaultMonth={new Date(2024, 0, 1)}
+      />,
+    );
+
+    // January in es short form is "ene".
+    const monthTrigger = document.querySelector('[data-slot="select-trigger"]');
+    expect(monthTrigger).not.toBeNull();
+    expect(monthTrigger?.textContent?.toLowerCase()).toContain("ene");
+  });
+
+  it("navigates the month via the dropdown onChange handler", async () => {
+    const user = userEvent.setup();
+    render(
+      <Calendar
+        mode="single"
+        captionLayout="dropdown"
+        defaultMonth={new Date(2024, 0, 1)}
+      />,
+    );
+
+    const monthTrigger = document.querySelector(
+      '[data-slot="select-trigger"]',
+    ) as HTMLElement;
+    await user.click(monthTrigger);
+
+    // Base UI Select renders its options in a portal once open.
+    const marchOption = await screen.findByRole("option", { name: /mar/i });
+    await user.click(marchOption);
+
+    // After selecting March, the trigger reflects the new month.
+    await vi.waitFor(() => {
+      const triggers = document.querySelectorAll(
+        '[data-slot="select-trigger"]',
+      );
+      const monthText = within(triggers[0] as HTMLElement).queryByText(/mar/i);
+      expect(monthText).not.toBeNull();
+    });
+  });
+});

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { es } from "date-fns/locale";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+} from "lucide-react";
+import type * as React from "react";
+import type { DropdownProps } from "react-day-picker";
+import { DayPicker } from "react-day-picker";
+import { cn } from "@/lib";
+import { Select } from "../select/select";
+
+const _year = new Date().getFullYear();
+const DEFAULT_START_MONTH = new Date(_year - 100, 0);
+const DEFAULT_END_MONTH = new Date(_year + 100, 11);
+
+type _Opt = { label: string; value: number };
+
+function CalendarDropdown({
+  options = [],
+  value,
+  onChange,
+}: DropdownProps): React.ReactElement {
+  const items: _Opt[] = options.map((o) => ({
+    label: o.label ?? "",
+    value: o.value ?? 0,
+  }));
+  const selected = items.find((o) => o.value === Number(value)) ?? null;
+
+  return (
+    <Select
+      items={items}
+      value={selected}
+      // Month/year dropdowns are calendar navigation, not form fields. Force
+      // off the invalid state so a surrounding invalid Field never paints them
+      // with the error border.
+      aria-invalid={false}
+      className="py-1 h-7"
+      getLabel={(o) => o.label}
+      getId={(o) => String(o.value)}
+      onValueChange={(item) => {
+        if (!onChange || item === null) return;
+        onChange({
+          target: { value: String(item.value) },
+        } as React.ChangeEvent<HTMLSelectElement>);
+      }}
+    />
+  );
+}
+
+const buttonClassNames =
+  "relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+export function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  components: userComponents,
+  mode = "single",
+  captionLayout = "dropdown",
+  startMonth = DEFAULT_START_MONTH,
+  endMonth = DEFAULT_END_MONTH,
+  ...props
+}: React.ComponentProps<typeof DayPicker>): React.ReactElement {
+  const defaultClassNames = {
+    button_next: buttonClassNames,
+    button_previous: buttonClassNames,
+    caption_label:
+      "text-base sm:text-sm font-medium flex items-center gap-2 h-full",
+    day: "size-(--cell-size) text-sm py-px",
+    day_button: cn(
+      buttonClassNames,
+      "in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+    ),
+    dropdown: "absolute bg-popover inset-0 opacity-0",
+    dropdown_root:
+      "relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1",
+    dropdowns:
+      "w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium",
+    hidden: "invisible",
+    month: "w-full",
+    month_caption:
+      "relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2",
+    months: "relative flex flex-col sm:flex-row gap-2",
+    nav: "absolute top-0 flex w-full justify-between z-1",
+    outside:
+      "text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground",
+    range_end: "range-end",
+    range_middle: "range-middle",
+    range_start: "range-start",
+    today:
+      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
+    week_number:
+      "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
+    weekday:
+      "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72",
+  };
+  const mergedClassNames: typeof defaultClassNames = Object.keys(
+    defaultClassNames,
+  ).reduce(
+    (acc, key) => {
+      const userClass = classNames?.[key as keyof typeof classNames];
+      const baseClass =
+        defaultClassNames[key as keyof typeof defaultClassNames];
+
+      acc[key as keyof typeof defaultClassNames] = userClass
+        ? cn(baseClass, userClass)
+        : baseClass;
+
+      return acc;
+    },
+    { ...defaultClassNames } as typeof defaultClassNames,
+  );
+
+  const defaultComponents = {
+    Dropdown: CalendarDropdown,
+    Chevron: ({
+      className,
+      orientation,
+      ...props
+    }: {
+      className?: string;
+      orientation?: "left" | "right" | "up" | "down";
+    }): React.ReactElement => {
+      if (orientation === "left") {
+        return (
+          <ChevronLeftIcon
+            className={cn(className, "rtl:rotate-180")}
+            {...props}
+            aria-hidden="true"
+          />
+        );
+      }
+
+      if (orientation === "right") {
+        return (
+          <ChevronRightIcon
+            className={cn(className, "rtl:rotate-180")}
+            {...props}
+            aria-hidden="true"
+          />
+        );
+      }
+
+      return (
+        <ChevronsUpDownIcon
+          className={className}
+          {...props}
+          aria-hidden="true"
+        />
+      );
+    },
+  };
+
+  const mergedComponents = {
+    ...defaultComponents,
+    ...userComponents,
+  };
+
+  const dayPickerProps = {
+    className: cn(
+      "w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]",
+      className,
+    ),
+    classNames: mergedClassNames,
+    components: mergedComponents,
+    "data-slot": "calendar",
+    formatters: {
+      formatMonthDropdown: (date: Date) =>
+        date.toLocaleString("es", { month: "short" }),
+    } as React.ComponentProps<typeof DayPicker>["formatters"],
+    locale: es,
+    weekStartsOn: 1 as const,
+    captionLayout,
+    startMonth,
+    endMonth,
+    mode,
+    showOutsideDays,
+    ...props,
+  };
+
+  return (
+    <DayPicker
+      {...(dayPickerProps as React.ComponentProps<typeof DayPicker>)}
+    />
+  );
+}

package/src/components/calendar/index.ts

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