create-nextjs-cms 0.5.8

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

@@ -0,0 +1,218 @@
+import React, { useRef, useState } from 'react'
+import getString from 'nextjs-cms/translations'
+import FormInputElement from '@/components/form/FormInputElement'
+import ProtectedImage from '@/components/ProtectedImage'
+import Image from 'next/image'
+import useModal from '@/hooks/useModal'
+import { ChevronRight, InfoIcon, Trash2Icon, UploadIcon, X } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { PhotoFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function PhotoFormInput({ input, sectionName }: { input: PhotoFieldClientConfig; sectionName: string }) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value,
+    })
+
+    const [fileName, setFileName] = useState(getString('no_file_selected'))
+    const fileInputContainerRef = useRef<HTMLDivElement>(null)
+    const [image, setImage] = useState<string | null>(null)
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+
+    const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files && event.target.files[0]) {
+            setFileName(event.target.files?.[0].name || getString('no_file_selected'))
+            setImage(URL.createObjectURL(event.target.files[0]))
+        } else {
+            setFileName(getString('no_file_selected'))
+            setImage(null)
+        }
+    }
+
+    const imageWidth = input.thumbnail?.width ?? 200
+    const imageHeight = input.thumbnail?.height ?? 200
+
+    const protectedImage = (
+        <ProtectedImage
+            section={sectionName}
+            photo={input.value}
+            isThumb={true}
+            alt={'admin'}
+            width={imageWidth}
+            height={imageHeight}
+            className='rounded p-1 ring ring-gray-400'
+        />
+    )
+
+    const handleImageDelete = () => {}
+    return (
+        <FormInputElement
+            validationError={error}
+            value={protectedImage}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <Card className='flex max-w-full flex-col'>
+                <CardHeader>
+                    <CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
+                        <span>{input.label} </span>
+                        {['true', 1, true].includes(input.required) ? <Badge>{getString('mandatory')}</Badge> : null}
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className='flex flex-col gap-1'>
+                    <div className='mb-2 flex flex-col text-sm'>
+                        {input.size ? (
+                            <div className='flex flex-wrap items-center gap-2'>
+                                <InfoIcon size={14} />
+                                <span>
+                                    {getString(
+                                        input.size.crop ? 'imageRecommendedDimensions' : 'imageDimensionsMustBe',
+                                    )}
+                                    :
+                                </span>
+                                <Badge variant={'secondary'}>{`${input.size.width} x ${input.size.height}`}</Badge>
+                            </div>
+                        ) : null}
+                        {input.maxFileSize ? (
+                            <div className='flex flex-wrap items-center gap-2'>
+                                <InfoIcon size={14} />
+                                <span>{getString('maxFileSize')}:</span>
+                                <Badge
+                                    variant={'secondary'}
+                                >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
+                            </div>
+                        ) : null}
+                        {input.extensions ? (
+                            <div className='flex flex-wrap items-center gap-2'>
+                                <InfoIcon size={14} />
+                                <span>{getString('allowedExtensions')}:</span>
+                                <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
+                            </div>
+                        ) : null}
+                    </div>
+                    <div className='flex flex-col gap-4'>
+                        {input.value ? protectedImage : null}
+                        {image ? (
+                            <div className='relative flex items-center'>
+                                <ChevronRight fontSize='large' />
+                                <div className='relative h-[150px] w-[150px]'>
+                                    <X
+                                        className='absolute -right-3 -top-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
+                                        onClick={() => {
+                                            setImage(null)
+                                            setFileName(getString('no_file_selected'))
+                                            field.onChange(undefined)
+                                            if (fileInputContainerRef.current) {
+                                                /**
+                                                 * Clear the child input value
+                                                 */
+                                                if (fileInputContainerRef.current?.firstChild) {
+                                                    ;(
+                                                        fileInputContainerRef.current.firstChild as HTMLInputElement
+                                                    ).value = ''
+                                                }
+                                            }
+                                        }}
+                                    />
+                                    <Image
+                                        className='mb-4 rounded p-1 ring ring-green-600'
+                                        src={image}
+                                        alt='new'
+                                        fill={true}
+                                        style={{
+                                            objectFit: 'contain',
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        ) : null}
+                    </div>
+                    <div ref={fileInputContainerRef}>
+                        <input
+                            type='file'
+                            className='hidden'
+                            name={field.name}
+                            ref={field.ref}
+                            onChange={(e) => {
+                                onImageChange(e)
+                                if (!input.value) {
+                                    field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
+                                }
+                            }}
+                        />
+                    </div>
+                    <div className='flex flex-col items-center gap-2 md:flex-row'>
+                        <div className='flex w-full flex-col'>
+                            {[false, 'false', 0].includes(input.required) &&
+                            !['', null, undefined].includes(input.value) ? (
+                                <div className='w-[400px] max-w-full'>
+                                    <button
+                                        type='button'
+                                        className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-gradient-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow hover:from-red-400 hover:to-amber-400'
+                                        onClick={() => {
+                                            setModal({
+                                                title: getString('deletePhoto'),
+                                                body: (
+                                                    <div className='p-4'>
+                                                        <div className='flex flex-col gap-4'>
+                                                            <div>{getString('deletePhotoText')}</div>
+                                                            <div className='flex gap-2'>
+                                                                <button
+                                                                    className='rounded bg-green-600 px-2 py-1 text-white'
+                                                                    onClick={handleImageDelete}
+                                                                >
+                                                                    {getString('yes')}
+                                                                </button>
+                                                                <button
+                                                                    className='rounded bg-red-800 px-2 py-1 text-white'
+                                                                    onClick={() => {
+                                                                        setModal(null)
+                                                                    }}
+                                                                >
+                                                                    {getString('no')}
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                ),
+                                                headerColor: 'bg-red-700',
+                                                titleColor: 'text-white',
+                                                lang: 'en',
+                                            })
+                                        }}
+                                    >
+                                        <Trash2Icon size={20} /> {getString('delete')}
+                                    </button>
+                                </div>
+                            ) : null}
+                            <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
+                                <button
+                                    type='button'
+                                    className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-gradient-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow hover:from-blue-500 hover:to-sky-400'
+                                    onClick={() => {
+                                        if (fileInputContainerRef.current?.firstChild) {
+                                            ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
+                                        }
+                                    }}
+                                >
+                                    <UploadIcon size={20} /> {getString('selectFile')}
+                                </button>
+                                <div className='flex w-full ps-2'>
+                                    <div className='break-all'>{fileName}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +1,133 @@
+import React, { useRef, useState } from 'react'
+import { Editor } from '@tinymce/tinymce-react'
+import FormInputElement from '@/components/form/FormInputElement'
+// import { useTheme } from 'next-themes'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { RichTextFieldClientConfig } from 'nextjs-cms/core/fields'
+import { FieldError, useFormContext } from 'react-hook-form'
+
+export default function RichTextFormInput({ input }: { input: RichTextFieldClientConfig }) {
+    const { setValue, register, formState } = useFormContext()
+    register(input.name)
+    const editorRef = useRef(null)
+    const value = input.value ? input.value : ''
+    const [initialValue, setInitialValue] = useState('')
+    const [key, setKey] = useState(0) // Step 1: Add key state
+    // const [editorPhotos, setEditorPhotos] = useState<string[]>([])
+    // const { theme } = useTheme()
+    const axiosPrivate = useAxiosPrivate()
+
+    /*useEffect(() => {
+        // Step 2: Update the key when the theme changes
+        setKey((prevKey) => prevKey + 1)
+    }, [theme])*/
+
+    const image_upload_handler = (blobInfo: any, progress: any) =>
+        new Promise<string>(async (resolve, reject) => {
+            const formData = new FormData()
+            formData.append('photo', blobInfo.blob(), blobInfo.filename())
+            formData.append('sectionName', 'editor')
+            formData.append('itemId', '123')
+
+            axiosPrivate
+                .post('/editor/photo', Object.fromEntries(formData.entries()), {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                })
+                .then((res) => {
+                    // resolve(getPublicPhotoUrl(res.data.name, 'editor', 'large'))
+                    resolve(res.data)
+                    return
+                })
+                .catch((error) => {
+                    if (error.response) {
+                        reject({ message: 'Error: ' + error.response.data.error, remove: true })
+                    } else if (error.request) {
+                        reject({ message: 'Error: ' + error.request, remove: true })
+                    } else {
+                        reject({ message: 'Error: ' + error.message, remove: true })
+                    }
+                })
+        })
+
+    const plugins = [
+        'directionality ',
+        'advlist',
+        'autolink',
+        'lists',
+        'link',
+        'charmap',
+        'anchor',
+        'searchreplace',
+        'visualblocks',
+        'code',
+        'fullscreen',
+        'insertdatetime',
+        'table',
+        'preview',
+        'help',
+        'wordcount',
+    ]
+
+    let toolbar =
+        'undo redo | bold italic underline strikethrough formatselect | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment | footnotes '
+    if (input.allowMedia) {
+        plugins.push('media', 'image')
+        toolbar += ' | insertfile image media'
+    }
+
+    return (
+        <FormInputElement
+            validationError={formState.errors[input.name] as FieldError}
+            value={<div style={{ maxHeight: '200px', overflow: 'auto', wordBreak: 'break-all' }}>{input.value}</div>}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <Editor
+                // TODO: Is this expensive?
+                onEditorChange={(content) => {
+                    setValue(input.name, content, { shouldValidate: true })
+                }}
+                key={key} // Step 3: Pass the key as a prop
+                /*
+                onEditorChange={(content, editor) => {
+                    console.log('Content was updated:', content)
+                    setValue(content)
+                }}*/
+                // onChange={(e) => setValue(e.target.getContent())}
+                tinymceScriptSrc={'/tinymce/tinymce.min.js?v=1.1'}
+                onInit={(evt, editor) => {
+                    // @ts-ignore
+                    editorRef.current = editor
+                    setInitialValue(value ? value : input.value ? input.value : '')
+                }}
+                textareaName={input.name}
+                initialValue={initialValue}
+                init={{
+                    promotion: false,
+                    height: 500,
+                    menubar: 'file edit view insert format tools table tc help',
+                    plugins: plugins,
+                    toolbar: toolbar,
+
+                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+                    // skin: theme === 'light' ? 'oxide' : 'oxide-dark',
+                    // content_css: theme === 'light' ? 'default' : 'dark',
+                    skin: 'oxide-dark',
+                    content_css: 'dark',
+                    relative_urls: false,
+                    remove_script_host: false,
+                    convert_urls: true,
+                    extended_valid_elements: 'iframe[src|width|height|name|align|class|style],*[id|class|style]',
+                    // valid_children: '+body[style],+div[*],+p[*]', // Allow any element to be a child of body, div, and p elements
+                    // valid_elements: '*[*]', // Allow all elements and attributes
+                    images_file_types: 'jpg,png,webp',
+                    block_unsupported_drop: true,
+                    images_upload_handler: image_upload_handler,
+                }}
+            />
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import SelectBox from '@/components/SelectBox'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import getString from 'nextjs-cms/translations'
+import { trpc } from '@/app/_trpc/client'
+import { SelectFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
+import { ConditionalFields } from '@/components/ConditionalFields'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function SelectFormInput({
+    input,
+    sectionName,
+    refetch,
+    level = 1,
+}: {
+    input: SelectFieldClientConfig
+    sectionName: string
+    refetch?: any
+    level?: number
+}) {
+    /**
+     * Check and add the select option if it does not exist, the select option has a value of undefined
+     */
+    const exists = input.options?.filter((option) => option.value === undefined)
+    if (!exists || exists.length === 0) {
+        if (input.options) {
+            // @ts-ignore - This is a type-hack to add the placeholder `select` option to the options array
+            input.options.unshift({ value: undefined, label: getString('select') })
+        }
+    }
+
+    const depth = input.section ? input.section.depth : 1
+    const [parent] = useAutoAnimate(/* optional config */)
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+    const [value, setValue] = useState<SelectOption | undefined>(getValue(input.value))
+    const [child, setChild] = useState<{
+        input: SelectFieldClientConfig
+        level: number
+    } | null>(null)
+
+    const childrenMutation = trpc.categorySections.getChildren.useMutation({
+        onSuccess: (data) => {
+            if (data && data.options) {
+                const childInput = {
+                    input: {
+                        type: 'select' as const,
+                        required: false,
+                        readonly: false,
+                        conditionalFields: [],
+                        options: data.options,
+                        section: input.section,
+                        label: '|->',
+                        name: input.name,
+                        value:
+                            input.value && Array.isArray(input.value) && input.value[1]
+                                ? input.value.slice(1)
+                                : undefined,
+                    },
+                    level: data.level,
+                }
+                setChild(childInput)
+            } else {
+                setChild(null)
+            }
+
+            setIsLoading(false)
+        },
+        onError: (error) => {},
+        // console.log('Error', error)
+    })
+
+    function getValue(value: SelectOption[] | undefined): SelectOption | undefined {
+        if (value && !Array.isArray(value)) {
+            return value
+        }
+        if (Array.isArray(value) && value.length > 0) {
+            return value[0]
+        }
+        return undefined
+    }
+
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: value?.value,
+    })
+
+    useEffect(() => {
+        setChild(null)
+        if (!input.section || !input.section.name) return
+        if (!value?.value) {
+            return
+        }
+
+        /**
+         * If the depth is less than or equal to 1, return
+         * If the level is greater than or equal to the depth, return
+         */
+        if (depth <= 1 || level >= depth) return
+
+        setIsLoading(true)
+        childrenMutation.mutate({
+            parentId: value.value,
+            sectionName: input.section.name,
+            level: level,
+        })
+    }, [value?.value])
+
+    return (
+        <>
+            <FormInputElement validationError={error} label={input.label} required={input.required}>
+                <input
+                    type='hidden'
+                    disabled={field.disabled}
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    ref={field.ref}
+                    value={field.value}
+                />
+                <SelectBox
+                    defaultValue={value?.value ? value?.value.toString() : undefined}
+                    items={input.options ? input.options : []}
+                    onChange={(value: SelectOption) => {
+                        field.onChange(value.value)
+                        if (value) setValue(value)
+                    }}
+                    classname='w-full shadow-sm'
+                />
+            </FormInputElement>
+            <div ref={parent}>
+                {isLoading && <LoadingSpinners />}
+                {child && (
+                    <div className='ps-4'>
+                        {/* @ts-ignore no validators for child selects */}
+                        <SelectFormInput
+                            sectionName={sectionName}
+                            refetch={() => {
+                                refetch().then(() => {
+                                    setValue(undefined)
+                                })
+                            }}
+                            level={child.level}
+                            input={child.input}
+                        />
+                    </div>
+                )}
+
+                {input.conditionalFields ? (
+                    <ConditionalFields
+                        sectionName={sectionName}
+                        conditionalFields={input.conditionalFields}
+                        value={value?.value}
+                    />
+                ) : null}
+            </div>
+        </>
+    )
+}

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

@@ -0,0 +1,63 @@
+import FormInputElement from '@/components/form/FormInputElement'
+import { Autocomplete, Chip, TextField } from '@mui/material'
+import getString from 'nextjs-cms/translations'
+import { TagsFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function TagsFormInput({ input }: { input: TagsFieldClientConfig }) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? undefined,
+    })
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={field.value}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <input
+                type='hidden'
+                className='hidden'
+                disabled={field.disabled}
+                name={field.name}
+                onBlur={field.onBlur}
+                value={field.value}
+                ref={field.ref}
+            />
+
+            <Autocomplete
+                multiple
+                // limitTags={2}
+                options={[]}
+                getOptionLabel={(option) => option}
+                renderInput={(params) => (
+                    <TextField
+                        {...params}
+                        label={input.label}
+                        // className='ring-2 outline-0 focus:ring-blue-500 hover:ring-gray-400 ring-gray-300 shadow-sm rounded w-full bg-input text-foreground'
+                        placeholder={input.placeholder ? input.placeholder : getString('start_typing')}
+                    />
+                )}
+                freeSolo={true}
+                onChange={(event, newInputValue) => {
+                    field.onChange(newInputValue.toString())
+                }}
+                defaultValue={input.value ? input.value.split(',') : []}
+                disableClearable={true}
+                renderTags={(tagValue, getTagProps) => {
+                    return tagValue.map((option, index) => (
+                        <Chip {...getTagProps({ index })} key={option} label={option} />
+                    ))
+                }}
+            />
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +1,48 @@
+import React from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import type { TextFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useFormContext, useController } from 'react-hook-form'
+
+export default function TextFormInput({
+    input,
+    direction,
+    disabled = false,
+}: {
+    input: TextFieldClientConfig
+    direction?: 'row' | 'col'
+    disabled?: boolean
+}) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? undefined,
+        disabled: disabled,
+    })
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={input.value}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <input
+                placeholder={input.placeholder ? input.placeholder : input.label}
+                type='text'
+                readOnly={disabled}
+                disabled={field.disabled}
+                name={field.name}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                value={field.value}
+                ref={field.ref}
+                className='w-full rounded bg-input p-3 text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
+            />
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import { TextAreaFieldClientConfig } from 'nextjs-cms/core/fields'
+import { FieldError, useController, useFormContext } from 'react-hook-form'
+
+export default function TextareaFormInput({
+    input,
+    defaultValue,
+    direction,
+}: {
+    input: TextAreaFieldClientConfig
+    defaultValue?: string | null
+    direction?: 'row' | 'col'
+}) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: defaultValue ?? input.value ?? undefined,
+        disabled: input.readonly,
+    })
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={<div style={{ maxHeight: '200px', overflow: 'auto', wordBreak: 'break-all' }}>{input.value}</div>}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <textarea
+                placeholder={input.label}
+                readOnly={input.readonly}
+                disabled={field.disabled}
+                name={field.name}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                value={field.value}
+                ref={field.ref}
+                className='h-[150px] w-full rounded bg-input p-3 text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
+            ></textarea>
+        </FormInputElement>
+    )
+}