create-nextjs-cms 0.9.26 → 0.9.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.9.26",
+  "version": "0.9.28",
   "private": false,
   "type": "module",
   "bin": {
@@ -29,8 +29,8 @@
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
     "@lzcms/eslint-config": "0.3.0",
-    "@lzcms/tsconfig": "0.1.0",
-    "@lzcms/prettier-config": "0.1.0"
+    "@lzcms/prettier-config": "0.1.0",
+    "@lzcms/tsconfig": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",
   "scripts": {

package/templates/default/app/globals.css

@@ -3,6 +3,8 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@source "../node_modules/@nextjscms/plugin-*/**/*.{tsx,ts,jsx,js}";
+
 /**
  * Background colors for the dashboard plugin
  */
@@ -198,9 +200,15 @@
   * {
     @apply border-border;
   }
+  html {
+    scrollbar-gutter: stable;
+  }
   body {
     @apply bg-background text-foreground;
   }
+  html body[data-scroll-locked] {
+    margin-right: 0 !important;
+  }
 }
 
 /* Progress bar indeterminate animation */

package/templates/default/components/form/inputs/document-form-input.tsx

@@ -88,7 +88,7 @@ export default function DocumentFormInput({
             file={input.value}
             width={450}
             height={620}
-            className='ring-3 mb-4 rounded p-1 ring-gray-400'
+            className='mb-4 rounded p-1 ring-3 ring-gray-400'
         />
     )
 
@@ -127,19 +127,22 @@ export default function DocumentFormInput({
                 <CardContent className='flex flex-col gap-1'>
                     <div className='mb-2 flex flex-col text-sm'>
                         {input.maxFileSize ? (
-                            <div dir='ltr' className='flex flex-wrap items-center gap-2'>
+                            <div className='flex flex-wrap items-center gap-2'>
                                 <InfoIcon size={14} />
                                 <span>{t('maxFileSize')}:</span>
                                 <Badge
+                                    dir='ltr'
                                     variant={'secondary'}
                                 >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
                             </div>
                         ) : null}
                         {input.extensions ? (
-                            <div dir='ltr' className='flex flex-wrap items-center gap-2'>
+                            <div className='flex flex-wrap items-center gap-2'>
                                 <InfoIcon size={14} />
                                 <span>{t('allowedExtensions')}:</span>
-                                <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
+                                <Badge dir='ltr' variant={'secondary'}>
+                                    {input.extensions.join(', ')}
+                                </Badge>
                             </div>
                         ) : null}
                     </div>
@@ -165,12 +168,12 @@ export default function DocumentFormInput({
                                         <ChevronRight fontSize='large' />
                                         <div className='relative'>
                                             <X
-                                                className='absolute -right-3 -top-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
+                                                className='absolute -top-3 -right-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
                                                 onClick={clearSelectedFile}
                                             />
                                             <embed
                                                 src={image}
-                                                className='ring-3 mb-4 max-w-full rounded p-1 ring-green-600'
+                                                className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
                                                 width={350}
                                                 height={520}
                                             />
@@ -204,7 +207,7 @@ export default function DocumentFormInput({
                                         <div className='w-[400px] max-w-full'>
                                             <button
                                                 type='button'
-                                                className='bg-linear-to-r flex w-full flex-wrap items-center justify-center gap-1.5 rounded border from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-red-400 hover:to-amber-400'
+                                                className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-red-400 hover:to-amber-400'
                                                 onClick={() => {
                                                     setModal({
                                                         title: t('deleteDocument'),
@@ -244,7 +247,7 @@ export default function DocumentFormInput({
                                     <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
                                         <button
                                             type='button'
-                                            className='bg-linear-to-r flex w-full flex-wrap items-center justify-center gap-1.5 rounded border from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
+                                            className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
                                             onClick={() => {
                                                 if (fileInputContainerRef.current?.firstChild) {
                                                     ;(

package/templates/default/components/form/inputs/photo-form-input.tsx

@@ -122,29 +122,35 @@ export default function PhotoFormInput({
                 <CardContent className='flex flex-col gap-1'>
                     <div className='mb-2 flex flex-col text-sm'>
                         {input.size ? (
-                            <div dir='ltr' className='flex flex-wrap items-center gap-2'>
+                            <div className='flex flex-wrap items-center gap-2'>
                                 <InfoIcon size={14} />
                                 <span>
                                     {t('strict' in input.size ? 'imageDimensionsMustBe' : 'imageRecommendedDimensions')}
                                     :
                                 </span>
-                                <Badge variant={'secondary'}>{`${input.size.width} x ${input.size.height}`}</Badge>
+                                <Badge
+                                    dir='ltr'
+                                    variant={'secondary'}
+                                >{`${input.size.width} x ${input.size.height}`}</Badge>
                             </div>
                         ) : null}
                         {input.maxFileSize ? (
-                            <div dir='ltr' className='flex flex-wrap items-center gap-2'>
+                            <div className='flex flex-wrap items-center gap-2'>
                                 <InfoIcon size={14} />
                                 <span>{t('maxFileSize')}:</span>
                                 <Badge
+                                    dir='ltr'
                                     variant={'secondary'}
                                 >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
                             </div>
                         ) : null}
                         {input.extensions ? (
-                            <div dir='ltr' className='flex flex-wrap items-center gap-2'>
+                            <div className='flex flex-wrap items-center gap-2'>
                                 <InfoIcon size={14} />
                                 <span>{t('allowedExtensions')}:</span>
-                                <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
+                                <Badge dir='ltr' variant={'secondary'}>
+                                    {input.extensions.join(', ')}
+                                </Badge>
                             </div>
                         ) : null}
                     </div>

package/templates/default/components/form/inputs/rich-text-form-input.tsx

@@ -6,6 +6,7 @@ import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { RichTextFieldClientConfig } from 'nextjs-cms/core/fields'
 import { FieldError, useFormContext } from 'react-hook-form'
 import { useLocale } from '@/components/form/content-locale-context'
+import { useUILanguage } from 'nextjs-cms/translations/client'
 
 export default function RichTextFormInput({ input }: { input: RichTextFieldClientConfig }) {
     const { setValue, register, formState } = useFormContext()
@@ -15,6 +16,7 @@ export default function RichTextFormInput({ input }: { input: RichTextFieldClien
     const [initialValue, setInitialValue] = useState('')
     const [key, setKey] = useState(0) // Step 1: Add key state
     const locale = useLocale()
+    const uiLanguage = useUILanguage()
     // const [editorPhotos, setEditorPhotos] = useState<string[]>([])
     // const { theme } = useTheme()
     const axiosPrivate = useAxiosPrivate()
@@ -115,8 +117,16 @@ export default function RichTextFormInput({ input }: { input: RichTextFieldClien
                     menubar: 'file edit view insert format tools table tc help',
                     plugins: plugins,
                     toolbar: toolbar,
-
-                    directionality: input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : (locale?.rtl ? 'rtl' : 'ltr'),
+                    directionality:
+                        input.rtl !== undefined
+                            ? input.rtl
+                                ? 'rtl'
+                                : 'ltr'
+                            : locale
+                              ? locale.rtl
+                                  ? 'rtl'
+                                  : 'ltr'
+                              : uiLanguage.dir,
                     content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
                     // skin: theme === 'light' ? 'oxide' : 'oxide-dark',
                     // content_css: theme === 'light' ? 'default' : 'dark',

package/templates/default/components/form/inputs/tags-form-input.tsx

@@ -10,13 +10,7 @@ import { useSearchParams } from 'next/navigation'
 import { cn } from '@/lib/utils'
 import { trpc } from '@/app/_trpc/client'
 
-export default function TagsFormInput({
-    input,
-    sectionName,
-}: {
-    input: TagsFieldClientConfig
-    sectionName: string
-}) {
+export default function TagsFormInput({ input, sectionName }: { input: TagsFieldClientConfig; sectionName: string }) {
     const t = useI18n()
     const searchParams = useSearchParams()
     const localeParam = searchParams.get('locale')
@@ -101,16 +95,12 @@ export default function TagsFormInput({
         if (showDropdown && filteredSuggestions.length > 0) {
             if (event.key === 'ArrowDown') {
                 event.preventDefault()
-                setHighlightedIndex((prev) =>
-                    prev < filteredSuggestions.length - 1 ? prev + 1 : 0,
-                )
+                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,
-                )
+                setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredSuggestions.length - 1))
                 return
             }
             if (event.key === 'Enter' && highlightedIndex >= 0) {
@@ -180,7 +170,7 @@ export default function TagsFormInput({
             <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',
+                        'bg-input text-foreground w-full rounded px-3 py-1 shadow-xs ring-2 ring-gray-300 outline-0 transition-colors focus-within:ring-blue-500 hover:ring-gray-400',
                         'flex min-h-9 flex-wrap items-center gap-1 text-sm',
                         'cursor-text',
                         field.disabled && 'cursor-not-allowed opacity-50',
@@ -192,7 +182,7 @@ export default function TagsFormInput({
                             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',
+                                'border-foreground/40 flex items-center gap-1 px-2 py-1 text-xs transition-all duration-200',
                                 highlightedTag === tag ? 'bg-success/20 border-success/50 animate-pulse' : '',
                             )}
                         >

package/templates/default/components/form/inputs/text-form-input.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import FormInputElement from '@/components/form/form-input-element'
 import type { TextFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useFormContext, useController } from 'react-hook-form'
 import { useLocale } from '@/components/form/content-locale-context'
+import { useUILanguage } from 'nextjs-cms/translations/client'
 
 export default function TextFormInput({
     input,
@@ -23,8 +23,8 @@ export default function TextFormInput({
         defaultValue: input.value ?? undefined,
         disabled: disabled,
     })
+    const uiLanguage = useUILanguage()
     const locale = useLocale()
-
     return (
         <FormInputElement
             validationError={error}
@@ -36,7 +36,17 @@ export default function TextFormInput({
             <input
                 placeholder={input.placeholder ? input.placeholder : input.label}
                 type='text'
-                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : locale?.rtl ? 'rtl' : 'ltr'}
+                dir={
+                    input.rtl !== undefined
+                        ? input.rtl
+                            ? 'rtl'
+                            : 'ltr'
+                        : locale
+                          ? locale.rtl
+                              ? 'rtl'
+                              : 'ltr'
+                          : uiLanguage.dir
+                }
                 readOnly={disabled}
                 disabled={field.disabled}
                 name={field.name}

package/templates/default/components/form/inputs/textarea-form-input.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import FormInputElement from '@/components/form/form-input-element'
 import { TextAreaFieldClientConfig } from 'nextjs-cms/core/fields'
-import { FieldError, useController, useFormContext } from 'react-hook-form'
+import { useController, useFormContext } from 'react-hook-form'
 import { useLocale } from '@/components/form/content-locale-context'
+import { useUILanguage } from 'nextjs-cms/translations/client'
 
 export default function TextareaFormInput({
     input,
@@ -24,6 +24,7 @@ export default function TextareaFormInput({
         disabled: input.readonly,
     })
     const locale = useLocale()
+    const uiLanguage = useUILanguage()
 
     return (
         <FormInputElement
@@ -35,7 +36,17 @@ export default function TextareaFormInput({
         >
             <textarea
                 placeholder={input.label}
-                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : (locale?.rtl ? 'rtl' : 'ltr')}
+                dir={
+                    input.rtl !== undefined
+                        ? input.rtl
+                            ? 'rtl'
+                            : 'ltr'
+                        : locale
+                          ? locale.rtl
+                              ? 'rtl'
+                              : 'ltr'
+                          : uiLanguage.dir
+                }
                 readOnly={input.readonly}
                 disabled={field.disabled}
                 name={field.name}
@@ -43,7 +54,7 @@ export default function TextareaFormInput({
                 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'
+                className='bg-input text-foreground h-[150px] w-full rounded p-3 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-blue-500'
             ></textarea>
         </FormInputElement>
     )

package/templates/default/components/form/inputs/video-form-input.tsx

@@ -88,7 +88,7 @@ export default function VideoFormInput({
             file={input.value}
             width={400}
             height={280}
-            className='ring-3 mb-4 rounded p-1 ring-gray-400'
+            className='mb-4 rounded p-1 ring-3 ring-gray-400'
         />
     )
 
@@ -127,19 +127,22 @@ export default function VideoFormInput({
                 <CardContent className='flex flex-col gap-1'>
                     <div className='mb-2 flex flex-col text-sm'>
                         {input.maxFileSize ? (
-                            <div dir='ltr' className='flex flex-wrap items-center gap-2'>
+                            <div className='flex flex-wrap items-center gap-2'>
                                 <InfoIcon size={14} />
                                 <span>{t('maxFileSize')}:</span>
                                 <Badge
+                                    dir='ltr'
                                     variant={'secondary'}
                                 >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
                             </div>
                         ) : null}
                         {input.extensions ? (
-                            <div dir='ltr' className='flex flex-wrap items-center gap-2'>
+                            <div className='flex flex-wrap items-center gap-2'>
                                 <InfoIcon size={14} />
                                 <span>{t('allowedExtensions')}:</span>
-                                <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
+                                <Badge dir='ltr' variant={'secondary'}>
+                                    {input.extensions.join(', ')}
+                                </Badge>
                             </div>
                         ) : null}
                     </div>
@@ -165,12 +168,12 @@ export default function VideoFormInput({
                                         <ChevronRight fontSize='large' />
                                         <div className='relative'>
                                             <X
-                                                className='absolute -right-3 -top-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
+                                                className='absolute -top-3 -right-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
                                                 onClick={clearSelectedFile}
                                             />
                                             <embed
                                                 src={image}
-                                                className='ring-3 mb-4 max-w-full rounded p-1 ring-green-600'
+                                                className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
                                                 width={300}
                                                 height={190}
                                             />
@@ -204,7 +207,7 @@ export default function VideoFormInput({
                                         <div className='w-[400px] max-w-full'>
                                             <button
                                                 type='button'
-                                                className='bg-linear-to-r flex w-full flex-wrap items-center justify-center gap-1.5 rounded border from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-red-400 hover:to-amber-400'
+                                                className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-red-400 hover:to-amber-400'
                                                 onClick={() => {
                                                     setModal({
                                                         title: t('deleteVideo'),
@@ -244,7 +247,7 @@ export default function VideoFormInput({
                                     <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
                                         <button
                                             type='button'
-                                            className='bg-linear-to-r flex w-full flex-wrap items-center justify-center gap-1.5 rounded border from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
+                                            className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
                                             onClick={() => {
                                                 if (fileInputContainerRef.current?.firstChild) {
                                                     ;(

package/templates/default/dynamic-schemas/schema.ts

@@ -46,25 +46,9 @@ export const TestSectionTable = mysqlTable('test_section', {
 
 export const TestTagsTable = mysqlTable('test_tags', {
     testId: int('test_id').notNull(),
-    tagName: varchar('tag_name', { length: 255 }).notNull(),
-    locale: varchar('locale', { length: 255 }).notNull()
+    tagName: varchar('tag_name', { length: 255 }).notNull()
 }, (table) => [
-    primaryKey({ columns: [table.testId, table.tagName, table.locale] })
-]);
-
-
-export const TestSectionLocalesTable = mysqlTable('test_section_locales', {
-    id: int('id').autoincrement().notNull().primaryKey(),
-    parentId: int('parent_id').notNull(),
-    locale: varchar('locale', { length: 10 }).notNull(),
-    contentType: mysqlEnum('content_type', ['ad', 'user']).notNull(),
-    price: int('price'),
-    appId: varchar('app_id', { length: 36 }).notNull(),
-    title: varchar('title', { length: 255 }).notNull(),
-    photo: varchar('photo', { length: 255 }),
-    category: varchar('category', { length: 255 }).notNull()
-}, (table) => [
-    unique('test_section_locales_parent_id_locale_unique').on(table.parentId, table.locale)
+    primaryKey({ columns: [table.testId, table.tagName] })
 ]);
 
 

package/templates/default/env/env.ts

@@ -12,7 +12,6 @@ export const env = createEnv({
         CSRF_TOKEN_SECRET: z.string(),
         ACCESS_TOKEN_EXPIRATION: z.string(),
         REFRESH_TOKEN_EXPIRATION: z.string(),
-        NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
     },
 
     /**
@@ -25,9 +24,14 @@ export const env = createEnv({
         NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: z.string().optional(),
     },
 
+    shared: {
+        NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
+    },
+
     experimental__runtimeEnv: {
         NEXT_PUBLIC_RICHTEXT_INLINE_PUBLIC_URL: process.env.NEXT_PUBLIC_RICHTEXT_INLINE_PUBLIC_URL,
         NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
+        NODE_ENV: process.env.NODE_ENV,
     },
     /**
      * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

package/templates/default/package.json

@@ -70,7 +70,7 @@
     "nanoid": "^5.1.2",
     "next": "16.2.5",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.9.26",
+    "nextjs-cms": "0.9.28",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",