@ncds/ui-admin-mcp 1.0.0-alpha.2 → 1.0.0-alpha.20

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 (100) hide show
  1. package/bin/components.bundle.js +15 -19
  2. package/bin/definitions/external/editor.d.ts +50 -0
  3. package/bin/definitions/external/editor.js +53 -0
  4. package/bin/definitions/external/step-guide.d.ts +61 -0
  5. package/bin/definitions/external/step-guide.js +52 -0
  6. package/bin/definitions/instructions.md +194 -10
  7. package/bin/definitions/js-api.json +352 -0
  8. package/bin/definitions/rules.json +36 -4
  9. package/bin/definitions/tool-definitions.json +33 -9
  10. package/bin/overrides/composition.json +2500 -0
  11. package/bin/server.d.ts +5 -0
  12. package/bin/server.js +97 -33
  13. package/bin/server.mjs +0 -0
  14. package/bin/tools/external/editor.d.ts +18 -0
  15. package/bin/tools/external/editor.js +88 -0
  16. package/bin/tools/external/step-guide.d.ts +19 -0
  17. package/bin/tools/external/step-guide.js +79 -0
  18. package/bin/tools/getComponentProps.d.ts +3 -0
  19. package/bin/tools/getComponentProps.js +12 -3
  20. package/bin/tools/listCompositionOverrides.d.ts +61 -0
  21. package/bin/tools/listCompositionOverrides.js +156 -0
  22. package/bin/tools/ping.d.ts +1 -1
  23. package/bin/tools/renderToHtml.d.ts +38 -7
  24. package/bin/tools/renderToHtml.js +785 -110
  25. package/bin/tools/searchComponent.d.ts +5 -0
  26. package/bin/tools/searchComponent.js +3 -3
  27. package/bin/tools/validateHtml.d.ts +8 -6
  28. package/bin/tools/validateHtml.js +74 -6
  29. package/bin/types.d.ts +60 -1
  30. package/bin/utils/bemValidator.d.ts +16 -8
  31. package/bin/utils/bemValidator.js +16 -4
  32. package/bin/utils/compliance.d.ts +7 -6
  33. package/bin/utils/compliance.js +8 -4
  34. package/bin/utils/dataLoader.d.ts +43 -14
  35. package/bin/utils/dataLoader.js +125 -22
  36. package/bin/utils/domEnvironment.js +51 -0
  37. package/bin/utils/fuzzyMatch.d.ts +4 -0
  38. package/bin/utils/fuzzyMatch.js +13 -3
  39. package/bin/utils/logger.d.ts +5 -5
  40. package/bin/utils/logger.js +5 -5
  41. package/bin/utils/response.d.ts +4 -2
  42. package/bin/utils/response.js +15 -4
  43. package/bin/utils/tokenValidator.d.ts +4 -3
  44. package/bin/utils/tokenValidator.js +13 -11
  45. package/bin/version.d.ts +4 -2
  46. package/bin/version.js +4 -2
  47. package/data/_icons.json +357 -2
  48. package/data/_meta.json +4 -5
  49. package/data/_tokens.json +8 -8
  50. package/data/badge-group.json +181 -4
  51. package/data/badge.json +146 -14
  52. package/data/block-container.json +95 -0
  53. package/data/block-header.json +208 -0
  54. package/data/bread-crumb.json +38 -2
  55. package/data/button-group.json +59 -0
  56. package/data/button.json +124 -1
  57. package/data/carousel-arrow.json +6 -11
  58. package/data/carousel-number-group.json +2 -12
  59. package/data/checkbox.json +1 -1
  60. package/data/combo-box.json +32 -8
  61. package/data/data-grid.json +240 -0
  62. package/data/date-picker.json +22 -2
  63. package/data/divider.json +1 -1
  64. package/data/dot.json +2 -2
  65. package/data/dropdown.json +187 -20
  66. package/data/editor.json +85 -0
  67. package/data/empty-state.json +168 -3
  68. package/data/featured-icon.json +20 -5
  69. package/data/file-input.json +176 -10
  70. package/data/horizontal-tab.json +219 -3
  71. package/data/image-file-input.json +176 -10
  72. package/data/input-base.json +165 -4
  73. package/data/modal.json +266 -5
  74. package/data/notification.json +56 -40
  75. package/data/number-input.json +164 -4
  76. package/data/page-title.json +135 -0
  77. package/data/pagination.json +8 -4
  78. package/data/password-input.json +252 -13
  79. package/data/progress-bar.json +28 -8
  80. package/data/progress-circle.json +9 -6
  81. package/data/radio.json +4 -3
  82. package/data/range-date-picker-with-buttons.json +187 -7
  83. package/data/range-date-picker.json +186 -6
  84. package/data/select-box.json +48 -16
  85. package/data/select.json +35 -25
  86. package/data/slider.json +1 -1
  87. package/data/spinner.json +3 -4
  88. package/data/step-guide.json +130 -0
  89. package/data/switch.json +66 -6
  90. package/data/table.json +293 -0
  91. package/data/tag.json +68 -6
  92. package/data/textarea.json +1 -1
  93. package/data/toggle.json +2 -2
  94. package/data/tooltip.json +16 -3
  95. package/data/vertical-tab.json +220 -3
  96. package/package.json +27 -25
  97. package/bin/instructions.d.ts +0 -1
  98. package/bin/instructions.js +0 -14
  99. package/bin/tools/getComponentHtml.d.ts +0 -3
  100. package/bin/tools/getComponentHtml.js +0 -30
package/data/toggle.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "exportName": "Toggle",
4
4
  "importPath": "@ncds/ui-admin",
5
5
  "jsRequired": false,
6
- "category": "input",
6
+ "category": "forms-and-input",
7
7
  "description": "Toggle은 단일 기능의 활성/비활성 상태를 즉시 전환하는 컨트롤입니다. 설정 값의 ON/OFF, 수신 여부, 사용 여부 등 즉각 반영되는 상태 전환 UI에 사용합니다.",
8
8
  "aliases": [
9
9
  "Toggle",
@@ -65,7 +65,7 @@
65
65
  "md",
66
66
  "sm"
67
67
  ],
68
- "default": "md"
68
+ "default": "sm"
69
69
  },
70
70
  "supportText": {
71
71
  "type": "string",
package/data/tooltip.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "exportName": "Tooltip",
4
4
  "importPath": "@ncds/ui-admin",
5
5
  "jsRequired": true,
6
- "category": "overlay",
6
+ "category": "overlays",
7
7
  "description": "Tooltip은 항목, 데이터, 기능 등에 대해 추가 설명이 필요한 경우 보조 정보를 제공하는 말풍선 내 UI 컴포넌트입니다.",
8
8
  "aliases": [
9
9
  "Tooltip",
@@ -50,6 +50,15 @@
50
50
  "type": "ReactNode",
51
51
  "required": false
52
52
  },
53
+ "disablePortal": {
54
+ "type": "boolean",
55
+ "required": false,
56
+ "default": false
57
+ },
58
+ "forceVisible": {
59
+ "type": "boolean",
60
+ "required": false
61
+ },
53
62
  "hideArrow": {
54
63
  "type": "boolean",
55
64
  "required": false,
@@ -114,7 +123,7 @@
114
123
  "black",
115
124
  "white"
116
125
  ],
117
- "default": "black"
126
+ "default": "white"
118
127
  },
119
128
  "type": {
120
129
  "type": "enum",
@@ -124,6 +133,10 @@
124
133
  "short"
125
134
  ],
126
135
  "default": "short"
136
+ },
137
+ "zIndex": {
138
+ "type": "number",
139
+ "required": false
127
140
  }
128
141
  },
129
142
  "html": {},
@@ -149,9 +162,9 @@
149
162
  "ncua-tooltip--top-left",
150
163
  "ncua-tooltip--top-right",
151
164
  "ncua-tooltip--white",
165
+ "ncua-tooltip-panel",
152
166
  "ncua-tooltip__bg",
153
167
  "ncua-tooltip__bg--force-hidden",
154
- "ncua-tooltip__bg--measuring",
155
168
  "ncua-tooltip__bg--visible",
156
169
  "ncua-tooltip__close-button",
157
170
  "ncua-tooltip__content",
@@ -2,7 +2,7 @@
2
2
  "name": "vertical-tab",
3
3
  "exportName": "VerticalTab",
4
4
  "importPath": "@ncds/ui-admin",
5
- "jsRequired": true,
5
+ "jsRequired": false,
6
6
  "category": "navigation",
7
7
  "description": "VerticalTab은 동일한 계층 구조의 관련 콘텐츠를 그룹화하여 동일 화면 내에서 콘텐츠를 전환하는 내비게이션 UI 컴포넌트입니다.",
8
8
  "aliases": [
@@ -57,9 +57,226 @@
57
57
  "default": "pc"
58
58
  },
59
59
  "menus": {
60
- "type": "string",
60
+ "type": "object",
61
61
  "required": false,
62
- "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/tab/TabButton\").TabButtonProps[] | undefined"
62
+ "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/tab/TabButton\").TabButtonProps[] | undefined",
63
+ "properties": {
64
+ "id": {
65
+ "type": "string",
66
+ "required": false
67
+ },
68
+ "label": {
69
+ "type": "string",
70
+ "required": false
71
+ },
72
+ "size": {
73
+ "type": "enum",
74
+ "required": false,
75
+ "values": [
76
+ "lg",
77
+ "md",
78
+ "sm"
79
+ ]
80
+ },
81
+ "tabButtonType": {
82
+ "type": "enum",
83
+ "required": false,
84
+ "values": [
85
+ "button-primary",
86
+ "button-white",
87
+ "line-vertical",
88
+ "underline",
89
+ "underline-fill"
90
+ ]
91
+ },
92
+ "isActive": {
93
+ "type": "boolean",
94
+ "required": false
95
+ },
96
+ "badgeInfo": {
97
+ "type": "object",
98
+ "required": false,
99
+ "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/feedback-and-status/badge/Badge\").BadgeProps | undefined",
100
+ "properties": {
101
+ "label": {
102
+ "type": "string",
103
+ "required": true
104
+ },
105
+ "type": {
106
+ "type": "enum",
107
+ "required": false,
108
+ "values": [
109
+ "pill-dark-color",
110
+ "pill-outline"
111
+ ]
112
+ },
113
+ "color": {
114
+ "type": "enum",
115
+ "required": false,
116
+ "values": [
117
+ "blue",
118
+ "disabled",
119
+ "error",
120
+ "neutral",
121
+ "pink",
122
+ "success",
123
+ "warning"
124
+ ]
125
+ },
126
+ "className": {
127
+ "type": "string",
128
+ "required": false
129
+ },
130
+ "leadingIcon": {
131
+ "type": "object",
132
+ "required": false,
133
+ "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
134
+ "properties": {
135
+ "type": {
136
+ "type": "string",
137
+ "required": true,
138
+ "rawType": "\"icon\""
139
+ },
140
+ "icon": {
141
+ "type": "function",
142
+ "required": false,
143
+ "semantic": "icon-component"
144
+ },
145
+ "color": {
146
+ "type": "enum",
147
+ "required": false,
148
+ "values": [
149
+ "black",
150
+ "blue500",
151
+ "blue600",
152
+ "currentColor",
153
+ "gray100",
154
+ "gray200",
155
+ "gray300",
156
+ "gray400",
157
+ "gray500",
158
+ "gray600",
159
+ "gray700",
160
+ "green500",
161
+ "green600",
162
+ "orange500",
163
+ "orange600",
164
+ "pink100",
165
+ "pink600",
166
+ "red500",
167
+ "red600",
168
+ "secondary-gray-blue-100",
169
+ "secondary-gray-blue-200",
170
+ "secondary-gray-blue-300",
171
+ "secondary-gray-blue-400",
172
+ "secondary-gray-blue-450",
173
+ "secondary-gray-blue-50",
174
+ "secondary-gray-blue-500",
175
+ "secondary-gray-blue-600",
176
+ "secondary-gray-blue-700",
177
+ "violet300",
178
+ "violet600",
179
+ "white",
180
+ "yellow600"
181
+ ]
182
+ },
183
+ "size": {
184
+ "type": "number",
185
+ "required": false
186
+ },
187
+ "children": {
188
+ "type": "ReactNode",
189
+ "required": false
190
+ }
191
+ }
192
+ },
193
+ "trailingIcon": {
194
+ "type": "object",
195
+ "required": false,
196
+ "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
197
+ "properties": {
198
+ "type": {
199
+ "type": "string",
200
+ "required": true,
201
+ "rawType": "\"icon\""
202
+ },
203
+ "icon": {
204
+ "type": "function",
205
+ "required": false,
206
+ "semantic": "icon-component"
207
+ },
208
+ "color": {
209
+ "type": "enum",
210
+ "required": false,
211
+ "values": [
212
+ "black",
213
+ "blue500",
214
+ "blue600",
215
+ "currentColor",
216
+ "gray100",
217
+ "gray200",
218
+ "gray300",
219
+ "gray400",
220
+ "gray500",
221
+ "gray600",
222
+ "gray700",
223
+ "green500",
224
+ "green600",
225
+ "orange500",
226
+ "orange600",
227
+ "pink100",
228
+ "pink600",
229
+ "red500",
230
+ "red600",
231
+ "secondary-gray-blue-100",
232
+ "secondary-gray-blue-200",
233
+ "secondary-gray-blue-300",
234
+ "secondary-gray-blue-400",
235
+ "secondary-gray-blue-450",
236
+ "secondary-gray-blue-50",
237
+ "secondary-gray-blue-500",
238
+ "secondary-gray-blue-600",
239
+ "secondary-gray-blue-700",
240
+ "violet300",
241
+ "violet600",
242
+ "white",
243
+ "yellow600"
244
+ ]
245
+ },
246
+ "size": {
247
+ "type": "number",
248
+ "required": false
249
+ },
250
+ "children": {
251
+ "type": "ReactNode",
252
+ "required": false
253
+ }
254
+ }
255
+ },
256
+ "size": {
257
+ "type": "enum",
258
+ "required": false,
259
+ "values": [
260
+ "md",
261
+ "sm",
262
+ "xs"
263
+ ]
264
+ }
265
+ }
266
+ },
267
+ "className": {
268
+ "type": "string",
269
+ "required": false
270
+ },
271
+ "children": {
272
+ "type": "ReactNode",
273
+ "required": false
274
+ },
275
+ "onClick": {
276
+ "type": "function",
277
+ "required": false
278
+ }
279
+ }
63
280
  },
64
281
  "onSelect": {
65
282
  "type": "function",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ncds/ui-admin-mcp",
3
- "version": "1.0.0-alpha.2",
3
+ "version": "1.0.0-alpha.20",
4
4
  "description": "NCDS UI Admin MCP 서버 — AI 에이전트가 NCUA 컴포넌트를 조회하고 HTML을 검증할 수 있는 MCP 서버",
5
5
  "bin": {
6
6
  "ncua-mcp": "./bin/server.mjs"
@@ -19,12 +19,15 @@
19
19
  "extract:icons": "tsx scripts/extract-icons.ts",
20
20
  "extract:tokens": "tsx scripts/extract-design-tokens.ts",
21
21
  "generate:cdn-meta": "tsx scripts/generate-cdn-meta.ts",
22
+ "generate:version-ts": "tsx scripts/generate-version-ts.ts",
22
23
  "build:bundle": "tsx scripts/build-bundle.ts",
23
- "build:server": "tsc --project tsconfig.json && rm -rf bin/definitions && cp -r src/definitions bin/definitions",
24
- "build": "yarn extract && yarn extract:icons && yarn extract:tokens && yarn generate:cdn-meta && yarn build:bundle && yarn build:server",
24
+ "build:server": "mkdir -p bin && rm -rf bin/definitions bin/overrides && cp -r src/definitions bin/definitions && cp -r src/overrides bin/overrides && find bin/definitions -name '*.ts' -delete && tsc --project tsconfig.json",
25
+ "build": "pnpm extract && pnpm extract:icons && pnpm extract:tokens && pnpm generate:cdn-meta && pnpm generate:version-ts && pnpm build:bundle && pnpm build:server",
26
+ "check-meta": "tsx scripts/check-meta-coherence.ts",
25
27
  "test": "vitest run --config vitest.config.ts",
26
28
  "test:coverage": "vitest run --coverage --config vitest.config.ts",
27
- "publish:npm": "npm publish --access=public"
29
+ "publish:npm": "pnpm run build && npm publish --access=public",
30
+ "publish:npm:alpha": "pnpm run build && npm publish --access=public --tag alpha"
28
31
  },
29
32
  "keywords": [
30
33
  "ncds",
@@ -36,36 +39,35 @@
36
39
  "license": "SEE LICENSE IN LICENSE",
37
40
  "private": false,
38
41
  "dependencies": {
42
+ "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
43
+ "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
44
+ "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
45
+ "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
39
46
  "@modelcontextprotocol/sdk": "^1.27.1",
47
+ "@ncds/ui-admin-icon": "0.1.9",
48
+ "classnames": "2.5.1",
49
+ "dompurify": "3.4.1",
50
+ "flatpickr": "4.6.13",
40
51
  "jsdom": "^26.1.0",
52
+ "lodash": "4.18.1",
53
+ "lodash-es": "4.18.1",
54
+ "moment": "2.30.1",
41
55
  "node-html-parser": "^7.1.0",
42
56
  "react": "^18.2.0",
43
57
  "react-dom": "^18.2.0",
58
+ "react-flatpickr": "4.0.11",
59
+ "swiper": "12.1.3",
44
60
  "zod": "^4.3.6"
45
61
  },
46
- "peerDependencies": {
47
- "flatpickr": ">=4.6.0",
48
- "lodash-es": ">=4.17.0",
49
- "moment": ">=2.30.0",
50
- "swiper": ">=11.0.0"
51
- },
52
- "peerDependenciesMeta": {
53
- "flatpickr": {
54
- "optional": true
55
- },
56
- "lodash-es": {
57
- "optional": true
58
- },
59
- "moment": {
60
- "optional": true
61
- },
62
- "swiper": {
63
- "optional": true
64
- }
65
- },
66
62
  "devDependencies": {
63
+ "@ncds/ui-admin": "workspace:*",
64
+ "@types/lodash": "^4.17.24",
67
65
  "@types/node": "^25.5.0",
68
66
  "@types/react": "^18.3.20",
69
- "ts-morph": "^27.0.2"
67
+ "esbuild": "^0.28.0",
68
+ "ts-morph": "^27.0.2",
69
+ "tsx": "^4.21.0",
70
+ "typescript": "5.9.3",
71
+ "vitest": "^4.1.4"
70
72
  }
71
73
  }
@@ -1 +0,0 @@
1
- export declare const INSTRUCTIONS: string;
@@ -1,14 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.INSTRUCTIONS = void 0;
7
- /**
8
- * AI 에이전트가 MCP 서버 연결 시 자동으로 수신하는 필수 지침.
9
- * definitions/instructions.md에서 로드한다.
10
- */
11
- const path_1 = __importDefault(require("path"));
12
- const fs_1 = __importDefault(require("fs"));
13
- const INSTRUCTIONS_PATH = path_1.default.resolve(__dirname, 'definitions', 'instructions.md');
14
- exports.INSTRUCTIONS = fs_1.default.readFileSync(INSTRUCTIONS_PATH, 'utf-8').trim();
@@ -1,3 +0,0 @@
1
- import type { ComponentData } from '../types.js';
2
- import { type McpToolResponse } from '../utils/response.js';
3
- export declare const getComponentHtml: (componentMap: Map<string, ComponentData>, name: string, variant?: Record<string, string>) => McpToolResponse;
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getComponentHtml = void 0;
4
- /**
5
- * get_component_html tool — 컴포넌트 HTML 스니펫 반환 (순수 함수)
6
- */
7
- const dataLoader_js_1 = require("../utils/dataLoader.js");
8
- const response_js_1 = require("../utils/response.js");
9
- /** default HTML에서 태그명 추출 */
10
- const extractTag = (defaultHtml) => {
11
- const match = defaultHtml.match(/^<(\w+)/);
12
- return match ? match[1] : 'div';
13
- };
14
- const getComponentHtml = (componentMap, name, variant) => {
15
- const normalized = (0, response_js_1.normalizeName)(name);
16
- const component = (0, dataLoader_js_1.getComponent)(componentMap, normalized);
17
- if (!component)
18
- return (0, response_js_1.componentNotFoundResponse)(normalized);
19
- if (!variant || Object.keys(variant).length === 0) {
20
- return (0, response_js_1.successResponse)(component.html);
21
- }
22
- const rootClass = component.bemClasses.find((c) => !c.includes('--') && !c.includes('__')) ?? `ncua-${normalized}`;
23
- const tag = extractTag(component.html.default);
24
- const modifiers = Object.values(variant).map((v) => `${rootClass}--${v}`);
25
- const classes = [rootClass, ...modifiers].join(' ');
26
- const isVoid = /^<\w+\s[^>]*\/>$/.test(component.html.default);
27
- const html = isVoid ? `<${tag} class="${classes}" />` : `<${tag} class="${classes}"></${tag}>`;
28
- return (0, response_js_1.successResponse)({ variant, html });
29
- };
30
- exports.getComponentHtml = getComponentHtml;