feat!: Update auto-form to zod 4, update packages

Author: aXenDeveloper

.github/copilot-instructions.md

@@ -14,7 +14,7 @@
   - i18n: Use `next-intl`, `t('key')` for translations, `getTranslation` (server), `useTranslation` (client)
   - Accessibility: WCAG 2.1 AA, semantic HTML, ARIA, keyboard/screen reader support
 - **Backend:**
-  - Hono.js 4, OpenAPI via `@hono/zod-openapi`, Zod 3 for validation
+  - Hono.js 4, OpenAPI via `@hono/zod-openapi`, Zod 4 for validation
   - Database: PostgreSQL via Drizzle ORM, access via `c.get('database')`
   - API: RESTful, versioned, rate-limited, secure session management
   - Error handling: Use Hono's error middleware, log via `c.get('log')`

.github/docs/prd.md

@@ -150,7 +150,7 @@ VitNode is designed for individual developers and small teams who need a structu
 - React 19 with Server Components
 - TypeScript 5 with strict configuration
 - Tailwind CSS 4 with Shadcn UI components
-- Zod 3 for runtime validation
+- Zod 4 for runtime validation
 - React Hook Form 7 for form management
 - Next-intl for internationalization
 

README.md

@@ -74,6 +74,7 @@
 - **Enhanced Plugin System**: Improved CLI tools for plugins
 - **Better Documentation**: Completely rewritten docs and website
 - **Streamlined Configuration**: Single config file for all settings
+- **Zod 4**: Upgraded to the latest version for schema validation
 
 ## 🔍 Project Scope
 

apps/api/package.json

@@ -15,27 +15,27 @@
     "drizzle-kit": "drizzle-kit"
   },
   "dependencies": {
-    "@hono/zod-openapi": "^0.19.10",
-    "@hono/zod-validator": "^0.7.1",
-    "@react-email/components": "^0.2.0",
+    "@hono/zod-openapi": "^1.0.2",
+    "@hono/zod-validator": "^0.7.2",
+    "@react-email/components": "^0.3.2",
     "@vitnode/core": "workspace:*",
     "drizzle-kit": "^0.31.4",
     "drizzle-orm": "^0.44.3",
     "hono": "^4.8.5",
     "next-intl": "^4.3.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "zod": "^3.25.76"
+    "zod": "^4.0.5"
   },
   "devDependencies": {
-    "@hono/node-server": "^1.16.0",
-    "@types/node": "^24.0.13",
+    "@hono/node-server": "^1.17.1",
+    "@types/node": "^24.1.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitnode/eslint-config": "workspace:*",
     "dotenv": "^17.2.0",
     "eslint": "^9.31.0",
-    "react-email": "^4.1.3",
+    "react-email": "^4.2.3",
     "tsc-alias": "^1.8.16",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3"

apps/docs/content/docs/ui/auto-form.mdx

@@ -21,7 +21,9 @@ import { z } from 'zod';
 ```ts
 const formSchema = z.object({
   username: z.string().min(3, 'Username must be at least 3 characters'),
-  email: z.string().email('Please enter a valid email address'),
+  email: z
+    .email('Please enter a valid email address')
+    .describe("We'll use this email to contact you. (from zod schema)"),
   user_type: z.enum(['admin', 'editor', 'viewer']),
   accept_terms: z.boolean().refine(val => val, {
     message: 'You must accept the terms and conditions',
@@ -37,55 +39,50 @@ const formSchema = z.object({
       id: 'username',
       component: props => (
         <AutoFormInput
+          {...props}
           description="This is the username for your application. It should be unique and not shared with anyone."
           label="Username"
-          {...props}
         />
       ),
     },
     {
       id: 'email',
       component: props => (
-        <AutoFormInput
-          description="We'll use this email to contact you."
-          label="Email Address"
-          type="email"
-          {...props}
-        />
+        <AutoFormInput {...props} label="Email Address" type="email" />
       ),
     },
     {
       id: 'user_type',
       component: props => (
         <AutoFormSelect
+          {...props}
           description="Select the type of user."
           label="User Type"
           labels={[
             { value: 'admin', label: 'Admin' },
             { value: 'editor', label: 'Editor' },
             { value: 'viewer', label: 'Viewer' },
           ]}
-          {...props}
         />
       ),
     },
     {
       id: 'accept_terms',
       component: props => (
         <AutoFormCheckbox
-          label="I accept the terms and conditions"
           {...props}
+          label="I accept the terms and conditions"
         />
       ),
     },
     {
       id: 'description',
       component: props => (
         <AutoFormTextarea
+          {...props}
           description="Write a short description of your application."
           label="Description"
           placeholder="My application is..."
-          {...props}
         />
       ),
     },
@@ -127,7 +124,7 @@ Auto Form supports all Zod validators:
 ```ts
 const formSchema = z.object({
   username: z.string().min(3).max(20),
-  email: z.string().email(),
+  email: z.email(),
   age: z.number().min(18).max(120),
   password: z
     .string()
@@ -138,6 +135,12 @@ const formSchema = z.object({
 });
 ```
 
+## Custom Fields
+
+<Callout type="warn" title="This documentation is under construction! 🚧">
+  We're working hard to bring you the best documentation experience.
+</Callout>
+
 ## Form Submission
 
 To activate submit button and handle form submission with the `onSubmit` callback:
@@ -149,9 +152,9 @@ To activate submit button and handle form submission with the `onSubmit` callbac
       id: 'username',
       component: props => (
         <AutoFormInput
+          {...props}
           description="This is the username for your application."
           label="Username"
-          {...props}
         />
       ),
     },

apps/docs/content/docs/ui/checkbox.mdx

@@ -36,8 +36,8 @@ const formSchema = z.object({
       id: 'acceptTerms',
       component: props => (
         <AutoFormCheckbox
-          label="I accept the terms and conditions"
           {...props}
+          label="I accept the terms and conditions"
         />
       ),
     },

apps/docs/content/docs/ui/combobox-async.mdx

@@ -32,6 +32,7 @@ const formSchema = z.object({
       id: 'categoryId',
       component: props => (
         <AutoFormComboboxAsync
+          {...props}
           fetchData={async ({ search }) => {
             const res = await fetcherClient(categoriesModule, {
               path: '/',
@@ -52,7 +53,6 @@ const formSchema = z.object({
           }}
           id="categoryId"
           label="Category"
-          {...props}
         />
       ),
     },

apps/docs/content/docs/ui/combobox.mdx

@@ -34,6 +34,7 @@ const formSchema = z.object({
       id: 'type',
       component: props => (
         <AutoFormCombobox
+          {...props}
           description="Select an option from the list"
           label="Type"
           labels={[
@@ -46,7 +47,6 @@ const formSchema = z.object({
               label: 'Option Two',
             },
           ]}
-          {...props}
         />
       ),
     },

apps/docs/content/docs/ui/input.mdx

@@ -22,7 +22,7 @@ import { AutoFormInput } from '@vitnode/core/components/form/fields/input';
 ```ts
 const formSchema = z.object({
   username: z.string().min(3, 'Username must be at least 3 characters'),
-  email: z.string().email('Please enter a valid email address'),
+  email: z.email('Please enter a valid email address'),
 });
 ```
 
@@ -34,20 +34,19 @@ const formSchema = z.object({
       id: 'username',
       component: props => (
         <AutoFormInput
+          {...props}
           description="This is the username for your application. It should be unique and not shared with anyone."
           label="Username"
-          {...props}
         />
       ),
     },
     {
       id: 'email',
       component: props => (
         <AutoFormInput
-          type="email"
+          {...props}
           description="We'll use this email to contact you."
           label="Email Address"
-          {...props}
         />
       ),
     },

apps/docs/content/docs/ui/radio-group.mdx

@@ -33,6 +33,7 @@ const formSchema = z.object({
       id: 'options',
       component: props => (
         <AutoFormRadioGroup
+          {...props}
           description="By checking this box, you agree to the terms and conditions."
           label="I agree to the terms and conditions"
           labels={[
@@ -49,7 +50,6 @@ const formSchema = z.object({
               label: 'Option 3',
             },
           ]}
-          {...props}
         />
       ),
     },