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

package/data/range-date-picker.json

@@ -0,0 +1,87 @@
+{
+  "name": "range-date-picker",
+  "exportName": "RangeDatePicker",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "RangeDatePicker는 시작일~종료일 기간 범위를 선택해야 하는 경우 사용하는 복합 선택 위젯입니다. 검색 기간 설정, 노출 기간 설정, 이벤트 기간 설정 등 두 날짜의 쌍(Pair)이 필요한 모든 상황에서 사용합니다.",
+  "aliases": [
+    "범위날짜선택",
+    "RangeDatePicker",
+    "RangeDatePickerWithButtons",
+    "컴포넌트",
+    "기간선택",
+    "시작일",
+    "종료일",
+    "날짜범위",
+    "ButtonGroup",
+    "기간옵션",
+    "periodKeys",
+    "validationOption",
+    "onDateValidation",
+    "overlap",
+    "period",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "시작일·종료일 동일 Format·동일 Size를 유지",
+    "기간 옵션 ButtonGroup(4~7개)으로 빠른 기간 설정 지원",
+    "overlap/period 유효성 검증으로 잘못된 입력 방지"
+  ],
+  "forbiddenRules": [
+    "시작일과 종료일의 Format 불일치 금지",
+    "기간 옵션 ButtonGroup 3개 이하 또는 8개 이상 구성 금지",
+    "시작일·종료일 DatePicker 사이즈 불일치 금지",
+    "종료일에 isEndDate 수동 false 설정 금지",
+    "조회 화면에서 Disabled Field 사용 금지",
+    "텍스트 입력 불가 UX 금지",
+    "ButtonGroup 없이 기간 프리셋 누락 금지",
+    "구분자 ~ 외 다른 기호 사용 금지"
+  ],
+  "seeAlso": [
+    "date-picker",
+    "button-group"
+  ],
+  "props": {
+    "endDateOptions": {
+      "type": "string",
+      "required": true,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/date-picker/DatePicker\").DatePickerProps"
+    },
+    "onDateValidation": {
+      "type": "function",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    },
+    "startDateOptions": {
+      "type": "string",
+      "required": true,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/date-picker/DatePicker\").DatePickerProps"
+    },
+    "validationOption": {
+      "type": "object",
+      "required": false
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-range-date-picker"
+  ],
+  "usage": {
+    "import": "import { RangeDatePicker } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<RangeDatePicker endDateOptions=\"\" startDateOptions=\"\" />",
+      "size:sm": "<RangeDatePicker size=\"sm\" endDateOptions=\"\" startDateOptions=\"\" />",
+      "size:xs": "<RangeDatePicker size=\"xs\" endDateOptions=\"\" startDateOptions=\"\" />"
+    }
+  }
+}

package/data/select-box.json

@@ -0,0 +1,177 @@
+{
+  "name": "select-box",
+  "exportName": "SelectBox",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "input",
+  "description": "Selectbox는 목록(레이어) 중에서 하나 이상의 항목을 선택하는 입력 컴포넌트로, 선택 가능한 옵션이 3~30개 정도이며 공간 효율이 중요한 경우 사용합니다.",
+  "aliases": [
+    "셀렉트박스",
+    "Selectbox",
+    "SelectBox",
+    "Dropdown",
+    "드롭다운",
+    "Single Select",
+    "Multi Select",
+    "Chips",
+    "옵션선택",
+    "placeholder",
+    "optionItems",
+    "multiple",
+    "react-hook-form",
+    "NCDS"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "옵션 수 6개 이상 또는 공간 제약 시 사용",
+    "옵션 3~30개인 경우",
+    "테이블 내부 컴팩트 영역에서 옵션 선택 필요",
+    "상태/분류/정렬 단일 선택",
+    "팀 멤버/태그/필터 다중 선택"
+  ],
+  "forbiddenRules": [
+    "옵션 2개(180도 반대 의미)인데 Selectbox 사용 금지",
+    "옵션 수 5개 이하+공간 충분한데 Selectbox 남용 금지",
+    "30개 이상 옵션을 일반 Selectbox로만 제공 금지",
+    "다중 선택형에서 선택 완료 없이 즉시 확정 UX 혼용 금지",
+    "말줄임 Chips에 Tooltip 미제공 금지",
+    "Read only에서 레이어 열림 동작 제공 금지",
+    "Read only를 Disabled로 대체하여 값 가독성 저하 지양",
+    "Disabled 상태에서 Tooltip/설명 없이 클릭 시도 유도 금지"
+  ],
+  "seeAlso": [
+    "radio",
+    "checkbox",
+    "switch",
+    "input",
+    "tooltip"
+  ],
+  "htmlElement": "div",
+  "props": {
+    "align": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "left",
+        "right"
+      ],
+      "default": "left"
+    },
+    "autoWidth": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "children": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "disabledPlaceholder": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "maxHeight": {
+      "type": "number",
+      "required": false,
+      "default": "DEFAULT_MAX_HEIGHT"
+    },
+    "multiple": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "onChange": {
+      "type": "function",
+      "required": false
+    },
+    "onEdit": {
+      "type": "function",
+      "required": false
+    },
+    "optionItems": {
+      "type": "string",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/types/dropdown/option\").OptionType[] | undefined",
+      "default": "[]"
+    },
+    "placeholder": {
+      "type": "string",
+      "required": false,
+      "default": "선택하세요"
+    },
+    "register": {
+      "type": "object",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "default",
+        "simple"
+      ],
+      "default": "default"
+    },
+    "value": {
+      "type": "string",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/types/dropdown/option\").OptionValue | undefined"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-hint-text",
+    "ncua-selectbox",
+    "ncua-selectbox--disabled",
+    "ncua-selectbox--multiple",
+    "ncua-selectbox--open",
+    "ncua-selectbox--simple",
+    "ncua-selectbox__arrow",
+    "ncua-selectbox__arrow--up",
+    "ncua-selectbox__content",
+    "ncua-selectbox__content-inner",
+    "ncua-selectbox__tags",
+    "ncua-selectbox__value",
+    "ncua-selectbox__value-container",
+    "ncua-selectbox__value-icon",
+    "ncua-selectbox__value-text"
+  ],
+  "usage": {
+    "import": "import { SelectBox } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<SelectBox />",
+      "align:left": "<SelectBox align=\"left\" />",
+      "align:right": "<SelectBox align=\"right\" />",
+      "size:md": "<SelectBox size=\"md\" />",
+      "size:sm": "<SelectBox size=\"sm\" />",
+      "size:xs": "<SelectBox size=\"xs\" />",
+      "type:default": "<SelectBox type=\"default\" />",
+      "type:simple": "<SelectBox type=\"simple\" />"
+    }
+  }
+}

package/data/select.json

@@ -0,0 +1,116 @@
+{
+  "name": "select",
+  "exportName": "Select",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "네이티브 HTML select 래퍼로, 간단한 드롭다운 목록에서 하나의 항목을 선택하는 입력 컴포넌트입니다.",
+  "aliases": [
+    "셀렉트",
+    "드롭다운 선택",
+    "목록 선택",
+    "dropdown select",
+    "카테고리",
+    "정렬",
+    "필터",
+    "Select",
+    "SelectBox",
+    "셀렉트박스",
+    "Dropdown",
+    "드롭다운",
+    "옵션선택",
+    "placeholder",
+    "react-hook-form",
+    "Single Select"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "간단한 목록에서 하나를 선택하는 맥락",
+    "커스텀 드롭다운이 불필요한 단순 선택",
+    "옵션 수 6개 이상이거나 공간이 제한적인 경우"
+  ],
+  "forbiddenRules": [
+    "옵션 2개(반대 의미)이면 Switch 우선",
+    "5개 이하+공간 충분하면 Radio/Checkbox 우선",
+    "30개 이상 옵션을 일반 select로만 제공 금지",
+    "Read only 상태에서 레이어 열림 동작 제공 금지",
+    "Disabled 상태에서 Tooltip/설명 없이 클릭 시도 유도 금지",
+    "말줄임 Chips에 Tooltip 미제공 금지"
+  ],
+  "seeAlso": [
+    "selectbox",
+    "combobox"
+  ],
+  "htmlElement": "select",
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "disabledPlaceholder": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "optionItems": {
+      "type": "string",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/types/dropdown/option\").OptionType[] | undefined"
+    },
+    "placeholder": {
+      "type": "string",
+      "required": false
+    },
+    "register": {
+      "type": "object",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm",
+        "xs"
+      ],
+      "default": "md"
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "default",
+        "simple"
+      ],
+      "default": "default"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-hint-text",
+    "ncua-select",
+    "ncua-select--simple",
+    "ncua-select__content",
+    "ncua-select__tag"
+  ],
+  "usage": {
+    "import": "import { Select } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Select />",
+      "size:md": "<Select size=\"md\" />",
+      "size:sm": "<Select size=\"sm\" />",
+      "size:xs": "<Select size=\"xs\" />",
+      "type:default": "<Select type=\"default\" />",
+      "type:simple": "<Select type=\"simple\" />"
+    }
+  }
+}

package/data/slider.json

@@ -0,0 +1,100 @@
+{
+  "name": "slider",
+  "exportName": "Slider",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "input",
+  "description": "Slider는 연속적 또는 구간 기반 수치를 직관적으로 조절하는 입력 컴포넌트로, 텍스트 입력보다 범위가 명확하고 빠른 조정이 필요하며 시각적 비율이 중요한 경우 사용합니다.",
+  "aliases": [
+    "슬라이더",
+    "Slider",
+    "Range",
+    "Thumb",
+    "Track",
+    "범위선택",
+    "단일값",
+    "min",
+    "max",
+    "step",
+    "labelPosition",
+    "드래그",
+    "키보드조작",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "min/max와 step이 반드시 정의되어야 하며 정밀 수치 입력이 필요한 경우 NumberInput과 조합하거나 대체",
+    "최소값과 최대값이 명확한 경우",
+    "값이 상대적 비율로 이해되는 경우",
+    "빠른 조정을 선호하는 경우",
+    "0~100 범위 기반 수치"
+  ],
+  "forbiddenRules": [
+    "min/max 없이 사용 금지",
+    "step 정의 없이 사용 금지",
+    "값 표시 없이 정밀 값 조정 요구 금지",
+    "정밀 수치 입력 필요한 곳에서 단독 사용 금지",
+    "Range Slider에서 Thumb 교차 허용 금지"
+  ],
+  "seeAlso": [
+    "number-input",
+    "input",
+    "tooltip"
+  ],
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "labelPosition": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "bottom",
+        "top-floating"
+      ]
+    },
+    "max": {
+      "type": "number",
+      "required": false,
+      "default": 100
+    },
+    "min": {
+      "type": "number",
+      "required": false,
+      "default": 0
+    },
+    "onChange": {
+      "type": "function",
+      "required": false
+    },
+    "step": {
+      "type": "number",
+      "required": false,
+      "default": 1
+    },
+    "value": {
+      "type": "string",
+      "required": false,
+      "rawType": "number | [number, number] | undefined",
+      "default": 0
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-slider"
+  ],
+  "usage": {
+    "import": "import { Slider } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Slider />",
+      "labelPosition:bottom": "<Slider labelPosition=\"bottom\" />",
+      "labelPosition:top-floating": "<Slider labelPosition=\"top-floating\" />"
+    }
+  }
+}

package/data/spinner.json

@@ -0,0 +1,94 @@
+{
+  "name": "spinner",
+  "exportName": "Spinner",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "feedback",
+  "description": "Spinner는 데이터 조회, 검색, 업로드, 파일 생성 등 3초 이상 소요되는 처리 과정에서 사용자 불안감을 줄이기 위해 제공되는 피드백 UI입니다.",
+  "aliases": [
+    "Spinner",
+    "스피너",
+    "로딩",
+    "loading",
+    "불확정",
+    "비동기",
+    "대기",
+    "backdrop",
+    "dim",
+    "오버레이",
+    "취소",
+    "장시간",
+    "General",
+    "Long",
+    "NCDS"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "불확정 로딩 상태를 시각적으로 전달",
+    "진행률(%)을 알 수 없는 비동기 작업에서 사용",
+    "진행률이 확정된 경우에는 ProgressBar 또는 ProgressCircle을 사용"
+  ],
+  "forbiddenRules": [
+    "3초 미만 작업에 사용 금지",
+    "확정 진행률에 사용 금지(ProgressBar/ProgressCircle 사용)",
+    "안내 문구 없이 장시간 노출 금지",
+    "오버레이 없이 전체 페이지 로딩 사용 금지",
+    "장식 용도 금지"
+  ],
+  "seeAlso": [
+    "progress-bar",
+    "progress-circle"
+  ],
+  "props": {
+    "as": {
+      "type": "string",
+      "required": false,
+      "rawType": "React.ElementType | undefined",
+      "default": "p"
+    },
+    "backdrop": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "children": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "lg",
+        "md",
+        "sm",
+        "xl",
+        "xs"
+      ],
+      "default": "md"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-spinner",
+    "ncua-spinner--backdrop",
+    "ncua-spinner--lg",
+    "ncua-spinner--md",
+    "ncua-spinner--sm",
+    "ncua-spinner--xl",
+    "ncua-spinner--xs",
+    "ncua-spinner__content",
+    "ncua-spinner__text"
+  ],
+  "usage": {
+    "import": "import { Spinner } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Spinner />",
+      "size:lg": "<Spinner size=\"lg\" />",
+      "size:md": "<Spinner size=\"md\" />",
+      "size:sm": "<Spinner size=\"sm\" />",
+      "size:xl": "<Spinner size=\"xl\" />",
+      "size:xs": "<Spinner size=\"xs\" />"
+    }
+  }
+}

package/data/switch.json

@@ -0,0 +1,109 @@
+{
+  "name": "switch",
+  "exportName": "Switch",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "Switch는 하나의 기능 또는 상태에 대해 180도 다른 두 개의 선택지를 제공하는 토글형 컴포넌트로, 라디오 버튼 방식의 좌/우 영역 선택을 통해 즉각적인 상태 전환을 수행합니다.",
+  "aliases": [
+    "스위치",
+    "Switch",
+    "토글",
+    "Toggle",
+    "On",
+    "Off",
+    "사용함",
+    "사용안함",
+    "이진선택",
+    "즉각전환",
+    "SwitchOption",
+    "SwitchSize",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "선택지가 정확히 2개이고 180도 반대 의미이며 하위 옵션이 없는 경우",
+    "좌측=On 우측=Off를 일관 유지",
+    "테이블 내 사용은 메인/핵심 옵션에 한해 제한적 허용"
+  ],
+  "forbiddenRules": [
+    "다중 옵션 기능에 Switch 사용 금지",
+    "하위 옵션 존재 시 Switch 사용 금지",
+    "강조 스타일로 특정 상태 유도 금지",
+    "3개 이상 선택지에 사용 금지",
+    "Title 영역에 Switch 적용 지양"
+  ],
+  "seeAlso": [
+    "radio",
+    "checkbox",
+    "selectbox",
+    "toggle"
+  ],
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "defaultValue": {
+      "type": "string",
+      "required": false,
+      "rawType": "string | boolean | undefined",
+      "default": "left.value"
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "left": {
+      "type": "object",
+      "required": true
+    },
+    "name": {
+      "type": "string",
+      "required": true
+    },
+    "onChange": {
+      "type": "function",
+      "required": false
+    },
+    "refs": {
+      "type": "object",
+      "required": false
+    },
+    "right": {
+      "type": "object",
+      "required": true
+    },
+    "size": {
+      "type": "string",
+      "required": false,
+      "rawType": "any",
+      "default": "xs"
+    },
+    "value": {
+      "type": "string",
+      "required": false,
+      "rawType": "string | boolean | undefined"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-switch",
+    "ncua-switch--disabled",
+    "ncua-switch__label",
+    "ncua-switch__option",
+    "ncua-switch__option--active",
+    "ncua-switch__option--inactive",
+    "ncua-switch__option--left",
+    "ncua-switch__option--right",
+    "ncua-switch__radio ncua-switch__radio--left",
+    "ncua-switch__radio ncua-switch__radio--right"
+  ],
+  "usage": {
+    "import": "import { Switch } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Switch left=\"\" name=\"\" right=\"\" />"
+    }
+  }
+}