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

package/data/image-file-input.json

@@ -0,0 +1,185 @@
+{
+  "name": "image-file-input",
+  "exportName": "ImageFileInput",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "input",
+  "description": "상품 이미지 등 시각적으로 참조되어야 하는 이미지 업로드 영역에 사용되는 컴포넌트입니다",
+  "aliases": [
+    "이미지파일인풋",
+    "ImageFileInput",
+    "이미지업로드",
+    "썸네일",
+    "미리보기",
+    "이미지첨부",
+    "파일찾기",
+    "업로드",
+    "accept",
+    "maxFileCount",
+    "maxFileSize",
+    "onFail",
+    "multiple",
+    "hintText",
+    "hintItems",
+    "destructive",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "썸네일 중심 UI를 기본으로 하며 이미지 비율 왜곡 없이 중앙 정렬하고 삭제는 Hover 시에만 노출해야 하는 경우",
+    "이미지 업로드와 미리보기가 필요한 경우",
+    "일반 파일이 아닌 이미지 전용 업로드 영역"
+  ],
+  "forbiddenRules": [
+    "단일 영역에서 다중 이미지 누적 금지",
+    "최대 등록 수 초과 시 무반응 처리 금지",
+    "Hover 없이 삭제 기능 항상 노출 금지",
+    "이미지 비율 왜곡 노출 금지",
+    "파일명 중심 UI로 구성 금지",
+    "제한 정책 안내 없이 업로드 허용 금지"
+  ],
+  "seeAlso": [
+    "file-input"
+  ],
+  "props": {
+    "accept": {
+      "type": "string",
+      "required": false
+    },
+    "buttonLabel": {
+      "type": "string",
+      "required": false,
+      "default": "파일 찾기"
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false
+    },
+    "hintItems": {
+      "type": "string",
+      "required": false,
+      "rawType": "string[] | undefined"
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "imagePreviewTooltipLabel": {
+      "type": "string",
+      "required": false,
+      "default": "이미지 업로드"
+    },
+    "isRequired": {
+      "type": "boolean",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "leadingElement": {
+      "type": "object",
+      "required": false
+    },
+    "maxFileCount": {
+      "type": "number",
+      "required": false
+    },
+    "maxFileSize": {
+      "type": "number",
+      "required": false
+    },
+    "maxLength": {
+      "type": "number",
+      "required": false
+    },
+    "onChange": {
+      "type": "function",
+      "required": false
+    },
+    "onFail": {
+      "type": "function",
+      "required": false
+    },
+    "onFileSelect": {
+      "type": "function",
+      "required": false
+    },
+    "required": {
+      "type": "boolean",
+      "required": false
+    },
+    "showFileInput": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "showFileTagList": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "showHelpIcon": {
+      "type": "boolean",
+      "required": false
+    },
+    "showHintText": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "showTextCount": {
+      "type": "boolean",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "sm"
+    },
+    "trailingElement": {
+      "type": "object",
+      "required": false
+    },
+    "validation": {
+      "type": "boolean",
+      "required": false
+    },
+    "value": {
+      "type": "string",
+      "required": false,
+      "rawType": "File[] | undefined"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-file-input",
+    "ncua-file-input--sm",
+    "ncua-file-input--xs",
+    "ncua-file-input__hint-item",
+    "ncua-file-input__hint-list",
+    "ncua-file-input__input-container",
+    "ncua-file-input__label",
+    "ncua-image-file-input",
+    "ncua-image-file-input__empty-slot-wrapper",
+    "ncua-image-file-input__preview-container",
+    "ncua-image-file-input__previews",
+    "ncua-input__help-icon"
+  ],
+  "usage": {
+    "import": "import { ImageFileInput } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<ImageFileInput />",
+      "size:sm": "<ImageFileInput size=\"sm\" />",
+      "size:xs": "<ImageFileInput size=\"xs\" />"
+    }
+  }
+}

package/data/input-base.json

@@ -0,0 +1,145 @@
+{
+  "name": "input-base",
+  "exportName": "InputBase",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "Input은 사용자에게 텍스트 데이터를 입력받는 UI 요소로, 다양한 사이즈와 상태를 지원하며 입력 필드 앞뒤로 아이콘, 텍스트, 버튼 등의 요소를 배치할 수 있습니다.",
+  "aliases": [
+    "인풋",
+    "InputBase",
+    "InputBase",
+    "PasswordInput",
+    "텍스트입력",
+    "비밀번호",
+    "이메일",
+    "드롭다운",
+    "리딩텍스트",
+    "트레일링버튼",
+    "clearText",
+    "showTextCount",
+    "maxLength",
+    "leadingElement",
+    "trailingElement",
+    "validation",
+    "destructive",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "Input은 명확한 레이블, 입력 예시(Placeholder), 유효성 안내(Helper Text)와 함께 제공되어야 하며, 사용자가 입력 가능한 형식과 제한 조건을 입력 전에 인지할 수 있어야 한다"
+  ],
+  "forbiddenRules": [
+    "Label 없는 단독 Input 사용 금지",
+    "Placeholder를 Label 대체로 사용 금지",
+    "50자 이상 필드에 Text Field 사용 금지",
+    "Max 초과 입력 허용 금지",
+    "Error 상태를 실시간 남용 금지"
+  ],
+  "seeAlso": [
+    "textarea",
+    "button",
+    "dropdown",
+    "tooltip",
+    "file-input",
+    "image-file-input"
+  ],
+  "htmlElement": "input",
+  "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
+    },
+    "maxLength": {
+      "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"
+    },
+    "trailingElement": {
+      "type": "object",
+      "required": false
+    },
+    "validation": {
+      "type": "boolean",
+      "required": false
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-input",
+    "ncua-input--sm",
+    "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__right-icon",
+    "ncua-input__trailing-button",
+    "ncua-input__validation-icon"
+  ],
+  "usage": {
+    "import": "import { InputBase } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<InputBase />",
+      "size:sm": "<InputBase size=\"sm\" />",
+      "size:xs": "<InputBase size=\"xs\" />"
+    }
+  }
+}

package/data/modal.json

@@ -0,0 +1,131 @@
+{
+  "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"
+  ],
+  "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,176 @@
+{
+  "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": "string",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/notification/Notification\").NotificationAction[] | undefined"
+    },
+    "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": "object",
+      "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=\"예시\" />"
+    }
+  }
+}