@playfast/reform-forms-react 0.0.7 → 0.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@playfast/reform-forms-react",
   "playbook": "./playbook",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "description": "React bindings for @playfast/forms — render a typed reform form View with scoped field/array/variant helpers.",
   "keywords": [
@@ -27,7 +27,7 @@
     "./*": "./src/*.tsx"
   },
   "files": [
-    "dist",
+    "src",
     "README.md"
   ],
   "scripts": {

package/src/formUi.typecheck.tsx

@@ -0,0 +1,62 @@
+// Type-level checks enforced by `tsc --noEmit`.
+
+import { Schema as S } from 'effect'
+import { ui, type ViewImpl, type UiContract } from '@playfast/reform'
+import { Form } from '@playfast/reform-forms'
+import { FormUi, type FieldComponent } from './index'
+
+const Payment = S.Union(
+  S.TaggedStruct('Card', { cardNumber: S.String }),
+  S.TaggedStruct('Paypal', { email: S.String }),
+)
+
+const CheckoutSchema = S.Struct({
+  email: S.String,
+  age: S.Number,
+  items: S.Array(S.Struct({ name: S.String })),
+  payment: Payment,
+})
+
+class CheckoutForm extends Form.make('CheckoutTypecheckForm', { schema: CheckoutSchema }) {}
+
+interface CheckoutContract extends UiContract {
+  readonly props: { readonly form: Form.View<typeof CheckoutForm> }
+}
+
+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 }) => (
+      <>{items.map((item) => item.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

@@ -0,0 +1,132 @@
+import { createElement, type ComponentType, type ReactNode } from 'react'
+import { Ui, type UiClass, type UiContract, type ViewImpl } from '@playfast/reform'
+import type {
+  ArrayItem,
+  ArrayPath,
+  FieldBinding,
+  FieldPath,
+  PathValue,
+  Values,
+  VariantBody,
+  VariantPath,
+  VariantTag,
+  VariantValue,
+  View,
+  AnyForm,
+} from '@playfast/reform-forms'
+import { joinPath } from '@playfast/reform-forms'
+
+export type FieldComponent<A, P extends object = {}> = ComponentType<{ readonly field: FieldBinding<A> } & P>
+
+export interface FieldHandle<A> {
+  as(component: FieldComponent<A>): ReactNode
+  as<P extends object>(component: FieldComponent<A, P>, props: P): ReactNode
+}
+
+export interface ArrayItemScope<Item> extends ScopeHelpers<Item> {
+  readonly key: string
+  readonly index: number
+  readonly value: Item
+  readonly remove: () => void
+  readonly move: (to: number) => void
+}
+
+export interface ArrayRenderArgs<Item> {
+  readonly items: ReadonlyArray<ArrayItemScope<Item>>
+  readonly append: (value?: Item) => void
+  readonly remove: (index: number) => void
+  readonly move: (from: number, to: number) => void
+  readonly swap: (a: number, b: number) => void
+}
+
+type VariantCases<V> = {
+  readonly [Tag in VariantTag<V>]: (scope: ScopeHelpers<VariantBody<V, Tag>>) => ReactNode
+}
+
+export interface ScopeHelpers<ScopeValues> {
+  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,
+  ) => ReactNode
+  readonly variant: <P extends VariantPath<ScopeValues>>(
+    path: P,
+    cases: VariantCases<VariantValue<ScopeValues, P>>,
+  ) => ReactNode
+}
+
+export interface RootHelpers<F extends AnyForm> extends ScopeHelpers<Values<F>> {
+  readonly form: View<F>
+}
+
+type ContractWithForm<F extends AnyForm> = UiContract & {
+  readonly props: { readonly form: View<F> }
+}
+
+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),
+})
+
+const makeScope = <ScopeValues,>(
+  form: View<any>,
+  prefix: string,
+): ScopeHelpers<ScopeValues> => {
+  const full = (path: string): string => joinPath(prefix, path)
+  return {
+    field: (path) => makeFieldHandle(form.field(full(path as string))),
+    array: (path, render) => {
+      const binding = form.array(full(path as string))
+      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>>>,
+      })
+    },
+    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]
+      return render === undefined ? null : render(makeScope(form, variantPath))
+    },
+  }
+}
+
+export const make = <
+  F extends AnyForm,
+  C extends ContractWithForm<F>,
+>(
+  contract: UiClass<C>,
+  _form: F,
+  render: (
+    helpers: RootHelpers<F> & { readonly props: C['props'] },
+    slots: Parameters<ViewImpl<C>>[1],
+    events: Parameters<ViewImpl<C>>[2],
+  ) => ReactNode,
+): ViewImpl<C> =>
+  Ui.make(contract, (props, slots, events) =>
+    render(
+      {
+        ...makeScope<Values<F>>(props.form, ''),
+        form: props.form,
+        props,
+      },
+      slots,
+      events,
+    ),
+  )
+
+export const FormUi: { readonly make: typeof make } = { make }

package/dist/index.d.ts

@@ -1,48 +0,0 @@
-import { type ComponentType, type ReactNode } from 'react';
-import { type UiClass, type UiContract, type ViewImpl } from '@playfast/reform';
-import type { ArrayItem, ArrayPath, FieldBinding, FieldPath, PathValue, Values, VariantBody, VariantPath, VariantTag, VariantValue, View, AnyForm } from '@playfast/reform-forms';
-export type FieldComponent<A, P extends object = {}> = ComponentType<{
-    readonly field: FieldBinding<A>;
-} & P>;
-export interface FieldHandle<A> {
-    as(component: FieldComponent<A>): ReactNode;
-    as<P extends object>(component: FieldComponent<A, P>, props: P): ReactNode;
-}
-export interface ArrayItemScope<Item> extends ScopeHelpers<Item> {
-    readonly key: string;
-    readonly index: number;
-    readonly value: Item;
-    readonly remove: () => void;
-    readonly move: (to: number) => void;
-}
-export interface ArrayRenderArgs<Item> {
-    readonly items: ReadonlyArray<ArrayItemScope<Item>>;
-    readonly append: (value?: Item) => void;
-    readonly remove: (index: number) => void;
-    readonly move: (from: number, to: number) => void;
-    readonly swap: (a: number, b: number) => void;
-}
-type VariantCases<V> = {
-    readonly [Tag in VariantTag<V>]: (scope: ScopeHelpers<VariantBody<V, Tag>>) => ReactNode;
-};
-export interface ScopeHelpers<ScopeValues> {
-    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) => ReactNode;
-    readonly variant: <P extends VariantPath<ScopeValues>>(path: P, cases: VariantCases<VariantValue<ScopeValues, P>>) => ReactNode;
-}
-export interface RootHelpers<F extends AnyForm> extends ScopeHelpers<Values<F>> {
-    readonly form: View<F>;
-}
-type ContractWithForm<F extends AnyForm> = UiContract & {
-    readonly props: {
-        readonly form: View<F>;
-    };
-};
-export declare const make: <F extends AnyForm, C extends ContractWithForm<F>>(contract: UiClass<C>, _form: F, render: (helpers: RootHelpers<F> & {
-    readonly props: C["props"];
-}, slots: Parameters<ViewImpl<C>>[1], events: Parameters<ViewImpl<C>>[2]) => ReactNode) => ViewImpl<C>;
-export declare const FormUi: {
-    readonly make: typeof make;
-};
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,45 +0,0 @@
-import { createElement } from 'react';
-import { Ui } from '@playfast/reform';
-import { joinPath } from '@playfast/reform-forms';
-const makeFieldHandle = (field) => ({
-    as: (component, props) => createElement(component, { ...(props ?? {}), field }),
-});
-const makeScope = (form, prefix) => {
-    const full = (path) => joinPath(prefix, path);
-    return {
-        field: (path) => makeFieldHandle(form.field(full(path))),
-        array: (path, render) => {
-            const binding = form.array(full(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,
-                    remove: item.remove,
-                    move: item.move,
-                })),
-            });
-        },
-        variant: (path, cases) => {
-            const variantPath = full(path);
-            const value = form.variantValue(variantPath);
-            if (value === null || typeof value !== 'object' || !('_tag' in value))
-                return null;
-            const tag = String(value._tag);
-            const render = cases[tag];
-            return render === undefined ? null : render(makeScope(form, variantPath));
-        },
-    };
-};
-export const make = (contract, _form, render) => Ui.make(contract, (props, slots, events) => render({
-    ...makeScope(props.form, ''),
-    form: props.form,
-    props,
-}, slots, events));
-export const FormUi = { make };
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}