Refactor form validation in multiple components; switch to valibot for schema resolution

Author: SunPodder

web/bun.lockb

@@ -10,7 +10,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@hookform/resolvers": "^3.9.0",
+		"@hookform/resolvers": "3.9.0",
 		"@radix-ui/react-avatar": "^1.1.0",
 		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-label": "^2.1.0",
@@ -26,14 +26,13 @@
 		"lucide-react": "^0.446.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-hook-form": "^7.53.0",
+		"react-hook-form": "7.53.0",
 		"react-intersection-observer": "^9.16.0",
 		"react-router-dom": "^6.26.2",
 		"socket.io-client": "^4.8.0",
 		"tailwind-merge": "^2.5.2",
 		"tailwindcss-animate": "^1.0.7",
-		"vaul": "^1.0.0",
-		"zod": "^3.23.8"
+		"vaul": "^1.0.0"
 	},
 	"devDependencies": {
 		"@types/node": "^22.7.2",
@@ -43,14 +42,11 @@
 		"@types/react-dom": "^18.3.0",
 		"@vitejs/plugin-react-swc": "^3.5.0",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.9.0",
 		"eslint-plugin-react-hooks": "^5.1.0-rc.0",
 		"eslint-plugin-react-refresh": "^0.4.9",
 		"globals": "^15.9.0",
 		"postcss": "^8.4.47",
 		"tailwindcss": "^3.4.13",
-		"typescript": "^5.5.3",
-		"typescript-eslint": "^8.0.1",
 		"vite": "^5.4.11"
 	}
 }

web/package.json

@@ -2,13 +2,14 @@ import { Image, Send } from "lucide-react";
 import { Input } from "../../components/ui/input";
 import { socket } from "../../lib/socket";
 import { useEffect, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
 
 export function ChatInput({chat, chatId}: { chat: Chat, chatId: string | null }) {
 	const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 	const [message, setMessage] = useState<string>("");
 	const [images, setImages] = useState<File[]>([]);
 	const [imagePreview, setImagePreview] = useState<string[]>([]);
+	console.log(images);
+	
 
 	useEffect(() => {
 		return () => {

web/src/pages/Chat/ChatInput.tsx

@@ -9,7 +9,6 @@ import {
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useInView } from "react-intersection-observer";
 import { GET } from "../../lib/fetch";
-import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { socket } from "../../lib/socket";
 

web/src/pages/Chat/MessageArea.tsx

@@ -1,5 +1,5 @@
-import { zLoginUser } from "../../../common/zod_schema";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { LoginUserSchema, vLoginUser } from "../../../common/zod_schema";
+import { valibotResolver } from "@hookform/resolvers/valibot";
 import { useForm } from "react-hook-form";
 import {
 	Form,
@@ -11,7 +11,6 @@ import {
 } from "../components/ui/form";
 import { Input } from "../components/ui/input";
 import { Button } from "../components/ui/button";
-import { z } from "zod";
 import {
 	Card,
 	CardContent,
@@ -26,8 +25,8 @@ import { useSetAtom } from "jotai";
 import { User } from "../lib/store";
 
 export default function Login() {
-	const form = useForm<z.infer<typeof zLoginUser>>({
-		resolver: zodResolver(zLoginUser),
+	const form = useForm<LoginUserSchema>({
+		resolver: valibotResolver(vLoginUser),
 		defaultValues: {
 			email: "",
 			password: "",
@@ -36,7 +35,7 @@ export default function Login() {
 
 	const setUser: any = useSetAtom(User as any);
 
-	async function onSubmit(data: z.infer<typeof zLoginUser>) {
+	async function onSubmit(data: LoginUserSchema) {
 		const user = await POST("/login", data);
 		setUser(user);
 	}

web/src/pages/Login.tsx

@@ -11,9 +11,8 @@ import { Input } from "../components/ui/input";
 import { useAtom } from "jotai";
 import { User } from "../lib/store";
 import { useForm } from "react-hook-form";
-import { zProfile } from "../../../common/zod_schema";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { ProfileSchema, vProfile } from "../../../common/zod_schema";
+import { valibotResolver } from "@hookform/resolvers/valibot";
 import {
 	Form,
 	FormControl,
@@ -40,7 +39,10 @@ const ProfileImage = ({ user, form }) => {
 						<FormLabel>
 							<Avatar className="flex relative cursor-pointer">
 								<AvatarImage
-									src={makeObjectURL(value) || user?.avatar?.url}
+									src={
+										makeObjectURL(value) ||
+										user?.avatar?.url
+									}
 									alt={user?.name.first}
 									className="w-40 h-40 rounded-full"
 								/>
@@ -76,8 +78,8 @@ const ProfileImage = ({ user, form }) => {
 export default function Profile() {
 	const [user, setUser]: [any, any] = useAtom(User);
 
-	const form = useForm<z.infer<typeof zProfile>>({
-		resolver: zodResolver(zProfile),
+	const form = useForm<ProfileSchema>({
+		resolver: valibotResolver(vProfile),
 		defaultValues: {
 			email: user?.email,
 			username: user?.username,

web/src/pages/Profile.tsx

@@ -1,5 +1,5 @@
-import { zRegisterUser } from "../../../common/zod_schema";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { RegisterUserSchema, vRegisterUser } from "../../../common/zod_schema";
+import { valibotResolver } from "@hookform/resolvers/valibot";
 import { useForm } from "react-hook-form";
 import {
 	Form,
@@ -11,7 +11,6 @@ import {
 } from "../components/ui/form";
 import { Input } from "../components/ui/input";
 import { Button } from "../components/ui/button";
-import { z } from "zod";
 import {
 	Card,
 	CardContent,
@@ -26,8 +25,8 @@ import { User } from "../lib/store";
 import { useSetAtom } from "jotai";
 
 export default function Register() {
-	const form = useForm<z.infer<typeof zRegisterUser>>({
-		resolver: zodResolver(zRegisterUser),
+	const form = useForm<RegisterUserSchema>({
+		resolver: valibotResolver(vRegisterUser),
 		defaultValues: {
 			name: {
 				first: "",
@@ -42,7 +41,7 @@ export default function Register() {
 
 	const setUser: any = useSetAtom(User as any);
 
-	async function onSubmit(data: z.infer<typeof zRegisterUser>) {
+	async function onSubmit(data: RegisterUserSchema) {
 		const user = await POST("/register", data);
 		setUser(user);
 		console.log(user);