diff --git a/packages/example-next/package.json b/packages/example-next/package.json index 78995c3..26a9e01 100644 --- a/packages/example-next/package.json +++ b/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", diff --git a/packages/example-next/src/routes/form.tsx b/packages/example-next/src/routes/form.tsx index f64f803..38c9109 100644 --- a/packages/example-next/src/routes/form.tsx +++ b/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 ( -
{ + { event.preventDefault() void runPromise(form.submit) }}> - emailInput.setValue(event.currentTarget.value)} + - passwordInput.setValue(event.currentTarget.value)} +