0.2.0 (#18)

Co-authored-by: Renovate Bot <renovate-bot@valverde.cloud>
Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: #18

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

@@ -1,6 +1,6 @@
 import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
 import { Array, Option, Struct } from "effect"
-import { Component, Form, Hooks } from "effect-fc"
+import { Component, Form, Subscribable } from "effect-fc"
 
 
 interface Props
@@ -18,60 +18,58 @@ extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptional
 export type TextFieldFormInputProps = Props | OptionalProps
 
 
-export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(
-    function*(props: TextFieldFormInputProps) {
-        const input: (
-            | { readonly optional: true } & Form.useOptionalInput.Result<string>
-            | { readonly optional: false } & Form.useInput.Result<string>
-        ) = props.optional
-            // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
-            ? { optional: true, ...yield* Form.useOptionalInput(props.field, props) }
-            // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
-            : { optional: false, ...yield* Form.useInput(props.field, props) }
+export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
+    const input: (
+        | { readonly optional: true } & Form.useOptionalInput.Result<string>
+        | { readonly optional: false } & Form.useInput.Result<string>
+    ) = props.optional
+        // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
+        ? { optional: true, ...yield* Form.useOptionalInput(props.field, props) }
+        // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
+        : { optional: false, ...yield* Form.useInput(props.field, props) }
 
-        const [issues, isValidating, isSubmitting] = yield* Hooks.useSubscribables(
-            props.field.issuesSubscribable,
-            props.field.isValidatingSubscribable,
-            props.field.isSubmittingSubscribable,
-        )
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables(
+        props.field.issuesSubscribable,
+        props.field.isValidatingSubscribable,
+        props.field.isSubmittingSubscribable,
+    )
 
-        return (
-            <Flex direction="column" gap="1">
-                <TextField.Root
-                    value={input.value}
-                    onChange={e => input.setValue(e.target.value)}
-                    disabled={(input.optional && !input.enabled) || isSubmitting}
-                    {...Struct.omit(props, "optional", "defaultValue")}
-                >
-                    {input.optional &&
-                        <TextField.Slot side="left">
-                            <Switch
-                                size="1"
-                                checked={input.enabled}
-                                onCheckedChange={input.setEnabled}
-                            />
-                        </TextField.Slot>
-                    }
+    return (
+        <Flex direction="column" gap="1">
+            <TextField.Root
+                value={input.value}
+                onChange={e => input.setValue(e.target.value)}
+                disabled={(input.optional && !input.enabled) || isSubmitting}
+                {...Struct.omit(props, "optional", "defaultValue")}
+            >
+                {input.optional &&
+                    <TextField.Slot side="left">
+                        <Switch
+                            size="1"
+                            checked={input.enabled}
+                            onCheckedChange={input.setEnabled}
+                        />
+                    </TextField.Slot>
+                }
 
-                    {isValidating &&
-                        <TextField.Slot side="right">
-                            <Spinner />
-                        </TextField.Slot>
-                    }
+                {isValidating &&
+                    <TextField.Slot side="right">
+                        <Spinner />
+                    </TextField.Slot>
+                }
 
-                    {props.children}
-                </TextField.Root>
+                {props.children}
+            </TextField.Root>
 
-                {Option.match(Array.head(issues), {
-                    onSome: issue => (
-                        <Callout.Root>
-                            <Callout.Text>{issue.message}</Callout.Text>
-                        </Callout.Root>
-                    ),
+            {Option.match(Array.head(issues), {
+                onSome: issue => (
+                    <Callout.Root>
+                        <Callout.Text>{issue.message}</Callout.Text>
+                    </Callout.Root>
+                ),
 
-                    onNone: () => <></>,
-                })}
-            </Flex>
-        )
-    }
-) {}
+                onNone: () => <></>,
+            })}
+        </Flex>
+    )
+}) {}

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

@@ -1,41 +0,0 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: effect-fc HOC */
-import { Callout, Flex, TextArea, type TextAreaProps } from "@radix-ui/themes"
-import { Array, type Equivalence, Option, ParseResult, type Schema, Struct } from "effect"
-import { Component } from "effect-fc"
-import { useInput } from "effect-fc/Hooks"
-import * as React from "react"
-
-
-export type TextAreaInputProps<A, R> = Omit<useInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextAreaProps, "ref">
-
-export const TextAreaInput = <A, R>(options: {
-    readonly schema: Schema.Schema<A, string, R>
-    readonly equivalence?: Equivalence.Equivalence<A>
-}): Component.Component<
-    TextAreaInputProps<A, R>,
-    React.JSX.Element,
-    ParseResult.ParseError,
-    R
-> => Component.makeUntraced("TextFieldInput")(function*(props) {
-    const input = yield* useInput({ ...options, ...props })
-    const issue = React.useMemo(() => input.error.pipe(
-        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
-        Option.flatMap(Array.head),
-    ), [input.error])
-
-    return (
-        <Flex direction="column" gap="1">
-            <TextArea
-                value={input.value}
-                onChange={e => input.setValue(e.target.value)}
-                {...Struct.omit(props, "ref")}
-            />
-
-            {Option.isSome(issue) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>{issue.value.message}</Callout.Text>
-                </Callout.Root>
-            }
-        </Flex>
-    )
-})

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

@@ -1,69 +0,0 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: effect-fc HOC */
-import { Callout, Checkbox, Flex, TextField } from "@radix-ui/themes"
-import { Array, type Equivalence, Option, ParseResult, type Schema, Struct } from "effect"
-import { Component } from "effect-fc"
-import { useInput, useOptionalInput } from "effect-fc/Hooks"
-import * as React from "react"
-
-
-export type TextFieldInputProps<A, R> = (
-    & Omit<useInput.Options<A, R>, "schema" | "equivalence">
-    & Omit<TextField.RootProps, "ref">
-)
-export type TextFieldOptionalInputProps<A, R> = (
-    & Omit<useOptionalInput.Options<A, R>, "schema" | "equivalence">
-    & Omit<TextField.RootProps, "ref" | "defaultValue">
-)
-
-export const TextFieldInput = <A, R, O extends boolean = false>(options: {
-    readonly optional?: O
-    readonly schema: Schema.Schema<A, string, R>
-    readonly equivalence?: Equivalence.Equivalence<A>
-}) => Component.makeUntraced("TextFieldInput")(function*(props: O extends true
-    ? TextFieldOptionalInputProps<A, R>
-    : TextFieldInputProps<A, R>
-) {
-    const input: (
-        | { readonly optional: true } & useOptionalInput.Result
-        | { readonly optional: false } & useInput.Result
-    ) = options.optional
-        ? {
-            optional: true,
-            ...yield* useOptionalInput({ ...options, ...props as TextFieldOptionalInputProps<A, R> }),
-        }
-        : {
-            optional: false,
-            ...yield* useInput({ ...options, ...props as TextFieldInputProps<A, R> }),
-        }
-
-    const issue = React.useMemo(() => input.error.pipe(
-        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
-        Option.flatMap(Array.head),
-    ), [input.error])
-
-    return (
-        <Flex direction="column" gap="1">
-            <Flex direction="row" align="center" gap="1">
-                {input.optional &&
-                    <Checkbox
-                        checked={input.enabled}
-                        onCheckedChange={checked => input.setEnabled(checked !== "indeterminate" && checked)}
-                    />
-                }
-
-                <TextField.Root
-                    value={input.value}
-                    onChange={e => input.setValue(e.target.value)}
-                    disabled={input.optional ? !input.enabled : undefined}
-                    {...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref", "defaultValue")}
-                />
-            </Flex>
-
-            {(!(input.optional && !input.enabled) && Option.isSome(issue)) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>{issue.value.message}</Callout.Text>
-                </Callout.Root>
-            }
-        </Flex>
-    )
-})