React Form Typescript Plugin

Forms are the majority of the front end work in a lot of applications. Graphql Schemas provide everything we need to generate the form.

Some tooling exists for doing similar things. EG: [uniform.tools](https://uniforms.tools/playground#?N4IgDgTgpgzlAuIBcICCATd0YwAQAoBxCAQzAAsBFAGQEoQAacCAezBmVBIFd4WYSANyjIAZiQA2cJjz4DhAESgSSAT2QBGAAxam6AJYCARhKjoxk6SBVHlyeBG5QmYFQGMo5FhPRQI9x2cQaBJ0AHkAOwl1JHEpIJg3cigAWxJkEAioAHdcYjIqagAhCH10AHMofAAdCNxcI259H1QAZQAVVqTUkhq6-twwEgg4fAADWoGB-FUwKFwMLFg8YEmpgbd9GaQB1od9CPK19dwYeBJ4KB3cPdLDgEJj9bPoBB3bg_LH_pOAL30wNd6h8Hk96gBfWpg3AAYlw7XIhlwSOgAEcmtB0A1VA0mi0Ol1kmloTM5rhKE4IDjgLgSBFVPBEYcdgBJBS4SE_XBjWhrWgAOkq8HasyqAHJFtgYGLaAw1qJuBE3PB9Cw6vgUixfBJaLhVly3GqzrhfOdmngALy4ADaAF0ANxPfSiAj3TXa_lnC5QXlc-qmkjm_lgbgwcj4GkREgpK64MVey5ihi4GM4EiVHZivbe5F4NEYsz3MUc2iOrnO13u5SehxQBC-k4BoMhsMR3BRmOZl51-BJlPLdOxrO1hC53D5_SYoslstTCv4N1a6v_MAN9ZNqTB0PhyPRocrvupgQZuMALQBY4nU-L4NLTpdGqXEn5mxmuAAZO-U0-X1tVPzTEORlcAAPlwABWLQ1ymDcYC3Vtd07ONX1UQ8BxPMUAGE_1wNw6QaeYLlwUwSGNSDcPIYYSGVPw8AkNUvhvO9ywfKtn27UdP2_D0OPgACoCA8hQNwbQoOhWD4J3ds9y7Ede2TI9B0zW4e1w_DbFpeBiKgUitNEiiqJokZiIY6db1nAZ5zY_kVw_L97gAegAPWtLQAFoAE5bWAcDwQAEgc_lLjOR8PRXWhoIGCSWykjt9wBNC0ww88wBNFhYHbFgtLSeAklwRl5mgcpuBUCBcCgAAPSBllVCIzOYucHwkwDykZSL6mgeBuAgOoaVgjkLPBOV-hpFcdhpGxlEzFLcKXG8OVqegmDDFhshZKIDigABRCBWH8JAHCcGQYFUJVIlabgjBSLYLHiY7TrcSIADVJDKb1brgIaQAKmMMiMFgspeMgABYQHBIA) and a few other dead packages that attempt to do this at runtime.

IMO generating the forms would be a much better approach.

[Formik](https://formik.org/) is a very popular react form library with support for typescript, validation, and nested objects.

A form generation plugin is tricky because it needs to be customizable enough to suit peoples needs, with regards to styles and implementations of inputs, as well as validation, and hidden elements. The way formik is built provides an easy (ish) path to code generation, because it uses context for values, change handlers, metadata, etc...

The plugin should generate a "base" input for each built in scalar. Then Input Object types, and lists can be recursively composed from the base inputs.

Lists should be their own component as well, with an delete for each button in the list, and an add button at the end.

Circular references for Input Types can be handled by an `Add `.

Customization could be handled by generating a context Provider, which allows over rides for scalar types.

EG of a simple output
```gql
mutation myMutation (username: String!, $id: ID!) {
updateMyUserName(username: $username, id: $id) {
username
id
}
}
```
```tsx
// generatedCode.tsx
import React, { createContext, useContext } from 'React'
export const StringInput = (originalProps) => {
const inputContext = useContext(myMutationContext);
const { label, ...props } = originalProps;
const [field, meta] = useField(props);
if(inputContext.String) return
return (
<>
{label}

{meta.touched && meta.error ? (

) : null}

);
};

export const IDInput = (originalProps) => {
const inputContext = useContext(myMutationContext);
const { label, ...props } = originalProps;
const [field, meta] = useField(props);
if(inputContext.ID) return
return (
<>
{label}

{meta.touched && meta.error ? (

) : null}

);
};

export const myMutationContext = createContext<{[key: ScalarNames]: React.Component}>({})

export const MyMutationForm = (props: {onSubmit: () => unknown } ) =>{
return (






)
}
```
example usage
```tsx
import React from 'react'
import {myMutationContext , MyMutationForm } from './generated'

export const MyComponent () {
return (

console.log({formValues}) } />

)
}
```
Additionally, default types, and basic yup validations could also be generated.