create-nextjs-cms 0.5.23 → 0.5.24

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

@@ -1,8 +1,12 @@
 import FormInputElement from '@/components/form/FormInputElement'
-import { Autocomplete, Chip, TextField } from '@mui/material'
 import getString from 'nextjs-cms/translations'
 import { TagsFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
+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 { control } = useFormContext()
@@ -15,6 +19,69 @@ export default function TagsFormInput({ input }: { input: TagsFieldClientConfig
         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}
@@ -29,35 +96,57 @@ export default function TagsFormInput({ input }: { input: TagsFieldClientConfig
                 disabled={field.disabled}
                 name={field.name}
                 onBlur={field.onBlur}
-                value={field.value}
+                value={field.value ?? ''}
                 ref={field.ref}
             />
 
-            <Autocomplete
-                multiple
-                // limitTags={2}
-                options={[]}
-                getOptionLabel={(option) => option}
-                renderInput={(params) => (
-                    <TextField
-                        {...params}
-                        label={input.label}
-                        // className='ring-2 outline-0 focus:ring-blue-500 hover:ring-gray-400 ring-gray-300 shadow-xs rounded w-full bg-input text-foreground'
-                        placeholder={input.placeholder ? input.placeholder : getString('start_typing')}
-                    />
+            <div
+                className={cn(
+                    'border-input focus-within:ring-ring flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-colors focus-within:ring-1',
+                    'cursor-text',
+                    field.disabled && 'cursor-not-allowed opacity-50',
                 )}
-                freeSolo={true}
-                onChange={(event, newInputValue) => {
-                    field.onChange(newInputValue.toString())
-                }}
-                defaultValue={input.value ? input.value.split(',') : []}
-                disableClearable={true}
-                renderTags={(tagValue, getTagProps) => {
-                    return tagValue.map((option, index) => (
-                        <Chip {...getTagProps({ index })} key={option} label={option} />
-                    ))
-                }}
-            />
+                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',
+                            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 : getString('start_typing')) : ''
+                    }
+                    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

@@ -41,7 +41,7 @@ export default function TextFormInput({
                 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'
+                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>
     )