schema-components 1.7.0 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +61 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
## [1.7.1](https://github.com/Mearman/schema-components/compare/v1.7.0...v1.7.1) (2026-05-14)
|
|
2
|
+
|
|
3
|
+
### Documentation
|
|
4
|
+
|
|
5
|
+
* update README and add Storybook stories for visibility, ordering, and per-field validation ([4be4b6f](https://github.com/Mearman/schema-components/commit/4be4b6feaaa4819937280c010eacb3f36a521a54))
|
|
6
|
+
|
|
1
7
|
## [1.7.0](https://github.com/Mearman/schema-components/compare/v1.6.0...v1.7.0) (2026-05-14)
|
|
2
8
|
|
|
3
9
|
### Features
|
package/README.md
CHANGED
|
@@ -525,6 +525,25 @@ Server Components: `<SchemaView>` accepts a `widgets` prop directly (no React co
|
|
|
525
525
|
|
|
526
526
|
Validation uses the original Zod schema (if input was Zod) or `z.fromJSONSchema()` (if input was JSON Schema / OpenAPI).
|
|
527
527
|
|
|
528
|
+
### Per-field validation errors
|
|
529
|
+
|
|
530
|
+
Add `onValidationError` to individual field overrides to receive errors for specific fields:
|
|
531
|
+
|
|
532
|
+
```tsx
|
|
533
|
+
<SchemaComponent
|
|
534
|
+
schema={userSchema}
|
|
535
|
+
value={user}
|
|
536
|
+
onChange={setUser}
|
|
537
|
+
validate
|
|
538
|
+
fields={{
|
|
539
|
+
email: { onValidationError: (err) => setEmailError(err) },
|
|
540
|
+
name: { onValidationError: (err) => setNameError(err) },
|
|
541
|
+
}}
|
|
542
|
+
/>
|
|
543
|
+
```
|
|
544
|
+
|
|
545
|
+
Errors are dispatched based on Zod error paths. The root-level `onValidationError` still receives all errors.
|
|
546
|
+
|
|
528
547
|
## Discriminated unions
|
|
529
548
|
|
|
530
549
|
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({
|
|
|
578
597
|
|
|
579
598
|
Defaults propagate through nested objects — each field uses its own default independently.
|
|
580
599
|
|
|
600
|
+
## Field visibility
|
|
601
|
+
|
|
602
|
+
Hide fields conditionally using the `visible` override:
|
|
603
|
+
|
|
604
|
+
```tsx
|
|
605
|
+
<SchemaComponent
|
|
606
|
+
schema={paymentSchema}
|
|
607
|
+
value={payment}
|
|
608
|
+
fields={{
|
|
609
|
+
cardNumber: { visible: payment.method === "card" },
|
|
610
|
+
sortCode: { visible: payment.method === "bank" },
|
|
611
|
+
}}
|
|
612
|
+
/>
|
|
613
|
+
```
|
|
614
|
+
|
|
615
|
+
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.
|
|
616
|
+
|
|
617
|
+
## Field ordering
|
|
618
|
+
|
|
619
|
+
Control the order fields appear in rendered objects using `order`:
|
|
620
|
+
|
|
621
|
+
```tsx
|
|
622
|
+
<SchemaComponent
|
|
623
|
+
schema={userSchema}
|
|
624
|
+
value={user}
|
|
625
|
+
fields={{
|
|
626
|
+
email: { order: 1 },
|
|
627
|
+
name: { order: 2 },
|
|
628
|
+
role: { order: 3 },
|
|
629
|
+
}}
|
|
630
|
+
/>
|
|
631
|
+
```
|
|
632
|
+
|
|
633
|
+
Lower `order` values render first. Fields without `order` keep their insertion order and appear after ordered fields. Can also be set in schema metadata:
|
|
634
|
+
|
|
635
|
+
```tsx
|
|
636
|
+
const schema = z.object({
|
|
637
|
+
summary: z.string().meta({ order: 1 }),
|
|
638
|
+
title: z.string().meta({ order: 2 }),
|
|
639
|
+
});
|
|
640
|
+
```
|
|
641
|
+
|
|
581
642
|
## Server Components
|
|
582
643
|
|
|
583
644
|
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.
|