@ncds/ui-admin 1.3.0 → 1.4.1

package/dist/cjs/src/components/progress-bar/components/SegmentLabels.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleLabel = exports.SegmentLabels = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _utils = require("../utils");
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var SegmentLabels = function (_a) {
+  var segments = _a.segments,
+    segmentCount = _a.segmentCount,
+    _b = _a.showZeroLabel,
+    showZeroLabel = _b === void 0 ? false : _b;
+  if (segmentCount >= 2) {
+    return (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-progress-bar__labels--multiple"
+    }, {
+      children: segments.map(function (segment, index) {
+        // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+        if (segment.value === 0 && !showZeroLabel) {
+          return null;
+        }
+        var leftPosition = 0;
+        for (var i = 0; i < index; i++) {
+          leftPosition += segments[i].width;
+        }
+        // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
+        // 그 외에는 중앙에 정렬
+        var isZero = segment.value === 0;
+        // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
+        var labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
+        var transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
+        return (0, _jsxRuntime.jsx)("span", __assign({
+          className: "ncua-progress-bar__label ncua-progress-bar__label--segment ".concat((0, _utils.getLabelColorClass)(segment.color)),
+          style: {
+            left: "".concat(labelPosition, "%"),
+            transform: transform
+          }
+        }, {
+          children: "".concat(segment.value.toFixed(0), "%")
+        }), index);
+      })
+    }));
+  }
+  return null;
+};
+exports.SegmentLabels = SegmentLabels;
+var SingleLabel = function (_a) {
+  var labelType = _a.labelType,
+    displayValue = _a.displayValue,
+    totalValue = _a.totalValue,
+    _b = _a.showZeroLabel,
+    showZeroLabel = _b === void 0 ? false : _b;
+  // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+  if (totalValue === 0 && !showZeroLabel) {
+    return null;
+  }
+  return (0, _jsxRuntime.jsx)("span", __assign({
+    className: "ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType)
+  }, {
+    children: displayValue
+  }));
+};
+exports.SingleLabel = SingleLabel;

package/dist/cjs/src/components/progress-bar/hooks/useProgressBar.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProgressBar = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+/**
+ * segments를 처리하여 프로그레스 바에 표시할 데이터를 계산합니다.
+ */
+var processSegments = function (segments, segmentCount, valueToPercent) {
+  // segment가 2개 이상일 때만 valueToPercent 적용 (기본값: true)
+  var shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
+  var segmentsToProcess = segments;
+  // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
+  if (shouldApplyValueToPercent) {
+    // 원본 값들의 합계 계산
+    var originalTotal_1 = segmentsToProcess.reduce(function (sum, seg) {
+      return sum + Number(seg.value);
+    }, 0);
+    if (originalTotal_1 > 0) {
+      // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
+      segmentsToProcess = segmentsToProcess.map(function (segment) {
+        return {
+          value: segment.value / originalTotal_1 * 100,
+          color: segment.color
+        };
+      });
+    }
+  }
+  // 각 값 제한 (0-100 범위)
+  var limitedSegments = segmentsToProcess.map(function (segment) {
+    return {
+      value: (0, _utils.clampValue)(segment.value),
+      color: segment.color
+    };
+  });
+  // 전체 합계 계산
+  var actualTotal = limitedSegments.reduce(function (sum, seg) {
+    return sum + seg.value;
+  }, 0);
+  var total = Math.min(actualTotal, 100);
+  // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
+  var processed = limitedSegments.map(function (segment) {
+    return __assign(__assign({}, segment), {
+      width: actualTotal > 0 ? segment.value / actualTotal * total : 0
+    });
+  });
+  return {
+    totalValue: total,
+    displayValue: "".concat(total.toFixed(0), "%"),
+    processedSegments: processed,
+    shouldSpaceOut: false // 항상 왼쪽에 붙도록 통일
+  };
+};
+var useProgressBar = function (label, value, segments, valueToPercent) {
+  var _a;
+  var hasSegments = Boolean(segments && segments.length > 0);
+  var segmentCount = (_a = segments === null || segments === void 0 ? void 0 : segments.length) !== null && _a !== void 0 ? _a : 0;
+  var _b = (0, _react.useMemo)(function () {
+      // segments가 있을 때는 각 값을 제한하고 전체 합계를 계산
+      // value는 무시되며, 각 segment의 값을 value로 처리
+      if (hasSegments) {
+        return processSegments(segments, segmentCount, valueToPercent);
+      }
+      // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
+      if (value !== undefined) {
+        var clamped = (0, _utils.clampValue)(value);
+        return {
+          totalValue: clamped,
+          displayValue: "".concat(clamped.toFixed(0), "%"),
+          processedSegments: [],
+          shouldSpaceOut: false
+        };
+      }
+      return {
+        totalValue: 0,
+        displayValue: '0%',
+        processedSegments: [],
+        shouldSpaceOut: false
+      };
+    }, [hasSegments, segments, segmentCount, value, valueToPercent]),
+    totalValue = _b.totalValue,
+    displayValue = _b.displayValue,
+    processedSegments = _b.processedSegments,
+    shouldSpaceOut = _b.shouldSpaceOut;
+  // segment의 개수가 2이상일때는 bottom 라벨로 고정
+  var effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
+  var progressValueStyle = (0, _react.useMemo)(function () {
+    if (effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float') {
+      return {
+        '--progress-value': "".concat(totalValue, "%")
+      };
+    }
+    return undefined;
+  }, [effectiveLabel, totalValue]);
+  return {
+    totalValue: totalValue,
+    displayValue: displayValue,
+    processedSegments: processedSegments,
+    effectiveLabel: effectiveLabel,
+    progressValueStyle: progressValueStyle,
+    hasSegments: hasSegments,
+    segmentCount: segmentCount,
+    shouldSpaceOut: shouldSpaceOut
+  };
+};
+exports.useProgressBar = useProgressBar;

package/dist/cjs/src/components/progress-bar/index.js

@@ -13,4 +13,15 @@ Object.keys(_ProgressBar).forEach(function (key) {
       return _ProgressBar[key];
     }
   });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
 });

package/dist/cjs/src/components/progress-bar/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/src/components/progress-bar/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelColorClass = exports.getFillColorClass = exports.clampValue = void 0;
+/**
+ * 색상 이름을 fill 색상 클래스명으로 변환
+ */
+var getFillColorClass = function (color) {
+  if (!color) return '';
+  var normalizedColor = color.toLowerCase().trim();
+  return "ncua-progress-bar__fill--color-".concat(normalizedColor);
+};
+/**
+ * 색상 이름을 label 색상 클래스명으로 변환
+ */
+exports.getFillColorClass = getFillColorClass;
+var getLabelColorClass = function (color) {
+  if (!color) return '';
+  var normalizedColor = color.toLowerCase().trim();
+  return "ncua-progress-bar__label--color-".concat(normalizedColor);
+};
+/**
+ * 값을 0-100 범위로 제한
+ */
+exports.getLabelColorClass = getLabelColorClass;
+var clampValue = function (value) {
+  return Math.min(Math.max(0, value), 100);
+};
+exports.clampValue = clampValue;

package/dist/cjs/src/components/radio/Radio.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Radio = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _RadioInput = require("./RadioInput");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -26,7 +27,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-var Radio = function (_a) {
+var Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'xs' : _b,
     text = _a.text,
@@ -34,9 +35,8 @@ var Radio = function (_a) {
     disabled = _a.disabled,
     checked = _a.checked,
     className = _a.className,
-    radioRef = _a.radioRef,
     onChange = _a.onChange,
-    props = __rest(_a, ["size", "text", "supportText", "disabled", "checked", "className", "radioRef", "onChange"]);
+    props = __rest(_a, ["size", "text", "supportText", "disabled", "checked", "className", "onChange"]);
   return (0, _jsxRuntime.jsxs)("label", __assign({
     className: (0, _classnames.default)('ncua-radio-field', "ncua-radio-field--".concat(size), {
       'has-text': text
@@ -44,7 +44,7 @@ var Radio = function (_a) {
   }, {
     children: [(0, _jsxRuntime.jsx)(_RadioInput.RadioInput, __assign({
       size: size,
-      ref: radioRef,
+      ref: ref,
       checked: checked,
       disabled: disabled,
       onChange: onChange,
@@ -61,5 +61,4 @@ var Radio = function (_a) {
       }))]
     })]
   }));
-};
-exports.Radio = Radio;
+});

package/dist/cjs/src/components/select/Select.js

@@ -47,21 +47,24 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
     value = _a.value,
     optionItems = _a.optionItems,
     register = _a.register,
-    props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
+    _f = _a.disabled,
+    disabled = _f === void 0 ? false : _f,
+    props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register", "disabled"]);
   return (0, _jsxRuntime.jsxs)("span", __assign({
     className: (0, _classnames.default)('ncua-select', {
       destructive: destructive,
       'ncua-select--simple': type === 'simple'
-    }, className)
+    }, className, "ncua-select--".concat(size))
   }, {
     children: [(0, _jsxRuntime.jsx)("span", __assign({
-      className: (0, _classnames.default)('ncua-select__content', "ncua-select--".concat(size))
+      className: "ncua-select__content"
     }, {
       children: (0, _jsxRuntime.jsxs)("select", __assign({
         value: value,
         ref: ref,
         id: id,
-        className: (0, _classnames.default)('ncua-select__tag', className)
+        className: (0, _classnames.default)('ncua-select__tag', className),
+        disabled: disabled
       }, register, props, {
         children: [placeholder && (0, _jsxRuntime.jsx)("option", __assign({
           value: "",

package/dist/cjs/src/components/select-dropdown/SelectDropdown.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectDropdown = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _button = require("../button");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var isOpen = _a.isOpen,
+    _b = _a.direction,
+    direction = _b === void 0 ? 'down' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'xs' : _c,
+    options = _a.options,
+    value = _a.value,
+    focusedIndex = _a.focusedIndex,
+    maxHeight = _a.maxHeight,
+    _d = _a.listboxId,
+    listboxId = _d === void 0 ? 'selectbox-options-default' : _d,
+    onOptionSelect = _a.onOptionSelect,
+    onMouseMove = _a.onMouseMove,
+    isKeyboardNavigation = _a.isKeyboardNavigation,
+    onOptionHover = _a.onOptionHover,
+    children = _a.children,
+    _e = _a.multiple,
+    multiple = _e === void 0 ? false : _e,
+    _f = _a.showFooterButtons,
+    showFooterButtons = _f === void 0 ? false : _f,
+    _g = _a.selectAllButtonText,
+    selectAllButtonText = _g === void 0 ? '전체 선택' : _g,
+    onSelectAll = _a.onSelectAll,
+    onEdit = _a.onEdit,
+    onComplete = _a.onComplete,
+    className = _a.className,
+    activeDescendantId = _a.activeDescendantId,
+    componentType = _a.componentType,
+    props = __rest(_a, ["isOpen", "direction", "size", "options", "value", "focusedIndex", "maxHeight", "listboxId", "onOptionSelect", "onMouseMove", "isKeyboardNavigation", "onOptionHover", "children", "multiple", "showFooterButtons", "selectAllButtonText", "onSelectAll", "onEdit", "onComplete", "className", "activeDescendantId", "componentType"]);
+  if (!isOpen) return null;
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    ref: ref,
+    className: (0, _classnames.default)('ncua-select-dropdown', "ncua-select-dropdown--".concat(direction), "ncua-select-dropdown--".concat(size), {
+      'ncua-select-dropdown--multiple': multiple,
+      'ncua-select-dropdown--selectbox-single': componentType === 'selectbox' && !multiple
+    }, className),
+    onMouseMove: onMouseMove,
+    onClick: function (e) {
+      return e.stopPropagation();
+    }
+  }, props, {
+    children: [(0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-select-dropdown__content"
+    }, {
+      children: (0, _jsxRuntime.jsxs)("ul", __assign({
+        className: "ncua-select-dropdown__options",
+        role: "listbox",
+        id: listboxId,
+        style: {
+          maxHeight: maxHeight
+        }
+      }, {
+        children: [options.map(function (option, index) {
+          var isFocused = index === focusedIndex;
+          var optionId = "".concat(listboxId, "-").concat(option.id);
+          var isSelected = multiple && Array.isArray(value) ? value.includes(option.id) : option.id === value;
+          var handleMouseEnter = function () {
+            onOptionHover === null || onOptionHover === void 0 ? void 0 : onOptionHover(index);
+          };
+          return (0, _jsxRuntime.jsx)("li", __assign({
+            id: optionId,
+            className: (0, _classnames.default)('ncua-select-dropdown__option', {
+              'ncua-select-dropdown__option--selected': isSelected,
+              'ncua-select-dropdown__option--focused': isFocused
+            }),
+            onClick: function () {
+              return onOptionSelect(option);
+            },
+            onMouseEnter: handleMouseEnter,
+            role: "option",
+            "aria-selected": isSelected
+          }, {
+            children: (0, _jsxRuntime.jsx)("span", __assign({
+              className: "ncua-select-dropdown__option-text"
+            }, {
+              children: option.label
+            }))
+          }), option.id);
+        }), children]
+      }))
+    })), showFooterButtons && (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-select-dropdown__footer"
+    }, {
+      children: (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-select-dropdown__footer-buttons"
+      }, {
+        children: [(0, _jsxRuntime.jsx)("div", __assign({
+          className: "ncua-select-dropdown__footer-left"
+        }, {
+          children: multiple && (0, _jsxRuntime.jsx)(_button.Button, {
+            label: selectAllButtonText,
+            hierarchy: "text",
+            size: "xs",
+            onClick: onSelectAll,
+            underline: true
+          })
+        })), (0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-select-dropdown__footer-right"
+        }, {
+          children: [(0, _jsxRuntime.jsx)(_button.Button, {
+            label: "\uD3B8\uC9D1",
+            hierarchy: "secondary-gray",
+            size: "xs",
+            onClick: onEdit
+          }), multiple && (0, _jsxRuntime.jsx)(_button.Button, {
+            label: "\uC120\uD0DD \uC644\uB8CC",
+            hierarchy: "secondary",
+            size: "xs",
+            onClick: onComplete
+          })]
+        }))]
+      }))
+    }))]
+  }));
+});
+SelectDropdown.displayName = 'SelectDropdown';

package/dist/cjs/src/components/select-dropdown/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectDropdown", {
+  enumerable: true,
+  get: function () {
+    return _SelectDropdown.SelectDropdown;
+  }
+});
+var _SelectDropdown = require("./SelectDropdown");