create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/form/helpers/util.ts

@@ -1,17 +1,17 @@
-let configLastUpdated: number = 0
-
-// Use new Function to bypass next.js dynamic import restriction
-const loadHotReloadFile = async () => {
-    try {
-        // This approach completely bypasses next.js dynamic import restriction
-        const importFn = new Function('path', 'return import(path)')
-        const sectionInfo = await importFn('./_section-hot-reload.js')
-        configLastUpdated = sectionInfo?.configLastUpdated ?? 0
-    } catch {
-        configLastUpdated = 0
-    }
-}
-
-loadHotReloadFile()
-
-export { configLastUpdated }
+let configLastUpdated: number = 0
+
+// Use new Function to bypass next.js dynamic import restriction
+const loadHotReloadFile = async () => {
+    try {
+        // This approach completely bypasses next.js dynamic import restriction
+        const importFn = new Function('path', 'return import(path)')
+        const sectionInfo = await importFn('./_section-hot-reload.js')
+        configLastUpdated = sectionInfo?.configLastUpdated ?? 0
+    } catch {
+        configLastUpdated = 0
+    }
+}
+
+loadHotReloadFile()
+
+export { configLastUpdated }

package/templates/default/components/form/inputs/checkbox-form-input.tsx

@@ -1,46 +1,46 @@
-import React from 'react'
-import FormInputElement from '@/components/form/form-input-element'
-import { CheckboxFieldClientConfig } from 'nextjs-cms/core/fields'
-import { useController, useFormContext } from 'react-hook-form'
-import { Switch } from '@/components/ui/switch'
-
-function toChecked(value: unknown): boolean {
-    if (value === true) return true
-    if (value === 1) return true
-    if (value === '1') return true
-    if (value === 'true') return true
-    if (value === 'on') return true
-    return false
-}
-
-export default function CheckboxFormInput({ input }: { input: CheckboxFieldClientConfig }) {
-    const { control } = useFormContext()
-    const initialValue =
-        input.value !== undefined && input.value !== null ? toChecked(input.value) : toChecked(input.defaultValue)
-
-    const {
-        field,
-        fieldState: { error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: initialValue,
-    })
-    return (
-        <FormInputElement
-            validationError={error}
-            value={initialValue}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <Switch
-                ref={field.ref}
-                onCheckedChange={field.onChange}
-                checked={toChecked(field.value)}
-                name={field.name}
-                disabled={input.readonly}
-            />
-        </FormInputElement>
-    )
-}
+import React from 'react'
+import FormInputElement from '@/components/form/form-input-element'
+import { CheckboxFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+import { Switch } from '@/components/ui/switch'
+
+function toChecked(value: unknown): boolean {
+    if (value === true) return true
+    if (value === 1) return true
+    if (value === '1') return true
+    if (value === 'true') return true
+    if (value === 'on') return true
+    return false
+}
+
+export default function CheckboxFormInput({ input }: { input: CheckboxFieldClientConfig }) {
+    const { control } = useFormContext()
+    const initialValue =
+        input.value !== undefined && input.value !== null ? toChecked(input.value) : toChecked(input.defaultValue)
+
+    const {
+        field,
+        fieldState: { error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: initialValue,
+    })
+    return (
+        <FormInputElement
+            validationError={error}
+            value={initialValue}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <Switch
+                ref={field.ref}
+                onCheckedChange={field.onChange}
+                checked={toChecked(field.value)}
+                name={field.name}
+                disabled={input.readonly}
+            />
+        </FormInputElement>
+    )
+}

package/templates/default/components/form/inputs/color-form-input.tsx

@@ -1,44 +1,44 @@
-import React from 'react'
-import FormInputElement from '@/components/form/form-input-element'
-import { ColorFieldClientConfig } from 'nextjs-cms/core/fields'
-import { useController, useFormContext } from 'react-hook-form'
-
-export default function ColorFormInput({ input }: { input: ColorFieldClientConfig }) {
-    const { control } = useFormContext()
-    const {
-        field,
-        fieldState: { invalid, isTouched, isDirty, error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: input.value ?? '#000000',
-        disabled: input.readonly,
-    })
-
-    const colorSpan = (
-        <>
-            <span style={{ padding: '2px 40px', backgroundColor: input.value }}></span>
-        </>
-    )
-    return (
-        <FormInputElement
-            validationError={error}
-            value={colorSpan}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <input
-                type='color'
-                readOnly={input.readonly}
-                disabled={field.disabled}
-                name={field.name}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-                value={field.value}
-                ref={field.ref}
-                className='h-10 w-full rounded bg-input p-1 text-foreground shadow-xs outline-0 ring-2 ring-blue-300 focus:ring-blue-500'
-            />
-        </FormInputElement>
-    )
-}
+import React from 'react'
+import FormInputElement from '@/components/form/form-input-element'
+import { ColorFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function ColorFormInput({ input }: { input: ColorFieldClientConfig }) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? '#000000',
+        disabled: input.readonly,
+    })
+
+    const colorSpan = (
+        <>
+            <span style={{ padding: '2px 40px', backgroundColor: input.value }}></span>
+        </>
+    )
+    return (
+        <FormInputElement
+            validationError={error}
+            value={colorSpan}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <input
+                type='color'
+                readOnly={input.readonly}
+                disabled={field.disabled}
+                name={field.name}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                value={field.value}
+                ref={field.ref}
+                className='h-10 w-full rounded bg-input p-1 text-foreground shadow-xs outline-0 ring-2 ring-blue-300 focus:ring-blue-500'
+            />
+        </FormInputElement>
+    )
+}

package/templates/default/components/form/inputs/date-form-input.tsx

@@ -1,31 +1,31 @@
-import React from 'react'
-import dayjs from 'dayjs'
-import FormInputElement from '@/components/form/form-input-element'
-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 React from 'react'
+import dayjs from 'dayjs'
+import FormInputElement from '@/components/form/form-input-element'
+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 { 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 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')
@@ -89,50 +89,50 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
         field,
         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: 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={formatHiddenValue(date, input.format)}
                 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'>
+
+            <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
                                 startMonth={toCalendarDay(minDate)}
                                 endMonth={toCalendarDay(maxDate) ?? new Date(2099, 11)}
@@ -164,17 +164,17 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
                                 }}
                                 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') : '--:--:--'}
@@ -192,23 +192,23 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
                                 }
                             }}
                             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>
+    )
+}