Skip to content

Commit 1e967af

Browse files
myieyemyieye
committed
Add story for comparing inputs in different states
1 parent 6e36635 commit 1e967af

1 file changed

Lines changed: 249 additions & 0 deletions

File tree

‎frontend/viewer/src/stories/editor/fields/1_overview.stories.svelte‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<script module lang="ts">
2+
import {MultiSelect, MultiWsInput, Select, WsInput, RichWsInput, RichMultiWsInput} from '$lib/components/field-editors';
3+
import {defineMeta} from '@storybook/addon-svelte-csf';
4+
import * as Editor from '$lib/components/editor';
5+
import {writingSystems as demoWritingSystems} from '$lib/demo-entry-data';
6+
7+
const { Story } = defineMeta({
8+
title: 'editor/fields/overview',
9+
});
10+
11+
const ws1 = demoWritingSystems.analysis[0];
12+
const ws2 = demoWritingSystems.analysis[1];
13+
const ws3 = demoWritingSystems.vernacular[0];
14+
const writingSystems2 = [ws1, ws2];
15+
const writingSystems3 = [ws1, ws2, ws3];
16+
</script>
17+
18+
<Story name="All fields">
19+
{#snippet template()}
20+
<Editor.Root>
21+
<Editor.Grid>
22+
<div class="col-span-full font-bold">Single WS Input</div>
23+
<Editor.Field.Root>
24+
<Editor.Field.Title name="Standard" />
25+
<Editor.Field.Body>
26+
<WsInput
27+
value="Value"
28+
writingSystem={ws1} />
29+
</Editor.Field.Body>
30+
</Editor.Field.Root>
31+
<Editor.Field.Root>
32+
<Editor.Field.Title name="Readonly" />
33+
<Editor.Field.Body>
34+
<WsInput
35+
readonly
36+
value="Value"
37+
writingSystem={ws1} />
38+
</Editor.Field.Body>
39+
</Editor.Field.Root>
40+
<Editor.Field.Root>
41+
<Editor.Field.Title name="Empty" />
42+
<Editor.Field.Body>
43+
<WsInput
44+
value={undefined}
45+
writingSystem={ws1} />
46+
</Editor.Field.Body>
47+
</Editor.Field.Root>
48+
<Editor.Field.Root>
49+
<Editor.Field.Title name="Readonly / Empty" />
50+
<Editor.Field.Body>
51+
<WsInput
52+
readonly
53+
value={undefined}
54+
writingSystem={ws1} />
55+
</Editor.Field.Body>
56+
</Editor.Field.Root>
57+
58+
<div class="col-span-full font-bold">Rich WS Input</div>
59+
<Editor.Field.Root>
60+
<Editor.Field.Title name="Standard" />
61+
<Editor.Field.Body>
62+
<RichWsInput
63+
value={{spans: [{ws: ws1.wsId, text: 'Value '}, {ws: ws2.wsId, text: 'Value'}]}}
64+
writingSystem={ws1} />
65+
</Editor.Field.Body>
66+
</Editor.Field.Root>
67+
<Editor.Field.Root>
68+
<Editor.Field.Title name="Readonly" />
69+
<Editor.Field.Body>
70+
<RichWsInput
71+
readonly
72+
value={{spans: [{ws: ws1.wsId, text: 'Value '}, {ws: ws2.wsId, text: 'Value'}]}}
73+
writingSystem={ws1} />
74+
</Editor.Field.Body>
75+
</Editor.Field.Root>
76+
<Editor.Field.Root>
77+
<Editor.Field.Title name="Empty" />
78+
<Editor.Field.Body>
79+
<RichWsInput
80+
value={undefined}
81+
writingSystem={ws1} />
82+
</Editor.Field.Body>
83+
</Editor.Field.Root>
84+
<Editor.Field.Root>
85+
<Editor.Field.Title name="Readonly / Empty" />
86+
<Editor.Field.Body>
87+
<RichWsInput
88+
readonly
89+
value={undefined}
90+
writingSystem={ws1} />
91+
</Editor.Field.Body>
92+
</Editor.Field.Root>
93+
<Editor.Field.Root>
94+
<Editor.Field.Title name="Multi-line" />
95+
<Editor.Field.Body>
96+
<RichWsInput
97+
value={{spans: [{ws: ws1.wsId, text: 'Value\nValue '}, {ws: ws2.wsId, text: 'Value'}]}}
98+
writingSystem={ws1} />
99+
</Editor.Field.Body>
100+
</Editor.Field.Root>
101+
<Editor.Field.Root>
102+
<Editor.Field.Title name="Readonly / Multi-line" />
103+
<Editor.Field.Body>
104+
<RichWsInput
105+
readonly
106+
value={{spans: [{ws: ws1.wsId, text: 'Value\nValue '}, {ws: ws2.wsId, text: 'Value'}]}}
107+
writingSystem={ws1} />
108+
</Editor.Field.Body>
109+
</Editor.Field.Root>
110+
111+
<div class="col-span-full font-bold">Multi WS Input</div>
112+
<Editor.Field.Root>
113+
<Editor.Field.Title name="Standard" />
114+
<Editor.Field.Body subGrid>
115+
<MultiWsInput
116+
value={{[ws1.wsId]: 'Value'}}
117+
writingSystems={writingSystems2} />
118+
</Editor.Field.Body>
119+
</Editor.Field.Root>
120+
<Editor.Field.Root>
121+
<Editor.Field.Title name="Readonly" />
122+
<Editor.Field.Body subGrid>
123+
<MultiWsInput
124+
readonly
125+
value={{[ws1.wsId]: 'Value'}}
126+
writingSystems={writingSystems2} />
127+
</Editor.Field.Body>
128+
</Editor.Field.Root>
129+
130+
<div class="col-span-full font-bold">Rich Multi WS Input</div>
131+
<Editor.Field.Root>
132+
<Editor.Field.Title name="Standard" />
133+
<Editor.Field.Body subGrid>
134+
<RichMultiWsInput
135+
value={{
136+
[ws1.wsId]: {spans: [{ws: ws1.wsId, text: 'Value '}, {ws: ws2.wsId, text: 'Value'}]},
137+
[ws3.wsId]: {spans: [{ws: ws3.wsId, text: 'Value\nValue '}, {ws: ws2.wsId, text: 'Value'}]},
138+
}}
139+
writingSystems={writingSystems3} />
140+
</Editor.Field.Body>
141+
</Editor.Field.Root>
142+
<Editor.Field.Root>
143+
<Editor.Field.Title name="Readonly" />
144+
<Editor.Field.Body subGrid>
145+
<RichMultiWsInput
146+
readonly
147+
value={{
148+
[ws1.wsId]: {spans: [{ws: ws1.wsId, text: 'Value '}, {ws: ws2.wsId, text: 'Value'}]},
149+
[ws3.wsId]: {spans: [{ws: ws3.wsId, text: 'Value\nValue '}, {ws: ws2.wsId, text: 'Value'}]},
150+
}}
151+
writingSystems={writingSystems3} />
152+
</Editor.Field.Body>
153+
</Editor.Field.Root>
154+
155+
<div class="col-span-full font-bold">Single Select</div>
156+
<Editor.Field.Root>
157+
<Editor.Field.Title name="Standard" />
158+
<Editor.Field.Body>
159+
<Select
160+
value={{value: 'Noun'}}
161+
idSelector="value"
162+
labelSelector="value"
163+
options={[{value: 'Noun'}, {value: 'Verb'}, {value: 'Adjective'}, {value: 'Adverb'}]}
164+
/>
165+
</Editor.Field.Body>
166+
</Editor.Field.Root>
167+
<Editor.Field.Root>
168+
<Editor.Field.Title name="Readonly" />
169+
<Editor.Field.Body>
170+
<Select
171+
readonly
172+
value={{value: 'Noun'}}
173+
idSelector="value"
174+
labelSelector="value"
175+
options={[{value: 'Noun'}, {value: 'Verb'}, {value: 'Adjective'}, {value: 'Adverb'}]}
176+
/>
177+
</Editor.Field.Body>
178+
</Editor.Field.Root>
179+
<Editor.Field.Root>
180+
<Editor.Field.Title name="Empty" />
181+
<Editor.Field.Body>
182+
<Select
183+
value={undefined}
184+
idSelector="value"
185+
labelSelector="value"
186+
options={[{value: 'Noun'}, {value: 'Verb'}, {value: 'Adjective'}, {value: 'Adverb'}]}
187+
/>
188+
</Editor.Field.Body>
189+
</Editor.Field.Root>
190+
<Editor.Field.Root>
191+
<Editor.Field.Title name="Readonly / Empty" />
192+
<Editor.Field.Body>
193+
<Select
194+
readonly
195+
value={undefined}
196+
idSelector="value"
197+
labelSelector="value"
198+
options={[{value: 'Noun'}, {value: 'Verb'}, {value: 'Adjective'}, {value: 'Adverb'}]}
199+
/>
200+
</Editor.Field.Body>
201+
</Editor.Field.Root>
202+
203+
<div class="col-span-full font-bold">Multi Select</div>
204+
<Editor.Field.Root>
205+
<Editor.Field.Title name="Standard" />
206+
<Editor.Field.Body>
207+
<MultiSelect
208+
values={[{value: 'Noun'}]}
209+
idSelector="value"
210+
labelSelector="value"
211+
options={[{value: 'Noun'}, {value: 'Verb'}, {value: 'Adjective'}, {value: 'Adverb'}]} />
212+
</Editor.Field.Body>
213+
</Editor.Field.Root>
214+
<Editor.Field.Root>
215+
<Editor.Field.Title name="Readonly" />
216+
<Editor.Field.Body>
217+
<MultiSelect
218+
readonly
219+
values={[{value: 'Noun'}]}
220+
idSelector="value"
221+
labelSelector="value"
222+
options={[{value: 'Noun'}, {value: 'Verb'}, {value: 'Adjective'}, {value: 'Adverb'}]} />
223+
</Editor.Field.Body>
224+
</Editor.Field.Root>
225+
<Editor.Field.Root>
226+
<Editor.Field.Title name="Empty" />
227+
<Editor.Field.Body>
228+
<MultiSelect
229+
values={[]}
230+
idSelector="value"
231+
labelSelector="value"
232+
options={[{value: 'Noun'}, {value: 'Verb'}, {value: 'Adjective'}, {value: 'Adverb'}]} />
233+
</Editor.Field.Body>
234+
</Editor.Field.Root>
235+
<Editor.Field.Root>
236+
<Editor.Field.Title name="Readonly / Empty" />
237+
<Editor.Field.Body>
238+
<MultiSelect
239+
readonly
240+
values={[]}
241+
idSelector="value"
242+
labelSelector="value"
243+
options={[{value: 'Noun'}, {value: 'Verb'}, {value: 'Adjective'}, {value: 'Adverb'}]} />
244+
</Editor.Field.Body>
245+
</Editor.Field.Root>
246+
</Editor.Grid>
247+
</Editor.Root>
248+
{/snippet}
249+
</Story>

0 commit comments

Comments
 (0)