create-nextjs-cms 0.9.5 → 0.9.7

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

@@ -6,11 +6,10 @@ 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'
+import type { DateFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+import { Input } from '@/components/ui/input'
+import { Clock2Icon } from 'lucide-react'
 
 const seasonEmoji: Record<string, string> = {
     winter: '⛄️',
@@ -27,19 +26,64 @@ const getSeason = (month: Date): string => {
     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({
+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 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 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: { error },
+    } = useController({
         name: input.name,
         control,
         defaultValue: input.value
@@ -88,27 +132,37 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
                             </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'
+                            <Calendar
+                                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
+                                     */
+                                    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)
+                                    }
+
+                                    const boundedDate = clampDateToBounds(newDate, minDate, maxDate)
+                                    setDate(boundedDate)
+                                    field.onChange(boundedDate)
+                                }}
+                                autoFocus
+                                className='rounded-lg border'
                                 formatters={{ formatCaption }}
                             />
                         </PopoverContent>
@@ -120,20 +174,23 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
                         <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'
+                            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)
+                                    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}

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

@@ -0,0 +1,175 @@
+'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 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)
+    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 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: 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 ?? toCalendarDay(minDate)}
+                            startMonth={toCalendarDay(minDate)}
+                            endMonth={toCalendarDay(maxDate)}
+                            disabled={disabledDays.length > 0 ? disabledDays : undefined}
+                            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>
+    )
+}

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

@@ -17,10 +17,10 @@ export default function TagsFormInput({
     input: TagsFieldClientConfig
     sectionName: string
 }) {
-    const t = useI18n()
-    const searchParams = useSearchParams()
-    const localeParam = searchParams.get('locale')
-    const locale = input.localized ? (localeParam?.trim() ? localeParam : undefined) : undefined
+    const t = useI18n()
+    const searchParams = useSearchParams()
+    const localeParam = searchParams.get('locale')
+    const locale = input.localized ? (localeParam?.trim() ? localeParam : undefined) : undefined
     const { control } = useFormContext()
     const {
         field,
@@ -115,7 +115,8 @@ export default function TagsFormInput({
             }
             if (event.key === 'Enter' && highlightedIndex >= 0) {
                 event.preventDefault()
-                addTag(filteredSuggestions[highlightedIndex])
+                const suggestion = filteredSuggestions[highlightedIndex]
+                if (suggestion !== undefined) addTag(suggestion)
                 return
             }
             if (event.key === 'Escape') {

package/templates/default/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/default/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "cms",
+  "name": "nextjs-cms-app",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "cross-env NEXTJS_CMS_DEBUG_OVERRIDE=false next build",
     "start": "next start",
     "lint": "next lint",
     "format": "prettier --check . --ignore-path ../../.gitignore",
@@ -65,7 +65,7 @@
     "nanoid": "^5.1.2",
     "next": "16.1.1",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.9.5",
+    "nextjs-cms": "0.9.7",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",

package/templates/default/proxy.ts

@@ -1,5 +1,5 @@
 import { NextRequest } from 'next/server'
-import { validateCSRFToken } from 'nextjs-cms/auth/actions'
+import { validateCSRFToken } from 'nextjs-cms/auth/csrf'
 
 export async function proxy(request: NextRequest) {
     /**
@@ -28,5 +28,5 @@ export const config = {
          * - favicon.ico (favicon file)
          */
         '/((?!_next/static|_next/image|favicon.ico).*)',
-    ]
+    ],
 }

package/templates/default/app/(rootLayout)/dashboard-new/page.tsx

@@ -1,7 +0,0 @@
-import DashboardNewPage from '@/components/DashboardNewPage'
-
-export const dynamic = 'force-dynamic'
-
-export default async function Page() {
-    return <DashboardNewPage />
-}