Convert the events/new creation form to React Hook Form + Zod with full validation

[greatest0fallt1me]

Description

app/(dashboard)/events/new/page.tsx (NewEventPage) is a controlled form built entirely from useState hooks (title, description, category, deadline, options, isPublic, featuredEvent) whose handleSubmit only console.logs the payload and redirects — there is no validation, so empty titles, missing categories, past deadlines, and empty prediction options all submit silently. The repo already depends on react-hook-form, zod, and @hookform/resolvers, and ships shadcn form primitives in components/ui/form.tsx. This issue rebuilds the form on those libraries with a Zod schema.

Requirements and context

• Define a Zod schema (e.g. lib/validation/event.ts) covering required title, optional description, required category from the existing options, a deadline that must be in the future, and at least two non-empty prediction options.
• Refactor NewEventPage to use useForm with zodResolver and the components/ui/form.tsx primitives (Form, FormField, FormItem, FormMessage); preserve the dynamic add/remove options UI and the live preview panel.
• Show inline validation messages and disable submit while invalid/submitting; keep the existing Cancel-returns-to-/events behavior.
• Non-functional: every field must be programmatically labelled and errors announced via the form primitives' FormMessage; no any types on the form values.
• Keep the submit handler's redirect to /events (real submission is out of scope for this issue).

Acceptance criteria

• The form uses react-hook-form + zodResolver and the shared components/ui/form.tsx components.
• A Zod schema enforces required title, valid category, future deadline, and >=2 non-empty options.
• Invalid submissions are blocked and show inline, accessible error messages.
• The dynamic options list and live preview continue to work.
• Tests cover at least one invalid and one valid submission path.
• New/changed form logic reaches >=85% line coverage.

Suggested execution

1. Fork the repo and create a branch — git checkout -b feature/event-form-rhf-zod.

2. Implement changes — app/(dashboard)/events/new/page.tsx, new lib/validation/event.ts, reuse components/ui/form.tsx.

3. Write/extend tests — Jest + React Testing Library + @testing-library/user-event with pnpm; add app/(dashboard)/events/new/__tests__/new-event-form.test.tsx asserting validation errors and a successful submit.

4. Test and commit —

pnpm install
pnpm type-check
pnpm test
pnpm lint

Example commit message

feat(events): rebuild event-creation form with react-hook-form and zod validation

Guidelines

• Target >=85% coverage on the new form and schema.
• Ensure full keyboard operability and that screen readers announce validation errors; update any form docs.
• Timeframe: 96 hours.