create-nextjs-cms 0.5.8

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

@@ -0,0 +1,124 @@
+import React, { useRef, useState } from 'react'
+import getString from 'nextjs-cms/translations'
+import FormInputElement from '@/components/form/FormInputElement'
+import ProtectedDocument from '@/components/ProtectedDocument'
+import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
+import { ChevronRight, X } from 'lucide-react'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function DocumentFormInput({
+    input,
+    sectionName,
+}: {
+    input: DocumentFieldClientConfig
+    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<HTMLInputElement>(null)
+    const [image, setImage] = useState<string | null>(null)
+
+    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 document = (
+        <ProtectedDocument
+            section={sectionName}
+            fieldName={input.name}
+            file={input.value}
+            width={450}
+            height={620}
+            className='mb-4 rounded p-1 ring ring-gray-400'
+        />
+    )
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={document}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <div className='flex flex-row gap-2'>
+                {input.value ? document : null}
+                {image && (
+                    <div className='relative flex items-center'>
+                        <ChevronRight fontSize='large' />
+                        <div className='relative'>
+                            <X
+                                className='absolute -right-3 -top-3 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
+                                onClick={() => {
+                                    setImage(null)
+                                    setFileName(getString('no_file_selected'))
+                                    field.onChange(undefined)
+
+                                    /**
+                                     * Clear the child input value
+                                     */
+                                    if (fileInputContainerRef.current?.firstChild) {
+                                        ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
+                                    }
+                                }}
+                            />
+                            <embed
+                                src={image}
+                                className='mb-4 max-w-full rounded p-1 ring ring-green-600'
+                                width={350}
+                                height={520}
+                            />
+                        </div>
+                    </div>
+                )}
+            </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='w-full flex-1 md:flex-[0.5]'>
+                    <button
+                        type='button'
+                        className='w-full 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'
+                        onClick={() => {
+                            if (fileInputContainerRef.current?.firstChild) {
+                                ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
+                            }
+                        }}
+                    >
+                        Upload
+                    </button>
+                </div>
+                <div className='w-full flex-1'>
+                    <span>{fileName}</span>
+                </div>
+            </div>
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +1,139 @@
+import React, { useEffect } from 'react'
+import { APIProvider, Map, Marker } from '@vis.gl/react-google-maps'
+import ContainerBox from '@/components/ContainerBox'
+import { Button } from '@/components/ui/button'
+import TooltipComponent from '@/components/TooltipComponent'
+import getString from 'nextjs-cms/translations'
+import { MapFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+import FormInputElement from '@/components/form/FormInputElement'
+
+export default function MapFormInput({ input }: { input: MapFieldClientConfig }) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? undefined,
+    })
+
+    const [coords, setCoords] = React.useState<
+        | {
+              lat: number
+              lng: number
+          }
+        | undefined
+    >(() => {
+        if (input.value?.lat && input.value?.lng) {
+            return {
+                lat: input.value.lat,
+                lng: input.value.lng,
+            }
+        }
+    })
+
+    useEffect(() => {
+        field.onChange(coords ? `${coords.lat},${coords.lng}` : undefined)
+    }, [coords])
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={
+                <span>
+                    {input.value?.lat}, {input.value?.lng}
+                </span>
+            }
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <ContainerBox>
+                <div className='relative h-[500px] w-full overflow-hidden rounded-xl outline-0'>
+                    <input
+                        type='hidden'
+                        value={coords ? `${coords.lat},${coords.lng}` : ''}
+                        disabled={field.disabled}
+                        name={field.name}
+                        onChange={field.onChange}
+                        onBlur={field.onBlur}
+                        ref={field.ref}
+                    />
+                    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? ''}>
+                        <Map
+                            clickableIcons={false}
+                            zoomControl={true}
+                            onClick={(e) => {
+                                e.stop()
+                                setCoords(() => {
+                                    if (e.detail.latLng) {
+                                        return {
+                                            lat: e.detail.latLng.lat,
+                                            lng: e.detail.latLng.lng,
+                                        }
+                                    }
+                                })
+                            }}
+                            zoom={input.zoom}
+                            minZoom={input.minZoom}
+                            restriction={{
+                                latLngBounds: input.latLngBounds,
+                                strictBounds: true,
+                            }}
+                            center={input.value ? { lat: input.value.lat, lng: input.value.lng } : input.center}
+                            gestureHandling={'greedy'}
+                            disableDefaultUI={true}
+                        >
+                            {coords?.lat && coords?.lng ? (
+                                <Marker position={{ lat: coords.lat, lng: coords.lng }} />
+                            ) : null}
+                        </Map>
+                    </APIProvider>
+                </div>
+
+                <div className='my-2 flex flex-wrap gap-2'>
+                    <Button
+                        type='button'
+                        size={'sm'}
+                        disabled={!coords?.lat || !coords?.lng}
+                        variant='default'
+                        onClick={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                            setCoords(undefined)
+                        }}
+                    >
+                        {getString('removeMarker')}
+                    </Button>
+                    <TooltipComponent
+                        delayDuration={100}
+                        content={!(input.value?.lat && input.value?.lng) ? getString('restoreMarkerTooltip') : null}
+                    >
+                        <Button
+                            type='button'
+                            size={'sm'}
+                            disabled={!(input.value?.lat && input.value?.lng)}
+                            variant='default'
+                            onClick={(e) => {
+                                e.preventDefault()
+                                e.stopPropagation()
+                                setCoords(() => {
+                                    if (input.value?.lat && input.value?.lng) {
+                                        return {
+                                            lat: input.value.lat,
+                                            lng: input.value.lng,
+                                        }
+                                    }
+                                })
+                            }}
+                        >
+                            {getString('restoreMarker')}
+                        </Button>
+                    </TooltipComponent>
+                </div>
+            </ContainerBox>
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +1,150 @@
+import FormInputElement from '@/components/form/FormInputElement'
+import { Autocomplete, Checkbox, Chip, TextField } from '@mui/material'
+import { useEffect, useState } from 'react'
+import * as React from 'react'
+import { useTheme } from 'next-themes'
+
+import { styled } from '@mui/material/styles'
+import { SelectMultipleFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
+import { Square, CheckSquare2 } from 'lucide-react'
+import { useController, useFormContext } from 'react-hook-form'
+
+const icon = <Square fontSize='small' />
+const checkedIcon = <CheckSquare2 fontSize='small' />
+export default function MultipleSelectFormInput({ input }: { input: SelectMultipleFieldClientConfig }) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value,
+    })
+
+    const [value, setValue] = useState<SelectOption[] | undefined>([])
+    const { theme } = useTheme()
+
+    const borderColor = theme === 'dark' ? 'rgba(66,72,79,0.46)' : 'rgb(204,204,204)'
+    const darkColor = 'rgba(66,72,79,0.46)' // Replace with the actual color from your screenshot
+    const lightColor = '#f8f9fa' // Replace with the actual color from your screenshot
+    const textColor = theme === 'dark' ? '#f8f9fa' : '#111111'
+    const placeholderColor = theme === 'dark' ? '#bdbdbd' : '#a1a1a1'
+
+    // Custom styled TextField for Autocomplete
+    const CustomTextField = styled(TextField)({
+        '& .MuiFormLabel-root': {
+            color: placeholderColor,
+        },
+        '& label.Mui-focused': {
+            color: placeholderColor,
+        },
+        '& .MuiInput-underline:after': {
+            borderBottomColor: theme === 'dark' ? lightColor : darkColor,
+        },
+        '& .MuiOutlinedInput-root': {
+            '& fieldset': {
+                borderColor: borderColor,
+                borderWidth: 2,
+                borderRadius: 8,
+            },
+            '&:hover fieldset': {
+                borderColor: theme === 'dark' ? lightColor : darkColor,
+            },
+            '&.Mui-focused fieldset': {
+                borderColor: '#5572fa',
+            },
+            '& input': {
+                color: textColor,
+            },
+        },
+    })
+
+    useEffect(() => {
+        if (input.value && input.value?.length > 0) {
+            setValue(input.value)
+        }
+    }, [input.value])
+
+    return (
+        <FormInputElement validationError={error} label={input.label} required={input.required}>
+            <input
+                type='hidden'
+                className='hidden'
+                disabled={field.disabled}
+                name={field.name}
+                onBlur={field.onBlur}
+                ref={field.ref}
+                value={JSON.stringify(field.value)}
+            />
+
+            <Autocomplete
+                className=''
+                multiple
+                options={input.options ? input.options : []}
+                disableCloseOnSelect
+                getOptionLabel={(option) => option.label.toString()}
+                renderOption={(props, option, { selected }) => (
+                    <li {...props}>
+                        <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
+                        {option.label}
+                    </li>
+                )}
+                sx={{
+                    '& .MuiAutocomplete-inputRoot': {
+                        color: lightColor, // text color
+                        '& .MuiAutocomplete-endAdornment': {
+                            color: lightColor,
+                        },
+                    },
+                    '& .MuiAutocomplete-popupIndicator': {
+                        color: lightColor,
+                    },
+                    '& .MuiAutocomplete-clearIndicator': {
+                        color: lightColor,
+                    },
+                    '& .MuiPaper-root': {
+                        bgcolor: darkColor, // dropdown background color
+                        color: lightColor, // option text color
+                        '& .MuiAutocomplete-option': {
+                            '&:hover': {
+                                bgcolor: lightColor, // option hover color
+                                color: darkColor,
+                            },
+                            '&[aria-selected="true"]': {
+                                bgcolor: lightColor, // option selected color
+                                color: darkColor,
+                            },
+                            '&[data-focus="true"]': {
+                                bgcolor: lightColor, // option focused color
+                                color: darkColor,
+                            },
+                        },
+                    },
+                }}
+                defaultValue={input.value ? input.value : []}
+                renderInput={(params) => (
+                    <CustomTextField
+                        className='w-full bg-input text-foreground'
+                        {...params}
+                        label={input.label}
+                        placeholder={input.label}
+                    />
+                )}
+                isOptionEqualToValue={(option, value) => option.value.toString() === value.value.toString()}
+                onChange={(event, newInputValue) => {
+                    if (newInputValue) {
+                        field.onChange(newInputValue)
+                        setValue(newInputValue)
+                    }
+                }}
+                disableClearable={true}
+                renderTags={(tagValue, getTagProps) => {
+                    return tagValue.map((option, index) => (
+                        <Chip color='primary' {...getTagProps({ index })} key={option.value} label={option.label} />
+                    ))
+                }}
+            />
+        </FormInputElement>
+    )
+}

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import type { NumberFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+import { isNumber, toNumber } from 'lodash-es'
+
+export default function NumberFormInput({ input }: { input: NumberFieldClientConfig }) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: isNumber(input.value) ? input.value : undefined,
+        disabled: input.readonly,
+    })
+    return (
+        <FormInputElement
+            validationError={error}
+            value={input.value}
+            label={input.label}
+            required={input.required}
+            readonly={input.readonly}
+        >
+            <input
+                type='number'
+                placeholder={input.label}
+                readOnly={field.disabled}
+                disabled={field.disabled}
+                name={field.name}
+                onChange={(event) =>
+                    event.target.value ? field.onChange(toNumber(event.target.value)) : field.onChange(NaN)
+                }
+                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/PasswordFormInput.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import { PasswordFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function PasswordFormInput({
+    input,
+    defaultValue,
+    direction,
+}: {
+    input: PasswordFieldClientConfig
+    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={'********'}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <input
+                placeholder={input.placeholder ? input.placeholder : input.label}
+                type='password'
+                readOnly={input.readonly}
+                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>
+    )
+}