create-nextjs-cms 0.7.0 → 0.7.2

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

@@ -1,140 +1,140 @@
-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 { useI18n } from 'nextjs-cms/translations/client'
-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 t = useI18n()
-    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)
-                        }}
-                    >
-                        {t('removeMarker')}
-                    </Button>
-                    <TooltipComponent
-                        delayDuration={100}
-                        content={!(input.value?.lat && input.value?.lng) ? t('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,
-                                        }
-                                    }
-                                })
-                            }}
-                        >
-                            {t('restoreMarker')}
-                        </Button>
-                    </TooltipComponent>
-                </div>
-            </ContainerBox>
-        </FormInputElement>
-    )
-}
+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 { useI18n } from 'nextjs-cms/translations/client'
+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 t = useI18n()
+    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)
+                        }}
+                    >
+                        {t('removeMarker')}
+                    </Button>
+                    <TooltipComponent
+                        delayDuration={100}
+                        content={!(input.value?.lat && input.value?.lng) ? t('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,
+                                        }
+                                    }
+                                })
+                            }}
+                        >
+                            {t('restoreMarker')}
+                        </Button>
+                    </TooltipComponent>
+                </div>
+            </ContainerBox>
+        </FormInputElement>
+    )
+}

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

@@ -1,83 +1,83 @@
-import FormInputElement from '@/components/form/FormInputElement'
-import { useEffect, useState } from 'react'
-import { SelectMultipleFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
-import { useController, useFormContext } from 'react-hook-form'
-import { MultiSelect, MultiSelectOption } from '@/components/multi-select'
-
-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>([])
-
-    // Convert SelectOption[] to MultiSelectOption[]
-    const convertToMultiSelectOptions = (options: SelectOption[] | undefined): MultiSelectOption[] => {
-        if (!options) return []
-        return options.map((option) => ({
-            label: option.label.toString(),
-            value: option.value.toString(),
-        }))
-    }
-
-    // Convert string[] to SelectOption[]
-    const convertFromStringArray = (values: string[], options: SelectOption[] | undefined): SelectOption[] => {
-        if (!options || !values) return []
-        return values
-            .map((value) => options.find((option) => option.value.toString() === value))
-            .filter(Boolean) as SelectOption[]
-    }
-
-    // Convert SelectOption[] to string[]
-    const convertToStringArray = (options: SelectOption[] | undefined): string[] => {
-        if (!options) return []
-        return options.map((option) => option.value.toString())
-    }
-
-    useEffect(() => {
-        if (input.value && input.value?.length > 0) {
-            setValue(input.value)
-        }
-    }, [input.value])
-
-    const multiSelectOptions = convertToMultiSelectOptions(input.options)
-    const currentValue = convertToStringArray(field.value || [])
-
-    const handleValueChange = (newValues: string[]) => {
-        const selectOptions = convertFromStringArray(newValues, input.options)
-        field.onChange(selectOptions)
-        setValue(selectOptions)
-    }
-
-    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)}
-            />
-
-            <MultiSelect
-                hideSelectAll={true}
-                variant='default'
-                maxCount={100}
-                options={multiSelectOptions}
-                onValueChange={handleValueChange}
-                defaultValue={currentValue}
-                // placeholder={input.label || 'Select options'}
-                disabled={field.disabled}
-                className='w-full py-3 ring-2 ring-gray-300'
-            />
-        </FormInputElement>
-    )
-}
+import FormInputElement from '@/components/form/FormInputElement'
+import { useEffect, useState } from 'react'
+import { SelectMultipleFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+import { MultiSelect, MultiSelectOption } from '@/components/multi-select'
+
+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>([])
+
+    // Convert SelectOption[] to MultiSelectOption[]
+    const convertToMultiSelectOptions = (options: SelectOption[] | undefined): MultiSelectOption[] => {
+        if (!options) return []
+        return options.map((option) => ({
+            label: option.label.toString(),
+            value: option.value.toString(),
+        }))
+    }
+
+    // Convert string[] to SelectOption[]
+    const convertFromStringArray = (values: string[], options: SelectOption[] | undefined): SelectOption[] => {
+        if (!options || !values) return []
+        return values
+            .map((value) => options.find((option) => option.value.toString() === value))
+            .filter(Boolean) as SelectOption[]
+    }
+
+    // Convert SelectOption[] to string[]
+    const convertToStringArray = (options: SelectOption[] | undefined): string[] => {
+        if (!options) return []
+        return options.map((option) => option.value.toString())
+    }
+
+    useEffect(() => {
+        if (input.value && input.value?.length > 0) {
+            setValue(input.value)
+        }
+    }, [input.value])
+
+    const multiSelectOptions = convertToMultiSelectOptions(input.options)
+    const currentValue = convertToStringArray(field.value || [])
+
+    const handleValueChange = (newValues: string[]) => {
+        const selectOptions = convertFromStringArray(newValues, input.options)
+        field.onChange(selectOptions)
+        setValue(selectOptions)
+    }
+
+    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)}
+            />
+
+            <MultiSelect
+                hideSelectAll={true}
+                variant='default'
+                maxCount={100}
+                options={multiSelectOptions}
+                onValueChange={handleValueChange}
+                defaultValue={currentValue}
+                // placeholder={input.label || 'Select options'}
+                disabled={field.disabled}
+                className='w-full py-3 ring-2 ring-gray-300'
+            />
+        </FormInputElement>
+    )
+}

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

@@ -1,42 +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-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
-            />
-        </FormInputElement>
-    )
-}
+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-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
+            />
+        </FormInputElement>
+    )
+}

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

@@ -1,47 +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-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
-            />
-        </FormInputElement>
-    )
-}
+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-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
+            />
+        </FormInputElement>
+    )
+}