Standardize Form Handling with Unified Wrapper

[Benjtalkshow]

Refactor: Standardize Form Validation & UI with react-hook-form + Zod

Overview

Form handling across the app (bounty creation, application, profile) is currently inconsistent in terms of validation, structure, and UI.

To improve consistency and developer experience, we should introduce a reusable form field wrapper built with react-hook-form and zod, ensuring uniform validation, error handling, and UI across all forms.

---

Goals

• Standardize form validation using Zod
• Unify form UI (labels, errors, descriptions)
• Reduce duplication in form logic
• Improve developer experience and maintainability

---

Implementation Details

1. Create Reusable Form Wrapper

Create: components/ui/form-field-wrapper.tsx

• Build a reusable component that:
  • Integrates with react-hook-form
  • Accepts field props (name, control, etc.)
  • Renders:
    • Label
    • Input (via children or render prop)
    • Error message
    • Description/help text
• Ensure compatibility with Zod validation schema
• Support different input types (input, textarea, select, etc.)

---

2. Refactor Existing Forms

components/bounty/forms/milestone-builder.tsx

• Replace custom input handling with the new wrapper
• Ensure all fields use consistent validation and error display

---

components/bounty/application-dialog.tsx

• Refactor input handling to use the wrapper
• Remove duplicated validation/UI logic
• Ensure proper integration with react-hook-form and Zod schema

---

Files Affected

Modified

• components/bounty/forms/milestone-builder.tsx
• components/bounty/application-dialog.tsx

Created

• components/ui/form-field-wrapper.tsx

---

Acceptance Criteria

• All targeted forms use the new form field wrapper
• Validation is handled consistently via Zod
• Error messages display uniformly across inputs
• Labels and descriptions follow a consistent UI pattern
• No duplicated form logic remains

---

Testing Notes

• Validate form submission with valid and invalid inputs
• Ensure error messages appear correctly for all fields
• Test different input types (text, textarea, select, etc.)
• Confirm no regression in form behavior or UX

---

Additional Notes

• Consider extending wrapper to support custom components (e.g., date pickers)
• Keep the wrapper flexible but opinionated for consistency
• Co-locate Zod schemas with form components where appropriate
• Optionally integrate with a UI library (e.g., shadcn/ui) for styling consistency

[linear]

BOU-143

[coderabbitai]

🔗 Related PRs

#17 - feat: Built BountyCard component with shadcn composition [merged]
#73 - feat: Extend Form Components for Bounty Creation [merged]
#88 - feat: Implement bounties detail page [merged]
#111 - Feat: implementation logic for single claim model [merged]
#117 - feat: add frontend hooks for submission mutations [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[zhaog100]

/attempt

[zhaog100]

/attempt

[Ekene001]

@Ekene001 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, can i work on this task?

Here is my apprach:

I’ll start by creating the form-field-wrapper.tsx to handle labels, descriptions, and error messages in a consistent layout. I’ll then refactor the milestone builder and application dialog to use this new component, ensuring the Zod schemas are tightly integrated for type-safe validation. I’ll also pay close attention to the accessibility of the input fields and ensure the mobile and desktop view remains consistent across all forms.

ETA: 8hrs

Please assign this to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ekene001 to this issue.

[Jayrodri088]

@Jayrodri088 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I’ll introduce a reusable FormFieldWrapper component built on react-hook-form and Zod, then refactor the bounty milestone and application forms to use it so validation, labels, and errors are consistent everywhere. The wrapper will consume useFormContext/Controller, accept a name, label, optional description, and a render prop for the actual input, and automatically render the label, field, and any Zod‑driven error message using a unified layout and styling, similar to the pattern used in shadcn’s form primitives.

Once the wrapper is in components/ui/form-field-wrapper.tsx, I’ll update components/bounty/forms/milestone-builder.tsx and components/bounty/application-dialog.tsx so every field is declared in a Zod schema, wired through zodResolver, and rendered via the new wrapper instead of bespoke input+error blocks, eliminating duplicate logic and one‑off error UIs. I’ll test text, textarea, and select inputs with valid/invalid submissions to confirm errors appear uniformly, labels/descriptions follow the new pattern, and there’s no regression in UX. ETA: 4–6 hours for the wrapper, two form refactors, and testing

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jayrodri088 to this issue.

[drips-wave]

Congratulations, @Ekene001! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @Ekene001: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊