Thilawyn/effect-fc
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor Hooks
All checks were successful
Lint / lint (push) Successful in 41s
Details

Browse Source
This commit is contained in:
Julien Valverdé
2025-10-21 06:16:54 +02:00
parent 1f14e8be6b
commit 3695128923
11 changed files with 324 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/example/src/lib/input/TextAreaInput.tsx
View File

@@ -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>
)
})

69
packages/example/src/lib/input/TextFieldInput.tsx
View File

@@ -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>
)
})