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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,91 @@
+import {
+  eachDayOfInterval,
+  isBefore,
+  isSameDay,
+  isWithinInterval,
+  startOfDay,
+} from "date-fns";
+import { DateRange, DateSingle } from "../calendar.model";
+import { isDateRange } from "../utils/typeguards";
+
+function useRangeCalendar(
+  selected: DateRange | undefined,
+  // FIX: remove any
+  setSelected: any,
+  disabled?: (date: Date) => boolean,
+) {
+  const selectRangeDate = (date: Date): void => {
+    const firstDateSelected = selected?.start;
+    if (firstDateSelected) {
+      const { start, end } = selected;
+      const isEndBeforeStart = isBefore(date, start!);
+      const isNewRange = start && end;
+
+      if (isEndBeforeStart || isNewRange) {
+        setSelected({ start: date, end: undefined });
+        return;
+      }
+
+      if (hasDisabledDateInRange(start, date)) return;
+
+      setSelected({
+        start,
+        end: date,
+      });
+    } else {
+      setSelected({ start: date, end: undefined });
+    }
+  };
+
+  const hasDisabledDateInRange = (
+    start: DateSingle,
+    end: DateSingle,
+  ): boolean => {
+    if (!disabled) return false;
+    if (!start || !end) return false;
+    const interval = eachDayOfInterval({ start: startOfDay(start), end: end });
+    const hasDisabled = interval.some((date) => disabled(date));
+    return hasDisabled;
+  };
+
+  const isInRange = (day: Date): boolean => {
+    if (!isDateRange(selected)) return false;
+    if (!selected) return false;
+
+    const { start, end } = selected;
+
+    const isOnlyStartSelected = start && !end;
+    if (isOnlyStartSelected) {
+      return isSameDay(day, start);
+    }
+
+    if (!start || !end) return false;
+    return isWithinInterval(day, {
+      start: startOfDay(start),
+      end: startOfDay(end),
+    });
+  };
+
+  const isFirstDayFromRange = (day: Date): boolean => {
+    if (!selected) return false;
+    if (!isDateRange(selected)) return false;
+    if (!selected.start) return false;
+    return isSameDay(day, selected.start);
+  };
+
+  const isLastDayFromRange = (day: Date): boolean => {
+    if (!selected) return false;
+    if (!isDateRange(selected)) return false;
+    if (!selected.end) return false;
+    return isSameDay(day, selected.end);
+  };
+
+  return {
+    selectRangeDate,
+    isInRange,
+    isFirstDayFromRange,
+    isLastDayFromRange,
+  };
+}
+
+export default useRangeCalendar;

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

@@ -0,0 +1,18 @@
+import { isDate, isSameDay } from "date-fns";
+import { DateSingle } from "../calendar.model";
+
+function useSingleCalendar(selected: DateSingle | undefined, setSelected: any) {
+  const selectSingleDate = (date: Date): void => {
+    setSelected(date);
+  };
+
+  const isSingleSelected = (day: Date): boolean =>
+    isDate(selected) && isSameDay(day, selected);
+
+  return {
+    selectSingleDate,
+    isSingleSelected,
+  };
+}
+
+export default useSingleCalendar;

package/src/components/calendar/index.ts

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

package/src/components/calendar/utils/typeguards.ts

@@ -0,0 +1,7 @@
+import { DateRange } from "../calendar.model";
+
+export function isDateRange(value: unknown): value is DateRange {
+  return Boolean(
+    value && typeof value === "object" && "start" in value && "end" in value,
+  );
+}

package/src/components/card/card.stories.tsx

@@ -0,0 +1,116 @@
+import { faker } from "@faker-js/faker";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentType } from "react";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components";
+
+/**
+ * El componente Card es un contenedor versátil que permite organizar y presentar contenido
+ * de manera estructurada y visualmente atractiva.
+ *
+ * ### Características principales
+ * - Diseño modular y flexible
+ * - Soporte para encabezados, contenido y pie de página
+ * - Personalizable a través de className
+ * - Ideal para mostrar información, productos, artículos, etc.
+ *
+ * ### Estructura básica
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Título del Card</CardTitle>
+ *     <CardDescription>Descripción opcional</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     Contenido principal
+ *   </CardContent>
+ *   <CardFooter>
+ *     Acciones o contenido adicional
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+const meta: Meta<typeof Card> = {
+  title: "data display/Card",
+  component: Card,
+  tags: ["autodocs"],
+  subcomponents: {
+    CardHeader: CardHeader as ComponentType<unknown>,
+    CardTitle: CardTitle as ComponentType<unknown>,
+    CardDescription: CardDescription as ComponentType<unknown>,
+    CardContent: CardContent as ComponentType<unknown>,
+    CardFooter: CardFooter as ComponentType<unknown>,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+/**
+ * Ejemplo básico de un Card con todos sus componentes.
+ * Muestra la estructura típica con encabezado, contenido y pie de página.
+ */
+export const Default: Story = {
+  render: () => (
+    <Card className="w-[350px] shadow-md rounded-lg">
+      <CardHeader className="p-4">
+        <CardTitle className="text-2xl">
+          How to Improve Your Productivity
+        </CardTitle>
+        <CardDescription className="text-sm">By Jane Doe</CardDescription>
+      </CardHeader>
+      <CardContent className="p-4">
+        <p className="text-gray-700 text-base">
+          Discover the best strategies and tools to boost your productivity in
+          work and life. Learn how to manage your time effectively and stay
+          focused on what really matters.
+        </p>
+      </CardContent>
+      <CardFooter className="px-4 py-3 flex justify-between">
+        <Button variant="outline">Read More</Button>
+        <Button className="bg-blue-600 text-white">Save</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+/**
+ * Ejemplo de Card con imagen y diseño de producto.
+ * Demuestra cómo integrar elementos multimedia y crear layouts más complejos.
+ */
+export const Media: Story = {
+  render: () => (
+    <Card className="w-[350px] shadow-lg rounded-lg overflow-hidden">
+      <img
+        src={faker.image.url()}
+        alt="Featured Product"
+        className="w-full h-[150px] object-cover"
+      />
+      <CardContent className="p-4">
+        <CardTitle className="text-xl font-bold text-gray-900">
+          Villa Luxury
+        </CardTitle>
+        <CardDescription className="text-sm text-gray-600">
+          Escapa a esta luxuriosa aldea con vistas maravillosas del océano y
+          piscina privada.
+        </CardDescription>
+        <div className="flex items-center mt-4">
+          <span className="text-2xl font-semibold text-gray-900">$750</span>
+          <span className="ml-2 text-sm text-gray-500">/ noche</span>
+        </div>
+      </CardContent>
+      <CardFooter className="px-4 py-3 bg-gray-100 flex justify-between">
+        <Button variant="outline">Detalle</Button>
+        <Button className="bg-blue-600 text-white">Comprar</Button>
+      </CardFooter>
+    </Card>
+  ),
+};

package/src/components/card/card.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { cn } from "../../lib";
+
+export const Card = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+    data-slot="card"
+  />
+);
+
+export const CardHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col space-y-1 p-6", className)}
+    {...props}
+    data-slot="card-header"
+  />
+);
+
+export const CardTitle = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h3
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+    data-slot="card-title"
+  />
+);
+
+export const CardDescription = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+    data-slot="card-description"
+  />
+);
+
+export const CardContent = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("p-6 pt-0", className)}
+    {...props}
+    data-slot="card-content"
+  />
+);
+
+export const CardFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+    data-slot="card-footer"
+  />
+);

package/src/components/card/index.ts

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