create-nextjs-cms 0.9.4 → 0.9.6

package/templates/default/components/form/FormInputElement.tsx

@@ -1,70 +1,70 @@
-import React from 'react'
-import classNames from 'classnames'
-import { Badge } from '@/components/ui/badge'
-import { FieldError } from 'react-hook-form'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export default function FormInputElement({
-    label,
-    required = false,
-    readonly = false,
-    classes = '',
-    direction = 'row',
-    value,
-    children,
-    validationError,
-}: {
-    label: string
-    required: boolean | string
-    readonly?: boolean
-    classes?: string
-    direction?: 'row' | 'col'
-    value?: any
-    children: React.ReactNode
-    validationError: FieldError | undefined
-}) {
-    const t = useI18n()
-    return (
-        <div
-            className={classNames({
-                'items-center py-2': true,
-                'flex flex-col': direction === 'col',
-                'items-center px-3 md-sidebar:grid md-sidebar:grid-cols-10': direction === 'row',
-                classes: classes,
-            })}
-        >
-            <label
-                className={classNames({
-                    'block pe-3 font-bold text-foreground': true,
-                    'w-full text-start': direction === 'col',
-                    'col-span-10 pb-1 md-sidebar:col-span-2 md-sidebar:pb-0 md-sidebar:text-end': direction === 'row',
-                })}
-            >
-                {label} {['true', 1, true].includes(required) ? '*' : null}
-                {readonly ? (
-                    <>
-                        {' '}
-                        <Badge variant={'primary'}>{t('readonly')}</Badge>
-                    </>
-                ) : null}
-            </label>
-            <div
-                className={classNames({
-                    'col-span-8': direction === 'row',
-                    'w-full': direction === 'col',
-                })}
-            >
-                {readonly ? (
-                    <div className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0'>{value}</div>
-                ) : (
-                    <>
-                        {children}
-                        {validationError ? (
-                            <div className='mt-1 text-sm text-red-500'>{validationError.message}</div>
-                        ) : null}
-                    </>
-                )}
-            </div>
-        </div>
-    )
-}
+import React from 'react'
+import classNames from 'classnames'
+import { Badge } from '@/components/ui/badge'
+import { FieldError } from 'react-hook-form'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export default function FormInputElement({
+    label,
+    required = false,
+    readonly = false,
+    classes = '',
+    direction = 'row',
+    value,
+    children,
+    validationError,
+}: {
+    label: string
+    required: boolean | string
+    readonly?: boolean
+    classes?: string
+    direction?: 'row' | 'col'
+    value?: any
+    children: React.ReactNode
+    validationError: FieldError | undefined
+}) {
+    const t = useI18n()
+    return (
+        <div
+            className={classNames({
+                'items-center py-2': true,
+                'flex flex-col': direction === 'col',
+                'items-center px-3 md-sidebar:grid md-sidebar:grid-cols-10': direction === 'row',
+                classes: classes,
+            })}
+        >
+            <label
+                className={classNames({
+                    'block pe-3 font-bold text-foreground': true,
+                    'w-full text-start': direction === 'col',
+                    'col-span-10 pb-1 md-sidebar:col-span-2 md-sidebar:pb-0 md-sidebar:text-end': direction === 'row',
+                })}
+            >
+                {label} {['true', 1, true].includes(required) ? '*' : null}
+                {readonly ? (
+                    <>
+                        {' '}
+                        <Badge variant={'primary'}>{t('readonly')}</Badge>
+                    </>
+                ) : null}
+            </label>
+            <div
+                className={classNames({
+                    'col-span-8': direction === 'row',
+                    'w-full': direction === 'col',
+                })}
+            >
+                {readonly ? (
+                    <div className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0'>{value}</div>
+                ) : (
+                    <>
+                        {children}
+                        {validationError ? (
+                            <div className='mt-1 text-sm text-red-500'>{validationError.message}</div>
+                        ) : null}
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}

package/templates/default/components/form/FormInputs.tsx

@@ -1,40 +1,42 @@
 import React from 'react'
-import ColorFormInput from '@/components/form/inputs/ColorFormInput'
-import NumberFormInput from '@/components/form/inputs/NumberFormInput'
-import TextFormInput from '@/components/form/inputs/TextFormInput'
-import DateFormInput from '@/components/form/inputs/DateFormInput'
-import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
-import SelectFormInput from '@/components/form/inputs/SelectFormInput'
-import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
-import PhotoFormInput from '@/components/form/inputs/PhotoFormInput'
-import DocumentFormInput from '@/components/form/inputs/DocumentFormInput'
-import TagsFormInput from '@/components/form/inputs/TagsFormInput'
-import CheckboxFormInput from '@/components/form/inputs/CheckboxFormInput'
-import MapFormInput from '@/components/form/inputs/MapFormInput'
-import PasswordFormInput from '@/components/form/inputs/PasswordFormInput'
-import TextareaFormInput from '@/components/form/inputs/TextareaFormInput'
-import VideoFormInput from '@/components/form/inputs/VideoFormInput'
-import SlugFormInput from '@/components/form/inputs/SlugFormInput'
-import type { FieldClientConfig } from 'nextjs-cms/core/fields'
-import {
-    CheckboxFieldClientConfig,
-    ColorFieldClientConfig,
-    DateFieldClientConfig,
-    DocumentFieldClientConfig,
-    MapFieldClientConfig,
-    NumberFieldClientConfig,
-    PasswordFieldClientConfig,
-    PhotoFieldClientConfig,
-    RichTextFieldClientConfig,
-    SelectFieldClientConfig,
-    SelectMultipleFieldClientConfig,
-    TagsFieldClientConfig,
-    TextAreaFieldClientConfig,
-    TextFieldClientConfig,
-    VideoFieldClientConfig,
-    SlugFieldClientConfig,
-} from 'nextjs-cms/core/fields'
-
+import ColorFormInput from '@/components/form/inputs/ColorFormInput'
+import NumberFormInput from '@/components/form/inputs/NumberFormInput'
+import TextFormInput from '@/components/form/inputs/TextFormInput'
+import DateFormInput from '@/components/form/inputs/DateFormInput'
+import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
+import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
+import SelectFormInput from '@/components/form/inputs/SelectFormInput'
+import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
+import PhotoFormInput from '@/components/form/inputs/PhotoFormInput'
+import DocumentFormInput from '@/components/form/inputs/DocumentFormInput'
+import TagsFormInput from '@/components/form/inputs/TagsFormInput'
+import CheckboxFormInput from '@/components/form/inputs/CheckboxFormInput'
+import MapFormInput from '@/components/form/inputs/MapFormInput'
+import PasswordFormInput from '@/components/form/inputs/PasswordFormInput'
+import TextareaFormInput from '@/components/form/inputs/TextareaFormInput'
+import VideoFormInput from '@/components/form/inputs/VideoFormInput'
+import SlugFormInput from '@/components/form/inputs/SlugFormInput'
+import type { FieldClientConfig } from 'nextjs-cms/core/fields'
+import {
+    CheckboxFieldClientConfig,
+    ColorFieldClientConfig,
+    DateFieldClientConfig,
+    DateRangeFieldClientConfig,
+    DocumentFieldClientConfig,
+    MapFieldClientConfig,
+    NumberFieldClientConfig,
+    PasswordFieldClientConfig,
+    PhotoFieldClientConfig,
+    RichTextFieldClientConfig,
+    SelectFieldClientConfig,
+    SelectMultipleFieldClientConfig,
+    TagsFieldClientConfig,
+    TextAreaFieldClientConfig,
+    TextFieldClientConfig,
+    VideoFieldClientConfig,
+    SlugFieldClientConfig,
+} from 'nextjs-cms/core/fields'
+
 export default function FormInputs({
     inputs,
     sectionName,
@@ -44,84 +46,91 @@ export default function FormInputs({
     sectionName: string
     submitSuccessCount?: number
 }) {
-    return (
-        <>
-            {inputs?.length > 0 &&
-                inputs?.map((input) => {
-                    switch (input.type) {
-                        case 'color':
-                            return <ColorFormInput input={input as ColorFieldClientConfig} key={input.name} />
-                        case 'number':
-                            return <NumberFormInput input={input as NumberFieldClientConfig} key={input.name} />
-                        case 'text':
-                            return <TextFormInput input={input as TextFieldClientConfig} key={input.name} />
-                        case 'date':
-                            return <DateFormInput input={input as DateFieldClientConfig} key={input.name} />
-                        case 'rich_text':
-                            return <RichTextFormInput input={input as RichTextFieldClientConfig} key={input.name} />
-                        case 'textarea':
-                            return <TextareaFormInput input={input as TextAreaFieldClientConfig} key={input.name} />
-                        case 'select':
-                            return (
-                                <SelectFormInput
-                                    sectionName={sectionName}
-                                    input={input as SelectFieldClientConfig}
-                                    key={input.name}
-                                />
-                            )
-                        case 'select_multiple':
-                            return (
-                                <MultipleSelectFormInput
-                                    input={input as SelectMultipleFieldClientConfig}
-                                    key={input.name}
-                                />
-                            )
-                        case 'photo':
-                            return (
+    return (
+        <>
+            {inputs?.length > 0 &&
+                inputs?.map((input) => {
+                    switch (input.type) {
+                        case 'color':
+                            return <ColorFormInput input={input as ColorFieldClientConfig} key={input.name} />
+                        case 'number':
+                            return <NumberFormInput input={input as NumberFieldClientConfig} key={input.name} />
+                        case 'text':
+                            return <TextFormInput input={input as TextFieldClientConfig} key={input.name} />
+                        case 'date':
+                            return <DateFormInput input={input as DateFieldClientConfig} key={input.name} />
+                        case 'date_range':
+                            return (
+                                <DateRangeFormInput
+                                    input={input as DateRangeFieldClientConfig}
+                                    key={(input as DateRangeFieldClientConfig).startName}
+                                />
+                            )
+                        case 'rich_text':
+                            return <RichTextFormInput input={input as RichTextFieldClientConfig} key={input.name} />
+                        case 'textarea':
+                            return <TextareaFormInput input={input as TextAreaFieldClientConfig} key={input.name} />
+                        case 'select':
+                            return (
+                                <SelectFormInput
+                                    sectionName={sectionName}
+                                    input={input as SelectFieldClientConfig}
+                                    key={input.name}
+                                />
+                            )
+                        case 'select_multiple':
+                            return (
+                                <MultipleSelectFormInput
+                                    input={input as SelectMultipleFieldClientConfig}
+                                    key={input.name}
+                                />
+                            )
+                        case 'photo':
+                            return (
                                 <PhotoFormInput
                                     sectionName={sectionName}
                                     input={input as PhotoFieldClientConfig}
                                     submitSuccessCount={submitSuccessCount}
                                     key={input.name}
                                 />
-                            )
-                        case 'video':
-                            return (
-                                <VideoFormInput
-                                    sectionName={sectionName}
-                                    input={input as VideoFieldClientConfig}
-                                    key={input.name}
-                                />
-                            )
-                        case 'document':
-                            return (
-                                <DocumentFormInput
-                                    sectionName={sectionName}
-                                    input={input as DocumentFieldClientConfig}
-                                    key={input.name}
-                                />
-                            )
-                        case 'password':
-                            return <PasswordFormInput input={input as PasswordFieldClientConfig} key={input.name} />
-                        case 'tags':
-                            return (
-                                <TagsFormInput
-                                    input={input as TagsFieldClientConfig}
-                                    sectionName={sectionName}
-                                    key={input.name}
-                                />
-                            )
-                        case 'map':
-                            return <MapFormInput input={input as MapFieldClientConfig} key={input.name} />
-                        case 'checkbox':
-                            // case 'permission':
-                            return <CheckboxFormInput input={input as CheckboxFieldClientConfig} key={input.name} />
-                        case 'slug':
-                            return <SlugFormInput input={input as SlugFieldClientConfig} key={input.name} />
-                        default:
-                            return null
-                    }
-                })}
-        </>
-    )
-}
+                            )
+                        case 'video':
+                            return (
+                                <VideoFormInput
+                                    sectionName={sectionName}
+                                    input={input as VideoFieldClientConfig}
+                                    key={input.name}
+                                />
+                            )
+                        case 'document':
+                            return (
+                                <DocumentFormInput
+                                    sectionName={sectionName}
+                                    input={input as DocumentFieldClientConfig}
+                                    key={input.name}
+                                />
+                            )
+                        case 'password':
+                            return <PasswordFormInput input={input as PasswordFieldClientConfig} key={input.name} />
+                        case 'tags':
+                            return (
+                                <TagsFormInput
+                                    input={input as TagsFieldClientConfig}
+                                    sectionName={sectionName}
+                                    key={input.name}
+                                />
+                            )
+                        case 'map':
+                            return <MapFormInput input={input as MapFieldClientConfig} key={input.name} />
+                        case 'checkbox':
+                            // case 'permission':
+                            return <CheckboxFormInput input={input as CheckboxFieldClientConfig} key={input.name} />
+                        case 'slug':
+                            return <SlugFormInput input={input as SlugFieldClientConfig} key={input.name} />
+                        default:
+                            return null
+                    }
+                })}
+        </>
+    )
+}

package/templates/default/components/form/helpers/_section-hot-reload.js

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1775405374274
+export const configLastUpdated = 1771768058991

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/CheckboxFormInput.tsx

@@ -1,46 +1,46 @@
-import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-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/FormInputElement'
+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/ColorFormInput.tsx

@@ -1,44 +1,44 @@
-import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-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/FormInputElement'
+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>
+    )
+}