feat: add month/year dropdown to calendar component

Author: juliano-quatrin-nunes

src/components/ui/Calendar.tsx

@@ -1,6 +1,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { format } from "date-fns";
 import * as React from "react";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, DropdownProps } from "react-day-picker";
 import { cn } from "#/lib/utils";
 import { buttonVariants } from "#/components/ui/Button";
 
@@ -78,9 +79,31 @@ const DateInput = ({ value, onChange, className = "" }) => {
 const IconLeft = () => <ChevronLeftIcon className="h-4 w-4" />;
 const IconRight = () => <ChevronRightIcon className="h-4 w-4" />;
 
+const CalendarDropdown = ({
+  value,
+  onChange,
+  children,
+  className,
+}: DropdownProps) => (
+  <div className={className}>
+    <select
+      value={value}
+      onChange={onChange}
+      // eslint-disable-next-line react/forbid-dom-props
+      style={{ appearance: "none", WebkitAppearance: "none" as never }}
+      className="text-sm py-1 gap-0 font-medium bg-background rounded-md border-none hover:bg-foreground/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-ring"
+    >
+      {children}
+    </select>
+  </div>
+);
+
 function Calendar({
   withTime = true,
   withDateInput = true,
+  fromYear = 1900,
+  toYear = 2100,
+  captionLayout = "dropdown-buttons" as const,
   className,
   classNames,
   showOutsideDays = true,
@@ -207,13 +230,17 @@ function Calendar({
         showOutsideDays={showOutsideDays}
         selected={selected}
         onSelect={handleDaySelect}
+        captionLayout={captionLayout}
+        fromYear={fromYear}
+        toYear={toYear}
         className={cn("p-3", className)}
         classNames={{
           months:
             "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
           month: "space-y-4",
           caption: "flex justify-center pt-1 relative items-center",
-          caption_label: "text-sm font-medium",
+          caption_label: "hidden",
+          caption_dropdowns: "flex items-center gap-1",
           nav: "space-x-1 flex items-center",
           nav_button: cn(
             buttonVariants({ variant: "outline" }),
@@ -244,7 +271,9 @@ function Calendar({
         components={{
           IconLeft,
           IconRight,
+          Dropdown: CalendarDropdown,
         }}
+        formatters={{ formatMonthCaption: (date) => format(date, "MMM") }}
         footer={footerContent}
         {...props}
       />