Form examples

packages/example/src/lib/form/TextFieldFormInput.tsx

@@ -1,7 +1,6 @@
 import { Callout, Flex, Spinner, TextField } from "@radix-ui/themes"
 import { Array, Option } from "effect"
-import { Component, Form } from "effect-fc"
-import { useSubscribables } from "effect-fc/Hooks"
+import { Component, Form, Hooks } from "effect-fc"
 
 
 export interface TextFieldFormInputProps
@@ -9,38 +8,42 @@ extends TextField.RootProps, Form.useInput.Options {
     readonly field: Form.FormField<any, string>
 }
 
-export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
-    const { value, setValue } = yield* Form.useInput(props.field, props)
-    const [issues, isValidating, isSubmitting] = yield* useSubscribables(
-        props.field.issuesSubscribable,
-        props.field.isValidatingSubscribable,
-        props.field.isSubmittingSubscribable,
-    )
+export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(
+    function*(props: TextFieldFormInputProps) {
+        const { value, setValue } = yield* Form.useInput(props.field, props)
+        const [issues, isValidating, isSubmitting] = yield* Hooks.useSubscribables(
+            props.field.issuesSubscribable,
+            props.field.isValidatingSubscribable,
+            props.field.isSubmittingSubscribable,
+        )
 
-    return (
-        <Flex direction="column" gap="1">
-            <TextField.Root
-                value={value}
-                onChange={e => setValue(e.target.value)}
-                disabled={isSubmitting}
-                {...props}
-            >
-                {isValidating &&
-                    <TextField.Slot side="right">
-                        <Spinner />
-                    </TextField.Slot>
-                }
-            </TextField.Root>
+        return (
+            <Flex direction="column" gap="1">
+                <TextField.Root
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                    disabled={isSubmitting}
+                    {...props}
+                >
+                    {isValidating &&
+                        <TextField.Slot side="right">
+                            <Spinner />
+                        </TextField.Slot>
+                    }
 
-            {Option.match(Array.head(issues), {
-                onSome: issue => (
-                    <Callout.Root>
-                        <Callout.Text>{issue.message}</Callout.Text>
-                    </Callout.Root>
-                ),
+                    {props.children}
+                </TextField.Root>
 
-                onNone: () => <></>,
-            })}
-        </Flex>
-    )
-}) {}
+                {Option.match(Array.head(issues), {
+                    onSome: issue => (
+                        <Callout.Root>
+                            <Callout.Text>{issue.message}</Callout.Text>
+                        </Callout.Root>
+                    ),
+
+                    onNone: () => <></>,
+                })}
+            </Flex>
+        )
+    }
+) {}

packages/example/src/lib/form/TextFieldFormOptionalInput.tsx

@@ -0,0 +1,57 @@
+import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
+import { Array, Option } from "effect"
+import { Component, Form, Hooks } from "effect-fc"
+
+
+export interface TextFieldFormOptionalInputProps
+extends Omit<TextField.RootProps, "defaultValue">, Form.useOptionalInput.Options<string> {
+    readonly field: Form.FormField<any, Option.Option<string>>
+}
+
+export class TextFieldFormOptionalInput extends Component.makeUntraced("TextFieldFormOptionalInput")(
+    function*(props: TextFieldFormOptionalInputProps) {
+        const { value, setValue, enabled, setEnabled } = yield* Form.useOptionalInput(props.field, props)
+        const [issues, isValidating, isSubmitting] = yield* Hooks.useSubscribables(
+            props.field.issuesSubscribable,
+            props.field.isValidatingSubscribable,
+            props.field.isSubmittingSubscribable,
+        )
+
+        return (
+            <Flex direction="column" gap="1">
+                <TextField.Root
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                    disabled={!enabled || isSubmitting}
+                    {...props}
+                >
+                    <TextField.Slot side="left">
+                        <Switch
+                            size="1"
+                            checked={enabled}
+                            onCheckedChange={setEnabled}
+                        />
+                    </TextField.Slot>
+
+                    {isValidating &&
+                        <TextField.Slot side="right">
+                            <Spinner />
+                        </TextField.Slot>
+                    }
+
+                    {props.children}
+                </TextField.Root>
+
+                {Option.match(Array.head(issues), {
+                    onSome: issue => (
+                        <Callout.Root>
+                            <Callout.Text>{issue.message}</Callout.Text>
+                        </Callout.Root>
+                    ),
+
+                    onNone: () => <></>,
+                })}
+            </Flex>
+        )
+    }
+) {}

packages/example/src/lib/input/TextFieldInput.tsx

@@ -29,12 +29,10 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
     ) = options.optional
         ? {
             optional: true,
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ...yield* useOptionalInput({ ...options, ...props as TextFieldOptionalInputProps<A, R> }),
         }
         : {
             optional: false,
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ...yield* useInput({ ...options, ...props as TextFieldInputProps<A, R> }),
         }
 

packages/example/src/routes/form.tsx

@@ -1,9 +1,9 @@
 import { Button, Container, Flex } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Effect, ParseResult, Schema } from "effect"
+import { Console, Effect, Option, ParseResult, Schema } from "effect"
 import { Component, Form, Hooks } from "effect-fc"
-import { useSubscribables } from "effect-fc/Hooks"
 import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
+import { TextFieldFormOptionalInput } from "@/lib/form/TextFieldFormOptionalInput"
 import { runtime } from "@/runtime"
 
 
@@ -20,22 +20,28 @@ const email = Schema.pattern<typeof Schema.String>(
 const RegisterFormSchema = Schema.Struct({
     email: Schema.String.pipe(email),
     password: Schema.String.pipe(Schema.minLength(3)),
+    iq: Schema.OptionFromSelf(Schema.NumberFromString),
 })
 
 class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
     scoped: Form.service({
-        schema: Schema.transformOrFail(
-            Schema.encodedSchema(RegisterFormSchema),
-            Schema.typeSchema(RegisterFormSchema),
-            {
-                decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
-                encode: ParseResult.succeed,
-            },
+        schema: RegisterFormSchema.pipe(
+            Schema.compose(
+                Schema.transformOrFail(
+                    Schema.typeSchema(RegisterFormSchema),
+                    Schema.typeSchema(RegisterFormSchema),
+                    {
+                        decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
+                        encode: ParseResult.succeed,
+                    },
+                ),
+            ),
         ),
-        initialEncodedValue: { email: "", password: "" },
-        submit: () => Effect.andThen(
-            Effect.sleep("500 millis"),
-            Effect.sync(() => alert("Done!")),
+
+        initialEncodedValue: { email: "", password: "", iq: Option.none() },
+        submit: v => Effect.sleep("500 millis").pipe(
+            Effect.andThen(Console.log(v)),
+            Effect.andThen(Effect.sync(() => alert("Done!"))),
         ),
     })
 }) {}
@@ -43,9 +49,10 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
 class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
     const form = yield* RegisterForm
     const submit = yield* Form.useSubmit(form)
-    const [canSubmit] = yield* useSubscribables(form.canSubmitSubscribable)
+    const [canSubmit] = yield* Hooks.useSubscribables(form.canSubmitSubscribable)
 
     const TextFieldFormInputFC = yield* TextFieldFormInput
+    const TextFieldFormOptionalInputFC = yield* TextFieldFormOptionalInput
 
     return (
         <Container width="300">
@@ -64,6 +71,11 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
                         debounce="200 millis"
                     />
 
+                    <TextFieldFormOptionalInputFC
+                        field={Form.useField(form, ["iq"])}
+                        defaultValue="100"
+                    />
+
                     <Button disabled={!canSubmit}>Submit</Button>
                 </Flex>
             </form>