@ncds/ui-admin 1.6.3 → 1.6.4-alpha.0

package/mcp/data/tab.json

@@ -0,0 +1,122 @@
+{
+  "name": "tab",
+  "description": "NCDS Tab 컴포넌트",
+  "aliases": [],
+  "props": {
+    "activeTab": {
+      "type": "string",
+      "required": false
+    },
+    "badgeInfo": {
+      "type": "string",
+      "required": false
+    },
+    "breakPoint": {
+      "type": "enum",
+      "required": false,
+      "values": ["mobile", "pc"],
+      "default": "pc"
+    },
+    "children": {
+      "type": "string",
+      "required": false
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "fullWidth": {
+      "type": "string",
+      "required": false,
+      "default": false
+    },
+    "id": {
+      "type": "string",
+      "required": false
+    },
+    "isActive": {
+      "type": "string",
+      "required": false,
+      "default": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "menus": {
+      "type": "string",
+      "required": false,
+      "default": "[]"
+    },
+    "onClick": {
+      "type": "string",
+      "required": false
+    },
+    "onClose": {
+      "type": "string",
+      "required": false
+    },
+    "onSelect": {
+      "type": "string",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": ["lg", "md", "sm"],
+      "default": "sm"
+    },
+    "tabButtonType": {
+      "type": "enum",
+      "required": false,
+      "values": ["button-primary", "button-white", "line-vertical", "underline", "underline-fill"]
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": ["button-primary", "button-white", "underline", "underline-fill"],
+      "default": "button-primary"
+    }
+  },
+  "html": {
+    "default": ""
+  },
+  "bemClasses": [
+    "ncua-horizontal-tab",
+    "ncua-horizontal-tab--button-primary",
+    "ncua-horizontal-tab--button-white",
+    "ncua-horizontal-tab--fullWidth",
+    "ncua-horizontal-tab--lg",
+    "ncua-horizontal-tab--line-vertical",
+    "ncua-horizontal-tab--md",
+    "ncua-horizontal-tab--mobile",
+    "ncua-horizontal-tab--pc",
+    "ncua-horizontal-tab--sm",
+    "ncua-horizontal-tab--underline",
+    "ncua-horizontal-tab--underline-fill",
+    "ncua-horizontal-tab__item",
+    "ncua-tab-button",
+    "ncua-tab-close",
+    "ncua-vertical-tab"
+  ],
+  "usage": {
+    "import": "import { Tab } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Tab />",
+      "breakPoint:mobile": "<Tab breakPoint=\"mobile\" />",
+      "breakPoint:pc": "<Tab breakPoint=\"pc\" />",
+      "size:lg": "<Tab size=\"lg\" />",
+      "size:md": "<Tab size=\"md\" />",
+      "size:sm": "<Tab size=\"sm\" />",
+      "tabButtonType:button-primary": "<Tab tabButtonType=\"button-primary\" />",
+      "tabButtonType:button-white": "<Tab tabButtonType=\"button-white\" />",
+      "tabButtonType:line-vertical": "<Tab tabButtonType=\"line-vertical\" />",
+      "tabButtonType:underline": "<Tab tabButtonType=\"underline\" />",
+      "tabButtonType:underline-fill": "<Tab tabButtonType=\"underline-fill\" />",
+      "type:button-primary": "<Tab type=\"button-primary\" />",
+      "type:button-white": "<Tab type=\"button-white\" />",
+      "type:underline": "<Tab type=\"underline\" />",
+      "type:underline-fill": "<Tab type=\"underline-fill\" />"
+    }
+  }
+}

package/mcp/data/tag.json

@@ -0,0 +1,66 @@
+{
+  "name": "tag",
+  "description": "NCDS Tag 컴포넌트",
+  "aliases": [],
+  "props": {
+    "children": {
+      "type": "string",
+      "required": false
+    },
+    "close": {
+      "type": "string",
+      "required": false
+    },
+    "count": {
+      "type": "string",
+      "required": false
+    },
+    "icon": {
+      "type": "string",
+      "required": false
+    },
+    "maxLength": {
+      "type": "string",
+      "required": false,
+      "default": 20
+    },
+    "onButtonClick": {
+      "type": "string",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": ["md", "sm"],
+      "default": "sm"
+    },
+    "text": {
+      "type": "string",
+      "required": true
+    }
+  },
+  "html": {
+    "default": "<span class=\"ncua-tag\"></span>",
+    "size:md": "<span class=\"ncua-tag ncua-tag--md\"></span>",
+    "size:sm": "<span class=\"ncua-tag ncua-tag--sm\"></span>"
+  },
+  "bemClasses": [
+    "ncua-tag",
+    "ncua-tag--md",
+    "ncua-tag--sm",
+    "ncua-tag--truncated",
+    "ncua-tag__close",
+    "ncua-tag__count",
+    "ncua-tag__text",
+    "ncua-tag__tooltip",
+    "ncua-tag__tooltip-content"
+  ],
+  "usage": {
+    "import": "import { Tag } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Tag text=\"\" />",
+      "size:md": "<Tag size=\"md\" text=\"\" />",
+      "size:sm": "<Tag size=\"sm\" text=\"\" />"
+    }
+  }
+}

package/mcp/data/textarea.json

@@ -0,0 +1,88 @@
+{
+  "name": "textarea",
+  "description": "NCDS Textarea 컴포넌트",
+  "aliases": [],
+  "props": {
+    "characterCount": {
+      "type": "string",
+      "required": false
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "destructive": {
+      "type": "string",
+      "required": false
+    },
+    "disabled": {
+      "type": "string",
+      "required": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "required": {
+      "type": "string",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": ["sm", "xs"],
+      "default": "xs"
+    }
+  },
+  "html": {
+    "default": "<div class=\"ncua-input\"></div>",
+    "size:sm": "<div class=\"ncua-input ncua-input--sm\"></div>",
+    "size:xs": "<div class=\"ncua-input ncua-input--xs\"></div>"
+  },
+  "bemClasses": [
+    "ncua-input",
+    "ncua-input--sm",
+    "ncua-input--textarea",
+    "ncua-input--xs",
+    "ncua-input__",
+    "ncua-input__button",
+    "ncua-input__clear",
+    "ncua-input__clear-icon",
+    "ncua-input__content",
+    "ncua-input__content-wrap",
+    "ncua-input__destructive-icon",
+    "ncua-input__field",
+    "ncua-input__field-text-count",
+    "ncua-input__field-text-count-current",
+    "ncua-input__help-icon",
+    "ncua-input__hint-text",
+    "ncua-input__icon-wrap",
+    "ncua-input__icon-wrap ncua-input__right-icon",
+    "ncua-input__label",
+    "ncua-input__leading-text",
+    "ncua-input__leading-text-wrap",
+    "ncua-input__number",
+    "ncua-input__password-icon",
+    "ncua-input__right-icon",
+    "ncua-input__stepper-button-group",
+    "ncua-input__text-count",
+    "ncua-input__text-count-text",
+    "ncua-input__text-count-text-count",
+    "ncua-input__text-count-wrap",
+    "ncua-input__textarea",
+    "ncua-input__trailing-button",
+    "ncua-input__validation-icon"
+  ],
+  "usage": {
+    "import": "import { Textarea } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Textarea />",
+      "size:sm": "<Textarea size=\"sm\" />",
+      "size:xs": "<Textarea size=\"xs\" />"
+    }
+  }
+}

package/mcp/data/toggle.json

@@ -0,0 +1,59 @@
+{
+  "name": "toggle",
+  "description": "NCDS Toggle 컴포넌트",
+  "aliases": [],
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "disabled": {
+      "type": "string",
+      "required": false,
+      "default": false
+    },
+    "onChange": {
+      "type": "string",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": ["md", "sm"],
+      "default": "md"
+    },
+    "supportText": {
+      "type": "string",
+      "required": false,
+      "default": ""
+    },
+    "text": {
+      "type": "string",
+      "required": false,
+      "default": ""
+    }
+  },
+  "html": {
+    "default": "<label class=\"ncua-toggle ncua-toggle--md\"><input type=\"checkbox\" class=\"ncua-toggle__input\"/><span class=\"ncua-toggle__switch\"><span class=\"ncua-toggle__slider\"></span></span></label>"
+  },
+  "bemClasses": [
+    "ncua-toggle",
+    "ncua-toggle--disabled",
+    "ncua-toggle--md",
+    "ncua-toggle--sm",
+    "ncua-toggle__input",
+    "ncua-toggle__slider",
+    "ncua-toggle__support-text",
+    "ncua-toggle__switch",
+    "ncua-toggle__text",
+    "ncua-toggle__text-wrapper"
+  ],
+  "usage": {
+    "import": "import { Toggle } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Toggle />",
+      "size:md": "<Toggle size=\"md\" />",
+      "size:sm": "<Toggle size=\"sm\" />"
+    }
+  }
+}

package/mcp/data/tooltip.json

@@ -0,0 +1,123 @@
+{
+  "name": "tooltip",
+  "description": "NCDS Tooltip 컴포넌트",
+  "aliases": [],
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "content": {
+      "type": "string",
+      "required": false
+    },
+    "hideArrow": {
+      "type": "string",
+      "required": false,
+      "default": false
+    },
+    "iconColor": {
+      "type": "string",
+      "required": false,
+      "default": "var(--gray-300)"
+    },
+    "iconStyle": {
+      "type": "enum",
+      "required": false,
+      "values": ["alert-circle", "help-circle"],
+      "default": "help-circle"
+    },
+    "iconType": {
+      "type": "enum",
+      "required": false,
+      "values": ["fill", "stroke"],
+      "default": "stroke"
+    },
+    "position": {
+      "type": "enum",
+      "required": false,
+      "values": ["auto", "bottom", "bottom-left", "bottom-right", "left", "right", "top", "top-left", "top-right"],
+      "default": "auto"
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": ["md", "sm"],
+      "default": "sm"
+    },
+    "title": {
+      "type": "string",
+      "required": false
+    },
+    "tooltipType": {
+      "type": "enum",
+      "required": false,
+      "values": ["black", "white"],
+      "default": "black"
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": ["long", "short"],
+      "default": "short"
+    }
+  },
+  "html": {
+    "default": "<span class=\"ncua-tooltip ncua-tooltip--sm ncua-tooltip--short ncua-tooltip--stroke ncua-tooltip--auto\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"var(--gray-300)\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg><span class=\"ncua-tooltip__bg ncua-tooltip__bg--black ncua-tooltip__bg--bottom\"><span class=\"ncua-tooltip__content\">툴팁 내용</span></span></span>"
+  },
+  "bemClasses": [
+    "ncua-tooltip",
+    "ncua-tooltip--alert-circle",
+    "ncua-tooltip--auto",
+    "ncua-tooltip--black",
+    "ncua-tooltip--bottom",
+    "ncua-tooltip--bottom-left",
+    "ncua-tooltip--bottom-right",
+    "ncua-tooltip--fill",
+    "ncua-tooltip--help-circle",
+    "ncua-tooltip--hidden-arrow",
+    "ncua-tooltip--left",
+    "ncua-tooltip--long",
+    "ncua-tooltip--md",
+    "ncua-tooltip--right",
+    "ncua-tooltip--short",
+    "ncua-tooltip--sm",
+    "ncua-tooltip--stroke",
+    "ncua-tooltip--top",
+    "ncua-tooltip--top-left",
+    "ncua-tooltip--top-right",
+    "ncua-tooltip--white",
+    "ncua-tooltip__bg",
+    "ncua-tooltip__bg--force-hidden",
+    "ncua-tooltip__bg--measuring",
+    "ncua-tooltip__bg--visible",
+    "ncua-tooltip__close-button",
+    "ncua-tooltip__content",
+    "ncua-tooltip__title"
+  ],
+  "usage": {
+    "import": "import { Tooltip } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Tooltip />",
+      "iconStyle:alert-circle": "<Tooltip iconStyle=\"alert-circle\" />",
+      "iconStyle:help-circle": "<Tooltip iconStyle=\"help-circle\" />",
+      "iconType:fill": "<Tooltip iconType=\"fill\" />",
+      "iconType:stroke": "<Tooltip iconType=\"stroke\" />",
+      "position:auto": "<Tooltip position=\"auto\" />",
+      "position:bottom": "<Tooltip position=\"bottom\" />",
+      "position:bottom-left": "<Tooltip position=\"bottom-left\" />",
+      "position:bottom-right": "<Tooltip position=\"bottom-right\" />",
+      "position:left": "<Tooltip position=\"left\" />",
+      "position:right": "<Tooltip position=\"right\" />",
+      "position:top": "<Tooltip position=\"top\" />",
+      "position:top-left": "<Tooltip position=\"top-left\" />",
+      "position:top-right": "<Tooltip position=\"top-right\" />",
+      "size:md": "<Tooltip size=\"md\" />",
+      "size:sm": "<Tooltip size=\"sm\" />",
+      "tooltipType:black": "<Tooltip tooltipType=\"black\" />",
+      "tooltipType:white": "<Tooltip tooltipType=\"white\" />",
+      "type:long": "<Tooltip type=\"long\" />",
+      "type:short": "<Tooltip type=\"short\" />"
+    }
+  }
+}

package/mcp/data/vertical-tab.json

@@ -0,0 +1,64 @@
+{
+  "name": "vertical-tab",
+  "description": "NCDS Vertical Tab 컴포넌트",
+  "aliases": [],
+  "props": {
+    "activeTab": {
+      "type": "string",
+      "required": false
+    },
+    "breakPoint": {
+      "type": "enum",
+      "required": false,
+      "values": ["mobile", "pc"],
+      "default": "pc"
+    },
+    "menus": {
+      "type": "string",
+      "required": false,
+      "default": "[]"
+    },
+    "onSelect": {
+      "type": "string",
+      "required": false
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": ["button-primary", "button-white", "line-vertical"],
+      "default": "button-primary"
+    }
+  },
+  "html": {
+    "default": "<div class=\"ncua-horizontal-tab\"></div>",
+    "breakPoint:mobile": "<div class=\"ncua-horizontal-tab ncua-horizontal-tab--mobile\"></div>",
+    "breakPoint:pc": "<div class=\"ncua-horizontal-tab ncua-horizontal-tab--pc\"></div>",
+    "type:button-primary": "<div class=\"ncua-horizontal-tab ncua-horizontal-tab--button-primary\"></div>",
+    "type:button-white": "<div class=\"ncua-horizontal-tab ncua-horizontal-tab--button-white\"></div>",
+    "type:line-vertical": "<div class=\"ncua-horizontal-tab ncua-horizontal-tab--line-vertical\"></div>"
+  },
+  "bemClasses": [
+    "ncua-horizontal-tab",
+    "ncua-horizontal-tab--button-primary",
+    "ncua-horizontal-tab--button-white",
+    "ncua-horizontal-tab--fullWidth",
+    "ncua-horizontal-tab--line-vertical",
+    "ncua-horizontal-tab--mobile",
+    "ncua-horizontal-tab--pc",
+    "ncua-horizontal-tab__item",
+    "ncua-tab-button",
+    "ncua-tab-close",
+    "ncua-vertical-tab"
+  ],
+  "usage": {
+    "import": "import { VerticalTab } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<VerticalTab />",
+      "breakPoint:mobile": "<VerticalTab breakPoint=\"mobile\" />",
+      "breakPoint:pc": "<VerticalTab breakPoint=\"pc\" />",
+      "type:button-primary": "<VerticalTab type=\"button-primary\" />",
+      "type:button-white": "<VerticalTab type=\"button-white\" />",
+      "type:line-vertical": "<VerticalTab type=\"line-vertical\" />"
+    }
+  }
+}

package/mcp/templates/.mcp.json.example

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "ncds-ui-admin": {
+      "command": "node",
+      "args": ["./node_modules/@ncds/ui-admin/mcp/bin/server.mjs"]
+    }
+  }
+}

package/mcp/templates/README.md

@@ -0,0 +1,31 @@
+# NCDS MCP 서버 설정 템플릿
+
+## 빠른 시작
+
+프로젝트 루트에 `.mcp.json` 파일을 생성하고 아래 내용을 추가합니다.
+
+```json
+{
+  "mcpServers": {
+    "ncds-ui-admin": {
+      "command": "node",
+      "args": ["./node_modules/@ncds/ui-admin/mcp/bin/server.mjs"]
+    }
+  }
+}
+```
+
+또는 이 디렉토리의 `.mcp.json.example` 파일을 프로젝트 루트로 복사합니다.
+
+```bash
+cp node_modules/@ncds/ui-admin/mcp/templates/.mcp.json.example .mcp.json
+```
+
+## 요구사항
+
+- Node.js 20 이상
+- `@ncds/ui-admin` 설치 완료
+
+## 확인 방법
+
+설정 후 Claude Desktop 또는 Claude Code를 재시작하면 `ncds-ui-admin` MCP 서버가 자동으로 인식됩니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.6.3",
+  "version": "1.6.4-alpha.0",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -19,7 +19,10 @@
     "publish:npm": "yarn build:npm && npm publish --access=public",
     "publish:cdn": "yarn build:cdn && node scripts/publish-cdn.js",
     "start": "webpack --node-env development",
-    "tsc": "tsc --pretty --listFiles"
+    "tsc": "tsc --pretty --listFiles",
+    "mcp:extract": "tsx scripts/extract-mcp-data.ts",
+    "mcp:render": "tsx scripts/render-mcp-html.ts",
+    "mcp:build": "tsc --project mcp/tsconfig.json"
   },
   "author": {
     "name": "nhn-commerce-fe",
@@ -44,11 +47,25 @@
       "react-app"
     ]
   },
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./mcp": "./mcp/bin/server.mjs"
+  },
   "files": [
     "dist",
+    "mcp/bin",
+    "mcp/data",
+    "mcp/templates",
     "package.json",
     "README.md"
   ],
+  "engines": {
+    "node": ">=20"
+  },
   "keywords": [
     "ncds",
     "nhn-commerce",
@@ -63,6 +80,7 @@
   },
   "private": false,
   "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.1",
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",
     "@ncds/ui-admin-icon": "0.1.6",
@@ -71,8 +89,10 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "moment": "^2.30.1",
+    "node-html-parser": "^7.1.0",
     "react-flatpickr": "^4.0.10",
-    "swiper": "^11.1.1"
+    "swiper": "^11.1.1",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.9",
@@ -109,6 +129,7 @@
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.4",
+    "ts-morph": "^27.0.2",
     "ts-node": "^10.9.2",
     "tsconfig": "*",
     "typescript": "5.0.4",