Example work

bun.lock

@@ -36,6 +36,7 @@
         "effect-fc": "workspace:*",
         "lucide-react": "^0.510.0",
         "mobx": "^6.13.7",
+        "react-icons": "^5.5.0",
       },
       "devDependencies": {
         "@effect/language-service": "^0.23.4",
@@ -725,6 +726,8 @@
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
+    "react-icons": ["react-icons@5.5.0", "", { "peerDependencies": { "react": "*" } }, "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw=="],
+
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.1", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA=="],

packages/example/package.json

@@ -37,9 +37,10 @@
     "@typed/id": "^0.17.2",
     "@typed/lazy-ref": "^0.3.3",
     "effect": "^3.15.1",
+    "effect-fc": "workspace:*",
     "lucide-react": "^0.510.0",
     "mobx": "^6.13.7",
-    "effect-fc": "workspace:*"
+    "react-icons": "^5.5.0"
   },
   "overrides": {
     "effect": "^3.15.1",

packages/example/src/todo/Todo.tsx

@@ -1,63 +1,15 @@
 import * as Domain from "@/domain"
-import { Button, Flex, TextArea } from "@radix-ui/themes"
+import { Box, Button, Flex, IconButton, TextArea } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
 import { Component, Hook } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
+import { FaArrowDown, FaArrowUp } from "react-icons/fa"
+import { FaDeleteLeft } from "react-icons/fa6"
 import { TodosState } from "./TodosState.service"
 
 
-export type TodoProps = (
-    | {
-        readonly _tag: "new"
-        readonly ref?: never
-    }
-    | {
-        readonly _tag: "edit"
-        readonly ref: SubscriptionRef.SubscriptionRef<Domain.Todo.Todo>
-    }
-)
-
-export const Todo = Component.make(function* Todo(props: TodoProps) {
-    const runtime = yield* Effect.runtime()
-    const state = yield* TodosState
-
-    const ref = yield* Hook.useMemo(() => Match.value(props).pipe(
-        Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
-        Match.tag("edit", ({ ref }) => Effect.succeed(ref)),
-        Match.exhaustive,
-    ), [props._tag, props.ref])
-
-    const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
-    const [todo] = yield* Hook.useSubscribeRefs(ref)
-
-    return (
-        <Flex direction="column" align="stretch" gap="2">
-            <TextArea
-                value={todo.content}
-                onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
-            />
-
-            {props._tag === "new" &&
-                <Flex direction="row" justify="center">
-                    <Button
-                        onClick={() => ref.pipe(
-                            Effect.andThen(todo => Ref.update(state.ref, Chunk.append(todo))),
-                            Effect.andThen(makeTodo),
-                            Effect.andThen(todo => Ref.set(ref, todo)),
-                            Runtime.runSync(runtime),
-                        )}
-                    >
-                        Ajouter
-                    </Button>
-                </Flex>
-            }
-        </Flex>
-    )
-})
-
-
 const makeTodo = makeUuid4.pipe(
     Effect.map(id => Domain.Todo.Todo.make({
         id,
@@ -66,3 +18,82 @@ const makeTodo = makeUuid4.pipe(
     })),
     Effect.provide(GetRandomValues.CryptoRandom),
 )
+
+
+export type TodoProps = (
+    | {
+        readonly _tag: "new"
+        readonly index?: never
+    }
+    | {
+        readonly _tag: "edit"
+        readonly index: number
+    }
+)
+
+export const Todo = Component.make(function* Todo(props: TodoProps) {
+    const runtime = yield* Effect.runtime()
+    const state = yield* TodosState
+
+    const ref = yield* Hook.useMemo(() => Match.value(props).pipe(
+        Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
+        Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromGetSet(state.ref, {
+            get: parent => Chunk.unsafeGet(parent, index),
+            set: (parent, v) => Chunk.replace(parent, index, v),
+        }))),
+        Match.exhaustive,
+    ), [props._tag, props.index])
+
+    const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
+    const [todo] = yield* Hook.useSubscribeRefs(ref)
+
+    return (
+        <Flex direction="column" align="stretch" gap="2">
+            <Flex direction="row" align="center" gap="2">
+                <Box flexGrow="1">
+                    <TextArea
+                        value={todo.content}
+                        onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
+                    />
+                </Box>
+
+                {props._tag === "edit" &&
+                    <Flex direction="column" justify="center" align="center" gap="1">
+                        <IconButton
+                        >
+                            <FaArrowUp />
+                        </IconButton>
+
+                        <IconButton
+                        >
+                            <FaArrowDown />
+                        </IconButton>
+
+                        <IconButton
+                            onClick={() => Runtime.runSync(runtime)(
+                                Ref.update(state.ref, Chunk.remove(props.index))
+                            )}
+                        >
+                            <FaDeleteLeft />
+                        </IconButton>
+                    </Flex>
+                }
+            </Flex>
+
+            {props._tag === "new" &&
+                <Flex direction="row" justify="center">
+                    <Button
+                        onClick={() => ref.pipe(
+                            Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))),
+                            Effect.andThen(makeTodo),
+                            Effect.andThen(todo => Ref.set(ref, todo)),
+                            Runtime.runSync(runtime),
+                        )}
+                    >
+                        Add
+                    </Button>
+                </Flex>
+            }
+        </Flex>
+    )
+})

packages/example/src/todo/Todos.tsx

@@ -1,8 +1,6 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk } from "effect"
 import { Component, Hook } from "effect-fc"
-import { SubscriptionSubRef } from "effect-fc/types"
-import * as React from "react"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
@@ -11,7 +9,6 @@ export const Todos = Component.make(function* Todos() {
     const state = yield* TodosState
     const [todos] = yield* Hook.useSubscribeRefs(state.ref)
 
-    const VTodosItem = yield* Component.useFC(TodosItem)
     const VTodo = yield* Component.useFC(Todo)
 
     return (
@@ -22,26 +19,9 @@ export const Todos = Component.make(function* Todos() {
                 <VTodo _tag="new" />
 
                 {Chunk.map(todos, (v, k) =>
-                    <VTodosItem key={v.id} index={k} />
+                    <VTodo key={v.id} _tag="edit" index={k} />
                 )}
             </Flex>
         </Container>
     )
 })
-
-
-interface TodosItemProps {
-    readonly index: number
-}
-
-const TodosItem = Component.make(function* TodosItem(props: TodosItemProps) {
-    const state = yield* TodosState
-    const ref = React.useMemo(() => SubscriptionSubRef.makeFromGetSet(state.ref, {
-        get: parent => Chunk.unsafeGet(parent, props.index),
-        set: (parent, v) => Chunk.replace(parent, props.index, v),
-    }), [props.index, state.ref])
-
-    return yield* Component.use(Todo, Todo =>
-        <Todo _tag="edit" ref={ref} />
-    )
-})