create-nextjs-cms 0.7.0 → 0.7.2

package/templates/default/components/SelectBox.tsx

@@ -1,98 +1,98 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
-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'
-
-export default function SelectBox({
-    items,
-    defaultValue,
-    onChange = () => {},
-    classname,
-}: {
-    items: SelectOption[]
-    defaultValue?: string | number | undefined
-    onChange: any
-    classname: string
-}) {
-    // Set the selected item,
-    // check for defaultValue and set it if it exists,
-    const [selected, setSelected] = useState<SelectOption | undefined>(
-        defaultValue !== undefined && defaultValue !== null
-            ? items.find((item) => item.value?.toString() === defaultValue.toString())
-            : items[0],
-    )
-    const [open, setOpen] = useState(false)
-
-    // Update selected item when items or defaultValue changes (e.g., on language change)
-    useEffect(() => {
-        if (defaultValue !== undefined && defaultValue !== null) {
-            const foundItem = items.find((item) => item.value?.toString() === defaultValue.toString())
-            if (foundItem) {
-                setSelected(foundItem)
-            }
-        } else {
-            // If no value is selected, update to the first item (placeholder)
-            // This ensures the placeholder label is updated when language changes
-            setSelected(items[0])
-        }
-    }, [items, defaultValue])
-
-    return (
-        <div className={cn('relative', classname)}>
-            <Popover open={open} onOpenChange={setOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        variant='outline'
-                        role='combobox'
-                        aria-expanded={open}
-                        className='bg-input text-foreground w-full justify-between rounded px-1 py-5 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden sm:text-sm sm:leading-6'
-                    >
-                        <span className='block truncate'>{selected?.label ? selected.label : ''}</span>
-                        <ChevronsUpDown className='size-5 opacity-50' />
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                    className='border-foreground/50 w-[var(--radix-popover-trigger-width)] border p-0 shadow-sm'
-                    align='start'
-                >
-                    <Command>
-                        <CommandInput placeholder='Search...' className='h-9' />
-                        <CommandList>
-                            <CommandEmpty>No item found.</CommandEmpty>
-                            <CommandGroup>
-                                {items.map((item: SelectOption, index: number) => {
-                                    // Use label for searchable value, but include value in a way that we can identify it
-                                    // cmdk filters by both value prop and text content, so we use label for value to make search work
-                                    const searchableValue = item.label
-                                    const isSelected = selected && item.value && selected.value === item.value
-                                    return (
-                                        <CommandItem
-                                            key={`${item.label}-${index}`}
-                                            value={searchableValue}
-                                            keywords={[item.label]}
-                                            onSelect={() => {
-                                                setSelected(item)
-                                                onChange(item)
-                                                setOpen(false)
-                                            }}
-                                        >
-                                            <span className={isSelected ? 'font-extrabold' : 'text-foreground'}>
-                                                {item.label}
-                                            </span>
-                                            {isSelected ? <Check strokeWidth={5} size={25} color='green' /> : null}
-                                        </CommandItem>
-                                    )
-                                })}
-                            </CommandGroup>
-                        </CommandList>
-                    </Command>
-                </PopoverContent>
-            </Popover>
-        </div>
-    )
-}
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+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'
+
+export default function SelectBox({
+    items,
+    defaultValue,
+    onChange = () => {},
+    classname,
+}: {
+    items: SelectOption[]
+    defaultValue?: string | number | undefined
+    onChange: any
+    classname: string
+}) {
+    // Set the selected item,
+    // check for defaultValue and set it if it exists,
+    const [selected, setSelected] = useState<SelectOption | undefined>(
+        defaultValue !== undefined && defaultValue !== null
+            ? items.find((item) => item.value?.toString() === defaultValue.toString())
+            : items[0],
+    )
+    const [open, setOpen] = useState(false)
+
+    // Update selected item when items or defaultValue changes (e.g., on language change)
+    useEffect(() => {
+        if (defaultValue !== undefined && defaultValue !== null) {
+            const foundItem = items.find((item) => item.value?.toString() === defaultValue.toString())
+            if (foundItem) {
+                setSelected(foundItem)
+            }
+        } else {
+            // If no value is selected, update to the first item (placeholder)
+            // This ensures the placeholder label is updated when language changes
+            setSelected(items[0])
+        }
+    }, [items, defaultValue])
+
+    return (
+        <div className={cn('relative', classname)}>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant='outline'
+                        role='combobox'
+                        aria-expanded={open}
+                        className='bg-input text-foreground w-full justify-between rounded px-1 py-5 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden sm:text-sm sm:leading-6'
+                    >
+                        <span className='block truncate'>{selected?.label ? selected.label : ''}</span>
+                        <ChevronsUpDown className='size-5 opacity-50' />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                    className='border-foreground/50 w-[var(--radix-popover-trigger-width)] border p-0 shadow-sm'
+                    align='start'
+                >
+                    <Command>
+                        <CommandInput placeholder='Search...' className='h-9' />
+                        <CommandList>
+                            <CommandEmpty>No item found.</CommandEmpty>
+                            <CommandGroup>
+                                {items.map((item: SelectOption, index: number) => {
+                                    // Use label for searchable value, but include value in a way that we can identify it
+                                    // cmdk filters by both value prop and text content, so we use label for value to make search work
+                                    const searchableValue = item.label
+                                    const isSelected = selected && item.value && selected.value === item.value
+                                    return (
+                                        <CommandItem
+                                            key={`${item.label}-${index}`}
+                                            value={searchableValue}
+                                            keywords={[item.label]}
+                                            onSelect={() => {
+                                                setSelected(item)
+                                                onChange(item)
+                                                setOpen(false)
+                                            }}
+                                        >
+                                            <span className={isSelected ? 'font-extrabold' : 'text-foreground'}>
+                                                {item.label}
+                                            </span>
+                                            {isSelected ? <Check strokeWidth={5} size={25} color='green' /> : null}
+                                        </CommandItem>
+                                    )
+                                })}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+        </div>
+    )
+}

package/templates/default/components/SelectInputButtons.tsx

@@ -1,125 +1,125 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import useModal from '@/hooks/useModal'
-import React from 'react'
-import NewPage from '@/components/NewPage'
-import ItemEditPage from '@/components/ItemEditPage'
-import { Button } from '@/components/ui/button'
-import CategoryDeleteConfirmPage from '@/components/CategoryDeleteConfirmPage'
-
-export default function SelectInputButtons({
-    section,
-    sectionTitle,
-    value,
-    parentId,
-    level,
-    refetch,
-    reset,
-    allowRecursiveDelete,
-}: {
-    section: string
-    sectionTitle: string
-    value: string | number | undefined
-    parentId: string | number | undefined
-    level: number
-    refetch: any
-    reset: any
-    allowRecursiveDelete: boolean
-}) {
-    const t = useI18n()
-    const { setModal } = useModal()
-    const newCatInit = () => {
-        setModal({
-            title: t('addNewItem'),
-            body: (
-                <NewPage
-                    section={section}
-                    action={refetch}
-                    sectionType='categorized'
-                    hiddenInputs={[
-                        {
-                            name: 'parent_id',
-                            value: parentId,
-                        },
-                        {
-                            name: 'level',
-                            value: level.toString(),
-                        },
-                    ]}
-                />
-            ),
-            headerColor: 'bg-emerald-700',
-            titleColor: 'text-white',
-            lang: 'en',
-            size: 'xl',
-        })
-    }
-
-    const catEditInit = () => {
-        if (value === undefined) return
-        setModal({
-            title: t('edit'),
-            body: (
-                <ItemEditPage
-                    sectionType='categorized'
-                    action={() => {
-                        refetch()
-                        reset()
-                    }}
-                    itemId={value.toString()}
-                    section={section}
-                    hiddenInputs={[
-                        {
-                            name: 'parent_id',
-                            value: parentId,
-                        },
-                        {
-                            name: 'level',
-                            value: level.toString(),
-                        },
-                    ]}
-                />
-            ),
-            headerColor: 'bg-blue-700',
-            titleColor: 'text-white',
-            lang: 'en',
-            size: 'xl',
-        })
-    }
-
-    const catDeleteInit = () => {
-        if (value === undefined) return
-        setModal({
-            title: t('delete'),
-            body: (
-                <CategoryDeleteConfirmPage
-                    action={() => {
-                        refetch()
-                        reset()
-                    }}
-                    allowRecursiveDelete={allowRecursiveDelete}
-                    sectionTitle={sectionTitle}
-                    section={section}
-                    id={value.toString()}
-                />
-            ),
-            headerColor: 'bg-red-700',
-            titleColor: 'text-white',
-            lang: 'en',
-            size: 'lg',
-        })
-    }
-
-    return (
-        <div className='flex flex-row gap-1 pt-1'>
-            <Button variant='default' size='sm' onClick={newCatInit} type='button'>
-                {t('add')}
-            </Button>
-            <Button variant='secondary' size='sm' onClick={catEditInit} type='button' disabled={value === undefined}>
-                {t('edit')}
-            </Button>
-            <Button variant='destructive' size='sm' onClick={catDeleteInit} disabled={value === undefined}>
-                {t('delete')}
-            </Button>
-        </div>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import useModal from '@/hooks/useModal'
+import React from 'react'
+import NewPage from '@/components/NewPage'
+import ItemEditPage from '@/components/ItemEditPage'
+import { Button } from '@/components/ui/button'
+import CategoryDeleteConfirmPage from '@/components/CategoryDeleteConfirmPage'
+
+export default function SelectInputButtons({
+    section,
+    sectionTitle,
+    value,
+    parentId,
+    level,
+    refetch,
+    reset,
+    allowRecursiveDelete,
+}: {
+    section: string
+    sectionTitle: string
+    value: string | number | undefined
+    parentId: string | number | undefined
+    level: number
+    refetch: any
+    reset: any
+    allowRecursiveDelete: boolean
+}) {
+    const t = useI18n()
+    const { setModal } = useModal()
+    const newCatInit = () => {
+        setModal({
+            title: t('addNewItem'),
+            body: (
+                <NewPage
+                    section={section}
+                    action={refetch}
+                    sectionType='categorized'
+                    hiddenInputs={[
+                        {
+                            name: 'parent_id',
+                            value: parentId,
+                        },
+                        {
+                            name: 'level',
+                            value: level.toString(),
+                        },
+                    ]}
+                />
+            ),
+            headerColor: 'bg-emerald-700',
+            titleColor: 'text-white',
+            lang: 'en',
+            size: 'xl',
+        })
+    }
+
+    const catEditInit = () => {
+        if (value === undefined) return
+        setModal({
+            title: t('edit'),
+            body: (
+                <ItemEditPage
+                    sectionType='categorized'
+                    action={() => {
+                        refetch()
+                        reset()
+                    }}
+                    itemId={value.toString()}
+                    section={section}
+                    hiddenInputs={[
+                        {
+                            name: 'parent_id',
+                            value: parentId,
+                        },
+                        {
+                            name: 'level',
+                            value: level.toString(),
+                        },
+                    ]}
+                />
+            ),
+            headerColor: 'bg-blue-700',
+            titleColor: 'text-white',
+            lang: 'en',
+            size: 'xl',
+        })
+    }
+
+    const catDeleteInit = () => {
+        if (value === undefined) return
+        setModal({
+            title: t('delete'),
+            body: (
+                <CategoryDeleteConfirmPage
+                    action={() => {
+                        refetch()
+                        reset()
+                    }}
+                    allowRecursiveDelete={allowRecursiveDelete}
+                    sectionTitle={sectionTitle}
+                    section={section}
+                    id={value.toString()}
+                />
+            ),
+            headerColor: 'bg-red-700',
+            titleColor: 'text-white',
+            lang: 'en',
+            size: 'lg',
+        })
+    }
+
+    return (
+        <div className='flex flex-row gap-1 pt-1'>
+            <Button variant='default' size='sm' onClick={newCatInit} type='button'>
+                {t('add')}
+            </Button>
+            <Button variant='secondary' size='sm' onClick={catEditInit} type='button' disabled={value === undefined}>
+                {t('edit')}
+            </Button>
+            <Button variant='destructive' size='sm' onClick={catDeleteInit} disabled={value === undefined}>
+                {t('delete')}
+            </Button>
+        </div>
+    )
+}