@dust-tt/sparkle 0.2.195 → 0.2.196
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.
- package/dist/cjs/components/Tree.d.ts +3 -1
- package/dist/cjs/index.js +9 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/stories/Tree.stories.d.ts +1 -0
- package/dist/esm/components/Tree.d.ts +3 -1
- package/dist/esm/index.js +9 -7
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/stories/Tree.stories.d.ts +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/Tree.tsx +29 -5
- package/src/stories/Tree.stories.tsx +228 -10
package/package.json
CHANGED
package/src/components/Tree.tsx
CHANGED
|
@@ -49,6 +49,7 @@ interface TreeItemProps {
|
|
|
49
49
|
label?: string;
|
|
50
50
|
type?: "node" | "item" | "leaf";
|
|
51
51
|
variant?: "file" | "folder" | "database" | "channel";
|
|
52
|
+
size?: "sm" | "md";
|
|
52
53
|
visual?: React.ReactNode;
|
|
53
54
|
checkbox?: CheckboxProps;
|
|
54
55
|
onChevronClick?: () => void;
|
|
@@ -56,6 +57,7 @@ interface TreeItemProps {
|
|
|
56
57
|
defaultCollapsed?: boolean;
|
|
57
58
|
className?: string;
|
|
58
59
|
actions?: React.ReactNode;
|
|
60
|
+
areActionsFading?: boolean;
|
|
59
61
|
}
|
|
60
62
|
|
|
61
63
|
export interface TreeItemPropsWithChildren extends TreeItemProps {
|
|
@@ -73,12 +75,14 @@ Tree.Item = function ({
|
|
|
73
75
|
type = "node",
|
|
74
76
|
className = "",
|
|
75
77
|
variant = "file",
|
|
78
|
+
size = "sm",
|
|
76
79
|
visual,
|
|
77
80
|
checkbox,
|
|
78
81
|
onChevronClick,
|
|
79
82
|
collapsed,
|
|
80
83
|
defaultCollapsed,
|
|
81
84
|
actions,
|
|
85
|
+
areActionsFading = true,
|
|
82
86
|
renderTreeItems,
|
|
83
87
|
children,
|
|
84
88
|
}: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
|
|
@@ -108,7 +112,8 @@ Tree.Item = function ({
|
|
|
108
112
|
<div
|
|
109
113
|
className={classNames(
|
|
110
114
|
className ? className : "",
|
|
111
|
-
"s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4
|
|
115
|
+
"s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4",
|
|
116
|
+
size === "sm" ? "s-py-1" : "s-py-2"
|
|
112
117
|
)}
|
|
113
118
|
>
|
|
114
119
|
{type === "node" && (
|
|
@@ -126,8 +131,13 @@ Tree.Item = function ({
|
|
|
126
131
|
{type === "leaf" && <div className="s-w-5"></div>}
|
|
127
132
|
{checkbox && <Checkbox {...checkbox} />}
|
|
128
133
|
|
|
129
|
-
<div className="s-flex s-w-full s-items-center
|
|
130
|
-
<div
|
|
134
|
+
<div className="s-flex s-w-full s-items-center">
|
|
135
|
+
<div
|
|
136
|
+
className={classNames(
|
|
137
|
+
"s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center",
|
|
138
|
+
size === "sm" ? "s-gap-1.5" : "s-gap-2"
|
|
139
|
+
)}
|
|
140
|
+
>
|
|
131
141
|
{visual ? (
|
|
132
142
|
visual
|
|
133
143
|
) : (
|
|
@@ -138,9 +148,23 @@ Tree.Item = function ({
|
|
|
138
148
|
/>
|
|
139
149
|
)}
|
|
140
150
|
|
|
141
|
-
<div
|
|
151
|
+
<div
|
|
152
|
+
className={classNames(
|
|
153
|
+
"s-truncate s-font-medium s-text-element-900",
|
|
154
|
+
size === "sm" ? "s-text-sm" : "s-text-base"
|
|
155
|
+
)}
|
|
156
|
+
>
|
|
157
|
+
{label}
|
|
158
|
+
</div>
|
|
142
159
|
{actions && (
|
|
143
|
-
<div
|
|
160
|
+
<div
|
|
161
|
+
className={classNames(
|
|
162
|
+
"s-inline-block s-pl-5",
|
|
163
|
+
areActionsFading
|
|
164
|
+
? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
|
|
165
|
+
: ""
|
|
166
|
+
)}
|
|
167
|
+
>
|
|
144
168
|
{actions}
|
|
145
169
|
</div>
|
|
146
170
|
)}
|
|
@@ -5,7 +5,11 @@ import { v4 as uuidv4 } from "uuid";
|
|
|
5
5
|
import { Dust } from "@sparkle/icons/solid";
|
|
6
6
|
|
|
7
7
|
import {
|
|
8
|
+
Button,
|
|
9
|
+
Chip,
|
|
8
10
|
CloudArrowDownIcon,
|
|
11
|
+
Cog6ToothIcon,
|
|
12
|
+
DriveLogo,
|
|
9
13
|
IconButton,
|
|
10
14
|
IntercomLogo,
|
|
11
15
|
NotionLogo,
|
|
@@ -250,11 +254,11 @@ export const TreeExample = () => {
|
|
|
250
254
|
<div className="s-flex s-flex-col s-gap-3">
|
|
251
255
|
<div className="s-text-xl">With custom visual</div>
|
|
252
256
|
<div>
|
|
253
|
-
<Tree
|
|
257
|
+
<Tree>
|
|
254
258
|
<Tree.Item
|
|
255
259
|
label="Intercom"
|
|
256
260
|
type="item"
|
|
257
|
-
visual={<IntercomLogo
|
|
261
|
+
visual={<IntercomLogo />}
|
|
258
262
|
checkbox={{
|
|
259
263
|
variant: "checkable",
|
|
260
264
|
checked: false,
|
|
@@ -266,7 +270,7 @@ export const TreeExample = () => {
|
|
|
266
270
|
<Tree.Item
|
|
267
271
|
label="Notion"
|
|
268
272
|
type="item"
|
|
269
|
-
visual={<NotionLogo
|
|
273
|
+
visual={<NotionLogo />}
|
|
270
274
|
checkbox={{
|
|
271
275
|
variant: "checkable",
|
|
272
276
|
checked: false,
|
|
@@ -278,7 +282,7 @@ export const TreeExample = () => {
|
|
|
278
282
|
<Tree.Item
|
|
279
283
|
label="Slack"
|
|
280
284
|
type="item"
|
|
281
|
-
visual={<SlackLogo
|
|
285
|
+
visual={<SlackLogo />}
|
|
282
286
|
checkbox={{
|
|
283
287
|
variant: "checkable",
|
|
284
288
|
checked: false,
|
|
@@ -290,7 +294,7 @@ export const TreeExample = () => {
|
|
|
290
294
|
<Tree.Item
|
|
291
295
|
label="Dust"
|
|
292
296
|
type="item"
|
|
293
|
-
visual={<Dust
|
|
297
|
+
visual={<Dust />}
|
|
294
298
|
checkbox={{
|
|
295
299
|
variant: "checkable",
|
|
296
300
|
checked: false,
|
|
@@ -303,6 +307,7 @@ export const TreeExample = () => {
|
|
|
303
307
|
</div>
|
|
304
308
|
</div>
|
|
305
309
|
</div>
|
|
310
|
+
|
|
306
311
|
<div className="s-flex s-gap-10">
|
|
307
312
|
<div className="s-flex s-flex-col s-gap-3">
|
|
308
313
|
<div className="s-text-xl">Tree</div>
|
|
@@ -529,11 +534,11 @@ export const TreeExample = () => {
|
|
|
529
534
|
<div className="s-flex s-flex-col s-gap-3">
|
|
530
535
|
<div className="s-text-xl">With custom visual</div>
|
|
531
536
|
<div>
|
|
532
|
-
<Tree>
|
|
537
|
+
<Tree isBoxed>
|
|
533
538
|
<Tree.Item
|
|
534
539
|
label="Intercom"
|
|
535
540
|
type="item"
|
|
536
|
-
visual={<IntercomLogo
|
|
541
|
+
visual={<IntercomLogo />}
|
|
537
542
|
checkbox={{
|
|
538
543
|
variant: "checkable",
|
|
539
544
|
checked: false,
|
|
@@ -545,7 +550,7 @@ export const TreeExample = () => {
|
|
|
545
550
|
<Tree.Item
|
|
546
551
|
label="Notion"
|
|
547
552
|
type="item"
|
|
548
|
-
visual={<NotionLogo
|
|
553
|
+
visual={<NotionLogo />}
|
|
549
554
|
checkbox={{
|
|
550
555
|
variant: "checkable",
|
|
551
556
|
checked: false,
|
|
@@ -557,7 +562,7 @@ export const TreeExample = () => {
|
|
|
557
562
|
<Tree.Item
|
|
558
563
|
label="Slack"
|
|
559
564
|
type="item"
|
|
560
|
-
visual={<SlackLogo
|
|
565
|
+
visual={<SlackLogo />}
|
|
561
566
|
checkbox={{
|
|
562
567
|
variant: "checkable",
|
|
563
568
|
checked: false,
|
|
@@ -569,7 +574,163 @@ export const TreeExample = () => {
|
|
|
569
574
|
<Tree.Item
|
|
570
575
|
label="Dust"
|
|
571
576
|
type="item"
|
|
572
|
-
visual={<Dust
|
|
577
|
+
visual={<Dust />}
|
|
578
|
+
checkbox={{
|
|
579
|
+
variant: "checkable",
|
|
580
|
+
checked: false,
|
|
581
|
+
onChange: () => {
|
|
582
|
+
return;
|
|
583
|
+
},
|
|
584
|
+
}}
|
|
585
|
+
/>
|
|
586
|
+
</Tree>
|
|
587
|
+
</div>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
);
|
|
592
|
+
};
|
|
593
|
+
|
|
594
|
+
export const SelectDataSourceExample = () => {
|
|
595
|
+
return (
|
|
596
|
+
<div className="s-flex s-w-full s-flex-col s-gap-10">
|
|
597
|
+
<div className="s-flex s-grow s-gap-10">
|
|
598
|
+
<div className="w-full s-flex s-flex-col s-gap-3">
|
|
599
|
+
<div className="s-text-xl">Display Data source Tree example</div>
|
|
600
|
+
<div className="w-full">
|
|
601
|
+
<Tree>
|
|
602
|
+
<Tree.Item
|
|
603
|
+
label="Intercom"
|
|
604
|
+
visual={<IntercomLogo />}
|
|
605
|
+
size="md"
|
|
606
|
+
areActionsFading={false}
|
|
607
|
+
actions={
|
|
608
|
+
<div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
|
|
609
|
+
<span className="s-text-sm s-text-element-700">
|
|
610
|
+
Managed by: Stanislas Polu
|
|
611
|
+
</span>
|
|
612
|
+
<Chip size="sm" color="pink" label="Syncing (235)" />
|
|
613
|
+
<Button
|
|
614
|
+
label="Manage"
|
|
615
|
+
icon={Cog6ToothIcon}
|
|
616
|
+
variant="tertiary"
|
|
617
|
+
size="sm"
|
|
618
|
+
hasMagnifying={false}
|
|
619
|
+
/>
|
|
620
|
+
</div>
|
|
621
|
+
}
|
|
622
|
+
/>
|
|
623
|
+
<Tree.Item
|
|
624
|
+
label="Slack"
|
|
625
|
+
collapsed={true}
|
|
626
|
+
visual={<SlackLogo />}
|
|
627
|
+
areActionsFading={false}
|
|
628
|
+
actions={
|
|
629
|
+
<div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
|
|
630
|
+
<span className="s-text-sm s-text-element-700">
|
|
631
|
+
Managed by: Stanislas Polu
|
|
632
|
+
</span>
|
|
633
|
+
<Chip size="sm" color="pink" label="Syncing (235)" />
|
|
634
|
+
<Button
|
|
635
|
+
label="Manage"
|
|
636
|
+
icon={Cog6ToothIcon}
|
|
637
|
+
variant="tertiary"
|
|
638
|
+
size="sm"
|
|
639
|
+
hasMagnifying={false}
|
|
640
|
+
/>
|
|
641
|
+
</div>
|
|
642
|
+
}
|
|
643
|
+
size="md"
|
|
644
|
+
/>
|
|
645
|
+
<Tree.Item
|
|
646
|
+
label="Notion"
|
|
647
|
+
visual={<NotionLogo />}
|
|
648
|
+
areActionsFading={false}
|
|
649
|
+
size="md"
|
|
650
|
+
actions={
|
|
651
|
+
<div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
|
|
652
|
+
<span className="s-text-sm s-text-element-700">
|
|
653
|
+
Managed by: Stanislas Polu
|
|
654
|
+
</span>
|
|
655
|
+
<Chip size="sm" color="pink" label="Syncing (235)" />
|
|
656
|
+
<Button
|
|
657
|
+
label="Manage"
|
|
658
|
+
icon={Cog6ToothIcon}
|
|
659
|
+
variant="tertiary"
|
|
660
|
+
size="sm"
|
|
661
|
+
hasMagnifying={false}
|
|
662
|
+
/>
|
|
663
|
+
</div>
|
|
664
|
+
}
|
|
665
|
+
collapsed={false}
|
|
666
|
+
>
|
|
667
|
+
<Tree>
|
|
668
|
+
<Tree.Item label="item 1" />
|
|
669
|
+
<Tree.Item label="item 2" />
|
|
670
|
+
<Tree.Item label="item 3" />
|
|
671
|
+
<Tree.Item label="item 4" />
|
|
672
|
+
</Tree>
|
|
673
|
+
</Tree.Item>
|
|
674
|
+
<Tree.Item
|
|
675
|
+
label="Google Drive"
|
|
676
|
+
visual={<DriveLogo />}
|
|
677
|
+
areActionsFading={false}
|
|
678
|
+
size="md"
|
|
679
|
+
defaultCollapsed={true}
|
|
680
|
+
actions={
|
|
681
|
+
<div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
|
|
682
|
+
<span className="s-text-sm s-text-element-700">
|
|
683
|
+
Managed by: Stanislas Polu
|
|
684
|
+
</span>
|
|
685
|
+
<Chip size="sm" color="pink" label="Syncing (235)" />
|
|
686
|
+
<Button
|
|
687
|
+
label="Manage"
|
|
688
|
+
icon={Cog6ToothIcon}
|
|
689
|
+
variant="tertiary"
|
|
690
|
+
size="sm"
|
|
691
|
+
hasMagnifying={false}
|
|
692
|
+
/>
|
|
693
|
+
</div>
|
|
694
|
+
}
|
|
695
|
+
/>
|
|
696
|
+
</Tree>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
700
|
+
<div className="s-flex s-gap-10">
|
|
701
|
+
<div className="s-flex s-flex-col s-gap-3">
|
|
702
|
+
<div className="s-text-xl">Select Data source Tree example</div>
|
|
703
|
+
<div>
|
|
704
|
+
<Tree>
|
|
705
|
+
<Tree.Item
|
|
706
|
+
label="Intercom"
|
|
707
|
+
visual={<IntercomLogo />}
|
|
708
|
+
size="md"
|
|
709
|
+
checkbox={{
|
|
710
|
+
variant: "checkable",
|
|
711
|
+
checked: false,
|
|
712
|
+
onChange: () => {
|
|
713
|
+
return;
|
|
714
|
+
},
|
|
715
|
+
}}
|
|
716
|
+
/>
|
|
717
|
+
<Tree.Item
|
|
718
|
+
label="Slack"
|
|
719
|
+
collapsed={true}
|
|
720
|
+
visual={<SlackLogo />}
|
|
721
|
+
size="md"
|
|
722
|
+
checkbox={{
|
|
723
|
+
variant: "checkable",
|
|
724
|
+
checked: false,
|
|
725
|
+
onChange: () => {
|
|
726
|
+
return;
|
|
727
|
+
},
|
|
728
|
+
}}
|
|
729
|
+
/>
|
|
730
|
+
<Tree.Item
|
|
731
|
+
label="Notion"
|
|
732
|
+
visual={<NotionLogo />}
|
|
733
|
+
size="md"
|
|
573
734
|
checkbox={{
|
|
574
735
|
variant: "checkable",
|
|
575
736
|
checked: false,
|
|
@@ -577,6 +738,63 @@ export const TreeExample = () => {
|
|
|
577
738
|
return;
|
|
578
739
|
},
|
|
579
740
|
}}
|
|
741
|
+
collapsed={false}
|
|
742
|
+
>
|
|
743
|
+
<Tree>
|
|
744
|
+
<Tree.Item
|
|
745
|
+
label="item 1"
|
|
746
|
+
checkbox={{
|
|
747
|
+
variant: "checkable",
|
|
748
|
+
checked: false,
|
|
749
|
+
onChange: () => {
|
|
750
|
+
return;
|
|
751
|
+
},
|
|
752
|
+
}}
|
|
753
|
+
/>
|
|
754
|
+
<Tree.Item
|
|
755
|
+
label="item 2"
|
|
756
|
+
checkbox={{
|
|
757
|
+
variant: "checkable",
|
|
758
|
+
checked: false,
|
|
759
|
+
onChange: () => {
|
|
760
|
+
return;
|
|
761
|
+
},
|
|
762
|
+
}}
|
|
763
|
+
/>
|
|
764
|
+
<Tree.Item
|
|
765
|
+
label="item 3"
|
|
766
|
+
checkbox={{
|
|
767
|
+
variant: "checkable",
|
|
768
|
+
checked: false,
|
|
769
|
+
onChange: () => {
|
|
770
|
+
return;
|
|
771
|
+
},
|
|
772
|
+
}}
|
|
773
|
+
/>
|
|
774
|
+
<Tree.Item
|
|
775
|
+
label="item 4"
|
|
776
|
+
checkbox={{
|
|
777
|
+
variant: "checkable",
|
|
778
|
+
checked: false,
|
|
779
|
+
onChange: () => {
|
|
780
|
+
return;
|
|
781
|
+
},
|
|
782
|
+
}}
|
|
783
|
+
/>
|
|
784
|
+
</Tree>
|
|
785
|
+
</Tree.Item>
|
|
786
|
+
<Tree.Item
|
|
787
|
+
label="Google Drive"
|
|
788
|
+
visual={<DriveLogo />}
|
|
789
|
+
size="md"
|
|
790
|
+
checkbox={{
|
|
791
|
+
variant: "checkable",
|
|
792
|
+
checked: false,
|
|
793
|
+
onChange: () => {
|
|
794
|
+
return;
|
|
795
|
+
},
|
|
796
|
+
}}
|
|
797
|
+
defaultCollapsed={true}
|
|
580
798
|
/>
|
|
581
799
|
</Tree>
|
|
582
800
|
</div>
|