@dust-tt/sparkle 0.2.538 → 0.2.539-rc-2
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.js +1 -1
- package/dist/esm/components/Bar.d.ts +67 -0
- package/dist/esm/components/Bar.d.ts.map +1 -0
- package/dist/esm/components/{BarHeader.js → Bar.js} +36 -8
- package/dist/esm/components/Bar.js.map +1 -0
- package/dist/esm/components/index.d.ts +1 -1
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/stories/Bar.stories.d.ts +16 -0
- package/dist/esm/stories/Bar.stories.d.ts.map +1 -0
- package/dist/esm/stories/Bar.stories.js +103 -0
- package/dist/esm/stories/Bar.stories.js.map +1 -0
- package/package.json +1 -1
- package/src/components/{BarHeader.tsx → Bar.tsx} +113 -30
- package/src/components/index.ts +1 -1
- package/src/stories/Bar.stories.tsx +280 -0
- package/dist/esm/components/BarHeader.d.ts +0 -42
- package/dist/esm/components/BarHeader.d.ts.map +0 -1
- package/dist/esm/components/BarHeader.js.map +0 -1
- package/dist/esm/stories/BarHeader.stories.d.ts +0 -19
- package/dist/esm/stories/BarHeader.stories.d.ts.map +0 -1
- package/dist/esm/stories/BarHeader.stories.js +0 -120
- package/dist/esm/stories/BarHeader.stories.js.map +0 -1
- package/src/stories/BarHeader.stories.tsx +0 -264
|
@@ -1,264 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
import { ChatBubbleBottomCenterTextIcon } from "@sparkle/icons/app";
|
|
5
|
-
|
|
6
|
-
import {
|
|
7
|
-
BarHeader,
|
|
8
|
-
Page,
|
|
9
|
-
ResizableHandle,
|
|
10
|
-
ResizablePanel,
|
|
11
|
-
ResizablePanelGroup,
|
|
12
|
-
} from "../index_with_tw_base";
|
|
13
|
-
|
|
14
|
-
const meta = {
|
|
15
|
-
title: "Modules/BarHeader",
|
|
16
|
-
component: BarHeader,
|
|
17
|
-
} satisfies Meta<typeof BarHeader>;
|
|
18
|
-
|
|
19
|
-
export default meta;
|
|
20
|
-
type Story = StoryObj<typeof meta>;
|
|
21
|
-
|
|
22
|
-
export const BasicBarHeader: Story = {
|
|
23
|
-
args: {
|
|
24
|
-
title: "Knowledge Base",
|
|
25
|
-
},
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export const BasicBarHeaderValidate = () => {
|
|
29
|
-
const [isSaving, setIsSaving] = React.useState(false);
|
|
30
|
-
|
|
31
|
-
return (
|
|
32
|
-
<div className="s-h-full s-w-full">
|
|
33
|
-
<BarHeader
|
|
34
|
-
title="Knowledge Base"
|
|
35
|
-
rightActions={
|
|
36
|
-
<BarHeader.ButtonBar
|
|
37
|
-
variant="validate"
|
|
38
|
-
isSaving={isSaving}
|
|
39
|
-
onSave={() => {
|
|
40
|
-
setIsSaving(true);
|
|
41
|
-
setTimeout(() => {
|
|
42
|
-
setIsSaving(false);
|
|
43
|
-
alert("Save !");
|
|
44
|
-
}, 2000);
|
|
45
|
-
}}
|
|
46
|
-
/>
|
|
47
|
-
}
|
|
48
|
-
/>
|
|
49
|
-
<div className="s-mt-16 s-h-full s-w-full s-overflow-y-auto">
|
|
50
|
-
<Page.Header title="Page Title" icon={ChatBubbleBottomCenterTextIcon} />
|
|
51
|
-
<div className="s-flex s-flex-col s-gap-y-96">
|
|
52
|
-
<img src="https://source.unsplash.com/random" />
|
|
53
|
-
<img src="https://source.unsplash.com/random" />
|
|
54
|
-
<img src="https://source.unsplash.com/random" />
|
|
55
|
-
<img src="https://source.unsplash.com/random" />
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
export const BasicBarHeaderValidateCustomLabel = () => {
|
|
63
|
-
const [isSaving, setIsSaving] = React.useState(false);
|
|
64
|
-
|
|
65
|
-
return (
|
|
66
|
-
<div className="s-h-full s-w-full">
|
|
67
|
-
<BarHeader
|
|
68
|
-
title="Knowledge Base"
|
|
69
|
-
rightActions={
|
|
70
|
-
<BarHeader.ButtonBar
|
|
71
|
-
variant="validate"
|
|
72
|
-
isSaving={isSaving}
|
|
73
|
-
saveLabel="Soupinou"
|
|
74
|
-
onSave={() => {
|
|
75
|
-
setIsSaving(true);
|
|
76
|
-
setTimeout(() => {
|
|
77
|
-
setIsSaving(false);
|
|
78
|
-
alert("Save !");
|
|
79
|
-
}, 2000);
|
|
80
|
-
}}
|
|
81
|
-
/>
|
|
82
|
-
}
|
|
83
|
-
/>
|
|
84
|
-
<div className="s-mt-16 s-h-full s-w-full s-overflow-y-auto">
|
|
85
|
-
<Page.Header title="Page Title" icon={ChatBubbleBottomCenterTextIcon} />
|
|
86
|
-
<div className="s-flex s-flex-col s-gap-y-96">
|
|
87
|
-
<img src="https://source.unsplash.com/random" />
|
|
88
|
-
<img src="https://source.unsplash.com/random" />
|
|
89
|
-
<img src="https://source.unsplash.com/random" />
|
|
90
|
-
<img src="https://source.unsplash.com/random" />
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
);
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
export const BasicBarHeaderValidateSaveDisabled = () => (
|
|
98
|
-
<div className="s-mt-16 s-h-full s-w-full">
|
|
99
|
-
<BarHeader
|
|
100
|
-
title="Knowledge Base"
|
|
101
|
-
rightActions={<BarHeader.ButtonBar variant="validate" />}
|
|
102
|
-
/>
|
|
103
|
-
<div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
|
|
104
|
-
<Page.Header title="Page Title" icon={ChatBubbleBottomCenterTextIcon} />
|
|
105
|
-
<div className="s-flex s-flex-col s-gap-y-96">
|
|
106
|
-
<img src="https://source.unsplash.com/random" />
|
|
107
|
-
<img src="https://source.unsplash.com/random" />
|
|
108
|
-
<img src="https://source.unsplash.com/random" />
|
|
109
|
-
<img src="https://source.unsplash.com/random" />
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
);
|
|
114
|
-
|
|
115
|
-
export const BasicBarHeaderBack = () => (
|
|
116
|
-
<div className="s-mt-16 s-h-full s-w-full">
|
|
117
|
-
<BarHeader
|
|
118
|
-
title="Knowledge Base"
|
|
119
|
-
leftActions={<BarHeader.ButtonBar variant="back" />}
|
|
120
|
-
/>
|
|
121
|
-
<div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
|
|
122
|
-
<Page.Header title="Page Title" icon={ChatBubbleBottomCenterTextIcon} />
|
|
123
|
-
<div className="s-flex s-flex-col s-gap-y-96">
|
|
124
|
-
<img src="https://source.unsplash.com/random" />
|
|
125
|
-
<img src="https://source.unsplash.com/random" />
|
|
126
|
-
<img src="https://source.unsplash.com/random" />
|
|
127
|
-
<img src="https://source.unsplash.com/random" />
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
);
|
|
132
|
-
|
|
133
|
-
export const BasicBarHeaderClose = () => (
|
|
134
|
-
<div className="s-mt-16 s-h-full s-w-full">
|
|
135
|
-
<BarHeader
|
|
136
|
-
title="Knowledge Base"
|
|
137
|
-
rightActions={<BarHeader.ButtonBar variant="close" />}
|
|
138
|
-
/>
|
|
139
|
-
<div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
|
|
140
|
-
<Page.Header title="Page Title" icon={ChatBubbleBottomCenterTextIcon} />
|
|
141
|
-
<div className="s-flex s-flex-col s-gap-y-96">
|
|
142
|
-
<img src="https://source.unsplash.com/random" />
|
|
143
|
-
<img src="https://source.unsplash.com/random" />
|
|
144
|
-
<img src="https://source.unsplash.com/random" />
|
|
145
|
-
<img src="https://source.unsplash.com/random" />
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
|
-
);
|
|
150
|
-
|
|
151
|
-
export const BasicBarHeaderConversation = () => (
|
|
152
|
-
<div className="s-mt-16 s-h-full s-w-full">
|
|
153
|
-
<BarHeader
|
|
154
|
-
title="Knowledge Base"
|
|
155
|
-
tooltip="This is a tooltip"
|
|
156
|
-
rightActions={<BarHeader.ButtonBar variant="conversation" />}
|
|
157
|
-
/>
|
|
158
|
-
<div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
|
|
159
|
-
<Page.Header title="Page Title" icon={ChatBubbleBottomCenterTextIcon} />
|
|
160
|
-
<div className="s-flex s-flex-col s-gap-y-96">
|
|
161
|
-
<img src="https://source.unsplash.com/random" />
|
|
162
|
-
<img src="https://source.unsplash.com/random" />
|
|
163
|
-
<img src="https://source.unsplash.com/random" />
|
|
164
|
-
<img src="https://source.unsplash.com/random" />
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
</div>
|
|
168
|
-
);
|
|
169
|
-
|
|
170
|
-
export const BasicBarHeaderValidateSaveDisabledWithTooltip = () => (
|
|
171
|
-
<div className="s-mt-16 s-h-full s-w-full">
|
|
172
|
-
<BarHeader
|
|
173
|
-
title="Knowledge Base"
|
|
174
|
-
rightActions={
|
|
175
|
-
<BarHeader.ButtonBar
|
|
176
|
-
variant="validate"
|
|
177
|
-
saveTooltip="Saving agents is temporarily disabled and will be re-enabled shortly"
|
|
178
|
-
/>
|
|
179
|
-
}
|
|
180
|
-
/>
|
|
181
|
-
<div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
|
|
182
|
-
<Page.Header title="Page Title" icon={ChatBubbleBottomCenterTextIcon} />
|
|
183
|
-
<div className="s-flex s-flex-col s-gap-y-96">
|
|
184
|
-
<img src="https://source.unsplash.com/random" />
|
|
185
|
-
<img src="https://source.unsplash.com/random" />
|
|
186
|
-
<img src="https://source.unsplash.com/random" />
|
|
187
|
-
<img src="https://source.unsplash.com/random" />
|
|
188
|
-
</div>
|
|
189
|
-
</div>
|
|
190
|
-
</div>
|
|
191
|
-
);
|
|
192
|
-
|
|
193
|
-
export const DefaultVariantInPanel = () => {
|
|
194
|
-
const [isSaving, setIsSaving] = React.useState(false);
|
|
195
|
-
|
|
196
|
-
return (
|
|
197
|
-
<div className="s-h-full s-w-full">
|
|
198
|
-
<ResizablePanelGroup direction="horizontal" className="s-h-full s-w-full">
|
|
199
|
-
<ResizablePanel defaultSize={70} minSize={30}>
|
|
200
|
-
<div className="s-flex s-h-full s-flex-col s-bg-white s-shadow-sm">
|
|
201
|
-
<BarHeader
|
|
202
|
-
variant="default"
|
|
203
|
-
title="Agent Builder"
|
|
204
|
-
rightActions={
|
|
205
|
-
<BarHeader.ButtonBar
|
|
206
|
-
variant="validate"
|
|
207
|
-
isSaving={isSaving}
|
|
208
|
-
onCancel={() => alert("Cancelled!")}
|
|
209
|
-
onSave={() => {
|
|
210
|
-
setIsSaving(true);
|
|
211
|
-
setTimeout(() => {
|
|
212
|
-
setIsSaving(false);
|
|
213
|
-
alert("Saved!");
|
|
214
|
-
}, 2000);
|
|
215
|
-
}}
|
|
216
|
-
/>
|
|
217
|
-
}
|
|
218
|
-
/>
|
|
219
|
-
<div className="s-flex-1 s-overflow-y-auto s-p-4">
|
|
220
|
-
<Page.Header
|
|
221
|
-
title="Left Panel Content"
|
|
222
|
-
icon={ChatBubbleBottomCenterTextIcon}
|
|
223
|
-
/>
|
|
224
|
-
<p className="s-text-sm s-text-gray-600">
|
|
225
|
-
This demonstrates the "default" variant of BarHeader that is
|
|
226
|
-
contained within its parent container, perfect for panels and
|
|
227
|
-
sidebars. This panel uses ResizablePanelGroup like
|
|
228
|
-
AgentBuilderLayout.
|
|
229
|
-
</p>
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
</ResizablePanel>
|
|
233
|
-
|
|
234
|
-
<ResizableHandle />
|
|
235
|
-
|
|
236
|
-
<ResizablePanel defaultSize={30} minSize={20}>
|
|
237
|
-
<div className="s-flex s-h-full s-flex-col s-bg-white s-shadow-sm">
|
|
238
|
-
<BarHeader
|
|
239
|
-
variant="default"
|
|
240
|
-
title="Preview Panel"
|
|
241
|
-
rightActions={
|
|
242
|
-
<BarHeader.ButtonBar
|
|
243
|
-
variant="close"
|
|
244
|
-
onClose={() => alert("Closed!")}
|
|
245
|
-
/>
|
|
246
|
-
}
|
|
247
|
-
/>
|
|
248
|
-
<div className="s-flex-1 s-overflow-y-auto s-p-4">
|
|
249
|
-
<Page.Header
|
|
250
|
-
title="Right Panel Content"
|
|
251
|
-
icon={ChatBubbleBottomCenterTextIcon}
|
|
252
|
-
/>
|
|
253
|
-
<p className="s-text-sm s-text-gray-600">
|
|
254
|
-
Notice how each BarHeader is scoped to its own panel width,
|
|
255
|
-
unlike the "full" variant which would span the entire viewport
|
|
256
|
-
width. You can resize this panel!
|
|
257
|
-
</p>
|
|
258
|
-
</div>
|
|
259
|
-
</div>
|
|
260
|
-
</ResizablePanel>
|
|
261
|
-
</ResizablePanelGroup>
|
|
262
|
-
</div>
|
|
263
|
-
);
|
|
264
|
-
};
|