palette-mcp 1.0.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.
- package/LICENSE +21 -0
- package/README.md +169 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +244 -0
- package/dist/services/code-generator.d.ts +121 -0
- package/dist/services/code-generator.js +1073 -0
- package/dist/services/design-system.d.ts +53 -0
- package/dist/services/design-system.js +2093 -0
- package/dist/services/figma.d.ts +126 -0
- package/dist/services/figma.js +295 -0
- package/dist/utils/figma-mcp-client.d.ts +40 -0
- package/dist/utils/figma-mcp-client.js +171 -0
- package/dist/utils/request-manager.d.ts +36 -0
- package/dist/utils/request-manager.js +62 -0
- package/package.json +93 -0
- package/smithery.yaml +61 -0
|
@@ -0,0 +1,2093 @@
|
|
|
1
|
+
export class DesignSystemService {
|
|
2
|
+
reactComponents = [];
|
|
3
|
+
vueComponents = [];
|
|
4
|
+
constructor() {
|
|
5
|
+
this.initializeComponents();
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* 디자인 시스템(React, Vue) 컴포넌트 메타데이터 제공 필요.
|
|
9
|
+
* 1. 메타데이터 구조 정의
|
|
10
|
+
* 2. 패키지에 manifest 추가.
|
|
11
|
+
* 3. 디자인 시스템 패키지에서 export 된 컴포넌트 목록을 초기화.
|
|
12
|
+
*/
|
|
13
|
+
initializeComponents() {
|
|
14
|
+
this.reactComponents = [
|
|
15
|
+
{
|
|
16
|
+
name: 'Accordion',
|
|
17
|
+
description: 'Accordion component for collapsible content sections',
|
|
18
|
+
category: 'Layout',
|
|
19
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-accordion',
|
|
20
|
+
props: [
|
|
21
|
+
{
|
|
22
|
+
name: 'title',
|
|
23
|
+
type: 'string',
|
|
24
|
+
required: true,
|
|
25
|
+
description: 'Accordion title',
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
name: 'defaultExpanded',
|
|
29
|
+
type: 'boolean',
|
|
30
|
+
required: false,
|
|
31
|
+
defaultValue: 'false',
|
|
32
|
+
description: 'Whether the accordion is expanded by default',
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
name: 'disabled',
|
|
36
|
+
type: 'boolean',
|
|
37
|
+
required: false,
|
|
38
|
+
defaultValue: 'false',
|
|
39
|
+
description: 'Whether the accordion is disabled',
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
examples: [
|
|
43
|
+
{
|
|
44
|
+
name: 'Basic Accordion',
|
|
45
|
+
code: '<Accordion title="Section Title">Content here</Accordion>',
|
|
46
|
+
description: 'Basic accordion usage',
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
name: 'ArrowPagination',
|
|
52
|
+
description: 'Arrow-based pagination component',
|
|
53
|
+
category: 'Navigation',
|
|
54
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-arrow-pagination',
|
|
55
|
+
props: [
|
|
56
|
+
{
|
|
57
|
+
name: 'currentPage',
|
|
58
|
+
type: 'number',
|
|
59
|
+
required: true,
|
|
60
|
+
description: 'Current page number',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: 'totalPages',
|
|
64
|
+
type: 'number',
|
|
65
|
+
required: true,
|
|
66
|
+
description: 'Total number of pages',
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
name: 'onPageChange',
|
|
70
|
+
type: '(page: number) => void',
|
|
71
|
+
required: true,
|
|
72
|
+
description: 'Page change handler',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
name: 'disabled',
|
|
76
|
+
type: 'boolean',
|
|
77
|
+
required: false,
|
|
78
|
+
defaultValue: 'false',
|
|
79
|
+
description: 'Whether pagination is disabled',
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
examples: [
|
|
83
|
+
{
|
|
84
|
+
name: 'Basic Arrow Pagination',
|
|
85
|
+
code: '<ArrowPagination currentPage={1} totalPages={10} onPageChange={handlePageChange} />',
|
|
86
|
+
description: 'Basic arrow pagination',
|
|
87
|
+
},
|
|
88
|
+
],
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
name: 'Badge',
|
|
92
|
+
description: 'Badge component for status indicators',
|
|
93
|
+
category: 'Data Display',
|
|
94
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-badge',
|
|
95
|
+
props: [
|
|
96
|
+
{
|
|
97
|
+
name: 'variant',
|
|
98
|
+
type: "'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'",
|
|
99
|
+
required: false,
|
|
100
|
+
defaultValue: "'primary'",
|
|
101
|
+
description: 'Badge variant style',
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
name: 'size',
|
|
105
|
+
type: "'small' | 'medium' | 'large'",
|
|
106
|
+
required: false,
|
|
107
|
+
defaultValue: "'medium'",
|
|
108
|
+
description: 'Badge size',
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
examples: [
|
|
112
|
+
{
|
|
113
|
+
name: 'Basic Badge',
|
|
114
|
+
code: '<Badge>New</Badge>',
|
|
115
|
+
description: 'Basic badge usage',
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
name: 'Success Badge',
|
|
119
|
+
code: '<Badge variant="success">Completed</Badge>',
|
|
120
|
+
description: 'Success variant badge',
|
|
121
|
+
},
|
|
122
|
+
],
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
name: 'Button',
|
|
126
|
+
description: 'Primary button component with multiple variants',
|
|
127
|
+
category: 'Actions',
|
|
128
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-button',
|
|
129
|
+
props: [
|
|
130
|
+
{
|
|
131
|
+
name: 'variant',
|
|
132
|
+
type: "'primary' | 'secondary' | 'tertiary' | 'danger'",
|
|
133
|
+
required: false,
|
|
134
|
+
defaultValue: "'primary'",
|
|
135
|
+
description: 'Button variant style',
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
name: 'size',
|
|
139
|
+
type: "'small' | 'medium' | 'large'",
|
|
140
|
+
required: false,
|
|
141
|
+
defaultValue: "'medium'",
|
|
142
|
+
description: 'Button size',
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
name: 'disabled',
|
|
146
|
+
type: 'boolean',
|
|
147
|
+
required: false,
|
|
148
|
+
defaultValue: 'false',
|
|
149
|
+
description: 'Whether the button is disabled',
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
name: 'loading',
|
|
153
|
+
type: 'boolean',
|
|
154
|
+
required: false,
|
|
155
|
+
defaultValue: 'false',
|
|
156
|
+
description: 'Whether the button is in loading state',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
name: 'onClick',
|
|
160
|
+
type: '() => void',
|
|
161
|
+
required: false,
|
|
162
|
+
description: 'Click handler function',
|
|
163
|
+
},
|
|
164
|
+
],
|
|
165
|
+
examples: [
|
|
166
|
+
{
|
|
167
|
+
name: 'Basic Button',
|
|
168
|
+
code: '<Button>Click me</Button>',
|
|
169
|
+
description: 'Basic button usage',
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
name: 'Primary Button',
|
|
173
|
+
code: '<Button variant="primary">Primary</Button>',
|
|
174
|
+
description: 'Primary variant button',
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
name: 'Loading Button',
|
|
178
|
+
code: '<Button loading>Loading...</Button>',
|
|
179
|
+
description: 'Button in loading state',
|
|
180
|
+
},
|
|
181
|
+
],
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
name: 'Check',
|
|
185
|
+
description: 'Checkbox component for form inputs',
|
|
186
|
+
category: 'Forms',
|
|
187
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-check',
|
|
188
|
+
props: [
|
|
189
|
+
{
|
|
190
|
+
name: 'checked',
|
|
191
|
+
type: 'boolean',
|
|
192
|
+
required: false,
|
|
193
|
+
defaultValue: 'false',
|
|
194
|
+
description: 'Whether the checkbox is checked',
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
name: 'disabled',
|
|
198
|
+
type: 'boolean',
|
|
199
|
+
required: false,
|
|
200
|
+
defaultValue: 'false',
|
|
201
|
+
description: 'Whether the checkbox is disabled',
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
name: 'label',
|
|
205
|
+
type: 'string',
|
|
206
|
+
required: false,
|
|
207
|
+
description: 'Checkbox label text',
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
name: 'onChange',
|
|
211
|
+
type: '(checked: boolean) => void',
|
|
212
|
+
required: false,
|
|
213
|
+
description: 'Change handler function',
|
|
214
|
+
},
|
|
215
|
+
],
|
|
216
|
+
examples: [
|
|
217
|
+
{
|
|
218
|
+
name: 'Basic Checkbox',
|
|
219
|
+
code: '<Check label="Accept terms" />',
|
|
220
|
+
description: 'Basic checkbox usage',
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
name: 'Checked Checkbox',
|
|
224
|
+
code: '<Check checked label="Selected" />',
|
|
225
|
+
description: 'Pre-checked checkbox',
|
|
226
|
+
},
|
|
227
|
+
],
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
name: 'Chip',
|
|
231
|
+
description: 'Chip component for tags and labels',
|
|
232
|
+
category: 'Data Display',
|
|
233
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-chip',
|
|
234
|
+
props: [
|
|
235
|
+
{
|
|
236
|
+
name: 'variant',
|
|
237
|
+
type: "'default' | 'outlined' | 'filled'",
|
|
238
|
+
required: false,
|
|
239
|
+
defaultValue: "'default'",
|
|
240
|
+
description: 'Chip variant style',
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
name: 'size',
|
|
244
|
+
type: "'small' | 'medium' | 'large'",
|
|
245
|
+
required: false,
|
|
246
|
+
defaultValue: "'medium'",
|
|
247
|
+
description: 'Chip size',
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
name: 'onDelete',
|
|
251
|
+
type: '() => void',
|
|
252
|
+
required: false,
|
|
253
|
+
description: 'Delete handler function',
|
|
254
|
+
},
|
|
255
|
+
],
|
|
256
|
+
examples: [
|
|
257
|
+
{
|
|
258
|
+
name: 'Basic Chip',
|
|
259
|
+
code: '<Chip>Tag</Chip>',
|
|
260
|
+
description: 'Basic chip usage',
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
name: 'Deletable Chip',
|
|
264
|
+
code: '<Chip onDelete={handleDelete}>Deletable</Chip>',
|
|
265
|
+
description: 'Chip with delete action',
|
|
266
|
+
},
|
|
267
|
+
],
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
name: 'Dropdown',
|
|
271
|
+
description: 'Dropdown select component',
|
|
272
|
+
category: 'Forms',
|
|
273
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-dropdown',
|
|
274
|
+
props: [
|
|
275
|
+
{
|
|
276
|
+
name: 'options',
|
|
277
|
+
type: 'Array<{ value: string; label: string }>',
|
|
278
|
+
required: true,
|
|
279
|
+
description: 'Dropdown options',
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
name: 'value',
|
|
283
|
+
type: 'string',
|
|
284
|
+
required: false,
|
|
285
|
+
description: 'Selected value',
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
name: 'placeholder',
|
|
289
|
+
type: 'string',
|
|
290
|
+
required: false,
|
|
291
|
+
description: 'Placeholder text',
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
name: 'disabled',
|
|
295
|
+
type: 'boolean',
|
|
296
|
+
required: false,
|
|
297
|
+
defaultValue: 'false',
|
|
298
|
+
description: 'Whether the dropdown is disabled',
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
name: 'onChange',
|
|
302
|
+
type: '(value: string) => void',
|
|
303
|
+
required: false,
|
|
304
|
+
description: 'Change handler function',
|
|
305
|
+
},
|
|
306
|
+
],
|
|
307
|
+
examples: [
|
|
308
|
+
{
|
|
309
|
+
name: 'Basic Dropdown',
|
|
310
|
+
code: '<Dropdown options={options} placeholder="Select..." />',
|
|
311
|
+
description: 'Basic dropdown usage',
|
|
312
|
+
},
|
|
313
|
+
],
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
name: 'Error',
|
|
317
|
+
description: 'Error message display component',
|
|
318
|
+
category: 'Feedback',
|
|
319
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-error',
|
|
320
|
+
props: [
|
|
321
|
+
{
|
|
322
|
+
name: 'message',
|
|
323
|
+
type: 'string',
|
|
324
|
+
required: true,
|
|
325
|
+
description: 'Error message to display',
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
name: 'dismissible',
|
|
329
|
+
type: 'boolean',
|
|
330
|
+
required: false,
|
|
331
|
+
defaultValue: 'false',
|
|
332
|
+
description: 'Whether the error can be dismissed',
|
|
333
|
+
},
|
|
334
|
+
],
|
|
335
|
+
examples: [
|
|
336
|
+
{
|
|
337
|
+
name: 'Basic Error',
|
|
338
|
+
code: '<Error message="Something went wrong" />',
|
|
339
|
+
description: 'Basic error display',
|
|
340
|
+
},
|
|
341
|
+
],
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
name: 'HelperText',
|
|
345
|
+
description: 'Helper text component for form fields',
|
|
346
|
+
category: 'Forms',
|
|
347
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-helper-text',
|
|
348
|
+
props: [
|
|
349
|
+
{
|
|
350
|
+
name: 'text',
|
|
351
|
+
type: 'string',
|
|
352
|
+
required: true,
|
|
353
|
+
description: 'Helper text content',
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
name: 'variant',
|
|
357
|
+
type: "'default' | 'error' | 'success'",
|
|
358
|
+
required: false,
|
|
359
|
+
defaultValue: "'default'",
|
|
360
|
+
description: 'Helper text variant',
|
|
361
|
+
},
|
|
362
|
+
],
|
|
363
|
+
examples: [
|
|
364
|
+
{
|
|
365
|
+
name: 'Basic Helper Text',
|
|
366
|
+
code: '<HelperText text="Enter your email address" />',
|
|
367
|
+
description: 'Basic helper text',
|
|
368
|
+
},
|
|
369
|
+
],
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
name: 'Icon',
|
|
373
|
+
description: 'Icon component for displaying icons',
|
|
374
|
+
category: 'Media',
|
|
375
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-icon',
|
|
376
|
+
props: [
|
|
377
|
+
{
|
|
378
|
+
name: 'name',
|
|
379
|
+
type: 'string',
|
|
380
|
+
required: true,
|
|
381
|
+
description: 'Icon name',
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
name: 'size',
|
|
385
|
+
type: "'small' | 'medium' | 'large'",
|
|
386
|
+
required: false,
|
|
387
|
+
defaultValue: "'medium'",
|
|
388
|
+
description: 'Icon size',
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
name: 'color',
|
|
392
|
+
type: 'string',
|
|
393
|
+
required: false,
|
|
394
|
+
description: 'Icon color',
|
|
395
|
+
},
|
|
396
|
+
],
|
|
397
|
+
examples: [
|
|
398
|
+
{
|
|
399
|
+
name: 'Basic Icon',
|
|
400
|
+
code: '<Icon name="home" />',
|
|
401
|
+
description: 'Basic icon usage',
|
|
402
|
+
},
|
|
403
|
+
],
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
name: 'Input',
|
|
407
|
+
description: 'Text input component with validation support',
|
|
408
|
+
category: 'Forms',
|
|
409
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-input',
|
|
410
|
+
props: [
|
|
411
|
+
{
|
|
412
|
+
name: 'type',
|
|
413
|
+
type: "'text' | 'email' | 'password' | 'number'",
|
|
414
|
+
required: false,
|
|
415
|
+
defaultValue: "'text'",
|
|
416
|
+
description: 'Input type',
|
|
417
|
+
},
|
|
418
|
+
{
|
|
419
|
+
name: 'placeholder',
|
|
420
|
+
type: 'string',
|
|
421
|
+
required: false,
|
|
422
|
+
description: 'Placeholder text',
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
name: 'value',
|
|
426
|
+
type: 'string',
|
|
427
|
+
required: false,
|
|
428
|
+
description: 'Input value',
|
|
429
|
+
},
|
|
430
|
+
{
|
|
431
|
+
name: 'disabled',
|
|
432
|
+
type: 'boolean',
|
|
433
|
+
required: false,
|
|
434
|
+
defaultValue: 'false',
|
|
435
|
+
description: 'Whether the input is disabled',
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
name: 'error',
|
|
439
|
+
type: 'string',
|
|
440
|
+
required: false,
|
|
441
|
+
description: 'Error message to display',
|
|
442
|
+
},
|
|
443
|
+
{
|
|
444
|
+
name: 'onChange',
|
|
445
|
+
type: '(value: string) => void',
|
|
446
|
+
required: false,
|
|
447
|
+
description: 'Change handler function',
|
|
448
|
+
},
|
|
449
|
+
],
|
|
450
|
+
examples: [
|
|
451
|
+
{
|
|
452
|
+
name: 'Basic Input',
|
|
453
|
+
code: '<Input placeholder="Enter text" />',
|
|
454
|
+
description: 'Basic input field',
|
|
455
|
+
},
|
|
456
|
+
{
|
|
457
|
+
name: 'Input with Error',
|
|
458
|
+
code: '<Input error="This field is required" />',
|
|
459
|
+
description: 'Input with error state',
|
|
460
|
+
},
|
|
461
|
+
],
|
|
462
|
+
},
|
|
463
|
+
{
|
|
464
|
+
name: 'LabeledText',
|
|
465
|
+
description: 'Text component with label',
|
|
466
|
+
category: 'Data Display',
|
|
467
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-labeled-text',
|
|
468
|
+
props: [
|
|
469
|
+
{
|
|
470
|
+
name: 'label',
|
|
471
|
+
type: 'string',
|
|
472
|
+
required: true,
|
|
473
|
+
description: 'Label text',
|
|
474
|
+
},
|
|
475
|
+
{
|
|
476
|
+
name: 'value',
|
|
477
|
+
type: 'string',
|
|
478
|
+
required: true,
|
|
479
|
+
description: 'Text value',
|
|
480
|
+
},
|
|
481
|
+
],
|
|
482
|
+
examples: [
|
|
483
|
+
{
|
|
484
|
+
name: 'Basic Labeled Text',
|
|
485
|
+
code: '<LabeledText label="Name" value="John Doe" />',
|
|
486
|
+
description: 'Basic labeled text',
|
|
487
|
+
},
|
|
488
|
+
],
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
name: 'LayerAlert',
|
|
492
|
+
description: 'Alert layer component for notifications',
|
|
493
|
+
category: 'Overlays',
|
|
494
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-layer-alert',
|
|
495
|
+
props: [
|
|
496
|
+
{
|
|
497
|
+
name: 'isOpen',
|
|
498
|
+
type: 'boolean',
|
|
499
|
+
required: true,
|
|
500
|
+
description: 'Whether the alert is open',
|
|
501
|
+
},
|
|
502
|
+
{
|
|
503
|
+
name: 'onClose',
|
|
504
|
+
type: '() => void',
|
|
505
|
+
required: true,
|
|
506
|
+
description: 'Close handler function',
|
|
507
|
+
},
|
|
508
|
+
{
|
|
509
|
+
name: 'title',
|
|
510
|
+
type: 'string',
|
|
511
|
+
required: true,
|
|
512
|
+
description: 'Alert title',
|
|
513
|
+
},
|
|
514
|
+
{
|
|
515
|
+
name: 'message',
|
|
516
|
+
type: 'string',
|
|
517
|
+
required: true,
|
|
518
|
+
description: 'Alert message',
|
|
519
|
+
},
|
|
520
|
+
{
|
|
521
|
+
name: 'variant',
|
|
522
|
+
type: "'info' | 'warning' | 'error' | 'success'",
|
|
523
|
+
required: false,
|
|
524
|
+
defaultValue: "'info'",
|
|
525
|
+
description: 'Alert variant',
|
|
526
|
+
},
|
|
527
|
+
],
|
|
528
|
+
examples: [
|
|
529
|
+
{
|
|
530
|
+
name: 'Basic Alert',
|
|
531
|
+
code: '<LayerAlert isOpen={isOpen} onClose={handleClose} title="Alert" message="Message" />',
|
|
532
|
+
description: 'Basic alert layer',
|
|
533
|
+
},
|
|
534
|
+
],
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
name: 'LayerPopup',
|
|
538
|
+
description: 'Popup layer component for modals',
|
|
539
|
+
category: 'Overlays',
|
|
540
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-layer-popup',
|
|
541
|
+
props: [
|
|
542
|
+
{
|
|
543
|
+
name: 'isOpen',
|
|
544
|
+
type: 'boolean',
|
|
545
|
+
required: true,
|
|
546
|
+
description: 'Whether the popup is open',
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
name: 'onClose',
|
|
550
|
+
type: '() => void',
|
|
551
|
+
required: true,
|
|
552
|
+
description: 'Close handler function',
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
name: 'title',
|
|
556
|
+
type: 'string',
|
|
557
|
+
required: false,
|
|
558
|
+
description: 'Popup title',
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
name: 'size',
|
|
562
|
+
type: "'small' | 'medium' | 'large' | 'fullscreen'",
|
|
563
|
+
required: false,
|
|
564
|
+
defaultValue: "'medium'",
|
|
565
|
+
description: 'Popup size',
|
|
566
|
+
},
|
|
567
|
+
],
|
|
568
|
+
examples: [
|
|
569
|
+
{
|
|
570
|
+
name: 'Basic Popup',
|
|
571
|
+
code: '<LayerPopup isOpen={isOpen} onClose={handleClose} title="Popup">Content</LayerPopup>',
|
|
572
|
+
description: 'Basic popup layer',
|
|
573
|
+
},
|
|
574
|
+
],
|
|
575
|
+
},
|
|
576
|
+
{
|
|
577
|
+
name: 'LoadingSpinner',
|
|
578
|
+
description: 'Loading spinner component',
|
|
579
|
+
category: 'Feedback',
|
|
580
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-loading-spinner',
|
|
581
|
+
props: [
|
|
582
|
+
{
|
|
583
|
+
name: 'size',
|
|
584
|
+
type: "'small' | 'medium' | 'large'",
|
|
585
|
+
required: false,
|
|
586
|
+
defaultValue: "'medium'",
|
|
587
|
+
description: 'Spinner size',
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
name: 'color',
|
|
591
|
+
type: 'string',
|
|
592
|
+
required: false,
|
|
593
|
+
description: 'Spinner color',
|
|
594
|
+
},
|
|
595
|
+
],
|
|
596
|
+
examples: [
|
|
597
|
+
{
|
|
598
|
+
name: 'Basic Spinner',
|
|
599
|
+
code: '<LoadingSpinner />',
|
|
600
|
+
description: 'Basic loading spinner',
|
|
601
|
+
},
|
|
602
|
+
],
|
|
603
|
+
},
|
|
604
|
+
{
|
|
605
|
+
name: 'Notice',
|
|
606
|
+
description: 'Notice component for announcements',
|
|
607
|
+
category: 'Feedback',
|
|
608
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-notice',
|
|
609
|
+
props: [
|
|
610
|
+
{
|
|
611
|
+
name: 'message',
|
|
612
|
+
type: 'string',
|
|
613
|
+
required: true,
|
|
614
|
+
description: 'Notice message',
|
|
615
|
+
},
|
|
616
|
+
{
|
|
617
|
+
name: 'variant',
|
|
618
|
+
type: "'info' | 'warning' | 'error' | 'success'",
|
|
619
|
+
required: false,
|
|
620
|
+
defaultValue: "'info'",
|
|
621
|
+
description: 'Notice variant',
|
|
622
|
+
},
|
|
623
|
+
{
|
|
624
|
+
name: 'dismissible',
|
|
625
|
+
type: 'boolean',
|
|
626
|
+
required: false,
|
|
627
|
+
defaultValue: 'false',
|
|
628
|
+
description: 'Whether the notice can be dismissed',
|
|
629
|
+
},
|
|
630
|
+
],
|
|
631
|
+
examples: [
|
|
632
|
+
{
|
|
633
|
+
name: 'Basic Notice',
|
|
634
|
+
code: '<Notice message="Important announcement" />',
|
|
635
|
+
description: 'Basic notice',
|
|
636
|
+
},
|
|
637
|
+
],
|
|
638
|
+
},
|
|
639
|
+
{
|
|
640
|
+
name: 'Pagination',
|
|
641
|
+
description: 'Pagination component for page navigation',
|
|
642
|
+
category: 'Navigation',
|
|
643
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-pagination',
|
|
644
|
+
props: [
|
|
645
|
+
{
|
|
646
|
+
name: 'currentPage',
|
|
647
|
+
type: 'number',
|
|
648
|
+
required: true,
|
|
649
|
+
description: 'Current page number',
|
|
650
|
+
},
|
|
651
|
+
{
|
|
652
|
+
name: 'totalPages',
|
|
653
|
+
type: 'number',
|
|
654
|
+
required: true,
|
|
655
|
+
description: 'Total number of pages',
|
|
656
|
+
},
|
|
657
|
+
{
|
|
658
|
+
name: 'onPageChange',
|
|
659
|
+
type: '(page: number) => void',
|
|
660
|
+
required: true,
|
|
661
|
+
description: 'Page change handler',
|
|
662
|
+
},
|
|
663
|
+
],
|
|
664
|
+
examples: [
|
|
665
|
+
{
|
|
666
|
+
name: 'Basic Pagination',
|
|
667
|
+
code: '<Pagination currentPage={1} totalPages={10} onPageChange={handlePageChange} />',
|
|
668
|
+
description: 'Basic pagination',
|
|
669
|
+
},
|
|
670
|
+
],
|
|
671
|
+
},
|
|
672
|
+
{
|
|
673
|
+
name: 'Radio',
|
|
674
|
+
description: 'Radio button component',
|
|
675
|
+
category: 'Forms',
|
|
676
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-radio',
|
|
677
|
+
props: [
|
|
678
|
+
{
|
|
679
|
+
name: 'value',
|
|
680
|
+
type: 'string',
|
|
681
|
+
required: true,
|
|
682
|
+
description: 'Radio value',
|
|
683
|
+
},
|
|
684
|
+
{
|
|
685
|
+
name: 'checked',
|
|
686
|
+
type: 'boolean',
|
|
687
|
+
required: false,
|
|
688
|
+
defaultValue: 'false',
|
|
689
|
+
description: 'Whether the radio is checked',
|
|
690
|
+
},
|
|
691
|
+
{
|
|
692
|
+
name: 'disabled',
|
|
693
|
+
type: 'boolean',
|
|
694
|
+
required: false,
|
|
695
|
+
defaultValue: 'false',
|
|
696
|
+
description: 'Whether the radio is disabled',
|
|
697
|
+
},
|
|
698
|
+
{
|
|
699
|
+
name: 'label',
|
|
700
|
+
type: 'string',
|
|
701
|
+
required: false,
|
|
702
|
+
description: 'Radio label text',
|
|
703
|
+
},
|
|
704
|
+
{
|
|
705
|
+
name: 'onChange',
|
|
706
|
+
type: '(value: string) => void',
|
|
707
|
+
required: false,
|
|
708
|
+
description: 'Change handler function',
|
|
709
|
+
},
|
|
710
|
+
],
|
|
711
|
+
examples: [
|
|
712
|
+
{
|
|
713
|
+
name: 'Basic Radio',
|
|
714
|
+
code: '<Radio value="option1" label="Option 1" />',
|
|
715
|
+
description: 'Basic radio button',
|
|
716
|
+
},
|
|
717
|
+
],
|
|
718
|
+
},
|
|
719
|
+
{
|
|
720
|
+
name: 'Switch',
|
|
721
|
+
description: 'Switch toggle component',
|
|
722
|
+
category: 'Forms',
|
|
723
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-switch',
|
|
724
|
+
props: [
|
|
725
|
+
{
|
|
726
|
+
name: 'checked',
|
|
727
|
+
type: 'boolean',
|
|
728
|
+
required: false,
|
|
729
|
+
defaultValue: 'false',
|
|
730
|
+
description: 'Whether the switch is checked',
|
|
731
|
+
},
|
|
732
|
+
{
|
|
733
|
+
name: 'disabled',
|
|
734
|
+
type: 'boolean',
|
|
735
|
+
required: false,
|
|
736
|
+
defaultValue: 'false',
|
|
737
|
+
description: 'Whether the switch is disabled',
|
|
738
|
+
},
|
|
739
|
+
{
|
|
740
|
+
name: 'label',
|
|
741
|
+
type: 'string',
|
|
742
|
+
required: false,
|
|
743
|
+
description: 'Switch label text',
|
|
744
|
+
},
|
|
745
|
+
{
|
|
746
|
+
name: 'onChange',
|
|
747
|
+
type: '(checked: boolean) => void',
|
|
748
|
+
required: false,
|
|
749
|
+
description: 'Change handler function',
|
|
750
|
+
},
|
|
751
|
+
],
|
|
752
|
+
examples: [
|
|
753
|
+
{
|
|
754
|
+
name: 'Basic Switch',
|
|
755
|
+
code: '<Switch label="Enable notifications" />',
|
|
756
|
+
description: 'Basic switch usage',
|
|
757
|
+
},
|
|
758
|
+
],
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
name: 'Tab',
|
|
762
|
+
description: 'Tab component for tabbed interfaces',
|
|
763
|
+
category: 'Navigation',
|
|
764
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-tab',
|
|
765
|
+
props: [
|
|
766
|
+
{
|
|
767
|
+
name: 'tabs',
|
|
768
|
+
type: 'Array<{ id: string; label: string }>',
|
|
769
|
+
required: true,
|
|
770
|
+
description: 'Tab items',
|
|
771
|
+
},
|
|
772
|
+
{
|
|
773
|
+
name: 'activeTab',
|
|
774
|
+
type: 'string',
|
|
775
|
+
required: true,
|
|
776
|
+
description: 'Active tab ID',
|
|
777
|
+
},
|
|
778
|
+
{
|
|
779
|
+
name: 'onTabChange',
|
|
780
|
+
type: '(tabId: string) => void',
|
|
781
|
+
required: true,
|
|
782
|
+
description: 'Tab change handler',
|
|
783
|
+
},
|
|
784
|
+
],
|
|
785
|
+
examples: [
|
|
786
|
+
{
|
|
787
|
+
name: 'Basic Tabs',
|
|
788
|
+
code: '<Tab tabs={tabs} activeTab="tab1" onTabChange={handleTabChange} />',
|
|
789
|
+
description: 'Basic tab component',
|
|
790
|
+
},
|
|
791
|
+
],
|
|
792
|
+
},
|
|
793
|
+
{
|
|
794
|
+
name: 'Tag',
|
|
795
|
+
description: 'Tag component for labels and categories',
|
|
796
|
+
category: 'Data Display',
|
|
797
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-tag',
|
|
798
|
+
props: [
|
|
799
|
+
{
|
|
800
|
+
name: 'variant',
|
|
801
|
+
type: "'default' | 'primary' | 'success' | 'error' | 'warning'",
|
|
802
|
+
required: false,
|
|
803
|
+
defaultValue: "'default'",
|
|
804
|
+
description: 'Tag variant style',
|
|
805
|
+
},
|
|
806
|
+
{
|
|
807
|
+
name: 'size',
|
|
808
|
+
type: "'small' | 'medium' | 'large'",
|
|
809
|
+
required: false,
|
|
810
|
+
defaultValue: "'medium'",
|
|
811
|
+
description: 'Tag size',
|
|
812
|
+
},
|
|
813
|
+
],
|
|
814
|
+
examples: [
|
|
815
|
+
{
|
|
816
|
+
name: 'Basic Tag',
|
|
817
|
+
code: '<Tag>Label</Tag>',
|
|
818
|
+
description: 'Basic tag usage',
|
|
819
|
+
},
|
|
820
|
+
],
|
|
821
|
+
},
|
|
822
|
+
{
|
|
823
|
+
name: 'TextField',
|
|
824
|
+
description: 'Text field component with label',
|
|
825
|
+
category: 'Forms',
|
|
826
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-text-field',
|
|
827
|
+
props: [
|
|
828
|
+
{
|
|
829
|
+
name: 'label',
|
|
830
|
+
type: 'string',
|
|
831
|
+
required: true,
|
|
832
|
+
description: 'Field label',
|
|
833
|
+
},
|
|
834
|
+
{
|
|
835
|
+
name: 'value',
|
|
836
|
+
type: 'string',
|
|
837
|
+
required: false,
|
|
838
|
+
description: 'Field value',
|
|
839
|
+
},
|
|
840
|
+
{
|
|
841
|
+
name: 'placeholder',
|
|
842
|
+
type: 'string',
|
|
843
|
+
required: false,
|
|
844
|
+
description: 'Placeholder text',
|
|
845
|
+
},
|
|
846
|
+
{
|
|
847
|
+
name: 'error',
|
|
848
|
+
type: 'string',
|
|
849
|
+
required: false,
|
|
850
|
+
description: 'Error message',
|
|
851
|
+
},
|
|
852
|
+
{
|
|
853
|
+
name: 'helperText',
|
|
854
|
+
type: 'string',
|
|
855
|
+
required: false,
|
|
856
|
+
description: 'Helper text',
|
|
857
|
+
},
|
|
858
|
+
{
|
|
859
|
+
name: 'disabled',
|
|
860
|
+
type: 'boolean',
|
|
861
|
+
required: false,
|
|
862
|
+
defaultValue: 'false',
|
|
863
|
+
description: 'Whether the field is disabled',
|
|
864
|
+
},
|
|
865
|
+
{
|
|
866
|
+
name: 'onChange',
|
|
867
|
+
type: '(value: string) => void',
|
|
868
|
+
required: false,
|
|
869
|
+
description: 'Change handler function',
|
|
870
|
+
},
|
|
871
|
+
],
|
|
872
|
+
examples: [
|
|
873
|
+
{
|
|
874
|
+
name: 'Basic Text Field',
|
|
875
|
+
code: '<TextField label="Name" placeholder="Enter name" />',
|
|
876
|
+
description: 'Basic text field',
|
|
877
|
+
},
|
|
878
|
+
],
|
|
879
|
+
},
|
|
880
|
+
{
|
|
881
|
+
name: 'TextLink',
|
|
882
|
+
description: 'Text link component',
|
|
883
|
+
category: 'Actions',
|
|
884
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-text-link',
|
|
885
|
+
props: [
|
|
886
|
+
{
|
|
887
|
+
name: 'href',
|
|
888
|
+
type: 'string',
|
|
889
|
+
required: true,
|
|
890
|
+
description: 'Link URL',
|
|
891
|
+
},
|
|
892
|
+
{
|
|
893
|
+
name: 'target',
|
|
894
|
+
type: "'_self' | '_blank' | '_parent' | '_top'",
|
|
895
|
+
required: false,
|
|
896
|
+
defaultValue: "'_self'",
|
|
897
|
+
description: 'Link target',
|
|
898
|
+
},
|
|
899
|
+
{
|
|
900
|
+
name: 'variant',
|
|
901
|
+
type: "'default' | 'primary' | 'secondary'",
|
|
902
|
+
required: false,
|
|
903
|
+
defaultValue: "'default'",
|
|
904
|
+
description: 'Link variant style',
|
|
905
|
+
},
|
|
906
|
+
],
|
|
907
|
+
examples: [
|
|
908
|
+
{
|
|
909
|
+
name: 'Basic Text Link',
|
|
910
|
+
code: '<TextLink href="/about">About</TextLink>',
|
|
911
|
+
description: 'Basic text link',
|
|
912
|
+
},
|
|
913
|
+
],
|
|
914
|
+
},
|
|
915
|
+
{
|
|
916
|
+
name: 'Text',
|
|
917
|
+
description: 'Text component for typography',
|
|
918
|
+
category: 'Data Display',
|
|
919
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-text',
|
|
920
|
+
props: [
|
|
921
|
+
{
|
|
922
|
+
name: 'variant',
|
|
923
|
+
type: "'body' | 'heading' | 'caption' | 'overline'",
|
|
924
|
+
required: false,
|
|
925
|
+
defaultValue: "'body'",
|
|
926
|
+
description: 'Text variant',
|
|
927
|
+
},
|
|
928
|
+
{
|
|
929
|
+
name: 'size',
|
|
930
|
+
type: "'small' | 'medium' | 'large'",
|
|
931
|
+
required: false,
|
|
932
|
+
defaultValue: "'medium'",
|
|
933
|
+
description: 'Text size',
|
|
934
|
+
},
|
|
935
|
+
{
|
|
936
|
+
name: 'color',
|
|
937
|
+
type: 'string',
|
|
938
|
+
required: false,
|
|
939
|
+
description: 'Text color',
|
|
940
|
+
},
|
|
941
|
+
],
|
|
942
|
+
examples: [
|
|
943
|
+
{
|
|
944
|
+
name: 'Basic Text',
|
|
945
|
+
code: '<Text>Hello World</Text>',
|
|
946
|
+
description: 'Basic text component',
|
|
947
|
+
},
|
|
948
|
+
{
|
|
949
|
+
name: 'Heading Text',
|
|
950
|
+
code: '<Text variant="heading" size="large">Title</Text>',
|
|
951
|
+
description: 'Heading text',
|
|
952
|
+
},
|
|
953
|
+
],
|
|
954
|
+
},
|
|
955
|
+
{
|
|
956
|
+
name: 'Toast',
|
|
957
|
+
description: 'Toast notification component',
|
|
958
|
+
category: 'Feedback',
|
|
959
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-toast',
|
|
960
|
+
props: [
|
|
961
|
+
{
|
|
962
|
+
name: 'message',
|
|
963
|
+
type: 'string',
|
|
964
|
+
required: true,
|
|
965
|
+
description: 'Toast message',
|
|
966
|
+
},
|
|
967
|
+
{
|
|
968
|
+
name: 'variant',
|
|
969
|
+
type: "'success' | 'error' | 'warning' | 'info'",
|
|
970
|
+
required: false,
|
|
971
|
+
defaultValue: "'info'",
|
|
972
|
+
description: 'Toast variant',
|
|
973
|
+
},
|
|
974
|
+
{
|
|
975
|
+
name: 'duration',
|
|
976
|
+
type: 'number',
|
|
977
|
+
required: false,
|
|
978
|
+
defaultValue: '3000',
|
|
979
|
+
description: 'Toast duration in milliseconds',
|
|
980
|
+
},
|
|
981
|
+
],
|
|
982
|
+
examples: [
|
|
983
|
+
{
|
|
984
|
+
name: 'Basic Toast',
|
|
985
|
+
code: '<Toast message="Operation completed" variant="success" />',
|
|
986
|
+
description: 'Basic toast notification',
|
|
987
|
+
},
|
|
988
|
+
],
|
|
989
|
+
},
|
|
990
|
+
{
|
|
991
|
+
name: 'Tooltip',
|
|
992
|
+
description: 'Tooltip component for hover information',
|
|
993
|
+
category: 'Feedback',
|
|
994
|
+
importPath: '@dealicious/design-system-react/src/components/ssm-tooltip',
|
|
995
|
+
props: [
|
|
996
|
+
{
|
|
997
|
+
name: 'content',
|
|
998
|
+
type: 'string',
|
|
999
|
+
required: true,
|
|
1000
|
+
description: 'Tooltip content',
|
|
1001
|
+
},
|
|
1002
|
+
{
|
|
1003
|
+
name: 'placement',
|
|
1004
|
+
type: "'top' | 'bottom' | 'left' | 'right'",
|
|
1005
|
+
required: false,
|
|
1006
|
+
defaultValue: "'top'",
|
|
1007
|
+
description: 'Tooltip placement',
|
|
1008
|
+
},
|
|
1009
|
+
],
|
|
1010
|
+
examples: [
|
|
1011
|
+
{
|
|
1012
|
+
name: 'Basic Tooltip',
|
|
1013
|
+
code: '<Tooltip content="Help text"><Button>Hover me</Button></Tooltip>',
|
|
1014
|
+
description: 'Basic tooltip usage',
|
|
1015
|
+
},
|
|
1016
|
+
],
|
|
1017
|
+
},
|
|
1018
|
+
{
|
|
1019
|
+
name: 'EnvBadge',
|
|
1020
|
+
description: 'Environment badge component',
|
|
1021
|
+
category: 'Data Display',
|
|
1022
|
+
importPath: '@dealicious/design-system-react/src/components/env-badge',
|
|
1023
|
+
props: [
|
|
1024
|
+
{
|
|
1025
|
+
name: 'environment',
|
|
1026
|
+
type: "'development' | 'staging' | 'production'",
|
|
1027
|
+
required: true,
|
|
1028
|
+
description: 'Environment type',
|
|
1029
|
+
},
|
|
1030
|
+
],
|
|
1031
|
+
examples: [
|
|
1032
|
+
{
|
|
1033
|
+
name: 'Basic Env Badge',
|
|
1034
|
+
code: '<EnvBadge environment="development" />',
|
|
1035
|
+
description: 'Basic environment badge',
|
|
1036
|
+
},
|
|
1037
|
+
],
|
|
1038
|
+
},
|
|
1039
|
+
];
|
|
1040
|
+
this.vueComponents = [
|
|
1041
|
+
{
|
|
1042
|
+
name: 'SsmAccordion',
|
|
1043
|
+
description: 'Accordion component for collapsible content sections',
|
|
1044
|
+
category: 'Layout',
|
|
1045
|
+
importPath: '@dealicious/design-system/src/components/ssm-accordion',
|
|
1046
|
+
props: [
|
|
1047
|
+
{
|
|
1048
|
+
name: 'title',
|
|
1049
|
+
type: 'string',
|
|
1050
|
+
required: true,
|
|
1051
|
+
description: 'Accordion title',
|
|
1052
|
+
},
|
|
1053
|
+
{
|
|
1054
|
+
name: 'defaultExpanded',
|
|
1055
|
+
type: 'boolean',
|
|
1056
|
+
required: false,
|
|
1057
|
+
defaultValue: 'false',
|
|
1058
|
+
description: 'Whether the accordion is expanded by default',
|
|
1059
|
+
},
|
|
1060
|
+
{
|
|
1061
|
+
name: 'disabled',
|
|
1062
|
+
type: 'boolean',
|
|
1063
|
+
required: false,
|
|
1064
|
+
defaultValue: 'false',
|
|
1065
|
+
description: 'Whether the accordion is disabled',
|
|
1066
|
+
},
|
|
1067
|
+
],
|
|
1068
|
+
examples: [
|
|
1069
|
+
{
|
|
1070
|
+
name: 'Basic Accordion',
|
|
1071
|
+
code: '<SsmAccordion title="Section Title">Content here</SsmAccordion>',
|
|
1072
|
+
description: 'Basic accordion usage',
|
|
1073
|
+
},
|
|
1074
|
+
],
|
|
1075
|
+
},
|
|
1076
|
+
{
|
|
1077
|
+
name: 'SsmArrowPagination',
|
|
1078
|
+
description: 'Arrow-based pagination component',
|
|
1079
|
+
category: 'Navigation',
|
|
1080
|
+
importPath: '@dealicious/design-system/src/components/ssm-arrow-pagination',
|
|
1081
|
+
props: [
|
|
1082
|
+
{
|
|
1083
|
+
name: 'currentPage',
|
|
1084
|
+
type: 'number',
|
|
1085
|
+
required: true,
|
|
1086
|
+
description: 'Current page number',
|
|
1087
|
+
},
|
|
1088
|
+
{
|
|
1089
|
+
name: 'totalPages',
|
|
1090
|
+
type: 'number',
|
|
1091
|
+
required: true,
|
|
1092
|
+
description: 'Total number of pages',
|
|
1093
|
+
},
|
|
1094
|
+
{
|
|
1095
|
+
name: 'onPageChange',
|
|
1096
|
+
type: '(page: number) => void',
|
|
1097
|
+
required: true,
|
|
1098
|
+
description: 'Page change handler',
|
|
1099
|
+
},
|
|
1100
|
+
{
|
|
1101
|
+
name: 'disabled',
|
|
1102
|
+
type: 'boolean',
|
|
1103
|
+
required: false,
|
|
1104
|
+
defaultValue: 'false',
|
|
1105
|
+
description: 'Whether pagination is disabled',
|
|
1106
|
+
},
|
|
1107
|
+
],
|
|
1108
|
+
examples: [
|
|
1109
|
+
{
|
|
1110
|
+
name: 'Basic Arrow Pagination',
|
|
1111
|
+
code: '<SsmArrowPagination :current-page="1" :total-pages="10" @page-change="handlePageChange" />',
|
|
1112
|
+
description: 'Basic arrow pagination',
|
|
1113
|
+
},
|
|
1114
|
+
],
|
|
1115
|
+
},
|
|
1116
|
+
{
|
|
1117
|
+
name: 'SsmBadge',
|
|
1118
|
+
description: 'Badge component for status indicators',
|
|
1119
|
+
category: 'Data Display',
|
|
1120
|
+
importPath: '@dealicious/design-system/src/components/ssm-badge',
|
|
1121
|
+
props: [
|
|
1122
|
+
{
|
|
1123
|
+
name: 'variant',
|
|
1124
|
+
type: "'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'",
|
|
1125
|
+
required: false,
|
|
1126
|
+
defaultValue: "'primary'",
|
|
1127
|
+
description: 'Badge variant style',
|
|
1128
|
+
},
|
|
1129
|
+
{
|
|
1130
|
+
name: 'size',
|
|
1131
|
+
type: "'small' | 'medium' | 'large'",
|
|
1132
|
+
required: false,
|
|
1133
|
+
defaultValue: "'medium'",
|
|
1134
|
+
description: 'Badge size',
|
|
1135
|
+
},
|
|
1136
|
+
],
|
|
1137
|
+
examples: [
|
|
1138
|
+
{
|
|
1139
|
+
name: 'Basic Badge',
|
|
1140
|
+
code: '<SsmBadge>New</SsmBadge>',
|
|
1141
|
+
description: 'Basic badge usage',
|
|
1142
|
+
},
|
|
1143
|
+
{
|
|
1144
|
+
name: 'Success Badge',
|
|
1145
|
+
code: '<SsmBadge variant="success">Completed</SsmBadge>',
|
|
1146
|
+
description: 'Success variant badge',
|
|
1147
|
+
},
|
|
1148
|
+
],
|
|
1149
|
+
},
|
|
1150
|
+
{
|
|
1151
|
+
name: 'SsmButton',
|
|
1152
|
+
description: 'Primary button component with multiple variants',
|
|
1153
|
+
category: 'Actions',
|
|
1154
|
+
importPath: '@dealicious/design-system/src/components/ssm-button',
|
|
1155
|
+
props: [
|
|
1156
|
+
{
|
|
1157
|
+
name: 'variant',
|
|
1158
|
+
type: "'primary' | 'secondary' | 'tertiary' | 'danger'",
|
|
1159
|
+
required: false,
|
|
1160
|
+
defaultValue: "'primary'",
|
|
1161
|
+
description: 'Button variant style',
|
|
1162
|
+
},
|
|
1163
|
+
{
|
|
1164
|
+
name: 'size',
|
|
1165
|
+
type: "'small' | 'medium' | 'large'",
|
|
1166
|
+
required: false,
|
|
1167
|
+
defaultValue: "'medium'",
|
|
1168
|
+
description: 'Button size',
|
|
1169
|
+
},
|
|
1170
|
+
{
|
|
1171
|
+
name: 'disabled',
|
|
1172
|
+
type: 'boolean',
|
|
1173
|
+
required: false,
|
|
1174
|
+
defaultValue: 'false',
|
|
1175
|
+
description: 'Whether the button is disabled',
|
|
1176
|
+
},
|
|
1177
|
+
{
|
|
1178
|
+
name: 'loading',
|
|
1179
|
+
type: 'boolean',
|
|
1180
|
+
required: false,
|
|
1181
|
+
defaultValue: 'false',
|
|
1182
|
+
description: 'Whether the button is in loading state',
|
|
1183
|
+
},
|
|
1184
|
+
],
|
|
1185
|
+
examples: [
|
|
1186
|
+
{
|
|
1187
|
+
name: 'Basic Button',
|
|
1188
|
+
code: '<SsmButton>Click me</SsmButton>',
|
|
1189
|
+
description: 'Basic button usage',
|
|
1190
|
+
},
|
|
1191
|
+
{
|
|
1192
|
+
name: 'Primary Button',
|
|
1193
|
+
code: '<SsmButton variant="primary">Primary</SsmButton>',
|
|
1194
|
+
description: 'Primary variant button',
|
|
1195
|
+
},
|
|
1196
|
+
],
|
|
1197
|
+
},
|
|
1198
|
+
{
|
|
1199
|
+
name: 'SsmCheck',
|
|
1200
|
+
description: 'Checkbox component for form inputs',
|
|
1201
|
+
category: 'Forms',
|
|
1202
|
+
importPath: '@dealicious/design-system/src/components/ssm-check',
|
|
1203
|
+
props: [
|
|
1204
|
+
{
|
|
1205
|
+
name: 'modelValue',
|
|
1206
|
+
type: 'boolean',
|
|
1207
|
+
required: false,
|
|
1208
|
+
defaultValue: 'false',
|
|
1209
|
+
description: 'Whether the checkbox is checked (v-model)',
|
|
1210
|
+
},
|
|
1211
|
+
{
|
|
1212
|
+
name: 'disabled',
|
|
1213
|
+
type: 'boolean',
|
|
1214
|
+
required: false,
|
|
1215
|
+
defaultValue: 'false',
|
|
1216
|
+
description: 'Whether the checkbox is disabled',
|
|
1217
|
+
},
|
|
1218
|
+
{
|
|
1219
|
+
name: 'label',
|
|
1220
|
+
type: 'string',
|
|
1221
|
+
required: false,
|
|
1222
|
+
description: 'Checkbox label text',
|
|
1223
|
+
},
|
|
1224
|
+
],
|
|
1225
|
+
examples: [
|
|
1226
|
+
{
|
|
1227
|
+
name: 'Basic Checkbox',
|
|
1228
|
+
code: '<SsmCheck label="Accept terms" v-model="checked" />',
|
|
1229
|
+
description: 'Basic checkbox usage',
|
|
1230
|
+
},
|
|
1231
|
+
],
|
|
1232
|
+
},
|
|
1233
|
+
{
|
|
1234
|
+
name: 'SsmChip',
|
|
1235
|
+
description: 'Chip component for tags and labels',
|
|
1236
|
+
category: 'Data Display',
|
|
1237
|
+
importPath: '@dealicious/design-system/src/components/ssm-chip',
|
|
1238
|
+
props: [
|
|
1239
|
+
{
|
|
1240
|
+
name: 'variant',
|
|
1241
|
+
type: "'default' | 'outlined' | 'filled'",
|
|
1242
|
+
required: false,
|
|
1243
|
+
defaultValue: "'default'",
|
|
1244
|
+
description: 'Chip variant style',
|
|
1245
|
+
},
|
|
1246
|
+
{
|
|
1247
|
+
name: 'size',
|
|
1248
|
+
type: "'small' | 'medium' | 'large'",
|
|
1249
|
+
required: false,
|
|
1250
|
+
defaultValue: "'medium'",
|
|
1251
|
+
description: 'Chip size',
|
|
1252
|
+
},
|
|
1253
|
+
],
|
|
1254
|
+
examples: [
|
|
1255
|
+
{
|
|
1256
|
+
name: 'Basic Chip',
|
|
1257
|
+
code: '<SsmChip>Tag</SsmChip>',
|
|
1258
|
+
description: 'Basic chip usage',
|
|
1259
|
+
},
|
|
1260
|
+
],
|
|
1261
|
+
},
|
|
1262
|
+
{
|
|
1263
|
+
name: 'SsmDropdown',
|
|
1264
|
+
description: 'Dropdown select component',
|
|
1265
|
+
category: 'Forms',
|
|
1266
|
+
importPath: '@dealicious/design-system/src/components/ssm-dropdown',
|
|
1267
|
+
props: [
|
|
1268
|
+
{
|
|
1269
|
+
name: 'options',
|
|
1270
|
+
type: 'Array<{ value: string; label: string }>',
|
|
1271
|
+
required: true,
|
|
1272
|
+
description: 'Dropdown options',
|
|
1273
|
+
},
|
|
1274
|
+
{
|
|
1275
|
+
name: 'modelValue',
|
|
1276
|
+
type: 'string',
|
|
1277
|
+
required: false,
|
|
1278
|
+
description: 'Selected value (v-model)',
|
|
1279
|
+
},
|
|
1280
|
+
{
|
|
1281
|
+
name: 'placeholder',
|
|
1282
|
+
type: 'string',
|
|
1283
|
+
required: false,
|
|
1284
|
+
description: 'Placeholder text',
|
|
1285
|
+
},
|
|
1286
|
+
{
|
|
1287
|
+
name: 'disabled',
|
|
1288
|
+
type: 'boolean',
|
|
1289
|
+
required: false,
|
|
1290
|
+
defaultValue: 'false',
|
|
1291
|
+
description: 'Whether the dropdown is disabled',
|
|
1292
|
+
},
|
|
1293
|
+
],
|
|
1294
|
+
examples: [
|
|
1295
|
+
{
|
|
1296
|
+
name: 'Basic Dropdown',
|
|
1297
|
+
code: '<SsmDropdown :options="options" placeholder="Select..." v-model="selected" />',
|
|
1298
|
+
description: 'Basic dropdown usage',
|
|
1299
|
+
},
|
|
1300
|
+
],
|
|
1301
|
+
},
|
|
1302
|
+
{
|
|
1303
|
+
name: 'SsmError',
|
|
1304
|
+
description: 'Error message display component',
|
|
1305
|
+
category: 'Feedback',
|
|
1306
|
+
importPath: '@dealicious/design-system/src/components/ssm-error',
|
|
1307
|
+
props: [
|
|
1308
|
+
{
|
|
1309
|
+
name: 'message',
|
|
1310
|
+
type: 'string',
|
|
1311
|
+
required: true,
|
|
1312
|
+
description: 'Error message to display',
|
|
1313
|
+
},
|
|
1314
|
+
{
|
|
1315
|
+
name: 'dismissible',
|
|
1316
|
+
type: 'boolean',
|
|
1317
|
+
required: false,
|
|
1318
|
+
defaultValue: 'false',
|
|
1319
|
+
description: 'Whether the error can be dismissed',
|
|
1320
|
+
},
|
|
1321
|
+
],
|
|
1322
|
+
examples: [
|
|
1323
|
+
{
|
|
1324
|
+
name: 'Basic Error',
|
|
1325
|
+
code: '<SsmError message="Something went wrong" />',
|
|
1326
|
+
description: 'Basic error display',
|
|
1327
|
+
},
|
|
1328
|
+
],
|
|
1329
|
+
},
|
|
1330
|
+
{
|
|
1331
|
+
name: 'SsmHelperText',
|
|
1332
|
+
description: 'Helper text component for form fields',
|
|
1333
|
+
category: 'Forms',
|
|
1334
|
+
importPath: '@dealicious/design-system/src/components/ssm-helper-text',
|
|
1335
|
+
props: [
|
|
1336
|
+
{
|
|
1337
|
+
name: 'text',
|
|
1338
|
+
type: 'string',
|
|
1339
|
+
required: true,
|
|
1340
|
+
description: 'Helper text content',
|
|
1341
|
+
},
|
|
1342
|
+
{
|
|
1343
|
+
name: 'variant',
|
|
1344
|
+
type: "'default' | 'error' | 'success'",
|
|
1345
|
+
required: false,
|
|
1346
|
+
defaultValue: "'default'",
|
|
1347
|
+
description: 'Helper text variant',
|
|
1348
|
+
},
|
|
1349
|
+
],
|
|
1350
|
+
examples: [
|
|
1351
|
+
{
|
|
1352
|
+
name: 'Basic Helper Text',
|
|
1353
|
+
code: '<SsmHelperText text="Enter your email address" />',
|
|
1354
|
+
description: 'Basic helper text',
|
|
1355
|
+
},
|
|
1356
|
+
],
|
|
1357
|
+
},
|
|
1358
|
+
{
|
|
1359
|
+
name: 'SsmIcon',
|
|
1360
|
+
description: 'Icon component for displaying icons',
|
|
1361
|
+
category: 'Media',
|
|
1362
|
+
importPath: '@dealicious/design-system/src/components/ssm-icon',
|
|
1363
|
+
props: [
|
|
1364
|
+
{
|
|
1365
|
+
name: 'name',
|
|
1366
|
+
type: 'string',
|
|
1367
|
+
required: true,
|
|
1368
|
+
description: 'Icon name',
|
|
1369
|
+
},
|
|
1370
|
+
{
|
|
1371
|
+
name: 'size',
|
|
1372
|
+
type: "'small' | 'medium' | 'large'",
|
|
1373
|
+
required: false,
|
|
1374
|
+
defaultValue: "'medium'",
|
|
1375
|
+
description: 'Icon size',
|
|
1376
|
+
},
|
|
1377
|
+
{
|
|
1378
|
+
name: 'color',
|
|
1379
|
+
type: 'string',
|
|
1380
|
+
required: false,
|
|
1381
|
+
description: 'Icon color',
|
|
1382
|
+
},
|
|
1383
|
+
],
|
|
1384
|
+
examples: [
|
|
1385
|
+
{
|
|
1386
|
+
name: 'Basic Icon',
|
|
1387
|
+
code: '<SsmIcon name="home" />',
|
|
1388
|
+
description: 'Basic icon usage',
|
|
1389
|
+
},
|
|
1390
|
+
],
|
|
1391
|
+
},
|
|
1392
|
+
{
|
|
1393
|
+
name: 'SsmImage',
|
|
1394
|
+
description: 'Image component with loading and error handling',
|
|
1395
|
+
category: 'Media',
|
|
1396
|
+
importPath: '@dealicious/design-system/src/components/ssm-image',
|
|
1397
|
+
props: [
|
|
1398
|
+
{
|
|
1399
|
+
name: 'src',
|
|
1400
|
+
type: 'string',
|
|
1401
|
+
required: true,
|
|
1402
|
+
description: 'Image source URL',
|
|
1403
|
+
},
|
|
1404
|
+
{
|
|
1405
|
+
name: 'alt',
|
|
1406
|
+
type: 'string',
|
|
1407
|
+
required: false,
|
|
1408
|
+
description: 'Image alt text',
|
|
1409
|
+
},
|
|
1410
|
+
{
|
|
1411
|
+
name: 'width',
|
|
1412
|
+
type: 'string | number',
|
|
1413
|
+
required: false,
|
|
1414
|
+
description: 'Image width',
|
|
1415
|
+
},
|
|
1416
|
+
{
|
|
1417
|
+
name: 'height',
|
|
1418
|
+
type: 'string | number',
|
|
1419
|
+
required: false,
|
|
1420
|
+
description: 'Image height',
|
|
1421
|
+
},
|
|
1422
|
+
],
|
|
1423
|
+
examples: [
|
|
1424
|
+
{
|
|
1425
|
+
name: 'Basic Image',
|
|
1426
|
+
code: '<SsmImage src="/image.jpg" alt="Description" />',
|
|
1427
|
+
description: 'Basic image usage',
|
|
1428
|
+
},
|
|
1429
|
+
],
|
|
1430
|
+
},
|
|
1431
|
+
{
|
|
1432
|
+
name: 'SsmInput',
|
|
1433
|
+
description: 'Text input component with validation support',
|
|
1434
|
+
category: 'Forms',
|
|
1435
|
+
importPath: '@dealicious/design-system/src/components/ssm-input',
|
|
1436
|
+
props: [
|
|
1437
|
+
{
|
|
1438
|
+
name: 'type',
|
|
1439
|
+
type: "'text' | 'email' | 'password' | 'number'",
|
|
1440
|
+
required: false,
|
|
1441
|
+
defaultValue: "'text'",
|
|
1442
|
+
description: 'Input type',
|
|
1443
|
+
},
|
|
1444
|
+
{
|
|
1445
|
+
name: 'placeholder',
|
|
1446
|
+
type: 'string',
|
|
1447
|
+
required: false,
|
|
1448
|
+
description: 'Placeholder text',
|
|
1449
|
+
},
|
|
1450
|
+
{
|
|
1451
|
+
name: 'modelValue',
|
|
1452
|
+
type: 'string',
|
|
1453
|
+
required: false,
|
|
1454
|
+
description: 'Input value (v-model)',
|
|
1455
|
+
},
|
|
1456
|
+
{
|
|
1457
|
+
name: 'disabled',
|
|
1458
|
+
type: 'boolean',
|
|
1459
|
+
required: false,
|
|
1460
|
+
defaultValue: 'false',
|
|
1461
|
+
description: 'Whether the input is disabled',
|
|
1462
|
+
},
|
|
1463
|
+
{
|
|
1464
|
+
name: 'error',
|
|
1465
|
+
type: 'string',
|
|
1466
|
+
required: false,
|
|
1467
|
+
description: 'Error message to display',
|
|
1468
|
+
},
|
|
1469
|
+
],
|
|
1470
|
+
examples: [
|
|
1471
|
+
{
|
|
1472
|
+
name: 'Basic Input',
|
|
1473
|
+
code: '<SsmInput placeholder="Enter text" v-model="value" />',
|
|
1474
|
+
description: 'Basic input field with v-model',
|
|
1475
|
+
},
|
|
1476
|
+
{
|
|
1477
|
+
name: 'Input with Error',
|
|
1478
|
+
code: '<SsmInput error="This field is required" />',
|
|
1479
|
+
description: 'Input with error state',
|
|
1480
|
+
},
|
|
1481
|
+
],
|
|
1482
|
+
},
|
|
1483
|
+
{
|
|
1484
|
+
name: 'SsmLabeledText',
|
|
1485
|
+
description: 'Text component with label',
|
|
1486
|
+
category: 'Data Display',
|
|
1487
|
+
importPath: '@dealicious/design-system/src/components/ssm-labeled-text',
|
|
1488
|
+
props: [
|
|
1489
|
+
{
|
|
1490
|
+
name: 'label',
|
|
1491
|
+
type: 'string',
|
|
1492
|
+
required: true,
|
|
1493
|
+
description: 'Label text',
|
|
1494
|
+
},
|
|
1495
|
+
{
|
|
1496
|
+
name: 'value',
|
|
1497
|
+
type: 'string',
|
|
1498
|
+
required: true,
|
|
1499
|
+
description: 'Text value',
|
|
1500
|
+
},
|
|
1501
|
+
],
|
|
1502
|
+
examples: [
|
|
1503
|
+
{
|
|
1504
|
+
name: 'Basic Labeled Text',
|
|
1505
|
+
code: '<SsmLabeledText label="Name" value="John Doe" />',
|
|
1506
|
+
description: 'Basic labeled text',
|
|
1507
|
+
},
|
|
1508
|
+
],
|
|
1509
|
+
},
|
|
1510
|
+
{
|
|
1511
|
+
name: 'SsmLayerAlert',
|
|
1512
|
+
description: 'Alert layer component for notifications',
|
|
1513
|
+
category: 'Overlays',
|
|
1514
|
+
importPath: '@dealicious/design-system/src/components/ssm-layer-alert',
|
|
1515
|
+
props: [
|
|
1516
|
+
{
|
|
1517
|
+
name: 'isOpen',
|
|
1518
|
+
type: 'boolean',
|
|
1519
|
+
required: true,
|
|
1520
|
+
description: 'Whether the alert is open',
|
|
1521
|
+
},
|
|
1522
|
+
{
|
|
1523
|
+
name: 'title',
|
|
1524
|
+
type: 'string',
|
|
1525
|
+
required: true,
|
|
1526
|
+
description: 'Alert title',
|
|
1527
|
+
},
|
|
1528
|
+
{
|
|
1529
|
+
name: 'message',
|
|
1530
|
+
type: 'string',
|
|
1531
|
+
required: true,
|
|
1532
|
+
description: 'Alert message',
|
|
1533
|
+
},
|
|
1534
|
+
{
|
|
1535
|
+
name: 'variant',
|
|
1536
|
+
type: "'info' | 'warning' | 'error' | 'success'",
|
|
1537
|
+
required: false,
|
|
1538
|
+
defaultValue: "'info'",
|
|
1539
|
+
description: 'Alert variant',
|
|
1540
|
+
},
|
|
1541
|
+
],
|
|
1542
|
+
examples: [
|
|
1543
|
+
{
|
|
1544
|
+
name: 'Basic Alert',
|
|
1545
|
+
code: '<SsmLayerAlert :is-open="isOpen" title="Alert" message="Message" @close="handleClose" />',
|
|
1546
|
+
description: 'Basic alert layer',
|
|
1547
|
+
},
|
|
1548
|
+
],
|
|
1549
|
+
},
|
|
1550
|
+
{
|
|
1551
|
+
name: 'SsmLayerModal',
|
|
1552
|
+
description: 'Modal layer component for dialogs',
|
|
1553
|
+
category: 'Overlays',
|
|
1554
|
+
importPath: '@dealicious/design-system/src/components/ssm-layer-modal',
|
|
1555
|
+
props: [
|
|
1556
|
+
{
|
|
1557
|
+
name: 'isOpen',
|
|
1558
|
+
type: 'boolean',
|
|
1559
|
+
required: true,
|
|
1560
|
+
description: 'Whether the modal is open',
|
|
1561
|
+
},
|
|
1562
|
+
{
|
|
1563
|
+
name: 'title',
|
|
1564
|
+
type: 'string',
|
|
1565
|
+
required: false,
|
|
1566
|
+
description: 'Modal title',
|
|
1567
|
+
},
|
|
1568
|
+
{
|
|
1569
|
+
name: 'size',
|
|
1570
|
+
type: "'small' | 'medium' | 'large' | 'fullscreen'",
|
|
1571
|
+
required: false,
|
|
1572
|
+
defaultValue: "'medium'",
|
|
1573
|
+
description: 'Modal size',
|
|
1574
|
+
},
|
|
1575
|
+
],
|
|
1576
|
+
examples: [
|
|
1577
|
+
{
|
|
1578
|
+
name: 'Basic Modal',
|
|
1579
|
+
code: '<SsmLayerModal :is-open="isOpen" title="Modal Title" @close="handleClose">Content</SsmLayerModal>',
|
|
1580
|
+
description: 'Basic modal layer',
|
|
1581
|
+
},
|
|
1582
|
+
],
|
|
1583
|
+
},
|
|
1584
|
+
{
|
|
1585
|
+
name: 'SsmLoadingSpinner',
|
|
1586
|
+
description: 'Loading spinner component',
|
|
1587
|
+
category: 'Feedback',
|
|
1588
|
+
importPath: '@dealicious/design-system/src/components/ssm-loading-spinner',
|
|
1589
|
+
props: [
|
|
1590
|
+
{
|
|
1591
|
+
name: 'size',
|
|
1592
|
+
type: "'small' | 'medium' | 'large'",
|
|
1593
|
+
required: false,
|
|
1594
|
+
defaultValue: "'medium'",
|
|
1595
|
+
description: 'Spinner size',
|
|
1596
|
+
},
|
|
1597
|
+
{
|
|
1598
|
+
name: 'color',
|
|
1599
|
+
type: 'string',
|
|
1600
|
+
required: false,
|
|
1601
|
+
description: 'Spinner color',
|
|
1602
|
+
},
|
|
1603
|
+
],
|
|
1604
|
+
examples: [
|
|
1605
|
+
{
|
|
1606
|
+
name: 'Basic Spinner',
|
|
1607
|
+
code: '<SsmLoadingSpinner />',
|
|
1608
|
+
description: 'Basic loading spinner',
|
|
1609
|
+
},
|
|
1610
|
+
],
|
|
1611
|
+
},
|
|
1612
|
+
{
|
|
1613
|
+
name: 'SsmNotice',
|
|
1614
|
+
description: 'Notice component for announcements',
|
|
1615
|
+
category: 'Feedback',
|
|
1616
|
+
importPath: '@dealicious/design-system/src/components/ssm-notice',
|
|
1617
|
+
props: [
|
|
1618
|
+
{
|
|
1619
|
+
name: 'message',
|
|
1620
|
+
type: 'string',
|
|
1621
|
+
required: true,
|
|
1622
|
+
description: 'Notice message',
|
|
1623
|
+
},
|
|
1624
|
+
{
|
|
1625
|
+
name: 'variant',
|
|
1626
|
+
type: "'info' | 'warning' | 'error' | 'success'",
|
|
1627
|
+
required: false,
|
|
1628
|
+
defaultValue: "'info'",
|
|
1629
|
+
description: 'Notice variant',
|
|
1630
|
+
},
|
|
1631
|
+
{
|
|
1632
|
+
name: 'dismissible',
|
|
1633
|
+
type: 'boolean',
|
|
1634
|
+
required: false,
|
|
1635
|
+
defaultValue: 'false',
|
|
1636
|
+
description: 'Whether the notice can be dismissed',
|
|
1637
|
+
},
|
|
1638
|
+
],
|
|
1639
|
+
examples: [
|
|
1640
|
+
{
|
|
1641
|
+
name: 'Basic Notice',
|
|
1642
|
+
code: '<SsmNotice message="Important announcement" />',
|
|
1643
|
+
description: 'Basic notice',
|
|
1644
|
+
},
|
|
1645
|
+
],
|
|
1646
|
+
},
|
|
1647
|
+
{
|
|
1648
|
+
name: 'SsmPagination',
|
|
1649
|
+
description: 'Pagination component for page navigation',
|
|
1650
|
+
category: 'Navigation',
|
|
1651
|
+
importPath: '@dealicious/design-system/src/components/ssm-pagination',
|
|
1652
|
+
props: [
|
|
1653
|
+
{
|
|
1654
|
+
name: 'currentPage',
|
|
1655
|
+
type: 'number',
|
|
1656
|
+
required: true,
|
|
1657
|
+
description: 'Current page number',
|
|
1658
|
+
},
|
|
1659
|
+
{
|
|
1660
|
+
name: 'totalPages',
|
|
1661
|
+
type: 'number',
|
|
1662
|
+
required: true,
|
|
1663
|
+
description: 'Total number of pages',
|
|
1664
|
+
},
|
|
1665
|
+
],
|
|
1666
|
+
examples: [
|
|
1667
|
+
{
|
|
1668
|
+
name: 'Basic Pagination',
|
|
1669
|
+
code: '<SsmPagination :current-page="1" :total-pages="10" @page-change="handlePageChange" />',
|
|
1670
|
+
description: 'Basic pagination',
|
|
1671
|
+
},
|
|
1672
|
+
],
|
|
1673
|
+
},
|
|
1674
|
+
{
|
|
1675
|
+
name: 'SsmRadioGroup',
|
|
1676
|
+
description: 'Radio button group component',
|
|
1677
|
+
category: 'Forms',
|
|
1678
|
+
importPath: '@dealicious/design-system/src/components/ssm-radio-group',
|
|
1679
|
+
props: [
|
|
1680
|
+
{
|
|
1681
|
+
name: 'options',
|
|
1682
|
+
type: 'Array<{ value: string; label: string }>',
|
|
1683
|
+
required: true,
|
|
1684
|
+
description: 'Radio options',
|
|
1685
|
+
},
|
|
1686
|
+
{
|
|
1687
|
+
name: 'modelValue',
|
|
1688
|
+
type: 'string',
|
|
1689
|
+
required: false,
|
|
1690
|
+
description: 'Selected value (v-model)',
|
|
1691
|
+
},
|
|
1692
|
+
{
|
|
1693
|
+
name: 'disabled',
|
|
1694
|
+
type: 'boolean',
|
|
1695
|
+
required: false,
|
|
1696
|
+
defaultValue: 'false',
|
|
1697
|
+
description: 'Whether the radio group is disabled',
|
|
1698
|
+
},
|
|
1699
|
+
],
|
|
1700
|
+
examples: [
|
|
1701
|
+
{
|
|
1702
|
+
name: 'Basic Radio Group',
|
|
1703
|
+
code: '<SsmRadioGroup :options="options" v-model="selected" />',
|
|
1704
|
+
description: 'Basic radio group',
|
|
1705
|
+
},
|
|
1706
|
+
],
|
|
1707
|
+
},
|
|
1708
|
+
{
|
|
1709
|
+
name: 'SsmSwitch',
|
|
1710
|
+
description: 'Switch toggle component',
|
|
1711
|
+
category: 'Forms',
|
|
1712
|
+
importPath: '@dealicious/design-system/src/components/ssm-switch',
|
|
1713
|
+
props: [
|
|
1714
|
+
{
|
|
1715
|
+
name: 'modelValue',
|
|
1716
|
+
type: 'boolean',
|
|
1717
|
+
required: false,
|
|
1718
|
+
defaultValue: 'false',
|
|
1719
|
+
description: 'Whether the switch is checked (v-model)',
|
|
1720
|
+
},
|
|
1721
|
+
{
|
|
1722
|
+
name: 'disabled',
|
|
1723
|
+
type: 'boolean',
|
|
1724
|
+
required: false,
|
|
1725
|
+
defaultValue: 'false',
|
|
1726
|
+
description: 'Whether the switch is disabled',
|
|
1727
|
+
},
|
|
1728
|
+
{
|
|
1729
|
+
name: 'label',
|
|
1730
|
+
type: 'string',
|
|
1731
|
+
required: false,
|
|
1732
|
+
description: 'Switch label text',
|
|
1733
|
+
},
|
|
1734
|
+
],
|
|
1735
|
+
examples: [
|
|
1736
|
+
{
|
|
1737
|
+
name: 'Basic Switch',
|
|
1738
|
+
code: '<SsmSwitch label="Enable notifications" v-model="enabled" />',
|
|
1739
|
+
description: 'Basic switch usage',
|
|
1740
|
+
},
|
|
1741
|
+
],
|
|
1742
|
+
},
|
|
1743
|
+
{
|
|
1744
|
+
name: 'SsmTab',
|
|
1745
|
+
description: 'Tab component for tabbed interfaces',
|
|
1746
|
+
category: 'Navigation',
|
|
1747
|
+
importPath: '@dealicious/design-system/src/components/ssm-tab',
|
|
1748
|
+
props: [
|
|
1749
|
+
{
|
|
1750
|
+
name: 'tabs',
|
|
1751
|
+
type: 'Array<{ id: string; label: string }>',
|
|
1752
|
+
required: true,
|
|
1753
|
+
description: 'Tab items',
|
|
1754
|
+
},
|
|
1755
|
+
{
|
|
1756
|
+
name: 'activeTab',
|
|
1757
|
+
type: 'string',
|
|
1758
|
+
required: true,
|
|
1759
|
+
description: 'Active tab ID',
|
|
1760
|
+
},
|
|
1761
|
+
],
|
|
1762
|
+
examples: [
|
|
1763
|
+
{
|
|
1764
|
+
name: 'Basic Tabs',
|
|
1765
|
+
code: '<SsmTab :tabs="tabs" :active-tab="activeTab" @tab-change="handleTabChange" />',
|
|
1766
|
+
description: 'Basic tab component',
|
|
1767
|
+
},
|
|
1768
|
+
],
|
|
1769
|
+
},
|
|
1770
|
+
{
|
|
1771
|
+
name: 'SsmTag',
|
|
1772
|
+
description: 'Tag component for labels and categories',
|
|
1773
|
+
category: 'Data Display',
|
|
1774
|
+
importPath: '@dealicious/design-system/src/components/ssm-tag',
|
|
1775
|
+
props: [
|
|
1776
|
+
{
|
|
1777
|
+
name: 'variant',
|
|
1778
|
+
type: "'default' | 'primary' | 'success' | 'error' | 'warning'",
|
|
1779
|
+
required: false,
|
|
1780
|
+
defaultValue: "'default'",
|
|
1781
|
+
description: 'Tag variant style',
|
|
1782
|
+
},
|
|
1783
|
+
{
|
|
1784
|
+
name: 'size',
|
|
1785
|
+
type: "'small' | 'medium' | 'large'",
|
|
1786
|
+
required: false,
|
|
1787
|
+
defaultValue: "'medium'",
|
|
1788
|
+
description: 'Tag size',
|
|
1789
|
+
},
|
|
1790
|
+
],
|
|
1791
|
+
examples: [
|
|
1792
|
+
{
|
|
1793
|
+
name: 'Basic Tag',
|
|
1794
|
+
code: '<SsmTag>Label</SsmTag>',
|
|
1795
|
+
description: 'Basic tag usage',
|
|
1796
|
+
},
|
|
1797
|
+
],
|
|
1798
|
+
},
|
|
1799
|
+
{
|
|
1800
|
+
name: 'SsmText',
|
|
1801
|
+
description: 'Text component for typography',
|
|
1802
|
+
category: 'Data Display',
|
|
1803
|
+
importPath: '@dealicious/design-system/src/components/ssm-text',
|
|
1804
|
+
props: [
|
|
1805
|
+
{
|
|
1806
|
+
name: 'variant',
|
|
1807
|
+
type: "'body' | 'heading' | 'caption' | 'overline'",
|
|
1808
|
+
required: false,
|
|
1809
|
+
defaultValue: "'body'",
|
|
1810
|
+
description: 'Text variant',
|
|
1811
|
+
},
|
|
1812
|
+
{
|
|
1813
|
+
name: 'size',
|
|
1814
|
+
type: "'small' | 'medium' | 'large'",
|
|
1815
|
+
required: false,
|
|
1816
|
+
defaultValue: "'medium'",
|
|
1817
|
+
description: 'Text size',
|
|
1818
|
+
},
|
|
1819
|
+
{
|
|
1820
|
+
name: 'color',
|
|
1821
|
+
type: 'string',
|
|
1822
|
+
required: false,
|
|
1823
|
+
description: 'Text color',
|
|
1824
|
+
},
|
|
1825
|
+
],
|
|
1826
|
+
examples: [
|
|
1827
|
+
{
|
|
1828
|
+
name: 'Basic Text',
|
|
1829
|
+
code: '<SsmText>Hello World</SsmText>',
|
|
1830
|
+
description: 'Basic text component',
|
|
1831
|
+
},
|
|
1832
|
+
{
|
|
1833
|
+
name: 'Heading Text',
|
|
1834
|
+
code: '<SsmText variant="heading" size="large">Title</SsmText>',
|
|
1835
|
+
description: 'Heading text',
|
|
1836
|
+
},
|
|
1837
|
+
],
|
|
1838
|
+
},
|
|
1839
|
+
{
|
|
1840
|
+
name: 'SsmTextField',
|
|
1841
|
+
description: 'Text field component with label',
|
|
1842
|
+
category: 'Forms',
|
|
1843
|
+
importPath: '@dealicious/design-system/src/components/ssm-text-field',
|
|
1844
|
+
props: [
|
|
1845
|
+
{
|
|
1846
|
+
name: 'label',
|
|
1847
|
+
type: 'string',
|
|
1848
|
+
required: true,
|
|
1849
|
+
description: 'Field label',
|
|
1850
|
+
},
|
|
1851
|
+
{
|
|
1852
|
+
name: 'modelValue',
|
|
1853
|
+
type: 'string',
|
|
1854
|
+
required: false,
|
|
1855
|
+
description: 'Field value (v-model)',
|
|
1856
|
+
},
|
|
1857
|
+
{
|
|
1858
|
+
name: 'placeholder',
|
|
1859
|
+
type: 'string',
|
|
1860
|
+
required: false,
|
|
1861
|
+
description: 'Placeholder text',
|
|
1862
|
+
},
|
|
1863
|
+
{
|
|
1864
|
+
name: 'error',
|
|
1865
|
+
type: 'string',
|
|
1866
|
+
required: false,
|
|
1867
|
+
description: 'Error message',
|
|
1868
|
+
},
|
|
1869
|
+
{
|
|
1870
|
+
name: 'helperText',
|
|
1871
|
+
type: 'string',
|
|
1872
|
+
required: false,
|
|
1873
|
+
description: 'Helper text',
|
|
1874
|
+
},
|
|
1875
|
+
{
|
|
1876
|
+
name: 'disabled',
|
|
1877
|
+
type: 'boolean',
|
|
1878
|
+
required: false,
|
|
1879
|
+
defaultValue: 'false',
|
|
1880
|
+
description: 'Whether the field is disabled',
|
|
1881
|
+
},
|
|
1882
|
+
],
|
|
1883
|
+
examples: [
|
|
1884
|
+
{
|
|
1885
|
+
name: 'Basic Text Field',
|
|
1886
|
+
code: '<SsmTextField label="Name" placeholder="Enter name" v-model="name" />',
|
|
1887
|
+
description: 'Basic text field',
|
|
1888
|
+
},
|
|
1889
|
+
],
|
|
1890
|
+
},
|
|
1891
|
+
{
|
|
1892
|
+
name: 'SsmTextLink',
|
|
1893
|
+
description: 'Text link component',
|
|
1894
|
+
category: 'Actions',
|
|
1895
|
+
importPath: '@dealicious/design-system/src/components/ssm-text-link',
|
|
1896
|
+
props: [
|
|
1897
|
+
{
|
|
1898
|
+
name: 'href',
|
|
1899
|
+
type: 'string',
|
|
1900
|
+
required: true,
|
|
1901
|
+
description: 'Link URL',
|
|
1902
|
+
},
|
|
1903
|
+
{
|
|
1904
|
+
name: 'target',
|
|
1905
|
+
type: "'_self' | '_blank' | '_parent' | '_top'",
|
|
1906
|
+
required: false,
|
|
1907
|
+
defaultValue: "'_self'",
|
|
1908
|
+
description: 'Link target',
|
|
1909
|
+
},
|
|
1910
|
+
{
|
|
1911
|
+
name: 'variant',
|
|
1912
|
+
type: "'default' | 'primary' | 'secondary'",
|
|
1913
|
+
required: false,
|
|
1914
|
+
defaultValue: "'default'",
|
|
1915
|
+
description: 'Link variant style',
|
|
1916
|
+
},
|
|
1917
|
+
],
|
|
1918
|
+
examples: [
|
|
1919
|
+
{
|
|
1920
|
+
name: 'Basic Text Link',
|
|
1921
|
+
code: '<SsmTextLink href="/about">About</SsmTextLink>',
|
|
1922
|
+
description: 'Basic text link',
|
|
1923
|
+
},
|
|
1924
|
+
],
|
|
1925
|
+
},
|
|
1926
|
+
{
|
|
1927
|
+
name: 'SsmToast',
|
|
1928
|
+
description: 'Toast notification component',
|
|
1929
|
+
category: 'Feedback',
|
|
1930
|
+
importPath: '@dealicious/design-system/src/components/ssm-toast',
|
|
1931
|
+
props: [
|
|
1932
|
+
{
|
|
1933
|
+
name: 'message',
|
|
1934
|
+
type: 'string',
|
|
1935
|
+
required: true,
|
|
1936
|
+
description: 'Toast message',
|
|
1937
|
+
},
|
|
1938
|
+
{
|
|
1939
|
+
name: 'variant',
|
|
1940
|
+
type: "'success' | 'error' | 'warning' | 'info'",
|
|
1941
|
+
required: false,
|
|
1942
|
+
defaultValue: "'info'",
|
|
1943
|
+
description: 'Toast variant',
|
|
1944
|
+
},
|
|
1945
|
+
{
|
|
1946
|
+
name: 'duration',
|
|
1947
|
+
type: 'number',
|
|
1948
|
+
required: false,
|
|
1949
|
+
defaultValue: '3000',
|
|
1950
|
+
description: 'Toast duration in milliseconds',
|
|
1951
|
+
},
|
|
1952
|
+
],
|
|
1953
|
+
examples: [
|
|
1954
|
+
{
|
|
1955
|
+
name: 'Basic Toast',
|
|
1956
|
+
code: '<SsmToast message="Operation completed" variant="success" />',
|
|
1957
|
+
description: 'Basic toast notification',
|
|
1958
|
+
},
|
|
1959
|
+
],
|
|
1960
|
+
},
|
|
1961
|
+
{
|
|
1962
|
+
name: 'SsmTooltip',
|
|
1963
|
+
description: 'Tooltip component for hover information',
|
|
1964
|
+
category: 'Feedback',
|
|
1965
|
+
importPath: '@dealicious/design-system/src/components/ssm-tooltip',
|
|
1966
|
+
props: [
|
|
1967
|
+
{
|
|
1968
|
+
name: 'content',
|
|
1969
|
+
type: 'string',
|
|
1970
|
+
required: true,
|
|
1971
|
+
description: 'Tooltip content',
|
|
1972
|
+
},
|
|
1973
|
+
{
|
|
1974
|
+
name: 'placement',
|
|
1975
|
+
type: "'top' | 'bottom' | 'left' | 'right'",
|
|
1976
|
+
required: false,
|
|
1977
|
+
defaultValue: "'top'",
|
|
1978
|
+
description: 'Tooltip placement',
|
|
1979
|
+
},
|
|
1980
|
+
],
|
|
1981
|
+
examples: [
|
|
1982
|
+
{
|
|
1983
|
+
name: 'Basic Tooltip',
|
|
1984
|
+
code: '<SsmTooltip content="Help text"><SsmButton>Hover me</SsmButton></SsmTooltip>',
|
|
1985
|
+
description: 'Basic tooltip usage',
|
|
1986
|
+
},
|
|
1987
|
+
],
|
|
1988
|
+
},
|
|
1989
|
+
{
|
|
1990
|
+
name: 'EnvBadge',
|
|
1991
|
+
description: 'Environment badge component',
|
|
1992
|
+
category: 'Data Display',
|
|
1993
|
+
importPath: '@dealicious/design-system/src/components/env-badge',
|
|
1994
|
+
props: [
|
|
1995
|
+
{
|
|
1996
|
+
name: 'environment',
|
|
1997
|
+
type: "'development' | 'staging' | 'production'",
|
|
1998
|
+
required: true,
|
|
1999
|
+
description: 'Environment type',
|
|
2000
|
+
},
|
|
2001
|
+
],
|
|
2002
|
+
examples: [
|
|
2003
|
+
{
|
|
2004
|
+
name: 'Basic Env Badge',
|
|
2005
|
+
code: '<EnvBadge environment="development" />',
|
|
2006
|
+
description: 'Basic environment badge',
|
|
2007
|
+
},
|
|
2008
|
+
],
|
|
2009
|
+
},
|
|
2010
|
+
];
|
|
2011
|
+
}
|
|
2012
|
+
/**
|
|
2013
|
+
* 프레임워크(React 또는 Vue)에 대해 사용 가능한 구성 요소 가져오기
|
|
2014
|
+
*/
|
|
2015
|
+
async getAvailableComponents(framework) {
|
|
2016
|
+
return framework === 'react' ? this.reactComponents : this.vueComponents;
|
|
2017
|
+
}
|
|
2018
|
+
/**
|
|
2019
|
+
* Figma 컴포넌트(FigmaNode)에 가장 잘 맞는 컴포넌트(DesignSystemComponent) 찾기
|
|
2020
|
+
*/
|
|
2021
|
+
findBestMatch(figmaComponentName, framework) {
|
|
2022
|
+
const components = framework === 'react' ? this.reactComponents : this.vueComponents;
|
|
2023
|
+
// 정규화: ssm- 접두사 제거, 하이픈 제거, 소문자 변환
|
|
2024
|
+
const normalizeName = (name) => {
|
|
2025
|
+
return name
|
|
2026
|
+
.toLowerCase()
|
|
2027
|
+
.replace(/^ssm-/, '') // ssm- 접두사 제거
|
|
2028
|
+
.replace(/^ssm/, '') // ssm 접두사 제거
|
|
2029
|
+
.replace(/-/g, '') // 하이픈 제거
|
|
2030
|
+
.trim();
|
|
2031
|
+
};
|
|
2032
|
+
const normalizedFigmaName = normalizeName(figmaComponentName);
|
|
2033
|
+
// Direct name match (정규화된 이름으로 비교)
|
|
2034
|
+
const directMatch = components.find(comp => {
|
|
2035
|
+
const normalizedCompName = normalizeName(comp.name);
|
|
2036
|
+
return normalizedCompName === normalizedFigmaName;
|
|
2037
|
+
});
|
|
2038
|
+
if (directMatch)
|
|
2039
|
+
return directMatch;
|
|
2040
|
+
// 패턴 기반 유사 매칭
|
|
2041
|
+
const lowerName = normalizedFigmaName;
|
|
2042
|
+
for (const component of components) {
|
|
2043
|
+
const componentName = normalizeName(component.name);
|
|
2044
|
+
// Figma 이름에 컴포넌트 이름이 포함되어 있는지 확인
|
|
2045
|
+
if (lowerName.includes(componentName) || componentName.includes(lowerName)) {
|
|
2046
|
+
return component;
|
|
2047
|
+
}
|
|
2048
|
+
// 일반적인 변형 확인
|
|
2049
|
+
const variations = [
|
|
2050
|
+
componentName + 's', // 복수형
|
|
2051
|
+
componentName.replace('button', 'btn'),
|
|
2052
|
+
componentName.replace('input', 'field'),
|
|
2053
|
+
componentName.replace('card', 'panel'),
|
|
2054
|
+
componentName.replace('modal', 'popup'),
|
|
2055
|
+
componentName.replace('modal', 'dialog'),
|
|
2056
|
+
componentName.replace('textfield', 'textfield'),
|
|
2057
|
+
componentName.replace('textfield', 'input'),
|
|
2058
|
+
componentName.replace('radiogroup', 'radio'),
|
|
2059
|
+
componentName.replace('layerpopup', 'popup'),
|
|
2060
|
+
componentName.replace('layerpopup', 'modal'),
|
|
2061
|
+
componentName.replace('layeralert', 'alert'),
|
|
2062
|
+
];
|
|
2063
|
+
for (const variation of variations) {
|
|
2064
|
+
if (lowerName.includes(variation) || variation.includes(lowerName)) {
|
|
2065
|
+
return component;
|
|
2066
|
+
}
|
|
2067
|
+
}
|
|
2068
|
+
}
|
|
2069
|
+
return null;
|
|
2070
|
+
}
|
|
2071
|
+
/**
|
|
2072
|
+
* 이름으로 컴포넌트 가져오기
|
|
2073
|
+
*/
|
|
2074
|
+
getComponent(name, framework) {
|
|
2075
|
+
const components = framework === 'react' ? this.reactComponents : this.vueComponents;
|
|
2076
|
+
return components.find(comp => comp.name === name) || null;
|
|
2077
|
+
}
|
|
2078
|
+
/**
|
|
2079
|
+
* 카테고리로 컴포넌트 가져오기
|
|
2080
|
+
*/
|
|
2081
|
+
getComponentsByCategory(category, framework) {
|
|
2082
|
+
const components = framework === 'react' ? this.reactComponents : this.vueComponents;
|
|
2083
|
+
return components.filter(comp => comp.category === category);
|
|
2084
|
+
}
|
|
2085
|
+
/**
|
|
2086
|
+
* 모든 가능한 카테고리 가져오기
|
|
2087
|
+
*/
|
|
2088
|
+
getCategories(framework) {
|
|
2089
|
+
const components = framework === 'react' ? this.reactComponents : this.vueComponents;
|
|
2090
|
+
const categories = new Set(components.map(comp => comp.category));
|
|
2091
|
+
return Array.from(categories);
|
|
2092
|
+
}
|
|
2093
|
+
}
|