@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/Steps.stories.tsx ADDED
@@ -0,0 +1,914 @@
1
+ import React from 'react';
2
+ import type { Meta, StoryObj } from '@storybook/react';
3
+
4
+ import { Steps } from '@xyd-js/components/writer';
5
+
6
+ const meta: Meta<typeof Steps> = {
7
+ title: 'Components/Writer/Steps',
8
+ component: Steps,
9
+ parameters: {
10
+ docs: {
11
+ description: {
12
+ component: 'Steps component provides a sequential step-by-step interface for guiding users through processes, tutorials, or workflows.',
13
+ },
14
+ },
15
+ },
16
+ argTypes: {
17
+ children: {
18
+ description: 'The step items to display',
19
+ control: false,
20
+ },
21
+ },
22
+ };
23
+
24
+ export default meta;
25
+ type Story = StoryObj<typeof Steps>;
26
+
27
+ // Basic steps
28
+ export const Default: Story = {
29
+ render: () => (
30
+ <div style={{ padding: '20px' }}>
31
+ <Steps>
32
+ <Steps.Item>
33
+ First, you need to install the package.
34
+ </Steps.Item>
35
+ <Steps.Item>
36
+ Then you need to import the component.
37
+ </Steps.Item>
38
+ <Steps.Item>
39
+ Finally, you can use it in your application.
40
+ </Steps.Item>
41
+ </Steps>
42
+ </div>
43
+ ),
44
+ };
45
+
46
+ // Multiple steps
47
+ export const MultipleSteps: Story = {
48
+ render: () => (
49
+ <div style={{ padding: '20px' }}>
50
+ <Steps>
51
+ <Steps.Item>
52
+ Download the project files from the repository.
53
+ </Steps.Item>
54
+ <Steps.Item>
55
+ Install dependencies using npm or yarn.
56
+ </Steps.Item>
57
+ <Steps.Item>
58
+ Configure your environment variables.
59
+ </Steps.Item>
60
+ <Steps.Item>
61
+ Run the development server.
62
+ </Steps.Item>
63
+ <Steps.Item>
64
+ Open your browser and navigate to localhost:3000.
65
+ </Steps.Item>
66
+ <Steps.Item>
67
+ Start building your application!
68
+ </Steps.Item>
69
+ </Steps>
70
+ </div>
71
+ ),
72
+ };
73
+
74
+ // Long content steps
75
+ export const LongContent: Story = {
76
+ render: () => (
77
+ <div style={{ padding: '20px' }}>
78
+ <Steps>
79
+ <Steps.Item>
80
+ <div>
81
+ <h4 style={{ marginBottom: '8px' }}>Project Setup</h4>
82
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
83
+ Begin by creating a new project directory and initializing your development
84
+ environment. This includes setting up your package manager, version control,
85
+ and basic project structure.
86
+ </p>
87
+ </div>
88
+ </Steps.Item>
89
+ <Steps.Item>
90
+ <div>
91
+ <h4 style={{ marginBottom: '8px' }}>Install Dependencies</h4>
92
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
93
+ Install all required dependencies including React, TypeScript, and any
94
+ additional libraries your project requires. Make sure to use the correct
95
+ versions for compatibility.
96
+ </p>
97
+ </div>
98
+ </Steps.Item>
99
+ <Steps.Item>
100
+ <div>
101
+ <h4 style={{ marginBottom: '8px' }}>Configuration</h4>
102
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
103
+ Configure your build tools, linting rules, and development environment.
104
+ This includes setting up TypeScript configuration, ESLint rules, and
105
+ any other development tools.
106
+ </p>
107
+ </div>
108
+ </Steps.Item>
109
+ <Steps.Item>
110
+ <div>
111
+ <h4 style={{ marginBottom: '8px' }}>Development</h4>
112
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
113
+ Start developing your application with hot reloading enabled. Make sure
114
+ to follow best practices and write clean, maintainable code.
115
+ </p>
116
+ </div>
117
+ </Steps.Item>
118
+ </Steps>
119
+ </div>
120
+ ),
121
+ };
122
+
123
+ // Steps with code examples
124
+ export const WithCodeExamples: Story = {
125
+ render: () => (
126
+ <div style={{ padding: '20px' }}>
127
+ <Steps>
128
+ <Steps.Item>
129
+ <div>
130
+ <h4 style={{ marginBottom: '8px' }}>Install Package</h4>
131
+ <p style={{ marginBottom: '8px', color: 'var(--xyd-text-color-secondary)' }}>
132
+ Install the component library using npm:
133
+ </p>
134
+ <pre style={{
135
+ background: 'var(--xyd-bgcolor-secondary)',
136
+ padding: '12px',
137
+ borderRadius: '4px',
138
+ margin: 0,
139
+ fontSize: '14px'
140
+ }}>
141
+ <code>npm install @xyd-js/components</code>
142
+ </pre>
143
+ </div>
144
+ </Steps.Item>
145
+ <Steps.Item>
146
+ <div>
147
+ <h4 style={{ marginBottom: '8px' }}>Import Component</h4>
148
+ <p style={{ marginBottom: '8px', color: 'var(--xyd-text-color-secondary)' }}>
149
+ Import the component in your file:
150
+ </p>
151
+ <pre style={{
152
+ background: 'var(--xyd-bgcolor-secondary)',
153
+ padding: '12px',
154
+ borderRadius: '4px',
155
+ margin: 0,
156
+ fontSize: '14px'
157
+ }}>
158
+ <code>{`import { Button } from '@xyd-js/components/writer';`}</code>
159
+ </pre>
160
+ </div>
161
+ </Steps.Item>
162
+ <Steps.Item>
163
+ <div>
164
+ <h4 style={{ marginBottom: '8px' }}>Use Component</h4>
165
+ <p style={{ marginBottom: '8px', color: 'var(--xyd-text-color-secondary)' }}>
166
+ Use the component in your JSX:
167
+ </p>
168
+ <pre style={{
169
+ background: 'var(--xyd-bgcolor-secondary)',
170
+ padding: '12px',
171
+ borderRadius: '4px',
172
+ margin: 0,
173
+ fontSize: '14px'
174
+ }}>
175
+ <code>{`<Button kind="primary">Click me</Button>`}</code>
176
+ </pre>
177
+ </div>
178
+ </Steps.Item>
179
+ </Steps>
180
+ </div>
181
+ ),
182
+ };
183
+
184
+ // Real-world examples
185
+ export const RealWorldExamples: Story = {
186
+ render: () => (
187
+ <div style={{ padding: '20px', maxWidth: '800px' }}>
188
+ <div style={{ marginBottom: '40px' }}>
189
+ <h2>Onboarding Process</h2>
190
+ <p>Steps components are perfect for user onboarding and getting started guides.</p>
191
+ <div style={{
192
+ background: 'var(--xyd-bgcolor)',
193
+ border: '1px solid var(--xyd-border-color)',
194
+ borderRadius: '8px',
195
+ padding: '20px'
196
+ }}>
197
+ <h3 style={{ marginBottom: '16px' }}>Welcome to Our Platform</h3>
198
+ <Steps>
199
+ <Steps.Item>
200
+ <div>
201
+ <h4 style={{ marginBottom: '8px' }}>Create Account</h4>
202
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
203
+ Sign up with your email address and create a secure password.
204
+ </p>
205
+ </div>
206
+ </Steps.Item>
207
+ <Steps.Item>
208
+ <div>
209
+ <h4 style={{ marginBottom: '8px' }}>Verify Email</h4>
210
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
211
+ Check your email and click the verification link to activate your account.
212
+ </p>
213
+ </div>
214
+ </Steps.Item>
215
+ <Steps.Item>
216
+ <div>
217
+ <h4 style={{ marginBottom: '8px' }}>Complete Profile</h4>
218
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
219
+ Add your personal information and preferences to customize your experience.
220
+ </p>
221
+ </div>
222
+ </Steps.Item>
223
+ <Steps.Item>
224
+ <div>
225
+ <h4 style={{ marginBottom: '8px' }}>Start Exploring</h4>
226
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
227
+ You're all set! Start exploring our features and tools.
228
+ </p>
229
+ </div>
230
+ </Steps.Item>
231
+ </Steps>
232
+ </div>
233
+ </div>
234
+
235
+ <div style={{ marginBottom: '40px' }}>
236
+ <h2>API Integration Guide</h2>
237
+ <p>Steps can guide developers through technical processes and integrations.</p>
238
+ <div style={{
239
+ background: 'var(--xyd-bgcolor)',
240
+ border: '1px solid var(--xyd-border-color)',
241
+ borderRadius: '8px',
242
+ padding: '20px'
243
+ }}>
244
+ <h3 style={{ marginBottom: '16px' }}>Integrate Our API</h3>
245
+ <Steps>
246
+ <Steps.Item>
247
+ <div>
248
+ <h4 style={{ marginBottom: '8px' }}>Get API Key</h4>
249
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
250
+ Generate your API key from the dashboard under Settings &gt; API Keys.
251
+ </p>
252
+ </div>
253
+ </Steps.Item>
254
+ <Steps.Item>
255
+ <div>
256
+ <h4 style={{ marginBottom: '8px' }}>Install SDK</h4>
257
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
258
+ Install our official SDK using your preferred package manager.
259
+ </p>
260
+ </div>
261
+ </Steps.Item>
262
+ <Steps.Item>
263
+ <div>
264
+ <h4 style={{ marginBottom: '8px' }}>Initialize Client</h4>
265
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
266
+ Initialize the API client with your API key and configuration.
267
+ </p>
268
+ </div>
269
+ </Steps.Item>
270
+ <Steps.Item>
271
+ <div>
272
+ <h4 style={{ marginBottom: '8px' }}>Make First Request</h4>
273
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
274
+ Test your integration by making a simple API request.
275
+ </p>
276
+ </div>
277
+ </Steps.Item>
278
+ </Steps>
279
+ </div>
280
+ </div>
281
+
282
+ <div style={{ marginBottom: '40px' }}>
283
+ <h2>Troubleshooting Guide</h2>
284
+ <p>Steps can help users troubleshoot issues step by step.</p>
285
+ <div style={{
286
+ background: 'var(--xyd-bgcolor)',
287
+ border: '1px solid var(--xyd-border-color)',
288
+ borderRadius: '8px',
289
+ padding: '20px'
290
+ }}>
291
+ <h3 style={{ marginBottom: '16px' }}>Fix Connection Issues</h3>
292
+ <Steps>
293
+ <Steps.Item>
294
+ <div>
295
+ <h4 style={{ marginBottom: '8px' }}>Check Network</h4>
296
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
297
+ Verify your internet connection and try accessing other websites.
298
+ </p>
299
+ </div>
300
+ </Steps.Item>
301
+ <Steps.Item>
302
+ <div>
303
+ <h4 style={{ marginBottom: '8px' }}>Clear Cache</h4>
304
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
305
+ Clear your browser cache and cookies, then refresh the page.
306
+ </p>
307
+ </div>
308
+ </Steps.Item>
309
+ <Steps.Item>
310
+ <div>
311
+ <h4 style={{ marginBottom: '8px' }}>Check Firewall</h4>
312
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
313
+ Ensure your firewall isn't blocking the application.
314
+ </p>
315
+ </div>
316
+ </Steps.Item>
317
+ <Steps.Item>
318
+ <div>
319
+ <h4 style={{ marginBottom: '8px' }}>Contact Support</h4>
320
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
321
+ If the issue persists, contact our support team with details.
322
+ </p>
323
+ </div>
324
+ </Steps.Item>
325
+ </Steps>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ ),
330
+ parameters: {
331
+ docs: {
332
+ description: {
333
+ story: 'This example shows how Steps components are typically used in real applications.',
334
+ },
335
+ },
336
+ },
337
+ };
338
+
339
+ // Interactive example
340
+ export const Interactive: Story = {
341
+ render: () => (
342
+ <div style={{ padding: '20px' }}>
343
+ <div style={{
344
+ background: 'var(--xyd-bgcolor)',
345
+ border: '1px solid var(--xyd-border-color)',
346
+ borderRadius: '8px',
347
+ padding: '20px',
348
+ marginBottom: '20px'
349
+ }}>
350
+ <h3 style={{ marginBottom: '16px' }}>Steps Component Demo</h3>
351
+ <p style={{ marginBottom: '16px', color: 'var(--xyd-text-color)' }}>
352
+ This example demonstrates the Steps component with various content types and styling.
353
+ </p>
354
+ <Steps>
355
+ <Steps.Item>
356
+ <div>
357
+ <h4 style={{ marginBottom: '8px' }}>Step One</h4>
358
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
359
+ This is the first step in the process with detailed instructions.
360
+ </p>
361
+ </div>
362
+ </Steps.Item>
363
+ <Steps.Item>
364
+ <div>
365
+ <h4 style={{ marginBottom: '8px' }}>Step Two</h4>
366
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
367
+ The second step continues the process with additional guidance.
368
+ </p>
369
+ </div>
370
+ </Steps.Item>
371
+ <Steps.Item>
372
+ <div>
373
+ <h4 style={{ marginBottom: '8px' }}>Step Three</h4>
374
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
375
+ The final step completes the process and provides next steps.
376
+ </p>
377
+ </div>
378
+ </Steps.Item>
379
+ </Steps>
380
+ </div>
381
+
382
+ <div style={{
383
+ background: 'var(--xyd-bgcolor)',
384
+ border: '1px solid var(--xyd-border-color)',
385
+ borderRadius: '8px',
386
+ padding: '20px'
387
+ }}>
388
+ <h4 style={{ marginBottom: '12px' }}>Features</h4>
389
+ <ul style={{ color: 'var(--xyd-text-color)' }}>
390
+ <li>Sequential step display</li>
391
+ <li>Support for rich content</li>
392
+ <li>Consistent styling</li>
393
+ <li>Accessible markup</li>
394
+ <li>Theme-aware colors</li>
395
+ </ul>
396
+ </div>
397
+ </div>
398
+ ),
399
+ parameters: {
400
+ docs: {
401
+ description: {
402
+ story: 'This interactive example demonstrates the Steps component functionality and styling.',
403
+ },
404
+ },
405
+ },
406
+ };
407
+
408
+ // Different step counts
409
+ export const DifferentStepCounts: Story = {
410
+ render: () => (
411
+ <div style={{ padding: '20px' }}>
412
+ <div style={{ marginBottom: '30px' }}>
413
+ <h3 style={{ marginBottom: '10px', color: '#666' }}>Two Steps</h3>
414
+ <Steps>
415
+ <Steps.Item>First step</Steps.Item>
416
+ <Steps.Item>Second step</Steps.Item>
417
+ </Steps>
418
+ </div>
419
+
420
+ <div style={{ marginBottom: '30px' }}>
421
+ <h3 style={{ marginBottom: '10px', color: '#666' }}>Three Steps</h3>
422
+ <Steps>
423
+ <Steps.Item>Step one</Steps.Item>
424
+ <Steps.Item>Step two</Steps.Item>
425
+ <Steps.Item>Step three</Steps.Item>
426
+ </Steps>
427
+ </div>
428
+
429
+ <div style={{ marginBottom: '30px' }}>
430
+ <h3 style={{ marginBottom: '10px', color: '#666' }}>Four Steps</h3>
431
+ <Steps>
432
+ <Steps.Item>Initial setup</Steps.Item>
433
+ <Steps.Item>Configuration</Steps.Item>
434
+ <Steps.Item>Testing</Steps.Item>
435
+ <Steps.Item>Deployment</Steps.Item>
436
+ </Steps>
437
+ </div>
438
+
439
+ <div style={{ marginBottom: '30px' }}>
440
+ <h3 style={{ marginBottom: '10px', color: '#666' }}>Five Steps</h3>
441
+ <Steps>
442
+ <Steps.Item>Planning</Steps.Item>
443
+ <Steps.Item>Design</Steps.Item>
444
+ <Steps.Item>Development</Steps.Item>
445
+ <Steps.Item>Testing</Steps.Item>
446
+ <Steps.Item>Launch</Steps.Item>
447
+ </Steps>
448
+ </div>
449
+ </div>
450
+ ),
451
+ parameters: {
452
+ docs: {
453
+ description: {
454
+ story: 'This example shows how Steps components look with different numbers of steps.',
455
+ },
456
+ },
457
+ },
458
+ };
459
+
460
+ // Secondary kind - basic
461
+ export const Secondary: Story = {
462
+ render: () => (
463
+ <div style={{ padding: '20px' }}>
464
+ <Steps kind="secondary">
465
+ <Steps.Item>
466
+ First, you need to install the package.
467
+ </Steps.Item>
468
+ <Steps.Item>
469
+ Then you need to import the component.
470
+ </Steps.Item>
471
+ <Steps.Item>
472
+ Finally, you can use it in your application.
473
+ </Steps.Item>
474
+ </Steps>
475
+ </div>
476
+ ),
477
+ parameters: {
478
+ docs: {
479
+ description: {
480
+ story: 'Secondary Steps variant with connecting lines between steps.',
481
+ },
482
+ },
483
+ },
484
+ };
485
+
486
+ // Secondary kind - multiple steps
487
+ export const SecondaryMultipleSteps: Story = {
488
+ render: () => (
489
+ <div style={{ padding: '20px' }}>
490
+ <Steps kind="secondary">
491
+ <Steps.Item>
492
+ Download the project files from the repository.
493
+ </Steps.Item>
494
+ <Steps.Item>
495
+ Install dependencies using npm or yarn.
496
+ </Steps.Item>
497
+ <Steps.Item>
498
+ Configure your environment variables.
499
+ </Steps.Item>
500
+ <Steps.Item>
501
+ Run the development server.
502
+ </Steps.Item>
503
+ <Steps.Item>
504
+ Open your browser and navigate to localhost:3000.
505
+ </Steps.Item>
506
+ <Steps.Item>
507
+ Start building your application!
508
+ </Steps.Item>
509
+ </Steps>
510
+ </div>
511
+ ),
512
+ parameters: {
513
+ docs: {
514
+ description: {
515
+ story: 'Secondary Steps variant with multiple steps showing the connecting line effect.',
516
+ },
517
+ },
518
+ },
519
+ };
520
+
521
+ // Secondary kind - long content
522
+ export const SecondaryLongContent: Story = {
523
+ render: () => (
524
+ <div style={{ padding: '20px' }}>
525
+ <Steps kind="secondary">
526
+ <Steps.Item>
527
+ <div>
528
+ <h4 style={{ marginBottom: '8px' }}>Project Setup</h4>
529
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
530
+ Begin by creating a new project directory and initializing your development
531
+ environment. This includes setting up your package manager, version control,
532
+ and basic project structure.
533
+ </p>
534
+ </div>
535
+ </Steps.Item>
536
+ <Steps.Item>
537
+ <div>
538
+ <h4 style={{ marginBottom: '8px' }}>Install Dependencies</h4>
539
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
540
+ Install all required dependencies including React, TypeScript, and any
541
+ additional libraries your project requires. Make sure to use the correct
542
+ versions for compatibility.
543
+ </p>
544
+ </div>
545
+ </Steps.Item>
546
+ <Steps.Item>
547
+ <div>
548
+ <h4 style={{ marginBottom: '8px' }}>Configuration</h4>
549
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
550
+ Configure your build tools, linting rules, and development environment.
551
+ This includes setting up TypeScript configuration, ESLint rules, and
552
+ any other development tools.
553
+ </p>
554
+ </div>
555
+ </Steps.Item>
556
+ <Steps.Item>
557
+ <div>
558
+ <h4 style={{ marginBottom: '8px' }}>Development</h4>
559
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
560
+ Start developing your application with hot reloading enabled. Make sure
561
+ to follow best practices and write clean, maintainable code.
562
+ </p>
563
+ </div>
564
+ </Steps.Item>
565
+ </Steps>
566
+ </div>
567
+ ),
568
+ parameters: {
569
+ docs: {
570
+ description: {
571
+ story: 'Secondary Steps variant with detailed content showing how the connecting lines work with longer content.',
572
+ },
573
+ },
574
+ },
575
+ };
576
+
577
+ // Secondary kind - with code examples
578
+ export const SecondaryWithCodeExamples: Story = {
579
+ render: () => (
580
+ <div style={{ padding: '20px' }}>
581
+ <Steps kind="secondary">
582
+ <Steps.Item>
583
+ <div>
584
+ <h4 style={{ marginBottom: '8px' }}>Install Package</h4>
585
+ <p style={{ marginBottom: '8px', color: 'var(--xyd-text-color-secondary)' }}>
586
+ Install the component library using npm:
587
+ </p>
588
+ <pre style={{
589
+ background: 'var(--xyd-bgcolor-secondary)',
590
+ padding: '12px',
591
+ borderRadius: '4px',
592
+ margin: 0,
593
+ fontSize: '14px'
594
+ }}>
595
+ <code>npm install @xyd-js/components</code>
596
+ </pre>
597
+ </div>
598
+ </Steps.Item>
599
+ <Steps.Item>
600
+ <div>
601
+ <h4 style={{ marginBottom: '8px' }}>Import Component</h4>
602
+ <p style={{ marginBottom: '8px', color: 'var(--xyd-text-color-secondary)' }}>
603
+ Import the component in your file:
604
+ </p>
605
+ <pre style={{
606
+ background: 'var(--xyd-bgcolor-secondary)',
607
+ padding: '12px',
608
+ borderRadius: '4px',
609
+ margin: 0,
610
+ fontSize: '14px'
611
+ }}>
612
+ <code>{`import { Button } from '@xyd-js/components/writer';`}</code>
613
+ </pre>
614
+ </div>
615
+ </Steps.Item>
616
+ <Steps.Item>
617
+ <div>
618
+ <h4 style={{ marginBottom: '8px' }}>Use Component</h4>
619
+ <p style={{ marginBottom: '8px', color: 'var(--xyd-text-color-secondary)' }}>
620
+ Use the component in your JSX:
621
+ </p>
622
+ <pre style={{
623
+ background: 'var(--xyd-bgcolor-secondary)',
624
+ padding: '12px',
625
+ borderRadius: '4px',
626
+ margin: 0,
627
+ fontSize: '14px'
628
+ }}>
629
+ <code>{`<Button kind="primary">Click me</Button>`}</code>
630
+ </pre>
631
+ </div>
632
+ </Steps.Item>
633
+ </Steps>
634
+ </div>
635
+ ),
636
+ parameters: {
637
+ docs: {
638
+ description: {
639
+ story: 'Secondary Steps variant with code examples showing technical implementation steps.',
640
+ },
641
+ },
642
+ },
643
+ };
644
+
645
+ // Secondary kind - real-world examples
646
+ export const SecondaryRealWorldExamples: Story = {
647
+ render: () => (
648
+ <div style={{ padding: '20px', maxWidth: '800px' }}>
649
+ <div style={{ marginBottom: '40px' }}>
650
+ <h2>Development Workflow</h2>
651
+ <p>Secondary Steps are perfect for development workflows and technical processes.</p>
652
+ <div style={{
653
+ background: 'var(--xyd-bgcolor)',
654
+ border: '1px solid var(--xyd-border-color)',
655
+ borderRadius: '8px',
656
+ padding: '20px'
657
+ }}>
658
+ <h3 style={{ marginBottom: '16px' }}>Git Workflow</h3>
659
+ <Steps kind="secondary">
660
+ <Steps.Item>
661
+ <div>
662
+ <h4 style={{ marginBottom: '8px' }}>Create Feature Branch</h4>
663
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
664
+ Create a new branch for your feature: <code>git checkout -b feature/new-component</code>
665
+ </p>
666
+ </div>
667
+ </Steps.Item>
668
+ <Steps.Item>
669
+ <div>
670
+ <h4 style={{ marginBottom: '8px' }}>Make Changes</h4>
671
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
672
+ Implement your changes and test thoroughly before committing.
673
+ </p>
674
+ </div>
675
+ </Steps.Item>
676
+ <Steps.Item>
677
+ <div>
678
+ <h4 style={{ marginBottom: '8px' }}>Commit Changes</h4>
679
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
680
+ Stage and commit your changes with a descriptive message.
681
+ </p>
682
+ </div>
683
+ </Steps.Item>
684
+ <Steps.Item>
685
+ <div>
686
+ <h4 style={{ marginBottom: '8px' }}>Push and Create PR</h4>
687
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
688
+ Push your branch and create a pull request for review.
689
+ </p>
690
+ </div>
691
+ </Steps.Item>
692
+ </Steps>
693
+ </div>
694
+ </div>
695
+
696
+ <div style={{ marginBottom: '40px' }}>
697
+ <h2>Deployment Process</h2>
698
+ <p>Secondary Steps can guide through deployment and release processes.</p>
699
+ <div style={{
700
+ background: 'var(--xyd-bgcolor)',
701
+ border: '1px solid var(--xyd-border-color)',
702
+ borderRadius: '8px',
703
+ padding: '20px'
704
+ }}>
705
+ <h3 style={{ marginBottom: '16px' }}>Production Deployment</h3>
706
+ <Steps kind="secondary">
707
+ <Steps.Item>
708
+ <div>
709
+ <h4 style={{ marginBottom: '8px' }}>Build Application</h4>
710
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
711
+ Run the build command to create optimized production files.
712
+ </p>
713
+ </div>
714
+ </Steps.Item>
715
+ <Steps.Item>
716
+ <div>
717
+ <h4 style={{ marginBottom: '8px' }}>Run Tests</h4>
718
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
719
+ Execute all tests to ensure code quality and functionality.
720
+ </p>
721
+ </div>
722
+ </Steps.Item>
723
+ <Steps.Item>
724
+ <div>
725
+ <h4 style={{ marginBottom: '8px' }}>Deploy to Staging</h4>
726
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
727
+ Deploy to staging environment for final testing and validation.
728
+ </p>
729
+ </div>
730
+ </Steps.Item>
731
+ <Steps.Item>
732
+ <div>
733
+ <h4 style={{ marginBottom: '8px' }}>Deploy to Production</h4>
734
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
735
+ Deploy to production environment and monitor for issues.
736
+ </p>
737
+ </div>
738
+ </Steps.Item>
739
+ </Steps>
740
+ </div>
741
+ </div>
742
+
743
+ <div style={{ marginBottom: '40px' }}>
744
+ <h2>User Onboarding</h2>
745
+ <p>Secondary Steps work well for user onboarding with connecting visual flow.</p>
746
+ <div style={{
747
+ background: 'var(--xyd-bgcolor)',
748
+ border: '1px solid var(--xyd-border-color)',
749
+ borderRadius: '8px',
750
+ padding: '20px'
751
+ }}>
752
+ <h3 style={{ marginBottom: '16px' }}>Account Setup</h3>
753
+ <Steps kind="secondary">
754
+ <Steps.Item>
755
+ <div>
756
+ <h4 style={{ marginBottom: '8px' }}>Sign Up</h4>
757
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
758
+ Create your account with email and password.
759
+ </p>
760
+ </div>
761
+ </Steps.Item>
762
+ <Steps.Item>
763
+ <div>
764
+ <h4 style={{ marginBottom: '8px' }}>Verify Email</h4>
765
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
766
+ Check your email and click the verification link.
767
+ </p>
768
+ </div>
769
+ </Steps.Item>
770
+ <Steps.Item>
771
+ <div>
772
+ <h4 style={{ marginBottom: '8px' }}>Complete Profile</h4>
773
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
774
+ Add your personal information and preferences.
775
+ </p>
776
+ </div>
777
+ </Steps.Item>
778
+ <Steps.Item>
779
+ <div>
780
+ <h4 style={{ marginBottom: '8px' }}>Start Using</h4>
781
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
782
+ You're all set! Start exploring our features.
783
+ </p>
784
+ </div>
785
+ </Steps.Item>
786
+ </Steps>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ ),
791
+ parameters: {
792
+ docs: {
793
+ description: {
794
+ story: 'This example shows how Secondary Steps components are typically used in real applications with connecting lines.',
795
+ },
796
+ },
797
+ },
798
+ };
799
+
800
+ // Secondary kind - interactive example
801
+ export const SecondaryInteractive: Story = {
802
+ render: () => (
803
+ <div style={{ padding: '20px' }}>
804
+ <div style={{
805
+ background: 'var(--xyd-bgcolor)',
806
+ border: '1px solid var(--xyd-border-color)',
807
+ borderRadius: '8px',
808
+ padding: '20px',
809
+ marginBottom: '20px'
810
+ }}>
811
+ <h3 style={{ marginBottom: '16px' }}>Secondary Steps Component Demo</h3>
812
+ <p style={{ marginBottom: '16px', color: 'var(--xyd-text-color)' }}>
813
+ This example demonstrates the Secondary Steps component with connecting lines between steps.
814
+ </p>
815
+ <Steps kind="secondary">
816
+ <Steps.Item>
817
+ <div>
818
+ <h4 style={{ marginBottom: '8px' }}>Step One</h4>
819
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
820
+ This is the first step in the process with detailed instructions.
821
+ </p>
822
+ </div>
823
+ </Steps.Item>
824
+ <Steps.Item>
825
+ <div>
826
+ <h4 style={{ marginBottom: '8px' }}>Step Two</h4>
827
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
828
+ The second step continues the process with additional guidance.
829
+ </p>
830
+ </div>
831
+ </Steps.Item>
832
+ <Steps.Item>
833
+ <div>
834
+ <h4 style={{ marginBottom: '8px' }}>Step Three</h4>
835
+ <p style={{ margin: 0, color: 'var(--xyd-text-color-secondary)' }}>
836
+ The final step completes the process and provides next steps.
837
+ </p>
838
+ </div>
839
+ </Steps.Item>
840
+ </Steps>
841
+ </div>
842
+
843
+ <div style={{
844
+ background: 'var(--xyd-bgcolor)',
845
+ border: '1px solid var(--xyd-border-color)',
846
+ borderRadius: '8px',
847
+ padding: '20px'
848
+ }}>
849
+ <h4 style={{ marginBottom: '12px' }}>Secondary Features</h4>
850
+ <ul style={{ color: 'var(--xyd-text-color)' }}>
851
+ <li>Connecting lines between steps</li>
852
+ <li>Enhanced visual flow</li>
853
+ <li>Support for rich content</li>
854
+ <li>Consistent styling</li>
855
+ <li>Theme-aware colors</li>
856
+ </ul>
857
+ </div>
858
+ </div>
859
+ ),
860
+ parameters: {
861
+ docs: {
862
+ description: {
863
+ story: 'This interactive example demonstrates the Secondary Steps component functionality with connecting lines.',
864
+ },
865
+ },
866
+ },
867
+ };
868
+
869
+ // Comparison between primary and secondary
870
+ export const PrimaryVsSecondary: Story = {
871
+ render: () => (
872
+ <div style={{ padding: '20px' }}>
873
+ <div style={{ marginBottom: '40px' }}>
874
+ <h3 style={{ marginBottom: '16px', color: '#666' }}>Primary Steps (Default)</h3>
875
+ <Steps>
876
+ <Steps.Item>First step</Steps.Item>
877
+ <Steps.Item>Second step</Steps.Item>
878
+ <Steps.Item>Third step</Steps.Item>
879
+ </Steps>
880
+ </div>
881
+
882
+ <div style={{ marginBottom: '40px' }}>
883
+ <h3 style={{ marginBottom: '16px', color: '#666' }}>Secondary Steps (With Connecting Lines)</h3>
884
+ <Steps kind="secondary">
885
+ <Steps.Item>First step</Steps.Item>
886
+ <Steps.Item>Second step</Steps.Item>
887
+ <Steps.Item>Third step</Steps.Item>
888
+ </Steps>
889
+ </div>
890
+
891
+ <div style={{
892
+ background: 'var(--xyd-bgcolor)',
893
+ border: '1px solid var(--xyd-border-color)',
894
+ borderRadius: '8px',
895
+ padding: '20px'
896
+ }}>
897
+ <h4 style={{ marginBottom: '12px' }}>Key Differences</h4>
898
+ <ul style={{ color: 'var(--xyd-text-color)' }}>
899
+ <li><strong>Primary:</strong> Simple numbered steps without connecting lines</li>
900
+ <li><strong>Secondary:</strong> Steps with connecting lines showing visual flow</li>
901
+ <li><strong>Use Primary:</strong> For simple step lists and basic instructions</li>
902
+ <li><strong>Use Secondary:</strong> For workflows, processes, and guided tours</li>
903
+ </ul>
904
+ </div>
905
+ </div>
906
+ ),
907
+ parameters: {
908
+ docs: {
909
+ description: {
910
+ story: 'This example compares the primary and secondary variants of the Steps component.',
911
+ },
912
+ },
913
+ },
914
+ };