schema-components 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.8.0](https://github.com/Mearman/schema-components/compare/v1.7.1...v1.8.0) (2026-05-14)
+
+### Features
+
+* **build:** add headless renderer preview styles for storybook ([460536e](https://github.com/Mearman/schema-components/commit/460536e390e682121c3124e4ee338c953942634e))
+
+## [1.7.1](https://github.com/Mearman/schema-components/compare/v1.7.0...v1.7.1) (2026-05-14)
+
+### Documentation
+
+* update README and add Storybook stories for visibility, ordering, and per-field validation ([4be4b6f](https://github.com/Mearman/schema-components/commit/4be4b6feaaa4819937280c010eacb3f36a521a54))
+
 ## [1.7.0](https://github.com/Mearman/schema-components/compare/v1.6.0...v1.7.0) (2026-05-14)
 
 ### Features

package/README.md

@@ -525,6 +525,25 @@ Server Components: `<SchemaView>` accepts a `widgets` prop directly (no React co
 
 Validation uses the original Zod schema (if input was Zod) or `z.fromJSONSchema()` (if input was JSON Schema / OpenAPI).
 
+### Per-field validation errors
+
+Add `onValidationError` to individual field overrides to receive errors for specific fields:
+
+```tsx
+<SchemaComponent
+  schema={userSchema}
+  value={user}
+  onChange={setUser}
+  validate
+  fields={{
+    email: { onValidationError: (err) => setEmailError(err) },
+    name: { onValidationError: (err) => setNameError(err) },
+  }}
+/>
+```
+
+Errors are dispatched based on Zod error paths. The root-level `onValidationError` still receives all errors.
+
 ## Discriminated unions
 
 Discriminated unions (`z.discriminatedUnion` or JSON Schema `oneOf` with `const` properties) render as tabbed panels. Each tab is labelled by the discriminator's `const` value. Clicking a tab resets the value with the new discriminator.
@@ -578,6 +597,48 @@ const schema = z.object({
 
 Defaults propagate through nested objects — each field uses its own default independently.
 
+## Field visibility
+
+Hide fields conditionally using the `visible` override:
+
+```tsx
+<SchemaComponent
+  schema={paymentSchema}
+  value={payment}
+  fields={{
+    cardNumber: { visible: payment.method === "card" },
+    sortCode: { visible: payment.method === "bank" },
+  }}
+/>
+```
+
+When `visible: false`, the field is completely removed — no label, no empty placeholder, no hidden input. The parent component controls visibility based on the current value.
+
+## Field ordering
+
+Control the order fields appear in rendered objects using `order`:
+
+```tsx
+<SchemaComponent
+  schema={userSchema}
+  value={user}
+  fields={{
+    email: { order: 1 },
+    name: { order: 2 },
+    role: { order: 3 },
+  }}
+/>
+```
+
+Lower `order` values render first. Fields without `order` keep their insertion order and appear after ordered fields. Can also be set in schema metadata:
+
+```tsx
+const schema = z.object({
+  summary: z.string().meta({ order: 1 }),
+  title: z.string().meta({ order: 2 }),
+});
+```
+
 ## Server Components
 
 For read-only rendering in a React Server Component, use `<SchemaView>`. It has zero hooks — no `useContext`, no `useMemo`, no `useCallback` — so it works without the `"use client"` directive.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "schema-components",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "description": "React components that render UI from Zod schemas, JSON Schema, and OpenAPI documents",
     "type": "module",
     "main": "./dist/index.mjs",