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

package/data/modal.json

@@ -3,7 +3,7 @@
   "exportName": "Modal",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "overlay",
+  "category": "overlays",
   "description": "Modal은 사용자가 현재 페이지를 이탈하지 않고도 집중이 필요한 중요 정보 제공 또는 복잡한 입력/처리 작업을 수행하도록 하기 위한 오버레이 UI 컴포넌트입니다.",
   "aliases": [
     "Modal",
@@ -32,23 +32,111 @@
   ],
   "hasChildren": true,
   "whenToUse": [
-    "현재 흐름을 중단하고 사용자 집중을 요구하는 UI 패턴입니다",
-    "정보 확인/입력/처리성 작업에만 한정하여 사용합니다"
+    "Modal은 현재 흐름을 중단하고 사용자 집중을 요구하는 UI 패턴입니다",
+    "단순 알림이나 페이지 이동 대체용으로 남용해서는 안 되며, 정보 확인/입력/처리성 작업에만 한정하여 사용합니다"
   ],
   "forbiddenRules": [
     "단순 알림에 과도한 Modal 사용 금지",
     "버튼 3개 이상 구성 금지",
     "페이지 이동 대체용 사용 금지",
     "화면 전환을 모두 Modal로 처리 금지",
-    "좌/우 스크롤 구조 금지",
+    "좌/우 스크롤 구조 금지 (Modal Content 자체)",
     "배경 스크롤 허용 금지"
   ],
   "seeAlso": [
     "button",
     "featured-icon",
     "icon",
-    "toast"
+    "notification",
+    "toast",
+    "snackbar"
   ],
+  "usageExamples": {
+    "default": {
+      "isOpen": true,
+      "size": "md",
+      "children": [
+        {
+          "component": "modal.header",
+          "props": {
+            "title": "제목",
+            "align": "left"
+          }
+        },
+        {
+          "component": "modal.content",
+          "children": "모달 내용입니다."
+        },
+        {
+          "component": "modal.actions",
+          "props": {
+            "layout": "horizontal",
+            "align": "stretch"
+          },
+          "children": [
+            {
+              "component": "button",
+              "props": {
+                "label": "취소",
+                "hierarchy": "secondary-gray",
+                "size": "sm"
+              }
+            },
+            {
+              "component": "button",
+              "props": {
+                "label": "확인",
+                "hierarchy": "primary",
+                "size": "sm"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    "confirm": {
+      "isOpen": true,
+      "size": "sm",
+      "children": [
+        {
+          "component": "modal.header",
+          "props": {
+            "title": "삭제 확인",
+            "align": "center"
+          }
+        },
+        {
+          "component": "modal.content",
+          "children": "정말 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
+        },
+        {
+          "component": "modal.actions",
+          "props": {
+            "layout": "vertical",
+            "align": "stretch"
+          },
+          "children": [
+            {
+              "component": "button",
+              "props": {
+                "label": "삭제",
+                "hierarchy": "destructive",
+                "size": "sm"
+              }
+            },
+            {
+              "component": "button",
+              "props": {
+                "label": "취소",
+                "hierarchy": "secondary-gray",
+                "size": "sm"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
   "props": {
     "children": {
       "type": "ReactNode",
@@ -93,6 +181,179 @@
       "required": false
     }
   },
+  "subComponents": {
+    "Modal.Header": {
+      "props": {
+        "align": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "center",
+            "horizontal",
+            "left"
+          ],
+          "default": "stretch"
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "closeOnBackdropClick": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "closeOnEsc": {
+          "type": "boolean",
+          "required": false,
+          "default": true
+        },
+        "featuredIcon": {
+          "type": "object",
+          "required": false,
+          "rawType": "{ icon: import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/side-slot\").SlotIconComponent; color: import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/components/image-and-icons/featured-icon/FeaturedIcon\").FeaturedIconColor; theme: import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/components/image-and-icons/featured-icon/FeaturedIcon\").FeaturedIconTheme; } | undefined",
+          "properties": {
+            "icon": {
+              "type": "function",
+              "required": true,
+              "semantic": "icon-component"
+            },
+            "color": {
+              "type": "enum",
+              "required": true,
+              "values": [
+                "error",
+                "neutral",
+                "success",
+                "warning"
+              ]
+            },
+            "theme": {
+              "type": "enum",
+              "required": true,
+              "values": [
+                "dark-circle",
+                "light-circle",
+                "outline-circle",
+                "square-outline"
+              ]
+            }
+          }
+        },
+        "hideCloseButton": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "onClose": {
+          "type": "function",
+          "required": true
+        },
+        "showDivider": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "size": {
+          "type": "string",
+          "required": false,
+          "default": "md"
+        },
+        "subtitle": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "title": {
+          "type": "ReactNode",
+          "required": false
+        }
+      }
+    },
+    "Modal.Content": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "closeOnBackdropClick": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "closeOnEsc": {
+          "type": "boolean",
+          "required": false,
+          "default": true
+        },
+        "size": {
+          "type": "string",
+          "required": false,
+          "default": "md"
+        }
+      }
+    },
+    "Modal.Actions": {
+      "props": {
+        "align": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "center",
+            "left",
+            "right",
+            "stretch"
+          ],
+          "default": "stretch"
+        },
+        "checkboxContent": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "closeOnBackdropClick": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "closeOnEsc": {
+          "type": "boolean",
+          "required": false,
+          "default": true
+        },
+        "layout": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "checkbox",
+            "horizontal",
+            "vertical"
+          ],
+          "default": "vertical"
+        },
+        "showDivider": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "size": {
+          "type": "string",
+          "required": false,
+          "default": "md"
+        }
+      }
+    }
+  },
   "html": {},
   "bemClasses": [
     "ncua-modal",

package/data/notification.json

@@ -3,19 +3,16 @@
   "exportName": "Notification",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "overlay",
-  "description": "Notification 컴포넌트는 현재 작업과 관련된 상태 정보, 경고, 확인 요청, 처리 결과를 사용자에게 전달하는 UI입니다.",
+  "category": "overlays",
+  "description": "Notification 컴포넌트는 현재 작업과 관련된 상태 정보, 경고, 처리 결과를 비차단 방식으로 사용자에게 전달하는 UI입니다.",
   "aliases": [
     "Notification",
     "알림",
-    "푸시알림",
-    "Confirm Alert",
-    "Alert",
-    "Toast Alert",
     "Toast",
     "Floating",
     "Full-width",
     "Message",
+    "Callout",
     "onClose",
     "autoClose",
     "actions",
@@ -25,26 +22,17 @@
     "warning",
     "success",
     "info",
-    "Dim",
-    "Destructive",
     "aria-live",
     "NCDS"
   ],
   "hasChildren": false,
   "whenToUse": [
-    "사용자 액션의 영향도 및 시스템 상태 변화에 따라 적절한 유형을 선택하여 사용해야 합니다",
-    "과도하거나 잘못된 유형 사용은 사용자 경험을 저해합니다"
+    "Notification은 비차단(non-blocking) 알림 UI 컴포넌트이다",
+    "4가지 type(floating, full-width, message, callout)별 시각 토큰과 구현 규격을 정의한다"
   ],
   "forbiddenRules": [
-    "Confirm Alert에 단일 버튼 구성 금지",
-    "Confirm Alert에 취소 버튼 미제공 금지",
-    "파괴적 액션에 일반 버튼 사용 금지",
-    "Alert에 2개 이상의 버튼 금지",
-    "Alert에 Destructive 스타일 남용 금지",
     "Toast에 Dim 처리 금지",
-    "Confirm 대신 Toast 사용 금지",
-    "시스템 영향 큰 작업에 Toast 사용 금지",
-    "Message type에 info 컬러 사용 금지"
+    "Message · floating type에 info 컬러 사용 금지"
   ],
   "seeAlso": [
     "modal",
@@ -55,9 +43,27 @@
   "htmlElement": "div",
   "props": {
     "actions": {
-      "type": "string",
+      "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/notification/Notification\").NotificationAction[] | undefined"
+      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/components/overlays/notification/Notification\").NotificationAction[] | undefined",
+      "properties": {
+        "label": {
+          "type": "string",
+          "required": true
+        },
+        "onClick": {
+          "type": "function",
+          "required": false
+        },
+        "hierarchy": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "text",
+            "text-gray"
+          ]
+        }
+      }
     },
     "autoClose": {
       "type": "number",
@@ -81,8 +87,9 @@
       "default": "neutral"
     },
     "icon": {
-      "type": "object",
-      "required": false
+      "type": "function",
+      "required": false,
+      "semantic": "icon-component"
     },
     "onClose": {
       "type": "function",
@@ -92,18 +99,24 @@
       "type": "function",
       "required": false
     },
+    "portal": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
     "supportingText": {
       "type": "ReactNode",
       "required": false
     },
     "title": {
       "type": "ReactNode",
-      "required": true
+      "required": false
     },
     "type": {
       "type": "enum",
       "required": false,
       "values": [
+        "callout",
         "floating",
         "full-width",
         "message"
@@ -113,15 +126,17 @@
   },
   "html": {},
   "bemClasses": [
+    "ncua-callout-notification",
+    "ncua-callout-notification--callout",
+    "ncua-callout-notification--error",
+    "ncua-callout-notification--floating",
+    "ncua-callout-notification--full-width",
+    "ncua-callout-notification--info",
+    "ncua-callout-notification--message",
+    "ncua-callout-notification--neutral",
+    "ncua-callout-notification--success",
+    "ncua-callout-notification--warning",
     "ncua-floating-notification",
-    "ncua-floating-notification--error",
-    "ncua-floating-notification--floating",
-    "ncua-floating-notification--full-width",
-    "ncua-floating-notification--info",
-    "ncua-floating-notification--message",
-    "ncua-floating-notification--neutral",
-    "ncua-floating-notification--success",
-    "ncua-floating-notification--warning",
     "ncua-floating-notification__actions",
     "ncua-floating-notification__close-button",
     "ncua-floating-notification__container",
@@ -162,15 +177,16 @@
   "usage": {
     "import": "import { Notification } from '@ncds/ui-admin';",
     "react": {
-      "default": "<Notification title=\"예시\" />",
-      "color:error": "<Notification color=\"error\" title=\"예시\" />",
-      "color:info": "<Notification color=\"info\" title=\"예시\" />",
-      "color:neutral": "<Notification color=\"neutral\" title=\"예시\" />",
-      "color:success": "<Notification color=\"success\" title=\"예시\" />",
-      "color:warning": "<Notification color=\"warning\" title=\"예시\" />",
-      "type:floating": "<Notification type=\"floating\" title=\"예시\" />",
-      "type:full-width": "<Notification type=\"full-width\" title=\"예시\" />",
-      "type:message": "<Notification type=\"message\" title=\"예시\" />"
+      "default": "<Notification />",
+      "color:error": "<Notification color=\"error\" />",
+      "color:info": "<Notification color=\"info\" />",
+      "color:neutral": "<Notification color=\"neutral\" />",
+      "color:success": "<Notification color=\"success\" />",
+      "color:warning": "<Notification color=\"warning\" />",
+      "type:callout": "<Notification type=\"callout\" />",
+      "type:floating": "<Notification type=\"floating\" />",
+      "type:full-width": "<Notification type=\"full-width\" />",
+      "type:message": "<Notification type=\"message\" />"
     }
   }
 }

package/data/number-input.json

@@ -3,7 +3,7 @@
   "exportName": "NumberInput",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "NumberInput은 숫자만 입력 가능한 전용 입력 컨트롤로, 직접 입력과 Spin Button(▲/▼) 조작을 모두 지원하며 Step 기능을 통해 값을 증감할 수 있습니다.",
   "aliases": [
     "숫자입력",
@@ -34,7 +34,7 @@
     "Leading/Trailing 혼합 사용 금지"
   ],
   "seeAlso": [
-    "input",
+    "input-base",
     "slider",
     "tooltip",
     "label"
@@ -52,6 +52,10 @@
       "type": "boolean",
       "required": false
     },
+    "fullWidth": {
+      "type": "boolean",
+      "required": false
+    },
     "hintText": {
       "type": "string",
       "required": false
@@ -62,7 +66,81 @@
     },
     "leadingElement": {
       "type": "object",
-      "required": false
+      "required": false,
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"text\""
+        },
+        "text": {
+          "type": "string",
+          "required": false
+        },
+        "icon": {
+          "type": "function",
+          "required": false,
+          "semantic": "icon-component"
+        },
+        "size": {
+          "type": "number",
+          "required": false
+        },
+        "color": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "black",
+            "blue500",
+            "blue600",
+            "currentColor",
+            "gray100",
+            "gray200",
+            "gray300",
+            "gray400",
+            "gray500",
+            "gray600",
+            "gray700",
+            "green500",
+            "green600",
+            "orange500",
+            "orange600",
+            "pink100",
+            "pink600",
+            "red500",
+            "red600",
+            "secondary-gray-blue-100",
+            "secondary-gray-blue-200",
+            "secondary-gray-blue-300",
+            "secondary-gray-blue-400",
+            "secondary-gray-blue-450",
+            "secondary-gray-blue-50",
+            "secondary-gray-blue-500",
+            "secondary-gray-blue-600",
+            "secondary-gray-blue-700",
+            "violet300",
+            "violet600",
+            "white",
+            "yellow600"
+          ]
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "placement": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "inside",
+            "outside"
+          ]
+        }
+      }
     },
     "maxLength": {
       "type": "number",
@@ -116,7 +194,89 @@
     },
     "trailingElement": {
       "type": "object",
-      "required": false
+      "required": false,
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"icon\""
+        },
+        "icon": {
+          "type": "function",
+          "required": false,
+          "semantic": "icon-component"
+        },
+        "size": {
+          "type": "number",
+          "required": false
+        },
+        "color": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "black",
+            "blue500",
+            "blue600",
+            "currentColor",
+            "gray100",
+            "gray200",
+            "gray300",
+            "gray400",
+            "gray500",
+            "gray600",
+            "gray700",
+            "green500",
+            "green600",
+            "orange500",
+            "orange600",
+            "pink100",
+            "pink600",
+            "red500",
+            "red600",
+            "secondary-gray-blue-100",
+            "secondary-gray-blue-200",
+            "secondary-gray-blue-300",
+            "secondary-gray-blue-400",
+            "secondary-gray-blue-450",
+            "secondary-gray-blue-50",
+            "secondary-gray-blue-500",
+            "secondary-gray-blue-600",
+            "secondary-gray-blue-700",
+            "violet300",
+            "violet600",
+            "white",
+            "yellow600"
+          ]
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "placement": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "inside",
+            "outside"
+          ]
+        },
+        "label": {
+          "type": "string",
+          "required": false
+        },
+        "isSubmit": {
+          "type": "boolean",
+          "required": false
+        },
+        "onClick": {
+          "type": "function",
+          "required": false
+        }
+      }
     },
     "validation": {
       "type": "boolean",