@petrarca/sonnet-forms 0.5.0 → 0.7.0

package/README.md

@@ -1,276 +1,101 @@
 # @petrarca/sonnet-forms
 
-Schema-driven form renderer and field components for the Petrarca Sonnet
-component library.
+Schema-driven forms for the Petrarca Sonnet component library. One component,
+`JsonSchemaFormRenderer`, takes a JSON Schema and a data object and produces
+labelled, validated controls.
 
-## What's included
+## What it provides
 
-**JsonSchemaFormRenderer** — Renders a complete form from a JSON Schema with
-automatic widget resolution, validation, nested objects, arrays, and custom
-UI schema overrides.
+**The renderer.** `$ref` resolution, `if`/`then`/`else` and `allOf`/`anyOf`
+flattening against the current values, schema defaults, nested objects and
+arrays, buffered or live editing, and a change set on save.
 
-**Form field components** — Standalone fields with label, description, error,
-and compact mode: `FormInput`, `FormTextarea`, `FormSelect`, `FormMultiSelect`,
-`FormCheckbox`, `FormTagsInput`, `FormNumberInput`, `FormQuantityInput`.
+**A widget registry.** Sixteen built-in controls covering text, numbers,
+quantities, enums, checkboxes, tags, arrays, objects, entity references and
+embedded JSON, plus your own controls keyed by `x-ui-widget`. A parallel
+template registry makes the structure around a field -- the array-item row, the
+object container, the group chrome -- replaceable without touching the widgets.
 
-**Widget system** — Extensible widget registry mapping schema types/formats to
-UI controls. Built-in widgets for text, number, select, checkbox, textarea,
-tags, quantity, arrays, objects, entity references, and JSON editing.
+**Layout.** Rows, tabs, steps and sections, declared as `x-ui-*` hints on the
+schema or in a UI schema passed beside it.
 
----
+**Standalone field components.** `FormInput`, `FormTextarea`, `FormSelect`,
+`FormMultiSelect`, `FormCheckbox`, `FormNumberInput`, `FormQuantityInput` and
+`FormTagsInput`, for labelled inputs outside a schema-driven form.
+
+**Change tracking.** `onUpdate` reports what changed, including inside arrays,
+so a caller can send a targeted update rather than the whole object.
 
 ## Install
 
 ```bash
-pnpm add @petrarca/sonnet-forms @petrarca/sonnet-ui @petrarca/sonnet-core
+pnpm add @petrarca/sonnet-forms
 ```
 
-Peer dependencies: `react >=19`, `react-dom >=19`, `tailwindcss`.
+`@petrarca/sonnet-core` and `@petrarca/sonnet-ui` are regular dependencies and
+arrive with it.
 
----
+| Peer | Range | Needed for |
+|---|---|---|
+| `react`, `react-dom` | `>=19` | Everything |
+| `tailwindcss` | `>=3` | The classes every component emits |
 
-## Basic usage
+The output assumes `sonnet-ui`'s stylesheet and Tailwind preset are already
+wired up. Do that first -- see
+[sonnet-ui: getting started](../sonnet-ui/docs/usage/getting-started.md).
 
-### JsonSchemaFormRenderer
+## Usage
 
 ```tsx
 import { JsonSchemaFormRenderer } from "@petrarca/sonnet-forms";
+import type { JsonSchema } from "@petrarca/sonnet-core/schema";
 
-const schema = {
+const WIDGET_SCHEMA: JsonSchema = {
+  title: "Widget",
   type: "object",
+  required: ["name"],
   properties: {
-    name:  { type: "string", title: "Name" },
-    email: { type: "string", format: "email", title: "Email" },
-    age:   { type: "integer", title: "Age" },
+    name: { type: "string", title: "Name" },
+    status: {
+      type: "string",
+      title: "Status",
+      enum: ["draft", "active", "retired"],
+      default: "draft",
+    },
+    notes: { type: "string", title: "Notes", "x-ui-widget": "textarea" },
   },
-  required: ["name", "email"],
 };
 
 <JsonSchemaFormRenderer
-  schema={schema}
-  data={formData}
-  onUpdate={(data, changedFields) => save(data)}
-  onCancel={handleClose}
-  showActions
-  saveLabel="Save"
-/>
-```
-
-### Key props
-
-| Prop | Type | Default | Purpose |
-|---|---|---|---|
-| `schema` | `JsonSchema` | required | JSON Schema describing the form |
-| `data` | `Record<string, unknown>` | required | Current form values |
-| `onUpdate` | `(data, changedFields, diff) => void` | — | Called on save |
-| `onCancel` | `() => void` | — | Called on cancel |
-| `onChange` | `(data) => void` | — | Called on every field change (use instead of `onUpdate` when managing your own buttons) |
-| `showActions` | `boolean` | `false` | Render built-in Save / Cancel buttons inside the form |
-| `showCancel` | `boolean` | `true` | Show the Cancel button (requires `showActions`) |
-| `saveLabel` | `string` | `"Save"` | Save button label |
-| `cancelLabel` | `string` | `"Cancel"` | Cancel button label |
-| `showExtraProperties` | `boolean` | `false` | Preserve form keys not in the schema. Set `true` for open-ended data (e.g. graph node properties) |
-| `uiSchema` | `Record<string, UISchema>` | — | Per-field UI overrides |
-| `widgets` | `WidgetRegistry` | `DEFAULT_WIDGETS` | Custom widget map |
-| `deferStateUpdates` | `boolean` | `false` | Update state on blur instead of on change |
-
----
-
-## Schema construction
-
-The recommended pattern is Zod + `toJsonSchema()` with `.meta()` for UI hints:
-
-```ts
-import { z } from "zod";
-import { toJsonSchema } from "@petrarca/sonnet-core/schema";
-
-const UserSchema = z.object({
-  name: z.string().meta({
-    "x-ui-title": "Full name",
-    "x-ui-description": "As it appears on official documents.",
-  }),
-  role: z.enum(["admin", "user"]).meta({
-    "x-ui-title": "Role",
-    "x-ui-options": { enumNames: ["Administrator", "Standard user"] },
-  }),
-  bio: z.string().optional().meta({
-    "x-ui-title": "Bio",
-    "x-ui-widget": "textarea",
-  }),
-});
-
-// Convert once, store as a module-level constant:
-const USER_FORM_SCHEMA = toJsonSchema(UserSchema);
-```
-
-Or write the JSON Schema directly for dynamic / server-driven forms.
-
----
-
-## Schema UI annotations
-
-Annotate individual fields with `x-ui-*` to control rendering:
-
-| Annotation | Purpose |
-|---|---|
-| `"x-ui-title"` | Override the field label (`false` to hide) |
-| `"x-ui-description"` | Override the field description |
-| `"x-ui-widget"` | Force a specific widget: `"textarea"`, `"tags"`, `"entity-select"`, or a custom key |
-| `"x-ui-options"` | Widget-specific options (see widget docs) |
-| `"x-ui-order"` | Array of field names to control rendering order in an object |
-| `"x-ui-layout"` | Array layout config: `{ direction: "horizontal", columns, gap, compact }` |
-
----
-
-## onChange mode (external buttons)
-
-When you want to drive your own Submit button outside the form, omit `showActions`
-and use `onChange` instead of `onUpdate`:
-
-```tsx
-const [formData, setFormData] = useState({});
-
-<JsonSchemaFormRenderer
-  schema={schema}
-  data={formData}
-  onChange={setFormData}
-  // no showActions — caller owns the buttons
-/>
-
-<Button onClick={() => submit(formData)}>Submit</Button>
-```
-
----
-
-## UISchema
-
-Override rendering per-field without modifying the schema:
-
-```tsx
-<JsonSchemaFormRenderer
-  schema={schema}
-  data={data}
-  uiSchema={{
-    name:        { "x-ui-title": "Display name" },   // override label
-    internal_id: { "x-ui-title": false },             // hide label entirely
-    notes:       { "x-ui-widget": "textarea" },       // force widget
-  }}
-  onUpdate={onUpdate}
+  schema={WIDGET_SCHEMA}
+  data={widget}
   showActions
-/>
-```
-
----
-
-## Custom widgets
-
-Extend `DEFAULT_WIDGETS` with your own widget components:
-
-```ts
-import { DEFAULT_WIDGETS, type WidgetRegistry, type WidgetProps } from "@petrarca/sonnet-forms";
-
-function MyColorWidget({ value, onChange, schema }: WidgetProps) {
-  return (
-    <input
-      type="color"
-      value={String(value ?? "#000000")}
-      onChange={(e) => onChange(e.target.value)}
-    />
-  );
-}
-
-export const MY_WIDGETS: WidgetRegistry = {
-  ...DEFAULT_WIDGETS,
-  "color-picker": MyColorWidget,   // key matches "x-ui-widget": "color-picker" in schema
-};
-
-// Usage:
-<JsonSchemaFormRenderer schema={schema} data={data} widgets={MY_WIDGETS} onUpdate={onUpdate} showActions />
-```
-
-`WidgetProps` includes `formData` (the full current form state) — use this to
-build dependent widgets that react to sibling field values.
-
----
-
-## Dynamic schema (edit vs. create)
-
-To hide fields that are immutable after creation, delete them from a cloned
-schema. Also exclude them from `data` — if a key exists in `data` but not
-the schema, the form engine treats it as a dirty field immediately:
-
-```ts
-const schema = useMemo(() => {
-  if (!isEditing) return BASE_SCHEMA;
-  const s = structuredClone(BASE_SCHEMA);
-  delete s.properties?.app_key;   // read-only after creation
-  return s;
-}, [isEditing]);
-
-const data = isEditing
-  ? { name: entity.name }          // omit app_key from data too
-  : {};
+  saveLabel="Save changes"
+  onUpdate={(data, changedFields) => save(changedFields)}
+  onCancel={close}
+  showExtraProperties={false}
+/>;
 ```
 
----
-
-## Standalone field components
-
-Use field components directly outside the renderer — in sidebars, toolbars,
-or any custom form layout:
-
-```tsx
-import {
-  FormInput, FormTextarea, FormSelect,
-  FormCheckbox, FormMultiSelect, FormTagsInput,
-} from "@petrarca/sonnet-forms";
-
-<FormInput
-  label="Name"
-  description="Your full name"
-  value={name}
-  onChange={(e) => setName(e.currentTarget.value)}
-  error={nameError}
-/>
-
-<FormSelect
-  label="Role"
-  options={[{ value: "admin", label: "Admin" }, { value: "user", label: "User" }]}
-  value={role}
-  onChange={setRole}
-  clearable={false}
-/>
-
-<FormCheckbox
-  label="Active"
-  checked={active}
-  onChange={(checked) => setActive(checked === true)}
-/>
-
-<FormTextarea
-  label="Notes"
-  value={notes}
-  onChange={(e) => setNotes(e.currentTarget.value)}
-  autosize
-  minRows={3}
-  rightSection={<ClearButton />}
-  rightSectionWidth={40}
-/>
-```
-
-**Common props on all field components:**
-
-| Prop | Purpose |
-|---|---|
-| `label` | Field label. Pass `false` to suppress. |
-| `description` | Help text below the field |
-| `error` | Error message (also sets error styling) |
-| `compact` | Tighter vertical spacing |
-| `disabled` | Disables the field |
-| `wrapperClassName` | Class on the outer wrapper div |
-
----
+Hold the schema as a module-level constant; rebuilding it on every render
+re-resolves references and conditionals. `showExtraProperties` defaults to
+`true` and shows a card listing data keys absent from the schema -- most forms
+want it off. The twenty-four props, the three edit modes and what validation
+actually enforces are in [getting started](docs/usage/getting-started.md).
+
+## Documentation
+
+- [Usage guides](docs/usage/index.md) -- getting started, the
+  [`x-ui-*` vocabulary](docs/usage/ui-schema.md),
+  [layout](docs/usage/layout.md), [widgets](docs/usage/widgets.md),
+  [templates](docs/usage/templates.md),
+  [field components](docs/usage/field-components.md) and
+  [change tracking](docs/usage/change-tracking.md).
+- [Design docs](docs/design/index.md) -- form layout, nested fields and the
+  change-tracking model.
+- [Workspace documentation](../../docs/README.md) -- how the packages layer and
+  the shared schema extension contract.
 
 ## License
 
-See [LICENSE.md](../../LICENSE.md).
+Apache 2.0. See [LICENSE.md](../../LICENSE.md).