@whatsaaaa/form-builder-react 0.0.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Whatsaaaa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,260 @@
+# @whatsaaaa/form-builder-react
+
+[![npm](https://img.shields.io/npm/v/@whatsaaaa/form-builder-react)](https://www.npmjs.com/package/@whatsaaaa/form-builder-react)
+
+Render JSON form definitions with [Formisch](https://formisch.dev) and your own React components.
+
+It's headless: it reads the definition, connects every field to Formisch and turns input into the values the schema expects, but it renders nothing of its own. You give it a component per field type, so it works with plain HTML, shadcn/ui or any other UI library.
+
+## Install
+
+```sh
+pnpm add @whatsaaaa/form-builder-react @formisch/react valibot
+```
+
+React 18 or 19, `@formisch/react` 1.2 and Valibot 1.4.1 or later are required. `@whatsaaaa/form-builder-schema` comes with it.
+
+## Usage
+
+```tsx
+import { Form } from '@formisch/react'
+import type { JsonForm } from '@whatsaaaa/form-builder-schema'
+import { JsonFields, useJsonForm } from '@whatsaaaa/form-builder-react'
+import { components } from './fields'
+
+export function DefinitionForm({ definition }: { definition: JsonForm }) {
+  const jsonForm = useJsonForm(definition, { components })
+
+  function save(output: unknown) {
+    // The output of the schema: trimmed, numbers as numbers, empty optional fields left out.
+  }
+
+  return (
+    <Form of={jsonForm.form} onSubmit={save}>
+      <JsonFields of={jsonForm} />
+      <button type="submit">Save</button>
+    </Form>
+  )
+}
+```
+
+- `useJsonForm(definition, options?)` builds the schema and the initial input, and creates the Formisch form. `jsonForm.form` is a normal Formisch form, so every Formisch method works on it.
+- `<JsonFields>` renders the fields inside your `<Form>`. The form element, the submit button and anything around them are yours.
+- A definition with issues throws the builder's `DefinitionError` while rendering, so an error boundary can catch it. Run `validate()` first when the definition comes from outside your code.
+- Like Formisch's `useForm`, `useJsonForm` reads the definition on the first render. To show another one, give the component that calls `useJsonForm` a new `key`: `<DefinitionForm key={id} definition={definition} />`.
+
+### Options
+
+```ts
+useJsonForm(definition, {
+  builder: createSchemaBuilder({ fieldTypes: { money } }), // your own types, rules and messages
+  components, // your component per field type, see below
+  validate: 'blur', // when a field is validated the first time, as in Formisch
+  revalidate: 'input', // when it is validated again
+})
+```
+
+`builder`, `validate` and `revalidate` are read on the first render, with the definition. `components` is read on every render.
+
+## Components
+
+`components` has one component per field type, by type name. Pass it to `useJsonForm`, or to `<JsonFields>` and `<JsonField>` as a prop, which wins. Several types can share one:
+
+```ts
+import type { FieldComponents } from '@whatsaaaa/form-builder-react'
+
+export const components: FieldComponents = {
+  text: TextInput,
+  email: TextInput,
+  number: TextInput,
+  select: SelectInput,
+  group: Fieldset,
+  array: Repeater,
+  heading: Heading,
+  // …one for every type your definitions use
+}
+```
+
+A type that a definition uses but `components` doesn't have throws a `TypeError` that names every missing type, when `<JsonFields>` or `<JsonField>` renders. Only the fields it renders count.
+
+What a component gets depends on the field's role:
+
+| Role    | Which fields                   | Props                                                                            |
+| ------- | ------------------------------ | -------------------------------------------------------------------------------- |
+| value   | every field with a value       | `field`, `path`, `kind`, `required`, `input`, `errors`, `inputProps`, `setInput` |
+| group   | a container of kind `object`   | `field`, `path`, `children`: the group's fields                                  |
+| array   | a container of kind `array`    | `field`, `path`, `items`, `errors`, `add`, `remove`, `move`, `children(index)`   |
+| display | a display element, kind `none` | `field`                                                                          |
+
+The props are typed as `ValueFieldProps`, `GroupFieldProps`, `ArrayFieldProps` and `DisplayFieldProps`.
+
+Your own container types render through the group or array role too, by their kind.
+
+### A value field
+
+```tsx
+import type { ValueFieldProps } from '@whatsaaaa/form-builder-react'
+
+export function TextInput({ field, kind, input, errors, inputProps, ...props }: ValueFieldProps) {
+  return (
+    <label>
+      {field.label}
+      <input
+        {...inputProps}
+        type={kind === 'number' ? 'number' : 'text'}
+        value={String(input ?? '')}
+        required={props.required}
+        onChange={(e) => props.setInput(e.target.value)}
+      />
+      {errors && <small>{errors[0]}</small>}
+    </label>
+  )
+}
+```
+
+- `field` is the field from the definition, with its `label`, `placeholder`, `options` and `ui`.
+- `path` is its Formisch path with real indexes, like `['lines', 0, 'quantity']`.
+- `inputProps` are Formisch's element props: the field's name, a ref, and focus, change and blur handlers. Spread them on the input element, so Formisch knows when the field is touched and can focus it after a failed submit. Your own `onChange` after the spread replaces Formisch's, and calls `setInput` instead.
+- `required` is true when the definition makes the field required.
+
+### setInput
+
+`setInput` sets the field's input after turning what an input element gives into what the schema expects, by the field's kind:
+
+| Kind                | Input                   | Value set                      |
+| ------------------- | ----------------------- | ------------------------------ |
+| `number`            | `''` or only spaces     | `undefined`                    |
+| `number`            | a numeric string, `'5'` | `5`                            |
+| `file`              | a `FileList`            | its first file, or `undefined` |
+| `array` of `file`   | a `FileList`            | an array of its files          |
+| `array` of `number` | numeric strings         | numbers                        |
+
+Anything else is set as it is, and the schema reports it. For a choice, like a radio or a select, set the option's value from `field.options` rather than the element's value: that keeps `2` a number and `true` a boolean.
+
+```tsx
+const options = field.options as { value: string | number | boolean; label: string }[]
+
+<select
+  {...inputProps}
+  value={options.findIndex((option) => option.value === input)}
+  onChange={(e) => setInput(options[Number(e.target.value)]?.value)}
+>
+  <option value={-1}>Choose…</option>
+  {options.map((option, i) => (
+    <option key={i} value={i}>
+      {option.label}
+    </option>
+  ))}
+</select>
+```
+
+For a file input, pass the element's `files` with `onChange={(e) => setInput(e.target.files)}`, and never set its `value`.
+
+`setInput` stays the same function while the field is the same, so it is safe in an effect's or a memo's dependencies.
+
+### A group
+
+```tsx
+import type { GroupFieldProps } from '@whatsaaaa/form-builder-react'
+
+export function Fieldset({ field, children }: GroupFieldProps) {
+  return (
+    <fieldset>
+      <legend>{field.label}</legend>
+      {children}
+    </fieldset>
+  )
+}
+```
+
+### An array
+
+```tsx
+import type { ArrayFieldProps } from '@whatsaaaa/form-builder-react'
+
+export function Repeater({ field, items, errors, add, remove, children }: ArrayFieldProps) {
+  return (
+    <fieldset>
+      <legend>{field.label}</legend>
+      {items.map((item, index) => (
+        <div key={item}>
+          {children(index)}
+          <button type="button" onClick={() => remove(index)}>
+            Remove
+          </button>
+        </div>
+      ))}
+      <button type="button" onClick={add}>
+        Add
+      </button>
+      {errors && <small>{errors[0]}</small>}
+    </fieldset>
+  )
+}
+```
+
+- `children(index)` renders the fields of the item at `index`.
+- `items` has one id per item. Use it as the `key`, so each item keeps its inputs when one is removed or moved.
+- `add()` adds an item at the end, with the defaults its fields have in the definition.
+- `errors` are the array's own messages, like a required array's or `maxLength`'s. Its items' fields show their own.
+
+### A display element
+
+```tsx
+import type { DisplayFieldProps } from '@whatsaaaa/form-builder-react'
+
+export function Heading({ field }: DisplayFieldProps) {
+  return <h2>{String(field.text ?? '')}</h2>
+}
+```
+
+## Placing fields yourself
+
+`<JsonFields>` renders every field in the order of the definition. To put some of them somewhere else, place them with `<JsonField>` and leave them out of `<JsonFields>` with `except`:
+
+```tsx
+<Form of={jsonForm.form} onSubmit={save}>
+  <main>
+    <JsonFields of={jsonForm} except={['coupon', 'acceptTerms']} />
+  </main>
+  <aside>
+    <JsonField of={jsonForm} path="coupon" />
+    <JsonField of={jsonForm} path="acceptTerms" />
+    <button type="submit">Place order</button>
+  </aside>
+</Form>
+```
+
+- A path is the field's names joined with dots: `'email'`, or `'address.city'` for a field of a group. A placed field validates, focuses and submits like any other, because it is still part of the one Formisch form.
+- A group or an array comes with all its fields. A field of an array's items can't be placed on its own, because it has no index outside its item, so place the array. To leave such a field out of every item, use `'*'` for the index: `except={['lines.*.note']}`.
+- `only` renders just the fields it names, in the order of the definition: `<JsonFields of={jsonForm} only={['name', 'email']} />`. Display elements have no name, so `only` leaves them out.
+- A path that names no field throws a `TypeError`, so a typo shows up at once. `only` and `except` are read on every render, so they can change, and a field keeps what was typed while it is hidden.
+
+## Typing the form
+
+The definition is data, so TypeScript doesn't know its fields, and `jsonForm.form` is typed loosely: Formisch's own functions accept only top-level paths on it. Give `useJsonForm` your input type, and your output type when it differs, and they check paths and values as in any Formisch form:
+
+```ts
+import { getInput, useFieldArray } from '@formisch/react'
+
+interface CheckoutInput {
+  name: string
+  address: { city: string }
+  lines: { product: string; quantity: number }[]
+}
+
+const jsonForm = useJsonForm<CheckoutInput>(definition, { components })
+
+getInput(jsonForm.form, { path: ['address', 'city'] }) // string | undefined
+useFieldArray(jsonForm.form, { path: ['lines'] })
+```
+
+- Formisch's `<Field>`, `<FieldArray>`, `useField`, `getInput` and `setInput` work on `jsonForm.form` either way. With a type, nested paths type-check, their values are typed, and so is the output your submit handler gets.
+- The type is a promise you make: nothing checks it against the definition. Keep the two in step.
+- A field you render with Formisch's `<Field>` gets none of the adapter's help, like `setInput` turning `'5'` into `5`, or the defaults of a new array item. Leave it out of `<JsonFields>` with `except`.
+
+## Not included
+
+- Labels and display text reach your components as written in the definition. The builder's `resolveMessage` only changes what goes into the schema, so translate `field.label` in your components.
+- `ui.widget` doesn't pick a component. A component can read `field.ui` itself, e.g. to show a multiselect as checkboxes.
+- Showing and hiding fields, or making one required because of another, belongs to a future affects package.

package/dist/index.d.ts

@@ -0,0 +1,117 @@
+import { FieldNode, FieldNode as FieldNode$1, FieldPath, FieldPath as FieldPath$1, FieldRole, JsonField as JsonField$1, JsonForm, JsonFormSchema, JsonFormSchema as JsonFormSchema$1, SchemaBuilder, TypedJsonFormSchema, TypedJsonFormSchema as TypedJsonFormSchema$1, ValueKind } from "@whatsaaaa/form-builder-schema";
+import { FieldElementProps, FormSchema, FormStore, ValidationMode } from "@formisch/react";
+import { ComponentType, ReactElement, ReactNode } from "react";
+/**
+ * Your component for each field type, by type name: `{ text: TextInput, group: Fieldset }`. Each
+ * one takes the props of the role its type has.
+ */
+type FieldComponents = Record<string, ComponentType<ValueFieldProps> | ComponentType<GroupFieldProps> | ComponentType<ArrayFieldProps> | ComponentType<DisplayFieldProps>>;
+/** The props of a component for a display element, like a heading. */
+interface DisplayFieldProps {
+  field: JsonField$1;
+}
+/** The props of a component for a field with a value. */
+interface ValueFieldProps {
+  field: JsonField$1;
+  path: FieldPath$1;
+  /** The kind of the value, e.g. `'number'`. */
+  kind: ValueKind;
+  /** True when the definition makes the field required. */
+  required: boolean;
+  /** The field's current input. */
+  input: unknown;
+  /** The field's error messages, or null when it has none. */
+  errors: [string, ...string[]] | null;
+  /** Spread these on the input element: its name, ref, and focus, change and blur handlers. */
+  inputProps: FieldElementProps;
+  /** Sets the input, after turning `'5'` into `5` for a number, or a `FileList` into files. */
+  setInput: (input: unknown) => void;
+}
+/** The props of a component for a container of kind `object`, like the built-in group. */
+interface GroupFieldProps {
+  field: JsonField$1;
+  path: FieldPath$1;
+  /** The group's fields. */
+  children: ReactNode;
+}
+/** The props of a component for a container of kind `array`, like the built-in array. */
+interface ArrayFieldProps {
+  field: JsonField$1;
+  path: FieldPath$1;
+  /** One id per item, to use as its `key`. */
+  items: string[];
+  /** The array's own error messages, e.g. from `maxLength`, or null. */
+  errors: [string, ...string[]] | null;
+  /** Adds an item at the end. */
+  add: () => void;
+  remove: (index: number) => void;
+  move: (from: number, to: number) => void;
+  /** Renders the fields of the item at `index`. */
+  children: (index: number) => ReactNode;
+}
+interface UseJsonFormOptions {
+  /** Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. */
+  builder?: SchemaBuilder;
+  /** Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. */
+  components?: FieldComponents;
+  /** When a field is validated the first time, as in Formisch. */
+  validate?: ValidationMode;
+  /** When a field is validated again after that, as in Formisch. */
+  revalidate?: Exclude<ValidationMode, 'initial'>;
+}
+/** What `useJsonForm` returns. Pass it to `<JsonFields>`. */
+interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema$1> {
+  /** The Formisch form: pass it to Formisch's `<Form of>`, or to any of its methods. */
+  readonly form: FormStore<TSchema>;
+  readonly definition: JsonForm;
+  readonly builder: SchemaBuilder;
+  /** The components from the options, if any. */
+  readonly components: FieldComponents | undefined;
+  /** The definition's fields as a tree, the way `<JsonFields>` renders them. */
+  readonly fields: readonly FieldNode$1[];
+}
+/** Any form `useJsonForm` returns, typed or not: what the components take. */
+type AnyJsonFormInstance = JsonFormInstance<FormSchema>;
+/**
+ * A Formisch form for a definition, with its schema and initial input from the builder. A
+ * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it
+ * comes from outside your code. Like Formisch's `useForm`, it reads the definition, the builder and
+ * the validation modes on the first render: give the component a new `key` to use another
+ * definition. The components are read on every render.
+ */
+export declare function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance;
+/**
+ * The same, with the form typed by your input type, and output type when it differs, so Formisch's
+ * paths and values are checked. The types are yours to keep in step with the definition.
+ */
+export declare function useJsonForm<TInput extends object, TOutput extends object = TInput>(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance<TypedJsonFormSchema$1<TInput, TOutput>>;
+interface JsonFieldProps {
+  /** What `useJsonForm` returned. */
+  of: AnyJsonFormInstance;
+  /** The field's path: `'email'`, or `'address.city'` for a field of a group. */
+  path: string;
+  /** Defaults to the components `useJsonForm` got. */
+  components?: FieldComponents | undefined;
+}
+/**
+ * Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A
+ * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.
+ */
+export declare function JsonField({ of, path, components }: JsonFieldProps): ReactElement;
+interface JsonFieldsProps {
+  /** What `useJsonForm` returned. */
+  of: AnyJsonFormInstance;
+  /** Defaults to the components `useJsonForm` got. */
+  components?: FieldComponents | undefined;
+  /** Renders only these fields, by path, in the order of the definition. */
+  only?: readonly string[] | undefined;
+  /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */
+  except?: readonly string[] | undefined;
+}
+/**
+ * Renders the fields of a `useJsonForm` form with your components, one per field type. It renders
+ * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.
+ */
+export declare function JsonFields({ of, components, only, except }: JsonFieldsProps): ReactElement;
+export type { AnyJsonFormInstance, ArrayFieldProps, DisplayFieldProps, FieldComponents, FieldNode, FieldPath, FieldRole, GroupFieldProps, JsonFieldProps, JsonFieldsProps, JsonFormInstance, JsonFormSchema, TypedJsonFormSchema, UseJsonFormOptions, ValueFieldProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,158 @@
+import { checkComponents, coerceInput, createSchemaBuilder, dotPathOf, findField, isRequired, selectFields, toFieldPath } from "@whatsaaaa/form-builder-schema";
+import { insert, move, remove, useField, useFieldArray, useForm } from "@formisch/react";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+// src/array-field.tsx
+/** Connects a container of kind `array` to Formisch, and renders your component for it. */
+function ArrayField({ of, node, path, component: Component, renderItem }) {
+	const array = useFieldArray(of.form, { path });
+	const { form, builder } = of;
+	const { field } = node;
+	const at = array.path;
+	const methods = useMemo(() => ({
+		add: () => insert(form, {
+			path: at,
+			initialInput: builder.getItemInput(field)
+		}),
+		remove: (index) => remove(form, {
+			path: at,
+			at: index
+		}),
+		move: (from, to) => move(form, {
+			path: at,
+			from,
+			to
+		})
+	}), [
+		form,
+		builder,
+		field,
+		at
+	]);
+	return /* @__PURE__ */ jsx(Component, {
+		field,
+		path,
+		items: array.items,
+		errors: array.errors,
+		...methods,
+		children: renderItem
+	});
+}
+// src/value-field.tsx
+/** Connects a field with a value to Formisch, and renders your component for it. */
+function ValueField({ of, node, path, component: Component }) {
+	const field = useField(of.form, { path });
+	const setInput = useCallback((input) => field.onChange(coerceInput(input, node)), [field, node]);
+	return /* @__PURE__ */ jsx(Component, {
+		field: node.field,
+		path,
+		kind: node.kind,
+		required: isRequired(node.field),
+		input: field.input,
+		errors: field.errors,
+		inputProps: field.props,
+		setInput
+	});
+}
+// src/render-fields.tsx
+/** The components from the props, or else the ones `useJsonForm` got. */
+function resolveComponents(components, of) {
+	const resolved = components ?? of.components;
+	if (!resolved) throw new TypeError("No field components. Pass them to useJsonForm, or to the component.");
+	return resolved;
+}
+/** `indexes` are the indexes of the array items the fields are in, outermost first. */
+function renderFields(ctx, nodes, indexes) {
+	return nodes.map((node, position) => renderField(ctx, node, indexes, position));
+}
+function renderField(ctx, node, indexes, position) {
+	const component = ctx.components[node.type];
+	const path = toFieldPath(node.dataPath, indexes);
+	const key = dotPathOf(node) ?? `#${position}`;
+	switch (node.role) {
+		case "display": return /* @__PURE__ */ jsx(component, { field: node.field }, key);
+		case "group": return /* @__PURE__ */ jsx(component, {
+			field: node.field,
+			path,
+			children: renderFields(ctx, node.children, indexes)
+		}, key);
+		case "array": return /* @__PURE__ */ jsx(ArrayField, {
+			of: ctx.of,
+			node,
+			path,
+			component,
+			renderItem: (index) => renderFields(ctx, node.children, [...indexes, index])
+		}, key);
+		case "value": return /* @__PURE__ */ jsx(ValueField, {
+			of: ctx.of,
+			node,
+			path,
+			component
+		}, key);
+	}
+}
+// src/json-field.tsx
+/**
+* Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A
+* group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.
+*/
+function JsonField({ of, path, components }) {
+	const node = findField(of.fields, path, { placed: true });
+	const ctx = {
+		of,
+		components: resolveComponents(components, of)
+	};
+	checkComponents([node], ctx.components);
+	return renderField(ctx, node, [], 0);
+}
+// src/json-fields.tsx
+/**
+* Renders the fields of a `useJsonForm` form with your components, one per field type. It renders
+* nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.
+*/
+function JsonFields({ of, components, only, except }) {
+	const ctx = {
+		of,
+		components: resolveComponents(components, of)
+	};
+	const nodes = selectFields(of.fields, {
+		only,
+		except
+	});
+	checkComponents(nodes, ctx.components);
+	return /* @__PURE__ */ jsx(Fragment, { children: renderFields(ctx, nodes, []) });
+}
+// src/use-json-form.ts
+function useJsonForm(definition, options = {}) {
+	const [built] = useState(() => {
+		const builder = options.builder ?? createSchemaBuilder();
+		return {
+			definition,
+			builder,
+			schema: builder.build(definition),
+			initialInput: builder.getInitialInput(definition),
+			fields: builder.getFieldTree(definition)
+		};
+	});
+	const form = useForm({
+		schema: built.schema,
+		initialInput: built.initialInput,
+		validate: options.validate,
+		revalidate: options.revalidate
+	});
+	const { components } = options;
+	return useMemo(() => ({
+		form,
+		definition: built.definition,
+		builder: built.builder,
+		components,
+		fields: built.fields
+	}), [
+		form,
+		built,
+		components
+	]);
+}
+export { JsonField, JsonFields, useJsonForm };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Display","Group"],"sources":["../src/array-field.tsx","../src/value-field.tsx","../src/render-fields.tsx","../src/json-field.tsx","../src/json-fields.tsx","../src/use-json-form.ts"],"sourcesContent":["import { insert, move, remove, useFieldArray } from '@formisch/react'\nimport type { FieldNode, FieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type ComponentType, type ReactElement, type ReactNode, useMemo } from 'react'\nimport type { ArrayFieldProps } from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\ninterface ArrayFieldConnectionProps {\n  of: AnyJsonFormInstance\n  node: FieldNode\n  path: FieldPath\n  component: ComponentType<ArrayFieldProps>\n  /** Renders the fields of the item at `index`. */\n  renderItem: (index: number) => ReactNode\n}\n\n/** Connects a container of kind `array` to Formisch, and renders your component for it. */\nexport function ArrayField({\n  of,\n  node,\n  path,\n  component: Component,\n  renderItem,\n}: ArrayFieldConnectionProps): ReactElement {\n  // The path comes from the definition at runtime, so the schema's types can't check it.\n  const array = useFieldArray(of.form, { path: path as never })\n\n  // Formisch keeps the path it got while the array is the same, so the methods stay the same too.\n  const { form, builder } = of\n  const { field } = node\n  const at = array.path\n  const methods = useMemo(\n    () => ({\n      // A new item starts with the defaults of its fields, like the items of a new form.\n      add: () => insert(form, { path: at, initialInput: builder.getItemInput(field) as never }),\n      remove: (index: number) => remove(form, { path: at, at: index }),\n      move: (from: number, to: number) => move(form, { path: at, from, to }),\n    }),\n    [form, builder, field, at],\n  )\n\n  return (\n    <Component field={field} path={path} items={array.items} errors={array.errors} {...methods}>\n      {renderItem}\n    </Component>\n  )\n}\n","import { useField } from '@formisch/react'\nimport {\n  coerceInput,\n  type FieldNode,\n  type FieldPath,\n  isRequired,\n} from '@whatsaaaa/form-builder-schema'\nimport { type ComponentType, type ReactElement, useCallback } from 'react'\nimport type { ValueFieldProps } from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\ninterface ValueFieldConnectionProps {\n  of: AnyJsonFormInstance\n  node: FieldNode\n  path: FieldPath\n  component: ComponentType<ValueFieldProps>\n}\n\n/** Connects a field with a value to Formisch, and renders your component for it. */\nexport function ValueField({\n  of,\n  node,\n  path,\n  component: Component,\n}: ValueFieldConnectionProps): ReactElement {\n  // The path comes from the definition at runtime, so the schema's types can't check it.\n  const field = useField(of.form, { path: path as never })\n  const setInput = useCallback(\n    (input: unknown) => field.onChange(coerceInput(input, node) as never),\n    [field, node],\n  )\n\n  return (\n    <Component\n      field={node.field}\n      path={path}\n      kind={node.kind}\n      required={isRequired(node.field)}\n      input={field.input}\n      errors={field.errors}\n      inputProps={field.props}\n      setInput={setInput}\n    />\n  )\n}\n","import { dotPathOf, type FieldNode, toFieldPath } from '@whatsaaaa/form-builder-schema'\nimport type { ComponentType, ReactElement } from 'react'\nimport { ArrayField } from './array-field'\nimport type {\n  ArrayFieldProps,\n  DisplayFieldProps,\n  FieldComponents,\n  GroupFieldProps,\n  ValueFieldProps,\n} from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\nimport { ValueField } from './value-field'\n\n/** What `<JsonFields>` and `<JsonField>` render with. */\nexport interface RenderContext {\n  of: AnyJsonFormInstance\n  components: FieldComponents\n}\n\n/** The components from the props, or else the ones `useJsonForm` got. */\nexport function resolveComponents(\n  components: FieldComponents | undefined,\n  of: AnyJsonFormInstance,\n): FieldComponents {\n  const resolved = components ?? of.components\n  if (!resolved) {\n    throw new TypeError('No field components. Pass them to useJsonForm, or to the component.')\n  }\n  return resolved\n}\n\n/** `indexes` are the indexes of the array items the fields are in, outermost first. */\nexport function renderFields(\n  ctx: RenderContext,\n  nodes: readonly FieldNode[],\n  indexes: readonly number[],\n): ReactElement[] {\n  return nodes.map((node, position) => renderField(ctx, node, indexes, position))\n}\n\nexport function renderField(\n  ctx: RenderContext,\n  node: FieldNode,\n  indexes: readonly number[],\n  position: number,\n): ReactElement {\n  // The fields were checked for components, and the role tells which props the component takes.\n  const component = ctx.components[node.type]\n  const path = toFieldPath(node.dataPath, indexes)\n  const key = dotPathOf(node) ?? `#${position}`\n  switch (node.role) {\n    case 'display': {\n      const Display = component as ComponentType<DisplayFieldProps>\n      return <Display key={key} field={node.field} />\n    }\n    case 'group': {\n      const Group = component as ComponentType<GroupFieldProps>\n      return (\n        <Group key={key} field={node.field} path={path}>\n          {renderFields(ctx, node.children, indexes)}\n        </Group>\n      )\n    }\n    case 'array':\n      return (\n        <ArrayField\n          key={key}\n          of={ctx.of}\n          node={node}\n          path={path}\n          component={component as ComponentType<ArrayFieldProps>}\n          renderItem={(index) => renderFields(ctx, node.children, [...indexes, index])}\n        />\n      )\n    case 'value':\n      return (\n        <ValueField\n          key={key}\n          of={ctx.of}\n          node={node}\n          path={path}\n          component={component as ComponentType<ValueFieldProps>}\n        />\n      )\n  }\n}\n","import { checkComponents, findField } from '@whatsaaaa/form-builder-schema'\nimport type { ReactElement } from 'react'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderField, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\nexport interface JsonFieldProps {\n  /** What `useJsonForm` returned. */\n  of: AnyJsonFormInstance\n  /** The field's path: `'email'`, or `'address.city'` for a field of a group. */\n  path: string\n  /** Defaults to the components `useJsonForm` got. */\n  components?: FieldComponents | undefined\n}\n\n/**\n * Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A\n * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.\n */\nexport function JsonField({ of, path, components }: JsonFieldProps): ReactElement {\n  const node = findField(of.fields, path, { placed: true })\n  const ctx: RenderContext = { of, components: resolveComponents(components, of) }\n  checkComponents([node], ctx.components)\n\n  return renderField(ctx, node, [], 0)\n}\n","import { checkComponents, selectFields } from '@whatsaaaa/form-builder-schema'\nimport type { ReactElement } from 'react'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderFields, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\nexport interface JsonFieldsProps {\n  /** What `useJsonForm` returned. */\n  of: AnyJsonFormInstance\n  /** Defaults to the components `useJsonForm` got. */\n  components?: FieldComponents | undefined\n  /** Renders only these fields, by path, in the order of the definition. */\n  only?: readonly string[] | undefined\n  /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */\n  except?: readonly string[] | undefined\n}\n\n/**\n * Renders the fields of a `useJsonForm` form with your components, one per field type. It renders\n * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.\n */\nexport function JsonFields({ of, components, only, except }: JsonFieldsProps): ReactElement {\n  const ctx: RenderContext = { of, components: resolveComponents(components, of) }\n  const nodes = selectFields(of.fields, { only, except })\n  checkComponents(nodes, ctx.components)\n\n  return <>{renderFields(ctx, nodes, [])}</>\n}\n","import { type FormSchema, type FormStore, useForm, type ValidationMode } from '@formisch/react'\nimport {\n  createSchemaBuilder,\n  type FieldNode,\n  type JsonForm,\n  type JsonFormSchema,\n  type SchemaBuilder,\n  type TypedJsonFormSchema,\n} from '@whatsaaaa/form-builder-schema'\nimport { useMemo, useState } from 'react'\nimport type { FieldComponents } from './field-components'\n\nexport interface UseJsonFormOptions {\n  /** Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. */\n  builder?: SchemaBuilder\n  /** Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. */\n  components?: FieldComponents\n  /** When a field is validated the first time, as in Formisch. */\n  validate?: ValidationMode\n  /** When a field is validated again after that, as in Formisch. */\n  revalidate?: Exclude<ValidationMode, 'initial'>\n}\n\n/** What `useJsonForm` returns. Pass it to `<JsonFields>`. */\nexport interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema> {\n  /** The Formisch form: pass it to Formisch's `<Form of>`, or to any of its methods. */\n  readonly form: FormStore<TSchema>\n  readonly definition: JsonForm\n  readonly builder: SchemaBuilder\n  /** The components from the options, if any. */\n  readonly components: FieldComponents | undefined\n  /** The definition's fields as a tree, the way `<JsonFields>` renders them. */\n  readonly fields: readonly FieldNode[]\n}\n\n/** Any form `useJsonForm` returns, typed or not: what the components take. */\nexport type AnyJsonFormInstance = JsonFormInstance<FormSchema>\n\n/**\n * A Formisch form for a definition, with its schema and initial input from the builder. A\n * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it\n * comes from outside your code. Like Formisch's `useForm`, it reads the definition, the builder and\n * the validation modes on the first render: give the component a new `key` to use another\n * definition. The components are read on every render.\n */\nexport function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance\n/**\n * The same, with the form typed by your input type, and output type when it differs, so Formisch's\n * paths and values are checked. The types are yours to keep in step with the definition.\n */\nexport function useJsonForm<TInput extends object, TOutput extends object = TInput>(\n  definition: JsonForm,\n  options?: UseJsonFormOptions,\n): JsonFormInstance<TypedJsonFormSchema<TInput, TOutput>>\nexport function useJsonForm(\n  definition: JsonForm,\n  options: UseJsonFormOptions = {},\n): JsonFormInstance {\n  // Formisch reads its config on the first render only, so the schema is built once too.\n  const [built] = useState(() => {\n    const builder = options.builder ?? createSchemaBuilder()\n    return {\n      definition,\n      builder,\n      schema: builder.build(definition),\n      initialInput: builder.getInitialInput(definition),\n      fields: builder.getFieldTree(definition),\n    }\n  })\n  const form = useForm({\n    schema: built.schema,\n    initialInput: built.initialInput,\n    validate: options.validate,\n    revalidate: options.revalidate,\n  })\n  const { components } = options\n  return useMemo(\n    () => ({\n      form,\n      definition: built.definition,\n      builder: built.builder,\n      components,\n      fields: built.fields,\n    }),\n    [form, built, components],\n  )\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,68 @@
 {
   "name": "@whatsaaaa/form-builder-react",
-  "version": "0.0.0",
-  "description": "Placeholder - first real release is published from CI.",
+  "version": "0.1.0",
+  "description": "Render JSON form definitions with Formisch and your own React components.",
+  "keywords": [
+    "form",
+    "formisch",
+    "headless",
+    "json",
+    "react"
+  ],
+  "homepage": "https://github.com/whatsaaaa/form-builder",
+  "bugs": "https://github.com/whatsaaaa/form-builder/issues",
   "license": "MIT",
-  "repository": { "type": "git", "url": "git+https://github.com/whatsaaaa/form-builder.git", "directory": "frameworks/react" }
-}
+  "author": "Whatsaaaa",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/whatsaaaa/form-builder.git",
+    "directory": "frameworks/react"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@whatsaaaa/form-builder-schema": "^0.13.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@formisch/react": "^1.2.0",
+    "@size-limit/preset-small-lib": "^14.3.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/coverage-v8": "^5.0.5",
+    "happy-dom": "^20.0.0",
+    "publint": "^0.3.25",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "size-limit": "^14.3.0",
+    "tsdown": "^0.23.2",
+    "typescript": "~6.0.3",
+    "valibot": "^1.5.0",
+    "vitest": "^5.0.5"
+  },
+  "peerDependencies": {
+    "@formisch/react": "^1.2.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "valibot": "^1.4.1"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit",
+    "lint:pkg": "publint && pnpm pack --pack-destination .attw && attw .attw/*.tgz --profile esm-only",
+    "size": "size-limit"
+  }
+}