chore: consolidate calendar pickers (supabase#40052)

* chore: update react-day-picker

* fix(design system): date picker demos

* refactor(date picker): change logs date picker to use react-day-picker

* refactor(date pickers): change remaining date pickers to use react-day-picker

* cleanup(date pickers): minor code cleanup

* fix(date picker): fix behavior for single day selection

Author: charislam

apps/design-system/package.json

@@ -29,6 +29,7 @@
     "next-contentlayer2": "0.4.6",
     "next-themes": "^0.3.0",
     "react": "catalog:",
+    "react-day-picker": "^9.11.1",
     "react-docgen": "^7.0.3",
     "react-dom": "catalog:",
     "react-hook-form": "^7.45.0",
@@ -53,8 +54,8 @@
     "@types/lodash.template": "4.5.0",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "config": "workspace:^",
     "concurrently": "^8.2.2",
+    "config": "workspace:^",
     "mdast-util-toc": "^6.1.1",
     "postcss": "^8.5.3",
     "rimraf": "^4.1.3",

apps/design-system/registry/default/example/date-picker-demo.tsx

@@ -1,13 +1,17 @@
 'use client'
 
-import * as React from 'react'
 import { format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import {
+  Button,
+  Calendar,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+} from 'ui'
 
 export default function DatePickerDemo() {
   const [date, setDate] = React.useState<Date>()
@@ -21,8 +25,8 @@ export default function DatePickerDemo() {
             'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground'
           )}
+          icon={<CalendarIcon className="h-4 w-4" />}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
           {date ? format(date, 'PPP') : <span>Pick a date</span>}
         </Button>
       </PopoverTrigger_Shadcn_>

apps/design-system/registry/default/example/date-picker-form.tsx

@@ -62,9 +62,9 @@ export default function DatePickerForm() {
                         'w-[240px] pl-3 text-left font-normal',
                         !field.value && 'text-muted-foreground'
                       )}
+                      icon={<CalendarIcon className="h-4 w-4 opacity-50" />}
                     >
                       {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                     </Button>
                   </FormControl_Shadcn_>
                 </PopoverTrigger_Shadcn_>

apps/design-system/registry/default/example/date-picker-with-presets.tsx

@@ -1,14 +1,16 @@
 'use client'
 
-import * as React from 'react'
 import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
 import {
+  Button,
+  Calendar,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -28,8 +30,8 @@ export default function DatePickerWithPresets() {
             'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground'
           )}
+          icon={<CalendarIcon className="h-4 w-4" />}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
           {date ? format(date, 'PPP') : <span>Pick a date</span>}
         </Button>
       </PopoverTrigger_Shadcn_>

apps/design-system/registry/default/example/date-picker-with-range.tsx

@@ -1,14 +1,18 @@
 'use client'
 
-import * as React from 'react'
 import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
-// @ts-expect-error
+import * as React from 'react'
 import { DateRange } from 'react-day-picker'
+
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import {
+  Button,
+  Calendar,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+} from 'ui'
 
 export default function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
   const [date, setDate] = React.useState<DateRange | undefined>({
@@ -27,8 +31,8 @@ export default function DatePickerWithRange({ className }: React.HTMLAttributes<
               'w-[300px] justify-start text-left font-normal',
               !date && 'text-muted-foreground'
             )}
+            icon={<CalendarIcon className="h-4 w-4" />}
           >
-            <CalendarIcon className="mr-2 h-4 w-4" />
             {date?.from ? (
               date.to ? (
                 <>

apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import dayjs from 'dayjs'
 import { ExternalLink } from 'lucide-react'
 import { useState } from 'react'
-import { type SubmitHandler, useForm } from 'react-hook-form'
+import { useForm, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
 
@@ -214,16 +214,13 @@ export const NewAccessTokenDialog = ({
                           selectsRange={false}
                           triggerButtonSize="small"
                           contentSide="top"
+                          to={customExpiryDate?.date}
                           minDate={new Date()}
                           maxDate={dayjs().add(1, 'year').toDate()}
                           onChange={(date) => {
                             if (date.to) handleCustomDateChange({ date: date.to })
                           }}
-                        >
-                          {customExpiryDate
-                            ? `${dayjs(customExpiryDate.date).format('DD MMM, HH:mm')}`
-                            : 'Select date'}
-                        </DatePicker>
+                        />
                       )}
                     </div>
                     {field.value === NON_EXPIRING_TOKEN_VALUE && (

apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx

@@ -1,12 +1,11 @@
-import { format } from 'date-fns'
 import dayjs from 'dayjs'
-import { ChevronLeft, ChevronRight, HelpCircle } from 'lucide-react'
+import { HelpCircle } from 'lucide-react'
 import { useMemo, useState } from 'react'
-import DatePicker from 'react-datepicker'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FormPanel } from 'components/ui/Forms/FormPanel'
 import InformationBox from 'components/ui/InformationBox'
+import { Calendar, cn } from 'ui'
 import { Timezone } from './PITR.types'
 import {
   constrainDateToRange,
@@ -41,6 +40,8 @@ export function PITRForm({
   const latestAvailableBackup = dayjs
     .unix(latestAvailableBackupUnix ?? 0)
     .tz(selectedTimezone.utc[0])
+  const earliestAvailableBackupAsDate = earliestAvailableBackup.toDate()
+  const latestAvailableBackupAsDate = latestAvailableBackup.toDate()
 
   const [selectedDateRaw, setSelectedDateRaw] = useState<Date>(latestAvailableBackup.toDate())
 
@@ -125,51 +126,25 @@ export function PITRForm({
       >
         <div className="flex justify-between px-4 md:px-10 py-6 space-x-10">
           <div className="w-1/3 space-y-2">
-            <DatePicker
-              inline
+            <Calendar
+              mode="single"
+              required={true}
               selected={selectedDateRaw}
-              onChange={onUpdateDate}
-              dayClassName={() => 'cursor-pointer'}
-              minDate={earliestAvailableBackup.toDate()}
-              maxDate={latestAvailableBackup.toDate()}
-              highlightDates={availableDates.map((date) => date.toDate())}
-              renderCustomHeader={({
-                date,
-                decreaseMonth,
-                increaseMonth,
-                prevMonthButtonDisabled,
-                nextMonthButtonDisabled,
-              }) => (
-                <div className="flex items-center justify-between px-2 py-2">
-                  <div className="flex w-full items-center justify-between">
-                    <button
-                      onClick={decreaseMonth}
-                      disabled={prevMonthButtonDisabled}
-                      type="button"
-                      className={`
-                            ${prevMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
-                            text-foreground-light hover:text-foreground focus:outline-none
-                        `}
-                    >
-                      <ChevronLeft size={16} strokeWidth={2} />
-                    </button>
-                    <span className="text-foreground-light text-sm">
-                      {format(date, 'MMMM yyyy')}
-                    </span>
-                    <button
-                      onClick={increaseMonth}
-                      disabled={nextMonthButtonDisabled}
-                      type="button"
-                      className={`
-                            ${nextMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
-                            text-foreground-light hover:text-foreground focus:outline-none
-                        `}
-                    >
-                      <ChevronRight size={16} strokeWidth={2} />
-                    </button>
-                  </div>
-                </div>
-              )}
+              onSelect={onUpdateDate}
+              defaultMonth={latestAvailableBackupAsDate}
+              startMonth={earliestAvailableBackupAsDate}
+              endMonth={latestAvailableBackupAsDate}
+              disabled={[
+                { before: earliestAvailableBackupAsDate },
+                { after: latestAvailableBackupAsDate },
+              ]}
+              classNames={{
+                day: cn(
+                  '[&:not(:has(:disabled))]:border [&:not(:has(:disabled))]:border-stronger [&:not(:last-child)]:border-r-0 [&:not(:has(:disabled))]:bg-overlay-hover',
+                  'rounded-none'
+                ),
+                selected: '!bg-brand-500',
+              }}
             />
             {availableDates.length > 1 && (
               <div className="flex items-center space-x-2">