Skip to content

Commit 49642c3

Browse files
sagoldsagold
committed
docs: add draft-tabs for array-items
1 parent 710a992 commit 49642c3

File tree

9 files changed

+185
-31
lines changed

9 files changed

+185
-31
lines changed

‎.yarn/install-state.gz‎

2.91 KB
Binary file not shown.

‎docs/src/ArrayItems.mdx‎

Lines changed: 53 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,86 @@
1-
import { Meta, Canvas } from '@storybook/addon-docs';
2-
import { JsonForm } from '@sagold/react-json-editor';
31
import * as ArrayItems from './ArrayItems.stories';
2+
import { JsonForm } from '@sagold/react-json-editor';
3+
import { Markdown } from '@storybook/blocks';
4+
import { Meta, Canvas } from '@storybook/addon-docs';
5+
import { Tabs } from './components/Tabs';
46

57
<Meta title="ArrayItems" />
68

79
# Array Items
810

9-
> _json-schema_ has a set of definitions for array items. This section details how those definitions transfer to a user interface build with _@sagold/react-json-editor_ and its default widgets.
10-
11-
Validation of data is fully supported, the following list tracks support of the user interface:
12-
13-
| Status | Feature | Comments |
14-
| :----: | :------------------------------------ | :------------------------------------------------- |
15-
| ✅ | [items array-schema](#array-schema) | defined set of array items |
16-
| ❎ | [additionalItems](#additional-items) | ui does not support adding arbitrary data |
17-
| ✅ | [items object-schema](#object-schema) | object schema for child-items |
18-
| ✅ | [items oneOf](#one-of) |
19-
| ✅ | [length](#length) | support for **minItems** and **maxItems** |
20-
| ✅ | [if-then-else](#if-then-else) |
21-
| ❌ | enum | only supported by validation not by user interface |
22-
| ✅ | [not](#not) | validation only, exlude specific item types |
23-
| ✅ | [uniqueItems](#uniqueitems) | validation only, exclude redundant items |
24-
| ✅ | [contains](#contains) | validation only, ensure a specific item is present |
11+
> _json-schema_ has a set of definitions for array items. This section details how those definitions transfer to a user
12+
> interface build with _@sagold/react-json-editor_ and _@sagold/rje-mantine-widgets_.
13+
14+
Validation of data is fully supported, the following list tracks support by the user interface:
15+
16+
<Markdown>
17+
{`
18+
| Status | Feature | draft | Comments |
19+
| :----: | :------------------------------------ | :--: | :---------------------------------------------------- |
20+
| ❎ | [additionalItems](#additional-items) | <= 2019-09 | ui does not support adding arbitrary data |
21+
| ✅ | [contains](#contains) | * | validation only, ensure a specific item is present |
22+
| ❌ | enum | * | only supported by validation not by user interface |
23+
| ✅ | [items object-schema](#object-schema) | * | object schema for child-items |
24+
| ✅ | [items oneOf](#one-of) | * |
25+
| ✅ | [items array-schema](#array-schema) | <= 2019-09 | defined set of array items |
26+
| ✅ | [prefixItems](#array-schema) | >= 2020-12 | defined set of array items |
27+
| ✅ | [if-then-else](#if-then-else) | * |
28+
| ✅ | [length](#length) | * | support for **minItems** and **maxItems** |
29+
| ✅ | [not](#not) | * | validation only, exlude specific item types |
30+
| ✅ | [uniqueItems](#unique-items) | * | validation only, exclude redundant items |
31+
`}
32+
</Markdown>
2533

2634
## Array Schema
2735

28-
Fixed number and schema of array items
36+
Using array-items schema you define a JSON Schema for a fixed numer of array items. With no additional items defined,
37+
item edit options are disabled.
2938

30-
<Canvas className="inline" of={ArrayItems.ItemsArray} />
39+
<Tabs>
40+
<Canvas tabTitle="draft-2020-12" className="inline" of={ArrayItems.ItemsArray} />
41+
<Canvas tabTitle="draft-2019-09" className="inline" of={ArrayItems.ItemsArrayDraft2019} />
42+
</Tabs>
3143

32-
## additional items
44+
## Additional items
3345

3446
With items defined by an items-array, `additionalItems=undefined` or `additionalItems=true` will allow any additional child.
3547

36-
- **Note**, for a missing `additionalItems` setting, add-options are disabled
48+
- **Note** Keyword `additionalItems` has been removed with draft-2020-12
49+
- **Note** for a missing `additionalItems` setting, add-options are disabled
3750

38-
<Canvas className="inline" of={ArrayItems.AdditionalItemsUndefined} />
51+
<Tabs>
52+
<Canvas tabTitle="draft-2019-09" className="inline" of={ArrayItems.AdditionalItemsUndefined} />
53+
</Tabs>
3954

4055
With items defined by an items-array, `additionalItems=true`, the add option is available. Here, item is initialized with `null` as no schema can be derived. Thus, no input element is renderer (null-widget) for adding items. Any input items are accepted.
4156

4257
- **Note** This feature will need support to define custom data, initially offering an json-editor
4358

44-
<Canvas className="inline" of={ArrayItems.AdditionalItemsTrue} />
59+
<Tabs>
60+
<Canvas tabTitle="draft-2019-09" className="inline" of={ArrayItems.AdditionalItemsTrue} />
61+
</Tabs>
4562

4663
Preventing additional items will disable add-options and remove any undefined item from user form and exported data. In the following example, the array is initialized with three values:
4764

48-
<Canvas className="inline" of={ArrayItems.AdditionalItemsFalse} />
65+
<Tabs>
66+
<Canvas tabTitle="draft-2019-09" className="inline" of={ArrayItems.AdditionalItemsFalse} />
67+
</Tabs>
4968

5069
With items defined by an items-array and `additionalItems` set to a valid json-schema, items may be added in the given format.
5170

52-
<Canvas className="inline" of={ArrayItems.AdditionalItemsSchema} />
71+
<Tabs>
72+
<Canvas tabTitle="draft-2019-09" className="inline" of={ArrayItems.AdditionalItemsSchema} />
73+
</Tabs>
5374

5475
## Object Schema
5576

56-
Array items can contain any supported json-schema:
77+
An array object-schema defines the structure for all array-items which are not defined by an array-schema (items,
78+
prefixItems). Without length restrictions array edit-options are always enabled.
5779

58-
<Canvas className="inline" of={ArrayItems.ItemsObject} />
80+
<Tabs>
81+
<Canvas tabTitle="draft-2020-12" className="inline" of={ArrayItems.ItemsObject} />
82+
<Canvas tabTitle="draft-2019-09" className="inline" of={ArrayItems.ItemsObjectDraft2019} />
83+
</Tabs>
5984

6085
## One Of
6186

‎docs/src/ArrayItems.stories.tsx‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { JsonForm } from '@sagold/rje-mantine-widgets';
22
import type { Meta, StoryObj } from '@storybook/react-webpack5';
33
import { JsonSchema } from 'headless-json-editor';
44
import { MantineThemeDecorator } from './decorators/MantineThemeDecorator';
5+
import deepMerge from 'deepmerge';
6+
import { expect, within } from 'storybook/test';
57

68
const meta: Meta<typeof JsonForm> = {
79
title: 'docs/ArrayItems',
@@ -17,8 +19,40 @@ export const ItemsArray: Story = {
1719
validate: true,
1820
data: ['a title', 'a subtitle'],
1921
schema: {
22+
$schema: 'draft-2020-12',
23+
title: 'prefixItems: [schema, schema]',
24+
type: 'array',
25+
prefixItems: [
26+
{
27+
title: 'Title',
28+
type: 'string'
29+
},
30+
{
31+
title: 'Subtitle',
32+
type: 'string'
33+
}
34+
]
35+
}
36+
},
37+
play: async ({ canvas }) => {
38+
const arrayMenu = await canvas.findByRole('button', { name: 'array-menu' });
39+
expect(arrayMenu, 'should have actions disabled').toBeDisabled();
40+
41+
const arrayItems = await canvas.findAllByRole('array-listitem');
42+
expect(arrayItems, 'Should have rendered two items').toHaveLength(2);
43+
44+
const itemButton = within(arrayItems[0]).queryByRole('button');
45+
expect(itemButton, 'should NOT have rendered array actions').not.toBeInTheDocument();
46+
}
47+
};
48+
49+
export const ItemsArrayDraft2019: Story = deepMerge(ItemsArray, {
50+
args: {
51+
schema: {
52+
$schema: 'draft-2019-09',
2053
title: 'items: [schema, schema]',
2154
type: 'array',
55+
prefixItems: undefined,
2256
items: [
2357
{
2458
title: 'Title',
@@ -31,7 +65,7 @@ export const ItemsArray: Story = {
3165
]
3266
}
3367
}
34-
};
68+
});
3569

3670
export const ItemsArrayUnique: Story = {
3771
args: {
@@ -68,6 +102,7 @@ export const AdditionalItemsUndefined: Story = {
68102
validate: true,
69103
data: ['a title', 'a subtitle'],
70104
schema: {
105+
$schema: 'draft-2019-09',
71106
title: 'additionalItems: undefined',
72107
type: 'array',
73108
items: [
@@ -89,6 +124,7 @@ export const AdditionalItemsTrue: Story = {
89124
validate: true,
90125
data: ['a title', 'a subtitle', 'an additional item'],
91126
schema: {
127+
$schema: 'draft-2019-09',
92128
title: 'additionalItems: true',
93129
type: 'array',
94130
additionalItems: true,
@@ -111,6 +147,7 @@ export const AdditionalItemsFalse: Story = {
111147
validate: true,
112148
data: ['a title', 'a subtitle', 'an additional item'],
113149
schema: {
150+
$schema: 'draft-2019-09',
114151
title: 'additionalItems: false',
115152
type: 'array',
116153
additionalItems: false,
@@ -133,6 +170,7 @@ export const AdditionalItemsSchema: Story = {
133170
validate: true,
134171
data: ['a title', 'a subtitle', 'an additional item'],
135172
schema: {
173+
$schema: 'draft-2019-09',
136174
title: 'additionalItems: { type: "number" }',
137175
type: 'array',
138176
additionalItems: {
@@ -159,6 +197,7 @@ export const ItemsObject: Story = {
159197
addOptionalProps: false,
160198
data: [2023],
161199
schema: {
200+
$schema: 'draft-2020-12',
162201
title: 'items: { object }',
163202
type: 'array',
164203
items: {
@@ -183,9 +222,20 @@ export const ItemsObject: Story = {
183222
}
184223
}
185224
}
186-
} as JsonSchema
225+
},
226+
play: async ({ canvas }) => {
227+
const arrayMenu = await canvas.findByRole('button', { name: 'array-menu' });
228+
expect(arrayMenu, 'should have actions enabled').toBeEnabled();
229+
230+
const arrayItems = await canvas.findAllByRole('array-listitem');
231+
expect(arrayItems, 'Should have rendered one item').toHaveLength(1);
232+
}
187233
};
188234

235+
export const ItemsObjectDraft2019: Story = deepMerge(ItemsObject, {
236+
args: { schema: { $schema: 'draft-2019-09' } }
237+
});
238+
189239
export const OneOf: Story = {
190240
args: {
191241
validate: true,

‎docs/src/DateFormat.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Meta, Canvas } from '@storybook/addon-docs';
22
import * as DateWidgetStories from '../../packages/rje-mantine-widgets/src/widgets/datewidget/DateWidget.stories';
3+
import { Markdown } from '@storybook/blocks';
34

45
<Meta title="DateFormats" />
56

@@ -9,11 +10,15 @@ import * as DateWidgetStories from '../../packages/rje-mantine-widgets/src/widge
910
1011
Thus, working with dates and default date-based features your data needs to rely on one of the three stated formats:
1112

13+
<Markdown>
14+
{`
1215
| type | format | example |
1316
| :-------: | :----------------------- | :----------------------- |
1417
| date | YYYY-MM-DD | 2023-08-20 |
1518
| time | HH:mm:ssZ | 16:55:02Z |
1619
| date-time | YYYY-MM-DDTHH:mm:ss.sssZ | 2023-08-20T14:56:17.657Z |
20+
`}
21+
</Markdown>
1722

1823
The _date-time_-format is a [ISO 8601 date-time string format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) in UTC timezone and can be retrieved in javascript by `(new Date()).toISOString()`.
1924

‎docs/src/ObjectProperties.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Meta, Canvas } from '@storybook/addon-docs';
22
import * as ObjectProperties from './ObjectProperties.stories';
3+
import { Markdown } from '@storybook/blocks';
34

45
<Meta title="ObjectProperties" />
56

@@ -9,6 +10,8 @@ import * as ObjectProperties from './ObjectProperties.stories';
910
1011
Validation of data is fully supported, the following list tracks support of the user interface:
1112

13+
<Markdown>
14+
{`
1215
| Status | Feature | Comments |
1316
| :----: | :--------------------------------------------- | :------------------------------------------------------------------------ |
1417
| ✅ | [properties](#properties) |
@@ -20,6 +23,8 @@ Validation of data is fully supported, the following list tracks support of the
2023
| ✅ | [if-then-else](#if-then-else) | subschema are merged to single schema. Validation treats schemas separate |
2124
| ❌ | patternProperties | not yet supported |
2225
| ❌ | anyOf | not yet supported |
26+
`}
27+
</Markdown>
2328

2429
## Properties
2530

‎docs/src/components/Tabs.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { useState } from 'react';
2+
3+
export function Tabs({ children }: { children: ReactNode[] }) {
4+
const [tabIndex, setTabIndex] = useState(0);
5+
6+
if (!Array.isArray(children)) {
7+
children = [children];
8+
}
9+
10+
return (
11+
<div>
12+
<ul
13+
style={{
14+
display: 'flex',
15+
listStyle: 'none',
16+
margin: 0,
17+
gap: 8,
18+
padding: 0,
19+
alignItems: 'center',
20+
border: '1px solid #fff'
21+
}}
22+
>
23+
{children.map((child, index) => (
24+
<li
25+
key={`${index} - ${child.props.tabTitle}`}
26+
onClick={() => setTabIndex(index)}
27+
style={{
28+
cursor: tabIndex === index ? '' : 'pointer',
29+
backgroundColor:
30+
tabIndex === index ? 'var(--mantine-color-gray-0, hsla(203, 50 %, 30 %, 0.05))' : '',
31+
// fontWeight: tabIndex === index ? 'bold' : '',
32+
textDecoration: tabIndex === index ? '' : 'underline',
33+
padding: '4px 12px',
34+
margin: 0
35+
}}
36+
>
37+
{child.props.tabTitle}
38+
</li>
39+
))}
40+
</ul>
41+
{children.map((child, index) => (
42+
<div style={{ display: index === tabIndex ? 'block' : 'none' }}>{child}</div>
43+
))}
44+
</div>
45+
);
46+
}

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"@storybook/addon-docs": "^9.1.0-alpha.2",
4343
"@storybook/addon-links": "^9.1.0-alpha.2",
4444
"@storybook/addon-webpack5-compiler-swc": "^3.0.0",
45+
"@storybook/blocks": "^8.6.14",
4546
"@storybook/react-webpack5": "^9.1.0-alpha.2",
4647
"@storybook/test-runner": "^0.23.0-next.3",
4748
"@testing-library/dom": "^10.4.0",
@@ -56,6 +57,7 @@
5657
"@typescript-eslint/parser": "^6.4.1",
5758
"concurrently": "^9.1.2",
5859
"css-loader": "^6.8.1",
60+
"deepmerge": "^4.3.1",
5961
"eslint": "^8.57.1",
6062
"eslint-import-resolver-typescript": "^3.7.0",
6163
"eslint-plugin-import": "^2.31.0",

‎packages/rje-mantine-widgets/src/widgets/arraywidget/ArrayWidget.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export const ArrayWidget = widget<ArrayNode<ArrayOptions>>(({ editor, node, opti
157157
{node.children
158158
.filter((child) => !child.options.hidden)
159159
.map((child) => (
160-
<Table.Tr key={child.id}>
160+
<Table.Tr key={child.id} role="array-listitem" aria-rowindextext={child.pointer}>
161161
{sortableEnabled && DRAG_HANDLE_COLUMN}
162162
<Table.Td width={'100%'} style={{ position: 'relative' }}>
163163
<Widget

‎yarn.lock‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2380,6 +2380,25 @@ __metadata:
23802380
languageName: node
23812381
linkType: hard
23822382

2383+
"@storybook/blocks@npm:^8.6.14":
2384+
version: 8.6.14
2385+
resolution: "@storybook/blocks@npm:8.6.14"
2386+
dependencies:
2387+
"@storybook/icons": ^1.2.12
2388+
ts-dedent: ^2.0.0
2389+
peerDependencies:
2390+
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
2391+
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
2392+
storybook: ^8.6.14
2393+
peerDependenciesMeta:
2394+
react:
2395+
optional: true
2396+
react-dom:
2397+
optional: true
2398+
checksum: 9ae5058a098bc71c932ab7eac0187fd7ee85d72f5d3f418aa67b7c3234cfe2b4cf1aa699bbe59e913a200e4267c70df7e626d394900c3092d6eff5f6a4e328c8
2399+
languageName: node
2400+
linkType: hard
2401+
23832402
"@storybook/builder-webpack5@npm:9.1.0-alpha.2":
23842403
version: 9.1.0-alpha.2
23852404
resolution: "@storybook/builder-webpack5@npm:9.1.0-alpha.2"
@@ -9850,6 +9869,7 @@ __metadata:
98509869
"@storybook/addon-docs": ^9.1.0-alpha.2
98519870
"@storybook/addon-links": ^9.1.0-alpha.2
98529871
"@storybook/addon-webpack5-compiler-swc": ^3.0.0
9872+
"@storybook/blocks": ^8.6.14
98539873
"@storybook/react-webpack5": ^9.1.0-alpha.2
98549874
"@storybook/test-runner": ^0.23.0-next.3
98559875
"@testing-library/dom": ^10.4.0
@@ -9864,6 +9884,7 @@ __metadata:
98649884
"@typescript-eslint/parser": ^6.4.1
98659885
concurrently: ^9.1.2
98669886
css-loader: ^6.8.1
9887+
deepmerge: ^4.3.1
98679888
eslint: ^8.57.1
98689889
eslint-import-resolver-typescript: ^3.7.0
98699890
eslint-plugin-import: ^2.31.0

0 commit comments

Comments
 (0)