Input tests

packages/example/src/lib/TextAreaInput.tsx

@@ -0,0 +1,45 @@
+import { Callout, Flex, TextArea, TextAreaProps } from "@radix-ui/themes"
+import { Option, ParseResult, Schema, Struct } from "effect"
+import { Component } from "effect-fc"
+import { useInput } from "effect-fc/hooks"
+import * as React from "react"
+
+
+export interface TextAreaInputProps<A, R>
+extends
+    Omit<useInput.Options<A, R>, "schema">,
+    Omit<TextAreaProps, "ref">
+{}
+
+export const TextAreaInput = <A, R>(
+    schema: Schema.Schema<A, string, R>
+): Component.Component<
+    TextAreaInputProps<A, R>,
+    React.JSX.Element,
+    ParseResult.ParseError,
+    R
+> => Component.makeUntraced(function* TextFieldInput(props) {
+    const input = yield* useInput({ schema, ...props })
+    const issues = React.useMemo(() => Option.map(
+        input.error,
+        ParseResult.ArrayFormatter.formatErrorSync,
+    ), [input.error])
+
+    return (
+        <Flex direction="column" gap="1">
+            {Option.isSome(issues) &&
+                <Callout.Root color="red" role="alert">
+                    <Callout.Text>
+                        <ul>{issues.value.map((issue, i) => <li key={i}>{issue.message}</li>)}</ul>
+                    </Callout.Text>
+                </Callout.Root>
+            }
+
+            <TextArea
+                value={input.value}
+                onChange={input.onChange}
+                {...Struct.omit(props, "ref")}
+            />
+        </Flex>
+    )
+})