@dust-tt/sparkle 0.4.5 → 0.4.6
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/Timeline.d.ts +25 -0
- package/dist/esm/components/Timeline.d.ts.map +1 -0
- package/dist/esm/components/Timeline.js +59 -0
- package/dist/esm/components/Timeline.js.map +1 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/stories/Timeline.stories.d.ts +11 -0
- package/dist/esm/stories/Timeline.stories.d.ts.map +1 -0
- package/dist/esm/stories/Timeline.stories.js +85 -0
- package/dist/esm/stories/Timeline.stories.js.map +1 -0
- package/dist/sparkle.css +33 -0
- package/package.json +1 -1
- package/src/components/Timeline.tsx +154 -0
- package/src/components/index.ts +1 -0
- package/src/stories/Timeline.stories.tsx +199 -0
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
import { Card, Timeline } from "../index_with_tw_base";
|
|
5
|
+
|
|
6
|
+
const meta = {
|
|
7
|
+
title: "Components/Timeline",
|
|
8
|
+
component: Timeline,
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
} satisfies Meta<typeof Timeline>;
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<typeof meta>;
|
|
14
|
+
|
|
15
|
+
export const Default: Story = {
|
|
16
|
+
render: () => (
|
|
17
|
+
<div className="s-max-w-4xl s-space-y-8">
|
|
18
|
+
<Timeline>
|
|
19
|
+
<Timeline.Item
|
|
20
|
+
variant="upcoming"
|
|
21
|
+
title="Version: October 30, 2025 at 1:36:44 PM"
|
|
22
|
+
meta="4 feedback items"
|
|
23
|
+
description="Latest production version. All feedback is processed."
|
|
24
|
+
>
|
|
25
|
+
<div className="s-grid s-gap-3 s-pt-2 sm:s-grid-cols-2">
|
|
26
|
+
<Card>
|
|
27
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
28
|
+
<div className="s-text-sm s-font-medium">Jules Belveze</div>
|
|
29
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
30
|
+
24 days ago
|
|
31
|
+
</div>
|
|
32
|
+
<div className="s-mt-2 s-text-sm">Good stuff</div>
|
|
33
|
+
</div>
|
|
34
|
+
</Card>
|
|
35
|
+
<Card>
|
|
36
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
37
|
+
<div className="s-text-sm s-font-medium">Jules Belveze</div>
|
|
38
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
39
|
+
26 days ago
|
|
40
|
+
</div>
|
|
41
|
+
<div className="s-mt-2 s-text-sm">Test</div>
|
|
42
|
+
</div>
|
|
43
|
+
</Card>
|
|
44
|
+
</div>
|
|
45
|
+
</Timeline.Item>
|
|
46
|
+
|
|
47
|
+
<Timeline.Item
|
|
48
|
+
variant="upcoming"
|
|
49
|
+
title="Version: October 24, 2025 at 1:48:53 PM"
|
|
50
|
+
meta="In review"
|
|
51
|
+
description="You are reviewing feedback for this version."
|
|
52
|
+
>
|
|
53
|
+
<div className="s-grid s-gap-3 s-pt-2 sm:s-grid-cols-2">
|
|
54
|
+
<Card>
|
|
55
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
56
|
+
<div className="s-text-sm s-font-medium">Jules Belveze</div>
|
|
57
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
58
|
+
27 days ago
|
|
59
|
+
</div>
|
|
60
|
+
<div className="s-mt-2 s-text-sm">
|
|
61
|
+
Clear and concise brother
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</Card>
|
|
65
|
+
<Card>
|
|
66
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
67
|
+
<div className="s-text-sm s-font-medium">Jules Belveze</div>
|
|
68
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
69
|
+
27 days ago
|
|
70
|
+
</div>
|
|
71
|
+
<div className="s-mt-2 s-text-sm">Good stuff brother</div>
|
|
72
|
+
</div>
|
|
73
|
+
</Card>
|
|
74
|
+
</div>
|
|
75
|
+
</Timeline.Item>
|
|
76
|
+
|
|
77
|
+
<Timeline.Item
|
|
78
|
+
variant="upcoming"
|
|
79
|
+
title="Version: September 30, 2025 at 1:21:09 PM"
|
|
80
|
+
meta="Archived"
|
|
81
|
+
description="Older feedback is still available for reference."
|
|
82
|
+
>
|
|
83
|
+
<div className="s-grid s-gap-3 s-pt-2 sm:s-grid-cols-2">
|
|
84
|
+
<Card>
|
|
85
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
86
|
+
<div className="s-text-sm s-font-medium">ilias@dust.tt</div>
|
|
87
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
88
|
+
1 month ago
|
|
89
|
+
</div>
|
|
90
|
+
<div className="s-mt-2 s-text-sm">View conversation</div>
|
|
91
|
+
</div>
|
|
92
|
+
</Card>
|
|
93
|
+
<Card>
|
|
94
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
95
|
+
<div className="s-text-sm s-font-medium">okal@dust.tt</div>
|
|
96
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
97
|
+
1 month ago
|
|
98
|
+
</div>
|
|
99
|
+
<div className="s-mt-2 s-text-sm">View conversation</div>
|
|
100
|
+
</div>
|
|
101
|
+
</Card>
|
|
102
|
+
</div>
|
|
103
|
+
</Timeline.Item>
|
|
104
|
+
|
|
105
|
+
<Timeline.Item
|
|
106
|
+
variant="complete"
|
|
107
|
+
title="Version: September 15, 2025 at 10:30:00 AM"
|
|
108
|
+
meta="Released"
|
|
109
|
+
description="Major feature update with performance improvements."
|
|
110
|
+
>
|
|
111
|
+
<div className="s-grid s-gap-3 s-pt-2 sm:s-grid-cols-2">
|
|
112
|
+
<Card>
|
|
113
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
114
|
+
<div className="s-text-sm s-font-medium">Sarah Chen</div>
|
|
115
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
116
|
+
2 months ago
|
|
117
|
+
</div>
|
|
118
|
+
<div className="s-mt-2 s-text-sm">
|
|
119
|
+
Performance improvements are impressive!
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</Card>
|
|
123
|
+
<Card>
|
|
124
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
125
|
+
<div className="s-text-sm s-font-medium">Mike Johnson</div>
|
|
126
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
127
|
+
2 months ago
|
|
128
|
+
</div>
|
|
129
|
+
<div className="s-mt-2 s-text-sm">
|
|
130
|
+
Great work on this release
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</Card>
|
|
134
|
+
</div>
|
|
135
|
+
</Timeline.Item>
|
|
136
|
+
|
|
137
|
+
<Timeline.Item
|
|
138
|
+
variant="current"
|
|
139
|
+
title="Version: August 28, 2025 at 3:15:22 PM"
|
|
140
|
+
meta="In progress"
|
|
141
|
+
description="Bug fixes and minor updates being reviewed."
|
|
142
|
+
>
|
|
143
|
+
<div className="s-grid s-gap-3 s-pt-2 sm:s-grid-cols-2">
|
|
144
|
+
<Card>
|
|
145
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
146
|
+
<div className="s-text-sm s-font-medium">Anna Smith</div>
|
|
147
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
148
|
+
3 months ago
|
|
149
|
+
</div>
|
|
150
|
+
<div className="s-mt-2 s-text-sm">
|
|
151
|
+
Found a few edge cases to handle
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</Card>
|
|
155
|
+
<Card>
|
|
156
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
157
|
+
<div className="s-text-sm s-font-medium">Tom Brown</div>
|
|
158
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
159
|
+
3 months ago
|
|
160
|
+
</div>
|
|
161
|
+
<div className="s-mt-2 s-text-sm">Needs more testing</div>
|
|
162
|
+
</div>
|
|
163
|
+
</Card>
|
|
164
|
+
</div>
|
|
165
|
+
</Timeline.Item>
|
|
166
|
+
|
|
167
|
+
<Timeline.Item
|
|
168
|
+
variant="complete"
|
|
169
|
+
title="Version: August 10, 2025 at 9:45:00 AM"
|
|
170
|
+
meta="Deployed"
|
|
171
|
+
description="Initial release with core functionality."
|
|
172
|
+
>
|
|
173
|
+
<div className="s-grid s-gap-3 s-pt-2 sm:s-grid-cols-2">
|
|
174
|
+
<Card>
|
|
175
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
176
|
+
<div className="s-text-sm s-font-medium">Alex Martinez</div>
|
|
177
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
178
|
+
3 months ago
|
|
179
|
+
</div>
|
|
180
|
+
<div className="s-mt-2 s-text-sm">Solid foundation</div>
|
|
181
|
+
</div>
|
|
182
|
+
</Card>
|
|
183
|
+
<Card>
|
|
184
|
+
<div className="s-flex s-flex-col s-gap-1">
|
|
185
|
+
<div className="s-text-sm s-font-medium">Lisa Wang</div>
|
|
186
|
+
<div className="s-text-xs s-text-muted-foreground">
|
|
187
|
+
3 months ago
|
|
188
|
+
</div>
|
|
189
|
+
<div className="s-mt-2 s-text-sm">
|
|
190
|
+
Looking forward to next iteration
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</Card>
|
|
194
|
+
</div>
|
|
195
|
+
</Timeline.Item>
|
|
196
|
+
</Timeline>
|
|
197
|
+
</div>
|
|
198
|
+
),
|
|
199
|
+
};
|