create-nextjs-cms 0.7.7 → 0.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "private": false,
   "type": "module",
   "bin": {

package/templates/default/components/DashboardPageAlt.tsx

@@ -16,14 +16,14 @@ export default function DashboardPage() {
                     src='/examples/dashboard-light.png'
                     width={1280}
                     height={866}
-                    alt='Dashboard'
+                    alt={t('dashboard') as string}
                     className='block dark:hidden'
                 />
                 <Image
                     src='/examples/dashboard-dark.png'
                     width={1280}
                     height={866}
-                    alt='Dashboard'
+                    alt={t('dashboard') as string}
                     className='hidden dark:block'
                 />
             </div>

package/templates/default/components/LogPage.tsx

@@ -39,7 +39,7 @@ export default function LogPage() {
     if (isLoading) {
         return (
             <div className='flex w-full items-center justify-center p-8'>
-                <Spinner className='size-8' />
+                <Spinner className='size-8' aria-label={t('loading') as string} />
             </div>
         )
     }

package/templates/default/components/Navbar.tsx

@@ -96,7 +96,7 @@ export default function Navbar(props: Props) {
                                         className='border-foreground text-foreground hover:text-foreground/90 relative inline-flex items-center justify-center rounded-md border p-2 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden'
                                     >
                                         <span className='absolute -inset-0.5' />
-                                        <span className='sr-only'>Open main menu</span>
+                                        <span className='sr-only'>{t('openMainMenu')}</span>
                                         <HamburgerMenuIcon className='block h-6 w-6' aria-hidden='true' />
                                     </button>
                                 </div>
@@ -123,7 +123,7 @@ export default function Navbar(props: Props) {
                                             <button
                                                 type='button'
                                                 className='relative flex h-10 items-center justify-center rounded-full focus:outline-hidden'
-                                                aria-label='Notifications'
+                                                aria-label={t('notifications') as string}
                                             >
                                                 <span className='absolute -inset-1.5' />
                                                 <BellIcon className='h-6 w-6' />
@@ -198,7 +198,7 @@ export default function Navbar(props: Props) {
                                                 className='relative flex h-10 items-center justify-center rounded-full'
                                             >
                                                 <span className='absolute -inset-1.5' />
-                                                <span className='sr-only'>Open user menu</span>
+                                                <span className='sr-only'>{t('openUserMenu')}</span>
                                                 {session?.data?.user.image ? (
                                                     <ProtectedImage
                                                         section={'admins'}
@@ -215,7 +215,7 @@ export default function Navbar(props: Props) {
                                                         src='/blank_avatar.png'
                                                         height={40}
                                                         width={40}
-                                                        alt='profile image'
+                                                        alt={t('profileImage') as string}
                                                         className='rounded-full ring-2 ring-amber-300 ring-inset'
                                                     />
                                                 )}

package/templates/default/components/SelectBox.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { SelectOption } from 'nextjs-cms/core/fields'
+import { useI18n } from 'nextjs-cms/translations/client'
 
 export default function SelectBox({
     items,
@@ -19,8 +20,7 @@ export default function SelectBox({
     onChange: any
     classname: string
 }) {
-    // Set the selected item,
-    // check for defaultValue and set it if it exists,
+    const t = useI18n()
     const [selected, setSelected] = useState<SelectOption | undefined>(
         defaultValue !== undefined && defaultValue !== null
             ? items.find((item) => item.value?.toString() === defaultValue.toString())
@@ -61,9 +61,9 @@ export default function SelectBox({
                     align='start'
                 >
                     <Command>
-                        <CommandInput placeholder='Search...' className='h-9' />
+                        <CommandInput placeholder={t('searchDots') as string} className='h-9' />
                         <CommandList>
-                            <CommandEmpty>No item found.</CommandEmpty>
+                            <CommandEmpty>{t('noItemFound')}</CommandEmpty>
                             <CommandGroup>
                                 {items.map((item: SelectOption, index: number) => {
                                     // Use label for searchable value, but include value in a way that we can identify it

package/templates/default/components/Sidebar.tsx

@@ -60,7 +60,7 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string;
                         'justify-start gap-2 p-4': true,
                     })}
                 >
-                    <Image src={props.logoUrlPath} alt='logo' width={32} height={32} />
+                    <Image src={props.logoUrlPath} alt={t('logo') as string} width={32} height={32} />
                     <span className='bg-transparent px-2 font-normal tracking-[0.1em] text-white/90 transition-all duration-150'>
                         {props.logoText}
                     </span>
@@ -181,7 +181,7 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string;
                                 src='/blank_avatar.png'
                                 height={36}
                                 width={36}
-                                alt='profile image'
+                                alt={t('profileImage') as string}
                                 className='rounded-full ring-2 ring-amber-300 ring-inset'
                             />
                         )}

package/templates/default/components/form/FormInputs.tsx

@@ -95,7 +95,13 @@ export default function FormInputs({ inputs, sectionName }: { inputs: FieldClien
                         case 'password':
                             return <PasswordFormInput input={input as PasswordFieldClientConfig} key={input.name} />
                         case 'tags':
-                            return <TagsFormInput input={input as TagsFieldClientConfig} key={input.name} />
+                            return (
+                                <TagsFormInput
+                                    input={input as TagsFieldClientConfig}
+                                    sectionName={sectionName}
+                                    key={input.name}
+                                />
+                            )
                         case 'map':
                             return <MapFormInput input={input as MapFieldClientConfig} key={input.name} />
                         case 'checkbox':

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

@@ -3,8 +3,10 @@ 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'
+import { useI18n } from 'nextjs-cms/translations/client'
 
 export default function MultipleSelectFormInput({ input }: { input: SelectMultipleFieldClientConfig }) {
+    const t = useI18n()
     const { control } = useFormContext()
     const {
         field,
@@ -74,7 +76,7 @@ export default function MultipleSelectFormInput({ input }: { input: SelectMultip
                 options={multiSelectOptions}
                 onValueChange={handleValueChange}
                 defaultValue={currentValue}
-                // placeholder={input.label || 'Select options'}
+                placeholder={t('selectOptions') as string}
                 disabled={field.disabled}
                 className='w-full py-3 ring-2 ring-gray-300'
             />

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

@@ -126,7 +126,7 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
                                     <Image
                                         className='mb-4 rounded p-1 ring-3 ring-green-600'
                                         src={image}
-                                        alt='new'
+                                        alt={t('newImage') as string}
                                         fill={true}
                                         style={{
                                             objectFit: 'contain',

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

@@ -6,6 +6,7 @@ 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'
+import { useI18n } from 'nextjs-cms/translations/client'
 
 /**
  * Convert a string to a URL-friendly slug (for real-time input).
@@ -41,6 +42,7 @@ export default function SlugFormInput({
     direction?: 'row' | 'col'
     disabled?: boolean
 }) {
+    const t = useI18n()
     const { control } = useFormContext()
     const {
         field,
@@ -109,7 +111,7 @@ export default function SlugFormInput({
             required={input.required}
         >
             <InputGroup className='bg-input'>
-                <InputGroupAddon align='inline-start' title='Auto-generated from linked field'>
+                <InputGroupAddon align='inline-start' title={t('autoGeneratedFromLinkedField') as string}>
                     <Link2 className='h-4 w-4' />
                 </InputGroupAddon>
                 <InputGroupInput

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

@@ -5,10 +5,17 @@ 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 { useState, useRef, useEffect, useCallback } from 'react'
 import { cn } from '@/lib/utils'
+import { trpc } from '@/app/_trpc/client'
 
-export default function TagsFormInput({ input }: { input: TagsFieldClientConfig }) {
+export default function TagsFormInput({
+    input,
+    sectionName,
+}: {
+    input: TagsFieldClientConfig
+    sectionName: string
+}) {
     const t = useI18n()
     const { control } = useFormContext()
     const {
@@ -22,13 +29,40 @@ export default function TagsFormInput({ input }: { input: TagsFieldClientConfig
 
     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 = (): 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[]) => {
@@ -49,6 +83,7 @@ export default function TagsFormInput({ input }: { input: TagsFieldClientConfig
                 const newTags = [...existingTags, trimmedTag]
                 setTags(newTags)
                 setInputValue('')
+                setShowDropdown(false)
             }
         }
     }
@@ -59,6 +94,34 @@ export default function TagsFormInput({ input }: { input: TagsFieldClientConfig
     }
 
     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()) {
@@ -81,6 +144,14 @@ export default function TagsFormInput({ input }: { input: TagsFieldClientConfig
         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 (
@@ -101,53 +172,88 @@ export default function TagsFormInput({ input }: { input: TagsFieldClientConfig
                 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' : '',
-                        )}
+            <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'
                     >
-                        <span>{tag}</span>
-                        {!field.disabled ? (
+                        {filteredSuggestions.map((suggestion, index) => (
                             <button
+                                key={suggestion}
                                 type='button'
-                                onClick={(e) => {
-                                    e.stopPropagation()
-                                    removeTag(tag)
+                                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)
                                 }}
-                                className='hover:bg-muted-foreground/20 focus:ring-ring ml-1 rounded-sm focus:ring-1 focus:outline-none'
-                                aria-label={`Remove ${tag} tag`}
+                                onMouseEnter={() => setHighlightedIndex(index)}
                             >
-                                <X className='h-3 w-3' />
+                                {suggestion}
                             </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>
+                )}
             </div>
         </FormInputElement>
     )

package/templates/default/components/multi-select.tsx

@@ -3,6 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { CheckIcon, XCircle, ChevronDown, XIcon, WandSparkles } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { Separator } from '@/components/ui/separator'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
@@ -329,6 +330,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         },
         ref,
     ) => {
+        const t = useI18n()
         const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue)
         const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
         const [isAnimating, setIsAnimating] = React.useState(false)
@@ -911,7 +913,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                                                     handleClear()
                                                 }
                                             }}
-                                            aria-label={`Clear all ${selectedValues.length} selected options`}
+                                            aria-label={t('clearAllSelectedOptions', { count: String(selectedValues.length) }) as string}
                                             className='text-muted-foreground hover:text-foreground focus:ring-ring mx-2 flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm focus:ring-2 focus:ring-offset-1 focus:outline-none'
                                         >
                                             <XIcon className='h-4 w-4' />
@@ -935,7 +937,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         id={listboxId}
                         role='listbox'
                         aria-multiselectable='true'
-                        aria-label='Available options'
+                        aria-label={t('availableOptions') as string}
                         className={cn(
                             'w-auto p-0',
                             getPopoverAnimationClass(),
@@ -957,17 +959,17 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         <Command>
                             {searchable && (
                                 <CommandInput
-                                    placeholder='Search options...'
+                                    placeholder={t('searchOptionsDots') as string}
                                     onKeyDown={handleInputKeyDown}
                                     value={searchValue}
                                     onValueChange={setSearchValue}
-                                    aria-label='Search through available options'
+                                    aria-label={t('searchThroughOptions') as string}
                                     aria-describedby={`${multiSelectId}-search-help`}
                                 />
                             )}
                             {searchable && (
                                 <div id={`${multiSelectId}-search-help`} className='sr-only'>
-                                    Type to filter options. Use arrow keys to navigate results.
+                                    {t('filterOptionsHint')}
                                 </div>
                             )}
                             <CommandList
@@ -1109,7 +1111,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                                                     onSelect={handleClear}
                                                     className='flex-1 cursor-pointer justify-center'
                                                 >
-                                                    Clear
+                                                    {t('clear')}
                                                 </CommandItem>
                                                 <Separator orientation='vertical' className='flex h-full min-h-6' />
                                             </>
@@ -1118,7 +1120,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                                             onSelect={() => setIsPopoverOpen(false)}
                                             className='max-w-full flex-1 cursor-pointer justify-center'
                                         >
-                                            Close
+                                            {t('close')}
                                         </CommandItem>
                                     </div>
                                 </CommandGroup>

package/templates/default/components/theme-toggle.tsx

@@ -2,8 +2,10 @@ import { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
 import { Spinner } from '@/components/ui/spinner'
+import { useI18n } from 'nextjs-cms/translations/client'
 
 const ThemeToggle = () => {
+    const t = useI18n()
     const [mounted, setMounted] = useState(false)
     const { theme, setTheme } = useTheme()
 
@@ -12,7 +14,7 @@ const ThemeToggle = () => {
     }, [])
 
     if (!mounted) {
-        return <Spinner className='size-6' />
+        return <Spinner className='size-6' aria-label={t('loading') as string} />
     }
 
     return (
@@ -24,7 +26,7 @@ const ThemeToggle = () => {
             className='text-foreground hover:text-foreground/90 relative flex h-10 items-center justify-center rounded-full focus:outline-hidden cursor-pointer'
         >
             <span className='absolute -inset-1.5' />
-            <span className='sr-only'>Theme</span>
+            <span className='sr-only'>{t('theme')}</span>
             {theme === 'dark' ? (
                 <SunIcon className='h-6 w-6' aria-hidden='true' />
             ) : (

package/templates/default/package.json

@@ -66,7 +66,7 @@
     "nanoid": "^5.1.2",
     "next": "16.1.1",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.7.7",
+    "nextjs-cms": "0.7.9",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",