feat(form): work with popular schema builders

[ayoayco]

Idea:

---
import Form, { FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";
import * as z from 'zod';

const schema = z.object({
  username: z.string().min(1),
  email: z.string().email().min(1),
  password: z.string().min(8);
});

const form = new FormGroup.from(Validators.zod, schema);
---
<Form formGroups={form} />

[ayoayco]

Check zod-form-data
https://www.npmjs.com/package/zod-form-data

[ayoayco]

remix-validated-form
https://www.remix-validated-form.io

[fazzaamiarso]

@ayoayco I will try to implement this. Seems interesting.

[ayoayco]

There are other popular schema builders like yup but zod seems a good start

[fazzaamiarso]

It's set then, I also most familiar with zod

[ayoayco]

Yup let's go with zod first 😁

[ayoayco]

@fazzaamiarso one thing to note is that importing Validators here is important. It ensures the Validator.astro <script> is shipped to the browser.

[fazzaamiarso]

@ayoayco started working on this today and successfully implement zod schema to FormGroup. It's still have minimal functionality and typings is a mess.

I take the resolvers approach from react-hook-form, so we can plug any resolver we want. Just need a uniform return type from each resolvers.

Just wanted to let you know! 😁

[ayoayco]

@fazzaamiarso Awesome! Thanks for the update! This is one of the most exciting features for our library

[ayoayco]

@fazzaamiarso Awesome! Thanks for the update! This is one of the most exciting features for our library