create-nextjs-cms 0.9.7 → 0.9.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "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/.env.test

@@ -0,0 +1,19 @@
+####
+# Test database configuration
+# Used exclusively by the Playwright e2e test suite (globalSetup).
+# Points to the Docker MySQL container started by `pnpm test:db:up`.
+#
+# NEVER point these at the dev database (port 3306).
+####
+DB_HOST=
+DB_PORT=
+DB_NAME=
+DB_USER=
+DB_PASSWORD=
+
+# Override these to use a different admin account in tests
+E2E_ADMIN_USERNAME=
+E2E_ADMIN_PASSWORD=
+
+# Set to "true" to stop the Docker container after the test run
+E2E_TEARDOWN_DB=

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

@@ -57,7 +57,7 @@ function formatValue(date: Date | undefined, format: 'date' | 'datetime'): strin
 }
 
 export default function DateRangeFormInput({ input }: { input: DateRangeFieldClientConfig }) {
-    const { control } = useFormContext()
+    const { control, setValue } = useFormContext()
     const [open, setOpen] = React.useState(false)
     const minDate = resolveBound(input.minDate)
     const maxDate = resolveBound(input.maxDate)
@@ -65,6 +65,8 @@ export default function DateRangeFormInput({ input }: { input: DateRangeFieldCli
         ...(minDate ? [{ before: toCalendarDay(minDate) as Date }] : []),
         ...(maxDate ? [{ after: toCalendarDay(maxDate) as Date }] : []),
     ]
+    const initialFrom = toDate(input.startValue)
+    const initialTo = toDate(input.endValue)
 
     const {
         field: startField,
@@ -72,7 +74,7 @@ export default function DateRangeFormInput({ input }: { input: DateRangeFieldCli
     } = useController({
         name: input.startName,
         control,
-        defaultValue: toDate(input.startValue),
+        defaultValue: initialFrom,
     })
 
     const {
@@ -81,14 +83,30 @@ export default function DateRangeFormInput({ input }: { input: DateRangeFieldCli
     } = useController({
         name: input.endName,
         control,
-        defaultValue: toDate(input.endValue),
+        defaultValue: initialTo,
     })
 
     const [range, setRange] = React.useState<DateRange | undefined>({
-        from: toDate(input.startValue),
-        to: toDate(input.endValue),
+        from: initialFrom,
+        to: initialTo,
     })
 
+    React.useEffect(() => {
+        const nextFrom = toDate(input.startValue)
+        const nextTo = toDate(input.endValue)
+        const nextRange =
+            nextFrom || nextTo
+                ? {
+                      from: nextFrom,
+                      to: nextTo,
+                  }
+                : undefined
+
+        setRange(nextRange)
+        setValue(input.startName, nextFrom)
+        setValue(input.endName, nextTo)
+    }, [input.startValue, input.endValue, input.startName, input.endName, setValue])
+
     function handleSelect(selected: DateRange | undefined) {
         setRange(selected)
         startField.onChange(selected?.from ?? undefined)

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

@@ -24,7 +24,7 @@ export default function DocumentFormInput({
     } = useController({
         name: input.name,
         control,
-        defaultValue: input.value ?? '',
+        defaultValue: undefined,
     })
 
     const [fileName, setFileName] = useState(t('noFileSelected'))

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

@@ -15,7 +15,7 @@ export default function VideoFormInput({ input, sectionName }: { input: VideoFie
     } = useController({
         name: input.name,
         control,
-        defaultValue: input.value ?? '',
+        defaultValue: undefined,
     })
 
     const [fileName, setFileName] = useState(t('noFileSelected'))

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

@@ -1,4 +1,4 @@
-import {mysqlTable,int,longtext,mysqlEnum,varchar,index,unique,primaryKey,boolean,double,timestamp} from 'drizzle-orm/mysql-core'
+import {mysqlTable,int,longtext,mysqlEnum,varchar,index,unique,primaryKey,boolean,double,timestamp,float,date,datetime} from 'drizzle-orm/mysql-core'
 
 export const AppInfoTable = mysqlTable('app_info', {
     id: int('id').autoincrement().notNull().primaryKey(),
@@ -473,3 +473,32 @@ export const AddressTable = mysqlTable('address', {
     level: int('level')
 });
 
+
+export const E2eAllFieldsTable = mysqlTable('e2e_all_fields', {
+    id: int('id').autoincrement().notNull().primaryKey(),
+    title: varchar('title', { length: 255 }).notNull(),
+    slug: varchar('slug', { length: 255 }),
+    subtitle: longtext('subtitle'),
+    secret: varchar('secret', { length: 255 }),
+    quantity: int('quantity'),
+    price: float('price'),
+    rating: double('rating'),
+    viewCount: int('view_count'),
+    isPublished: boolean('is_published'),
+    status: mysqlEnum('status', ['draft', 'published', 'archived', 'scheduled']).notNull(),
+    categories: varchar('categories', { length: 255 }),
+    tags: varchar('tags', { length: 255 }),
+    coverPhoto: varchar('cover_photo', { length: 255 }),
+    videoClip: varchar('video_clip', { length: 255 }),
+    attachment: varchar('attachment', { length: 255 }),
+    bodyContent: longtext('body_content'),
+    publishDate: date('publish_date'),
+    startsAt: datetime('starts_at'),
+    availableFrom: date('available_from'),
+    availableUntil: date('available_until'),
+    brandColor: varchar('brand_color', { length: 7 }),
+    mapLocation: varchar('map_location', { length: 255 })
+}, (table) => [
+    index('e2e_title_index').on(table.title)
+]);
+

package/templates/default/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/default/package.json

@@ -10,7 +10,11 @@
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "clean": "git clean -xdf .turbo .next node_modules",
     "typecheck": "tsc --noEmit",
-    "postinstall": "node ./lib/postinstall.js"
+    "postinstall": "node ./lib/postinstall.js",
+    "test:e2e": "cross-env E2E_TEARDOWN_DB=true playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -54,18 +58,18 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.19",
+    "dompurify": "^3.3.3",
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.45.1",
     "drizzle-zod": "^0.8.3",
     "eslint-plugin-drizzle": "^0.2.3",
     "file-type": "^20.1.0",
-    "isomorphic-dompurify": "^3.7.1",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.563.0",
     "nanoid": "^5.1.2",
     "next": "16.1.1",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.9.7",
+    "nextjs-cms": "0.9.9",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",
@@ -87,6 +91,7 @@
     "zod": "4.1.12"
   },
   "devDependencies": {
+    "@playwright/test": "^1.59.1",
     "@tailwindcss/postcss": "^4.1.18",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "22.13.8",