@whatsaaaa/form-builder-react 0.0.0 → 0.2.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,374 @@
+# @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
+  layoutComponents, // your component per layout type, see Layout
+  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` and `layoutComponents` are 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>
+}
+```
+
+## Layout
+
+A definition's [`layout`](https://github.com/whatsaaaa/form-builder/tree/main/packages/schema#layout) puts its fields in sections, rows of a 12-column grid and steps, and leaves slots for content of yours. `<JsonFields>` renders the current step of it. Give `useJsonForm` a component for each layout type the definition uses, and `<JsonFields>` the content of its slots:
+
+```tsx
+import type { LayoutComponents, RowProps, SectionProps } from '@whatsaaaa/form-builder-react'
+
+function Section({ section, children }: SectionProps) {
+  return (
+    <fieldset>
+      <legend>{section.label}</legend>
+      {children}
+    </fieldset>
+  )
+}
+
+// One line of a 12-column grid. On a narrow screen, give each cell the whole row.
+function Row({ spans, children }: RowProps) {
+  return (
+    <div className="row">
+      {spans.map((span, index) => (
+        <div key={index} style={{ gridColumn: `span ${span}` }}>
+          {children(index)}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const layoutComponents: LayoutComponents = { section: Section, row: Row }
+
+function Checkout({ definition }: { definition: JsonForm }) {
+  const jsonForm = useJsonForm(definition, { components, layoutComponents })
+  return (
+    <Form of={jsonForm.form} onSubmit={save}>
+      <JsonFields of={jsonForm} slots={{ submit: <button type="submit">Place order</button> }} />
+    </Form>
+  )
+}
+```
+
+```css
+.row {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+}
+```
+
+| Layout type | Props                                                                                                                    |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `section`   | `section`, as written, with its `id`, `label`, `description` and `ui`; `children`                                        |
+| `row`       | `row`, as written, with its `id` and `ui`; `spans`, the span of each cell; `children(index)` renders the cell at `index` |
+
+- `layoutComponents` goes to `useJsonForm`, or to `<JsonFields>` as a prop, which wins. A definition without sections or rows needs none, and one without a `layout` renders as it always did.
+- A layout type the layout uses without a component, or a slot without content in `slots`, throws a `TypeError` naming each one, on every step.
+- Display elements written in the layout render with your field components, like the ones in `fields`.
+- `except` leaves fields out of the layout too, and a section or a row left without fields drops out. The other cells of a row keep their spans. `only` renders the fields it names without the layout.
+- The spans are for a wide screen: the layout says nothing about narrow ones, so your row component decides, e.g. with a media query.
+
+### Steps
+
+`jsonForm.steps` is where the form is, and how to move:
+
+```tsx
+function Signup({ definition }: { definition: JsonForm }) {
+  const jsonForm = useJsonForm(definition, { components, layoutComponents })
+  const { steps } = jsonForm
+  return (
+    <Form of={jsonForm.form} onSubmit={save}>
+      <ol>
+        {steps.list.map((step, i) => (
+          <li key={step.step.id ?? i} aria-current={i === steps.index ? 'step' : undefined}>
+            {step.step.label}
+          </li>
+        ))}
+      </ol>
+      <JsonFields of={jsonForm} />
+      {!steps.isFirst && (
+        <button type="button" onClick={steps.back}>
+          Back
+        </button>
+      )}
+      {steps.isLast ? (
+        <button type="submit">Sign up</button>
+      ) : (
+        <button type="button" onClick={() => void steps.next()}>
+          Next
+        </button>
+      )}
+    </Form>
+  )
+}
+```
+
+| Member              |                                                                                                      |
+| ------------------- | ---------------------------------------------------------------------------------------------------- |
+| `list`              | every step, with its `step` as written (`id`, `label`, `description`, `ui`), `children` and `fields` |
+| `index`, `current`  | the step `<JsonFields>` renders                                                                      |
+| `isFirst`, `isLast` |                                                                                                      |
+| `next()`            | validates, and moves on when the step's fields have no issues. Resolves to whether it moved          |
+| `back()`            | moves back, without validating                                                                       |
+| `goTo(index)`       | back freely; forward through each step on the way, stopping at the first with issues                 |
+
+The form is one Formisch form, so Formisch validates all of it at once. The steps make that work:
+
+- **Next** validates the whole form, and only the issues on the current step's fields keep the user there. It focuses the first one, in layout order.
+- **A step shows what the user left**: the errors it had when they left it, and none the first time they get to it, so the issues of steps nobody saw yet stay out of sight.
+- **A step that failed Next revalidates** as the user fixes it, on the `revalidate` event, like a form after a failed submit.
+- **A submit before the last step is a Next**, so Enter in a step with a single text input doesn't submit the form early. On the last step, Formisch submits as usual.
+- **A submit that fails because of an earlier step**, like a form rule that reads fields of two steps, goes back to that step.
+- `<JsonFields step={2} />` renders a given step instead of the current one, e.g. on a review page. A form without steps has one, and nothing changes for it.
+
+## Placing fields yourself
+
+Without a `layout`, `<JsonFields>` renders every field in the order of the definition. To put some of them somewhere else, in code rather than in the definition, 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 dot path, even with a 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. The layout already hides a section, a row or a step whose fields are all hidden, through `shownNodes` in the schema package.

package/dist/index.d.ts

@@ -0,0 +1,183 @@
+import { FieldNode, FieldNode as FieldNode$1, FieldPath, FieldPath as FieldPath$1, FieldRole, FormLayout, FormLayout as FormLayout$1, JsonField as JsonField$1, JsonForm, JsonFormSchema, JsonFormSchema as JsonFormSchema$1, JsonLayoutRow, JsonLayoutSection, LayoutNode, LayoutStep, LayoutStep as LayoutStep$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;
+}
+/**
+ * Your component for each layout type a definition's `layout` uses: `{ section: Card, row: Grid }`.
+ * A definition without sections or rows needs none.
+ */
+interface LayoutComponents {
+  section?: ComponentType<SectionProps>;
+  row?: ComponentType<RowProps>;
+}
+/** The props of a component for a section of the layout. */
+interface SectionProps {
+  /** The section as written, with its `id`, `label`, `description` and `ui`. */
+  section: JsonLayoutSection;
+  /** The section's items. */
+  children: ReactNode;
+}
+/** The props of a component for a row of the layout: one line of a 12-column grid. */
+interface RowProps {
+  /** The row as written, with its `id` and `ui`. */
+  row: JsonLayoutRow;
+  /** How many of the 12 columns each cell takes, in order. They add up to 12 at most. */
+  spans: number[];
+  /** Renders the cell at `index`. */
+  children: (index: number) => ReactNode;
+}
+/** The steps of a form, from its layout. A form without `steps` in its layout has one. */
+interface JsonFormSteps {
+  /** Every step, in order. */
+  readonly list: readonly LayoutStep$1[];
+  /** The index of the current step in `list`. */
+  readonly index: number;
+  /** The step `<JsonFields>` renders. */
+  readonly current: LayoutStep$1;
+  readonly isFirst: boolean;
+  readonly isLast: boolean;
+  /**
+   * Validates the whole form, and moves to the next step when the fields of this one have no
+   * issues. Otherwise it stays, and focuses the first field with an issue, in layout order.
+   * Resolves to whether it moved.
+   */
+  next(): Promise<boolean>;
+  /** Moves to the step before, without validating. */
+  back(): void;
+  /**
+   * Moves to the step at `index`. Back is free, and forward validates every step on the way, like
+   * `next()`, and stops at the first with issues. Resolves to whether it got there.
+   */
+  goTo(index: number): Promise<boolean>;
+}
+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;
+  /** Your component for each layout type the definition's `layout` uses, like `section`. */
+  layoutComponents?: LayoutComponents;
+  /** 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 layout components from the options, if any. */
+  readonly layoutComponents: LayoutComponents | undefined;
+  /** The definition's fields as a tree, for `<JsonFields only>` and `<JsonField>`. */
+  readonly fields: readonly FieldNode$1[];
+  /** The definition's layout, the way `<JsonFields>` renders it. */
+  readonly layout: FormLayout$1;
+  /** The layout's steps: the current one, and Next, Back and Go to. A form without steps has one. */
+  readonly steps: JsonFormSteps;
+}
+/** 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 and layout 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;
+  /** Defaults to the layout components `useJsonForm` got. */
+  layoutComponents?: LayoutComponents | undefined;
+  /** The content of the layout's slots, by name: `{ submit: <button type="submit">Save</button> }`. */
+  slots?: Readonly<Record<string, ReactNode>> | undefined;
+  /** Renders only these fields, by path, in the order of the definition, without the layout. */
+  only?: readonly string[] | undefined;
+  /**
+   * Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. A section or a
+   * row left without fields drops out too.
+   */
+  except?: readonly string[] | undefined;
+  /** Renders the step at this index instead of the current one, e.g. on a review page. */
+  step?: number | undefined;
+}
+/**
+ * Renders the fields of a `useJsonForm` form with your components, one per field type, where the
+ * definition's `layout` puts them: the current step, with its sections, rows and slots. It renders
+ * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.
+ */
+export declare function JsonFields(props: JsonFieldsProps): ReactElement;
+export type { AnyJsonFormInstance, ArrayFieldProps, DisplayFieldProps, FieldComponents, FieldNode, FieldPath, FieldRole, FormLayout, GroupFieldProps, JsonFieldProps, JsonFieldsProps, JsonFormInstance, JsonFormSchema, JsonFormSteps, LayoutComponents, LayoutNode, LayoutStep, RowProps, SectionProps, TypedJsonFormSchema, UseJsonFormOptions, ValueFieldProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,409 @@
+import { checkComponents, checkLayoutComponents, coerceInput, createSchemaBuilder, dotPathOf, fieldPathsOf, findField, isRequired, issuesOfStep, selectFields, shownNodes, toFieldPath } from "@whatsaaaa/form-builder-schema";
+import { focus, getErrors, getInput, insert, move, remove, setErrors, useField, useFieldArray, useForm, validate } from "@formisch/react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+// src/json-form-steps.ts
+const fieldEvents = /* @__PURE__ */ new WeakMap();
+/** What a field of `form` calls on each event, for a form with steps. Undefined with one step. */
+const fieldEventsOf = (form) => fieldEvents.get(form);
+/**
+* The steps of `layout`, for `useJsonForm`. With more than one, a step shows the errors it had
+* when the user left it, and none the first time they get to it, a step that failed Next revalidates as the user fixes it, a submit
+* before the last step moves on like Next, and a submit that fails because of an earlier step
+* goes back to it. Like Formisch's `useForm`, it reads the validation modes on the first render.
+*/
+function useJsonFormSteps(form, layout, modes) {
+	const list = layout.steps;
+	const [index, setIndex] = useState(0);
+	const state = useRef({
+		index: 0,
+		left: /* @__PURE__ */ new Map(),
+		failed: /* @__PURE__ */ new Set(),
+		focus: void 0,
+		submitting: false,
+		modes
+	});
+	const methods = useMemo(() => {
+		const at = state.current;
+		async function goTo(target) {
+			if (!Number.isInteger(target) || target < 0 || target >= list.length) throw new RangeError(`No step ${target}. The form has ${list.length}.`);
+			if (target <= at.index) {
+				move(target);
+				return true;
+			}
+			const { issues } = await validate(form);
+			for (let step = at.index; step < target; step++) {
+				const found = issuesOfStep(list[step], issues);
+				if (found.length) {
+					stop(step, found);
+					return false;
+				}
+				at.failed.delete(step);
+			}
+			move(target);
+			return true;
+		}
+		/**
+		* Moves to a step as the user left it: with the errors it had then, and none the first time, and
+		* revalidating if it failed Next. Validating the steps before set errors on its fields, which
+		* the user never saw.
+		*/
+		function move(target) {
+			leave();
+			const errors = at.left.get(target);
+			for (const path of fieldPathsOf(list[target], getInput(form))) setErrors(form, {
+				path,
+				errors: errors?.get(JSON.stringify(path)) ?? null
+			});
+			at.index = target;
+			setIndex(target);
+		}
+		/** Keeps the errors of the current step, for when the user comes back to it. */
+		function leave() {
+			const errors = fieldPathsOf(list[at.index], getInput(form)).map((path) => [JSON.stringify(path), getErrors(form, { path })]);
+			at.left.set(at.index, new Map(errors));
+		}
+		/** Stays on, or goes to, the step at `target`, with its issues shown. */
+		function stop(target, found) {
+			at.failed.add(target);
+			const path = found.find((issue) => issue.field.role === "value")?.path;
+			if (target === at.index) {
+				if (path) focus(form, { path });
+				return;
+			}
+			leave();
+			at.focus = path;
+			at.index = target;
+			setIndex(target);
+		}
+		const events = (event) => {
+			const validateMode = at.modes.validate ?? "submit";
+			if (!at.failed.has(at.index) || validateMode !== "submit" || form.isSubmitted) return;
+			if (event === (at.modes.revalidate ?? "input")) validate(form);
+		};
+		/** After a failed submit: back to the first step before this one with issues, if any. */
+		async function afterSubmit() {
+			const { issues } = await validate(form);
+			const step = list.findIndex((each) => issuesOfStep(each, issues).length);
+			if (step !== -1 && step < at.index) stop(step, issuesOfStep(list[step], issues));
+		}
+		const next = () => at.index === list.length - 1 ? Promise.resolve(false) : goTo(at.index + 1);
+		const back = () => {
+			if (at.index > 0) move(at.index - 1);
+		};
+		return {
+			goTo,
+			next,
+			back,
+			events,
+			afterSubmit
+		};
+	}, [form, list]);
+	useEffect(() => {
+		const path = state.current.focus;
+		state.current.focus = void 0;
+		if (path) focus(form, { path });
+	}, [form, index]);
+	const stepped = list.length > 1;
+	useEffect(() => {
+		if (!stepped) return;
+		fieldEvents.set(form, methods.events);
+		const onSubmit = (event) => {
+			if (event.target !== formElementOf(form)) return;
+			if (state.current.index === list.length - 1) {
+				state.current.submitting = true;
+				return;
+			}
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			methods.next();
+		};
+		document.addEventListener("submit", onSubmit, { capture: true });
+		return () => {
+			fieldEvents.delete(form);
+			document.removeEventListener("submit", onSubmit, { capture: true });
+		};
+	}, [
+		form,
+		list,
+		methods,
+		stepped
+	]);
+	const submitting = form.isSubmitting;
+	useEffect(() => {
+		if (!state.current.submitting || submitting) return;
+		state.current.submitting = false;
+		if (!form.isValid) methods.afterSubmit();
+	});
+	return useMemo(() => ({
+		list,
+		index,
+		current: list[index],
+		isFirst: index === 0,
+		isLast: index === list.length - 1,
+		next: methods.next,
+		back: methods.back,
+		goTo: methods.goTo
+	}), [
+		list,
+		index,
+		methods
+	]);
+}
+/** The `<form>` Formisch's `<Form>` renders, which it keeps on the store for its `submit()`. */
+function formElementOf(form) {
+	return form["~internal"]?.element;
+}
+// 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)
+			});
+			fieldEventsOf(form)?.("input");
+		},
+		remove: (index) => {
+			remove(form, {
+				path: at,
+				at: index
+			});
+			fieldEventsOf(form)?.("input");
+		},
+		move: (from, to) => {
+			move(form, {
+				path: at,
+				from,
+				to
+			});
+			fieldEventsOf(form)?.("input");
+		}
+	}), [
+		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 { form } = of;
+	const setInput = useCallback((input) => {
+		field.onChange(coerceInput(input, node));
+		fieldEventsOf(form)?.("input");
+	}, [
+		field,
+		node,
+		form
+	]);
+	const inputProps = of.steps.list.length > 1 ? {
+		...field.props,
+		onFocus: () => {
+			field.props.onFocus();
+			fieldEventsOf(form)?.("touch");
+		},
+		onChange: (event) => {
+			field.props.onChange(event);
+			fieldEventsOf(form)?.("input");
+			fieldEventsOf(form)?.("change");
+		},
+		onBlur: () => {
+			field.props.onBlur();
+			fieldEventsOf(form)?.("blur");
+		}
+	} : field.props;
+	return /* @__PURE__ */ jsx(Component, {
+		field: node.field,
+		path,
+		kind: node.kind,
+		required: isRequired(node.field),
+		input: field.input,
+		errors: field.errors,
+		inputProps,
+		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, dotPathOf(node) ?? `#${position}`, (inner) => renderFields(ctx, node.children, inner)));
+}
+/**
+* Renders one field with its component. `children` renders the fields inside a group, or inside
+* the item of an array, with the indexes of the items they are in.
+*/
+function renderField(ctx, node, indexes, key, children) {
+	const component = ctx.components[node.type];
+	const path = toFieldPath(node.dataPath, indexes);
+	switch (node.role) {
+		case "display": return /* @__PURE__ */ jsx(component, { field: node.field }, key);
+		case "group": return /* @__PURE__ */ jsx(component, {
+			field: node.field,
+			path,
+			children: children(indexes)
+		}, key);
+		case "array": return /* @__PURE__ */ jsx(ArrayField, {
+			of: ctx.of,
+			node,
+			path,
+			component,
+			renderItem: (index) => 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, [], dotPathOf(node) ?? "#0", (indexes) => renderFields(ctx, node.children, indexes));
+}
+// src/render-layout.tsx
+/**
+* Renders layout nodes. A field left out drops out, and so does a section or a row left without
+* fields. `indexes` are the indexes of the array items the nodes are in, outermost first.
+*/
+function renderLayout(ctx, nodes, indexes) {
+	return shownNodes(nodes, indexes, ctx.isShown).map((node) => renderNode(ctx, node, indexes));
+}
+function renderNode(ctx, node, indexes) {
+	const { key } = node;
+	switch (node.type) {
+		case "field": return renderField(ctx, node.node, indexes, key, (inner) => renderLayout(ctx, node.children, inner));
+		case "section": {
+			const Section = ctx.layoutComponents.section;
+			return /* @__PURE__ */ jsx(Section, {
+				section: node.section,
+				children: renderLayout(ctx, node.children, indexes)
+			}, key);
+		}
+		case "row": {
+			const Row = ctx.layoutComponents.row;
+			return /* @__PURE__ */ jsx(Row, {
+				row: node.row,
+				spans: node.children.map((cell) => cell.span),
+				children: (index) => renderNode(ctx, node.children[index], indexes)
+			}, key);
+		}
+		case "slot": return /* @__PURE__ */ jsx(Fragment, { children: ctx.slots[node.name] }, key);
+	}
+}
+// src/json-fields.tsx
+/**
+* Renders the fields of a `useJsonForm` form with your components, one per field type, where the
+* definition's `layout` puts them: the current step, with its sections, rows and slots. It renders
+* nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.
+*/
+function JsonFields(props) {
+	const { of, only, except } = props;
+	const ctx = {
+		of,
+		components: resolveComponents(props.components, of)
+	};
+	const nodes = selectFields(of.fields, {
+		only,
+		except
+	});
+	if (only || !of.definition.layout) {
+		checkComponents(nodes, ctx.components);
+		return /* @__PURE__ */ jsx(Fragment$1, { children: renderFields(ctx, nodes, []) });
+	}
+	const { layout, steps } = of;
+	const left = new Set(except);
+	const layoutCtx = {
+		...ctx,
+		layoutComponents: props.layoutComponents ?? of.layoutComponents ?? {},
+		slots: props.slots ?? {},
+		isShown: (node) => !left.has(dotPathOf(node) ?? "")
+	};
+	checkComponents(layout.steps.flatMap((step) => fieldsOf(step.children)), ctx.components);
+	checkLayoutComponents(layout, layoutCtx.layoutComponents, layoutCtx.slots);
+	const index = props.step ?? steps.index;
+	const step = steps.list[index];
+	if (!step) throw new RangeError(`No step ${props.step}. The form has ${steps.list.length}.`);
+	return /* @__PURE__ */ jsx(Fragment, { children: renderLayout(layoutCtx, step.children, []) }, index);
+}
+/** Every field of the nodes, display elements written in the layout included. */
+function fieldsOf(nodes) {
+	return nodes.flatMap((node) => {
+		if (node.type === "slot") return [];
+		const inner = fieldsOf(node.children);
+		return node.type === "field" ? [node.node, ...inner] : inner;
+	});
+}
+// 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),
+			layout: builder.getLayout(definition)
+		};
+	});
+	const form = useForm({
+		schema: built.schema,
+		initialInput: built.initialInput,
+		validate: options.validate,
+		revalidate: options.revalidate
+	});
+	const steps = useJsonFormSteps(form, built.layout, options);
+	const { components, layoutComponents } = options;
+	return useMemo(() => ({
+		form,
+		definition: built.definition,
+		builder: built.builder,
+		components,
+		layoutComponents,
+		fields: built.fields,
+		layout: built.layout,
+		steps
+	}), [
+		form,
+		built,
+		components,
+		layoutComponents,
+		steps
+	]);
+}
+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/json-form-steps.ts","../src/array-field.tsx","../src/value-field.tsx","../src/render-fields.tsx","../src/json-field.tsx","../src/render-layout.tsx","../src/json-fields.tsx","../src/use-json-form.ts"],"sourcesContent":["import {\n  focus,\n  type FormStore,\n  getErrors,\n  getInput,\n  setErrors,\n  validate,\n  type ValidationMode,\n} from '@formisch/react'\nimport {\n  type FieldPath,\n  fieldPathsOf,\n  type FormLayout,\n  issuesOfStep,\n  type LayoutStep,\n  type StepIssue,\n} from '@whatsaaaa/form-builder-schema'\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\n/** The steps of a form, from its layout. A form without `steps` in its layout has one. */\nexport interface JsonFormSteps {\n  /** Every step, in order. */\n  readonly list: readonly LayoutStep[]\n  /** The index of the current step in `list`. */\n  readonly index: number\n  /** The step `<JsonFields>` renders. */\n  readonly current: LayoutStep\n  readonly isFirst: boolean\n  readonly isLast: boolean\n  /**\n   * Validates the whole form, and moves to the next step when the fields of this one have no\n   * issues. Otherwise it stays, and focuses the first field with an issue, in layout order.\n   * Resolves to whether it moved.\n   */\n  next(): Promise<boolean>\n  /** Moves to the step before, without validating. */\n  back(): void\n  /**\n   * Moves to the step at `index`. Back is free, and forward validates every step on the way, like\n   * `next()`, and stops at the first with issues. Resolves to whether it got there.\n   */\n  goTo(index: number): Promise<boolean>\n}\n\n/** A field's error messages in Formisch, or null. */\ntype Errors = [string, ...string[]] | null\n\n/** What a field tells the steps it was through, by Formisch's name for the validation mode. */\nexport type FieldEvent = Exclude<ValidationMode, 'initial' | 'submit'>\n\n/** Revalidates a step that failed Next on each field event, like a form after a failed submit. */\ntype FieldEvents = (event: FieldEvent) => void\n\nconst fieldEvents = new WeakMap<FormStore, FieldEvents>()\n\n/** What a field of `form` calls on each event, for a form with steps. Undefined with one step. */\nexport const fieldEventsOf = (form: FormStore): FieldEvents | undefined => fieldEvents.get(form)\n\ninterface Modes {\n  validate?: ValidationMode | undefined\n  revalidate?: Exclude<ValidationMode, 'initial'> | undefined\n}\n\n/**\n * The steps of `layout`, for `useJsonForm`. With more than one, a step shows the errors it had\n * when the user left it, and none the first time they get to it, a step that failed Next revalidates as the user fixes it, a submit\n * before the last step moves on like Next, and a submit that fails because of an earlier step\n * goes back to it. Like Formisch's `useForm`, it reads the validation modes on the first render.\n */\nexport function useJsonFormSteps(form: FormStore, layout: FormLayout, modes: Modes): JsonFormSteps {\n  const list = layout.steps\n  const [index, setIndex] = useState(0)\n  // What the async methods and the event handlers read: always the latest.\n  const state = useRef({\n    index: 0,\n    // The errors each step had when the user left it, by the JSON of each field's path.\n    left: new Map<number, Map<string, Errors>>(),\n    // The steps that failed Next, and haven't passed since.\n    failed: new Set<number>(),\n    // The field to focus once the step it is on has rendered.\n    focus: undefined as FieldPath | undefined,\n    // Whether a submit on the last step is on its way through Formisch.\n    submitting: false,\n    modes,\n  })\n\n  const methods = useMemo(() => {\n    const at = state.current\n\n    async function goTo(target: number): Promise<boolean> {\n      if (!Number.isInteger(target) || target < 0 || target >= list.length) {\n        throw new RangeError(`No step ${target}. The form has ${list.length}.`)\n      }\n      if (target <= at.index) {\n        move(target)\n        return true\n      }\n      const { issues } = await validate(form)\n      for (let step = at.index; step < target; step++) {\n        const found = issuesOfStep(list[step] as LayoutStep, issues)\n        if (found.length) {\n          stop(step, found)\n          return false\n        }\n        at.failed.delete(step)\n      }\n      move(target)\n      return true\n    }\n\n    /**\n     * Moves to a step as the user left it: with the errors it had then, and none the first time, and\n     * revalidating if it failed Next. Validating the steps before set errors on its fields, which\n     * the user never saw.\n     */\n    function move(target: number) {\n      leave()\n      const errors = at.left.get(target)\n      for (const path of fieldPathsOf(list[target] as LayoutStep, getInput(form))) {\n        setErrors(form, { path, errors: errors?.get(JSON.stringify(path)) ?? null } as never)\n      }\n      at.index = target\n      setIndex(target)\n    }\n\n    /** Keeps the errors of the current step, for when the user comes back to it. */\n    function leave() {\n      const paths = fieldPathsOf(list[at.index] as LayoutStep, getInput(form))\n      const errors = paths.map((path): [string, Errors] => [\n        JSON.stringify(path),\n        getErrors(form, { path } as never),\n      ])\n      at.left.set(at.index, new Map(errors))\n    }\n\n    /** Stays on, or goes to, the step at `target`, with its issues shown. */\n    function stop(target: number, found: readonly StepIssue[]) {\n      at.failed.add(target)\n      // A group or an array has no element: the first field that has one gets the focus.\n      const path = found.find((issue) => issue.field.role === 'value')?.path\n      if (target === at.index) {\n        if (path) focus(form, { path: path as never })\n        return\n      }\n      leave()\n      at.focus = path\n      at.index = target\n      setIndex(target)\n    }\n\n    const events: FieldEvents = (event) => {\n      // In the other modes, Formisch revalidates a field with errors itself.\n      const validateMode = at.modes.validate ?? 'submit'\n      if (!at.failed.has(at.index) || validateMode !== 'submit' || form.isSubmitted) return\n      if (event === (at.modes.revalidate ?? 'input')) void validate(form)\n    }\n\n    /** After a failed submit: back to the first step before this one with issues, if any. */\n    async function afterSubmit() {\n      const { issues } = await validate(form)\n      const step = list.findIndex((each) => issuesOfStep(each, issues).length)\n      if (step !== -1 && step < at.index) stop(step, issuesOfStep(list[step] as LayoutStep, issues))\n    }\n\n    const next = () => (at.index === list.length - 1 ? Promise.resolve(false) : goTo(at.index + 1))\n    const back = () => {\n      if (at.index > 0) move(at.index - 1)\n    }\n    return { goTo, next, back, events, afterSubmit }\n  }, [form, list])\n\n  // The field a step was stopped on, once the step has rendered.\n  useEffect(() => {\n    const path = state.current.focus\n    state.current.focus = undefined\n    if (path) focus(form, { path: path as never })\n  }, [form, index])\n\n  const stepped = list.length > 1\n  useEffect(() => {\n    if (!stepped) return\n    fieldEvents.set(form, methods.events)\n    // Before the last step, a submit, like Enter in a step with a single text input, is a Next.\n    // It is caught on its way down to the form, before Formisch's own handler sees it.\n    const onSubmit = (event: Event) => {\n      if (event.target !== formElementOf(form)) return\n      if (state.current.index === list.length - 1) {\n        state.current.submitting = true\n        return\n      }\n      event.preventDefault()\n      event.stopImmediatePropagation()\n      void methods.next()\n    }\n    document.addEventListener('submit', onSubmit, { capture: true })\n    return () => {\n      fieldEvents.delete(form)\n      document.removeEventListener('submit', onSubmit, { capture: true })\n    }\n  }, [form, list, methods, stepped])\n\n  // A submit that fails because of a step before the last, e.g. on a form rule, goes back to it.\n  // React can batch the start and the end of a submit into one render, so the submit is marked\n  // as it starts, and each render checks whether Formisch has finished it.\n  const submitting = form.isSubmitting\n  useEffect(() => {\n    if (!state.current.submitting || submitting) return\n    state.current.submitting = false\n    if (!form.isValid) void methods.afterSubmit()\n  })\n\n  return useMemo(\n    () => ({\n      list,\n      index,\n      current: list[index] as LayoutStep,\n      isFirst: index === 0,\n      isLast: index === list.length - 1,\n      next: methods.next,\n      back: methods.back,\n      goTo: methods.goTo,\n    }),\n    [list, index, methods],\n  )\n}\n\n/** The `<form>` Formisch's `<Form>` renders, which it keeps on the store for its `submit()`. */\nfunction formElementOf(form: FormStore): HTMLFormElement | undefined {\n  return (form as unknown as { '~internal'?: { element?: HTMLFormElement } })['~internal']?.element\n}\n","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 { fieldEventsOf } from './json-form-steps'\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  // In a form with steps, a step that failed Next revalidates on a change of its items too.\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: () => {\n        insert(form, { path: at, initialInput: builder.getItemInput(field) as never })\n        fieldEventsOf(form)?.('input')\n      },\n      remove: (index: number) => {\n        remove(form, { path: at, at: index })\n        fieldEventsOf(form)?.('input')\n      },\n      move: (from: number, to: number) => {\n        move(form, { path: at, from, to })\n        fieldEventsOf(form)?.('input')\n      },\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 { fieldEventsOf } from './json-form-steps'\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 { form } = of\n  const setInput = useCallback(\n    (input: unknown) => {\n      field.onChange(coerceInput(input, node) as never)\n      fieldEventsOf(form)?.('input')\n    },\n    [field, node, form],\n  )\n  // In a form with steps, a step that failed Next revalidates on these events too.\n  const inputProps =\n    of.steps.list.length > 1\n      ? {\n          ...field.props,\n          onFocus: () => {\n            field.props.onFocus()\n            fieldEventsOf(form)?.('touch')\n          },\n          onChange: (event: Parameters<typeof field.props.onChange>[0]) => {\n            field.props.onChange(event)\n            fieldEventsOf(form)?.('input')\n            fieldEventsOf(form)?.('change')\n          },\n          onBlur: () => {\n            field.props.onBlur()\n            fieldEventsOf(form)?.('blur')\n          },\n        }\n      : field.props\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={inputProps}\n      setInput={setInput}\n    />\n  )\n}\n","import { dotPathOf, type FieldNode, toFieldPath } from '@whatsaaaa/form-builder-schema'\nimport type { ComponentType, ReactElement, ReactNode } 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) =>\n    renderField(ctx, node, indexes, dotPathOf(node) ?? `#${position}`, (inner) =>\n      renderFields(ctx, node.children, inner),\n    ),\n  )\n}\n\n/**\n * Renders one field with its component. `children` renders the fields inside a group, or inside\n * the item of an array, with the indexes of the items they are in.\n */\nexport function renderField(\n  ctx: RenderContext,\n  node: FieldNode,\n  indexes: readonly number[],\n  key: string,\n  children: (indexes: readonly number[]) => ReactNode,\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  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          {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) => 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, dotPathOf, findField } from '@whatsaaaa/form-builder-schema'\nimport type { ReactElement } from 'react'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderField, renderFields, 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, [], dotPathOf(node) ?? '#0', (indexes) =>\n    renderFields(ctx, node.children, indexes),\n  )\n}\n","import { type IsFieldShown, type LayoutNode, shownNodes } from '@whatsaaaa/form-builder-schema'\nimport { type ComponentType, Fragment, type ReactElement, type ReactNode } from 'react'\nimport type { LayoutComponents, RowProps, SectionProps } from './field-components'\nimport { type RenderContext, renderField } from './render-fields'\n\n/** What `<JsonFields>` renders a layout with. */\nexport interface LayoutContext extends RenderContext {\n  layoutComponents: LayoutComponents\n  /** The content of the layout's slots, by name. */\n  slots: Readonly<Record<string, ReactNode>>\n  /** False for a field left out with `except`. */\n  isShown: IsFieldShown\n}\n\n/**\n * Renders layout nodes. A field left out drops out, and so does a section or a row left without\n * fields. `indexes` are the indexes of the array items the nodes are in, outermost first.\n */\nexport function renderLayout(\n  ctx: LayoutContext,\n  nodes: readonly LayoutNode[],\n  indexes: readonly number[],\n): ReactElement[] {\n  return shownNodes(nodes, indexes, ctx.isShown).map((node) => renderNode(ctx, node, indexes))\n}\n\nfunction renderNode(\n  ctx: LayoutContext,\n  node: LayoutNode,\n  indexes: readonly number[],\n): ReactElement {\n  const { key } = node\n  switch (node.type) {\n    case 'field':\n      return renderField(ctx, node.node, indexes, key, (inner) =>\n        renderLayout(ctx, node.children, inner),\n      )\n    case 'section': {\n      // The layout was checked for components.\n      const Section = ctx.layoutComponents.section as ComponentType<SectionProps>\n      return (\n        <Section key={key} section={node.section}>\n          {renderLayout(ctx, node.children, indexes)}\n        </Section>\n      )\n    }\n    case 'row': {\n      const Row = ctx.layoutComponents.row as ComponentType<RowProps>\n      return (\n        <Row key={key} row={node.row} spans={node.children.map((cell) => cell.span)}>\n          {(index) => renderNode(ctx, node.children[index] as LayoutNode, indexes)}\n        </Row>\n      )\n    }\n    case 'slot':\n      return <Fragment key={key}>{ctx.slots[node.name]}</Fragment>\n  }\n}\n","import {\n  checkComponents,\n  checkLayoutComponents,\n  dotPathOf,\n  type FieldNode,\n  type LayoutNode,\n  selectFields,\n} from '@whatsaaaa/form-builder-schema'\nimport { Fragment, type ReactElement, type ReactNode } from 'react'\nimport type { FieldComponents, LayoutComponents } from './field-components'\nimport { type LayoutContext, renderLayout } from './render-layout'\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  /** Defaults to the layout components `useJsonForm` got. */\n  layoutComponents?: LayoutComponents | undefined\n  /** The content of the layout's slots, by name: `{ submit: <button type=\"submit\">Save</button> }`. */\n  slots?: Readonly<Record<string, ReactNode>> | undefined\n  /** Renders only these fields, by path, in the order of the definition, without the layout. */\n  only?: readonly string[] | undefined\n  /**\n   * Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. A section or a\n   * row left without fields drops out too.\n   */\n  except?: readonly string[] | undefined\n  /** Renders the step at this index instead of the current one, e.g. on a review page. */\n  step?: number | undefined\n}\n\n/**\n * Renders the fields of a `useJsonForm` form with your components, one per field type, where the\n * definition's `layout` puts them: the current step, with its sections, rows and slots. It renders\n * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.\n */\nexport function JsonFields(props: JsonFieldsProps): ReactElement {\n  const { of, only, except } = props\n  const ctx: RenderContext = { of, components: resolveComponents(props.components, of) }\n  const nodes = selectFields(of.fields, { only, except })\n  // Without a layout, it renders the fields the way it always did, and so with `only`.\n  if (only || !of.definition.layout) {\n    checkComponents(nodes, ctx.components)\n    return <>{renderFields(ctx, nodes, [])}</>\n  }\n\n  const { layout, steps } = of\n  const left = new Set(except)\n  const layoutCtx: LayoutContext = {\n    ...ctx,\n    layoutComponents: props.layoutComponents ?? of.layoutComponents ?? {},\n    slots: props.slots ?? {},\n    isShown: (node) => !left.has(dotPathOf(node) ?? ''),\n  }\n  checkComponents(\n    layout.steps.flatMap((step) => fieldsOf(step.children)),\n    ctx.components,\n  )\n  checkLayoutComponents(layout, layoutCtx.layoutComponents, layoutCtx.slots)\n\n  const index = props.step ?? steps.index\n  const step = steps.list[index]\n  if (!step) throw new RangeError(`No step ${props.step}. The form has ${steps.list.length}.`)\n  // Keyed by the step, so another step's fields don't take over this one's components.\n  return <Fragment key={index}>{renderLayout(layoutCtx, step.children, [])}</Fragment>\n}\n\n/** Every field of the nodes, display elements written in the layout included. */\nfunction fieldsOf(nodes: readonly LayoutNode[]): FieldNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === 'slot') return []\n    const inner = fieldsOf(node.children)\n    return node.type === 'field' ? [node.node, ...inner] : inner\n  })\n}\n","import { type FormSchema, type FormStore, useForm, type ValidationMode } from '@formisch/react'\nimport {\n  createSchemaBuilder,\n  type FieldNode,\n  type FormLayout,\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, LayoutComponents } from './field-components'\nimport { type JsonFormSteps, useJsonFormSteps } from './json-form-steps'\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  /** Your component for each layout type the definition's `layout` uses, like `section`. */\n  layoutComponents?: LayoutComponents\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 layout components from the options, if any. */\n  readonly layoutComponents: LayoutComponents | undefined\n  /** The definition's fields as a tree, for `<JsonFields only>` and `<JsonField>`. */\n  readonly fields: readonly FieldNode[]\n  /** The definition's layout, the way `<JsonFields>` renders it. */\n  readonly layout: FormLayout\n  /** The layout's steps: the current one, and Next, Back and Go to. A form without steps has one. */\n  readonly steps: JsonFormSteps\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 and layout 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      layout: builder.getLayout(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 steps = useJsonFormSteps(form, built.layout, options)\n  const { components, layoutComponents } = options\n  return useMemo(\n    () => ({\n      form,\n      definition: built.definition,\n      builder: built.builder,\n      components,\n      layoutComponents,\n      fields: built.fields,\n      layout: built.layout,\n      steps,\n    }),\n    [form, built, components, layoutComponents, steps],\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.2.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.14.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"
+  }
+}