create-nextjs-cms 0.7.8 → 0.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "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/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/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.8",
+    "nextjs-cms": "0.7.10",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",