@boxcustodia/library 2.0.0-alpha.11 → 2.0.0-alpha.12

package/src/components/calendar/calendar.model.ts

@@ -0,0 +1,86 @@
+export type CalendarView = "month" | "year" | "decade";
+export type Mode = "single" | "range" | "multiple";
+
+export type DateSingle = Date | null;
+
+export type DateRange = {
+  start: DateSingle;
+  end: DateSingle;
+};
+
+export type DateMultiple = Date[];
+
+export type DateMatcher = DateSingle | DateRange | DateMultiple;
+
+export type SingleDateValue = {
+  value?: DateSingle;
+  defaultValue?: DateSingle;
+  onChange?: (date: DateSingle) => void;
+};
+
+export type RangeDateValue = {
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onChange?: (date: DateRange) => void;
+};
+
+export type MultipleDateValue = {
+  value?: Date[];
+  defaultValue?: Date[];
+  onChange?: (dates: Date[]) => void;
+};
+
+export type CalendarBaseProps<T extends Mode> = {
+  disabled?: (date: Date) => boolean;
+  mode: T;
+};
+
+export type CalendarModeProps<T extends Mode> = CalendarBaseProps<T> &
+  {
+    single: SingleDateValue;
+    range: RangeDateValue;
+    multiple: MultipleDateValue;
+  }[T];
+
+export interface ViewProps {
+  value: Date;
+  onChange: (date: Date) => void;
+}
+
+export type CalendarState = {
+  defaultStartDate: Date;
+  mode: Mode;
+  isSingleMode: boolean;
+  isRangeMode: boolean;
+  selected: DateMatcher;
+  selectDate: (date: Date) => void;
+  isSelected: (day: Date) => boolean;
+  isInRange: (day: Date) => boolean;
+  isFirstDayFromRange: (day: Date) => boolean;
+  isLastDayFromRange: (day: Date) => boolean;
+};
+
+export const monthNames = [
+  "Enero",
+  "Febrero",
+  "Marzo",
+  "Abril",
+  "Mayo",
+  "Junio",
+  "Julio",
+  "Agosto",
+  "Septiembre",
+  "Octubre",
+  "Noviembre",
+  "Diciembre",
+] as const;
+
+export const weeksDays: string[] = [
+  "Lunes",
+  "Martes",
+  "Miercoles",
+  "Jueves",
+  "Viernes",
+  "Sabado",
+  "Domingo",
+] as const;

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 10 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,12 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Calendar } from "../../components";
+
+describe("Calendar component", () => {
+  it.skip("should render correctly", () => {
+    render(<Calendar mode="single" />);
+    const component = screen.getByTestId("Calendar");
+
+    expect(component).toBeInTheDocument();
+  });
+});

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,185 @@
+"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 + 10, 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}
+      className="py-1"
+      getLabel={(o) => o.label}
+      getValue={(o) => String(o.value)}
+      onChange={(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/components/calendar-navigation.tsx

@@ -0,0 +1,141 @@
+import {
+  eachYearOfInterval,
+  endOfDecade,
+  format,
+  startOfDecade,
+} from "date-fns";
+import { es } from "date-fns/locale";
+import { first, last } from "lodash";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ComponentProps, HTMLProps, useMemo } from "react";
+import { cn } from "../../../lib";
+import { Button } from "../../button";
+import { type CalendarView } from "../calendar.model";
+
+type ButtonProps = ComponentProps<typeof Button>;
+
+interface CalendarNavigationProps {
+  view: CalendarView;
+  setView: (view: CalendarView) => void;
+  value: Date;
+  previousMonth: () => void;
+  nextMonth: () => void;
+  previousYear: () => void;
+  nextYear: () => void;
+  previousDecade: () => void;
+  nextDecade: () => void;
+  goBackProps?: Omit<ButtonProps, "onClick">;
+  goNextProps?: Omit<ButtonProps, "onClick">;
+  changeViewProps?: Omit<HTMLProps<HTMLButtonElement>, "onClick">;
+}
+
+const CalendarNavigation = ({
+  view,
+  setView,
+  value,
+  previousMonth,
+  nextMonth,
+  previousYear,
+  nextYear,
+  previousDecade,
+  nextDecade,
+  goBackProps,
+  goNextProps,
+  changeViewProps,
+}: CalendarNavigationProps) => {
+  const monthView = view === "month";
+  const yearView = view === "year";
+  const decadeView = view === "decade";
+
+  const navigateBack = (): void => {
+    if (decadeView) return previousDecade();
+    if (yearView) return previousYear();
+    previousMonth();
+  };
+
+  const navigateNext = (): void => {
+    if (decadeView) return nextDecade();
+    if (yearView) return nextYear();
+    nextMonth();
+  };
+
+  const changeView = (): void => {
+    if (monthView) return setView("year");
+    if (yearView) return setView("decade");
+  };
+
+  const getLabel = (): string => {
+    if (decadeView) return getDecadeLabel();
+    if (yearView) return format(value, "yyyy");
+    return format(value, "MMMM yyyy", { locale: es });
+  };
+
+  const getDecadeLabel = (): string => {
+    if (!value) return "";
+
+    const interval = eachYearOfInterval({
+      start: startOfDecade(value),
+      end: endOfDecade(value),
+    });
+
+    const startDate = first(interval)!;
+    const endDate = last(interval)!;
+
+    return `${format(startDate, "yyyy")} - ${format(endDate, "yyyy")}`;
+  };
+
+  const navigationLabel: string = useMemo(getLabel, [value, view]);
+
+  return (
+    <>
+      <div
+        className="flex items-center justify-between"
+        data-slot="calendar-navigation"
+      >
+        <Button
+          onClick={navigateBack}
+          size="icon"
+          variant="ghost"
+          className="border w-6 opacity-50 hover:opacity-100"
+          data-slot="calendar-navigation-back"
+          {...goBackProps}
+        >
+          <ChevronLeft
+            className="h-4 w-4"
+            data-slot="calendar-navigation-back-icon"
+          />
+          <span className="sr-only">Ir a anterior</span>
+        </Button>
+        <button
+          onClick={changeView}
+          disabled={decadeView}
+          {...changeViewProps}
+          type="button"
+          className={cn(
+            "font-semibold pb-px text-gray-900 text-lg text-blue-bell select-none min-w-[60%] capitalize",
+            changeViewProps?.className,
+          )}
+          data-slot="calendar-navigation-label"
+        >
+          {navigationLabel}
+        </button>
+        <Button
+          onClick={navigateNext}
+          size="icon"
+          variant="ghost"
+          className="border w-6 opacity-50 hover:opacity-100"
+          data-slot="calendar-navigation-next"
+          {...goNextProps}
+        >
+          <ChevronRight
+            className="h-4 w-4"
+            data-slot="calendar-navigation-next-icon"
+          />
+          <span className="sr-only">Ir a siguiente</span>
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export { CalendarNavigation, type CalendarNavigationProps };

package/src/components/calendar/components/day.tsx

@@ -0,0 +1,61 @@
+import { format, isSameMonth, isToday, isWeekend } from "date-fns";
+import { HTMLProps, useContext, useMemo } from "react";
+import { cn } from "../../../lib";
+import { CalendarContext } from "../hooks/use-calendar";
+
+type DayProps = {
+  day: Date;
+  navigationDate: Date;
+} & HTMLProps<HTMLButtonElement>;
+
+const Day = ({ day, navigationDate, className, ...props }: DayProps) => {
+  const {
+    isSelected: isDateSelected,
+    mode,
+    selected,
+    isRangeMode,
+    selectDate,
+    isFirstDayFromRange,
+    isLastDayFromRange,
+  } = useContext(CalendarContext);
+
+  const isSelected: boolean = useMemo(
+    () => isDateSelected(day),
+    [day, selected],
+  );
+
+  const isDifferentMonth = !isSelected && !isSameMonth(day, navigationDate);
+  const weekend = !isSelected && isWeekend(day);
+
+  return (
+    <button
+      {...props}
+      onClick={() => selectDate(day)}
+      type="button"
+      data-slot="calendar-day"
+      data-state-mode={mode}
+      data-state-today={isToday(day) || undefined}
+      data-state-selected={isSelected || undefined}
+      data-state-different-month={isDifferentMonth || undefined}
+      data-state-weekend={weekend || undefined}
+      data-state-range-mode={isRangeMode || undefined}
+      data-state-first-day={isFirstDayFromRange(day) || undefined}
+      data-state-last-day={isLastDayFromRange(day) || undefined}
+      data-state-in-range={(isRangeMode && isSelected) || undefined}
+      className={cn(
+        "mx-auto flex pt-px rounded-md items-center justify-center w-full aspect-square hover:bg-accent",
+        "data-[state-today]:text-error",
+        "data-[state-selected]:bg-primary data-[state-selected]:!text-primary-foreground data-[state-selected]:hover:bg-primary/80",
+        "data-[state-different-month]:opacity-50 data-[state-weekend=true]:opacity-50",
+        "data-[state-in-range]:not-data-[state-first-day]:not-data-[state-last-day]:rounded-none",
+        "data-[state-first-day]:rounded-l-full",
+        "data-[state-last-day]:rounded-r-full",
+        className,
+      )}
+    >
+      <time dateTime={format(day, "yyyy-MM-dd")}>{format(day, "d")}</time>
+    </button>
+  );
+};
+
+export { Day, type DayProps };

package/src/components/calendar/components/decade-view.tsx

@@ -0,0 +1,45 @@
+import {
+  eachYearOfInterval,
+  endOfDecade,
+  format,
+  setYear,
+  startOfDecade,
+} from "date-fns";
+import { useMemo } from "react";
+import { Button } from "../../../components";
+import { ViewProps } from "../calendar.model";
+
+const DecadeView = ({ value, onChange }: ViewProps) => {
+  const getDecadeInterval = (): Date[] => {
+    return eachYearOfInterval({
+      start: startOfDecade(value),
+      end: endOfDecade(value),
+    });
+  };
+
+  const selectYear = (year: Date): void => {
+    const date = setYear(value, parseInt(format(year, "yyyy")));
+    onChange(date);
+  };
+
+  const years = useMemo(getDecadeInterval, [value]);
+
+  return (
+    <div className="grid grid-cols-3 grow" data-slot="calendar-decade-view">
+      {years.map((year: Date, index: number) => (
+        <Button
+          key={index}
+          onClick={() => selectYear(year)}
+          className="h-full rounded-none"
+          type="button"
+          variant="ghost"
+          data-slot="calendar-decade-view-year"
+        >
+          {format(year, "yyyy")}
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+export { DecadeView, type ViewProps as DecadeViewProps };

package/src/components/calendar/components/index.ts

@@ -0,0 +1,6 @@
+export * from "./calendar-navigation";
+export * from "./day";
+export * from "./decade-view";
+export * from "./month-view";
+export * from "./week-days";
+export * from "./year-view";