All files / blong-browser/src/components/Editor/stories CustomEditors.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * CustomEditors story — mirrors ut-prime's CustomEditors pattern.
 *
 * A custom `Period` editor component is registered via the `editors` prop.
 * It receives `Input`, `Label`, and `ErrorLabel` factory components and lays
 * out the `period` (integer) + `unit` (select) fields in a single grid row.
 * The `Period.properties` static array tells the framework which schema fields
 * the editor covers so they are correctly tracked for validation and visibility.
 */
import type {Meta} from '@storybook/react-vite';
import type {ICustomEditorProps} from '../../Form/FormContext.js';
import type {StoryFn} from '../Editor.stories.js';
import {Editor} from '../Editor.js';

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

function Period({Input, Label, ErrorLabel}: ICustomEditorProps) {
    return (
        <>
            <ErrorLabel />
            <div className="field grid w-full mx-0">
                <Label
                    className="col-12 md:col-2"
                    name="period"
                />
                <Input
                    fieldClass="md:col-4"
                    name="period"
                />
                <Input
                    fieldClass="md:col-6"
                    name="unit"
                />
            </div>
        </>
    );
}

Period.properties = ['period', 'unit'];

export const CustomEditors: StoryFn = () => (
    <Editor
        schema={{
            properties: {
                unit: {
                    title: 'Unit',
                    widget: {
                        type: 'select',
                        options: [
                            {value: 'minutes', label: 'Minutes'},
                            {value: 'hours', label: 'Hours'},
                            {value: 'days', label: 'Days'},
                            {value: 'months', label: 'Months'},
                        ],
                    },
                },
                period: {
                    title: 'Expiration period',
                    type: 'integer',
                },
            },
        }}
        cards={{
            edit: {label: 'Expiration', widgets: ['Period']},
        }}
        editors={{Period}}
        value={{period: 5, unit: 'days'}}
        editable
        editMode
        layout="edit"
        layouts={{edit: ['edit']}}
    />
);