@playfast/reform-forms-react 0.0.7

package/README.md

@@ -0,0 +1,53 @@
+<div align="center">
+
+# `@playfast/forms-react`
+
+**Typed JSX mapping for [`@playfast/forms`](https://www.npmjs.com/package/@playfast/forms) — turn a form view into scoped field/array/variant helpers, no bundled widgets.**
+
+</div>
+
+---
+
+`FormUi.make` wires a [`@playfast/forms`](https://www.npmjs.com/package/@playfast/forms) view (provided in a
+[`@playfast/reform`](https://www.npmjs.com/package/@playfast/reform) contract's `form` prop) to your own React
+components. It owns no state and ships no DOM widgets — it maps the typed schema to JSX so your layout cannot
+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>
+))
+```
+
+The render callback receives scoped helpers (`field` / `array` / `variant`), the underlying `form` view, and the
+contract `props`. `field(path).as(Component, props?)` returns a `ReactNode` whose component gets a typed
+`field: FieldBinding<A>` prop. `array` and `variant` scopes expose the same helpers relative to that scope.
+
+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).
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+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

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

package/dist/index.js

@@ -0,0 +1,45 @@
+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

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

package/package.json

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