@xyd-js/storybook 0.0.0-build

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 (63) hide show
  1. package/.storybook/main.ts +40 -0
  2. package/.storybook/manager-head.html +6 -0
  3. package/.storybook/manager.ts +18 -0
  4. package/.storybook/preview.ts +40 -0
  5. package/.storybook/styles.css +5 -0
  6. package/.storybook/theme.ts +34 -0
  7. package/CHANGELOG.md +16 -0
  8. package/LICENSE +21 -0
  9. package/README.md +50 -0
  10. package/eslint.config.js +28 -0
  11. package/package.json +61 -0
  12. package/public/logo.svg +10 -0
  13. package/src/__fixtures__/Icons.tsx +83 -0
  14. package/src/__fixtures__/atlas-index/package-index.mdx +194 -0
  15. package/src/__fixtures__/atlas-index/wip1.mdx +131 -0
  16. package/src/__fixtures__/atlas-index.mdx +53 -0
  17. package/src/__fixtures__/code-sample.mdx +15 -0
  18. package/src/__fixtures__/example-source-uniform.ts +41 -0
  19. package/src/__fixtures__/hello-world.mdx +116 -0
  20. package/src/components/DemoDocs.tsx +235 -0
  21. package/src/components/logo.tsx +37 -0
  22. package/src/decorators/DocsTemplate.tsx +101 -0
  23. package/src/docs/atlas/Atlas.stories.tsx +51 -0
  24. package/src/docs/atlas/todo-app.uniform.json +625 -0
  25. package/src/docs/atlas/uniform-to-references.ts +101 -0
  26. package/src/docs/components/coder/CodeSample.stories.tsx +29 -0
  27. package/src/docs/components/pages/PageBlogHome.stories.tsx +52 -0
  28. package/src/docs/components/pages/PageFirstSlide.stories.tsx +124 -0
  29. package/src/docs/components/pages/PageHome.stories.tsx +127 -0
  30. package/src/docs/components/system/Baseline.stories.tsx +126 -0
  31. package/src/docs/components/writer/Badge.stories.tsx +132 -0
  32. package/src/docs/components/writer/Banner.stories.tsx +394 -0
  33. package/src/docs/components/writer/Blockquote.stories.tsx +415 -0
  34. package/src/docs/components/writer/Breadcrumbs.stories.tsx +282 -0
  35. package/src/docs/components/writer/Button.stories.tsx +405 -0
  36. package/src/docs/components/writer/Callout.stories.tsx +183 -0
  37. package/src/docs/components/writer/Card.stories.tsx +457 -0
  38. package/src/docs/components/writer/ColorSchemeButton.stories.tsx +322 -0
  39. package/src/docs/components/writer/Details.stories.tsx +333 -0
  40. package/src/docs/components/writer/GuideCard.stories.tsx +384 -0
  41. package/src/docs/components/writer/Heading.stories.tsx +379 -0
  42. package/src/docs/components/writer/Hr.stories.tsx +325 -0
  43. package/src/docs/components/writer/IconSocial.stories.tsx +591 -0
  44. package/src/docs/components/writer/Image.stories.tsx +430 -0
  45. package/src/docs/components/writer/List.stories.tsx +479 -0
  46. package/src/docs/components/writer/NavLinks.stories.tsx +380 -0
  47. package/src/docs/components/writer/Pre.stories.tsx +23 -0
  48. package/src/docs/components/writer/Steps.stories.tsx +914 -0
  49. package/src/docs/components/writer/Table.stories.tsx +608 -0
  50. package/src/docs/components/writer/Tabs.stories.tsx +760 -0
  51. package/src/docs/components/writer/TocCard.stories.tsx +407 -0
  52. package/src/docs/components/writer/Update.stories.tsx +457 -0
  53. package/src/docs/components/writer/VideoGuide.stories.tsx +17 -0
  54. package/src/docs/templates/CodeSample.stories.tsx +15 -0
  55. package/src/docs/themes/TODO.md +1 -0
  56. package/src/docs/themes/logo.tsx +37 -0
  57. package/src/docs/themes/themes.stories.tsx +269 -0
  58. package/src/docs/ui/Nav.stories.tsx +58 -0
  59. package/src/docs/ui/Sidebar.stories.tsx +167 -0
  60. package/src/docs/ui/SubNav.stories.tsx +29 -0
  61. package/src/utils/mdx.ts +31 -0
  62. package/tsconfig.json +39 -0
  63. package/vite.config.ts +8 -0
package/src/docs/components/writer/Table.stories.tsx ADDED
@@ -0,0 +1,608 @@
1
+ import React from 'react';
2
+ import type { Meta, StoryObj } from '@storybook/react';
3
+
4
+ import { Table } from '@xyd-js/components/writer';
5
+
6
+ const meta: Meta<typeof Table> = {
7
+ title: 'Components/Writer/Table',
8
+ component: Table,
9
+ parameters: {
10
+ docs: {
11
+ description: {
12
+ component: 'Table component provides structured data display with support for headers, body content, and various cell types including numeric and muted variants.',
13
+ },
14
+ },
15
+ },
16
+ argTypes: {
17
+ children: {
18
+ description: 'The table content including Head and Body components',
19
+ control: false,
20
+ },
21
+ },
22
+ };
23
+
24
+ export default meta;
25
+ type Story = StoryObj<typeof Table>;
26
+
27
+ // Basic table
28
+ export const Default: Story = {
29
+ render: () => (
30
+ <div style={{ padding: '20px' }}>
31
+ <Table>
32
+ <Table.Head>
33
+ <Table.Tr>
34
+ <Table.Th>Model</Table.Th>
35
+ <Table.Th numeric>Training</Table.Th>
36
+ <Table.Th numeric>Input</Table.Th>
37
+ <Table.Th numeric>Cached input</Table.Th>
38
+ <Table.Th numeric>Output</Table.Th>
39
+ </Table.Tr>
40
+ </Table.Head>
41
+ <Table.Body>
42
+ <Table.Tr>
43
+ <Table.Td>
44
+ <Table.Cell>gpt-4o-2024-08-06</Table.Cell>
45
+ </Table.Td>
46
+ <Table.Td numeric>
47
+ <Table.Cell>$25.00</Table.Cell>
48
+ </Table.Td>
49
+ <Table.Td numeric>
50
+ <Table.Cell>$3.75</Table.Cell>
51
+ </Table.Td>
52
+ <Table.Td numeric muted>
53
+ <Table.Cell>$1.875</Table.Cell>
54
+ </Table.Td>
55
+ <Table.Td numeric>
56
+ <Table.Cell>$15.00</Table.Cell>
57
+ </Table.Td>
58
+ </Table.Tr>
59
+ </Table.Body>
60
+ </Table>
61
+ </div>
62
+ ),
63
+ };
64
+
65
+ // Multiple rows
66
+ export const MultipleRows: Story = {
67
+ render: () => (
68
+ <div style={{ padding: '20px' }}>
69
+ <Table>
70
+ <Table.Head>
71
+ <Table.Tr>
72
+ <Table.Th>Model</Table.Th>
73
+ <Table.Th numeric>Training</Table.Th>
74
+ <Table.Th numeric>Input</Table.Th>
75
+ <Table.Th numeric>Cached input</Table.Th>
76
+ <Table.Th numeric>Output</Table.Th>
77
+ </Table.Tr>
78
+ </Table.Head>
79
+ <Table.Body>
80
+ <Table.Tr>
81
+ <Table.Td>
82
+ <Table.Cell>gpt-4o-2024-08-06</Table.Cell>
83
+ </Table.Td>
84
+ <Table.Td numeric>
85
+ <Table.Cell>$25.00</Table.Cell>
86
+ </Table.Td>
87
+ <Table.Td numeric>
88
+ <Table.Cell>$3.75</Table.Cell>
89
+ </Table.Td>
90
+ <Table.Td numeric muted>
91
+ <Table.Cell>$1.875</Table.Cell>
92
+ </Table.Td>
93
+ <Table.Td numeric>
94
+ <Table.Cell>$15.00</Table.Cell>
95
+ </Table.Td>
96
+ </Table.Tr>
97
+ <Table.Tr>
98
+ <Table.Td>
99
+ <Table.Cell>gpt-4o-mini</Table.Cell>
100
+ </Table.Td>
101
+ <Table.Td numeric>
102
+ <Table.Cell>$15.00</Table.Cell>
103
+ </Table.Td>
104
+ <Table.Td numeric>
105
+ <Table.Cell>$0.15</Table.Cell>
106
+ </Table.Td>
107
+ <Table.Td numeric muted>
108
+ <Table.Cell>$0.075</Table.Cell>
109
+ </Table.Td>
110
+ <Table.Td numeric>
111
+ <Table.Cell>$0.60</Table.Cell>
112
+ </Table.Td>
113
+ </Table.Tr>
114
+ <Table.Tr>
115
+ <Table.Td>
116
+ <Table.Cell>gpt-3.5-turbo</Table.Cell>
117
+ </Table.Td>
118
+ <Table.Td numeric>
119
+ <Table.Cell>$3.00</Table.Cell>
120
+ </Table.Td>
121
+ <Table.Td numeric>
122
+ <Table.Cell>$0.0015</Table.Cell>
123
+ </Table.Td>
124
+ <Table.Td numeric muted>
125
+ <Table.Cell>$0.002</Table.Cell>
126
+ </Table.Td>
127
+ <Table.Td numeric>
128
+ <Table.Cell>$0.002</Table.Cell>
129
+ </Table.Td>
130
+ </Table.Tr>
131
+ </Table.Body>
132
+ </Table>
133
+ </div>
134
+ ),
135
+ };
136
+
137
+ // Different data types
138
+ export const DifferentDataTypes: Story = {
139
+ render: () => (
140
+ <div style={{ padding: '20px' }}>
141
+ <Table>
142
+ <Table.Head>
143
+ <Table.Tr>
144
+ <Table.Th>Feature</Table.Th>
145
+ <Table.Th>Status</Table.Th>
146
+ <Table.Th numeric>Usage</Table.Th>
147
+ <Table.Th>Last Updated</Table.Th>
148
+ <Table.Th numeric>Performance</Table.Th>
149
+ </Table.Tr>
150
+ </Table.Head>
151
+ <Table.Body>
152
+ <Table.Tr>
153
+ <Table.Td>
154
+ <Table.Cell>API Authentication</Table.Cell>
155
+ </Table.Td>
156
+ <Table.Td>
157
+ <Table.Cell>✅ Active</Table.Cell>
158
+ </Table.Td>
159
+ <Table.Td numeric>
160
+ <Table.Cell>1,234</Table.Cell>
161
+ </Table.Td>
162
+ <Table.Td>
163
+ <Table.Cell>2024-01-15</Table.Cell>
164
+ </Table.Td>
165
+ <Table.Td numeric>
166
+ <Table.Cell>99.9%</Table.Cell>
167
+ </Table.Td>
168
+ </Table.Tr>
169
+ <Table.Tr>
170
+ <Table.Td>
171
+ <Table.Cell>Data Processing</Table.Cell>
172
+ </Table.Td>
173
+ <Table.Td>
174
+ <Table.Cell>⚠️ Limited</Table.Cell>
175
+ </Table.Td>
176
+ <Table.Td numeric>
177
+ <Table.Cell>567</Table.Cell>
178
+ </Table.Td>
179
+ <Table.Td>
180
+ <Table.Cell>2024-01-10</Table.Cell>
181
+ </Table.Td>
182
+ <Table.Td numeric>
183
+ <Table.Cell>95.2%</Table.Cell>
184
+ </Table.Td>
185
+ </Table.Tr>
186
+ <Table.Tr>
187
+ <Table.Td>
188
+ <Table.Cell>Analytics Dashboard</Table.Cell>
189
+ </Table.Td>
190
+ <Table.Td>
191
+ <Table.Cell>❌ Disabled</Table.Cell>
192
+ </Table.Td>
193
+ <Table.Td numeric>
194
+ <Table.Cell>0</Table.Cell>
195
+ </Table.Td>
196
+ <Table.Td>
197
+ <Table.Cell>2024-01-05</Table.Cell>
198
+ </Table.Td>
199
+ <Table.Td numeric muted>
200
+ <Table.Cell>N/A</Table.Cell>
201
+ </Table.Td>
202
+ </Table.Tr>
203
+ </Table.Body>
204
+ </Table>
205
+ </div>
206
+ ),
207
+ };
208
+
209
+ // Long content
210
+ export const LongContent: Story = {
211
+ render: () => (
212
+ <div style={{ padding: '20px' }}>
213
+ <Table>
214
+ <Table.Head>
215
+ <Table.Tr>
216
+ <Table.Th>Description</Table.Th>
217
+ <Table.Th>Category</Table.Th>
218
+ <Table.Th numeric>Priority</Table.Th>
219
+ <Table.Th>Notes</Table.Th>
220
+ </Table.Tr>
221
+ </Table.Head>
222
+ <Table.Body>
223
+ <Table.Tr>
224
+ <Table.Td>
225
+ <Table.Cell>
226
+ Implement comprehensive user authentication system with support for
227
+ multiple authentication providers including OAuth, SAML, and custom
228
+ token-based authentication.
229
+ </Table.Cell>
230
+ </Table.Td>
231
+ <Table.Td>
232
+ <Table.Cell>Security</Table.Cell>
233
+ </Table.Td>
234
+ <Table.Td numeric>
235
+ <Table.Cell>High</Table.Cell>
236
+ </Table.Td>
237
+ <Table.Td>
238
+ <Table.Cell>
239
+ This feature is critical for enterprise customers and requires
240
+ thorough testing across different environments.
241
+ </Table.Cell>
242
+ </Table.Td>
243
+ </Table.Tr>
244
+ <Table.Tr>
245
+ <Table.Td>
246
+ <Table.Cell>
247
+ Create advanced analytics dashboard with real-time data visualization,
248
+ customizable charts, and export functionality for business intelligence.
249
+ </Table.Cell>
250
+ </Table.Td>
251
+ <Table.Td>
252
+ <Table.Cell>Analytics</Table.Cell>
253
+ </Table.Td>
254
+ <Table.Td numeric>
255
+ <Table.Cell>Medium</Table.Cell>
256
+ </Table.Td>
257
+ <Table.Td>
258
+ <Table.Cell>
259
+ Should integrate with existing data pipeline and support multiple
260
+ chart types including line, bar, and pie charts.
261
+ </Table.Cell>
262
+ </Table.Td>
263
+ </Table.Tr>
264
+ </Table.Body>
265
+ </Table>
266
+ </div>
267
+ ),
268
+ };
269
+
270
+ // Real-world examples
271
+ export const RealWorldExamples: Story = {
272
+ render: () => (
273
+ <div style={{ padding: '20px', maxWidth: '1000px' }}>
274
+ <div style={{ marginBottom: '40px' }}>
275
+ <h2>API Pricing Table</h2>
276
+ <p>Tables are commonly used to display pricing information and feature comparisons.</p>
277
+ <div style={{
278
+ background: 'var(--xyd-bgcolor)',
279
+ border: '1px solid var(--xyd-border-color)',
280
+ borderRadius: '8px',
281
+ padding: '20px'
282
+ }}>
283
+ <Table>
284
+ <Table.Head>
285
+ <Table.Tr>
286
+ <Table.Th>Plan</Table.Th>
287
+ <Table.Th numeric>Price</Table.Th>
288
+ <Table.Th numeric>API Calls</Table.Th>
289
+ <Table.Th numeric>Storage</Table.Th>
290
+ <Table.Th>Support</Table.Th>
291
+ </Table.Tr>
292
+ </Table.Head>
293
+ <Table.Body>
294
+ <Table.Tr>
295
+ <Table.Td>
296
+ <Table.Cell>Starter</Table.Cell>
297
+ </Table.Td>
298
+ <Table.Td numeric>
299
+ <Table.Cell>$29/month</Table.Cell>
300
+ </Table.Td>
301
+ <Table.Td numeric>
302
+ <Table.Cell>10,000</Table.Cell>
303
+ </Table.Td>
304
+ <Table.Td numeric>
305
+ <Table.Cell>5GB</Table.Cell>
306
+ </Table.Td>
307
+ <Table.Td>
308
+ <Table.Cell>Email</Table.Cell>
309
+ </Table.Td>
310
+ </Table.Tr>
311
+ <Table.Tr>
312
+ <Table.Td>
313
+ <Table.Cell>Professional</Table.Cell>
314
+ </Table.Td>
315
+ <Table.Td numeric>
316
+ <Table.Cell>$99/month</Table.Cell>
317
+ </Table.Td>
318
+ <Table.Td numeric>
319
+ <Table.Cell>100,000</Table.Cell>
320
+ </Table.Td>
321
+ <Table.Td numeric>
322
+ <Table.Cell>50GB</Table.Cell>
323
+ </Table.Td>
324
+ <Table.Td>
325
+ <Table.Cell>Priority</Table.Cell>
326
+ </Table.Td>
327
+ </Table.Tr>
328
+ <Table.Tr>
329
+ <Table.Td>
330
+ <Table.Cell>Enterprise</Table.Cell>
331
+ </Table.Td>
332
+ <Table.Td numeric>
333
+ <Table.Cell>Custom</Table.Cell>
334
+ </Table.Td>
335
+ <Table.Td numeric>
336
+ <Table.Cell>Unlimited</Table.Cell>
337
+ </Table.Td>
338
+ <Table.Td numeric>
339
+ <Table.Cell>Unlimited</Table.Cell>
340
+ </Table.Td>
341
+ <Table.Td>
342
+ <Table.Cell>24/7 Phone</Table.Cell>
343
+ </Table.Td>
344
+ </Table.Tr>
345
+ </Table.Body>
346
+ </Table>
347
+ </div>
348
+ </div>
349
+
350
+ <div style={{ marginBottom: '40px' }}>
351
+ <h2>System Status</h2>
352
+ <p>Tables can display system status and monitoring information.</p>
353
+ <div style={{
354
+ background: 'var(--xyd-bgcolor)',
355
+ border: '1px solid var(--xyd-border-color)',
356
+ borderRadius: '8px',
357
+ padding: '20px'
358
+ }}>
359
+ <Table>
360
+ <Table.Head>
361
+ <Table.Tr>
362
+ <Table.Th>Service</Table.Th>
363
+ <Table.Th>Status</Table.Th>
364
+ <Table.Th numeric>Uptime</Table.Th>
365
+ <Table.Th numeric>Response Time</Table.Th>
366
+ <Table.Th>Last Incident</Table.Th>
367
+ </Table.Tr>
368
+ </Table.Head>
369
+ <Table.Body>
370
+ <Table.Tr>
371
+ <Table.Td>
372
+ <Table.Cell>API Gateway</Table.Cell>
373
+ </Table.Td>
374
+ <Table.Td>
375
+ <Table.Cell>🟢 Operational</Table.Cell>
376
+ </Table.Td>
377
+ <Table.Td numeric>
378
+ <Table.Cell>99.99%</Table.Cell>
379
+ </Table.Td>
380
+ <Table.Td numeric>
381
+ <Table.Cell>45ms</Table.Cell>
382
+ </Table.Td>
383
+ <Table.Td>
384
+ <Table.Cell>2024-01-10</Table.Cell>
385
+ </Table.Td>
386
+ </Table.Tr>
387
+ <Table.Tr>
388
+ <Table.Td>
389
+ <Table.Cell>Database</Table.Cell>
390
+ </Table.Td>
391
+ <Table.Td>
392
+ <Table.Cell>🟡 Degraded</Table.Cell>
393
+ </Table.Td>
394
+ <Table.Td numeric>
395
+ <Table.Cell>99.85%</Table.Cell>
396
+ </Table.Td>
397
+ <Table.Td numeric>
398
+ <Table.Cell>120ms</Table.Cell>
399
+ </Table.Td>
400
+ <Table.Td>
401
+ <Table.Cell>2024-01-15</Table.Cell>
402
+ </Table.Td>
403
+ </Table.Tr>
404
+ <Table.Tr>
405
+ <Table.Td>
406
+ <Table.Cell>CDN</Table.Cell>
407
+ </Table.Td>
408
+ <Table.Td>
409
+ <Table.Cell>🟢 Operational</Table.Cell>
410
+ </Table.Td>
411
+ <Table.Td numeric>
412
+ <Table.Cell>99.98%</Table.Cell>
413
+ </Table.Td>
414
+ <Table.Td numeric>
415
+ <Table.Cell>25ms</Table.Cell>
416
+ </Table.Td>
417
+ <Table.Td>
418
+ <Table.Cell>2024-01-08</Table.Cell>
419
+ </Table.Td>
420
+ </Table.Tr>
421
+ </Table.Body>
422
+ </Table>
423
+ </div>
424
+ </div>
425
+
426
+ <div style={{ marginBottom: '40px' }}>
427
+ <h2>User Management</h2>
428
+ <p>Tables are perfect for displaying user lists and management interfaces.</p>
429
+ <div style={{
430
+ background: 'var(--xyd-bgcolor)',
431
+ border: '1px solid var(--xyd-border-color)',
432
+ borderRadius: '8px',
433
+ padding: '20px'
434
+ }}>
435
+ <Table>
436
+ <Table.Head>
437
+ <Table.Tr>
438
+ <Table.Th>User</Table.Th>
439
+ <Table.Th>Role</Table.Th>
440
+ <Table.Th>Status</Table.Th>
441
+ <Table.Th numeric>Last Login</Table.Th>
442
+ <Table.Th numeric>Actions</Table.Th>
443
+ </Table.Tr>
444
+ </Table.Head>
445
+ <Table.Body>
446
+ <Table.Tr>
447
+ <Table.Td>
448
+ <Table.Cell>john.doe@company.com</Table.Cell>
449
+ </Table.Td>
450
+ <Table.Td>
451
+ <Table.Cell>Admin</Table.Cell>
452
+ </Table.Td>
453
+ <Table.Td>
454
+ <Table.Cell>🟢 Active</Table.Cell>
455
+ </Table.Td>
456
+ <Table.Td numeric>
457
+ <Table.Cell>2 hours ago</Table.Cell>
458
+ </Table.Td>
459
+ <Table.Td numeric>
460
+ <Table.Cell>Edit | Delete</Table.Cell>
461
+ </Table.Td>
462
+ </Table.Tr>
463
+ <Table.Tr>
464
+ <Table.Td>
465
+ <Table.Cell>jane.smith@company.com</Table.Cell>
466
+ </Table.Td>
467
+ <Table.Td>
468
+ <Table.Cell>User</Table.Cell>
469
+ </Table.Td>
470
+ <Table.Td>
471
+ <Table.Cell>🟡 Pending</Table.Cell>
472
+ </Table.Td>
473
+ <Table.Td numeric>
474
+ <Table.Cell>Never</Table.Cell>
475
+ </Table.Td>
476
+ <Table.Td numeric>
477
+ <Table.Cell>Edit | Delete</Table.Cell>
478
+ </Table.Td>
479
+ </Table.Tr>
480
+ <Table.Tr>
481
+ <Table.Td>
482
+ <Table.Cell>bob.wilson@company.com</Table.Cell>
483
+ </Table.Td>
484
+ <Table.Td>
485
+ <Table.Cell>Manager</Table.Cell>
486
+ </Table.Td>
487
+ <Table.Td>
488
+ <Table.Cell>🟢 Active</Table.Cell>
489
+ </Table.Td>
490
+ <Table.Td numeric>
491
+ <Table.Cell>1 day ago</Table.Cell>
492
+ </Table.Td>
493
+ <Table.Td numeric>
494
+ <Table.Cell>Edit | Delete</Table.Cell>
495
+ </Table.Td>
496
+ </Table.Tr>
497
+ </Table.Body>
498
+ </Table>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ ),
503
+ parameters: {
504
+ docs: {
505
+ description: {
506
+ story: 'This example shows how tables are typically used in real applications for data display.',
507
+ },
508
+ },
509
+ },
510
+ };
511
+
512
+ // Interactive example
513
+ export const Interactive: Story = {
514
+ render: () => (
515
+ <div style={{ padding: '20px' }}>
516
+ <div style={{
517
+ background: 'var(--xyd-bgcolor)',
518
+ border: '1px solid var(--xyd-border-color)',
519
+ borderRadius: '8px',
520
+ padding: '20px',
521
+ marginBottom: '20px'
522
+ }}>
523
+ <h3 style={{ marginBottom: '16px' }}>Table Component Demo</h3>
524
+ <p style={{ marginBottom: '16px', color: 'var(--xyd-text-color)' }}>
525
+ This example demonstrates the Table component with various cell types and data formats.
526
+ </p>
527
+ <Table>
528
+ <Table.Head>
529
+ <Table.Tr>
530
+ <Table.Th>Component</Table.Th>
531
+ <Table.Th>Type</Table.Th>
532
+ <Table.Th numeric>Complexity</Table.Th>
533
+ <Table.Th>Status</Table.Th>
534
+ </Table.Tr>
535
+ </Table.Head>
536
+ <Table.Body>
537
+ <Table.Tr>
538
+ <Table.Td>
539
+ <Table.Cell>Button</Table.Cell>
540
+ </Table.Td>
541
+ <Table.Td>
542
+ <Table.Cell>Interactive</Table.Cell>
543
+ </Table.Td>
544
+ <Table.Td numeric>
545
+ <Table.Cell>Low</Table.Cell>
546
+ </Table.Td>
547
+ <Table.Td>
548
+ <Table.Cell>✅ Complete</Table.Cell>
549
+ </Table.Td>
550
+ </Table.Tr>
551
+ <Table.Tr>
552
+ <Table.Td>
553
+ <Table.Cell>Table</Table.Cell>
554
+ </Table.Td>
555
+ <Table.Td>
556
+ <Table.Cell>Data Display</Table.Cell>
557
+ </Table.Td>
558
+ <Table.Td numeric>
559
+ <Table.Cell>Medium</Table.Cell>
560
+ </Table.Td>
561
+ <Table.Td>
562
+ <Table.Cell>🔄 In Progress</Table.Cell>
563
+ </Table.Td>
564
+ </Table.Tr>
565
+ <Table.Tr>
566
+ <Table.Td>
567
+ <Table.Cell>Steps</Table.Cell>
568
+ </Table.Td>
569
+ <Table.Td>
570
+ <Table.Cell>Navigation</Table.Cell>
571
+ </Table.Td>
572
+ <Table.Td numeric>
573
+ <Table.Cell>Low</Table.Cell>
574
+ </Table.Td>
575
+ <Table.Td>
576
+ <Table.Cell>✅ Complete</Table.Cell>
577
+ </Table.Td>
578
+ </Table.Tr>
579
+ </Table.Body>
580
+ </Table>
581
+ </div>
582
+
583
+ <div style={{
584
+ background: 'var(--xyd-bgcolor)',
585
+ border: '1px solid var(--xyd-border-color)',
586
+ borderRadius: '8px',
587
+ padding: '20px'
588
+ }}>
589
+ <h4 style={{ marginBottom: '12px' }}>Features</h4>
590
+ <ul style={{ color: 'var(--xyd-text-color)' }}>
591
+ <li>Structured data display</li>
592
+ <li>Numeric cell alignment</li>
593
+ <li>Muted cell styling</li>
594
+ <li>Responsive design</li>
595
+ <li>Accessible markup</li>
596
+ </ul>
597
+ </div>
598
+ </div>
599
+ ),
600
+ parameters: {
601
+ docs: {
602
+ description: {
603
+ story: 'This interactive example demonstrates the Table component functionality and styling.',
604
+ },
605
+ },
606
+ },
607
+ };
608
+