packages/example-next/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "tsc -b && vite build",
     "dev": "vite",
-    "lint:tsc": "tsc --noEmit",
+    "lint:tsc": "tsc -b --noEmit",
     "lint:biome": "biome lint",
     "preview": "vite preview",
     "clean:cache": "rm -rf .turbo node_modules/.tmp node_modules/.vite* .tanstack",

packages/example-next/src/routes/form.tsx

@@ -1,13 +1,22 @@
-import { Button, Container, Flex, Text, TextField } from "@radix-ui/themes"
+import { Button, Container, Flex, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Schema } from "effect"
 import { Component, Form, MutationForm, View } from "effect-fc-next"
+import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
 import { runtime } from "@/runtime"
 
 
 const RegisterSchema = Schema.Struct({
-    email: Schema.String,
-    password: Schema.String,
+    email: Schema.String.check(
+        Schema.isPattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, {
+            message: "Enter a valid email address",
+        }),
+    ),
+    password: Schema.String.check(
+        Schema.isMinLength(5, {
+            message: "Password must be at least 5 characters long",
+        }),
+    ),
 })
 
 const RegisterRouteComponent = Component.make("RegisterRouteView")(function*() {
@@ -29,31 +38,32 @@ const RegisterRouteComponent = Component.make("RegisterRouteView")(function*() {
         return [form, emailField, passwordField] as const
     }))
 
-    const emailInput = yield* Form.useInput(emailField)
-    const passwordInput = yield* Form.useInput(passwordField)
     const [canCommit, isCommitting] = yield* View.useAll([
         form.canCommit,
         form.isCommitting,
     ])
+
+    const TextFieldFormInput = yield* TextFieldFormInputView.use
     const runPromise = yield* Component.useRunPromise()
 
+
     return (
         <Container width="300">
-            <form onSubmit={(event) => {
+            <form onSubmit={event => {
                 event.preventDefault()
                 void runPromise(form.submit)
             }}>
                 <Flex direction="column" gap="2">
-                    <TextField.Root
-                        value={emailInput.value}
-                        onChange={event => emailInput.setValue(event.currentTarget.value)}
+                    <TextFieldFormInput
+                        form={emailField}
                         placeholder="Email"
+                        debounce="250 millis"
                     />
-                    <TextField.Root
-                        value={passwordInput.value}
-                        onChange={event => passwordInput.setValue(event.currentTarget.value)}
+                    <TextFieldFormInput
+                        form={passwordField}
                         placeholder="Password"
                         type="password"
+                        debounce="250 millis"
                     />
                     <Button disabled={!canCommit || isCommitting}>
                         {isCommitting ? "Submitting…" : "Submit"}