@vendure/dashboard 3.2.2 → 3.2.4

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

@@ -1,69 +1,514 @@
-import * as React from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { DayPicker } from 'react-day-picker';
+"use client"
 
-import { cn } from '@/lib/utils.js';
-import { buttonVariants } from '@/components/ui/button.js';
+// A custom calendar that is compatible
+// with react-day-picker v9 from https://date-picker.luca-felix.com/
 
+import { Button, buttonVariants } from "@/components/ui/button.js"
+import { cn } from "@/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,
-    classNames,
-    showOutsideDays = true,
-    ...props
-}: React.ComponentProps<typeof DayPicker>) {
-    return (
-        <DayPicker
-            showOutsideDays={showOutsideDays}
-            className={cn('p-3', className)}
-            classNames={{
-                months: 'flex flex-col sm:flex-row gap-2',
-                month: 'flex flex-col gap-4',
-                caption: 'flex justify-center pt-1 relative items-center w-full',
-                caption_label: 'text-sm font-medium',
-                nav: 'flex items-center gap-1',
-                nav_button: cn(
-                    buttonVariants({ variant: 'outline' }),
-                    'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-                ),
-                nav_button_previous: 'absolute left-1',
-                nav_button_next: 'absolute right-1',
-                table: 'w-full border-collapse space-x-1',
-                head_row: 'flex',
-                head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
-                row: 'flex w-full mt-2',
-                cell: cn(
-                    'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
-                    props.mode === 'range'
-                        ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
-                        : '[&:has([aria-selected])]:rounded-md',
-                ),
-                day: cn(
-                    buttonVariants({ variant: 'ghost' }),
-                    'size-8 p-0 font-normal aria-selected:opacity-100',
-                ),
-                day_range_start:
-                    'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
-                day_range_end: 'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
-                day_selected:
-                    'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-                day_today: 'bg-accent text-accent-foreground',
-                day_outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
-                day_disabled: 'text-muted-foreground opacity-50',
-                day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
-                day_hidden: 'invisible',
-                ...classNames,
-            }}
-            components={{
-                IconLeft: ({ className, ...props }) => (
-                    <ChevronLeft className={cn('size-4', className)} {...props} />
-                ),
-                IconRight: ({ className, ...props }) => (
-                    <ChevronRight className={cn('size-4', className)} {...props} />
-                ),
-            }}
+  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
+}) {
+  const { nextMonth, previousMonth, goToMonth } = useDayPicker()
+
+  const isPreviousDisabled = (() => {
+    if (navView === "years") {
+      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
+  })()
+
+  const isNextDisabled = (() => {
+    if (navView === "years") {
+      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}
+        {...props}
+      />
+    )
+  }
+  return (
+    <table className={className} {...props}>
+      {children}
+    </table>
+  )
+}
+
+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>
+  )
 }
 
-export { Calendar };
+export { Calendar }