@vendure/dashboard 3.3.6-master-202507030732 → 3.3.6-master-202507030835

package/src/lib/components/ui/calendar.tsx

@@ -1,447 +1,208 @@
-'use client';
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
-// A custom calendar that is compatible
-// with react-day-picker v9 from https://date-picker.luca-felix.com/
+import { cn } from "@/vdb/lib/utils"
+import { Button, buttonVariants } from "@/vdb/components/ui/button"
 
-import { Button, buttonVariants } from '@/vdb/components/ui/button.js';
-import { cn } from '@/vdb/lib/utils.js';
-import { differenceInCalendarDays } from 'date-fns';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import * as React from 'react';
-import { DayPicker, labelNext, labelPrevious, useDayPicker, type DayPickerProps } from 'react-day-picker';
-
-export type CalendarProps = DayPickerProps & {
-    /**
-     * In the year view, the number of years to display at once.
-     * @default 12
-     */
-    yearRange?: number;
-
-    /**
-     * Wether to show the year switcher in the caption.
-     * @default true
-     */
-    showYearSwitcher?: boolean;
-
-    monthsClassName?: string;
-    monthCaptionClassName?: string;
-    weekdaysClassName?: string;
-    weekdayClassName?: string;
-    monthClassName?: string;
-    captionClassName?: string;
-    captionLabelClassName?: string;
-    buttonNextClassName?: string;
-    buttonPreviousClassName?: string;
-    navClassName?: string;
-    monthGridClassName?: string;
-    weekClassName?: string;
-    dayClassName?: string;
-    dayButtonClassName?: string;
-    rangeStartClassName?: string;
-    rangeEndClassName?: string;
-    selectedClassName?: string;
-    todayClassName?: string;
-    outsideClassName?: string;
-    disabledClassName?: string;
-    rangeMiddleClassName?: string;
-    hiddenClassName?: string;
-};
-
-type NavView = 'days' | 'years';
-
-/**
- * A custom calendar component built on top of react-day-picker.
- * @param props The props for the calendar.
- * @default yearRange 12
- * @returns
- */
 function Calendar({
-    className,
-    showOutsideDays = true,
-    showYearSwitcher = true,
-    yearRange = 12,
-    numberOfMonths,
-    ...props
-}: CalendarProps) {
-    const [navView, setNavView] = React.useState<NavView>('days');
-    const [displayYears, setDisplayYears] = React.useState<{
-        from: number;
-        to: number;
-    }>(
-        React.useMemo(() => {
-            const currentYear = new Date().getFullYear();
-            return {
-                from: currentYear - Math.floor(yearRange / 2 - 1),
-                to: currentYear + Math.ceil(yearRange / 2),
-            };
-        }, [yearRange]),
-    );
-
-    const { onNextClick, onPrevClick, startMonth, endMonth } = props;
-
-    const columnsDisplayed = navView === 'years' ? 1 : numberOfMonths;
-
-    const _monthsClassName = cn('relative flex', props.monthsClassName);
-    const _monthCaptionClassName = cn(
-        'relative mx-10 flex h-7 items-center justify-center',
-        props.monthCaptionClassName,
-    );
-    const _weekdaysClassName = cn('flex flex-row', props.weekdaysClassName);
-    const _weekdayClassName = cn('w-8 text-sm font-normal text-muted-foreground', props.weekdayClassName);
-    const _monthClassName = cn('w-full', props.monthClassName);
-    const _captionClassName = cn('relative flex items-center justify-center pt-1', props.captionClassName);
-    const _captionLabelClassName = cn('truncate text-sm font-medium', props.captionLabelClassName);
-    const buttonNavClassName = buttonVariants({
-        variant: 'outline',
-        className: 'absolute h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-    });
-    const _buttonNextClassName = cn(buttonNavClassName, 'right-0', props.buttonNextClassName);
-    const _buttonPreviousClassName = cn(buttonNavClassName, 'left-0', props.buttonPreviousClassName);
-    const _navClassName = cn('flex items-start', props.navClassName);
-    const _monthGridClassName = cn('mx-auto mt-4', props.monthGridClassName);
-    const _weekClassName = cn('mt-2 flex w-max items-start', props.weekClassName);
-    const _dayClassName = cn(
-        'flex size-8 flex-1 items-center justify-center p-0 text-sm',
-        props.dayClassName,
-    );
-    const _dayButtonClassName = cn(
-        buttonVariants({ variant: 'ghost' }),
-        'size-8 rounded-md p-0 font-normal transition-none aria-selected:opacity-100',
-        props.dayButtonClassName,
-    );
-    const buttonRangeClassName =
-        'bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground';
-    const _rangeStartClassName = cn(
-        buttonRangeClassName,
-        'day-range-start rounded-s-md',
-        props.rangeStartClassName,
-    );
-    const _rangeEndClassName = cn(
-        buttonRangeClassName,
-        'day-range-end rounded-e-md',
-        props.rangeEndClassName,
-    );
-    const _rangeMiddleClassName = cn(
-        'bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground',
-        props.rangeMiddleClassName,
-    );
-    const _selectedClassName = cn(
-        '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground',
-        props.selectedClassName,
-    );
-    const _todayClassName = cn(
-        '[&>button]:bg-accent [&>button]:text-accent-foreground',
-        props.todayClassName,
-    );
-    const _outsideClassName = cn(
-        'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-        props.outsideClassName,
-    );
-    const _disabledClassName = cn('text-muted-foreground opacity-50', props.disabledClassName);
-    const _hiddenClassName = cn('invisible flex-1', props.hiddenClassName);
-
-    return (
-        <DayPicker
-            showOutsideDays={showOutsideDays}
-            className={cn('p-3', className)}
-            style={{
-                width: 248.8 * (columnsDisplayed ?? 1) + 'px',
-            }}
-            classNames={{
-                months: _monthsClassName,
-                month_caption: _monthCaptionClassName,
-                weekdays: _weekdaysClassName,
-                weekday: _weekdayClassName,
-                month: _monthClassName,
-                caption: _captionClassName,
-                caption_label: _captionLabelClassName,
-                button_next: _buttonNextClassName,
-                button_previous: _buttonPreviousClassName,
-                nav: _navClassName,
-                month_grid: _monthGridClassName,
-                week: _weekClassName,
-                day: _dayClassName,
-                day_button: _dayButtonClassName,
-                range_start: _rangeStartClassName,
-                range_middle: _rangeMiddleClassName,
-                range_end: _rangeEndClassName,
-                selected: _selectedClassName,
-                today: _todayClassName,
-                outside: _outsideClassName,
-                disabled: _disabledClassName,
-                hidden: _hiddenClassName,
-            }}
-            components={{
-                Chevron: ({ orientation }) => {
-                    const Icon = orientation === 'left' ? ChevronLeft : ChevronRight;
-                    return <Icon className="h-4 w-4" />;
-                },
-                Nav: ({ className }) => (
-                    <Nav
-                        className={className}
-                        displayYears={displayYears}
-                        navView={navView}
-                        setDisplayYears={setDisplayYears}
-                        startMonth={startMonth}
-                        endMonth={endMonth}
-                        onPrevClick={onPrevClick}
-                    />
-                ),
-                CaptionLabel: props => (
-                    <CaptionLabel
-                        showYearSwitcher={showYearSwitcher}
-                        navView={navView}
-                        setNavView={setNavView}
-                        displayYears={displayYears}
-                        {...props}
-                    />
-                ),
-                MonthGrid: ({ className, children, ...props }) => (
-                    <MonthGrid
-                        children={children}
-                        className={className}
-                        displayYears={displayYears}
-                        startMonth={startMonth}
-                        endMonth={endMonth}
-                        navView={navView}
-                        setNavView={setNavView}
-                        {...props}
-                    />
-                ),
-            }}
-            numberOfMonths={columnsDisplayed}
-            {...props}
-        />
-    );
-}
-
-Calendar.displayName = 'Calendar';
-
-function Nav({
-    className,
-    navView,
-    startMonth,
-    endMonth,
-    displayYears,
-    setDisplayYears,
-    onPrevClick,
-    onNextClick,
-}: {
-    className?: string;
-    navView: NavView;
-    startMonth?: Date;
-    endMonth?: Date;
-    displayYears: { from: number; to: number };
-    setDisplayYears: React.Dispatch<React.SetStateAction<{ from: number; to: number }>>;
-    onPrevClick?: (date: Date) => void;
-    onNextClick?: (date: Date) => void;
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
 }) {
-    const { nextMonth, previousMonth, goToMonth } = useDayPicker();
-
-    const isPreviousDisabled = (() => {
-        if (navView === 'years') {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
             return (
-                (startMonth &&
-                    differenceInCalendarDays(new Date(displayYears.from - 1, 0, 1), startMonth) < 0) ||
-                (endMonth && differenceInCalendarDays(new Date(displayYears.from - 1, 0, 1), endMonth) > 0)
-            );
-        }
-        return !previousMonth;
-    })();
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
 
-    const isNextDisabled = (() => {
-        if (navView === 'years') {
+          if (orientation === "right") {
             return (
-                (startMonth &&
-                    differenceInCalendarDays(new Date(displayYears.to + 1, 0, 1), startMonth) < 0) ||
-                (endMonth && differenceInCalendarDays(new Date(displayYears.to + 1, 0, 1), endMonth) > 0)
-            );
-        }
-        return !nextMonth;
-    })();
-
-    const handlePreviousClick = React.useCallback(() => {
-        if (!previousMonth) return;
-        if (navView === 'years') {
-            setDisplayYears(prev => ({
-                from: prev.from - (prev.to - prev.from + 1),
-                to: prev.to - (prev.to - prev.from + 1),
-            }));
-            onPrevClick?.(new Date(displayYears.from - (displayYears.to - displayYears.from), 0, 1));
-            return;
-        }
-        goToMonth(previousMonth);
-        onPrevClick?.(previousMonth);
-    }, [previousMonth, goToMonth]);
-
-    const handleNextClick = React.useCallback(() => {
-        if (!nextMonth) return;
-        if (navView === 'years') {
-            setDisplayYears(prev => ({
-                from: prev.from + (prev.to - prev.from + 1),
-                to: prev.to + (prev.to - prev.from + 1),
-            }));
-            onNextClick?.(new Date(displayYears.from + (displayYears.to - displayYears.from), 0, 1));
-            return;
-        }
-        goToMonth(nextMonth);
-        onNextClick?.(nextMonth);
-    }, [goToMonth, nextMonth]);
-    return (
-        <nav className={cn('flex items-center', className)}>
-            <Button
-                variant="outline"
-                className="absolute left-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100"
-                type="button"
-                tabIndex={isPreviousDisabled ? undefined : -1}
-                disabled={isPreviousDisabled}
-                aria-label={
-                    navView === 'years'
-                        ? `Go to the previous ${displayYears.to - displayYears.from + 1} years`
-                        : labelPrevious(previousMonth)
-                }
-                onClick={handlePreviousClick}
-            >
-                <ChevronLeft className="h-4 w-4" />
-            </Button>
-
-            <Button
-                variant="outline"
-                className="absolute right-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100"
-                type="button"
-                tabIndex={isNextDisabled ? undefined : -1}
-                disabled={isNextDisabled}
-                aria-label={
-                    navView === 'years'
-                        ? `Go to the next ${displayYears.to - displayYears.from + 1} years`
-                        : labelNext(nextMonth)
-                }
-                onClick={handleNextClick}
-            >
-                <ChevronRight className="h-4 w-4" />
-            </Button>
-        </nav>
-    );
-}
-
-function CaptionLabel({
-    children,
-    showYearSwitcher,
-    navView,
-    setNavView,
-    displayYears,
-    ...props
-}: {
-    showYearSwitcher?: boolean;
-    navView: NavView;
-    setNavView: React.Dispatch<React.SetStateAction<NavView>>;
-    displayYears: { from: number; to: number };
-} & React.HTMLAttributes<HTMLSpanElement>) {
-    if (!showYearSwitcher) return <span {...props}>{children}</span>;
-    return (
-        <Button
-            className="h-7 w-full truncate text-sm font-medium"
-            variant="ghost"
-            size="sm"
-            onClick={() => setNavView(prev => (prev === 'days' ? 'years' : 'days'))}
-        >
-            {navView === 'days' ? children : displayYears.from + ' - ' + displayYears.to}
-        </Button>
-    );
-}
-
-function MonthGrid({
-    className,
-    children,
-    displayYears,
-    startMonth,
-    endMonth,
-    navView,
-    setNavView,
-    ...props
-}: {
-    className?: string;
-    children: React.ReactNode;
-    displayYears: { from: number; to: number };
-    startMonth?: Date;
-    endMonth?: Date;
-    navView: NavView;
-    setNavView: React.Dispatch<React.SetStateAction<NavView>>;
-} & React.TableHTMLAttributes<HTMLTableElement>) {
-    if (navView === 'years') {
-        return (
-            <YearGrid
-                displayYears={displayYears}
-                startMonth={startMonth}
-                endMonth={endMonth}
-                setNavView={setNavView}
-                navView={navView}
-                className={className}
+              <ChevronRightIcon
+                className={cn("size-4", className)}
                 {...props}
-            />
-        );
-    }
-    return (
-        <table className={className} {...props}>
-            {children}
-        </table>
-    );
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
 }
 
-function YearGrid({
-    className,
-    displayYears,
-    startMonth,
-    endMonth,
-    setNavView,
-    navView,
-    ...props
-}: {
-    className?: string;
-    displayYears: { from: number; to: number };
-    startMonth?: Date;
-    endMonth?: Date;
-    setNavView: React.Dispatch<React.SetStateAction<NavView>>;
-    navView: NavView;
-} & React.HTMLAttributes<HTMLDivElement>) {
-    const { goToMonth, selected } = useDayPicker();
-
-    return (
-        <div className={cn('grid grid-cols-4 gap-y-2', className)} {...props}>
-            {Array.from({ length: displayYears.to - displayYears.from + 1 }, (_, i) => {
-                const isBefore =
-                    differenceInCalendarDays(new Date(displayYears.from + i, 11, 31), startMonth!) < 0;
-
-                const isAfter =
-                    differenceInCalendarDays(new Date(displayYears.from + i, 0, 0), endMonth!) > 0;
-
-                const isDisabled = isBefore || isAfter;
-                return (
-                    <Button
-                        key={i}
-                        className={cn(
-                            'h-7 w-full text-sm font-normal text-foreground',
-                            displayYears.from + i === new Date().getFullYear() &&
-                                'bg-accent font-medium text-accent-foreground',
-                        )}
-                        variant="ghost"
-                        onClick={() => {
-                            setNavView('days');
-                            goToMonth(
-                                new Date(
-                                    displayYears.from + i,
-                                    (selected as Date | undefined)?.getMonth() ?? 0,
-                                ),
-                            );
-                        }}
-                        disabled={navView === 'years' ? isDisabled : undefined}
-                    >
-                        {displayYears.from + i}
-                    </Button>
-                );
-            })}
-        </div>
-    );
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
 }
 
-export { Calendar };
+export { Calendar, CalendarDayButton }