create-nextjs-cms 0.9.6 → 0.9.8

package/templates/default/components/form/inputs/DateFormInput.tsx

@@ -1,99 +1,151 @@
-import React from 'react'
-import dayjs from 'dayjs'
-import FormInputElement from '@/components/form/FormInputElement'
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { CalendarIcon, ChevronDownIcon } from '@radix-ui/react-icons'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { DateFieldClientConfig } from 'nextjs-cms/core/fields'
+import React from 'react'
+import dayjs from 'dayjs'
+import FormInputElement from '@/components/form/FormInputElement'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { CalendarIcon, ChevronDownIcon } from '@radix-ui/react-icons'
+import { useI18n } from 'nextjs-cms/translations/client'
+import type { DateFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import { Clock2Icon } from 'lucide-react'
+
+const seasonEmoji: Record<string, string> = {
+    winter: '⛄️',
+    spring: '🌸',
+    summer: '🌻',
+    autumn: '🍂',
+}
+
+const getSeason = (month: Date): string => {
+    const monthNumber = month.getMonth()
+    if (monthNumber >= 0 && monthNumber < 3) return 'winter'
+    if (monthNumber >= 3 && monthNumber < 6) return 'spring'
+    if (monthNumber >= 6 && monthNumber < 9) return 'summer'
+    else return 'autumn'
+}
+
+const formatCaption = (month: Date) => {
+    const season = getSeason(month)
+    return seasonEmoji[season] + ' ' + dayjs(month).format('MMMM')
+}
+
+function resolveBound(value: string | 'now' | undefined): Date | undefined {
+    if (!value) return undefined
+    if (value === 'now') return new Date()
 
-const seasonEmoji: Record<string, string> = {
-    winter: '⛄️',
-    spring: '🌸',
-    summer: '🌻',
-    autumn: '🍂',
+    const parsedDate = dayjs(value)
+    return parsedDate.isValid() ? parsedDate.toDate() : undefined
 }
 
-const getSeason = (month: Date): string => {
-    const monthNumber = month.getMonth()
-    if (monthNumber >= 0 && monthNumber < 3) return 'winter'
-    if (monthNumber >= 3 && monthNumber < 6) return 'spring'
-    if (monthNumber >= 6 && monthNumber < 9) return 'summer'
-    else return 'autumn'
+function toCalendarDay(date: Date | undefined): Date | undefined {
+    if (!date) return undefined
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate())
 }
 
-const formatCaption = (month: Date, options?: any) => {
-    const season = getSeason(month)
-    return seasonEmoji[season] + ' ' + dayjs(month).format('MMMM')
+function isSameCalendarDay(left: Date | undefined, right: Date | undefined): boolean {
+    if (!left || !right) return false
+    return (
+        left.getFullYear() === right.getFullYear() &&
+        left.getMonth() === right.getMonth() &&
+        left.getDate() === right.getDate()
+    )
+}
+
+function clampDateToBounds(date: Date, minDate: Date | undefined, maxDate: Date | undefined): Date {
+    if (minDate && date.getTime() < minDate.getTime()) {
+        return new Date(minDate)
+    }
+
+    if (maxDate && date.getTime() > maxDate.getTime()) {
+        return new Date(maxDate)
+    }
+
+    return date
+}
+
+function getTimeBoundForSelectedDate(selectedDate: Date | undefined, bound: Date | undefined): string | undefined {
+    if (!isSameCalendarDay(selectedDate, bound) || !bound) return undefined
+    return dayjs(bound).format('HH:mm:ss')
 }
 
 export default function DateFormInput({ input }: { input: DateFieldClientConfig }) {
     const t = useI18n()
     const { control } = useFormContext()
     const [open, setOpen] = React.useState(false)
+    const minDate = resolveBound(input.minDate)
+    const maxDate = resolveBound(input.maxDate)
+    const disabledDays = [
+        ...(minDate ? [{ before: toCalendarDay(minDate) as Date }] : []),
+        ...(maxDate ? [{ after: toCalendarDay(maxDate) as Date }] : []),
+    ]
     const {
         field,
-        fieldState: { invalid, isTouched, isDirty, error },
+        fieldState: { error },
     } = useController({
-        name: input.name,
-        control,
-        defaultValue: input.value
-            ? dayjs(input.value).isValid()
-                ? dayjs(input.value).toDate()
-                : undefined
-            : undefined,
-    })
-
-    const [date, setDate] = React.useState<Date | undefined>(
-        input.value ? (dayjs(input.value).isValid() ? dayjs(input.value).toDate() : undefined) : undefined,
-    )
-
-    return (
-        <FormInputElement
-            validationError={error}
-            value={input.value}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <input
-                type='hidden'
-                disabled={field.disabled}
-                name={field.name}
-                onBlur={field.onBlur}
-                value={
-                    date
-                        ? dayjs(date).format(input.format !== 'date' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
-                        : undefined
-                }
-                ref={field.ref}
-                className='rounded border p-2'
-            />
-
-            <div className='flex flex-row items-start gap-2'>
-                <div>
-                    <Popover open={open} onOpenChange={setOpen}>
-                        <PopoverTrigger asChild>
-                            <Button variant='outline' id='date' className='justify-between font-normal'>
-                                <div className='flex items-center gap-2'>
-                                    <CalendarIcon />
-                                    {date ? dayjs(date).format('MMMM D, YYYY') : <span>Pick a date</span>}
-                                </div>
-                                <ChevronDownIcon />
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+        name: input.name,
+        control,
+        defaultValue: input.value
+            ? dayjs(input.value).isValid()
+                ? dayjs(input.value).toDate()
+                : undefined
+            : undefined,
+    })
+
+    const [date, setDate] = React.useState<Date | undefined>(
+        input.value ? (dayjs(input.value).isValid() ? dayjs(input.value).toDate() : undefined) : undefined,
+    )
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={input.value}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <input
+                type='hidden'
+                disabled={field.disabled}
+                name={field.name}
+                onBlur={field.onBlur}
+                value={
+                    date
+                        ? dayjs(date).format(input.format !== 'date' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
+                        : undefined
+                }
+                ref={field.ref}
+                className='rounded border p-2'
+            />
+
+            <div className='flex flex-row items-start gap-2'>
+                <div>
+                    <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                            <Button variant='outline' id='date' className='justify-between font-normal'>
+                                <div className='flex items-center gap-2'>
+                                    <CalendarIcon />
+                                    {date ? dayjs(date).format('MMMM D, YYYY') : <span>Pick a date</span>}
+                                </div>
+                                <ChevronDownIcon />
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
                             <Calendar
-                                endMonth={new Date(2099, 11)}
+                                startMonth={toCalendarDay(minDate)}
+                                endMonth={toCalendarDay(maxDate) ?? new Date(2099, 11)}
                                 mode='single'
                                 captionLayout='dropdown'
                                 selected={date}
+                                disabled={disabledDays.length > 0 ? disabledDays : undefined}
                                 onSelect={(newDate) => {
+                                    if (!newDate) {
+                                        setDate(undefined)
+                                        field.onChange(undefined)
+                                        return
+                                    }
+
                                     /**
                                      * We should preserve the time from the previous date if it is set
                                      */
@@ -102,55 +154,60 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
                                             .format('HH:mm:ss')
                                             .split(':')
                                             .map(Number)
-                                        newDate?.setHours(hours ?? 0, minutes ?? 0, seconds ?? 0, 0)
+                                        newDate.setHours(hours ?? 0, minutes ?? 0, seconds ?? 0, 0)
                                     }
-                                    setDate(newDate)
-                                    field.onChange(newDate)
+
+                                    const boundedDate = clampDateToBounds(newDate, minDate, maxDate)
+                                    setDate(boundedDate)
+                                    field.onChange(boundedDate)
                                 }}
                                 autoFocus
                                 className='rounded-lg border'
-                                formatters={{ formatCaption }}
-                            />
-                        </PopoverContent>
-                    </Popover>
-                </div>
-
-                {input.format !== 'date' ? (
-                    <div className='relative flex items-center gap-2'>
-                        <Clock2Icon className='text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none' />
-                        <Input
-                            type='time'
+                                formatters={{ formatCaption }}
+                            />
+                        </PopoverContent>
+                    </Popover>
+                </div>
+
+                {input.format !== 'date' ? (
+                    <div className='relative flex items-center gap-2'>
+                        <Clock2Icon className='text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none' />
+                        <Input
+                            type='time'
                             step='1'
                             defaultValue={'--:--:--'}
                             value={date ? dayjs(date).format('HH:mm:ss') : '--:--:--'}
+                            min={getTimeBoundForSelectedDate(date, minDate)}
+                            max={getTimeBoundForSelectedDate(date, maxDate)}
                             onChange={(e) => {
                                 const time = e.target.value
                                 if (time && date) {
                                     const [hours, minutes, seconds] = time.split(':').map(Number)
                                     const newDate = new Date(date)
                                     newDate.setHours(hours ?? 0, minutes ?? 0, seconds ?? 0, 0)
-                                    setDate(newDate)
-                                    field.onChange(newDate)
+                                    const boundedDate = clampDateToBounds(newDate, minDate, maxDate)
+                                    setDate(boundedDate)
+                                    field.onChange(boundedDate)
                                 }
                             }}
                             className='appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
-                        />
-                    </div>
-                ) : null}
-
-                <Button
-                    className='px-1.5'
-                    onClick={() => {
-                        setDate(undefined)
-                        field.onChange(undefined)
-                    }}
-                    variant='default'
-                    type='button'
-                    size='default'
-                >
-                    {t('unset')}
-                </Button>
-            </div>
-        </FormInputElement>
-    )
-}
+                        />
+                    </div>
+                ) : null}
+
+                <Button
+                    className='px-1.5'
+                    onClick={() => {
+                        setDate(undefined)
+                        field.onChange(undefined)
+                    }}
+                    variant='default'
+                    type='button'
+                    size='default'
+                >
+                    {t('unset')}
+                </Button>
+            </div>
+        </FormInputElement>
+    )
+}

package/templates/default/components/form/inputs/DateRangeFormInput.tsx

@@ -30,6 +30,19 @@ function formatCaption(month: Date) {
     return seasonEmoji[getSeason(month)] + ' ' + dayjs(month).format('MMMM')
 }
 
+function resolveBound(value: string | 'now' | undefined): Date | undefined {
+    if (!value) return undefined
+    if (value === 'now') return new Date()
+
+    const parsedDate = dayjs(value)
+    return parsedDate.isValid() ? parsedDate.toDate() : undefined
+}
+
+function toCalendarDay(date: Date | undefined): Date | undefined {
+    if (!date) return undefined
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
 function toDate(value: any): Date | undefined {
     if (!value) return undefined
     const d = dayjs(value)
@@ -44,8 +57,16 @@ function formatValue(date: Date | undefined, format: 'date' | 'datetime'): strin
 }
 
 export default function DateRangeFormInput({ input }: { input: DateRangeFieldClientConfig }) {
-    const { control } = useFormContext()
+    const { control, setValue } = useFormContext()
     const [open, setOpen] = React.useState(false)
+    const minDate = resolveBound(input.minDate)
+    const maxDate = resolveBound(input.maxDate)
+    const disabledDays = [
+        ...(minDate ? [{ before: toCalendarDay(minDate) as Date }] : []),
+        ...(maxDate ? [{ after: toCalendarDay(maxDate) as Date }] : []),
+    ]
+    const initialFrom = toDate(input.startValue)
+    const initialTo = toDate(input.endValue)
 
     const {
         field: startField,
@@ -53,7 +74,7 @@ export default function DateRangeFormInput({ input }: { input: DateRangeFieldCli
     } = useController({
         name: input.startName,
         control,
-        defaultValue: toDate(input.startValue),
+        defaultValue: initialFrom,
     })
 
     const {
@@ -62,14 +83,30 @@ export default function DateRangeFormInput({ input }: { input: DateRangeFieldCli
     } = useController({
         name: input.endName,
         control,
-        defaultValue: toDate(input.endValue),
+        defaultValue: initialTo,
     })
 
     const [range, setRange] = React.useState<DateRange | undefined>({
-        from: toDate(input.startValue),
-        to: toDate(input.endValue),
+        from: initialFrom,
+        to: initialTo,
     })
 
+    React.useEffect(() => {
+        const nextFrom = toDate(input.startValue)
+        const nextTo = toDate(input.endValue)
+        const nextRange =
+            nextFrom || nextTo
+                ? {
+                      from: nextFrom,
+                      to: nextTo,
+                  }
+                : undefined
+
+        setRange(nextRange)
+        setValue(input.startName, nextFrom)
+        setValue(input.endName, nextTo)
+    }, [input.startValue, input.endValue, input.startName, input.endName, setValue])
+
     function handleSelect(selected: DateRange | undefined) {
         setRange(selected)
         startField.onChange(selected?.from ?? undefined)
@@ -131,7 +168,10 @@ export default function DateRangeFormInput({ input }: { input: DateRangeFieldCli
                             selected={range}
                             onSelect={handleSelect}
                             numberOfMonths={2}
-                            defaultMonth={range?.from}
+                            defaultMonth={range?.from ?? toCalendarDay(minDate)}
+                            startMonth={toCalendarDay(minDate)}
+                            endMonth={toCalendarDay(maxDate)}
+                            disabled={disabledDays.length > 0 ? disabledDays : undefined}
                             autoFocus
                             formatters={{ formatCaption }}
                             className='rounded-lg border'