@syscore/ui-library 1.7.8 → 1.9.0

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 (19) hide show
  1. package/client/components/ui/accordion.tsx +501 -45
  2. package/client/components/ui/label.tsx +1 -1
  3. package/client/components/ui/tag.tsx +41 -14
  4. package/client/components/ui/toggle.tsx +16 -24
  5. package/client/global.css +31 -5
  6. package/client/lib/utils.ts +6 -0
  7. package/client/ui/Accordion.stories.tsx +430 -0
  8. package/client/ui/PageHeader.stories.tsx +6 -4
  9. package/client/ui/Panel.stories.tsx +513 -436
  10. package/client/ui/Tag.stories.tsx +153 -46
  11. package/dist/index.cjs.js +1 -1
  12. package/dist/index.d.ts +30 -30
  13. package/dist/index.es.js +415 -466
  14. package/package.json +1 -1
  15. package/client/components/ui/code-badge.tsx +0 -22
  16. package/client/components/ui/standard-table.tsx +0 -554
  17. package/client/ui/Accordion/Accordion.stories.tsx +0 -74
  18. package/client/ui/CodeBadge.stories.tsx +0 -76
  19. package/client/ui/StandardTable.stories.tsx +0 -311
package/client/ui/Tag.stories.tsx CHANGED
@@ -15,62 +15,129 @@ export default meta;
15
15
 
16
16
  type Story = StoryObj<typeof meta>;
17
17
 
18
- export const DualStateInactive: Story = {
18
+ // Text variant (default) - for forms and filters
19
+ export const TextVariantInactive: Story = {
19
20
  args: {
21
+ variant: "text",
20
22
  active: false,
21
23
  children: "Tag",
22
24
  },
23
25
  render: () => (
24
26
  <div className="space-y-4">
25
27
  <div>
26
- <p className="text-sm text-gray-600 mb-2">General purpose, inactive</p>
27
- <Tag active={false}>Tag</Tag>
28
+ <p className="text-sm text-gray-600 mb-2">Text variant, inactive</p>
29
+ <Tag variant="text" active={false}>
30
+ Tag
31
+ </Tag>
28
32
  </div>
29
33
  </div>
30
34
  ),
31
35
  };
32
36
 
33
- export const DualStateActive: Story = {
37
+ export const TextVariantActive: Story = {
34
38
  args: {
39
+ variant: "text",
35
40
  active: true,
36
41
  children: "Tag",
37
42
  },
38
43
  render: () => (
39
44
  <div className="space-y-4">
40
45
  <div>
41
- <p className="text-sm text-gray-600 mb-2">General purpose, active</p>
42
- <Tag active={true}>Tag</Tag>
46
+ <p className="text-sm text-gray-600 mb-2">Text variant, active</p>
47
+ <Tag variant="text" active={true}>
48
+ Tag
49
+ </Tag>
43
50
  </div>
44
51
  </div>
45
52
  ),
46
53
  };
47
54
 
55
+ // Code variant - for code badges like "C1", "A3"
56
+ export const CodeVariant: Story = {
57
+ args: {
58
+ variant: "code",
59
+ children: "C1",
60
+ },
61
+ render: () => (
62
+ <div className="space-y-6">
63
+ <div>
64
+ <p className="text-sm text-gray-600 mb-4">
65
+ Code variant - replaces CodeBadge
66
+ </p>
67
+ <div className="flex gap-4">
68
+ <Tag
69
+ variant="code"
70
+ style={{
71
+ backgroundColor: "#0f748a",
72
+ borderColor: "#0f748a",
73
+ color: "white",
74
+ }}
75
+ >
76
+ C1
77
+ </Tag>
78
+ <Tag
79
+ variant="code"
80
+ style={{
81
+ backgroundColor: "#f0fafb",
82
+ borderColor: "#0f748a",
83
+ color: "#0f748a",
84
+ }}
85
+ >
86
+ A3
87
+ </Tag>
88
+ <Tag
89
+ variant="code"
90
+ style={{
91
+ backgroundColor: "#fef3c7",
92
+ borderColor: "#f59e0b",
93
+ color: "#92400e",
94
+ }}
95
+ >
96
+ M2
97
+ </Tag>
98
+ <Tag
99
+ variant="code"
100
+ style={{
101
+ backgroundColor: "#dcfce7",
102
+ borderColor: "#22c55e",
103
+ color: "#166534",
104
+ }}
105
+ >
106
+ W5
107
+ </Tag>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ ),
112
+ };
113
+
114
+ // Status tags
48
115
  export const StatusTagsLight: Story = {
49
116
  args: {
50
117
  status: "todo",
51
- variant: "light",
118
+ colorScheme: "light",
52
119
  children: "Todo",
53
120
  },
54
121
  render: () => (
55
122
  <div className="space-y-6">
56
123
  <div>
57
124
  <p className="text-sm font-semibold text-gray-600 mb-4">
58
- Status, light
125
+ Status tags, light color scheme
59
126
  </p>
60
127
  <div className="flex flex-col justify-center items-center gap-6">
61
- <Tag status="todo" variant="light">
128
+ <Tag status="todo" colorScheme="light">
62
129
  Todo
63
130
  </Tag>
64
- <Tag status="low" variant="light">
131
+ <Tag status="low" colorScheme="light">
65
132
  Low
66
133
  </Tag>
67
- <Tag status="medium" variant="light">
134
+ <Tag status="medium" colorScheme="light">
68
135
  Medium
69
136
  </Tag>
70
- <Tag status="high" variant="light">
137
+ <Tag status="high" colorScheme="light">
71
138
  High
72
139
  </Tag>
73
- <Tag status="done" variant="light">
140
+ <Tag status="done" colorScheme="light">
74
141
  Done
75
142
  </Tag>
76
143
  </div>
@@ -82,27 +149,29 @@ export const StatusTagsLight: Story = {
82
149
  export const StatusTagsDark: Story = {
83
150
  args: {
84
151
  status: "todo",
85
- variant: "dark",
152
+ colorScheme: "dark",
86
153
  children: "Todo",
87
154
  },
88
155
  render: () => (
89
156
  <div className="space-y-6 bg-gray-900 p-8 rounded-lg">
90
157
  <div>
91
- <p className="text-sm font-semibold text-gray-300 mb-4">Status, dark</p>
158
+ <p className="text-sm font-semibold text-gray-300 mb-4">
159
+ Status tags, dark color scheme
160
+ </p>
92
161
  <div className="flex flex-col justify-center items-center gap-6">
93
- <Tag status="todo" variant="dark">
162
+ <Tag status="todo" colorScheme="dark">
94
163
  Todo
95
164
  </Tag>
96
- <Tag status="low" variant="dark">
165
+ <Tag status="low" colorScheme="dark">
97
166
  Low
98
167
  </Tag>
99
- <Tag status="medium" variant="dark">
168
+ <Tag status="medium" colorScheme="dark">
100
169
  Medium
101
170
  </Tag>
102
- <Tag status="high" variant="dark">
171
+ <Tag status="high" colorScheme="dark">
103
172
  High
104
173
  </Tag>
105
- <Tag status="done" variant="dark">
174
+ <Tag status="done" colorScheme="dark">
106
175
  Done
107
176
  </Tag>
108
177
  </div>
@@ -114,72 +183,110 @@ export const StatusTagsDark: Story = {
114
183
  export const AllVariants: Story = {
115
184
  args: {
116
185
  active: false,
117
- variant: "light",
118
186
  children: "Tag",
119
187
  },
120
- render: (args) => (
188
+ render: () => (
121
189
  <div className="space-y-12">
190
+ {/* Text variant */}
122
191
  <div className="space-y-6">
123
192
  <h3 className="text-base font-semibold text-gray-700">
124
- Dual-state tags
193
+ Text variant (forms/filters)
125
194
  </h3>
126
- <div className="flex flex-col justify-center items-center gap-6">
195
+ <div className="flex gap-6 items-center">
127
196
  <div>
128
- <p className="text-sm text-gray-600 mb-2">
129
- General purpose, inactive
130
- </p>
131
- <Tag {...args}>Tag</Tag>
197
+ <p className="text-sm text-gray-600 mb-2">Inactive</p>
198
+ <Tag variant="text" active={false}>
199
+ Tag
200
+ </Tag>
132
201
  </div>
133
202
  <div>
134
- <p className="text-sm text-gray-600 mb-2">
135
- General purpose, active
136
- </p>
137
- <Tag {...args} active>
203
+ <p className="text-sm text-gray-600 mb-2">Active</p>
204
+ <Tag variant="text" active={true}>
138
205
  Tag
139
206
  </Tag>
140
207
  </div>
141
208
  </div>
142
209
  </div>
143
210
 
211
+ {/* Code variant */}
212
+ <div className="space-y-6">
213
+ <h3 className="text-base font-semibold text-gray-700">
214
+ Code variant (code badges)
215
+ </h3>
216
+ <div className="flex gap-4">
217
+ <Tag
218
+ variant="code"
219
+ style={{
220
+ backgroundColor: "#0f748a",
221
+ borderColor: "#0f748a",
222
+ color: "white",
223
+ }}
224
+ >
225
+ C1
226
+ </Tag>
227
+ <Tag
228
+ variant="code"
229
+ style={{
230
+ backgroundColor: "#f0fafb",
231
+ borderColor: "#0f748a",
232
+ color: "#0f748a",
233
+ }}
234
+ >
235
+ A3
236
+ </Tag>
237
+ <Tag
238
+ variant="code"
239
+ style={{
240
+ backgroundColor: "#fef3c7",
241
+ borderColor: "#f59e0b",
242
+ color: "#92400e",
243
+ }}
244
+ >
245
+ M2
246
+ </Tag>
247
+ </div>
248
+ </div>
249
+
250
+ {/* Status tags */}
144
251
  <div className="space-y-6">
145
252
  <h3 className="text-base font-semibold text-gray-700">Status tags</h3>
146
253
  <div className="grid grid-cols-2 gap-12">
147
254
  <div>
148
- <p className="text-sm text-gray-600 mb-4">Status, light</p>
255
+ <p className="text-sm text-gray-600 mb-4">Light color scheme</p>
149
256
  <div className="flex flex-col justify-center items-center gap-6">
150
- <Tag {...args} variant="light" status="todo">
257
+ <Tag status="todo" colorScheme="light">
151
258
  Todo
152
259
  </Tag>
153
- <Tag {...args} variant="light" status="low">
260
+ <Tag status="low" colorScheme="light">
154
261
  Low
155
262
  </Tag>
156
- <Tag {...args} variant="light" status="medium">
263
+ <Tag status="medium" colorScheme="light">
157
264
  Medium
158
265
  </Tag>
159
- <Tag {...args} variant="light" status="high">
266
+ <Tag status="high" colorScheme="light">
160
267
  High
161
268
  </Tag>
162
- <Tag {...args} variant="light" status="done">
269
+ <Tag status="done" colorScheme="light">
163
270
  Done
164
271
  </Tag>
165
272
  </div>
166
273
  </div>
167
274
  <div className="bg-gray-900 p-6 rounded-lg">
168
- <p className="text-sm text-gray-300 mb-4">Status, dark</p>
275
+ <p className="text-sm text-gray-300 mb-4">Dark color scheme</p>
169
276
  <div className="flex flex-col justify-center items-center gap-6">
170
- <Tag {...args} variant="dark" status="todo">
277
+ <Tag status="todo" colorScheme="dark">
171
278
  Todo
172
279
  </Tag>
173
- <Tag {...args} variant="dark" status="low">
280
+ <Tag status="low" colorScheme="dark">
174
281
  Low
175
282
  </Tag>
176
- <Tag {...args} variant="dark" status="medium">
283
+ <Tag status="medium" colorScheme="dark">
177
284
  Medium
178
285
  </Tag>
179
- <Tag {...args} variant="dark" status="high">
286
+ <Tag status="high" colorScheme="dark">
180
287
  High
181
288
  </Tag>
182
- <Tag {...args} variant="dark" status="done">
289
+ <Tag status="done" colorScheme="dark">
183
290
  Done
184
291
  </Tag>
185
292
  </div>
@@ -193,7 +300,6 @@ export const AllVariants: Story = {
193
300
  export const InteractiveGroup: Story = {
194
301
  args: {
195
302
  active: false,
196
- variant: "light",
197
303
  children: "Tag",
198
304
  },
199
305
  render: () => {
@@ -213,12 +319,13 @@ export const InteractiveGroup: Story = {
213
319
  <div className="space-y-4">
214
320
  <div>
215
321
  <p className="text-sm text-gray-600 mb-2">
216
- Interactive Selection (Form Mode)
322
+ Interactive Selection (Form/Filter Mode)
217
323
  </p>
218
324
  <div className="flex flex-wrap gap-2">
219
325
  {options.map((opt) => (
220
326
  <Tag
221
327
  key={opt}
328
+ variant="text"
222
329
  active={selected.includes(opt)}
223
330
  onClick={() => toggleTag(opt)}
224
331
  type="button"