Skip to content

Commit e6bc9af

Browse files
petrapazkresimir-coko
petrapaz
authored and
kresimir-coko
committed
3610 - fix switch and storybook
1 parent 7ad70ac commit e6bc9af

File tree

2 files changed

+90
-180
lines changed

2 files changed

+90
-180
lines changed

‎client/src/components/Switch/Switch.stories.tsx‎

Lines changed: 67 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,10 @@ export const DefaultSwitch: Story = {
113113
render: function Render(args) {
114114
const [checked, setChecked] = React.useState(args.checked ?? false);
115115

116+
React.useEffect(() => {
117+
setChecked(args.checked ?? false);
118+
}, [args.checked]);
119+
116120
return <Switch {...args} checked={checked} onCheckedChange={setChecked} />;
117121
},
118122
};
@@ -132,15 +136,9 @@ export const SwitchVariants: Story = {
132136

133137
return (
134138
<div className="grid grid-cols-[140px_1fr] gap-x-6 gap-y-4 text-sm">
135-
{/* Header */}
136-
137-
<div />
138-
139-
<div className="font-semibold">Example</div>
140-
141-
{/* Default */}
139+
<span className="col-start-2 font-semibold">Example</span>
142140

143-
<div className="font-medium">Default</div>
141+
<span className="font-medium">Default</span>
144142

145143
<Switch
146144
checked={checked1}
@@ -149,15 +147,11 @@ export const SwitchVariants: Story = {
149147
variant="default"
150148
/>
151149

152-
{/* Box */}
153-
154-
<div className="font-medium">Box</div>
150+
<span className="font-medium">Box</span>
155151

156152
<Switch checked={checked2} label="Enable notifications" onCheckedChange={setChecked2} variant="box" />
157153

158-
{/* Small */}
159-
160-
<div className="font-medium">Small</div>
154+
<span className="font-medium">Small</span>
161155

162156
<Switch checked={checked3} label="Enable" onCheckedChange={setChecked3} variant="small" />
163157
</div>
@@ -173,59 +167,21 @@ export const PlainSwitches: Story = {
173167
},
174168
},
175169
},
176-
render: () => {
177-
const [checked1, setChecked1] = React.useState(false);
178-
const [checked2, setChecked2] = React.useState(false);
179-
const [checked3, setChecked3] = React.useState(false);
180-
const [checked4, setChecked4] = React.useState(true);
181-
const [checked5, setChecked5] = React.useState(true);
182-
const [checked6, setChecked6] = React.useState(true);
170+
render: () => (
171+
<div className="flex flex-col gap-4">
172+
<div className="flex items-center gap-4">
173+
<Switch aria-label="Default switch" variant="default" />
183174

184-
return (
185-
<div className="flex flex-col gap-4">
186-
<div className="flex items-center gap-4">
187-
<Switch
188-
aria-label="Default switch"
189-
checked={checked1}
190-
onCheckedChange={setChecked1}
191-
variant="default"
192-
/>
193-
194-
<Switch aria-label="Box switch" checked={checked2} onCheckedChange={setChecked2} variant="box" />
195-
196-
<Switch
197-
aria-label="Small switch"
198-
checked={checked3}
199-
onCheckedChange={setChecked3}
200-
variant="small"
201-
/>
202-
</div>
175+
<Switch aria-label="Small switch" variant="small" />
176+
</div>
203177

204-
<div className="flex items-center gap-4">
205-
<Switch
206-
aria-label="Default switch checked"
207-
checked={checked4}
208-
onCheckedChange={setChecked4}
209-
variant="default"
210-
/>
211-
212-
<Switch
213-
aria-label="Box switch checked"
214-
checked={checked5}
215-
onCheckedChange={setChecked5}
216-
variant="box"
217-
/>
218-
219-
<Switch
220-
aria-label="Small switch checked"
221-
checked={checked6}
222-
onCheckedChange={setChecked6}
223-
variant="small"
224-
/>
225-
</div>
178+
<div className="flex items-center gap-4">
179+
<Switch aria-label="Default switch checked" checked variant="default" />
180+
181+
<Switch aria-label="Small switch checked" checked variant="small" />
226182
</div>
227-
);
228-
},
183+
</div>
184+
),
229185
};
230186

231187
export const SwitchAlignmentVariants: Story = {
@@ -238,71 +194,64 @@ export const SwitchAlignmentVariants: Story = {
238194
},
239195
render: () => {
240196
const label = 'Auto-save';
241-
const [states, setStates] = React.useState([false, false, false, false, false, false]);
242-
243-
const toggleState = (index: number) => {
244-
setStates((prev) => prev.map((state, i) => (i === index ? !state : state)));
245-
};
197+
const [defaultStart, setDefaultStart] = React.useState(false);
198+
const [defaultEnd, setDefaultEnd] = React.useState(false);
199+
const [boxStart, setBoxStart] = React.useState(false);
200+
const [boxEnd, setBoxEnd] = React.useState(false);
201+
const [smallStart, setSmallStart] = React.useState(false);
202+
const [smallEnd, setSmallEnd] = React.useState(false);
246203

247204
return (
248205
<div className="grid grid-cols-[120px_1fr_1fr] gap-4 text-sm">
249-
<div />
206+
<span className="col-start-2 font-semibold">Start</span>
250207

251-
<div className="font-semibold">Start</div>
208+
<span className="font-semibold">End</span>
252209

253-
<div className="font-semibold">End</div>
254-
255-
<div className="font-medium">Default</div>
210+
<span className="font-medium">Default</span>
256211

257212
<Switch
258213
alignment="start"
259-
checked={states[0]}
214+
checked={defaultStart}
260215
label={label}
261-
onCheckedChange={() => toggleState(0)}
216+
onCheckedChange={setDefaultStart}
262217
variant="default"
263218
/>
264219

265220
<Switch
266221
alignment="end"
267-
checked={states[1]}
222+
checked={defaultEnd}
268223
label={label}
269-
onCheckedChange={() => toggleState(1)}
224+
onCheckedChange={setDefaultEnd}
270225
variant="default"
271226
/>
272227

273-
<div className="font-medium">Box</div>
228+
<span className="font-medium">Box</span>
274229

275230
<Switch
276231
alignment="start"
277-
checked={states[2]}
232+
checked={boxStart}
278233
label={label}
279-
onCheckedChange={() => toggleState(2)}
234+
onCheckedChange={setBoxStart}
280235
variant="box"
281236
/>
282237

283-
<Switch
284-
alignment="end"
285-
checked={states[3]}
286-
label={label}
287-
onCheckedChange={() => toggleState(3)}
288-
variant="box"
289-
/>
238+
<Switch alignment="end" checked={boxEnd} label={label} onCheckedChange={setBoxEnd} variant="box" />
290239

291-
<div className="font-medium">Small</div>
240+
<span className="font-medium">Small</span>
292241

293242
<Switch
294243
alignment="start"
295-
checked={states[4]}
244+
checked={smallStart}
296245
label={label}
297-
onCheckedChange={() => toggleState(4)}
246+
onCheckedChange={setSmallStart}
298247
variant="small"
299248
/>
300249

301250
<Switch
302251
alignment="end"
303-
checked={states[5]}
252+
checked={smallEnd}
304253
label={label}
305-
onCheckedChange={() => toggleState(5)}
254+
onCheckedChange={setSmallEnd}
306255
variant="small"
307256
/>
308257
</div>
@@ -325,15 +274,9 @@ export const SwitchesWithDescriptions: Story = {
325274

326275
return (
327276
<div className="grid grid-cols-[160px_1fr] gap-x-6 gap-y-4 text-sm">
328-
{/* Header */}
329-
330-
<div />
331-
332-
<div className="font-semibold">Example</div>
333-
334-
{/* Default */}
277+
<span className="col-start-2 font-semibold">Example</span>
335278

336-
<div className="font-medium">Default</div>
279+
<span className="font-medium">Default</span>
337280

338281
<Switch
339282
checked={checked1}
@@ -343,9 +286,7 @@ export const SwitchesWithDescriptions: Story = {
343286
variant="default"
344287
/>
345288

346-
{/* Box */}
347-
348-
<div className="font-medium">Box</div>
289+
<span className="font-medium">Box</span>
349290

350291
<Switch
351292
checked={checked2}
@@ -355,9 +296,7 @@ export const SwitchesWithDescriptions: Story = {
355296
variant="box"
356297
/>
357298

358-
{/* Small */}
359-
360-
<div className="font-medium">Small (no description)</div>
299+
<span className="font-medium">Small (no description)</span>
361300

362301
<Switch checked={checked3} label="Enable notifications" onCheckedChange={setChecked3} variant="small" />
363302
</div>
@@ -373,54 +312,31 @@ export const SwitchStates: Story = {
373312
},
374313
},
375314
},
376-
render: () => {
377-
const [states, setStates] = React.useState([false, true, false, true, false, true]);
378-
379-
const toggleState = (index: number) => {
380-
setStates((prev) => prev.map((state, i) => (i === index ? !state : state)));
381-
};
382-
383-
return (
384-
<div className="grid grid-cols-[140px_1fr_1fr] gap-x-6 gap-y-4 text-sm">
385-
{/* Header */}
386-
387-
<div />
388-
389-
<div className="font-semibold">Unchecked</div>
390-
391-
<div className="font-semibold">Checked</div>
392-
393-
{/* Default */}
394-
395-
<div className="font-medium">Default</div>
315+
render: () => (
316+
<div className="grid grid-cols-[140px_1fr_1fr] gap-x-6 gap-y-4 text-sm">
317+
<span className="col-start-2 font-semibold">Unchecked</span>
396318

397-
<Switch
398-
checked={states[0]}
399-
label="Unchecked"
400-
onCheckedChange={() => toggleState(0)}
401-
variant="default"
402-
/>
319+
<span className="font-semibold">Checked</span>
403320

404-
<Switch checked={states[1]} label="Checked" onCheckedChange={() => toggleState(1)} variant="default" />
321+
<span className="font-medium">Default</span>
405322

406-
{/* Box */}
323+
<Switch label="Unchecked" variant="default" />
407324

408-
<div className="font-medium">Box</div>
325+
<Switch checked label="Checked" variant="default" />
409326

410-
<Switch checked={states[2]} label="Unchecked" onCheckedChange={() => toggleState(2)} variant="box" />
327+
<span className="font-medium">Box</span>
411328

412-
<Switch checked={states[3]} label="Checked" onCheckedChange={() => toggleState(3)} variant="box" />
329+
<Switch label="Unchecked" variant="box" />
413330

414-
{/* Small */}
331+
<Switch checked label="Checked" variant="box" />
415332

416-
<div className="font-medium">Small</div>
333+
<span className="font-medium">Small</span>
417334

418-
<Switch checked={states[4]} label="Unchecked" onCheckedChange={() => toggleState(4)} variant="small" />
335+
<Switch label="Unchecked" variant="small" />
419336

420-
<Switch checked={states[5]} label="Checked" onCheckedChange={() => toggleState(5)} variant="small" />
421-
</div>
422-
);
423-
},
337+
<Switch checked label="Checked" variant="small" />
338+
</div>
339+
),
424340
};
425341

426342
export const SwitchDisabledStates: Story = {
@@ -433,41 +349,29 @@ export const SwitchDisabledStates: Story = {
433349
},
434350
render: () => (
435351
<div className="grid grid-cols-[160px_1fr_1fr] gap-x-6 gap-y-4 text-sm">
436-
{/* Header */}
437-
438-
<div />
439-
440-
<div className="font-semibold">Disabled off</div>
352+
<span className="col-start-2 font-semibold">Disabled off</span>
441353

442-
<div className="font-semibold">Disabled on</div>
354+
<span className="font-semibold">Disabled on</span>
443355

444-
{/* Default */}
445-
446-
<div className="font-medium">Default</div>
356+
<span className="font-medium">Default</span>
447357

448358
<Switch disabled label="Off" variant="default" />
449359

450360
<Switch checked disabled label="On" variant="default" />
451361

452-
{/* Box */}
453-
454-
<div className="font-medium">Box</div>
362+
<span className="font-medium">Box</span>
455363

456364
<Switch disabled label="Off" variant="box" />
457365

458366
<Switch checked disabled label="On" variant="box" />
459367

460-
{/* Small */}
461-
462-
<div className="font-medium">Small</div>
368+
<span className="font-medium">Small</span>
463369

464370
<Switch disabled label="Off" variant="small" />
465371

466372
<Switch checked disabled label="On" variant="small" />
467373

468-
{/* Plain */}
469-
470-
<div className="font-medium">Plain</div>
374+
<span className="font-medium">Plain</span>
471375

472376
<Switch aria-label="Disabled off" disabled />
473377

@@ -498,8 +402,6 @@ export const SwitchUseCases: Story = {
498402

499403
return (
500404
<div className="grid gap-8 text-sm">
501-
{/* Settings panel */}
502-
503405
<div>
504406
<h3 className="mb-3 font-semibold">Settings panel</h3>
505407

@@ -527,8 +429,6 @@ export const SwitchUseCases: Story = {
527429
</div>
528430
</div>
529431

530-
{/* Compact */}
531-
532432
<div>
533433
<h3 className="mb-3 font-semibold">Compact settings (small variant)</h3>
534434

@@ -546,8 +446,6 @@ export const SwitchUseCases: Story = {
546446
</div>
547447
</div>
548448

549-
{/* Feature toggles */}
550-
551449
<div>
552450
<h3 className="mb-3 font-semibold">Feature toggles (box variant)</h3>
553451

0 commit comments

Comments
 (0)