From 892973f5a2bd9317e0188e2e09aaa90b944589a6 Mon Sep 17 00:00:00 2001
From: QueenColly <colleteumeh0@gmail.com>
Date: Sat, 29 Aug 2026 11:50:21 +0100
Subject: [PATCH] feat(verification): integrate Zod validation and React Hook
 Form resolver for manifest inputs

---
 .../components/ManifestGeneratorForm.tsx      | 48 +++++++++++++++++++
 .../verification/schemas/manifest.schema.ts   | 23 +++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 frontend/features/verification/components/ManifestGeneratorForm.tsx
 create mode 100644 frontend/features/verification/schemas/manifest.schema.ts

diff --git a/frontend/features/verification/components/ManifestGeneratorForm.tsx b/frontend/features/verification/components/ManifestGeneratorForm.tsx
new file mode 100644
index 0000000..b7ab6db
--- /dev/null
+++ b/frontend/features/verification/components/ManifestGeneratorForm.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { manifestSchema, ManifestFormData } from '../schemas/manifest.schema';
+
+export const ManifestGeneratorForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ManifestFormData>({
+    resolver: zodResolver(manifestSchema),
+  });
+
+  const onSubmit = (data: ManifestFormData) => {
+    console.log('Validated Manifest Data:', data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+      <div>
+        <label>Title</label>
+        <input {...register('title')} />
+        {errors.title && <span className="text-red-500 text-sm">{errors.title.message}</span>}
+      </div>
+
+      <div>
+        <label>Description</label>
+        <textarea {...register('description')} />
+        {errors.description && <span className="text-red-500 text-sm">{errors.description.message}</span>}
+      </div>
+
+      <div>
+        <label>Version</label>
+        <input {...register('version')} placeholder="1.0.0" />
+        {errors.version && <span className="text-red-500 text-sm">{errors.version.message}</span>}
+      </div>
+
+      <div>
+        <label>Author</label>
+        <input {...register('author')} />
+        {errors.author && <span className="text-red-500 text-sm">{errors.author.message}</span>}
+      </div>
+
+      <button type="submit">Generate Manifest</button>
+    </form>
+  );
+};
\ No newline at end of file
diff --git a/frontend/features/verification/schemas/manifest.schema.ts b/frontend/features/verification/schemas/manifest.schema.ts
new file mode 100644
index 0000000..a493f58
--- /dev/null
+++ b/frontend/features/verification/schemas/manifest.schema.ts
@@ -0,0 +1,23 @@
+// frontend/features/verification/schemas/manifest.schema.ts
+
+import { z } from 'zod';
+
+export const manifestSchema = z.object({
+  title: z
+    .string()
+    .min(1, { message: 'Title is required' })
+    .max(100, { message: 'Title must be 100 characters or less' }),
+  description: z
+    .string()
+    .min(1, { message: 'Description is required' })
+    .max(500, { message: 'Description must be 500 characters or less' }),
+  version: z
+    .string()
+    .min(1, { message: 'Version is required' })
+    .regex(/^\d+\.\d+\.\d+$/, { message: 'Version must follow semantic versioning (e.g., 1.0.0)' }),
+  author: z
+    .string()
+    .min(1, { message: 'Author name or address is required' }),
+});
+
+export type ManifestFormData = z.infer<typeof manifestSchema>;
\ No newline at end of file