@ncds/ui-admin-mcp 1.0.0-alpha.10

package/data/modal.json

@@ -0,0 +1,143 @@
+{
+  "name": "modal",
+  "exportName": "Modal",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "overlay",
+  "description": "Modal은 사용자가 현재 페이지를 이탈하지 않고도 집중이 필요한 중요 정보 제공 또는 복잡한 입력/처리 작업을 수행하도록 하기 위한 오버레이 UI 컴포넌트입니다.",
+  "aliases": [
+    "Modal",
+    "모달",
+    "Dialog",
+    "다이얼로그",
+    "Overlay",
+    "오버레이",
+    "Dim",
+    "Header",
+    "Content",
+    "Actions",
+    "Footer",
+    "Destructive",
+    "Primary",
+    "Secondary",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "onClose",
+    "closeOnEsc",
+    "closeOnBackdropClick",
+    "NCDS"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "현재 흐름을 중단하고 사용자 집중을 요구하는 UI 패턴입니다",
+    "정보 확인/입력/처리성 작업에만 한정하여 사용합니다"
+  ],
+  "forbiddenRules": [
+    "단순 알림에 과도한 Modal 사용 금지",
+    "버튼 3개 이상 구성 금지",
+    "페이지 이동 대체용 사용 금지",
+    "화면 전환을 모두 Modal로 처리 금지",
+    "좌/우 스크롤 구조 금지",
+    "배경 스크롤 허용 금지"
+  ],
+  "seeAlso": [
+    "button",
+    "featured-icon",
+    "icon",
+    "toast"
+  ],
+  "usageExamples": {
+    "default": {
+      "isOpen": true,
+      "children": "모달 내용입니다.",
+      "size": "md"
+    },
+    "confirm": {
+      "isOpen": true,
+      "children": "정말 삭제하시겠습니까?",
+      "size": "sm"
+    }
+  },
+  "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
+    },
+    "isOpen": {
+      "type": "boolean",
+      "required": true
+    },
+    "onClose": {
+      "type": "function",
+      "required": true
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "2xl",
+        "lg",
+        "md",
+        "sm",
+        "xl"
+      ],
+      "default": "md"
+    },
+    "zIndex": {
+      "type": "number",
+      "required": false
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-modal",
+    "ncua-modal--2xl",
+    "ncua-modal--lg",
+    "ncua-modal--md",
+    "ncua-modal--sm",
+    "ncua-modal--xl",
+    "ncua-modal-backdrop",
+    "ncua-modal__actions",
+    "ncua-modal__actions-checkbox",
+    "ncua-modal__actions-checkbox-content",
+    "ncua-modal__actions-divider",
+    "ncua-modal__actions-wrapper",
+    "ncua-modal__actions-wrapper--checkbox",
+    "ncua-modal__close-button",
+    "ncua-modal__content",
+    "ncua-modal__header",
+    "ncua-modal__header--close-button",
+    "ncua-modal__header-divider",
+    "ncua-modal__title",
+    "ncua-modal__title-subtitle",
+    "ncua-modal__title-text"
+  ],
+  "usage": {
+    "import": "import { Modal } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Modal children=\"예시\" isOpen onClose=\"\" />",
+      "size:2xl": "<Modal size=\"2xl\" children=\"예시\" isOpen onClose=\"\" />",
+      "size:lg": "<Modal size=\"lg\" children=\"예시\" isOpen onClose=\"\" />",
+      "size:md": "<Modal size=\"md\" children=\"예시\" isOpen onClose=\"\" />",
+      "size:sm": "<Modal size=\"sm\" children=\"예시\" isOpen onClose=\"\" />",
+      "size:xl": "<Modal size=\"xl\" children=\"예시\" isOpen onClose=\"\" />"
+    }
+  }
+}

package/data/notification.json

@@ -0,0 +1,194 @@
+{
+  "name": "notification",
+  "exportName": "Notification",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "overlay",
+  "description": "Notification 컴포넌트는 현재 작업과 관련된 상태 정보, 경고, 확인 요청, 처리 결과를 사용자에게 전달하는 UI입니다.",
+  "aliases": [
+    "Notification",
+    "알림",
+    "푸시알림",
+    "Confirm Alert",
+    "Alert",
+    "Toast Alert",
+    "Toast",
+    "Floating",
+    "Full-width",
+    "Message",
+    "onClose",
+    "autoClose",
+    "actions",
+    "color",
+    "neutral",
+    "error",
+    "warning",
+    "success",
+    "info",
+    "Dim",
+    "Destructive",
+    "aria-live",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "사용자 액션의 영향도 및 시스템 상태 변화에 따라 적절한 유형을 선택하여 사용해야 합니다",
+    "과도하거나 잘못된 유형 사용은 사용자 경험을 저해합니다"
+  ],
+  "forbiddenRules": [
+    "Confirm Alert에 단일 버튼 구성 금지",
+    "Confirm Alert에 취소 버튼 미제공 금지",
+    "파괴적 액션에 일반 버튼 사용 금지",
+    "Alert에 2개 이상의 버튼 금지",
+    "Alert에 Destructive 스타일 남용 금지",
+    "Toast에 Dim 처리 금지",
+    "Confirm 대신 Toast 사용 금지",
+    "시스템 영향 큰 작업에 Toast 사용 금지",
+    "Message type에 info 컬러 사용 금지"
+  ],
+  "seeAlso": [
+    "modal",
+    "button",
+    "featured-icon",
+    "icon"
+  ],
+  "htmlElement": "div",
+  "props": {
+    "actions": {
+      "type": "object",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/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",
+      "required": false,
+      "default": 0
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "color": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "error",
+        "info",
+        "neutral",
+        "success",
+        "warning"
+      ],
+      "default": "neutral"
+    },
+    "icon": {
+      "type": "function",
+      "required": false
+    },
+    "onClose": {
+      "type": "function",
+      "required": false
+    },
+    "onHidePermanently": {
+      "type": "function",
+      "required": false
+    },
+    "supportingText": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "title": {
+      "type": "ReactNode",
+      "required": true
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "floating",
+        "full-width",
+        "message"
+      ],
+      "default": "floating"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "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",
+    "ncua-floating-notification__content",
+    "ncua-floating-notification__supporting-text",
+    "ncua-floating-notification__text-container",
+    "ncua-floating-notification__title",
+    "ncua-floating-notification__title-wrapper",
+    "ncua-full-width-notification",
+    "ncua-full-width-notification__actions",
+    "ncua-full-width-notification__actions-container",
+    "ncua-full-width-notification__close-button",
+    "ncua-full-width-notification__container",
+    "ncua-full-width-notification__content",
+    "ncua-full-width-notification__content-wrapper",
+    "ncua-full-width-notification__icon",
+    "ncua-full-width-notification__link",
+    "ncua-full-width-notification__supporting-text",
+    "ncua-full-width-notification__text-container",
+    "ncua-full-width-notification__title",
+    "ncua-message-notification",
+    "ncua-message-notification__actions",
+    "ncua-message-notification__actions-container",
+    "ncua-message-notification__close-button",
+    "ncua-message-notification__container",
+    "ncua-message-notification__content",
+    "ncua-message-notification__content-wrapper",
+    "ncua-message-notification__footer-container",
+    "ncua-message-notification__hide-link",
+    "ncua-message-notification__icon",
+    "ncua-message-notification__supporting-text",
+    "ncua-message-notification__text-container",
+    "ncua-message-notification__title",
+    "ncua-notification__action-button",
+    "ncua-notification__action-button--link",
+    "ncua-notification__action-button--text"
+  ],
+  "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=\"예시\" />"
+    }
+  }
+}

package/data/number-input.json

@@ -0,0 +1,295 @@
+{
+  "name": "number-input",
+  "exportName": "NumberInput",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "NumberInput은 숫자만 입력 가능한 전용 입력 컨트롤로, 직접 입력과 Spin Button(▲/▼) 조작을 모두 지원하며 Step 기능을 통해 값을 증감할 수 있습니다.",
+  "aliases": [
+    "숫자입력",
+    "NumberInput",
+    "스핀버튼",
+    "SpinButton",
+    "Stepper",
+    "수량",
+    "step",
+    "minValue",
+    "maxValue",
+    "trailing",
+    "leading",
+    "stepperPosition",
+    "numeric",
+    "키보드조작",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "NumberInput은 명확한 범위(min/max), 기본값, 증감 단위(Step)와 함께 제공되어야 하며, 사용자가 입력 가능한 범위와 단위를 입력 전에 인지할 수 있어야 한다"
+  ],
+  "forbiddenRules": [
+    "min / max 없이 사용 금지",
+    "Default Value 없이 사용 금지",
+    "Step 변경 후 안내 미제공 금지",
+    "숫자 외 문자 허용 금지",
+    "Leading/Trailing 혼합 사용 금지"
+  ],
+  "seeAlso": [
+    "input",
+    "slider",
+    "tooltip",
+    "label"
+  ],
+  "props": {
+    "clearText": {
+      "type": "boolean",
+      "required": false
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "leadingElement": {
+      "type": "object",
+      "required": false,
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"text\""
+        },
+        "text": {
+          "type": "string",
+          "required": false
+        },
+        "icon": {
+          "type": "function",
+          "required": false
+        },
+        "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",
+      "required": false
+    },
+    "maxValue": {
+      "type": "number",
+      "required": false
+    },
+    "minValue": {
+      "type": "number",
+      "required": false
+    },
+    "onClearText": {
+      "type": "function",
+      "required": false
+    },
+    "required": {
+      "type": "boolean",
+      "required": false
+    },
+    "showHelpIcon": {
+      "type": "boolean",
+      "required": false
+    },
+    "showTextCount": {
+      "type": "boolean",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    },
+    "step": {
+      "type": "number",
+      "required": false,
+      "default": 1
+    },
+    "stepperPosition": {
+      "type": "enum",
+      "required": true,
+      "values": [
+        "leading",
+        "trailing"
+      ]
+    },
+    "trailingElement": {
+      "type": "object",
+      "required": false,
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"icon\""
+        },
+        "icon": {
+          "type": "function",
+          "required": false
+        },
+        "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",
+      "required": false
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-input__number",
+    "ncua-input__stepper-button-group"
+  ],
+  "usage": {
+    "import": "import { NumberInput } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<NumberInput stepperPosition=\"leading\" />",
+      "size:sm": "<NumberInput size=\"sm\" stepperPosition=\"leading\" />",
+      "size:xs": "<NumberInput size=\"xs\" stepperPosition=\"leading\" />",
+      "stepperPosition:leading": "<NumberInput stepperPosition=\"leading\" />",
+      "stepperPosition:trailing": "<NumberInput stepperPosition=\"trailing\" />"
+    }
+  }
+}