Form tests

packages/example/src/routes/form.tsx

@@ -0,0 +1,57 @@
+import { runtime } from "@/runtime"
+import { Container, Flex, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, Effect, Schema, Stream } from "effect"
+import { Component, Form } from "effect-fc"
+import { useContext, useFork } from "effect-fc/hooks"
+
+
+const LoginFormSchema = Schema.Struct({
+    email: Schema.String,
+    password: Schema.String,
+})
+
+class LoginForm extends Effect.Service<LoginForm>()("LoginForm", {
+    scoped: Form.make({
+        schema: LoginFormSchema,
+        initialValue: { email: "", password: "" },
+    })
+}) {}
+
+class LoginFormComponent extends Component.makeUntraced(function* LoginFormComponent() {
+    const form = yield* LoginForm
+    const emailInput = yield* form.useInput(["email"])
+    const passwordInput = yield* form.useInput(["password"])
+
+    yield* useFork(() => Stream.runForEach(form.latestValueSubscribable.changes, Console.log))
+
+    return (
+        <Container>
+            <Flex direction="column" gap="2">
+                <TextField.Root
+                    value={emailInput.value}
+                    onChange={e => emailInput.setValue(e.target.value)}
+                />
+
+                <TextField.Root
+                    value={passwordInput.value}
+                    onChange={e => passwordInput.setValue(e.target.value)}
+                />
+            </Flex>
+        </Container>
+    )
+}) {}
+
+
+const FormRoute = Component.makeUntraced(function* FormRoute() {
+    const context = yield* useContext(LoginForm.Default)
+    const LoginFormComponentFC = yield* Effect.provide(LoginFormComponent, context)
+
+    return <LoginFormComponentFC />
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
+export const Route = createFileRoute("/form")({
+    component: FormRoute
+})