@playfast/reform-forms-react 1.1.1 → 1.2.0

package/README.md

@@ -16,27 +16,33 @@ drift from it.
 ```tsx
 import { FormUi } from '@playfast/reform-forms-react'
 
-export const CheckoutUi = FormUi.make(CheckoutContract, CheckoutForm, ({ field, array, variant, form }) => (
-  <Screen>
-    {field('email').as(EmailInput, { label: 'Email' })}
-    {array('items', ({ items, append }) => (
-      <Stack>
-        {items.map((item) => (
-          <Row key={item.key}>
-            {item.field('name').as(TextInput)}
-            <IconButton onPress={item.remove} />
-          </Row>
-        ))}
-        <Button onPress={() => append()}>Add</Button>
-      </Stack>
-    ))}
-    {variant('payment', {
-      Card: ({ field }) => field('cardNumber').as(CardNumberInput),
-      Paypal: ({ field }) => field('email').as(EmailInput),
-    })}
-    <Button disabled={!form.canSubmit} onPress={form.submit}>Submit</Button>
-  </Screen>
-))
+export const CheckoutUi = FormUi.make(
+  CheckoutContract,
+  CheckoutForm,
+  ({ field, array, variant, form }) => (
+    <Screen>
+      {field('email').as(EmailInput, { label: 'Email' })}
+      {array('items', ({ items, append }) => (
+        <Stack>
+          {items.map((item) => (
+            <Row key={item.key}>
+              {item.field('name').as(TextInput)}
+              <IconButton onPress={item.remove} />
+            </Row>
+          ))}
+          <Button onPress={() => append()}>Add</Button>
+        </Stack>
+      ))}
+      {variant('payment', {
+        Card: ({ field }) => field('cardNumber').as(CardNumberInput),
+        Paypal: ({ field }) => field('email').as(EmailInput),
+      })}
+      <Button disabled={!form.canSubmit} onPress={form.submit}>
+        Submit
+      </Button>
+    </Screen>
+  ),
+)
 ```
 
 The render callback receives scoped helpers (`field` / `array` / `variant`), the underlying `form` view, and the

package/package.json

@@ -1,35 +1,37 @@
 {
   "name": "@playfast/reform-forms-react",
-  "playbook": "./playbook",
-  "version": "1.1.1",
-  "type": "module",
+  "version": "1.2.0",
   "description": "React bindings for @playfast/forms — render a typed reform form View with scoped field/array/variant helpers.",
   "keywords": [
-    "reform",
     "effect",
     "forms",
     "react",
+    "reform",
     "ui"
   ],
+  "bugs": {
+    "url": "https://github.com/playfast/reform/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/playfast/reform.git",
     "directory": "packages/forms-react"
   },
-  "bugs": {
-    "url": "https://github.com/playfast/reform/issues"
-  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "type": "module",
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     ".": "./src/index.tsx",
     "./*": "./src/*.tsx"
   },
-  "files": [
-    "src",
-    "README.md"
-  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "clean": "rm -rf dist .tsbuildinfo",
     "check": "tsc --noEmit",
@@ -41,12 +43,10 @@
     "lint:fix": "oxlint --fix src"
   },
   "peerDependencies": {
+    "@playfast/reform": "*",
     "@playfast/reform-forms": "*",
     "effect": "*",
-    "react": "^19.0.0",
-    "@playfast/reform": "*"
+    "react": "^19.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  }
+  "playbook": "./playbook"
 }

package/src/formUi.typecheck.tsx

@@ -26,35 +26,51 @@ class CheckoutUi extends ui('CheckoutTypecheckUi')<CheckoutContract>() {}
 const TextInput: FieldComponent<string> = () => null
 const NumberInput: FieldComponent<number> = () => null
 
-export const ok: ViewImpl<CheckoutContract> = FormUi.make(CheckoutUi, CheckoutForm, ({ field, array, variant }) => (
-  <>
-    {field('email').as(TextInput)}
-    {field('age').as(NumberInput)}
-    {array('items', ({ items: rows }) => (
-      <>{rows.map((row) => row.field('name').as(TextInput))}</>
-    ))}
-    {variant('payment', {
-      Card: ({ field }) => field('cardNumber').as(TextInput),
-      Paypal: ({ field }) => field('email').as(TextInput),
-    })}
-  </>
-))
-
-export const badPath: ViewImpl<CheckoutContract> = FormUi.make(CheckoutUi, CheckoutForm, ({ field }) => (
-  // @ts-expect-error unknown field path
-  <>{field('missing').as(TextInput)}</>
-))
-
-export const badComponent: ViewImpl<CheckoutContract> = FormUi.make(CheckoutUi, CheckoutForm, ({ field }) => (
-  // @ts-expect-error age is a number field, not a string field
-  <>{field('age').as(TextInput)}</>
-))
-
-export const badVariant: ViewImpl<CheckoutContract> = FormUi.make(CheckoutUi, CheckoutForm, ({ variant }) => (
-  <>
-    {/* @ts-expect-error Paypal is required for exhaustive variant mapping */}
-    {variant('payment', {
-      Card: ({ field }) => field('cardNumber').as(TextInput),
-    })}
-  </>
-))
+export const ok: ViewImpl<CheckoutContract> = FormUi.make(
+  CheckoutUi,
+  CheckoutForm,
+  ({ field, array, variant }) => (
+    <>
+      {field('email').as(TextInput)}
+      {field('age').as(NumberInput)}
+      {array('items', ({ items: rows }) => (
+        <>{rows.map((row) => row.field('name').as(TextInput))}</>
+      ))}
+      {variant('payment', {
+        Card: ({ field }) => field('cardNumber').as(TextInput),
+        Paypal: ({ field }) => field('email').as(TextInput),
+      })}
+    </>
+  ),
+)
+
+export const badPath: ViewImpl<CheckoutContract> = FormUi.make(
+  CheckoutUi,
+  CheckoutForm,
+  ({ field }) => (
+    // @ts-expect-error unknown field path
+    <>{field('missing').as(TextInput)}</>
+  ),
+)
+
+export const badComponent: ViewImpl<CheckoutContract> = FormUi.make(
+  CheckoutUi,
+  CheckoutForm,
+  ({ field }) => (
+    // @ts-expect-error age is a number field, not a string field
+    <>{field('age').as(TextInput)}</>
+  ),
+)
+
+export const badVariant: ViewImpl<CheckoutContract> = FormUi.make(
+  CheckoutUi,
+  CheckoutForm,
+  ({ variant }) => (
+    <>
+      {/* @ts-expect-error Paypal is required for exhaustive variant mapping */}
+      {variant('payment', {
+        Card: ({ field }) => field('cardNumber').as(TextInput),
+      })}
+    </>
+  ),
+)

package/src/index.tsx

@@ -1,7 +1,8 @@
 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 { Ui, type MadeView, type UiClass, type UiContract, type ViewImpl } from '@playfast/reform'
 import type {
+  ArrayBinding,
   ArrayItem,
   ArrayPath,
   FieldBinding,
@@ -17,7 +18,9 @@ import type {
 } from '@playfast/reform-forms'
 import { joinPath } from '@playfast/reform-forms'
 
-export type FieldComponent<A, P extends object = {}> = ComponentType<{ readonly field: FieldBinding<A> } & P>
+export type FieldComponent<A, P extends object = {}> = ComponentType<
+  { readonly field: FieldBinding<A> } & P
+>
 
 export interface FieldHandle<A> {
   as(component: FieldComponent<A>): ReactNode
@@ -45,7 +48,9 @@ type VariantCases<V> = {
 }
 
 export interface ScopeHelpers<ScopeValues> {
-  readonly field: <P extends FieldPath<ScopeValues>>(path: P) => FieldHandle<PathValue<ScopeValues, P>>
+  readonly field: <P extends FieldPath<ScopeValues>>(
+    path: P,
+  ) => FieldHandle<PathValue<ScopeValues, P>>
   readonly array: <P extends ArrayPath<ScopeValues>>(
     path: P,
     render: (args: ArrayRenderArgs<ArrayItem<ScopeValues, P>>) => ReactNode,
@@ -64,9 +69,7 @@ type ContractWithForm<F extends AnyForm> = UiContract & {
   readonly props: { readonly form: View<F> }
 }
 
-const makeFieldHandle = <A,>(
-  field: FieldBinding<A>,
-): FieldHandle<A> => ({
+const makeFieldHandle = <A,>(field: FieldBinding<A>): FieldHandle<A> => ({
   as: <P extends object>(component: FieldComponent<A, P>, props?: P): ReactNode =>
     createElement(
       component,
@@ -74,15 +77,22 @@ const makeFieldHandle = <A,>(
     ),
 })
 
+interface RuntimeFormView {
+  readonly field: <A>(path: string) => FieldBinding<A>
+  readonly array: <Item>(path: string) => ArrayBinding<Item>
+  readonly variantValue: <Variant>(path: string) => Variant
+}
+
 const makeScope = <ScopeValues,>(
-  form: View<AnyForm>,
+  form: RuntimeFormView,
   prefix: string,
 ): ScopeHelpers<ScopeValues> => {
   const full = (path: string): string => joinPath(prefix, path)
   return {
-    field: (path) => makeFieldHandle(form.field(full(String(path)))),
+    field: (path) =>
+      makeFieldHandle(form.field<PathValue<ScopeValues, typeof path>>(full(String(path)))),
     array: (path, render) => {
-      const binding = form.array(full(String(path)))
+      const binding = form.array<ArrayItem<ScopeValues, typeof path>>(full(String(path)))
       return render({
         append: binding.append,
         remove: binding.remove,
@@ -107,29 +117,29 @@ const makeScope = <ScopeValues,>(
         return null
       }
       const tag = String(current._tag)
-      const handlers = Fn.unsafeCoerce<typeof cases, Record<string, (scope: ScopeHelpers<unknown>) => ReactNode>>(cases)
+      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))
     },
   }
 }
 
-export const make = <
-  F extends AnyForm,
-  C extends ContractWithForm<F>,
->(
-  contract: UiClass<C>,
+export const make = <F extends AnyForm, C extends ContractWithForm<F>, N extends string>(
+  contract: UiClass<C, N>,
   _form: F,
   render: (
     helpers: RootHelpers<F> & { readonly props: C['props'] },
     slots: Parameters<ViewImpl<C>>[1],
     events: Parameters<ViewImpl<C>>[2],
   ) => ReactNode,
-): ViewImpl<C> =>
+): MadeView<C, N> =>
   Ui.make(contract, (props, slots, events) =>
     render(
       {
-        ...makeScope<Values<F>>(props.form, ''),
+        ...makeScope<Values<F>>(Fn.unsafeCoerce(props.form), ''),
         form: props.form,
         props,
       },