create-nextjs-cms 0.9.4 → 0.9.6

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

@@ -1,156 +1,156 @@
-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 { 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, options?: any) => {
-    const season = getSeason(month)
-    return seasonEmoji[season] + ' ' + dayjs(month).format('MMMM')
-}
-
-export default function DateFormInput({ input }: { input: DateFieldClientConfig }) {
-    const t = useI18n()
-    const { control } = useFormContext()
-    const [open, setOpen] = React.useState(false)
-    const {
-        field,
-        fieldState: { invalid, isTouched, isDirty, 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'>
-                            <Calendar
-                                endMonth={new Date(2099, 11)}
-                                mode='single'
-                                captionLayout='dropdown'
-                                selected={date}
-                                onSelect={(newDate) => {
-                                    /**
-                                     * We should preserve the time from the previous date if it is set
-                                     */
-                                    if (input.format !== 'date') {
-                                        const [hours, minutes, seconds] = dayjs(date)
-                                            .format('HH:mm:ss')
-                                            .split(':')
-                                            .map(Number)
-                                        newDate?.setHours(hours ?? 0, minutes ?? 0, seconds ?? 0, 0)
-                                    }
-                                    setDate(newDate)
-                                    field.onChange(newDate)
-                                }}
-                                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'
-                            step='1'
-                            defaultValue={'--:--:--'}
-                            value={date ? dayjs(date).format('HH:mm:ss') : '--:--:--'}
-                            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)
-                                }
-                            }}
-                            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>
-    )
-}
+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 { 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, options?: any) => {
+    const season = getSeason(month)
+    return seasonEmoji[season] + ' ' + dayjs(month).format('MMMM')
+}
+
+export default function DateFormInput({ input }: { input: DateFieldClientConfig }) {
+    const t = useI18n()
+    const { control } = useFormContext()
+    const [open, setOpen] = React.useState(false)
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, 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'>
+                            <Calendar
+                                endMonth={new Date(2099, 11)}
+                                mode='single'
+                                captionLayout='dropdown'
+                                selected={date}
+                                onSelect={(newDate) => {
+                                    /**
+                                     * We should preserve the time from the previous date if it is set
+                                     */
+                                    if (input.format !== 'date') {
+                                        const [hours, minutes, seconds] = dayjs(date)
+                                            .format('HH:mm:ss')
+                                            .split(':')
+                                            .map(Number)
+                                        newDate?.setHours(hours ?? 0, minutes ?? 0, seconds ?? 0, 0)
+                                    }
+                                    setDate(newDate)
+                                    field.onChange(newDate)
+                                }}
+                                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'
+                            step='1'
+                            defaultValue={'--:--:--'}
+                            value={date ? dayjs(date).format('HH:mm:ss') : '--:--:--'}
+                            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)
+                                }
+                            }}
+                            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>
+    )
+}

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

@@ -0,0 +1,153 @@
+'use client'
+
+import React from 'react'
+import dayjs from 'dayjs'
+import type { DateRange } from 'react-day-picker'
+import { useController, useFormContext } from 'react-hook-form'
+import { CalendarIcon, ChevronDownIcon } from '@radix-ui/react-icons'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import FormInputElement from '@/components/form/FormInputElement'
+import type { DateRangeFieldClientConfig } from 'nextjs-cms/core/fields'
+
+const seasonEmoji: Record<string, string> = {
+    winter: '⛄️',
+    spring: '🌸',
+    summer: '🌻',
+    autumn: '🍂',
+}
+
+function getSeason(month: Date): string {
+    const m = month.getMonth()
+    if (m < 3) return 'winter'
+    if (m < 6) return 'spring'
+    if (m < 9) return 'summer'
+    return 'autumn'
+}
+
+function formatCaption(month: Date) {
+    return seasonEmoji[getSeason(month)] + ' ' + dayjs(month).format('MMMM')
+}
+
+function toDate(value: any): Date | undefined {
+    if (!value) return undefined
+    const d = dayjs(value)
+    return d.isValid() ? d.toDate() : undefined
+}
+
+function formatValue(date: Date | undefined, format: 'date' | 'datetime'): string | undefined {
+    if (!date) return undefined
+    return format === 'datetime'
+        ? dayjs(date).format('YYYY-MM-DD HH:mm:ss')
+        : dayjs(date).format('YYYY-MM-DD')
+}
+
+export default function DateRangeFormInput({ input }: { input: DateRangeFieldClientConfig }) {
+    const { control } = useFormContext()
+    const [open, setOpen] = React.useState(false)
+
+    const {
+        field: startField,
+        fieldState: { error: startError },
+    } = useController({
+        name: input.startName,
+        control,
+        defaultValue: toDate(input.startValue),
+    })
+
+    const {
+        field: endField,
+        fieldState: { error: endError },
+    } = useController({
+        name: input.endName,
+        control,
+        defaultValue: toDate(input.endValue),
+    })
+
+    const [range, setRange] = React.useState<DateRange | undefined>({
+        from: toDate(input.startValue),
+        to: toDate(input.endValue),
+    })
+
+    function handleSelect(selected: DateRange | undefined) {
+        setRange(selected)
+        startField.onChange(selected?.from ?? undefined)
+        endField.onChange(selected?.to ?? undefined)
+    }
+
+    const error = startError ?? endError
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={input.startValue ?? input.endValue}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            {/* Hidden inputs so FormData picks up both values on submit */}
+            <input
+                type='hidden'
+                name={startField.name}
+                value={formatValue(range?.from, input.format) ?? ''}
+                ref={startField.ref}
+                disabled={startField.disabled}
+            />
+            <input
+                type='hidden'
+                name={endField.name}
+                value={formatValue(range?.to, input.format) ?? ''}
+                ref={endField.ref}
+                disabled={endField.disabled}
+            />
+
+            <div className='flex flex-row items-center gap-2'>
+                <Popover open={open} onOpenChange={setOpen}>
+                    <PopoverTrigger asChild>
+                        <Button variant='outline' className='justify-between font-normal'>
+                            <div className='flex items-center gap-2'>
+                                <CalendarIcon />
+                                {range?.from ? (
+                                    range.to ? (
+                                        <>
+                                            {dayjs(range.from).format('MMM D, YYYY')}
+                                            {' – '}
+                                            {dayjs(range.to).format('MMM D, YYYY')}
+                                        </>
+                                    ) : (
+                                        dayjs(range.from).format('MMM D, YYYY')
+                                    )
+                                ) : (
+                                    <span>Pick a date range</span>
+                                )}
+                            </div>
+                            <ChevronDownIcon />
+                        </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+                        <Calendar
+                            mode='range'
+                            selected={range}
+                            onSelect={handleSelect}
+                            numberOfMonths={2}
+                            defaultMonth={range?.from}
+                            autoFocus
+                            formatters={{ formatCaption }}
+                            className='rounded-lg border'
+                        />
+                    </PopoverContent>
+                </Popover>
+
+                <Button
+                    type='button'
+                    variant='default'
+                    className='px-1.5'
+                    onClick={() => handleSelect(undefined)}
+                >
+                    Unset
+                </Button>
+            </div>
+        </FormInputElement>
+    )
+}