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

package/data/data-grid.json

@@ -0,0 +1,240 @@
+{
+  "name": "data-grid",
+  "exportName": "DataGrid",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "data-display",
+  "description": "DataGrid는 관리자 화면에서 대량의 데이터를 테이블 형태로 조회·관리하기 위한 핵심 컴포넌트입니다. 조회 결과 리스트, 일반 가로형·세로형 테이블로 구분되며, Header·데이터 필드·선택·액션·필터·정렬·페이지네이션·검색결과 영역 등으로 구성됩니다.",
+  "aliases": [
+    "DataGrid",
+    "데이터그리드",
+    "테이블",
+    "Table",
+    "Grid",
+    "조회결과",
+    "가로형",
+    "세로형",
+    "Header",
+    "Pagination",
+    "Filter",
+    "Sort",
+    "Action Button",
+    "Row Selection",
+    "Reorder",
+    "Expand",
+    "Collapse",
+    "Empty State",
+    "Badge",
+    "Checkbox",
+    "DataGrid.SearchFilter",
+    "DataGrid.Summary",
+    "DataGrid.FilterBar",
+    "DataGrid.ActionBar",
+    "DataGrid.Table",
+    "DataGrid.Pagination",
+    "variant",
+    "search-result",
+    "horizontal",
+    "position",
+    "align",
+    "fixedHeader",
+    "maxHeight",
+    "hoverable",
+    "selectable",
+    "NCDS",
+    "가로스크롤",
+    "horizontal scroll",
+    "scrollX",
+    "overflow-x",
+    "column min-width",
+    "셀 최소 너비",
+    "셀 최소 글자수",
+    "1140",
+    "table min-width",
+    "줄바꿈",
+    "word-break",
+    "콘텐츠 타입별 차등",
+    "2단 wrapper",
+    "Portal",
+    "Floating UI",
+    "스크롤 컨테이너",
+    "scrollbar token",
+    "Modal DataGrid 예외"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "DataGrid는 반드시 Block 또는 Tab 구조 내에 포함되어야 하며, Block > 세부항목 내부에 Table 구조를 중첩하는 것은 지양한다 (5개 이하 정보 제공 시에만 예외 허용)",
+    "10개 이상 데이터 관리 화면에서 적용",
+    "관리자가 데이터를 조작하는 화면",
+    "대량 데이터 일괄 처리 화면"
+  ],
+  "forbiddenRules": [
+    "블록 내부 중첩 테이블 남발 금지",
+    "▲▼ 형태 정렬 UI 사용 금지",
+    "과도한 Badge/Icon 사용 금지",
+    "Row Height 임의 수정 금지",
+    "프로젝트별 임의 컬럼 정렬 변경 금지"
+  ],
+  "seeAlso": [
+    "table",
+    "checkbox",
+    "radio",
+    "pagination",
+    "badge",
+    "empty-state",
+    "button",
+    "block-container"
+  ],
+  "htmlElement": "div",
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": true
+    },
+    "variant": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "horizontal",
+        "search-result"
+      ],
+      "default": "search-result"
+    }
+  },
+  "subComponents": {
+    "DataGrid.SearchFilter": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        }
+      }
+    },
+    "DataGrid.Summary": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        }
+      }
+    },
+    "DataGrid.FilterBar": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        }
+      }
+    },
+    "DataGrid.ActionBar": {
+      "props": {
+        "align": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "left",
+            "right",
+            "space-between"
+          ],
+          "default": "space-between"
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "position": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "bottom",
+            "top"
+          ],
+          "default": "top"
+        }
+      }
+    },
+    "DataGrid.Table": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "fixedHeader": {
+          "type": "boolean",
+          "required": false
+        },
+        "horizontalScroll": {
+          "type": "boolean",
+          "required": false
+        },
+        "hoverable": {
+          "type": "boolean",
+          "required": false
+        },
+        "maxHeight": {
+          "type": "string",
+          "required": false,
+          "rawType": "string | number | undefined"
+        },
+        "minWidth": {
+          "type": "string",
+          "required": false,
+          "rawType": "string | number | undefined"
+        },
+        "selectable": {
+          "type": "boolean",
+          "required": false
+        },
+        "type": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "horizontal",
+            "vertical"
+          ],
+          "default": "horizontal"
+        }
+      }
+    },
+    "DataGrid.Pagination": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        }
+      }
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-data-grid",
+    "ncua-data-grid--horizontal",
+    "ncua-data-grid--search-result",
+    "ncua-data-grid__action-bar",
+    "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom",
+    "ncua-data-grid__action-bar--bottom",
+    "ncua-data-grid__action-bar--left",
+    "ncua-data-grid__action-bar--right",
+    "ncua-data-grid__action-bar--space-between",
+    "ncua-data-grid__action-bar--top",
+    "ncua-data-grid__filter-bar",
+    "ncua-data-grid__pagination",
+    "ncua-data-grid__search-filter",
+    "ncua-data-grid__summary",
+    "ncua-data-grid__table",
+    "ncua-data-grid__table-wrapper",
+    "ncua-table--in-data-grid"
+  ],
+  "usage": {
+    "import": "import { DataGrid } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<DataGrid children=\"예시\" />",
+      "variant:horizontal": "<DataGrid variant=\"horizontal\" children=\"예시\" />",
+      "variant:search-result": "<DataGrid variant=\"search-result\" children=\"예시\" />"
+    }
+  }
+}

package/data/date-picker.json

@@ -3,7 +3,7 @@
   "exportName": "DatePicker",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "DatePicker는 등록일, 노출일, 검색 기간 등 날짜 또는 시간 설정이 필요한 경우 사용하는 선택 위젯입니다.",
   "aliases": [
     "날짜선택위젯",
@@ -37,6 +37,19 @@
     "range-date-picker"
   ],
   "htmlElement": "input",
+  "usageExamples": {
+    "default": {
+      "currentDate": "2026-03-24",
+      "size": "sm"
+    },
+    "withTime": {
+      "currentDate": "2026-03-24 14:30",
+      "datePickerOptions": {
+        "enableTime": true,
+        "dateFormat": "Y-m-d H:i"
+      }
+    }
+  },
   "props": {
     "className": {
       "type": "string",
@@ -48,7 +61,8 @@
     },
     "datePickerOptions": {
       "type": "object",
-      "required": false
+      "required": false,
+      "rawType": "Partial<import(\"/home/runner/_work/ncds/ncds/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/types/options\").BaseOptions> | undefined"
     },
     "destructive": {
       "type": "string",
@@ -71,6 +85,11 @@
       "type": "string",
       "required": false
     },
+    "portal": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
     "shouldFocus": {
       "type": "boolean",
       "required": false,
@@ -92,6 +111,7 @@
     "ncua-date-picker--destructive",
     "ncua-date-picker--disabled",
     "ncua-date-picker--has-time",
+    "ncua-date-picker--portal",
     "ncua-date-picker--sm",
     "ncua-date-picker--xs",
     "ncua-date-picker__destructive",

package/data/divider.json

@@ -3,7 +3,7 @@
   "exportName": "Divider",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "data-display",
+  "category": "layout",
   "description": "콘텐츠 영역을 시각적으로 구분하는 수평 또는 수직 구분선 컴포넌트입니다.",
   "aliases": [
     "Divider",

package/data/dot.json

@@ -3,7 +3,7 @@
   "exportName": "Dot",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "icon",
+  "category": "image-and-icons",
   "description": "Dot 컴포넌트는 상태나 알림을 시각적으로 표시하기 위한 작은 원형 표시기입니다",
   "aliases": [
     "Dot",
@@ -67,7 +67,7 @@
         "md",
         "sm"
       ],
-      "default": "md"
+      "default": "sm"
     }
   },
   "html": {},

package/data/dropdown.json

@@ -2,8 +2,8 @@
   "name": "dropdown",
   "exportName": "Dropdown",
   "importPath": "@ncds/ui-admin",
-  "jsRequired": false,
-  "category": "overlay",
+  "jsRequired": true,
+  "category": "overlays",
   "description": "Dropdown(메뉴형)은 버튼, 아이콘, 아바타 등 트리거 요소를 통해 숨겨진 메뉴 또는 작업(Action) 목록을 레이어 형태로 노출하는 컴포넌트입니다.",
   "aliases": [
     "Dropdown",
@@ -28,7 +28,12 @@
   "hasChildren": true,
   "whenToUse": [
     "Dropdown은 값 선택이 아닌 액션 실행 컴포넌트입니다",
-    "제한된 화면 공간에서 다수의 작업을 구조적으로 제공할 때 사용합니다"
+    "값을 선택하는 Selectbox와 달리, 메뉴 항목 선택 시 즉시 특정 기능이 실행됩니다",
+    "제한된 화면 공간에서 다수의 작업을 구조적으로 제공할 때 사용합니다",
+    "다수 액션 제공",
+    "사용자 계정 메뉴",
+    "관리/설정 메뉴",
+    "제한된 공간의 보조 액션"
   ],
   "forbiddenRules": [
     "메뉴명 말줄임 처리 금지",
@@ -44,6 +49,52 @@
     "icon",
     "icon-button"
   ],
+  "usageExamples": {
+    "buttonTrigger": {
+      "trigger": {
+        "type": "button",
+        "text": "메뉴"
+      },
+      "groups": [
+        {
+          "items": [
+            {
+              "id": "edit",
+              "text": "수정"
+            },
+            {
+              "id": "copy",
+              "text": "복사"
+            },
+            {
+              "id": "delete",
+              "text": "삭제",
+              "type": "danger"
+            }
+          ]
+        }
+      ]
+    },
+    "iconTrigger": {
+      "trigger": {
+        "type": "icon"
+      },
+      "groups": [
+        {
+          "items": [
+            {
+              "id": "setting",
+              "text": "설정"
+            },
+            {
+              "id": "logout",
+              "text": "로그아웃"
+            }
+          ]
+        }
+      ]
+    }
+  },
   "props": {
     "align": {
       "type": "enum",
@@ -51,47 +102,156 @@
       "values": [
         "left",
         "right"
-      ],
-      "default": "left"
+      ]
     },
     "className": {
       "type": "string",
       "required": false
     },
-    "closeOnClickItem": {
-      "type": "boolean",
-      "required": false,
-      "default": true
-    },
     "closeOnClickOutside": {
       "type": "boolean",
-      "required": false,
-      "default": true
+      "required": false
     },
     "groups": {
-      "type": "string",
+      "type": "object",
       "required": true,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/dropdown/Dropdown\").DropdownGroup[]"
+      "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/overlays/dropdown/Dropdown\").DropdownGroup[]",
+      "properties": {
+        "items": {
+          "type": "object",
+          "required": true,
+          "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/overlays/dropdown/Dropdown\").DropdownItemType[]",
+          "properties": {
+            "id": {
+              "type": "string",
+              "required": true
+            },
+            "text": {
+              "type": "string",
+              "required": true
+            },
+            "icon": {
+              "type": "function",
+              "required": false,
+              "semantic": "icon-component"
+            },
+            "shortcut": {
+              "type": "string",
+              "required": false
+            },
+            "onClick": {
+              "type": "function",
+              "required": false
+            },
+            "disabled": {
+              "type": "boolean",
+              "required": false
+            },
+            "type": {
+              "type": "enum",
+              "required": false,
+              "values": [
+                "danger",
+                "default"
+              ]
+            },
+            "className": {
+              "type": "string",
+              "required": false
+            },
+            "visible": {
+              "type": "boolean",
+              "required": false
+            },
+            "required": {
+              "type": "boolean",
+              "required": false
+            }
+          }
+        },
+        "sortable": {
+          "type": "boolean",
+          "required": false
+        }
+      }
     },
     "header": {
       "type": "object",
-      "required": false
+      "required": false,
+      "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/overlays/dropdown/Dropdown\").DropdownHeaderType | undefined",
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"avatar\""
+        },
+        "avatar": {
+          "type": "string",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": true
+        },
+        "subtitle": {
+          "type": "string",
+          "required": false
+        }
+      }
     },
     "opened": {
       "type": "boolean",
-      "required": false,
-      "default": false
+      "required": false
     },
     "trigger": {
       "type": "object",
-      "required": true
+      "required": true,
+      "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/overlays/dropdown/Dropdown\").AvatarTrigger | import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/overlays/dropdown/Dropdown\").ButtonTrigger | import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/overlays/dropdown/Dropdown\").IconTrigger | import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/components/overlays/dropdown/Dropdown\").CustomTrigger",
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"avatar\""
+        },
+        "avatar": {
+          "type": "string",
+          "required": false
+        },
+        "text": {
+          "type": "string",
+          "required": false
+        },
+        "icon": {
+          "type": "function",
+          "required": false,
+          "semantic": "icon-component"
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        }
+      }
+    },
+    "usePortal": {
+      "type": "boolean",
+      "required": false
+    },
+    "variant": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "action",
+        "config"
+      ]
     }
   },
   "html": {},
   "bemClasses": [
     "ncua-dropdown",
+    "ncua-dropdown-",
     "ncua-dropdown--right",
     "ncua-dropdown__avatar",
+    "ncua-dropdown__footer",
     "ncua-dropdown__group",
     "ncua-dropdown__header",
     "ncua-dropdown__header-avatar-group",
@@ -99,13 +259,18 @@
     "ncua-dropdown__header-text",
     "ncua-dropdown__header-title",
     "ncua-dropdown__item",
-    "ncua-dropdown__item-clickable-layer",
+    "ncua-dropdown__item--config",
+    "ncua-dropdown__item--drag-preview",
     "ncua-dropdown__item-content",
+    "ncua-dropdown__item-drag-handle",
+    "ncua-dropdown__item-drop-indicator",
     "ncua-dropdown__item-icon",
     "ncua-dropdown__item-shortcut",
     "ncua-dropdown__item-text",
     "ncua-dropdown__item-text-group",
+    "ncua-dropdown__item-visibility",
     "ncua-dropdown__menu",
+    "ncua-dropdown__menu--portal",
     "ncua-dropdown__menu-items",
     "ncua-dropdown__trigger",
     "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
@@ -117,7 +282,9 @@
     "react": {
       "default": "<Dropdown groups=\"\" trigger=\"\" />",
       "align:left": "<Dropdown align=\"left\" groups=\"\" trigger=\"\" />",
-      "align:right": "<Dropdown align=\"right\" groups=\"\" trigger=\"\" />"
+      "align:right": "<Dropdown align=\"right\" groups=\"\" trigger=\"\" />",
+      "variant:action": "<Dropdown variant=\"action\" groups=\"\" trigger=\"\" />",
+      "variant:config": "<Dropdown variant=\"config\" groups=\"\" trigger=\"\" />"
     }
   }
 }

package/data/editor.json

@@ -0,0 +1,85 @@
+{
+  "name": "editor",
+  "exportName": "NcdsEditor",
+  "importPath": "@ncds/editor-html",
+  "jsRequired": true,
+  "category": "form",
+  "description": "froala 기반 WYSIWYG 에디터. textarea 를 in-place 변환. 외부 패키지(@ncds/editor-html) — render_to_html 호출 시 외부 분기 모듈에서 응답 직접 조립.",
+  "aliases": [
+    "Editor",
+    "에디터",
+    "WYSIWYG",
+    "위지윅",
+    "Froala",
+    "GodoEditor",
+    "NcdsEditor",
+    "리치 텍스트",
+    "rich text",
+    "ncds-editor",
+    "editor-html"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "장문/리치 텍스트 입력이 필요한 경우 (게시글 본문·상품 설명·뉴스레터 작성 등)",
+    "이미지·표·링크 등 인라인 컨텐츠 삽입이 필요한 경우",
+    "한국어 폰트 다양성이 중요한 경우 (나눔고딕·바탕 등 9종 지원)"
+  ],
+  "forbiddenRules": [
+    "단순 한 줄 텍스트 입력에 사용 금지 (Input 컴포넌트 사용)",
+    "컴포넌트 자식(children)으로 직접 마크업 주입 금지 — setHTML(html) API 사용",
+    "동적 삽입(모달 안에 textarea 추가) 시 mcp 출력 그대로 사용 금지 — window.ncdsEditor.initAll() 수동 호출 필요 (현재 mcp 미지원, 후속 스토리)"
+  ],
+  "seeAlso": ["input", "textarea"],
+  "usageExamples": {
+    "default": {
+      "heightMin": 300,
+      "heightMax": 600,
+      "placeholderText": "내용을 입력하세요."
+    },
+    "resizable": {
+      "heightMin": 150,
+      "heightMax": 400,
+      "heightResize": true,
+      "placeholderText": "높이를 조정할 수 있습니다."
+    },
+    "withCustomImageUpload": {
+      "heightMin": 200,
+      "heightMax": 400,
+      "placeholderText": "이미지 업로드가 가능합니다.",
+      "imageUploadCallback": "customImageUploadHandler"
+    }
+  },
+  "props": {
+    "heightMin": {
+      "type": "number",
+      "required": false,
+      "default": 300
+    },
+    "heightMax": {
+      "type": "number",
+      "required": false,
+      "default": 600
+    },
+    "heightResize": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "placeholderText": {
+      "type": "string",
+      "required": false,
+      "default": "내용을 입력하세요."
+    },
+    "imageUploadCallback": {
+      "type": "string",
+      "required": false,
+      "description": "전역 이미지 업로드 콜백 함수명. 마크업의 data-image-upload-callback 속성으로 직렬화."
+    }
+  },
+  "html": {},
+  "bemClasses": ["ncds-editor-container", "fr-toolbar", "fr-element", "fr-box", "fr-resize-handle"],
+  "usage": {
+    "import": "// CDN 로드 (npm import 미지원, vanilla JS only)\n<script src=\"https://fe-sdk.cdn-nhncommerce.com/@ncds/editor/0.0/ncds-editor.js\"></script>",
+    "react": {}
+  }
+}