chore: add working number demo

Author: crutchcorn

examples/react/simple/package.json

@@ -12,7 +12,8 @@
     "@mantine/core": "7.13.5",
     "@tanstack/react-form": "^0.41.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "zod": "^3.24.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

examples/react/simple/src/app-form.tsx

@@ -52,12 +52,35 @@ function TextField({ label }: TextFieldProps) {
   )
 }
 
+interface NumberFieldProps {
+  label: string
+}
+
+function NumberField({ label }: NumberFieldProps) {
+  const field = useFieldContext()
+  return (
+    <TextInput
+      value={field.state.value}
+      onChange={(e) => field.setValue(e.currentTarget.valueAsNumber)}
+      label={label}
+      type="number"
+      error={
+        field.state.meta.errors.length > 0 ? field.state.meta.errors[0] : null
+      }
+      defaultValue={field.options.defaultValue}
+    />
+  )
+}
+
+const FieldComponents = {
+  TextField,
+  NumberField,
+} as const
+
 type AppField<TFormData> = FieldComponent<
   TFormData,
   ValidatorType,
-  {
-    TextField: typeof TextField
-  }
+  typeof FieldComponents
 >
 
 export function useAppForm<TFormData>(
@@ -74,11 +97,7 @@ export function useAppForm<TFormData>(
         <form.Field {...props}>
           {(field) => (
             <FormFieldContext.Provider value={field}>
-              {children(
-                Object.assign(field, {
-                  TextField,
-                }),
-              )}
+              {children(Object.assign(field, FieldComponents))}
             </FormFieldContext.Provider>
           )}
         </form.Field>

examples/react/simple/src/index.tsx

@@ -1,13 +1,24 @@
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 import { MantineProvider } from '@mantine/core'
+import { z } from 'zod'
 import { useAppForm } from './app-form.tsx'
 
+const formSchema = z.object({
+  name: z.string(),
+  age: z.number().gte(13, 'You must be 13 to make an account'),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
 export default function App() {
   const form = useAppForm({
     defaultValues: {
-      firstName: '',
-      lastName: '',
+      name: '',
+      age: 0,
+    } as FormValues,
+    validators: {
+      onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
       // Do something with form data
@@ -28,32 +39,17 @@ export default function App() {
         <div>
           {/* A type-safe field component*/}
           <form.AppField
-            name="firstName"
-            validators={{
-              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'
-                )
-              },
-            }}
+            name="name"
             children={(field) => {
               // Avoid hasty abstractions. Render props are great!
-              return <field.TextField label="First Name" />
+              return <field.TextField label="Your Name" />
             }}
           />
         </div>
         <div>
           <form.AppField
-            name="lastName"
-            children={(field) => <field.TextField label="Last Name" />}
+            name="age"
+            children={(field) => <field.NumberField label="Your Age" />}
           />
         </div>
         <form.Subscribe