docs: Reusable styled form component

[michaelbrusegard]

This is currently a WIP. Please close the pull request if you feel like this addition is unnecessary, I don't want to waste anybody's time.

Current issues

Current issues I have been unable to solve and need help with (there may be more, and I will add them if I remember):

• Typescript types for the Reusable Form Component. I have looked through the type definitions but no matter how I define them I can't get them to work. Right now I have set them all to any for the time being.
• Updating validation of a field when another field is updated. In the example, I want the validation of the phoneNumber field to re-trigger when the country field is updated. This is because the validation of the phone number is based on which country is selected.
• Adding a minor delay to the removal of validation error messages so that it has time to do the opacity animation. I can implement this in the <Form.Field.Error> with useEffect and setTimeout, but maybe there is a better solution.

Use case

I feel like creating a component like this can be useful for big applications that have many forms. It can be argued for that it is unnecessary because you can create the components separately from the Form logic, but there is still a lot of boilerplate that a solutions like this removes.

Additions

• If you feel like it is needed I can also add a radio menu component to the reusable form component, but as it is mostly meant to be an example of an approach on a way to use Tanstack Form. I don't feel like it is necessary.
• The styles I have added in the example works in both dark mode and light mode. Which is currently set based on the system preferred theme. Should I add a button to toggle it?

Here is a screenshot of the example, keep in mind that the validation is triggered only after the first submit:

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.