@dust-tt/sparkle 0.2.207 → 0.2.210-rc
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/_index.d.ts +4 -4
- package/dist/cjs/components/Checkbox.d.ts +3 -3
- package/dist/cjs/components/DataTable.d.ts +6 -2
- package/dist/cjs/components/Tree.d.ts +9 -6
- package/dist/cjs/components/WindowUtility.d.ts +15 -0
- package/dist/cjs/icons/solid/ArrowDownS.d.ts +4 -0
- package/dist/cjs/icons/solid/ArrowLeftS.d.ts +4 -0
- package/dist/cjs/icons/solid/ArrowRightS.d.ts +4 -0
- package/dist/cjs/icons/solid/ArrowUpS.d.ts +4 -0
- package/dist/cjs/icons/solid/ChevronDoubleLeft.d.ts +4 -0
- package/dist/cjs/icons/solid/ChevronDoubleRight.d.ts +4 -0
- package/dist/cjs/icons/solid/Company.d.ts +4 -0
- package/dist/cjs/icons/solid/Filter.d.ts +4 -0
- package/dist/cjs/icons/solid/Heart.d.ts +4 -0
- package/dist/cjs/icons/solid/History.d.ts +4 -0
- package/dist/cjs/icons/solid/Home.d.ts +4 -0
- package/dist/cjs/icons/solid/MarkPen.d.ts +4 -0
- package/dist/cjs/icons/solid/Translate.d.ts +4 -0
- package/dist/cjs/icons/solid/index.d.ts +13 -0
- package/dist/cjs/icons/stroke/ArrowDownS.d.ts +4 -0
- package/dist/cjs/icons/stroke/ArrowLeftS.d.ts +4 -0
- package/dist/cjs/icons/stroke/ArrowRightS.d.ts +4 -0
- package/dist/cjs/icons/stroke/ArrowUpS.d.ts +4 -0
- package/dist/cjs/icons/stroke/ChevronDoubleLeft.d.ts +4 -0
- package/dist/cjs/icons/stroke/ChevronDoubleRight.d.ts +4 -0
- package/dist/cjs/icons/stroke/Company.d.ts +4 -0
- package/dist/cjs/icons/stroke/Filter.d.ts +4 -0
- package/dist/cjs/icons/stroke/Heart.d.ts +4 -0
- package/dist/cjs/icons/stroke/History.d.ts +4 -0
- package/dist/cjs/icons/stroke/Home.d.ts +4 -0
- package/dist/cjs/icons/stroke/MarkPen.d.ts +4 -0
- package/dist/cjs/icons/stroke/Translate.d.ts +4 -0
- package/dist/cjs/icons/stroke/index.d.ts +13 -0
- package/dist/cjs/index.js +283 -65
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/stories/Checkbox.stories.d.ts +2 -0
- package/dist/cjs/stories/Tree.stories.d.ts +0 -1
- package/dist/esm/_index.d.ts +4 -4
- package/dist/esm/components/Checkbox.d.ts +3 -3
- package/dist/esm/components/DataTable.d.ts +6 -2
- package/dist/esm/components/Tree.d.ts +9 -6
- package/dist/esm/components/WindowUtility.d.ts +15 -0
- package/dist/esm/icons/solid/ArrowDownS.d.ts +4 -0
- package/dist/esm/icons/solid/ArrowLeftS.d.ts +4 -0
- package/dist/esm/icons/solid/ArrowRightS.d.ts +4 -0
- package/dist/esm/icons/solid/ArrowUpS.d.ts +4 -0
- package/dist/esm/icons/solid/ChevronDoubleLeft.d.ts +4 -0
- package/dist/esm/icons/solid/ChevronDoubleRight.d.ts +4 -0
- package/dist/esm/icons/solid/Company.d.ts +4 -0
- package/dist/esm/icons/solid/Filter.d.ts +4 -0
- package/dist/esm/icons/solid/Heart.d.ts +4 -0
- package/dist/esm/icons/solid/History.d.ts +4 -0
- package/dist/esm/icons/solid/Home.d.ts +4 -0
- package/dist/esm/icons/solid/MarkPen.d.ts +4 -0
- package/dist/esm/icons/solid/Translate.d.ts +4 -0
- package/dist/esm/icons/solid/index.d.ts +13 -0
- package/dist/esm/icons/stroke/ArrowDownS.d.ts +4 -0
- package/dist/esm/icons/stroke/ArrowLeftS.d.ts +4 -0
- package/dist/esm/icons/stroke/ArrowRightS.d.ts +4 -0
- package/dist/esm/icons/stroke/ArrowUpS.d.ts +4 -0
- package/dist/esm/icons/stroke/ChevronDoubleLeft.d.ts +4 -0
- package/dist/esm/icons/stroke/ChevronDoubleRight.d.ts +4 -0
- package/dist/esm/icons/stroke/Company.d.ts +4 -0
- package/dist/esm/icons/stroke/Filter.d.ts +4 -0
- package/dist/esm/icons/stroke/Heart.d.ts +4 -0
- package/dist/esm/icons/stroke/History.d.ts +4 -0
- package/dist/esm/icons/stroke/Home.d.ts +4 -0
- package/dist/esm/icons/stroke/MarkPen.d.ts +4 -0
- package/dist/esm/icons/stroke/Translate.d.ts +4 -0
- package/dist/esm/icons/stroke/index.d.ts +13 -0
- package/dist/esm/index.js +258 -66
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/stories/Checkbox.stories.d.ts +2 -0
- package/dist/esm/stories/Tree.stories.d.ts +0 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/_index.ts +52 -0
- package/src/components/Checkbox.tsx +42 -12
- package/src/components/DataTable.tsx +125 -91
- package/src/components/Tree.tsx +71 -66
- package/src/components/WindowUtility.tsx +67 -0
- package/src/icons/solid/ArrowDownS.tsx +15 -0
- package/src/icons/solid/ArrowLeftS.tsx +15 -0
- package/src/icons/solid/ArrowRightS.tsx +15 -0
- package/src/icons/solid/ArrowUpS.tsx +15 -0
- package/src/icons/solid/ChevronDoubleLeft.tsx +22 -0
- package/src/icons/solid/ChevronDoubleRight.tsx +22 -0
- package/src/icons/solid/Company.tsx +20 -0
- package/src/icons/solid/Filter.tsx +18 -0
- package/src/icons/solid/Heart.tsx +18 -0
- package/src/icons/solid/History.tsx +18 -0
- package/src/icons/solid/Home.tsx +20 -0
- package/src/icons/solid/MarkPen.tsx +18 -0
- package/src/icons/solid/Translate.tsx +18 -0
- package/src/icons/solid/index.ts +14 -0
- package/src/icons/src/solid/arrow-down-s.svg +3 -0
- package/src/icons/src/solid/arrow-left-s.svg +3 -0
- package/src/icons/src/solid/arrow-right-s.svg +3 -0
- package/src/icons/src/solid/arrow-up-s.svg +3 -0
- package/src/icons/src/solid/chevron-double-left.svg +4 -0
- package/src/icons/src/solid/chevron-double-right.svg +4 -0
- package/src/icons/src/solid/company.svg +3 -0
- package/src/icons/src/solid/filter.svg +3 -0
- package/src/icons/src/solid/heart.svg +3 -0
- package/src/icons/src/solid/history.svg +3 -0
- package/src/icons/src/solid/home.svg +3 -0
- package/src/icons/src/solid/mark-pen.svg +3 -0
- package/src/icons/src/solid/translate.svg +3 -0
- package/src/icons/src/stroke/arrow-down-s.svg +3 -0
- package/src/icons/src/stroke/arrow-left-s.svg +3 -0
- package/src/icons/src/stroke/arrow-right-s.svg +3 -0
- package/src/icons/src/stroke/arrow-up-s.svg +3 -0
- package/src/icons/src/stroke/chevron-double-left.svg +4 -0
- package/src/icons/src/stroke/chevron-double-right.svg +4 -0
- package/src/icons/src/stroke/company.svg +9 -0
- package/src/icons/src/stroke/filter.svg +3 -0
- package/src/icons/src/stroke/heart.svg +3 -0
- package/src/icons/src/stroke/history.svg +3 -0
- package/src/icons/src/stroke/home.svg +3 -0
- package/src/icons/src/stroke/mark-pen.svg +3 -0
- package/src/icons/src/stroke/translate.svg +3 -0
- package/src/icons/stroke/ArrowDownS.tsx +15 -0
- package/src/icons/stroke/ArrowLeftS.tsx +15 -0
- package/src/icons/stroke/ArrowRightS.tsx +15 -0
- package/src/icons/stroke/ArrowUpS.tsx +15 -0
- package/src/icons/stroke/ChevronDoubleLeft.tsx +16 -0
- package/src/icons/stroke/ChevronDoubleRight.tsx +16 -0
- package/src/icons/stroke/Company.tsx +24 -0
- package/src/icons/stroke/Filter.tsx +15 -0
- package/src/icons/stroke/Heart.tsx +20 -0
- package/src/icons/stroke/History.tsx +18 -0
- package/src/icons/stroke/Home.tsx +20 -0
- package/src/icons/stroke/MarkPen.tsx +18 -0
- package/src/icons/stroke/Translate.tsx +18 -0
- package/src/icons/stroke/index.ts +13 -0
- package/src/logo/src/platforms/Zendesk.svg +6 -0
- package/src/stories/Checkbox.stories.tsx +63 -2
- package/src/stories/Citation.stories.tsx +1 -0
- package/src/stories/DataTable.stories.tsx +14 -6
- package/src/stories/Tree.stories.tsx +152 -189
|
@@ -8,7 +8,10 @@ import {
|
|
|
8
8
|
Chip,
|
|
9
9
|
CloudArrowDownIcon,
|
|
10
10
|
Cog6ToothIcon,
|
|
11
|
+
DocumentIcon,
|
|
11
12
|
DriveLogo,
|
|
13
|
+
EyeIcon,
|
|
14
|
+
FolderIcon,
|
|
12
15
|
IconButton,
|
|
13
16
|
IntercomLogo,
|
|
14
17
|
NotionLogo,
|
|
@@ -31,12 +34,12 @@ export const TreeExample = () => {
|
|
|
31
34
|
<div className="s-flex s-flex-col s-gap-3">
|
|
32
35
|
<div className="s-text-xl">Tree</div>
|
|
33
36
|
<div>
|
|
34
|
-
<Tree
|
|
35
|
-
<Tree.Item label="item 1 (no children)"
|
|
36
|
-
<Tree.Item label="item 2 (loading)"
|
|
37
|
+
<Tree>
|
|
38
|
+
<Tree.Item label="item 1 (no children)" visual={FolderIcon} />
|
|
39
|
+
<Tree.Item label="item 2 (loading)" visual={FolderIcon}>
|
|
37
40
|
<Tree isLoading />
|
|
38
41
|
</Tree.Item>
|
|
39
|
-
<Tree.Item label="item 3"
|
|
42
|
+
<Tree.Item label="item 3" visual={FolderIcon}>
|
|
40
43
|
<Tree>
|
|
41
44
|
<Tree.Item
|
|
42
45
|
type="leaf"
|
|
@@ -75,109 +78,55 @@ export const TreeExample = () => {
|
|
|
75
78
|
</Tree.Item>
|
|
76
79
|
<Tree.Item
|
|
77
80
|
label="item 4 (forced collapsed)"
|
|
78
|
-
|
|
81
|
+
visual={FolderIcon}
|
|
79
82
|
collapsed={true}
|
|
80
83
|
>
|
|
81
84
|
<Tree>
|
|
82
|
-
<Tree.Item label="item 1" />
|
|
85
|
+
<Tree.Item label="item 1" visual={DocumentIcon} />
|
|
83
86
|
</Tree>
|
|
84
87
|
</Tree.Item>
|
|
85
88
|
<Tree.Item
|
|
86
89
|
label="item 5 (forced expanded)"
|
|
87
|
-
|
|
90
|
+
visual={FolderIcon}
|
|
88
91
|
collapsed={false}
|
|
89
92
|
>
|
|
90
93
|
<Tree>
|
|
91
|
-
<Tree.Item
|
|
94
|
+
<Tree.Item
|
|
95
|
+
label="item 1"
|
|
96
|
+
visual={DocumentIcon}
|
|
97
|
+
actions={
|
|
98
|
+
<>
|
|
99
|
+
<div className="s-text-sm s-text-element-700">
|
|
100
|
+
hello
|
|
101
|
+
</div>
|
|
102
|
+
<IconButton
|
|
103
|
+
size="xs"
|
|
104
|
+
icon={EyeIcon}
|
|
105
|
+
variant="tertiary"
|
|
106
|
+
/>
|
|
107
|
+
</>
|
|
108
|
+
}
|
|
109
|
+
/>
|
|
92
110
|
</Tree>
|
|
93
111
|
</Tree.Item>
|
|
94
112
|
<Tree.Item
|
|
95
113
|
label="item 6 (default collapsed)"
|
|
96
|
-
|
|
114
|
+
visual={FolderIcon}
|
|
97
115
|
defaultCollapsed={true}
|
|
98
116
|
>
|
|
99
117
|
<Tree>
|
|
100
|
-
<Tree.Item
|
|
101
|
-
label="item 1"
|
|
102
|
-
checkbox={{
|
|
103
|
-
variant: "checkable",
|
|
104
|
-
checked: true,
|
|
105
|
-
partialChecked: true,
|
|
106
|
-
onChange: () => {
|
|
107
|
-
return;
|
|
108
|
-
},
|
|
109
|
-
}}
|
|
110
|
-
/>
|
|
111
|
-
<Tree.Item
|
|
112
|
-
label="item 2"
|
|
113
|
-
checkbox={{
|
|
114
|
-
variant: "checkable",
|
|
115
|
-
checked: true,
|
|
116
|
-
onChange: () => {
|
|
117
|
-
return;
|
|
118
|
-
},
|
|
119
|
-
}}
|
|
120
|
-
/>
|
|
121
|
-
<Tree.Item
|
|
122
|
-
label="item 3"
|
|
123
|
-
checkbox={{
|
|
124
|
-
variant: "checkable",
|
|
125
|
-
checked: false,
|
|
126
|
-
onChange: () => {
|
|
127
|
-
return;
|
|
128
|
-
},
|
|
129
|
-
}}
|
|
130
|
-
/>
|
|
131
|
-
<Tree.Item
|
|
132
|
-
label="item 4"
|
|
133
|
-
checkbox={{
|
|
134
|
-
variant: "checkable",
|
|
135
|
-
checked: false,
|
|
136
|
-
onChange: () => {
|
|
137
|
-
return;
|
|
138
|
-
},
|
|
139
|
-
}}
|
|
140
|
-
/>
|
|
141
|
-
<Tree.Item
|
|
142
|
-
label="item 5"
|
|
143
|
-
checkbox={{
|
|
144
|
-
variant: "checkable",
|
|
145
|
-
checked: false,
|
|
146
|
-
onChange: () => {
|
|
147
|
-
return;
|
|
148
|
-
},
|
|
149
|
-
}}
|
|
150
|
-
/>
|
|
118
|
+
<Tree.Item label="item 1" visual={DocumentIcon} />
|
|
151
119
|
</Tree>
|
|
152
120
|
</Tree.Item>
|
|
153
121
|
|
|
154
122
|
<Tree.Item
|
|
155
123
|
label="item 7 (default expanded)"
|
|
156
|
-
|
|
124
|
+
visual={FolderIcon}
|
|
157
125
|
defaultCollapsed={false}
|
|
158
126
|
>
|
|
159
127
|
<Tree>
|
|
160
|
-
<Tree.Item
|
|
161
|
-
|
|
162
|
-
checkbox={{
|
|
163
|
-
variant: "checkable",
|
|
164
|
-
checked: true,
|
|
165
|
-
partialChecked: true,
|
|
166
|
-
onChange: () => {
|
|
167
|
-
return;
|
|
168
|
-
},
|
|
169
|
-
}}
|
|
170
|
-
/>
|
|
171
|
-
<Tree.Item
|
|
172
|
-
label="item 2"
|
|
173
|
-
checkbox={{
|
|
174
|
-
variant: "checkable",
|
|
175
|
-
checked: true,
|
|
176
|
-
onChange: () => {
|
|
177
|
-
return;
|
|
178
|
-
},
|
|
179
|
-
}}
|
|
180
|
-
/>
|
|
128
|
+
<Tree.Item label="item 1" visual={DocumentIcon} />
|
|
129
|
+
<Tree.Item label="item 2" visual={DocumentIcon} />
|
|
181
130
|
</Tree>
|
|
182
131
|
</Tree.Item>
|
|
183
132
|
</Tree>
|
|
@@ -186,11 +135,11 @@ export const TreeExample = () => {
|
|
|
186
135
|
<div className="s-flex s-flex-col s-gap-3">
|
|
187
136
|
<div className="s-text-xl">Flat</div>
|
|
188
137
|
<div>
|
|
189
|
-
<Tree
|
|
138
|
+
<Tree>
|
|
190
139
|
<Tree.Item
|
|
191
140
|
label="item 1"
|
|
192
141
|
type="item"
|
|
193
|
-
|
|
142
|
+
visual={FolderIcon}
|
|
194
143
|
checkbox={{
|
|
195
144
|
variant: "checkable",
|
|
196
145
|
checked: true,
|
|
@@ -202,7 +151,7 @@ export const TreeExample = () => {
|
|
|
202
151
|
<Tree.Item
|
|
203
152
|
label="item 2"
|
|
204
153
|
type="item"
|
|
205
|
-
|
|
154
|
+
visual={FolderIcon}
|
|
206
155
|
checkbox={{
|
|
207
156
|
variant: "checkable",
|
|
208
157
|
checked: true,
|
|
@@ -214,7 +163,7 @@ export const TreeExample = () => {
|
|
|
214
163
|
<Tree.Item
|
|
215
164
|
label="item 3"
|
|
216
165
|
type="item"
|
|
217
|
-
|
|
166
|
+
visual={FolderIcon}
|
|
218
167
|
checkbox={{
|
|
219
168
|
variant: "checkable",
|
|
220
169
|
checked: false,
|
|
@@ -226,7 +175,7 @@ export const TreeExample = () => {
|
|
|
226
175
|
<Tree.Item
|
|
227
176
|
label="item 4"
|
|
228
177
|
type="item"
|
|
229
|
-
|
|
178
|
+
visual={FolderIcon}
|
|
230
179
|
checkbox={{
|
|
231
180
|
variant: "checkable",
|
|
232
181
|
checked: false,
|
|
@@ -238,7 +187,7 @@ export const TreeExample = () => {
|
|
|
238
187
|
<Tree.Item
|
|
239
188
|
label="item 5"
|
|
240
189
|
type="item"
|
|
241
|
-
|
|
190
|
+
visual={FolderIcon}
|
|
242
191
|
checkbox={{
|
|
243
192
|
variant: "checkable",
|
|
244
193
|
checked: false,
|
|
@@ -256,8 +205,8 @@ export const TreeExample = () => {
|
|
|
256
205
|
<Tree>
|
|
257
206
|
<Tree.Item
|
|
258
207
|
label="Intercom"
|
|
208
|
+
visual={IntercomLogo}
|
|
259
209
|
type="item"
|
|
260
|
-
visual={<IntercomLogo />}
|
|
261
210
|
checkbox={{
|
|
262
211
|
variant: "checkable",
|
|
263
212
|
checked: false,
|
|
@@ -269,7 +218,7 @@ export const TreeExample = () => {
|
|
|
269
218
|
<Tree.Item
|
|
270
219
|
label="Notion"
|
|
271
220
|
type="item"
|
|
272
|
-
visual={
|
|
221
|
+
visual={NotionLogo}
|
|
273
222
|
checkbox={{
|
|
274
223
|
variant: "checkable",
|
|
275
224
|
checked: false,
|
|
@@ -281,7 +230,7 @@ export const TreeExample = () => {
|
|
|
281
230
|
<Tree.Item
|
|
282
231
|
label="Slack"
|
|
283
232
|
type="item"
|
|
284
|
-
visual={
|
|
233
|
+
visual={SlackLogo}
|
|
285
234
|
checkbox={{
|
|
286
235
|
variant: "checkable",
|
|
287
236
|
checked: false,
|
|
@@ -293,7 +242,7 @@ export const TreeExample = () => {
|
|
|
293
242
|
<Tree.Item
|
|
294
243
|
label="Dust"
|
|
295
244
|
type="item"
|
|
296
|
-
visual={
|
|
245
|
+
visual={Dust}
|
|
297
246
|
checkbox={{
|
|
298
247
|
variant: "checkable",
|
|
299
248
|
checked: false,
|
|
@@ -305,18 +254,59 @@ export const TreeExample = () => {
|
|
|
305
254
|
</Tree>
|
|
306
255
|
</div>
|
|
307
256
|
</div>
|
|
257
|
+
<div className="s-flex s-flex-col s-gap-3">
|
|
258
|
+
<div className="s-text-xl">Nav bar</div>
|
|
259
|
+
<div>
|
|
260
|
+
<Tree variant="navigator">
|
|
261
|
+
<Tree.Item
|
|
262
|
+
label="Intercom"
|
|
263
|
+
visual={IntercomLogo}
|
|
264
|
+
onItemClick={() => console.log("Clickable")}
|
|
265
|
+
isSelected={true}
|
|
266
|
+
size="md"
|
|
267
|
+
>
|
|
268
|
+
<Tree variant="navigator">
|
|
269
|
+
<Tree.Item label="item 1" visual={FolderIcon}>
|
|
270
|
+
<Tree variant="navigator">
|
|
271
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
272
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
273
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
274
|
+
</Tree>
|
|
275
|
+
</Tree.Item>
|
|
276
|
+
<Tree.Item label="item 2" visual={FolderIcon}>
|
|
277
|
+
<Tree variant="navigator">
|
|
278
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
279
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
280
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
281
|
+
</Tree>
|
|
282
|
+
</Tree.Item>
|
|
283
|
+
<Tree.Item label="item 3" visual={FolderIcon}>
|
|
284
|
+
<Tree variant="navigator">
|
|
285
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
286
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
287
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
288
|
+
</Tree>
|
|
289
|
+
</Tree.Item>
|
|
290
|
+
</Tree>
|
|
291
|
+
</Tree.Item>
|
|
292
|
+
<Tree.Item label="Notion" visual={NotionLogo} size="md" />
|
|
293
|
+
<Tree.Item label="Slack" visual={SlackLogo} size="md" />
|
|
294
|
+
<Tree.Item label="Dust" visual={Dust} size="md" />
|
|
295
|
+
</Tree>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
308
298
|
</div>
|
|
309
299
|
|
|
310
300
|
<div className="s-flex s-gap-10">
|
|
311
301
|
<div className="s-flex s-flex-col s-gap-3">
|
|
312
302
|
<div className="s-text-xl">Tree</div>
|
|
313
303
|
<div>
|
|
314
|
-
<Tree>
|
|
315
|
-
<Tree.Item label="item 1 (no children)"
|
|
316
|
-
<Tree.Item label="item 2 (loading)"
|
|
304
|
+
<Tree isBoxed>
|
|
305
|
+
<Tree.Item label="item 1 (no children)" visual={FolderIcon} />
|
|
306
|
+
<Tree.Item label="item 2 (loading)" visual={FolderIcon}>
|
|
317
307
|
<Tree isLoading />
|
|
318
308
|
</Tree.Item>
|
|
319
|
-
<Tree.Item label="item 3"
|
|
309
|
+
<Tree.Item label="item 3" visual={FolderIcon}>
|
|
320
310
|
<Tree>
|
|
321
311
|
<Tree.Item
|
|
322
312
|
type="leaf"
|
|
@@ -355,7 +345,7 @@ export const TreeExample = () => {
|
|
|
355
345
|
</Tree.Item>
|
|
356
346
|
<Tree.Item
|
|
357
347
|
label="item 4 (forced collapsed)"
|
|
358
|
-
|
|
348
|
+
visual={FolderIcon}
|
|
359
349
|
collapsed={true}
|
|
360
350
|
>
|
|
361
351
|
<Tree>
|
|
@@ -364,7 +354,7 @@ export const TreeExample = () => {
|
|
|
364
354
|
</Tree.Item>
|
|
365
355
|
<Tree.Item
|
|
366
356
|
label="item 5 (forced expanded)"
|
|
367
|
-
|
|
357
|
+
visual={FolderIcon}
|
|
368
358
|
collapsed={false}
|
|
369
359
|
>
|
|
370
360
|
<Tree>
|
|
@@ -373,7 +363,7 @@ export const TreeExample = () => {
|
|
|
373
363
|
</Tree.Item>
|
|
374
364
|
<Tree.Item
|
|
375
365
|
label="item 6 (default collapsed)"
|
|
376
|
-
|
|
366
|
+
visual={FolderIcon}
|
|
377
367
|
defaultCollapsed={true}
|
|
378
368
|
>
|
|
379
369
|
<Tree>
|
|
@@ -381,8 +371,7 @@ export const TreeExample = () => {
|
|
|
381
371
|
label="item 1"
|
|
382
372
|
checkbox={{
|
|
383
373
|
variant: "checkable",
|
|
384
|
-
checked:
|
|
385
|
-
partialChecked: true,
|
|
374
|
+
checked: "partial",
|
|
386
375
|
onChange: () => {
|
|
387
376
|
return;
|
|
388
377
|
},
|
|
@@ -433,7 +422,7 @@ export const TreeExample = () => {
|
|
|
433
422
|
|
|
434
423
|
<Tree.Item
|
|
435
424
|
label="item 7 (default expanded)"
|
|
436
|
-
|
|
425
|
+
visual={FolderIcon}
|
|
437
426
|
defaultCollapsed={false}
|
|
438
427
|
>
|
|
439
428
|
<Tree>
|
|
@@ -441,8 +430,7 @@ export const TreeExample = () => {
|
|
|
441
430
|
label="item 1"
|
|
442
431
|
checkbox={{
|
|
443
432
|
variant: "checkable",
|
|
444
|
-
checked:
|
|
445
|
-
partialChecked: true,
|
|
433
|
+
checked: "partial",
|
|
446
434
|
onChange: () => {
|
|
447
435
|
return;
|
|
448
436
|
},
|
|
@@ -466,11 +454,11 @@ export const TreeExample = () => {
|
|
|
466
454
|
<div className="s-flex s-flex-col s-gap-3">
|
|
467
455
|
<div className="s-text-xl">Flat</div>
|
|
468
456
|
<div>
|
|
469
|
-
<Tree>
|
|
457
|
+
<Tree isBoxed>
|
|
470
458
|
<Tree.Item
|
|
471
459
|
label="item 1"
|
|
472
460
|
type="item"
|
|
473
|
-
|
|
461
|
+
visual={FolderIcon}
|
|
474
462
|
checkbox={{
|
|
475
463
|
variant: "checkable",
|
|
476
464
|
checked: true,
|
|
@@ -482,7 +470,7 @@ export const TreeExample = () => {
|
|
|
482
470
|
<Tree.Item
|
|
483
471
|
label="item 2"
|
|
484
472
|
type="item"
|
|
485
|
-
|
|
473
|
+
visual={FolderIcon}
|
|
486
474
|
checkbox={{
|
|
487
475
|
variant: "checkable",
|
|
488
476
|
checked: true,
|
|
@@ -494,7 +482,7 @@ export const TreeExample = () => {
|
|
|
494
482
|
<Tree.Item
|
|
495
483
|
label="item 3"
|
|
496
484
|
type="item"
|
|
497
|
-
|
|
485
|
+
visual={FolderIcon}
|
|
498
486
|
checkbox={{
|
|
499
487
|
variant: "checkable",
|
|
500
488
|
checked: false,
|
|
@@ -506,7 +494,7 @@ export const TreeExample = () => {
|
|
|
506
494
|
<Tree.Item
|
|
507
495
|
label="item 4"
|
|
508
496
|
type="item"
|
|
509
|
-
|
|
497
|
+
visual={FolderIcon}
|
|
510
498
|
checkbox={{
|
|
511
499
|
variant: "checkable",
|
|
512
500
|
checked: false,
|
|
@@ -518,7 +506,7 @@ export const TreeExample = () => {
|
|
|
518
506
|
<Tree.Item
|
|
519
507
|
label="item 5"
|
|
520
508
|
type="item"
|
|
521
|
-
|
|
509
|
+
visual={FolderIcon}
|
|
522
510
|
checkbox={{
|
|
523
511
|
variant: "checkable",
|
|
524
512
|
checked: false,
|
|
@@ -537,7 +525,7 @@ export const TreeExample = () => {
|
|
|
537
525
|
<Tree.Item
|
|
538
526
|
label="Intercom"
|
|
539
527
|
type="item"
|
|
540
|
-
visual={
|
|
528
|
+
visual={IntercomLogo}
|
|
541
529
|
checkbox={{
|
|
542
530
|
variant: "checkable",
|
|
543
531
|
checked: false,
|
|
@@ -549,7 +537,7 @@ export const TreeExample = () => {
|
|
|
549
537
|
<Tree.Item
|
|
550
538
|
label="Notion"
|
|
551
539
|
type="item"
|
|
552
|
-
visual={
|
|
540
|
+
visual={NotionLogo}
|
|
553
541
|
checkbox={{
|
|
554
542
|
variant: "checkable",
|
|
555
543
|
checked: false,
|
|
@@ -561,7 +549,7 @@ export const TreeExample = () => {
|
|
|
561
549
|
<Tree.Item
|
|
562
550
|
label="Slack"
|
|
563
551
|
type="item"
|
|
564
|
-
visual={
|
|
552
|
+
visual={SlackLogo}
|
|
565
553
|
checkbox={{
|
|
566
554
|
variant: "checkable",
|
|
567
555
|
checked: false,
|
|
@@ -573,7 +561,7 @@ export const TreeExample = () => {
|
|
|
573
561
|
<Tree.Item
|
|
574
562
|
label="Dust"
|
|
575
563
|
type="item"
|
|
576
|
-
visual={
|
|
564
|
+
visual={Dust}
|
|
577
565
|
checkbox={{
|
|
578
566
|
variant: "checkable",
|
|
579
567
|
checked: false,
|
|
@@ -585,76 +573,51 @@ export const TreeExample = () => {
|
|
|
585
573
|
</Tree>
|
|
586
574
|
</div>
|
|
587
575
|
</div>
|
|
588
|
-
<
|
|
576
|
+
<div className="s-flex s-flex-col s-gap-3">
|
|
577
|
+
<div className="s-text-xl">Nav bar</div>
|
|
578
|
+
<div>
|
|
579
|
+
<Tree isBoxed variant="navigator">
|
|
580
|
+
<Tree.Item
|
|
581
|
+
label="Intercom"
|
|
582
|
+
visual={IntercomLogo}
|
|
583
|
+
onItemClick={() => console.log("Clickable")}
|
|
584
|
+
isSelected={true}
|
|
585
|
+
>
|
|
586
|
+
<Tree>
|
|
587
|
+
<Tree.Item label="item 1" visual={FolderIcon}>
|
|
588
|
+
<Tree>
|
|
589
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
590
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
591
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
592
|
+
</Tree>
|
|
593
|
+
</Tree.Item>
|
|
594
|
+
<Tree.Item label="item 2" visual={FolderIcon}>
|
|
595
|
+
<Tree>
|
|
596
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
597
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
598
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
599
|
+
</Tree>
|
|
600
|
+
</Tree.Item>
|
|
601
|
+
<Tree.Item label="item 3" visual={FolderIcon}>
|
|
602
|
+
<Tree>
|
|
603
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
604
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
605
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
606
|
+
</Tree>
|
|
607
|
+
</Tree.Item>
|
|
608
|
+
</Tree>
|
|
609
|
+
</Tree.Item>
|
|
610
|
+
<Tree.Item label="Notion" visual={NotionLogo} />
|
|
611
|
+
<Tree.Item label="Slack" visual={SlackLogo} />
|
|
612
|
+
<Tree.Item label="Dust" visual={Dust} />
|
|
613
|
+
</Tree>
|
|
614
|
+
</div>
|
|
615
|
+
</div>
|
|
589
616
|
</div>
|
|
590
617
|
</div>
|
|
591
618
|
);
|
|
592
619
|
};
|
|
593
620
|
|
|
594
|
-
export const DummyNavBar = () => {
|
|
595
|
-
return <div className="s-flex s-flex-col s-gap-3">
|
|
596
|
-
<div className="s-text-xl">Nav bar</div>
|
|
597
|
-
<div>
|
|
598
|
-
<Tree isBoxed>
|
|
599
|
-
<Tree.Item
|
|
600
|
-
label="Intercom"
|
|
601
|
-
visual={<IntercomLogo />}
|
|
602
|
-
onItemClick={() => console.log("Clickable")}
|
|
603
|
-
isSelected={true}
|
|
604
|
-
>
|
|
605
|
-
<Tree>
|
|
606
|
-
<Tree.Item
|
|
607
|
-
type="leaf"
|
|
608
|
-
label="item 1"
|
|
609
|
-
checkbox={{
|
|
610
|
-
variant: "checkable",
|
|
611
|
-
checked: false,
|
|
612
|
-
onChange: () => {
|
|
613
|
-
return;
|
|
614
|
-
},
|
|
615
|
-
}}
|
|
616
|
-
/>
|
|
617
|
-
<Tree.Item
|
|
618
|
-
label="item 2"
|
|
619
|
-
type="leaf"
|
|
620
|
-
checkbox={{
|
|
621
|
-
variant: "checkable",
|
|
622
|
-
checked: false,
|
|
623
|
-
onChange: () => {
|
|
624
|
-
return;
|
|
625
|
-
},
|
|
626
|
-
}}
|
|
627
|
-
/>
|
|
628
|
-
<Tree.Item
|
|
629
|
-
label="item 3"
|
|
630
|
-
type="leaf"
|
|
631
|
-
checkbox={{
|
|
632
|
-
variant: "checkable",
|
|
633
|
-
checked: false,
|
|
634
|
-
onChange: () => {
|
|
635
|
-
return;
|
|
636
|
-
},
|
|
637
|
-
}}
|
|
638
|
-
/>
|
|
639
|
-
</Tree>
|
|
640
|
-
</Tree.Item>
|
|
641
|
-
<Tree.Item
|
|
642
|
-
label="Notion"
|
|
643
|
-
visual={<NotionLogo />}
|
|
644
|
-
/>
|
|
645
|
-
<Tree.Item
|
|
646
|
-
label="Slack"
|
|
647
|
-
visual={<SlackLogo />}
|
|
648
|
-
/>
|
|
649
|
-
<Tree.Item
|
|
650
|
-
label="Dust"
|
|
651
|
-
visual={<Dust />}
|
|
652
|
-
/>
|
|
653
|
-
</Tree>
|
|
654
|
-
</div>
|
|
655
|
-
</div>;
|
|
656
|
-
}
|
|
657
|
-
|
|
658
621
|
export const SelectDataSourceExample = () => {
|
|
659
622
|
return (
|
|
660
623
|
<div className="s-flex s-w-full s-flex-col s-gap-10">
|
|
@@ -665,7 +628,7 @@ export const SelectDataSourceExample = () => {
|
|
|
665
628
|
<Tree>
|
|
666
629
|
<Tree.Item
|
|
667
630
|
label="Intercom"
|
|
668
|
-
visual={
|
|
631
|
+
visual={IntercomLogo}
|
|
669
632
|
size="md"
|
|
670
633
|
areActionsFading={false}
|
|
671
634
|
actions={
|
|
@@ -687,7 +650,7 @@ export const SelectDataSourceExample = () => {
|
|
|
687
650
|
<Tree.Item
|
|
688
651
|
label="Slack"
|
|
689
652
|
collapsed={true}
|
|
690
|
-
visual={
|
|
653
|
+
visual={SlackLogo}
|
|
691
654
|
areActionsFading={false}
|
|
692
655
|
actions={
|
|
693
656
|
<div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
|
|
@@ -708,7 +671,7 @@ export const SelectDataSourceExample = () => {
|
|
|
708
671
|
/>
|
|
709
672
|
<Tree.Item
|
|
710
673
|
label="Notion"
|
|
711
|
-
visual={
|
|
674
|
+
visual={NotionLogo}
|
|
712
675
|
areActionsFading={false}
|
|
713
676
|
size="md"
|
|
714
677
|
actions={
|
|
@@ -737,7 +700,7 @@ export const SelectDataSourceExample = () => {
|
|
|
737
700
|
</Tree.Item>
|
|
738
701
|
<Tree.Item
|
|
739
702
|
label="Google Drive"
|
|
740
|
-
visual={
|
|
703
|
+
visual={DriveLogo}
|
|
741
704
|
areActionsFading={false}
|
|
742
705
|
size="md"
|
|
743
706
|
defaultCollapsed={true}
|
|
@@ -768,7 +731,7 @@ export const SelectDataSourceExample = () => {
|
|
|
768
731
|
<Tree>
|
|
769
732
|
<Tree.Item
|
|
770
733
|
label="Intercom"
|
|
771
|
-
visual={
|
|
734
|
+
visual={IntercomLogo}
|
|
772
735
|
size="md"
|
|
773
736
|
checkbox={{
|
|
774
737
|
variant: "checkable",
|
|
@@ -781,7 +744,7 @@ export const SelectDataSourceExample = () => {
|
|
|
781
744
|
<Tree.Item
|
|
782
745
|
label="Slack"
|
|
783
746
|
collapsed={true}
|
|
784
|
-
visual={
|
|
747
|
+
visual={SlackLogo}
|
|
785
748
|
size="md"
|
|
786
749
|
checkbox={{
|
|
787
750
|
variant: "checkable",
|
|
@@ -793,7 +756,7 @@ export const SelectDataSourceExample = () => {
|
|
|
793
756
|
/>
|
|
794
757
|
<Tree.Item
|
|
795
758
|
label="Notion"
|
|
796
|
-
visual={
|
|
759
|
+
visual={NotionLogo}
|
|
797
760
|
size="md"
|
|
798
761
|
checkbox={{
|
|
799
762
|
variant: "checkable",
|
|
@@ -849,7 +812,7 @@ export const SelectDataSourceExample = () => {
|
|
|
849
812
|
</Tree.Item>
|
|
850
813
|
<Tree.Item
|
|
851
814
|
label="Google Drive"
|
|
852
|
-
visual={
|
|
815
|
+
visual={DriveLogo}
|
|
853
816
|
size="md"
|
|
854
817
|
checkbox={{
|
|
855
818
|
variant: "checkable",
|
|
@@ -879,7 +842,7 @@ const TreeItem = ({
|
|
|
879
842
|
return (
|
|
880
843
|
<Tree.Item
|
|
881
844
|
label={label}
|
|
882
|
-
|
|
845
|
+
visual={FolderIcon}
|
|
883
846
|
actions={
|
|
884
847
|
<div className="s-flex s-flex-row s-justify-center s-gap-2">
|
|
885
848
|
<span className="s-text-xs s-text-element-700">
|
|
@@ -902,4 +865,4 @@ const createTreeItems = (n = 5, getLabel: () => string) => {
|
|
|
902
865
|
}
|
|
903
866
|
|
|
904
867
|
return <Tree>{items}</Tree>;
|
|
905
|
-
};
|
|
868
|
+
};
|