create-nextjs-cms 0.8.9 → 0.9.0

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

@@ -1,47 +1,50 @@
-import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import { TextAreaFieldClientConfig } from 'nextjs-cms/core/fields'
-import { FieldError, useController, useFormContext } from 'react-hook-form'
-
-export default function TextareaFormInput({
-    input,
-    defaultValue,
-    direction,
-}: {
-    input: TextAreaFieldClientConfig
-    defaultValue?: string | null
-    direction?: 'row' | 'col'
-}) {
-    const { control } = useFormContext()
-    const {
-        field,
-        fieldState: { invalid, isTouched, isDirty, error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: defaultValue ?? input.value ?? undefined,
-        disabled: input.readonly,
-    })
-
-    return (
-        <FormInputElement
-            validationError={error}
-            value={<div style={{ maxHeight: '200px', overflow: 'auto', wordBreak: 'break-all' }}>{input.value}</div>}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <textarea
-                placeholder={input.label}
-                readOnly={input.readonly}
-                disabled={field.disabled}
-                name={field.name}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-                value={field.value}
-                ref={field.ref}
-                className='h-[150px] 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'
-            ></textarea>
-        </FormInputElement>
-    )
-}
+import React from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import { TextAreaFieldClientConfig } from 'nextjs-cms/core/fields'
+import { FieldError, useController, useFormContext } from 'react-hook-form'
+import { useLocale } from '@/components/form/ContentLocaleContext'
+
+export default function TextareaFormInput({
+    input,
+    defaultValue,
+    direction,
+}: {
+    input: TextAreaFieldClientConfig
+    defaultValue?: string | null
+    direction?: 'row' | 'col'
+}) {
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: defaultValue ?? input.value ?? undefined,
+        disabled: input.readonly,
+    })
+    const locale = useLocale()
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={<div style={{ maxHeight: '200px', overflow: 'auto', wordBreak: 'break-all' }}>{input.value}</div>}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <textarea
+                placeholder={input.label}
+                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : (locale?.rtl ? 'rtl' : 'ltr')}
+                readOnly={input.readonly}
+                disabled={field.disabled}
+                name={field.name}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                value={field.value}
+                ref={field.ref}
+                className='h-[150px] 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'
+            ></textarea>
+        </FormInputElement>
+    )
+}

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

@@ -1,118 +1,118 @@
-import React, { useRef, useState } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import FormInputElement from '@/components/form/FormInputElement'
-import ProtectedVideo from '@/components/ProtectedVideo'
-import { VideoFieldClientConfig } from 'nextjs-cms/core/fields'
-import { ChevronRight, X } from 'lucide-react'
-import { useController, useFormContext } from 'react-hook-form'
-
-export default function VideoFormInput({ input, sectionName }: { input: VideoFieldClientConfig; sectionName: string }) {
-    const t = useI18n()
-    const { control } = useFormContext()
-    const {
-        field,
-        fieldState: { invalid, isTouched, isDirty, error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: input.value ?? '',
-    })
-
-    const [fileName, setFileName] = useState(t('noFileSelected'))
-    const fileInputContainerRef = useRef<HTMLInputElement>(null)
-    const [image, setImage] = useState<string | null>(null)
-
-    const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (event.target.files && event.target.files[0]) {
-            setFileName(event.target.files?.[0].name || t('noFileSelected'))
-            setImage(URL.createObjectURL(event.target.files[0]))
-        } else {
-            setFileName(t('noFileSelected'))
-            setImage(null)
-        }
-    }
-
-    const protectedVideo = (
-        <ProtectedVideo
-            section={sectionName}
-            fieldName={input.name}
-            file={input.value}
-            width={400}
-            height={280}
-            className='mb-4 rounded p-1 ring-3 ring-gray-400'
-        />
-    )
-
-    return (
-        <FormInputElement
-            validationError={error}
-            value={protectedVideo}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <div className='flex flex-row gap-2'>
-                {input.value ? protectedVideo : null}
-                {image && (
-                    <div className='relative flex items-center'>
-                        <ChevronRight fontSize='large' />
-                        <div className='relative'>
-                            <X
-                                className='absolute -right-3 -top-3 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
-                                onClick={() => {
-                                    setImage(null)
-                                    setFileName(t('noFileSelected'))
-                                    field.onChange(undefined)
-                                    /**
-                                     * Clear the child input value
-                                     */
-                                    if (fileInputContainerRef.current?.firstChild) {
-                                        ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
-                                    }
-                                }}
-                            />
-                            <embed
-                                src={image}
-                                className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
-                                width={300}
-                                height={190}
-                            />
-                        </div>
-                    </div>
-                )}
-            </div>
-            <div ref={fileInputContainerRef}>
-                <input
-                    type='file'
-                    className='hidden'
-                    name={field.name}
-                    ref={field.ref}
-                    onChange={(e) => {
-                        onImageChange(e)
-                        if (!input.value) {
-                            field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
-                        }
-                    }}
-                />
-            </div>
-            <div className='flex flex-col items-center gap-2 md:flex-row'>
-                <div className='w-full flex-1 md:flex-[0.5]'>
-                    <button
-                        type='button'
-                        className='w-full rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm'
-                        onClick={() => {
-                            if (fileInputContainerRef.current?.firstChild) {
-                                ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
-                            }
-                        }}
-                    >
-                        {t('upload')}
-                    </button>
-                </div>
-                <div className='w-full flex-1'>
-                    <span>{fileName}</span>
-                </div>
-            </div>
-        </FormInputElement>
-    )
-}
+import React, { useRef, useState } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import FormInputElement from '@/components/form/FormInputElement'
+import ProtectedVideo from '@/components/ProtectedVideo'
+import { VideoFieldClientConfig } from 'nextjs-cms/core/fields'
+import { ChevronRight, X } from 'lucide-react'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function VideoFormInput({ input, sectionName }: { input: VideoFieldClientConfig; sectionName: string }) {
+    const t = useI18n()
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? '',
+    })
+
+    const [fileName, setFileName] = useState(t('noFileSelected'))
+    const fileInputContainerRef = useRef<HTMLInputElement>(null)
+    const [image, setImage] = useState<string | null>(null)
+
+    const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files && event.target.files[0]) {
+            setFileName(event.target.files?.[0].name || t('noFileSelected'))
+            setImage(URL.createObjectURL(event.target.files[0]))
+        } else {
+            setFileName(t('noFileSelected'))
+            setImage(null)
+        }
+    }
+
+    const protectedVideo = (
+        <ProtectedVideo
+            section={sectionName}
+            fieldName={input.name}
+            file={input.value}
+            width={400}
+            height={280}
+            className='mb-4 rounded p-1 ring-3 ring-gray-400'
+        />
+    )
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={protectedVideo}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <div className='flex flex-row gap-2'>
+                {input.value ? protectedVideo : null}
+                {image && (
+                    <div className='relative flex items-center'>
+                        <ChevronRight fontSize='large' />
+                        <div className='relative'>
+                            <X
+                                className='absolute -right-3 -top-3 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
+                                onClick={() => {
+                                    setImage(null)
+                                    setFileName(t('noFileSelected'))
+                                    field.onChange(undefined)
+                                    /**
+                                     * Clear the child input value
+                                     */
+                                    if (fileInputContainerRef.current?.firstChild) {
+                                        ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
+                                    }
+                                }}
+                            />
+                            <embed
+                                src={image}
+                                className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
+                                width={300}
+                                height={190}
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+            <div ref={fileInputContainerRef}>
+                <input
+                    type='file'
+                    className='hidden'
+                    name={field.name}
+                    ref={field.ref}
+                    onChange={(e) => {
+                        onImageChange(e)
+                        if (!input.value) {
+                            field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
+                        }
+                    }}
+                />
+            </div>
+            <div className='flex flex-col items-center gap-2 md:flex-row'>
+                <div className='w-full flex-1 md:flex-[0.5]'>
+                    <button
+                        type='button'
+                        className='w-full rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm'
+                        onClick={() => {
+                            if (fileInputContainerRef.current?.firstChild) {
+                                ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
+                            }
+                        }}
+                    >
+                        {t('upload')}
+                    </button>
+                </div>
+                <div className='w-full flex-1'>
+                    <span>{fileName}</span>
+                </div>
+            </div>
+        </FormInputElement>
+    )
+}

package/templates/default/components/{locale-dropdown.tsx → language-dropdown.tsx}

@@ -1,74 +1,74 @@
-'use client'
-
-import { useCallback, useState } from 'react'
-import { useRouter } from 'next/navigation'
-import { trpc } from '@/app/_trpc/client'
-import { useSession, refreshSession } from 'nextjs-cms/auth/react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { setLoginPageLocaleCookie } from 'nextjs-cms/translations'
-import { useToast } from '@/components/ui/use-toast'
-import LocalePicker from './locale-picker'
-
-/**
- * Locale dropdown for the app Navbar (authenticated).
- * Persists via accountSettings.updateLocale → admins table → auth refresh.
- * Also writes nextjs-cms-locale cookie so the login page shows the same locale after logout.
- */
-export default function LocaleDropdown() {
-    const t = useI18n()
-    const router = useRouter()
-    const { toast } = useToast()
-    const { data: session } = useSession()
-    const i18nQuery = trpc.config.getI18n.useQuery()
-    const updateLocale = trpc.accountSettings.updateLocale.useMutation({
-        onSuccess: async (_data, variables) => {
-            setLoginPageLocaleCookie(variables.locale)
-            try {
-                const res = await fetch('/api/auth/refresh', { credentials: 'include' })
-                const data = await res.json()
-                if (res.ok && data.session) {
-                    await refreshSession(data.session)
-                    router.refresh()
-                } else {
-                    router.refresh()
-                }
-            } catch {
-                router.refresh()
-            } finally {
-                setPendingLocale(null)
-            }
-        },
-        onError: () => {
-            setPendingLocale(null)
-            toast({
-                variant: 'destructive',
-                title: t('error'),
-                description: t('somethingWentWrong'),
-            })
-        },
-    })
-    const [pendingLocale, setPendingLocale] = useState<string | null>(null)
-
-    const supported = i18nQuery.data?.supportedLanguages ?? []
-    const currentLocale = session?.user?.locale ?? i18nQuery.data?.fallbackLanguage ?? 'en'
-
-    const handleSelect = useCallback(
-        (locale: string) => {
-            if (locale === currentLocale) return
-            setPendingLocale(locale)
-            updateLocale.mutate({ locale })
-        },
-        [currentLocale, updateLocale],
-    )
-
-    return (
-        <LocalePicker
-            supportedLanguages={supported}
-            currentLocale={currentLocale}
-            onLocaleChange={handleSelect}
-            disabled={updateLocale.isPending}
-            loading={updateLocale.isPending && pendingLocale != null}
-            ariaLabel={t('language')}
-        />
-    )
-}
+'use client'
+
+import { useCallback, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { trpc } from '@/app/_trpc/client'
+import { useSession, refreshSession } from 'nextjs-cms/auth/react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { setLoginPageLanguageCookie } from 'nextjs-cms/translations'
+import { useToast } from '@/components/ui/use-toast'
+import LanguagePicker from './language-picker'
+
+/**
+ * Language dropdown for the app Navbar (authenticated).
+ * Persists via accountSettings.updateLanguage → admins table → auth refresh.
+ * Also writes nextjs-cms-locale cookie so the login page shows the same language after logout.
+ */
+export default function LanguageDropdown() {
+    const t = useI18n()
+    const router = useRouter()
+    const { toast } = useToast()
+    const { data: session } = useSession()
+    const i18nQuery = trpc.config.getI18n.useQuery()
+    const updateLanguage = trpc.accountSettings.updateLanguage.useMutation({
+        onSuccess: async (_data, variables) => {
+            setLoginPageLanguageCookie(variables.language)
+            try {
+                const res = await fetch('/api/auth/refresh', { credentials: 'include' })
+                const data = await res.json()
+                if (res.ok && data.session) {
+                    await refreshSession(data.session)
+                    router.refresh()
+                } else {
+                    router.refresh()
+                }
+            } catch {
+                router.refresh()
+            } finally {
+                setPendingLanguage(null)
+            }
+        },
+        onError: () => {
+            setPendingLanguage(null)
+            toast({
+                variant: 'destructive',
+                title: t('error'),
+                description: t('somethingWentWrong'),
+            })
+        },
+    })
+    const [pendingLanguage, setPendingLanguage] = useState<string | null>(null)
+
+    const supported = i18nQuery.data?.supportedLanguages ?? []
+    const currentLanguage = session?.user?.language ?? i18nQuery.data?.fallbackLanguage ?? 'en'
+
+    const handleSelect = useCallback(
+        (language: string) => {
+            if (language === currentLanguage) return
+            setPendingLanguage(language)
+            updateLanguage.mutate({ language })
+        },
+        [currentLanguage, updateLanguage],
+    )
+
+    return (
+        <LanguagePicker
+            supportedLanguages={supported}
+            currentLanguage={currentLanguage}
+            onLanguageChange={handleSelect}
+            disabled={updateLanguage.isPending}
+            loading={updateLanguage.isPending && pendingLanguage != null}
+            ariaLabel={t('language')}
+        />
+    )
+}

package/templates/default/components/{locale-picker.tsx → language-picker.tsx}

@@ -1,85 +1,85 @@
-'use client'
-
-import { Languages } from 'lucide-react'
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Spinner } from '@/components/ui/spinner'
-import { RTL_LOCALES } from 'nextjs-cms/translations'
-
-const LOCALE_DISPLAY_NAMES: Record<string, string> = {
-    en: 'English',
-    ar: 'العربية',
-}
-
-function displayName(code: string): string {
-    return LOCALE_DISPLAY_NAMES[code] ?? code
-}
-
-export interface LocalePickerProps {
-    supportedLanguages: readonly string[]
-    currentLocale: string
-    onLocaleChange: (locale: string) => void
-    disabled?: boolean
-    loading?: boolean
-    ariaLabel: string
-}
-
-/**
- * Shared locale dropdown UI. Use in Navbar (app) or Login page.
- * Parent controls data source and onSelect behavior (tRPC + refresh vs cookie + refresh).
- */
-export default function LocalePicker({
-    supportedLanguages,
-    currentLocale,
-    onLocaleChange,
-    disabled = false,
-    loading = false,
-    ariaLabel,
-}: LocalePickerProps) {
-    if (supportedLanguages.length < 2) return null
-
-    const isRTL = RTL_LOCALES.has(currentLocale)
-
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger
-                asChild
-                className='text-foreground hover:text-foreground/90 relative rounded-full focus:outline-hidden cursor-pointer'
-            >
-                <button
-                    type='button'
-                    className='flex h-10 items-center justify-center'
-                    aria-label={ariaLabel}
-                    disabled={disabled}
-                >
-                    {loading ? (
-                        <Spinner className='size-5' />
-                    ) : (
-                        <Languages className='h-5 w-5' aria-hidden='true' />
-                    )}
-                </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-                align={'end'}
-                sideOffset={12}
-                className='ring-1 ring-sky-400/80 dark:ring-amber-900'
-            >
-                {supportedLanguages.map((code) => (
-                    <DropdownMenuItem
-                        key={code}
-                        onClick={() => onLocaleChange(code)}
-                        disabled={disabled}
-                        className='cursor-pointer'
-                    >
-                        {displayName(code)}
-                        {code === currentLocale ? ' ✓' : ''}
-                    </DropdownMenuItem>
-                ))}
-            </DropdownMenuContent>
-        </DropdownMenu>
-    )
-}
+'use client'
+
+import { Languages } from 'lucide-react'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Spinner } from '@/components/ui/spinner'
+import { RTL_LANGUAGES } from 'nextjs-cms/translations'
+
+const LANGUAGE_DISPLAY_NAMES: Record<string, string> = {
+    en: 'English',
+    ar: 'العربية',
+}
+
+function displayName(code: string): string {
+    return LANGUAGE_DISPLAY_NAMES[code] ?? code
+}
+
+export interface LanguagePickerProps {
+    supportedLanguages: readonly string[]
+    currentLanguage: string
+    onLanguageChange: (language: string) => void
+    disabled?: boolean
+    loading?: boolean
+    ariaLabel: string
+}
+
+/**
+ * Shared language dropdown UI. Use in Navbar (app) or Login page.
+ * Parent controls data source and onSelect behavior (tRPC + refresh vs cookie + refresh).
+ */
+export default function LanguagePicker({
+    supportedLanguages,
+    currentLanguage,
+    onLanguageChange,
+    disabled = false,
+    loading = false,
+    ariaLabel,
+}: LanguagePickerProps) {
+    if (supportedLanguages.length < 2) return null
+
+    const isRTL = RTL_LANGUAGES.has(currentLanguage)
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger
+                asChild
+                className='text-foreground hover:text-foreground/90 relative rounded-full focus:outline-hidden cursor-pointer'
+            >
+                <button
+                    type='button'
+                    className='flex h-10 items-center justify-center'
+                    aria-label={ariaLabel}
+                    disabled={disabled}
+                >
+                    {loading ? (
+                        <Spinner className='size-5' />
+                    ) : (
+                        <Languages className='h-5 w-5' aria-hidden='true' />
+                    )}
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                align={'end'}
+                sideOffset={12}
+                className='ring-1 ring-sky-400/80 dark:ring-amber-900'
+            >
+                {supportedLanguages.map((code) => (
+                    <DropdownMenuItem
+                        key={code}
+                        onClick={() => onLanguageChange(code)}
+                        disabled={disabled}
+                        className='cursor-pointer'
+                    >
+                        {displayName(code)}
+                        {code === currentLanguage ? ' ✓' : ''}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}