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

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

@@ -1,86 +0,0 @@
-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/components/calendar-navigation.tsx

@@ -1,141 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

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

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

@@ -1,58 +0,0 @@
-import {
-  eachDayOfInterval,
-  endOfMonth,
-  endOfWeek,
-  startOfWeek,
-} from "date-fns";
-import { useMemo } from "react";
-import { ClassName } from "@/models";
-import { Day, DayProps } from "./day";
-import { WeekDays, WeekDaysProps } from "./week-days";
-
-type MonthViewProps = {
-  navigationDate: Date;
-  disabled?: (date: Date) => boolean;
-  dayClassName?: ClassName;
-  dayProps?: DayProps;
-  weekDaysClassName?: ClassName;
-  weekDaysProps?: WeekDaysProps;
-};
-
-const MonthView = ({
-  navigationDate,
-  disabled,
-  weekDaysClassName,
-  weekDaysProps,
-  dayClassName,
-  dayProps,
-}: MonthViewProps) => {
-  const getMonthInterval = (): Date[] =>
-    eachDayOfInterval({
-      start: startOfWeek(navigationDate, { weekStartsOn: 1 }),
-      end: endOfWeek(endOfMonth(navigationDate), { weekStartsOn: 1 }),
-    });
-  const days = useMemo(getMonthInterval, [navigationDate]);
-
-  return (
-    <>
-      <WeekDays className={weekDaysClassName} {...weekDaysProps} />
-      <div
-        className="grid grid-cols-7 mt-2 text-sm"
-        data-slot="calendar-month-view"
-      >
-        {days.map((day: Date, index: number) => (
-          <Day
-            key={index}
-            day={day}
-            className={dayClassName}
-            {...dayProps}
-            navigationDate={navigationDate}
-            disabled={disabled?.(day)}
-          />
-        ))}
-      </div>
-    </>
-  );
-};
-
-export { MonthView, type MonthViewProps };

package/src/components/calendar/components/week-days.tsx

@@ -1,27 +0,0 @@
-import { at } from "lodash";
-import { HTMLProps } from "react";
-import { cn } from "../../../lib";
-import { weeksDays } from "../calendar.model";
-
-type WeekDaysProps = HTMLProps<HTMLDivElement>;
-
-const WeekDays = (props: WeekDaysProps) => {
-  return (
-    <div
-      {...props}
-      className={cn(
-        "grid grid-cols-7 font-semibold mt-2 text-xs leading-6 text-center py-1 bg-blue-bell/40 select-none",
-        props.className,
-      )}
-      data-slot="calendar-week-days"
-    >
-      {weeksDays.map((day: string) => (
-        <abbr key={day} aria-label={day} data-slot="calendar-week-day">
-          {at(day, 0)}
-        </abbr>
-      ))}
-    </div>
-  );
-};
-
-export { WeekDays, type WeekDaysProps };

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

@@ -1,29 +0,0 @@
-import { format, setMonth } from "date-fns";
-import { Button } from "../../../components";
-import { monthNames, ViewProps } from "../calendar.model";
-
-const YearView = ({ value, onChange }: ViewProps) => {
-  const selectMonth = (month: number): void => {
-    const newDate = setMonth(value, month);
-    onChange(newDate);
-  };
-
-  return (
-    <div className="grid grid-cols-3 grow" data-slot="calendar-year-view">
-      {monthNames.map((month) => (
-        <Button
-          type="button"
-          className="h-full rounded"
-          onClick={() => selectMonth(monthNames.indexOf(month))}
-          key={month}
-          variant="ghost"
-          data-slot="calendar-year-view-month"
-        >
-          <abbr aria-label={`${month} ${format(value, "yyyy")}`}>{month}</abbr>
-        </Button>
-      ))}
-    </div>
-  );
-};
-
-export { YearView, type ViewProps as YearViewProps };

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

@@ -1,4 +0,0 @@
-export { default as useCalendar } from "./use-calendar";
-export { default as useCalendarNavigation } from "./use-calendar-navigation";
-export { default as useRangeCalendar } from "./use-range-calendar";
-export { default as useSingleCalendar } from "./use-single-calendar";

package/src/components/calendar/hooks/use-calendar-navigation.ts

@@ -1,79 +0,0 @@
-import { addMonths, addYears, format, parse, startOfToday } from "date-fns";
-import { useMemo, useState } from "react";
-import { DateSingle } from "../calendar.model";
-
-function useCalendarNavigation(value: DateSingle = startOfToday()) {
-  const [date, setDate] = useState({
-    month: format(value || startOfToday(), "MM"),
-    year: format(value || startOfToday(), "yyyy"),
-  });
-
-  const navigationDate: Date = useMemo(
-    () => parse(`${date.month}-${date.year}`, "MM-yyyy", new Date()),
-    [date],
-  );
-
-  const setMonth = (newDate: Date): void => {
-    setDate({
-      ...date,
-      month: format(newDate, "MM"),
-    });
-  };
-
-  const setYear = (newDate: Date): void => {
-    setDate({
-      ...date,
-      year: format(newDate, "yyyy"),
-    });
-  };
-
-  const previousMonth = (): void => {
-    const previousMonthDate = addMonths(navigationDate, -1);
-    setDate({
-      month: format(previousMonthDate, "MM"),
-      year: format(previousMonthDate, "yyyy"),
-    });
-  };
-
-  const nextMonth = (): void => {
-    const nextMonthDate = addMonths(navigationDate, 1);
-    setDate({
-      month: format(nextMonthDate, "MM"),
-      year: format(nextMonthDate, "yyyy"),
-    });
-  };
-
-  const previousYear = (): void => {
-    const firstDayPreviousYear = addYears(navigationDate, -1);
-    setYear(firstDayPreviousYear);
-  };
-
-  const nextYear = (): void => {
-    const firstDayNextYear = addYears(navigationDate, 1);
-    setYear(firstDayNextYear);
-  };
-
-  const previousDecade = (): void => {
-    const firstDayPreviousDecade = addYears(navigationDate, -10);
-    setYear(firstDayPreviousDecade);
-  };
-
-  const nextDecade = (): void => {
-    const firstDayNextDecade = addYears(navigationDate, 10);
-    setYear(firstDayNextDecade);
-  };
-
-  return {
-    navigationDate,
-    setMonth,
-    setYear,
-    previousMonth,
-    nextMonth,
-    previousYear,
-    nextYear,
-    previousDecade,
-    nextDecade,
-  };
-}
-
-export default useCalendarNavigation;

package/src/components/calendar/hooks/use-calendar.ts

@@ -1,90 +0,0 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { isDate } from "date-fns";
-import { isArray } from "lodash";
-import { createContext } from "react";
-import {
-  CalendarModeProps,
-  CalendarState,
-  DateMatcher,
-  Mode,
-} from "../calendar.model";
-import { isDateRange } from "../utils/typeguards";
-import useMultipleCalendar from "./use-multiple-calendar";
-import useRangeCalendar from "./use-range-calendar";
-import useSingleCalendar from "./use-single-calendar";
-
-export const CalendarContext = createContext<CalendarState>({
-  defaultStartDate: new Date(),
-  mode: "single",
-  isSingleMode: false,
-  isRangeMode: false,
-  selected: null,
-  selectDate: () => {},
-  isSelected: () => false,
-  isFirstDayFromRange: () => false,
-  isLastDayFromRange: () => false,
-  isInRange: () => false,
-});
-
-function useCalendar<T extends Mode>(props: CalendarModeProps<T>) {
-  const { mode, value, defaultValue, onChange, disabled } = props;
-  const isSingleMode = mode === "single";
-  const isRangeMode = mode === "range";
-  const isMultipleMode = mode === "multiple";
-
-  const [selected = null, setSelected] = useControllableState<DateMatcher>({
-    prop: value,
-    onChange: onChange as any,
-    defaultProp: defaultValue as any,
-  });
-
-  const { selectSingleDate, isSingleSelected } = useSingleCalendar(
-    isDate(selected) ? selected : undefined,
-    setSelected,
-  );
-
-  const { selectRangeDate, isInRange, ...range } = useRangeCalendar(
-    isDateRange(selected) ? selected : undefined,
-    setSelected,
-    disabled,
-  );
-
-  const { selectMultipleDate, isMultipleSelected } = useMultipleCalendar(
-    isArray(selected) ? selected : undefined,
-    setSelected,
-  );
-
-  const selectDate = (date: Date): void => {
-    if (isSingleMode) return selectSingleDate(date);
-    if (isRangeMode) return selectRangeDate(date);
-    if (isMultipleMode) return selectMultipleDate(date);
-  };
-
-  const isSelected = (day: Date): boolean => {
-    if (isSingleMode) return isSingleSelected(day);
-    if (isRangeMode) return isInRange(day);
-    if (isMultipleMode) return isMultipleSelected(day);
-    return false;
-  };
-
-  const getDefaultStartDate = (): Date => {
-    if (isDate(selected)) return selected;
-    if (isArray(selected)) return selected[0];
-    if (isDateRange(selected) && selected.start) return selected.start;
-    return new Date();
-  };
-
-  return {
-    defaultStartDate: getDefaultStartDate(),
-    isSingleMode,
-    isRangeMode,
-    selected,
-    isSelected,
-    selectDate,
-    isInRange,
-    mode,
-    ...range,
-  };
-}
-
-export default useCalendar;

package/src/components/calendar/hooks/use-multiple-calendar.ts

@@ -1,34 +0,0 @@
-import { isSameDay } from "date-fns";
-import { findIndex, isArray } from "lodash";
-import { DateMultiple } from "../calendar.model";
-
-function useMultipleCalendar(
-  selected: DateMultiple | undefined,
-  setSelected: (dates: DateMultiple) => void,
-) {
-  const selectMultipleDate = (date: Date): void => {
-    if (!selected) return setSelected([date]);
-
-    const index = findIndex(selected, (stateDate: Date) =>
-      isSameDay(stateDate, date),
-    );
-
-    if (index === -1) return setSelected([...selected, date]);
-
-    const newSelected = [
-      ...selected.slice(0, index),
-      ...selected.slice(index + 1),
-    ];
-    setSelected(newSelected);
-  };
-
-  const isMultipleSelected = (day: Date): boolean =>
-    isArray(selected) && selected.some((date: Date) => isSameDay(date, day));
-
-  return {
-    selectMultipleDate,
-    isMultipleSelected,
-  };
-}
-
-export default useMultipleCalendar;