All files / blong-browser/src/components/Editor/stories MasterDetailPolymorphic.stories.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * MasterDetailPolymorphic story — blong-browser adaptation.
 *
 * A master table shows a list of shapes. Selecting a row reveals a type-specific
 * detail card (circle, square, triangle, rectangle, ellipse) based on `card.match`.
 * Each detail card uses `card.watch: 'shape'` to display the selected row's fields.
 */
import type {Meta} from '@storybook/react-vite';
import type {StoryFn} from '../Editor.stories.js';
import {Editor} from '../Editor.js';

const meta: Meta<typeof Editor> = {title: 'Editor/MasterDetailPolymorphic', component: Editor};
export default meta;

const shapeValue = {
    shape: [
        {name: 'Big circle', type: 'circle', radius: 100},
        {name: 'Small ellipse', type: 'ellipse', radius: 5, secondRadius: 4},
        {name: 'Big square', type: 'square', side1: 100},
        {name: 'Medium triangle', type: 'triangle', side1: 30, side2: 40, side3: 50},
        {name: 'Small rectangle', type: 'rectangle', side1: 2, side2: 4},
    ],
};

const common = {
    className: 'col-12 md:col-4',
    label: 'Shape properties',
    watch: 'shape',
};

export const MasterDetailPolymorphic: StoryFn = () => (
    <Editor
        schema={{
            properties: {
                shape: {
                    title: '',
                    type: 'array',
                    widget: {
                        type: 'table',
                        selectionMode: 'single',
                        columns: ['name', 'type'],
                    },
                    items: {
                        properties: {
                            name: {title: 'Name'},
                            type: {title: 'Type'},
                            radius: {title: 'Radius'},
                            secondRadius: {title: 'Second Radius'},
                            side1: {title: 'Side Length'},
                            side2: {title: 'Second Side'},
                            side3: {title: 'Third Side'},
                        },
                    },
                },
                radius: {title: 'Radius', type: 'number'},
                secondRadius: {title: 'Second Radius', type: 'number'},
                side1: {title: 'Side Length', type: 'number'},
                side2: {title: 'Second Side', type: 'number'},
                side3: {title: 'Third Side', type: 'number'},
            },
        }}
        cards={{
            shapes: {
                label: 'Shapes',
                className: 'col-12 md:col-4',
                widgets: ['shape'],
            },
            shapeCircle: {
                ...common,
                match: {type: 'circle'},
                widgets: ['radius'],
            },
            shapeEllipse: {
                ...common,
                match: {type: 'ellipse'},
                widgets: ['radius', 'secondRadius'],
            },
            shapeSquare: {
                ...common,
                match: {type: 'square'},
                widgets: ['side1'],
            },
            shapeRectangle: {
                ...common,
                match: {type: 'rectangle'},
                widgets: ['side1', 'side2'],
            },
            shapeTriangle: {
                ...common,
                match: {type: 'triangle'},
                widgets: ['side1', 'side2', 'side3'],
            },
        }}
        value={shapeValue}
        layout="edit"
        layouts={{
            edit: [
                'shapes',
                ['shapeCircle', 'shapeSquare', 'shapeTriangle', 'shapeRectangle', 'shapeEllipse'],
            ],
        }}
    />
);

MasterDetailPolymorphic.play = async ({canvas, userEvent}) => {
    // Wait for data to render
    const ellipseRow = await canvas.findByText('Small ellipse');
    await userEvent.click(ellipseRow);
    await new Promise(resolve => setTimeout(resolve, 200));
};