create-nextjs-cms 0.7.0 → 0.7.2

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

@@ -1,129 +1,129 @@
-'use client'
-
-import React, { useCallback, useEffect, useRef } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import type { SlugFieldClientConfig } from 'nextjs-cms/core/fields'
-import { useFormContext, useController, useWatch } from 'react-hook-form'
-import { InputGroup, InputGroupInput, InputGroupAddon } from '@/components/ui/input-group'
-import { Link2 } from 'lucide-react'
-
-/**
- * Convert a string to a URL-friendly slug (for real-time input).
- * - Converts to lowercase
- * - Replaces spaces with hyphens
- * - Removes special characters (keeps letters from any language, numbers, and hyphens)
- * - Collapses multiple consecutive hyphens into one
- * - Keeps trailing hyphen (user might still be typing)
- */
-function toSlugLive(value: string): string {
-    return value
-        .toLowerCase()
-        .replace(/\s+/g, '-') // Replace spaces with hyphens
-        .replace(/[^\p{L}\p{N}-]/gu, '') // Remove special characters (keep Unicode letters/numbers)
-        .replace(/-+/g, '-') // Collapse multiple hyphens
-        .replace(/^-/, '') // Remove leading hyphen only
-}
-
-/**
- * Normalize a slug (for blur/final value).
- * Same as toSlugLive but also trims and removes trailing hyphens.
- */
-function toSlugFinal(value: string): string {
-    return toSlugLive(value.trim()).replace(/-$/, '') // Remove trailing hyphen
-}
-
-export default function SlugFormInput({
-    input,
-    direction,
-    disabled = false,
-}: {
-    input: SlugFieldClientConfig
-    direction?: 'row' | 'col'
-    disabled?: boolean
-}) {
-    const { control } = useFormContext()
-    const {
-        field,
-        fieldState: { error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: input.value ?? '',
-        disabled: disabled,
-    })
-
-    // Watch the source field value
-    const sourceFieldValue = useWatch({
-        control,
-        name: input.forFieldName,
-        defaultValue: '',
-    })
-
-    // Track previous source value to only update when it actually changes
-    const previousSourceValueRef = useRef<string>(sourceFieldValue ?? '')
-
-    // Auto-generate slug from source field when it changes
-    useEffect(() => {
-        const currentSourceValue = sourceFieldValue ?? ''
-
-        // Only update if the source field value actually changed
-        if (currentSourceValue !== previousSourceValueRef.current) {
-            previousSourceValueRef.current = currentSourceValue
-
-            if (currentSourceValue) {
-                const newSlug = toSlugFinal(currentSourceValue)
-                field.onChange(newSlug)
-            } else {
-                field.onChange('')
-            }
-        }
-    }, [sourceFieldValue, field])
-
-    // Handle manual changes to the slug field
-    const handleChange = useCallback(
-        (e: React.ChangeEvent<HTMLInputElement>) => {
-            const newValue = e.target.value
-            // Apply slug normalization in real-time
-            field.onChange(toSlugLive(newValue))
-        },
-        [field],
-    )
-
-    // Handle blur - finalize the slug value (remove trailing hyphens)
-    const handleBlur = useCallback(() => {
-        field.onBlur()
-        if (field.value) {
-            const finalSlug = toSlugFinal(field.value)
-            if (finalSlug !== field.value) {
-                field.onChange(finalSlug)
-            }
-        }
-    }, [field])
-
-    return (
-        <FormInputElement
-            validationError={error}
-            value={input.value}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <InputGroup className='bg-input'>
-                <InputGroupAddon align='inline-start' title='Auto-generated from linked field'>
-                    <Link2 className='h-4 w-4' />
-                </InputGroupAddon>
-                <InputGroupInput
-                    placeholder={input.placeholder ? input.placeholder : input.label}
-                    type='text'
-                    readOnly={disabled}
-                    disabled={field.disabled}
-                    name={field.name}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                    value={field.value ?? ''}
-                    ref={field.ref}
-                />
-            </InputGroup>
-        </FormInputElement>
-    )
-}
+'use client'
+
+import React, { useCallback, useEffect, useRef } from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import type { SlugFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useFormContext, useController, useWatch } from 'react-hook-form'
+import { InputGroup, InputGroupInput, InputGroupAddon } from '@/components/ui/input-group'
+import { Link2 } from 'lucide-react'
+
+/**
+ * Convert a string to a URL-friendly slug (for real-time input).
+ * - Converts to lowercase
+ * - Replaces spaces with hyphens
+ * - Removes special characters (keeps letters from any language, numbers, and hyphens)
+ * - Collapses multiple consecutive hyphens into one
+ * - Keeps trailing hyphen (user might still be typing)
+ */
+function toSlugLive(value: string): string {
+    return value
+        .toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with hyphens
+        .replace(/[^\p{L}\p{N}-]/gu, '') // Remove special characters (keep Unicode letters/numbers)
+        .replace(/-+/g, '-') // Collapse multiple hyphens
+        .replace(/^-/, '') // Remove leading hyphen only
+}
+
+/**
+ * Normalize a slug (for blur/final value).
+ * Same as toSlugLive but also trims and removes trailing hyphens.
+ */
+function toSlugFinal(value: string): string {
+    return toSlugLive(value.trim()).replace(/-$/, '') // Remove trailing hyphen
+}
+
+export default function SlugFormInput({
+    input,
+    direction,
+    disabled = false,
+}: {
+    input: SlugFieldClientConfig
+    direction?: 'row' | 'col'
+    disabled?: boolean
+}) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? '',
+        disabled: disabled,
+    })
+
+    // Watch the source field value
+    const sourceFieldValue = useWatch({
+        control,
+        name: input.forFieldName,
+        defaultValue: '',
+    })
+
+    // Track previous source value to only update when it actually changes
+    const previousSourceValueRef = useRef<string>(sourceFieldValue ?? '')
+
+    // Auto-generate slug from source field when it changes
+    useEffect(() => {
+        const currentSourceValue = sourceFieldValue ?? ''
+
+        // Only update if the source field value actually changed
+        if (currentSourceValue !== previousSourceValueRef.current) {
+            previousSourceValueRef.current = currentSourceValue
+
+            if (currentSourceValue) {
+                const newSlug = toSlugFinal(currentSourceValue)
+                field.onChange(newSlug)
+            } else {
+                field.onChange('')
+            }
+        }
+    }, [sourceFieldValue, field])
+
+    // Handle manual changes to the slug field
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const newValue = e.target.value
+            // Apply slug normalization in real-time
+            field.onChange(toSlugLive(newValue))
+        },
+        [field],
+    )
+
+    // Handle blur - finalize the slug value (remove trailing hyphens)
+    const handleBlur = useCallback(() => {
+        field.onBlur()
+        if (field.value) {
+            const finalSlug = toSlugFinal(field.value)
+            if (finalSlug !== field.value) {
+                field.onChange(finalSlug)
+            }
+        }
+    }, [field])
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={input.value}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <InputGroup className='bg-input'>
+                <InputGroupAddon align='inline-start' title='Auto-generated from linked field'>
+                    <Link2 className='h-4 w-4' />
+                </InputGroupAddon>
+                <InputGroupInput
+                    placeholder={input.placeholder ? input.placeholder : input.label}
+                    type='text'
+                    readOnly={disabled}
+                    disabled={field.disabled}
+                    name={field.name}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={field.value ?? ''}
+                    ref={field.ref}
+                />
+            </InputGroup>
+        </FormInputElement>
+    )
+}

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

@@ -1,154 +1,154 @@
-import FormInputElement from '@/components/form/FormInputElement'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { TagsFieldClientConfig } from 'nextjs-cms/core/fields'
-import { useController, useFormContext } from 'react-hook-form'
-import { Badge } from '@/components/ui/badge'
-import { Input } from '@/components/ui/input'
-import { X } from 'lucide-react'
-import { useState, useRef } from 'react'
-import { cn } from '@/lib/utils'
-
-export default function TagsFormInput({ input }: { input: TagsFieldClientConfig }) {
-    const t = useI18n()
-    const { control } = useFormContext()
-    const {
-        field,
-        fieldState: { invalid, isTouched, isDirty, error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: input.value ?? undefined,
-    })
-
-    const [inputValue, setInputValue] = useState('')
-    const [highlightedTag, setHighlightedTag] = useState<string | null>(null)
-    const inputRef = useRef<HTMLInputElement>(null)
-
-    // Parse tags from comma-separated string
-    const getTags = (): string[] => {
-        if (!field.value || typeof field.value !== 'string') return []
-        return field.value.split(',').filter((tag) => tag.trim() !== '')
-    }
-
-    // Convert tags array to comma-separated string
-    const setTags = (tags: string[]) => {
-        const filteredTags = tags.filter((tag) => tag.trim() !== '')
-        const value = filteredTags.length > 0 ? filteredTags.join(',') : ''
-        field.onChange(value)
-    }
-
-    const addTag = (tag: string) => {
-        const trimmedTag = tag.trim()
-        if (trimmedTag) {
-            const existingTags = getTags()
-            if (existingTags.includes(trimmedTag)) {
-                // Highlight the existing tag to show it already exists
-                setHighlightedTag(trimmedTag)
-                setTimeout(() => setHighlightedTag(null), 1000)
-            } else {
-                const newTags = [...existingTags, trimmedTag]
-                setTags(newTags)
-                setInputValue('')
-            }
-        }
-    }
-
-    const removeTag = (tagToRemove: string) => {
-        const newTags = getTags().filter((tag) => tag !== tagToRemove)
-        setTags(newTags)
-    }
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === 'Enter' || event.key === ',') {
-            event.preventDefault()
-            if (inputValue.trim()) {
-                addTag(inputValue)
-            }
-        } else if (event.key === 'Backspace' && !inputValue && getTags().length > 0) {
-            // Remove last tag when backspace is pressed on empty input
-            const lastTag = getTags()[getTags().length - 1]
-            if (lastTag) {
-                removeTag(lastTag)
-            }
-        }
-    }
-
-    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(event.target.value)
-    }
-
-    const handleContainerClick = () => {
-        inputRef.current?.focus()
-    }
-
-    const tags = getTags()
-
-    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}
-            />
-
-            <div
-                className={cn(
-                    'bg-input text-foreground w-full rounded px-3 py-1 shadow-xs ring-2 ring-gray-300 outline-0 transition-colors hover:ring-gray-400 focus-within:ring-blue-500',
-                    'flex min-h-9 flex-wrap items-center gap-1 text-sm',
-                    'cursor-text',
-                    field.disabled && 'cursor-not-allowed opacity-50',
-                )}
-                onClick={handleContainerClick}
-            >
-                {tags.map((tag, index) => (
-                    <Badge
-                        key={`${tag}-${index}`}
-                        variant='secondary'
-                        className={cn(
-                            'flex items-center gap-1 px-2 py-1 text-xs transition-all duration-200 border-foreground/40',
-                            highlightedTag === tag ? 'bg-success/20 border-success/50 animate-pulse' : '',
-                        )}
-                    >
-                        <span>{tag}</span>
-                        {!field.disabled ? (
-                            <button
-                                type='button'
-                                onClick={(e) => {
-                                    e.stopPropagation()
-                                    removeTag(tag)
-                                }}
-                                className='hover:bg-muted-foreground/20 focus:ring-ring ml-1 rounded-sm focus:ring-1 focus:outline-none'
-                                aria-label={`Remove ${tag} tag`}
-                            >
-                                <X className='h-3 w-3' />
-                            </button>
-                        ) : null}
-                    </Badge>
-                ))}
-
-                <Input
-                    ref={inputRef}
-                    type='text'
-                    value={inputValue}
-                    onChange={handleInputChange}
-                    onKeyDown={handleKeyDown}
-                    placeholder={
-                        tags.length === 0 ? (input.placeholder ? input.placeholder : t('startTyping')) : ''
-                    }
-                    className='min-w-20 flex-1 border-0 p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
-                    disabled={field.disabled}
-                />
-            </div>
-        </FormInputElement>
-    )
-}
+import FormInputElement from '@/components/form/FormInputElement'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { TagsFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useController, useFormContext } from 'react-hook-form'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { X } from 'lucide-react'
+import { useState, useRef } from 'react'
+import { cn } from '@/lib/utils'
+
+export default function TagsFormInput({ input }: { input: TagsFieldClientConfig }) {
+    const t = useI18n()
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? undefined,
+    })
+
+    const [inputValue, setInputValue] = useState('')
+    const [highlightedTag, setHighlightedTag] = useState<string | null>(null)
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    // Parse tags from comma-separated string
+    const getTags = (): string[] => {
+        if (!field.value || typeof field.value !== 'string') return []
+        return field.value.split(',').filter((tag) => tag.trim() !== '')
+    }
+
+    // Convert tags array to comma-separated string
+    const setTags = (tags: string[]) => {
+        const filteredTags = tags.filter((tag) => tag.trim() !== '')
+        const value = filteredTags.length > 0 ? filteredTags.join(',') : ''
+        field.onChange(value)
+    }
+
+    const addTag = (tag: string) => {
+        const trimmedTag = tag.trim()
+        if (trimmedTag) {
+            const existingTags = getTags()
+            if (existingTags.includes(trimmedTag)) {
+                // Highlight the existing tag to show it already exists
+                setHighlightedTag(trimmedTag)
+                setTimeout(() => setHighlightedTag(null), 1000)
+            } else {
+                const newTags = [...existingTags, trimmedTag]
+                setTags(newTags)
+                setInputValue('')
+            }
+        }
+    }
+
+    const removeTag = (tagToRemove: string) => {
+        const newTags = getTags().filter((tag) => tag !== tagToRemove)
+        setTags(newTags)
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter' || event.key === ',') {
+            event.preventDefault()
+            if (inputValue.trim()) {
+                addTag(inputValue)
+            }
+        } else if (event.key === 'Backspace' && !inputValue && getTags().length > 0) {
+            // Remove last tag when backspace is pressed on empty input
+            const lastTag = getTags()[getTags().length - 1]
+            if (lastTag) {
+                removeTag(lastTag)
+            }
+        }
+    }
+
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setInputValue(event.target.value)
+    }
+
+    const handleContainerClick = () => {
+        inputRef.current?.focus()
+    }
+
+    const tags = getTags()
+
+    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}
+            />
+
+            <div
+                className={cn(
+                    'bg-input text-foreground w-full rounded px-3 py-1 shadow-xs ring-2 ring-gray-300 outline-0 transition-colors hover:ring-gray-400 focus-within:ring-blue-500',
+                    'flex min-h-9 flex-wrap items-center gap-1 text-sm',
+                    'cursor-text',
+                    field.disabled && 'cursor-not-allowed opacity-50',
+                )}
+                onClick={handleContainerClick}
+            >
+                {tags.map((tag, index) => (
+                    <Badge
+                        key={`${tag}-${index}`}
+                        variant='secondary'
+                        className={cn(
+                            'flex items-center gap-1 px-2 py-1 text-xs transition-all duration-200 border-foreground/40',
+                            highlightedTag === tag ? 'bg-success/20 border-success/50 animate-pulse' : '',
+                        )}
+                    >
+                        <span>{tag}</span>
+                        {!field.disabled ? (
+                            <button
+                                type='button'
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    removeTag(tag)
+                                }}
+                                className='hover:bg-muted-foreground/20 focus:ring-ring ml-1 rounded-sm focus:ring-1 focus:outline-none'
+                                aria-label={`Remove ${tag} tag`}
+                            >
+                                <X className='h-3 w-3' />
+                            </button>
+                        ) : null}
+                    </Badge>
+                ))}
+
+                <Input
+                    ref={inputRef}
+                    type='text'
+                    value={inputValue}
+                    onChange={handleInputChange}
+                    onKeyDown={handleKeyDown}
+                    placeholder={
+                        tags.length === 0 ? (input.placeholder ? input.placeholder : t('startTyping')) : ''
+                    }
+                    className='min-w-20 flex-1 border-0 p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                    disabled={field.disabled}
+                />
+            </div>
+        </FormInputElement>
+    )
+}

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

@@ -1,48 +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='bg-input text-foreground w-full rounded p-3 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-blue-500'
-            />
-        </FormInputElement>
-    )
-}
+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='bg-input text-foreground w-full rounded p-3 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-blue-500'
+            />
+        </FormInputElement>
+    )
+}