create-nextjs-cms 0.8.10 → 0.9.1

package/templates/default/components/Navbar.tsx

@@ -4,7 +4,7 @@ import { MoonIcon, SunIcon, BellIcon, HamburgerMenuIcon } from '@radix-ui/react-
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useI18n } from 'nextjs-cms/translations/client'
-import { RTL_LOCALES } from 'nextjs-cms/translations'
+import { RTL_LANGUAGES } from 'nextjs-cms/translations'
 import { trpc } from '@/app/_trpc/client'
 import ProtectedImage from '@/components/ProtectedImage'
 import { Spinner } from '@/components/ui/spinner'
@@ -24,7 +24,7 @@ import {
 import { useToast } from '@/components/ui/use-toast'
 import { logout, useSession } from 'nextjs-cms/auth/react'
 import ThemeToggle from './theme-toggle'
-import LocaleDropdown from './locale-dropdown'
+import LanguageDropdown from './language-dropdown'
 type Props = {
     /**
      * Allows the parent component to modify the state when the
@@ -44,8 +44,8 @@ export default function Navbar(props: Props) {
     const t = useI18n()
     const session = useSession()
     const { toast } = useToast()
-    const locale = session?.data?.user?.locale ?? 'en'
-    const isRTL = RTL_LOCALES.has(locale)
+    const language = session?.data?.user?.language ?? 'en'
+    const isRTL = RTL_LANGUAGES.has(language)
     const logsQuery = trpc.logs.list.useQuery(
         {
             limit: 20,
@@ -185,7 +185,7 @@ export default function Navbar(props: Props) {
                                             </Link>
                                         </DropdownMenuContent>
                                     </DropdownMenu>
-                                    <LocaleDropdown />
+                                    <LanguageDropdown />
                                     <ThemeToggle />
                                     {/* Profile dropdown */}
                                     <DropdownMenu>

package/templates/default/components/NewPage.tsx

@@ -197,6 +197,7 @@ export default function NewPage({
                         variantRef={variantRef}
                         handleSubmit={handleSubmit}
                         isSubmitting={isSubmitting}
+                        contentLocale={data.defaultLocale ?? undefined}
                     />
                 </div>
             

package/templates/default/components/SectionPage.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { RefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import { useI18n } from 'nextjs-cms/translations/client'
 import { AxiosError } from 'axios'
 import InfoCard from '@/components/InfoCard'
@@ -10,21 +10,55 @@ import { useToast } from '@/components/ui/use-toast'
 import { trpc } from '@/app/_trpc/client'
 import Form from '@/components/form/Form'
 import ErrorComponent from './ErrorComponent'
+import { useRouter, useSearchParams } from 'next/navigation'
+import LocaleSwitcher from '@/components/LocaleSwitcher'
+import { Trash2 } from 'lucide-react'
+import { Alert, AlertDescription } from './ui/alert'
 
 export default function SectionPage({ section }: { section: string }) {
     const t = useI18n()
     const [progress, setProgress] = useState(0)
     const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
     const [isSubmitting, setIsSubmitting] = useState(false)
+    const [submitSuccessCount, setSubmitSuccessCount] = useState(0)
     const [response, setResponse] = useState<any>(null)
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
     const { toast } = useToast()
+    const router = useRouter()
+    const searchParams = useSearchParams()
+    const locale = searchParams.get('locale') ?? undefined
+    const [formDirty, setFormDirty] = useState(false)
+    const handleDirtyChange = useCallback((isDirty: boolean) => setFormDirty(isDirty), [])
     const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
 
     const [data, {refetch, error, isError}] = trpc.simpleSections.create.useSuspenseQuery({
         sectionName: section,
+        locale,
     })
+    const deleteLocaleMutation = trpc.simpleSections.deleteLocaleTranslation.useMutation()
+
+    const handleDeleteLocale = async () => {
+        if (!locale) return
+        if (!window.confirm(t('deleteLocaleTranslationText'))) return
+
+        try {
+            await deleteLocaleMutation.mutateAsync({
+                sectionName: section,
+                locale,
+            })
+            toast({
+                variant: 'success',
+                description: t('localeTranslationDeleted'),
+            })
+            router.push(`/section/${section}`)
+        } catch (error: any) {
+            toast({
+                variant: 'destructive',
+                description: error?.message ?? t('somethingWentWrong'),
+            })
+        }
+    }
 
     const handleSubmit = async (formData: FormData) => {
         setIsSubmitting(true)
@@ -33,6 +67,11 @@ export default function SectionPage({ section }: { section: string }) {
         formData.append('sectionName', section)
         formData.append('formType', 'edit')
         formData.append('sectionType', 'has_items')
+
+        if (locale) {
+            formData.append('locale', locale)
+        }
+
         try {
             const res = await axiosPrivate.put(`/submit/section/simple`, formData, {
                 signal: controller.signal,
@@ -66,6 +105,7 @@ export default function SectionPage({ section }: { section: string }) {
 
                     // Refetch the page
                     await refetch()
+                    setSubmitSuccessCount((currentCount) => currentCount + 1)
                 }
             }
         } catch (error: AxiosError | any) {
@@ -108,7 +148,43 @@ export default function SectionPage({ section }: { section: string }) {
                             /{t('edit')} {data.section?.title}
                         </span>
                     </div>
+                    {data.localization && (
+                        <div className="px-8 pt-4">
+                            <LocaleSwitcher
+                                section={section}
+                                currentLocale={data.localization.currentLocale}
+                                defaultLocale={data.localization.defaultLocale}
+                                existingTranslations={data.localization.existingTranslations}
+                                locales={data.localization.locales}
+                                hasUnsavedChanges={formDirty}
+                                basePath={`/section/${section}`}
+                            />
+                            {locale && (
+                                <Alert variant='info' className='mt-2 w-full'>
+                                    <AlertDescription className='text-md font-bold'>
+                                        <div className='flex items-center justify-between'>
+                                        <span>
+                                            {t('editingContentTranslation', { locale })}
+                                        </span>
+                                        {data.localization.existingTranslations.includes(locale) && (
+                                            <button
+                                                type='button'
+                                                onClick={handleDeleteLocale}
+                                                disabled={deleteLocaleMutation.isPending}
+                                                className='inline-flex items-center gap-1.5 rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:opacity-50'
+                                            >
+                                                <Trash2 className='h-3.5 w-3.5' />
+                                                {deleteLocaleMutation.isPending ? t('loading') : t('deleteLocaleTranslation')}
+                                            </button>
+                                        )}
+                                    </div>
+                                    </AlertDescription>
+                                </Alert>
+                            )}
+                        </div>
+                    )}
                     <Form
+                        key={locale ?? 'default'}
                         formType='edit'
                         progressVariant={progressVariant}
                         response={response}
@@ -117,6 +193,10 @@ export default function SectionPage({ section }: { section: string }) {
                         dropzoneRef={dropzoneRef}
                         handleSubmit={handleSubmit}
                         isSubmitting={isSubmitting}
+                        submitSuccessCount={submitSuccessCount}
+                        contentLocale={data.localization?.currentLocale}
+                        defaultLocale={data.localization?.defaultLocale}
+                        onDirtyChange={handleDirtyChange}
                     />
                 </div>
             ) : null}

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

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react'
+
+type LocaleConfig = { code: string; label: string; rtl?: boolean }
+
+const LocalizationContext = createContext<LocaleConfig | null>(null)
+
+export const LocalizationProvider = LocalizationContext.Provider
+
+export function useLocale() {
+    return useContext(LocalizationContext)
+}

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

@@ -7,7 +7,7 @@ import Dropzone, { DropzoneHandles } from '@/components/Dropzone'
 import NewVariantComponent, { VariantHandles } from '@/components/NewVariantComponent'
 import classNames from 'classnames'
 import ProgressBar from '@/components/ProgressBar'
-import React, { RefObject, useEffect } from 'react'
+import React, { RefObject, useCallback, useEffect } from 'react'
 import type { RouterOutputs } from 'nextjs-cms/api'
 import * as z from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -52,6 +52,7 @@ import { ConditionalField, FieldType } from 'nextjs-cms/core/types'
 import { configLastUpdated } from '@/components/form/helpers/util'
 import PhotoGallery from '../PhotoGallery'
 import { useSession } from 'nextjs-cms/auth/react'
+import { LocalizationProvider } from '@/components/form/ContentLocaleContext'
 
 export default function Form({
     formType,
@@ -64,6 +65,10 @@ export default function Form({
     progress,
     progressVariant,
     buttonType = 'big',
+    submitSuccessCount = 0,
+    contentLocale,
+    defaultLocale,
+    onDirtyChange,
 }: {
     formType?: 'new' | 'edit'
     data:
@@ -101,17 +106,33 @@ export default function Form({
     progress?: number
     progressVariant?: 'determinate' | 'query'
     buttonType?: 'big' | 'small'
+    submitSuccessCount?: number
+    contentLocale?: { code: string; label: string; rtl?: boolean }
+    defaultLocale?: { code: string; label: string; rtl?: boolean }
+    onDirtyChange?: (isDirty: boolean) => void
 }) {
     const t = useI18n()
     const session = useSession()
-    const locale = session?.data?.user?.locale
+    const locale = session?.data?.user?.language
+
+    // When editing a non-default locale, only show fields marked as localized
+    const isTranslationMode = !!(contentLocale && defaultLocale && contentLocale.code !== defaultLocale.code)
+
+    const filterInputsForLocale = <T,>(inputs: T[]): T[] => {
+        if (!isTranslationMode) return inputs
+        return inputs.filter((input) => (input as any).localized)
+    }
+
+    const hasNoLocalizedFields =
+        isTranslationMode &&
+        (data.inputGroups?.every((g) => filterInputsForLocale(g.inputs as any[]).length === 0) ?? true)
 
     let schema = z.object({})
     /**
      * Construct the schema for the form
      */
     data.inputGroups?.forEach((inputGroup) => {
-        inputGroup.inputs.forEach((input) => {
+        filterInputsForLocale(inputGroup.inputs as any[]).forEach((input: any) => {
             if (input.readonly) return
             switch (input.type) {
                 case 'select_multiple':
@@ -212,7 +233,14 @@ export default function Form({
         resolver: zodResolver(schema),
     })
 
+    const { dirtyFields } = methods.formState
+    const hasDirtyFields = Object.keys(dirtyFields).length > 0
+    useEffect(() => {
+        onDirtyChange?.(hasDirtyFields)
+    }, [hasDirtyFields, onDirtyChange])
+
     return (
+        <LocalizationProvider value={contentLocale ?? null}>
         <FormProvider {...methods}>
             <form
                 method='post'
@@ -231,19 +259,31 @@ export default function Form({
                         <div className=''>
                             {data.inputGroups ? (
                                 <div className='flex flex-col gap-4'>
+                                    {hasNoLocalizedFields ? (
+                                        <div className='rounded border border-amber-300 bg-amber-50 p-4 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300'>
+                                            <h3 className='font-semibold'>{t('noLocalizedFields')}</h3>
+                                            <p className='mt-1'>
+                                                {t('noLocalizedFieldsHint', { section: data.section.title.section, file: data.section.configFile })}
+                                            </p>
+                                        </div>
+                                    ) : (
+                                        <>
                                     {data.inputGroups.length > 0
                                         ? data.inputGroups.map((inputGroup, index: number) => {
+                                              const filteredInputs = filterInputsForLocale(inputGroup.inputs as any[])
+                                              if (filteredInputs.length === 0) return null
                                               return (
                                                   <ContainerBox title={inputGroup.groupTitle} key={index}>
                                                       <FormInputs
-                                                          inputs={inputGroup.inputs}
+                                                          inputs={filteredInputs}
                                                           sectionName={data.section.name}
+                                                          submitSuccessCount={submitSuccessCount}
                                                       />
                                                   </ContainerBox>
                                               )
                                           })
                                         : null}
-                                    {data.section.gallery ? (
+                                    {data.section.gallery && !isTranslationMode ? (
                                         <>
                                         <div className='w-full'>
                                             <PhotoGallery sectionName={data.section.name} gallery={data.gallery} />
@@ -305,6 +345,8 @@ export default function Form({
                                         </div>
                                         {response ? <div className='w-full'>{response}</div> : null}
                                     </div>
+                                        </>
+                                    )}
                                 </div>
                             ) : null}
                         </div>
@@ -313,5 +355,6 @@ export default function Form({
                 </div>
             </form>
         </FormProvider>
+        </LocalizationProvider>
     )
 }

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react'
 import ColorFormInput from '@/components/form/inputs/ColorFormInput'
 import NumberFormInput from '@/components/form/inputs/NumberFormInput'
 import TextFormInput from '@/components/form/inputs/TextFormInput'
@@ -35,7 +35,15 @@ import {
     SlugFieldClientConfig,
 } from 'nextjs-cms/core/fields'
 
-export default function FormInputs({ inputs, sectionName }: { inputs: FieldClientConfig[]; sectionName: string }) {
+export default function FormInputs({
+    inputs,
+    sectionName,
+    submitSuccessCount = 0,
+}: {
+    inputs: FieldClientConfig[]
+    sectionName: string
+    submitSuccessCount?: number
+}) {
     return (
         <>
             {inputs?.length > 0 &&
@@ -70,11 +78,12 @@ export default function FormInputs({ inputs, sectionName }: { inputs: FieldClien
                             )
                         case 'photo':
                             return (
-                                <PhotoFormInput
-                                    sectionName={sectionName}
-                                    input={input as PhotoFieldClientConfig}
-                                    key={input.name}
-                                />
+                                <PhotoFormInput
+                                    sectionName={sectionName}
+                                    input={input as PhotoFieldClientConfig}
+                                    submitSuccessCount={submitSuccessCount}
+                                    key={input.name}
+                                />
                             )
                         case 'video':
                             return (

package/templates/default/components/form/helpers/_section-hot-reload.js

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1773836696982
+export const configLastUpdated = 1775405374274

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

@@ -26,6 +26,7 @@ export default function NumberFormInput({ input }: { input: NumberFieldClientCon
             <input
                 type='number'
                 placeholder={input.label}
+                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : undefined}
                 readOnly={field.disabled}
                 disabled={field.disabled}
                 name={field.name}
@@ -33,7 +34,7 @@ export default function NumberFormInput({ input }: { input: NumberFieldClientCon
                     event.target.value ? field.onChange(toNumber(event.target.value)) : field.onChange(NaN)
                 }
                 onBlur={field.onBlur}
-                value={field.value}
+                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'
             />