Skip to content

Commit 351953c

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

File tree

9 files changed

+143
-22
lines changed

9 files changed

+143
-22
lines changed

‎.yarn/install-state.gz‎

2.91 KB
Binary file not shown.

‎docs/src/ArrayItems.mdx‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,45 @@
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](#uniqueitems) | * | 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

3244
## additional items
3345

‎docs/src/ArrayItems.stories.tsx‎

Lines changed: 35 additions & 1 deletion
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: {

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

‎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)