@playfast/reform-forms-react 0.0.10 → 0.1.0

package/README.md

@@ -46,7 +46,7 @@ contract `props`. `field(path).as(Component, props?)` returns a `ReactNode` whos
 Full API: [playbook/api.doc.md](./playbook/api.doc.md). Pairs with core
 [`@playfast/reform`](https://www.npmjs.com/package/@playfast/reform), form state
 [`@playfast/forms`](https://www.npmjs.com/package/@playfast/forms), and the React host
-[`@playfast/react`](https://www.npmjs.com/package/@playfast/react).
+[`@playfast/reform-react`](https://www.npmjs.com/package/@playfast/reform-react).
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@playfast/reform-forms-react",
   "playbook": "./playbook",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "type": "module",
   "description": "React bindings for @playfast/forms — render a typed reform form View with scoped field/array/variant helpers.",
   "keywords": [

package/src/formUi.typecheck.tsx

@@ -32,8 +32,8 @@ export const ok: ViewImpl<CheckoutContract> = FormUi.make(CheckoutUi, CheckoutFo
   <>
     {field('email').as(TextInput)}
     {field('age').as(NumberInput)}
-    {array('items', ({ items }) => (
-      <>{items.map((item) => item.field('name').as(TextInput))}</>
+    {array('items', ({ items: rows }) => (
+      <>{rows.map((row) => row.field('name').as(TextInput))}</>
     ))}
     {variant('payment', {
       Card: ({ field }) => field('cardNumber').as(TextInput),

package/src/index.tsx

@@ -1,4 +1,5 @@
 import { createElement, type ComponentType, type ReactNode } from 'react'
+import { Function as Fn } from 'effect'
 import { Ui, type UiClass, type UiContract, type ViewImpl } from '@playfast/reform'
 import type {
   ArrayItem,
@@ -67,7 +68,10 @@ const makeFieldHandle = <A,>(
   field: FieldBinding<A>,
 ): FieldHandle<A> => ({
   as: <P extends object>(component: FieldComponent<A, P>, props?: P): ReactNode =>
-    createElement(component, { ...(props ?? {}), field } as { readonly field: FieldBinding<A> } & P),
+    createElement(
+      component,
+      Fn.unsafeCoerce<object, { readonly field: FieldBinding<A> } & P>({ ...props, field }),
+    ),
 })
 
 const makeScope = <ScopeValues,>(
@@ -76,30 +80,35 @@ const makeScope = <ScopeValues,>(
 ): ScopeHelpers<ScopeValues> => {
   const full = (path: string): string => joinPath(prefix, path)
   return {
-    field: (path) => makeFieldHandle(form.field(full(path as string))),
+    field: (path) => makeFieldHandle(form.field(full(String(path)))),
     array: (path, render) => {
-      const binding = form.array(full(path as string))
+      const binding = form.array(full(String(path)))
       return render({
         append: binding.append,
         remove: binding.remove,
         move: binding.move,
         swap: binding.swap,
-        items: binding.items.map((item) => ({
-          ...makeScope(form, `${binding.path}[${item.index}]`),
-          key: item.key,
-          index: item.index,
-          value: item.value as ArrayItem<ScopeValues, typeof path>,
-          remove: item.remove,
-          move: item.move,
-        })) as ReadonlyArray<ArrayItemScope<ArrayItem<ScopeValues, typeof path>>>,
+        items: Fn.unsafeCoerce(
+          binding.items.map((element) => ({
+            ...makeScope(form, `${binding.path}[${element.index}]`),
+            key: element.key,
+            index: element.index,
+            value: element.value,
+            remove: element.remove,
+            move: element.move,
+          })),
+        ),
       })
     },
     variant: (path, cases) => {
-      const variantPath = full(path as string)
-      const value = form.variantValue(variantPath)
-      if (value === null || typeof value !== 'object' || !('_tag' in value)) return null
-      const tag = String((value as { readonly _tag: string })._tag)
-      const render = (cases as Record<string, (scope: ScopeHelpers<unknown>) => ReactNode>)[tag]
+      const variantPath = full(String(path))
+      const current = form.variantValue(variantPath)
+      if (current === null || typeof current !== 'object' || !('_tag' in current)) {
+        return null
+      }
+      const tag = String(current._tag)
+      const handlers = Fn.unsafeCoerce<typeof cases, Record<string, (scope: ScopeHelpers<unknown>) => ReactNode>>(cases)
+      const render = handlers[tag]
       return render === undefined ? null : render(makeScope(form, variantPath))
     },
   }