create-nextjs-cms 0.8.10 → 0.9.0

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

@@ -1,260 +1,264 @@
-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, useEffect, useCallback } from 'react'
-import { cn } from '@/lib/utils'
-import { trpc } from '@/app/_trpc/client'
-
-export default function TagsFormInput({
-    input,
-    sectionName,
-}: {
-    input: TagsFieldClientConfig
-    sectionName: string
-}) {
-    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 [highlightedIndex, setHighlightedIndex] = useState(-1)
-    const [showDropdown, setShowDropdown] = useState(false)
-    const inputRef = useRef<HTMLInputElement>(null)
-    const dropdownRef = useRef<HTMLDivElement>(null)
-    const [debouncedQuery, setDebouncedQuery] = useState('')
-
-    // Debounce the query input
-    useEffect(() => {
-        if (!input.hasAutoCompletion) return
-        const timer = setTimeout(() => {
-            setDebouncedQuery(inputValue)
-        }, 300)
-        return () => clearTimeout(timer)
-    }, [inputValue, input.hasAutoCompletion])
-
-    const { data: suggestions } = trpc.fields.tagsAutoComplete.useQuery(
-        { sectionName, fieldName: input.name, query: debouncedQuery },
-        { enabled: input.hasAutoCompletion && debouncedQuery.length >= 1 },
-    )
-
-    // Parse tags from comma-separated string
-    const getTags = useCallback((): string[] => {
-        if (!field.value || typeof field.value !== 'string') return []
-        return field.value.split(',').filter((tag) => tag.trim() !== '')
-    }, [field.value])
-
-    // Filter out already-added tags from suggestions
-    const filteredSuggestions = suggestions?.filter((s) => !getTags().includes(s)) ?? []
-
-    // Show/hide dropdown based on suggestions
-    useEffect(() => {
-        setShowDropdown(filteredSuggestions.length > 0 && inputValue.length >= 1)
-        setHighlightedIndex(-1)
-    }, [filteredSuggestions.length, inputValue.length])
-
-    // 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('')
-                setShowDropdown(false)
-            }
-        }
-    }
-
-    const removeTag = (tagToRemove: string) => {
-        const newTags = getTags().filter((tag) => tag !== tagToRemove)
-        setTags(newTags)
-    }
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (showDropdown && filteredSuggestions.length > 0) {
-            if (event.key === 'ArrowDown') {
-                event.preventDefault()
-                setHighlightedIndex((prev) =>
-                    prev < filteredSuggestions.length - 1 ? prev + 1 : 0,
-                )
-                return
-            }
-            if (event.key === 'ArrowUp') {
-                event.preventDefault()
-                setHighlightedIndex((prev) =>
-                    prev > 0 ? prev - 1 : filteredSuggestions.length - 1,
-                )
-                return
-            }
-            if (event.key === 'Enter' && highlightedIndex >= 0) {
-                event.preventDefault()
-                addTag(filteredSuggestions[highlightedIndex])
-                return
-            }
-            if (event.key === 'Escape') {
-                event.preventDefault()
-                setShowDropdown(false)
-                setHighlightedIndex(-1)
-                return
-            }
-        }
-
-        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 handleBlur = () => {
-        // Small delay to allow click events on dropdown items to fire first
-        setTimeout(() => {
-            setShowDropdown(false)
-            setHighlightedIndex(-1)
-        }, 200)
-    }
-
-    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='relative'>
-                <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}
-                        onBlur={handleBlur}
-                        placeholder={
-                            tags.length === 0
-                                ? input.placeholder
-                                    ? input.placeholder
-                                    : input.hasAutoCompletion
-                                      ? t('startTypingForSuggestions')
-                                      : 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>
-
-                {showDropdown && filteredSuggestions.length > 0 && (
-                    <div
-                        ref={dropdownRef}
-                        className='bg-popover border-border absolute z-50 mt-1 max-h-48 w-full overflow-auto rounded-md border shadow-md'
-                    >
-                        {filteredSuggestions.map((suggestion, index) => (
-                            <button
-                                key={suggestion}
-                                type='button'
-                                className={cn(
-                                    'text-popover-foreground w-full px-3 py-2 text-left text-sm',
-                                    'hover:bg-accent hover:text-accent-foreground',
-                                    highlightedIndex === index && 'bg-accent text-accent-foreground',
-                                )}
-                                onMouseDown={(e) => {
-                                    e.preventDefault()
-                                    addTag(suggestion)
-                                }}
-                                onMouseEnter={() => setHighlightedIndex(index)}
-                            >
-                                {suggestion}
-                            </button>
-                        ))}
-                    </div>
-                )}
-            </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, useEffect, useCallback } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { trpc } from '@/app/_trpc/client'
+
+export default function TagsFormInput({
+    input,
+    sectionName,
+}: {
+    input: TagsFieldClientConfig
+    sectionName: string
+}) {
+    const t = useI18n()
+    const searchParams = useSearchParams()
+    const localeParam = searchParams.get('locale')
+    const locale = input.localized ? (localeParam?.trim() ? localeParam : undefined) : undefined
+    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 [highlightedIndex, setHighlightedIndex] = useState(-1)
+    const [showDropdown, setShowDropdown] = useState(false)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const dropdownRef = useRef<HTMLDivElement>(null)
+    const [debouncedQuery, setDebouncedQuery] = useState('')
+
+    // Debounce the query input
+    useEffect(() => {
+        if (!input.hasAutoCompletion) return
+        const timer = setTimeout(() => {
+            setDebouncedQuery(inputValue)
+        }, 300)
+        return () => clearTimeout(timer)
+    }, [inputValue, input.hasAutoCompletion])
+
+    const { data: suggestions } = trpc.fields.tagsAutoComplete.useQuery(
+        { sectionName, fieldName: input.name, query: debouncedQuery, locale },
+        { enabled: input.hasAutoCompletion && debouncedQuery.length >= 1 },
+    )
+
+    // Parse tags from comma-separated string
+    const getTags = useCallback((): string[] => {
+        if (!field.value || typeof field.value !== 'string') return []
+        return field.value.split(',').filter((tag) => tag.trim() !== '')
+    }, [field.value])
+
+    // Filter out already-added tags from suggestions
+    const filteredSuggestions = suggestions?.filter((s) => !getTags().includes(s)) ?? []
+
+    // Show/hide dropdown based on suggestions
+    useEffect(() => {
+        setShowDropdown(filteredSuggestions.length > 0 && inputValue.length >= 1)
+        setHighlightedIndex(-1)
+    }, [filteredSuggestions.length, inputValue.length])
+
+    // 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('')
+                setShowDropdown(false)
+            }
+        }
+    }
+
+    const removeTag = (tagToRemove: string) => {
+        const newTags = getTags().filter((tag) => tag !== tagToRemove)
+        setTags(newTags)
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (showDropdown && filteredSuggestions.length > 0) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault()
+                setHighlightedIndex((prev) =>
+                    prev < filteredSuggestions.length - 1 ? prev + 1 : 0,
+                )
+                return
+            }
+            if (event.key === 'ArrowUp') {
+                event.preventDefault()
+                setHighlightedIndex((prev) =>
+                    prev > 0 ? prev - 1 : filteredSuggestions.length - 1,
+                )
+                return
+            }
+            if (event.key === 'Enter' && highlightedIndex >= 0) {
+                event.preventDefault()
+                addTag(filteredSuggestions[highlightedIndex])
+                return
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault()
+                setShowDropdown(false)
+                setHighlightedIndex(-1)
+                return
+            }
+        }
+
+        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 handleBlur = () => {
+        // Small delay to allow click events on dropdown items to fire first
+        setTimeout(() => {
+            setShowDropdown(false)
+            setHighlightedIndex(-1)
+        }, 200)
+    }
+
+    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='relative'>
+                <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}
+                        onBlur={handleBlur}
+                        placeholder={
+                            tags.length === 0
+                                ? input.placeholder
+                                    ? input.placeholder
+                                    : input.hasAutoCompletion
+                                      ? t('startTypingForSuggestions')
+                                      : 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>
+
+                {showDropdown && filteredSuggestions.length > 0 && (
+                    <div
+                        ref={dropdownRef}
+                        className='bg-popover border-border absolute z-50 mt-1 max-h-48 w-full overflow-auto rounded-md border shadow-md'
+                    >
+                        {filteredSuggestions.map((suggestion, index) => (
+                            <button
+                                key={suggestion}
+                                type='button'
+                                className={cn(
+                                    'text-popover-foreground w-full px-3 py-2 text-left text-sm',
+                                    'hover:bg-accent hover:text-accent-foreground',
+                                    highlightedIndex === index && 'bg-accent text-accent-foreground',
+                                )}
+                                onMouseDown={(e) => {
+                                    e.preventDefault()
+                                    addTag(suggestion)
+                                }}
+                                onMouseEnter={() => setHighlightedIndex(index)}
+                            >
+                                {suggestion}
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </FormInputElement>
+    )
+}

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

@@ -1,48 +1,51 @@
-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'
+import { useLocale } from '@/components/form/ContentLocaleContext'
+
+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,
+    })
+    const locale = useLocale()
+
+    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'
+                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : (locale?.rtl ? 'rtl' : 'ltr')}
+                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>
+    )
+}