feat: solid.js form (#471)

* solid commit -a

* fix failing tests and formatting

* comments + removed unneeded computed

* updated changes

* prettierd

* chore: add Solid Form to script to be deployed

* fix: fix typing of solid's Subscribe data

* chore: remove errant createEffect

* chore: rename Solid's useForm and useField to createForm and createField

* chore: remove old mention of React's memoization

* chore: add Solid simple example

* chore: add Solid yup example

* chore: add Zod Solid example

* docs: add initial docs for Solid package

---------

Co-authored-by: Corbin Crutchley <git@crutchcorn.dev>

examples/solid/simple/src/index.tsx

@@ -0,0 +1,117 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import { createForm, type FieldApi } from '@tanstack/solid-form'
+
+interface FieldInfoProps {
+  field: FieldApi<any, any, unknown, unknown>
+}
+
+function FieldInfo(props: FieldInfoProps) {
+  return (
+    <>
+      {props.field.state.meta.touchedErrors ? (
+        <em>{props.field.state.meta.touchedErrors}</em>
+      ) : null}
+      {props.field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+
+function App() {
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit: async (values) => {
+      // Do something with form data
+      console.log(values)
+    },
+  }))
+
+  return (
+    <div>
+      <h1>Simple Form Example</h1>
+      <form.Provider>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            void form.handleSubmit()
+          }}
+        >
+          <div>
+            {/* A type-safe field component*/}
+            <form.Field
+              name="firstName"
+              onChange={(value) =>
+                !value
+                  ? 'A first name is required'
+                  : value.length < 3
+                  ? 'First name must be at least 3 characters'
+                  : undefined
+              }
+              onChangeAsyncDebounceMs={500}
+              onChangeAsync={async (value) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return (
+                  value.includes('error') && 'No "error" allowed in first name'
+                )
+              }}
+              children={(field) => {
+                // Avoid hasty abstractions. Render props are great!
+                return (
+                  <>
+                    <label for={field().name}>First Name:</label>
+                    <input
+                      name={field().name}
+                      value={field().state.value}
+                      onBlur={field().handleBlur}
+                      onInput={(e) => field().handleChange(e.target.value)}
+                    />
+                    <FieldInfo field={field()} />
+                  </>
+                )
+              }}
+            />
+          </div>
+          <div>
+            <form.Field
+              name="lastName"
+              children={(field) => (
+                <>
+                  <label for={field().name}>Last Name:</label>
+                  <input
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().handleChange(e.target.value)}
+                  />
+                  <FieldInfo field={field()} />
+                </>
+              )}
+            />
+          </div>
+          <form.Subscribe
+            selector={(state) => ({
+              canSubmit: state.canSubmit,
+              isSubmitting: state.isSubmitting,
+            })}
+            children={(state) => {
+              return (
+                <button type="submit" disabled={!state().canSubmit}>
+                  {state().isSubmitting ? '...' : 'Submit'}
+                </button>
+              )
+            }}
+          />
+        </form>
+      </form.Provider>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)