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

package/data/image-file-input.json

@@ -0,0 +1,339 @@
+{
+  "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": "object",
+      "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,
+      "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"
+          ]
+        }
+      }
+    },
+    "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,
+      "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
+    },
+    "value": {
+      "type": "object",
+      "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,299 @@
+{
+  "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,
+      "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
+    },
+    "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,
+      "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",
+    "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\" />"
+    }
+  }
+}