@ncds/ui-admin 1.7.0 → 1.8.1

package/dist/cjs/src/components/tag/Tag.js

@@ -11,106 +11,92 @@ var _react = require("react");
 var _color = require("../../../constant/color");
 var _dot = require("../dot");
 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 MARGIN = 10;
-var DEFAULT_TOOLTIP_WIDTH = 200;
-var DEFAULT_TOOLTIP_HEIGHT = 60;
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
 // 위치 계산 로직
-var calculateOptimalPosition = function (triggerElement, tooltipElement) {
-  var triggerRect = triggerElement.getBoundingClientRect();
-  var tooltipRect = tooltipElement.getBoundingClientRect();
-  var viewportWidth = window.innerWidth,
-    viewportHeight = window.innerHeight;
-  var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-  var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-  var spaces = {
+const calculateOptimalPosition = (triggerElement, tooltipElement) => {
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const tooltipRect = tooltipElement.getBoundingClientRect();
+  const {
+    innerWidth: viewportWidth,
+    innerHeight: viewportHeight
+  } = window;
+  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  const spaces = {
     top: triggerRect.top,
     bottom: viewportHeight - triggerRect.bottom,
     left: triggerRect.left,
     right: viewportWidth - triggerRect.right
   };
   // 위/아래 공간을 먼저 확인하고 우선순위 결정
-  var hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+  const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
   // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
-  var positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
-  for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
-    var position = positions_1[_i];
-    var isTop = position.includes('top');
-    var isRight = position.includes('right');
-    var hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
-    var hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
+  const positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+  for (const position of positions) {
+    const isTop = position.includes('top');
+    const isRight = position.includes('right');
+    const hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
+    const hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
     : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
     if (hasVerticalSpace && hasHorizontalSpace) {
       return position;
     }
   }
   // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
-  var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+  const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
   return fallbackPosition;
 };
-var Tag = function (_a) {
-  var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
-    icon = _a.icon,
-    text = _a.text,
-    count = _a.count,
-    close = _a.close,
-    onButtonClick = _a.onButtonClick,
-    _c = _a.maxLength,
-    maxLength = _c === void 0 ? 20 : _c;
-  var _d = (0, _react.useState)(false),
-    isTooltipVisible = _d[0],
-    setIsTooltipVisible = _d[1];
-  var _e = (0, _react.useState)('top-right'),
-    calculatedPosition = _e[0],
-    setCalculatedPosition = _e[1];
-  var tagRef = (0, _react.useRef)(null);
-  var tooltipRef = (0, _react.useRef)(null);
-  var iconSize = {
+const Tag = _ref => {
+  let {
+    size = 'sm',
+    icon,
+    text,
+    count,
+    close,
+    onButtonClick,
+    maxLength = 20
+  } = _ref;
+  const [isTooltipVisible, setIsTooltipVisible] = (0, _react.useState)(false);
+  const [calculatedPosition, setCalculatedPosition] = (0, _react.useState)('top-right');
+  const tagRef = (0, _react.useRef)(null);
+  const tooltipRef = (0, _react.useRef)(null);
+  const iconSize = {
     sm: 14,
     md: 16
   };
   // 텍스트 길이 체크 및 말줄임 처리
-  var shouldTruncate = text.length > maxLength;
-  var displayText = shouldTruncate ? "".concat(text.slice(0, maxLength - 2), "...") : text;
-  var handleMouseEnter = (0, _react.useCallback)(function () {
+  const shouldTruncate = text.length > maxLength;
+  const displayText = shouldTruncate ? `${text.slice(0, maxLength - 2)}...` : text;
+  const handleMouseEnter = (0, _react.useCallback)(() => {
     if (shouldTruncate) {
       setIsTooltipVisible(true);
       // 간단한 위치 계산 - 기본값 사용
       if (tagRef.current && tooltipRef.current) {
-        var optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
+        const optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
         setCalculatedPosition(optimalPosition);
       } else {
         // ref가 없으면 다음 렌더링 사이클에서 시도
-        setTimeout(function () {
+        setTimeout(() => {
           if (tagRef.current) {
             // tooltipRef가 없어도 tagRef만으로 계산
-            var dummyTooltipElement = document.createElement('div');
-            dummyTooltipElement.style.width = "".concat(DEFAULT_TOOLTIP_WIDTH, "px");
-            dummyTooltipElement.style.height = "".concat(DEFAULT_TOOLTIP_HEIGHT, "px");
-            var optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
+            const dummyTooltipElement = document.createElement('div');
+            dummyTooltipElement.style.width = `${DEFAULT_TOOLTIP_WIDTH}px`;
+            dummyTooltipElement.style.height = `${DEFAULT_TOOLTIP_HEIGHT}px`;
+            const optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
             setCalculatedPosition(optimalPosition);
           }
         }, 0);
       }
     }
   }, [shouldTruncate]);
-  var handleMouseLeave = (0, _react.useCallback)(function () {
+  const handleMouseLeave = (0, _react.useCallback)(() => {
     setIsTooltipVisible(false);
   }, []);
-  var sideSlotRender = function (slot) {
-    var _a;
+  const sideSlotRender = slot => {
     if (slot.type === 'icon') {
-      var SlotIcon = slot.icon;
+      const SlotIcon = slot.icon;
       return (0, _jsxRuntime.jsx)(SlotIcon, {
         width: iconSize[size],
         height: iconSize[size],
@@ -120,47 +106,41 @@ var Tag = function (_a) {
     if (slot.type === 'dot') {
       return (0, _jsxRuntime.jsx)(_dot.Dot, {
         color: slot.color,
-        size: (_a = slot.size) !== null && _a !== void 0 ? _a : 'sm'
+        size: slot.size ?? 'sm'
       });
     }
     return slot.children;
   };
-  return (0, _jsxRuntime.jsxs)("span", __assign({
+  return (0, _jsxRuntime.jsxs)("span", {
     ref: tagRef,
-    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size), {
+    className: (0, _classnames.default)('ncua-tag', `ncua-tag--${size}`, {
       'ncua-tag--truncated': shouldTruncate
     }),
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, {
-    children: [icon && sideSlotRender(icon), (0, _jsxRuntime.jsx)("span", __assign({
-      className: "ncua-tag__text"
-    }, {
+    onMouseLeave: handleMouseLeave,
+    children: [icon && sideSlotRender(icon), (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-tag__text",
       children: displayText
-    })), count && (0, _jsxRuntime.jsx)("span", __assign({
-      className: "ncua-tag__count"
-    }, {
+    }), count && (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-tag__count",
       children: count
-    })), close && (0, _jsxRuntime.jsx)("button", __assign({
+    }), close && (0, _jsxRuntime.jsx)("button", {
       type: "button",
       className: "ncua-tag__close",
-      onClick: onButtonClick
-    }, {
+      onClick: onButtonClick,
       children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
         color: _color.COLOR.gray300,
         width: iconSize[size],
         height: iconSize[size]
       })
-    })), shouldTruncate && isTooltipVisible && (0, _jsxRuntime.jsx)("span", __assign({
+    }), shouldTruncate && isTooltipVisible && (0, _jsxRuntime.jsx)("span", {
       ref: tooltipRef,
-      className: (0, _classnames.default)('ncua-tag__tooltip', "ncua-tag__tooltip--".concat(calculatedPosition))
-    }, {
-      children: (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-tag__tooltip-content"
-      }, {
+      className: (0, _classnames.default)('ncua-tag__tooltip', `ncua-tag__tooltip--${calculatedPosition}`),
+      children: (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-tag__tooltip-content",
         children: text
-      }))
-    }))]
-  }));
+      })
+    })]
+  });
 };
 exports.Tag = Tag;

package/dist/cjs/src/components/textarea/Textarea.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Textarea = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _HintText = require("../shared/hintText/HintText");
+var _Label = require("../shared/label/Label");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    className,
+    size = 'xs',
+    label,
+    required,
+    disabled,
+    hintText,
+    characterCount,
+    destructive,
+    ...props
+  } = _ref;
+  const textareaRef = (0, _react.useRef)(null);
+  const [textCount, setTextCount] = (0, _react.useState)(0);
+  const shouldShowHintArea = hintText || characterCount;
+  (0, _react.useEffect)(() => {
+    if (textareaRef.current && characterCount) {
+      setTextCount(textareaRef.current.value.length);
+      const handleInput = () => {
+        setTextCount(textareaRef.current?.value.length ?? 0);
+      };
+      textareaRef.current.addEventListener('input', handleInput);
+      return () => {
+        textareaRef.current?.removeEventListener('input', handleInput);
+      };
+    }
+  }, [characterCount]);
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-input', 'ncua-input--textarea', `ncua-input--textarea--${size}`, {
+      destructive: destructive,
+      'is-disabled': disabled
+    }, className),
+    children: [label && (0, _jsxRuntime.jsx)(_Label.Label, {
+      htmlFor: props.id,
+      isRequired: required,
+      children: label
+    }), (0, _jsxRuntime.jsx)("textarea", {
+      ref: node => {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        textareaRef.current = node;
+      },
+      className: "ncua-input__textarea",
+      disabled: disabled,
+      ...props
+    }), shouldShowHintArea && (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-input__text-count-wrap",
+      children: [hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+        as: "div",
+        destructive: destructive,
+        children: hintText
+      }), characterCount && (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-input__text-count",
+        children: (0, _jsxRuntime.jsxs)("span", {
+          className: "ncua-input__text-count-text",
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: "ncua-input__text-count-text-count",
+            children: textCount
+          }), "/", props.maxLength ?? 0]
+        })
+      })]
+    })]
+  });
+});

package/dist/cjs/src/components/textarea/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Textarea = require("./Textarea");
+Object.keys(_Textarea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Textarea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Textarea[key];
+    }
+  });
+});

package/dist/cjs/src/components/toggle/Toggle.js

@@ -7,66 +7,42 @@ exports.Toggle = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 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 Toggle = function (_a) {
-  var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
-    _c = _a.text,
-    text = _c === void 0 ? '' : _c,
-    _d = _a.supportText,
-    supportText = _d === void 0 ? '' : _d,
-    _e = _a.disabled,
-    disabled = _e === void 0 ? false : _e,
-    onChange = _a.onChange,
-    className = _a.className,
-    props = __rest(_a, ["size", "text", "supportText", "disabled", "onChange", "className"]);
-  return (0, _jsxRuntime.jsxs)("label", __assign({
-    className: (0, _classnames.default)('ncua-toggle', "ncua-toggle--".concat(size), {
+const Toggle = _ref => {
+  let {
+    size = 'sm',
+    text = '',
+    supportText = '',
+    disabled = false,
+    onChange,
+    className,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsxs)("label", {
+    className: (0, _classnames.default)('ncua-toggle', `ncua-toggle--${size}`, {
       'ncua-toggle--disabled': disabled
-    }, className)
-  }, {
-    children: [(0, _jsxRuntime.jsx)("input", __assign({
+    }, className),
+    children: [(0, _jsxRuntime.jsx)("input", {
       type: "checkbox",
       className: "ncua-toggle__input",
-      checked: props === null || props === void 0 ? void 0 : props.checked,
+      checked: props?.checked,
       disabled: disabled,
-      onChange: onChange
-    }, props)), (0, _jsxRuntime.jsx)("span", __assign({
-      className: "ncua-toggle__switch"
-    }, {
+      onChange: onChange,
+      ...props
+    }), (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-toggle__switch",
       children: (0, _jsxRuntime.jsx)("span", {
         className: "ncua-toggle__slider"
       })
-    })), text && (0, _jsxRuntime.jsxs)("span", __assign({
-      className: "ncua-toggle__text-wrapper"
-    }, {
-      children: [(0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-toggle__text"
-      }, {
+    }), text && (0, _jsxRuntime.jsxs)("span", {
+      className: "ncua-toggle__text-wrapper",
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: "ncua-toggle__text",
         children: text
-      })), supportText && (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-toggle__support-text"
-      }, {
+      }), supportText && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-toggle__support-text",
         children: supportText
-      }))]
-    }))]
-  }));
+      })]
+    })]
+  });
 };
 exports.Toggle = Toggle;