Make Form generic for better TS support

[Tobbe]

This PR adds generics to <Form> that we pass on to react-hook-form for better/stronger types, especially in the onSubmit callback.

It will allow you to do this:

<Form<FormData>
  onSubmit={(data) => {
    // `data` is correctly typed here, and VSCode IntelliSense will show 
    // available attributes when you type `data.`
    console.log('submitted name:', data.name)
  }}
>
  <TextField name="name" />
  <Submit>Save</Submit>
</Form>

If you pass custom formMethods into the form you should put the type on the hook instead

const formMethods = useForm<FormData>()

return (
  <Form formMethods={formMethods}>
    // ...
  </Form>
)

[netlify]

✅ Deploy Preview for redwoodjs-docs canceled.

Name	Link
🔨 Latest commit	98e06dc
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/62c6f34d09a9dc0008c3dd80

[jtoar]

I did a double take when I saw <Form<FormData>, but it's a thing: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements.

I confirmed that it works as advertised! I understand your concern about type casting, but I don't understand quite enough about forwardRef to comment on the tradeoff. (I did read the issue linked in the comments, but still.) I think I did try to implement this before back when I typed this file, but didn't know how to pass a generic to a JSX element. Now I do, so LGTM!

[Philzen]

This looks like awesome stuff @Tobbe (its implementations frankly completely over the top of my head, but as a "user" i always enjoy seeing some type magic happening as soon as i pass the right generic 😃 ).

I'm wondering whether you could put this into the docs so the existence / application of the FormData type is made more aware for people to discover and enjoy it, i.e. in the tutorial or on the forms page

[Tobbe]

@Philzen I agree! Wrote up an issue for it #6120