All files / blong-browser/src/components/Editor/stories ThumbIndexLayout.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * ThumbIndexLayout story — layout with PanelMenu orientation='left' navigation.
 * Three groups of cards accessible from a vertical accordion sidebar.
 */
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/ThumbIndexLayout', component: Editor};
export default meta;

const mock = (count: number) => Array.from({length: count}, (_, i) => `field${i + 1}`);
const mockSchema = (count: number) =>
    Object.fromEntries(mock(count).map(name => [name, {title: name}]));

export const ThumbIndexLayout: StoryFn = () => (
    <Editor
        schema={{properties: mockSchema(4)}}
        cards={{
            a1: {label: 'A 1', widgets: mock(3)},
            a2: {label: 'A 2', widgets: mock(2)},
            b1: {label: 'B 1', widgets: mock(2)},
            b2: {label: 'B 2', widgets: mock(1)},
            c1: {label: 'C 1', widgets: mock(4)},
            c2: {label: 'C 2', widgets: mock(1)},
            d:  {label: 'D',   widgets: mock(4)},
            e:  {label: 'E',   widgets: mock(2)},
            f1: {label: 'F 1', widgets: mock(1)},
            f2: {label: 'F 2', widgets: mock(1)},
            g:  {label: 'G',   widgets: mock(1)},
        }}
        editable
        layout="edit"
        layouts={{
            edit: {
                orientation: 'left',
                items: [
                    {id: 'ab',  label: 'A / B',   icon: 'pi pi-user',    widgets: [['a1', 'a2'], ['b1', 'b2']]},
                    {id: 'cd',  label: 'C and D', icon: 'pi pi-id-card', widgets: [['c1', 'c2'], ['d']]},
                    {id: 'efg', label: 'E, F, G', icon: 'pi pi-list',   widgets: [['e'], ['f1', 'f2'], ['g']]},
                ],
            },
        }}
    />
);