@dust-tt/sparkle 0.2.244 → 0.2.246

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/cjs/index.js +14 -8
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/components/Dialog.d.ts +6 -5
  4. package/dist/esm/components/Dialog.d.ts.map +1 -1
  5. package/dist/esm/components/Dialog.js +4 -2
  6. package/dist/esm/components/Dialog.js.map +1 -1
  7. package/dist/esm/components/Tree.d.ts +4 -0
  8. package/dist/esm/components/Tree.d.ts.map +1 -1
  9. package/dist/esm/components/Tree.js +10 -6
  10. package/dist/esm/components/Tree.js.map +1 -1
  11. package/dist/esm/stories/Dialog.stories.d.ts.map +1 -1
  12. package/dist/esm/stories/Dialog.stories.js +6 -1
  13. package/dist/esm/stories/Dialog.stories.js.map +1 -1
  14. package/dist/esm/stories/Tree.stories.d.ts.map +1 -1
  15. package/dist/esm/stories/Tree.stories.js +82 -78
  16. package/dist/esm/stories/Tree.stories.js.map +1 -1
  17. package/package.json +1 -1
  18. package/src/components/Dialog.tsx +18 -10
  19. package/src/components/Tree.tsx +17 -9
  20. package/src/stories/Dialog.stories.tsx +14 -0
  21. package/src/stories/Tree.stories.tsx +102 -82
package/src/stories/Tree.stories.tsx CHANGED
@@ -2,6 +2,12 @@ import type { Meta } from "@storybook/react";
2
2
  import React from "react";
3
3
 
4
4
  import { DustIcon } from "@sparkle/icons/solid";
5
+ import {
6
+ DriveLogo,
7
+ IntercomLogo,
8
+ NotionLogo,
9
+ SlackLogo,
10
+ } from "@sparkle/logo/platforms";
5
11
 
6
12
  import {
7
13
  Button,
@@ -9,14 +15,10 @@ import {
9
15
  CloudArrowDownIcon,
10
16
  Cog6ToothIcon,
11
17
  DocumentIcon,
12
- DriveLogo,
13
18
  EyeIcon,
14
19
  FolderIcon,
15
20
  IconButton,
16
- IntercomLogo,
17
- NotionLogo,
18
21
  PlusCircleIcon,
19
- SlackLogo,
20
22
  Tree,
21
23
  } from "../index_with_tw_base";
22
24
 
@@ -35,15 +37,15 @@ export const TreeExample = () => {
35
37
  <div className="s-text-xl">Tree</div>
36
38
  <div>
37
39
  <Tree>
38
- <Tree.Item label="item 1 (no children)" visual={FolderIcon} />
39
- <Tree.Item label="item 2 (loading)" visual={FolderIcon}>
40
+ <Tree.Item label="Item 1 (no children)" visual={FolderIcon} />
41
+ <Tree.Item label="Item 2 (loading)" visual={FolderIcon}>
40
42
  <Tree isLoading />
41
43
  </Tree.Item>
42
- <Tree.Item label="item 3" visual={FolderIcon}>
44
+ <Tree.Item label="Item 3" visual={FolderIcon}>
43
45
  <Tree>
44
46
  <Tree.Item
45
47
  type="leaf"
46
- label="item 1"
48
+ label="Item 1"
47
49
  checkbox={{
48
50
  variant: "checkable",
49
51
  checked: "unchecked",
@@ -53,7 +55,7 @@ export const TreeExample = () => {
53
55
  }}
54
56
  />
55
57
  <Tree.Item
56
- label="item 2"
58
+ label="Item 2"
57
59
  type="leaf"
58
60
  checkbox={{
59
61
  variant: "checkable",
@@ -64,7 +66,7 @@ export const TreeExample = () => {
64
66
  }}
65
67
  />
66
68
  <Tree.Item
67
- label="item 3"
69
+ label="Item 3"
68
70
  type="leaf"
69
71
  checkbox={{
70
72
  variant: "checkable",
@@ -77,23 +79,30 @@ export const TreeExample = () => {
77
79
  </Tree>
78
80
  </Tree.Item>
79
81
  <Tree.Item
80
- label="item 4 (forced collapsed)"
82
+ label="Item 4 (forced collapsed)"
81
83
  visual={FolderIcon}
82
- collapsed={true}
84
+ collapsed={false}
83
85
  >
84
86
  <Tree>
85
- <Tree.Item label="item 1" visual={DocumentIcon} />
87
+ <Tree.Item
88
+ label="Item 1"
89
+ visual={FolderIcon}
90
+ collapsed={false}
91
+ >
92
+ <Tree.Empty label="No documents"/>
93
+ </Tree.Item>
86
94
  </Tree>
87
95
  </Tree.Item>
88
96
  <Tree.Item
89
- label="item 5 (forced expanded)"
97
+ label="Item 5 (forced expanded)"
90
98
  visual={FolderIcon}
91
99
  collapsed={false}
92
100
  >
93
101
  <Tree>
94
102
  <Tree.Item
95
- label="item 1"
103
+ label="Item 1"
96
104
  visual={DocumentIcon}
105
+ type="leaf"
97
106
  actions={
98
107
  <>
99
108
  <div className="s-text-sm s-text-element-700">
@@ -110,23 +119,23 @@ export const TreeExample = () => {
110
119
  </Tree>
111
120
  </Tree.Item>
112
121
  <Tree.Item
113
- label="item 6 (default collapsed)"
122
+ label="Item 6 (default collapsed)"
114
123
  visual={FolderIcon}
115
124
  defaultCollapsed={true}
116
125
  >
117
126
  <Tree>
118
- <Tree.Item label="item 1" visual={DocumentIcon} />
127
+ <Tree.Item label="Item 1" visual={DocumentIcon} />
119
128
  </Tree>
120
129
  </Tree.Item>
121
130
 
122
131
  <Tree.Item
123
- label="item 7 (default expanded)"
132
+ label="Item 7 (default expanded)"
124
133
  visual={FolderIcon}
125
134
  defaultCollapsed={false}
126
135
  >
127
136
  <Tree>
128
- <Tree.Item label="item 1" visual={DocumentIcon} />
129
- <Tree.Item label="item 2" visual={DocumentIcon} />
137
+ <Tree.Item label="Item 1" visual={DocumentIcon} />
138
+ <Tree.Item label="Item 2" visual={DocumentIcon} />
130
139
  </Tree>
131
140
  </Tree.Item>
132
141
  </Tree>
@@ -137,7 +146,7 @@ export const TreeExample = () => {
137
146
  <div>
138
147
  <Tree>
139
148
  <Tree.Item
140
- label="item 1"
149
+ label="Item 1"
141
150
  type="item"
142
151
  visual={FolderIcon}
143
152
  checkbox={{
@@ -149,7 +158,7 @@ export const TreeExample = () => {
149
158
  }}
150
159
  />
151
160
  <Tree.Item
152
- label="item 2"
161
+ label="Item 2"
153
162
  type="item"
154
163
  visual={FolderIcon}
155
164
  checkbox={{
@@ -161,7 +170,7 @@ export const TreeExample = () => {
161
170
  }}
162
171
  />
163
172
  <Tree.Item
164
- label="item 3"
173
+ label="Item 3"
165
174
  type="item"
166
175
  visual={FolderIcon}
167
176
  checkbox={{
@@ -173,7 +182,7 @@ export const TreeExample = () => {
173
182
  }}
174
183
  />
175
184
  <Tree.Item
176
- label="item 4"
185
+ label="Item 4"
177
186
  type="item"
178
187
  visual={FolderIcon}
179
188
  checkbox={{
@@ -185,7 +194,7 @@ export const TreeExample = () => {
185
194
  }}
186
195
  />
187
196
  <Tree.Item
188
- label="item 5"
197
+ label="Item 5"
189
198
  type="item"
190
199
  visual={FolderIcon}
191
200
  checkbox={{
@@ -254,7 +263,7 @@ export const TreeExample = () => {
254
263
  </Tree>
255
264
  </div>
256
265
  </div>
257
- <div className="s-flex s-flex-col s-gap-3 s-max-w-xs">
266
+ <div className="s-flex s-max-w-xs s-flex-col s-gap-3">
258
267
  <div className="s-text-xl">Nav bar</div>
259
268
  <div>
260
269
  <Tree variant="navigator">
@@ -266,33 +275,40 @@ export const TreeExample = () => {
266
275
  size="md"
267
276
  >
268
277
  <Tree variant="navigator" tailwindIconTextColor="s-text-brand">
269
- <Tree.Item label="item 1 with a very very very very very very very long text" visual={FolderIcon}>
278
+ <Tree.Item
279
+ label="Item 1 with a very very very very very very very long text"
280
+ visual={FolderIcon}
281
+ >
270
282
  <Tree variant="navigator">
271
- <Tree.Item label="item 1 with a very very very very very very very long text" visual={FolderIcon} type="leaf"/>
272
- <Tree.Item label="item 2" visual={FolderIcon} />
273
- <Tree.Item label="item 3" visual={FolderIcon} />
283
+ <Tree.Item
284
+ label="Item 1 with a very very very very very very very long text"
285
+ visual={FolderIcon}
286
+ type="leaf"
287
+ />
288
+ <Tree.Item label="Item 2" visual={FolderIcon} />
289
+ <Tree.Item label="Item 3" visual={FolderIcon} />
274
290
  </Tree>
275
291
  </Tree.Item>
276
292
  <Tree.Item
277
- label="item 2"
293
+ label="Item 2"
278
294
  visual={FolderIcon}
279
295
  tailwindIconTextColor="s-text-brand"
280
296
  >
281
297
  <Tree variant="navigator">
282
- <Tree.Item label="item 1" visual={FolderIcon} />
283
- <Tree.Item label="item 2" visual={FolderIcon} />
284
- <Tree.Item label="item 3" visual={FolderIcon} />
298
+ <Tree.Item label="Item 1" visual={FolderIcon} />
299
+ <Tree.Item label="Item 2" visual={FolderIcon} />
300
+ <Tree.Item label="Item 3" visual={FolderIcon} />
285
301
  </Tree>
286
302
  </Tree.Item>
287
303
  <Tree.Item
288
- label="item 3"
304
+ label="Item 3"
289
305
  visual={FolderIcon}
290
306
  tailwindIconTextColor="s-text-brand"
291
307
  >
292
308
  <Tree variant="navigator">
293
- <Tree.Item label="item 1" visual={FolderIcon} />
294
- <Tree.Item label="item 2" visual={FolderIcon} />
295
- <Tree.Item label="item 3" visual={FolderIcon} />
309
+ <Tree.Item label="Item 1" visual={FolderIcon} />
310
+ <Tree.Item label="Item 2" visual={FolderIcon} />
311
+ <Tree.Item label="Item 3" visual={FolderIcon} />
296
312
  </Tree>
297
313
  </Tree.Item>
298
314
  </Tree>
@@ -310,15 +326,15 @@ export const TreeExample = () => {
310
326
  <div className="s-text-xl">Tree</div>
311
327
  <div>
312
328
  <Tree isBoxed>
313
- <Tree.Item label="item 1 (no children)" visual={FolderIcon} />
314
- <Tree.Item label="item 2 (loading)" visual={FolderIcon}>
329
+ <Tree.Item label="Item 1 (no children)" visual={FolderIcon} />
330
+ <Tree.Item label="Item 2 (loading)" visual={FolderIcon}>
315
331
  <Tree isLoading />
316
332
  </Tree.Item>
317
- <Tree.Item label="item 3" visual={FolderIcon}>
333
+ <Tree.Item label="Item 3" visual={FolderIcon}>
318
334
  <Tree>
319
335
  <Tree.Item
320
336
  type="leaf"
321
- label="item 1"
337
+ label="Item 1"
322
338
  checkbox={{
323
339
  variant: "checkable",
324
340
  checked: "unchecked",
@@ -328,7 +344,7 @@ export const TreeExample = () => {
328
344
  }}
329
345
  />
330
346
  <Tree.Item
331
- label="item 2"
347
+ label="Item 2"
332
348
  type="leaf"
333
349
  checkbox={{
334
350
  variant: "checkable",
@@ -339,7 +355,7 @@ export const TreeExample = () => {
339
355
  }}
340
356
  />
341
357
  <Tree.Item
342
- label="item 3"
358
+ label="Item 3"
343
359
  type="leaf"
344
360
  checkbox={{
345
361
  variant: "checkable",
@@ -352,31 +368,35 @@ export const TreeExample = () => {
352
368
  </Tree>
353
369
  </Tree.Item>
354
370
  <Tree.Item
355
- label="item 4 (forced collapsed)"
371
+ label="Item 4 (forced collapsed)"
356
372
  visual={FolderIcon}
357
373
  collapsed={true}
358
374
  >
359
375
  <Tree>
360
- <Tree.Item label="item 1" />
376
+ <Tree.Item label="Item 1" />
361
377
  </Tree>
362
378
  </Tree.Item>
363
379
  <Tree.Item
364
- label="item 5 (forced expanded)"
380
+ label="Item 5 (forced expanded)"
365
381
  visual={FolderIcon}
366
382
  collapsed={false}
367
383
  >
368
384
  <Tree>
369
- <Tree.Item label="item 1" />
385
+ <Tree.Item label="Item 1" collapsed={false}>
386
+ <Tree>
387
+ <Tree.Empty label="No documents" />
388
+ </Tree>
389
+ </Tree.Item>
370
390
  </Tree>
371
391
  </Tree.Item>
372
392
  <Tree.Item
373
- label="item 6 (default collapsed)"
393
+ label="Item 6 (default collapsed)"
374
394
  visual={FolderIcon}
375
395
  defaultCollapsed={true}
376
396
  >
377
397
  <Tree>
378
398
  <Tree.Item
379
- label="item 1"
399
+ label="Item 1"
380
400
  checkbox={{
381
401
  variant: "checkable",
382
402
  checked: "partial",
@@ -386,7 +406,7 @@ export const TreeExample = () => {
386
406
  }}
387
407
  />
388
408
  <Tree.Item
389
- label="item 2"
409
+ label="Item 2"
390
410
  checkbox={{
391
411
  variant: "checkable",
392
412
  checked: "checked",
@@ -396,7 +416,7 @@ export const TreeExample = () => {
396
416
  }}
397
417
  />
398
418
  <Tree.Item
399
- label="item 3"
419
+ label="Item 3"
400
420
  checkbox={{
401
421
  variant: "checkable",
402
422
  checked: "unchecked",
@@ -406,7 +426,7 @@ export const TreeExample = () => {
406
426
  }}
407
427
  />
408
428
  <Tree.Item
409
- label="item 4"
429
+ label="Item 4"
410
430
  checkbox={{
411
431
  variant: "checkable",
412
432
  checked: "unchecked",
@@ -416,7 +436,7 @@ export const TreeExample = () => {
416
436
  }}
417
437
  />
418
438
  <Tree.Item
419
- label="item 5"
439
+ label="Item 5"
420
440
  checkbox={{
421
441
  variant: "checkable",
422
442
  checked: "unchecked",
@@ -429,13 +449,13 @@ export const TreeExample = () => {
429
449
  </Tree.Item>
430
450
 
431
451
  <Tree.Item
432
- label="item 7 (default expanded)"
452
+ label="Item 7 (default expanded)"
433
453
  visual={FolderIcon}
434
454
  defaultCollapsed={false}
435
455
  >
436
456
  <Tree>
437
457
  <Tree.Item
438
- label="item 1"
458
+ label="Item 1"
439
459
  checkbox={{
440
460
  variant: "checkable",
441
461
  checked: "partial",
@@ -445,7 +465,7 @@ export const TreeExample = () => {
445
465
  }}
446
466
  />
447
467
  <Tree.Item
448
- label="item 2"
468
+ label="Item 2"
449
469
  checkbox={{
450
470
  variant: "checkable",
451
471
  checked: "checked",
@@ -464,7 +484,7 @@ export const TreeExample = () => {
464
484
  <div>
465
485
  <Tree isBoxed>
466
486
  <Tree.Item
467
- label="item 1"
487
+ label="Item 1"
468
488
  type="item"
469
489
  visual={FolderIcon}
470
490
  checkbox={{
@@ -476,7 +496,7 @@ export const TreeExample = () => {
476
496
  }}
477
497
  />
478
498
  <Tree.Item
479
- label="item 2"
499
+ label="Item 2"
480
500
  type="item"
481
501
  visual={FolderIcon}
482
502
  checkbox={{
@@ -488,7 +508,7 @@ export const TreeExample = () => {
488
508
  }}
489
509
  />
490
510
  <Tree.Item
491
- label="item 3"
511
+ label="Item 3"
492
512
  type="item"
493
513
  visual={FolderIcon}
494
514
  checkbox={{
@@ -500,7 +520,7 @@ export const TreeExample = () => {
500
520
  }}
501
521
  />
502
522
  <Tree.Item
503
- label="item 4"
523
+ label="Item 4"
504
524
  type="item"
505
525
  visual={FolderIcon}
506
526
  checkbox={{
@@ -512,7 +532,7 @@ export const TreeExample = () => {
512
532
  }}
513
533
  />
514
534
  <Tree.Item
515
- label="item 5"
535
+ label="Item 5"
516
536
  type="item"
517
537
  visual={FolderIcon}
518
538
  checkbox={{
@@ -592,25 +612,25 @@ export const TreeExample = () => {
592
612
  isSelected={true}
593
613
  >
594
614
  <Tree tailwindIconTextColor="s-text-brand">
595
- <Tree.Item label="item 1" visual={FolderIcon}>
615
+ <Tree.Item label="Item 1" visual={FolderIcon}>
596
616
  <Tree>
597
- <Tree.Item label="item 1" visual={FolderIcon} />
598
- <Tree.Item label="item 2" visual={FolderIcon} />
599
- <Tree.Item label="item 3" visual={FolderIcon} />
617
+ <Tree.Item label="Item 1" visual={FolderIcon} />
618
+ <Tree.Item label="Item 2" visual={FolderIcon} />
619
+ <Tree.Item label="Item 3" visual={FolderIcon} />
600
620
  </Tree>
601
621
  </Tree.Item>
602
- <Tree.Item label="item 2" visual={FolderIcon}>
622
+ <Tree.Item label="Item 2" visual={FolderIcon}>
603
623
  <Tree>
604
- <Tree.Item label="item 1" visual={FolderIcon} />
605
- <Tree.Item label="item 2" visual={FolderIcon} />
606
- <Tree.Item label="item 3" visual={FolderIcon} />
624
+ <Tree.Item label="Item 1" visual={FolderIcon} />
625
+ <Tree.Item label="Item 2" visual={FolderIcon} />
626
+ <Tree.Item label="Item 3" visual={FolderIcon} />
607
627
  </Tree>
608
628
  </Tree.Item>
609
- <Tree.Item label="item 3" visual={FolderIcon}>
629
+ <Tree.Item label="Item 3" visual={FolderIcon}>
610
630
  <Tree>
611
- <Tree.Item label="item 1" visual={FolderIcon} />
612
- <Tree.Item label="item 2" visual={FolderIcon} />
613
- <Tree.Item label="item 3" visual={FolderIcon} />
631
+ <Tree.Item label="Item 1" visual={FolderIcon} />
632
+ <Tree.Item label="Item 2" visual={FolderIcon} />
633
+ <Tree.Item label="Item 3" visual={FolderIcon} />
614
634
  </Tree>
615
635
  </Tree.Item>
616
636
  </Tree>
@@ -700,10 +720,10 @@ export const SelectDataSourceExample = () => {
700
720
  collapsed={false}
701
721
  >
702
722
  <Tree>
703
- <Tree.Item label="item 1" />
704
- <Tree.Item label="item 2" />
705
- <Tree.Item label="item 3" />
706
- <Tree.Item label="item 4" />
723
+ <Tree.Item label="Item 1" />
724
+ <Tree.Item label="Item 2" />
725
+ <Tree.Item label="Item 3" />
726
+ <Tree.Item label="Item 4" />
707
727
  </Tree>
708
728
  </Tree.Item>
709
729
  <Tree.Item
@@ -777,7 +797,7 @@ export const SelectDataSourceExample = () => {
777
797
  >
778
798
  <Tree>
779
799
  <Tree.Item
780
- label="item 1"
800
+ label="Item 1"
781
801
  checkbox={{
782
802
  variant: "checkable",
783
803
  checked: "unchecked",
@@ -787,7 +807,7 @@ export const SelectDataSourceExample = () => {
787
807
  }}
788
808
  />
789
809
  <Tree.Item
790
- label="item 2"
810
+ label="Item 2"
791
811
  checkbox={{
792
812
  variant: "checkable",
793
813
  checked: "unchecked",
@@ -797,7 +817,7 @@ export const SelectDataSourceExample = () => {
797
817
  }}
798
818
  />
799
819
  <Tree.Item
800
- label="item 3"
820
+ label="Item 3"
801
821
  checkbox={{
802
822
  variant: "checkable",
803
823
  checked: "unchecked",
@@ -807,7 +827,7 @@ export const SelectDataSourceExample = () => {
807
827
  }}
808
828
  />
809
829
  <Tree.Item
810
- label="item 4"
830
+ label="Item 4"
811
831
  checkbox={{
812
832
  variant: "checkable",
813
833
  checked: "unchecked",