create-nextjs-cms 0.5.8

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

@@ -0,0 +1,298 @@
+export const revalidate = 1
+
+
+import ContainerBox from '@/components/ContainerBox'
+import getString from 'nextjs-cms/translations'
+import FormInputs from '@/components/form/FormInputs'
+import Dropzone, { DropzoneHandles } from '@/components/Dropzone'
+import NewVariantComponent, { VariantHandles } from '@/components/NewVariantComponent'
+import classNames from 'classnames'
+import ProgressBar from '@/components/ProgressBar'
+import React, { RefObject, useEffect } from 'react'
+import { RouterOutputs } from 'nextjs-cms/api'
+import * as z from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm, FormProvider } from 'react-hook-form'
+import {
+    CheckboxFieldClientConfig,
+    ColorFieldClientConfig,
+    DateFieldClientConfig,
+    DocumentFieldClientConfig,
+    MapFieldClientConfig,
+    NumberFieldClientConfig,
+    PasswordFieldClientConfig,
+    PhotoFieldClientConfig,
+    RichTextFieldClientConfig,
+    SelectFieldClientConfig,
+    SelectMultipleFieldClientConfig,
+    TextAreaFieldClientConfig,
+    TextFieldClientConfig,
+    VideoFieldClientConfig,
+} from 'nextjs-cms/core/fields'
+
+import { numberFieldSchema,
+    textFieldSchema,
+    selectFieldSchema,
+    selectMultipleFieldSchema,
+    dateFieldSchema,
+    checkboxFieldSchema,
+    textareaFieldSchema,
+    richTextFieldSchema,
+    photoFieldSchema,
+    documentFieldSchema,
+    videoFieldSchema,
+    colorFieldSchema,
+    mapFieldSchema,
+    passwordFieldSchema
+} from 'nextjs-cms/validators'
+
+import { ConditionalField, FieldType } from 'nextjs-cms/core/types'
+import { sectionSchemaLastUpdated } from '@/components/form/helpers/util'
+
+export default function Form({
+    formType,
+    data,
+    dropzoneRef,
+    variantRef,
+    handleSubmit,
+    isSubmitting,
+    response,
+    progress,
+    progressVariant,
+    buttonType = 'big',
+}: {
+    formType?: 'new' | 'edit'
+    data:
+        | RouterOutputs['hasItemsSections']['newItem']
+        | RouterOutputs['hasItemsSections']['editItem']
+        | RouterOutputs['simpleSections']['create']
+        | {
+              section: {
+                  name: string
+                  gallery?: boolean
+              }
+              inputGroups:
+                  | {
+                        groupId: number | undefined
+                        groupTitle: string
+                        groupOrder: number
+                        inputs: {
+                            type: FieldType
+                            name: string
+                            label: string
+                            required: boolean
+                            conditionalFields: ConditionalField[]
+                            placeholder?: string
+                            readonly: boolean
+                            value: any
+                        }[]
+                    }[]
+                  | undefined
+          }
+    dropzoneRef?: RefObject<DropzoneHandles | null>
+    variantRef?: RefObject<VariantHandles[]>
+    handleSubmit: any
+    isSubmitting: boolean
+    response?: any
+    progress?: number
+    progressVariant?: 'determinate' | 'query'
+    buttonType?: 'big' | 'small'
+}) {
+    let schema = z.object({})
+    /**
+     * Construct the schema for the form
+     */
+    data.inputGroups?.forEach((inputGroup) => {
+        inputGroup.inputs.forEach((input) => {
+            if (input.readonly) return
+            switch (input.type) {
+                case 'select_multiple':
+                    schema = schema.extend({
+                        [input.name]: selectMultipleFieldSchema(input as SelectMultipleFieldClientConfig),
+                    })
+                    break
+                case 'select':
+                    schema = schema.extend({
+                        [input.name]: selectFieldSchema(input as SelectFieldClientConfig),
+                    })
+                    break
+
+                case 'date':
+                    schema = schema.extend({
+                        [input.name]: dateFieldSchema(input as DateFieldClientConfig),
+                    })
+                    break
+
+                case 'checkbox':
+                    schema = schema.extend({
+                        [input.name]: checkboxFieldSchema(input as CheckboxFieldClientConfig),
+                    })
+                    break
+
+                case 'text':
+                    schema = schema.extend({
+                        [input.name]: textFieldSchema(input as TextFieldClientConfig),
+                    })
+                    break
+
+                case 'textarea':
+                    schema = schema.extend({
+                        [input.name]: textareaFieldSchema(input as TextAreaFieldClientConfig),
+                    })
+                    break
+
+                case 'rich_text':
+                    schema = schema.extend({
+                        [input.name]: richTextFieldSchema(input as RichTextFieldClientConfig),
+                    })
+                    break
+
+                case 'photo':
+                    if (formType === 'edit' && !!input.value) break
+                    schema = schema.extend({
+                        [input.name]: photoFieldSchema(input as PhotoFieldClientConfig),
+                    })
+                    break
+
+                case 'document':
+                    if (formType === 'edit' && !!input.value) break
+                    schema = schema.extend({
+                        [input.name]: documentFieldSchema(input as DocumentFieldClientConfig),
+                    })
+                    break
+
+                case 'video':
+                    if (formType === 'edit' && !!input.value) break
+                    schema = schema.extend({
+                        [input.name]: videoFieldSchema(input as VideoFieldClientConfig),
+                    })
+                    break
+
+                case 'number':
+                    schema = schema.extend({
+                        [input.name]: numberFieldSchema(input as NumberFieldClientConfig),
+                    })
+                    break
+                case 'color':
+                    schema = schema.extend({
+                        [input.name]: colorFieldSchema(input as ColorFieldClientConfig),
+                    })
+                    break
+
+                case 'map':
+                    schema = schema.extend({
+                        [input.name]: mapFieldSchema(input as MapFieldClientConfig),
+                    })
+                    break
+
+                case 'password':
+                    schema = schema.extend({
+                        [input.name]: passwordFieldSchema(input as PasswordFieldClientConfig),
+                    })
+                    break
+            }
+        })
+    })
+
+    const methods = useForm({
+        resolver: zodResolver(schema),
+    })
+
+    return (
+        <FormProvider {...methods}>
+            <form
+                method='post'
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    // e.stopPropagation()
+                    methods.handleSubmit((data) => {
+                        handleSubmit(new FormData(e.target as HTMLFormElement))
+                    })(e)
+                }}
+                encType='multipart/form-data'
+            >
+                <div className='w-full' data-section-schema-version={sectionSchemaLastUpdated}>
+                    {/*<ContainerBox title={formType ? getString(formType === 'new' ? 'add_new' : 'edit') : undefined}>*/}
+                    <div className='p-4'>
+                        <div className=''>
+                            {data.inputGroups ? (
+                                <div className='flex flex-col gap-4'>
+                                    {data.inputGroups.length > 0
+                                        ? data.inputGroups.map((inputGroup, index: number) => {
+                                              return (
+                                                  <ContainerBox title={inputGroup.groupTitle} key={index}>
+                                                      <FormInputs
+                                                          inputs={inputGroup.inputs}
+                                                          sectionName={data.section.name}
+                                                      />
+                                                  </ContainerBox>
+                                              )
+                                          })
+                                        : null}
+                                    {data.section.gallery ? (
+                                        <div className='w-full'>
+                                            <Dropzone ref={dropzoneRef} />
+                                        </div>
+                                    ) : null}
+
+                                    {/*{data.section.variants && data.section.variants.length > 0 ? (
+                                            <div className='w-full'>
+                                                <div className='flex flex-col gap-4'>
+                                                    {data.section.variants.map((variant, index) => {
+                                                        // Only one variant is allowed for now
+                                                        // I have to find a way to make multiple variantRef in order to handle multiple variants
+                                                        if (index > 0) return
+
+                                                        return (
+                                                            <NewVariantComponent
+                                                                ref={(el) => (variantRef.current[index] = el)}
+                                                                key={index}
+                                                                section={section}
+                                                                variantInfo={variant.info}
+                                                                xsrfToken={xsrfToken}
+                                                            />
+                                                        )
+                                                    })}
+                                                </div>
+                                            </div>
+                                        ) : null}*/}
+
+                                    <div className='flex flex-col gap-3 pb-4'>
+                                        <div className=''>
+                                            <button
+                                                className={classNames({
+                                                    'w-full': buttonType === 'big',
+                                                    'float-end': buttonType === 'small',
+                                                    'rounded bg-gradient-to-r px-4 py-2 font-bold text-white drop-shadow':
+                                                        true,
+                                                    'from-emerald-700 via-green-700 to-green-500 dark:from-blue-800 dark:via-sky-800 dark:to-slate-500':
+                                                        !isSubmitting,
+                                                    'from-gray-600 via-gray-500 to-gray-400': isSubmitting,
+                                                })}
+                                                type='submit'
+                                                disabled={isSubmitting}
+                                            >
+                                                {isSubmitting
+                                                    ? getString('loading')
+                                                    : getString(formType === 'new' ? 'create' : 'save')}
+                                            </button>
+                                            {progressVariant && progress ? (
+                                                isSubmitting ? (
+                                                    <div className='mt-0.5'>
+                                                        <ProgressBar variant={progressVariant} value={progress} />
+                                                    </div>
+                                                ) : null
+                                            ) : null}
+                                        </div>
+                                        {response ? <div className='w-full'>{response}</div> : null}
+                                    </div>
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+                    {/*</ContainerBox>*/}
+                </div>
+            </form>
+        </FormProvider>
+    )
+}

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

@@ -0,0 +1,68 @@
+import React from 'react'
+import classNames from 'classnames'
+import { Badge } from '@/components/ui/badge'
+import { FieldError } from 'react-hook-form'
+
+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
+}) {
+    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'}>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-sm 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

@@ -0,0 +1,108 @@
+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 type { FieldClientConfig } from 'nextjs-cms/core/fields'
+import {
+    CheckboxFieldClientConfig,
+    ColorFieldClientConfig,
+    DateFieldClientConfig,
+    DocumentFieldClientConfig,
+    MapFieldClientConfig,
+    NumberFieldClientConfig,
+    PasswordFieldClientConfig,
+    PhotoFieldClientConfig,
+    RichTextFieldClientConfig,
+    SelectFieldClientConfig,
+    SelectMultipleFieldClientConfig,
+    TagsFieldClientConfig,
+    TextAreaFieldClientConfig,
+    TextFieldClientConfig,
+    VideoFieldClientConfig,
+} from 'nextjs-cms/core/fields'
+
+export default function FormInputs({ inputs, sectionName }: { inputs: FieldClientConfig[]; sectionName: string }) {
+    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 (
+                                <PhotoFormInput
+                                    sectionName={sectionName}
+                                    input={input as PhotoFieldClientConfig}
+                                    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} 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} />
+                        default:
+                            return null
+                    }
+                })}
+        </>
+    )
+}

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

@@ -0,0 +1,20 @@
+// Safe import wrapper for sectionSchemaLastUpdated
+// This prevents errors if the auto-generated file is deleted by end-users
+// The file is auto-generated by SectionFactory and can be safely deleted
+// without breaking the application - it will fall back to current timestamp
+
+let sectionSchemaLastUpdated: number
+
+try {
+    // Try to import the auto-generated file from root
+    // Using dynamic require to handle missing file gracefully
+    // @/ alias resolves to the app root directory
+    const sectionInfo = require('@/next-cms-sectioninfo')
+    sectionSchemaLastUpdated = sectionInfo?.sectionSchemaLastUpdated ?? Date.now()
+} catch {
+    // If file doesn't exist or can't be loaded, use current timestamp as fallback
+    // This ensures the app continues to work even if the file is deleted
+    sectionSchemaLastUpdated = Date.now()
+}
+
+export { sectionSchemaLastUpdated }

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

@@ -0,0 +1,33 @@
+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'
+
+export default function CheckboxFormInput({ input }: { input: CheckboxFieldClientConfig }) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value === 1,
+    })
+    return (
+        <FormInputElement
+            validationError={error}
+            value={input.value}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <Switch
+                ref={field.ref}
+                onCheckedChange={field.onChange}
+                defaultChecked={input.value === 1}
+                name={field.name}
+            />
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +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-sm outline-0 ring-2 ring-blue-300 focus:ring-blue-500'
+            />
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +1,107 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import FormInputElement from '@/components/form/FormInputElement'
+import { format } from 'date-fns'
+import { cn } from 'nextjs-cms/utils'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { CalendarIcon } from '@radix-ui/react-icons'
+import getString from 'nextjs-cms/translations'
+import { DateFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+
+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] + ' ' + format(month, 'LLLL', { locale: options?.locale })
+}
+
+export default function DateFormInput({ input }: { input: DateFieldClientConfig }) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        // defaultValue: input.value ?? undefined,
+    })
+
+    const [date, setDate] = React.useState<Date | undefined>(
+        dayjs(input.value).isValid() ? dayjs(input.value).toDate() : 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 ? format(date, 'yyyy-MM-dd') : undefined}
+                ref={field.ref}
+                className='rounded border p-2'
+            />
+
+            <div className='flex flex-col items-start gap-2'>
+                <Popover>
+                    <PopoverTrigger asChild>
+                        <Button
+                            variant={'outline'}
+                            className={cn(
+                                'min-w-[250px] justify-start rounded bg-input px-3 py-6 text-start font-normal text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500',
+                                !date && 'text-muted-foreground',
+                            )}
+                        >
+                            <CalendarIcon className='mr-2 h-4 w-4' />
+                            {date ? format(date, 'PPP') : <span>Pick a date</span>}
+                        </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className='w-auto p-0'>
+                        <Calendar
+                            mode='single'
+                            selected={date}
+                            onSelect={(date) => {
+                                setDate(date)
+                                field.onChange(date)
+                            }}
+                            initialFocus
+                            formatters={{ formatCaption }}
+                        />
+                    </PopoverContent>
+                </Popover>
+                <Button
+                    onClick={() => {
+                        setDate(undefined)
+                        field.onChange(undefined)
+                    }}
+                    variant='default'
+                    type='button'
+                    size='sm'
+                >
+                    {getString('cancel')}
+                </Button>
+            </div>
+        </FormInputElement>
+    )
+}