@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/cjs/src/hooks/index.js

@@ -3,33 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  useCallbackRef: true,
-  useMediaQuery: true,
-  useMergeRefs: true
-};
-Object.defineProperty(exports, "useCallbackRef", {
-  enumerable: true,
-  get: function () {
-    return _useCallbackRef.useCallbackRef;
-  }
-});
-Object.defineProperty(exports, "useMediaQuery", {
-  enumerable: true,
-  get: function () {
-    return _useMediaQuery.useMediaQuery;
-  }
-});
-Object.defineProperty(exports, "useMergeRefs", {
-  enumerable: true,
-  get: function () {
-    return _useMergeRefs.useMergeRefs;
-  }
-});
 var _dropdown = require("./dropdown");
 Object.keys(_dropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _dropdown[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,5 +15,35 @@ Object.keys(_dropdown).forEach(function (key) {
   });
 });
 var _useCallbackRef = require("./useCallbackRef");
+Object.keys(_useCallbackRef).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useCallbackRef[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useCallbackRef[key];
+    }
+  });
+});
 var _useMediaQuery = require("./useMediaQuery");
-var _useMergeRefs = require("./useMergeRefs");
+Object.keys(_useMediaQuery).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMediaQuery[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useMediaQuery[key];
+    }
+  });
+});
+var _useMergeRefs = require("./useMergeRefs");
+Object.keys(_useMergeRefs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMergeRefs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useMergeRefs[key];
+    }
+  });
+});

package/dist/cjs/vitest.config.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _config = require("vitest/config");
+var _default = exports.default = (0, _config.defineConfig)({
+  test: {
+    include: ['scripts/**/__tests__/**/*.test.ts', 'src/**/__tests__/**/*.test.ts', 'assets/scripts/**/__tests__/**/*.test.ts'],
+    environment: 'node'
+  }
+});

package/dist/esm/assets/scripts/slider.js

@@ -1,3 +1,7 @@
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+const PERCENT = 100;
 export class Slider {
   constructor(element, options) {
     this.activeHandle = null;
@@ -40,17 +44,19 @@ export class Slider {
       this.isDragging = false;
     };
     this.element = element;
-    this.options = Object.assign({
-      min: 0,
-      max: 100,
-      step: 1,
-      value: 0,
-      disabled: false
-    }, options);
+    // 화이트리스트 기반 옵션 복사. SliderOptions에 정의된 키만 받아들여
+    // __proto__, constructor, prototype 같은 위험 키가 외부 입력으로 들어와도
+    // Object.prototype을 오염시킬 수 없다 (CWE-1321 Prototype Pollution 차단).
+    this.options = {
+      min: Number(options.min ?? DEFAULT_MIN),
+      max: Number(options.max ?? DEFAULT_MAX),
+      step: Number(options.step ?? DEFAULT_STEP),
+      value: options.value ?? DEFAULT_MIN,
+      onChange: options.onChange,
+      labelPosition: options.labelPosition,
+      disabled: options.disabled ?? false
+    };
     this.value = this.options.value;
-    this.options.min = Number(this.options.min);
-    this.options.max = Number(this.options.max);
-    this.options.step = Number(this.options.step);
     this.init();
   }
   init() {
@@ -104,19 +110,20 @@ export class Slider {
     });
     if (this.options.labelPosition === 'bottom') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label`;
+      label.className = 'ncua-slider__label';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     if (this.options.labelPosition === 'top-floating') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label ncua-slider__label--tooltip`;
+      label.className = 'ncua-slider__label ncua-slider__label--tooltip';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     this.element.appendChild(handle);
     this.handleElements[index] = handle;
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 단일/range 분기와 라벨/progress 업데이트를 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   updateHandlePositions() {
     if (Array.isArray(this.value)) {
       // Range slider
@@ -174,14 +181,15 @@ export class Slider {
     }
   }
   getPositionFromValue(value) {
-    return (value - this.options.min) / (this.options.max - this.options.min) * 100;
+    return (value - this.options.min) / (this.options.max - this.options.min) * PERCENT;
   }
   getValueFromPosition(position) {
-    const percentage = Math.min(Math.max(position, 0), 100);
-    const exactValue = this.options.min + percentage / 100 * (this.options.max - this.options.min);
+    const percentage = Math.min(Math.max(position, 0), PERCENT);
+    const exactValue = this.options.min + percentage / PERCENT * (this.options.max - this.options.min);
     const steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
     return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 핸들/트랙 클릭 분기와 가까운 핸들 결정 로직을 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   handleInteractionStart(clientX, target) {
     // 슬라이더 영역 내부를 클릭/터치한 경우
     if (target.closest('.ncua-slider')) {
@@ -193,12 +201,12 @@ export class Slider {
         } else if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.min) {
           this.activeHandle = 1;
         } else {
-          this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+          this.activeHandle = Number.parseInt(handleElement.dataset.index || '0', 10);
         }
       } else {
         // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
         const rect = this.element.getBoundingClientRect();
-        const position = (clientX - rect.left) / rect.width * 100;
+        const position = (clientX - rect.left) / rect.width * PERCENT;
         if (Array.isArray(this.value)) {
           const [leftValue, rightValue] = this.value;
           const leftPosition = this.getPositionFromValue(leftValue);
@@ -223,7 +231,7 @@ export class Slider {
   updateValueFromClientX(clientX) {
     if (!this.element || this.activeHandle === null) return;
     const rect = this.element.getBoundingClientRect();
-    const position = (clientX - rect.left) / rect.width * 100;
+    const position = (clientX - rect.left) / rect.width * PERCENT;
     const newValue = this.getValueFromPosition(position);
     const prevValue = this.value;
     if (Array.isArray(this.value)) {

package/dist/esm/src/components/action/button/Button.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { createElement, forwardRef } from 'react';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
+export const svgSize = {
+  xxs: 12,
+  xs: 14,
+  sm: 16,
+  md: 20
+};
+export const iconOnlySvgSize = {
+  xxs: 14,
+  xs: 16,
+  sm: 20,
+  md: 20
+};
+export const dotSize = {
+  xxs: 'sm',
+  xs: 'sm',
+  sm: 'md',
+  md: 'md'
+};
+const loadableHierarchies = ['primary', 'secondary', 'secondary-gray', 'destructive'];
+export const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    size = 'xs',
+    children,
+    onlyIcon,
+    disabled,
+    loading,
+    className,
+    hierarchy = 'secondary-gray',
+    label,
+    leadingIcon,
+    trailingIcon,
+    underline = false,
+    ...restProps
+  } = props;
+  const isLoading = loading && !onlyIcon && loadableHierarchies.includes(hierarchy);
+  const isDisabled = disabled || isLoading;
+  const sideSlotRender = slot => {
+    const iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
+    if (slot.type === 'icon') {
+      const Icon = slot.icon;
+      return _jsx(Icon, {
+        height: slot.size ?? iconSize,
+        width: slot.size ?? iconSize,
+        color: slot.color ? COLOR[slot.color] : undefined
+      });
+    }
+    if (slot.type === 'dot') {
+      return _jsx(Dot, {
+        color: slot.color,
+        size: slot.size ?? dotSize[size]
+      });
+    }
+    return slot.children;
+  };
+  return /*#__PURE__*/createElement('button', {
+    className: classnames('ncua-btn', `ncua-btn--${size}`, {
+      'only-icon': onlyIcon,
+      'is-disable': isDisabled,
+      'is-loading': isLoading,
+      'has-underline': underline
+    }, className, hierarchy && `ncua-btn--${hierarchy}`),
+    disabled: isDisabled,
+    'aria-busy': isLoading || undefined,
+    ...restProps,
+    ref
+  }, _jsxs(_Fragment, {
+    children: [isLoading ? _jsx("span", {
+      className: "ncua-btn__spinner"
+    }) : leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && _jsx("span", {
+      className: "ncua-btn__label",
+      children: label
+    }), children, trailingIcon && sideSlotRender(trailingIcon)]
+  }));
+});

package/dist/esm/src/components/action/button-group/ButtonGroup.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import React, { createElement } from 'react';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
+const svgSize = {
+  xxs: 12,
+  xs: 16,
+  sm: 16,
+  md: 20
+};
+const dotSize = {
+  xxs: 'sm',
+  xs: 'sm',
+  sm: 'md',
+  md: 'md'
+};
+const ButtonGroup = _ref => {
+  let {
+    children,
+    className,
+    hasBorder = true,
+    fullWidth = false,
+    size = 'xs',
+    onlyIcon = false,
+    disabled = false
+  } = _ref;
+  return _jsx("div", {
+    className: classNames('ncua-button-group', `ncua-button-group--${size}`, {
+      'has-border': hasBorder,
+      'full-width': fullWidth
+    }, className),
+    children: React.Children.map(children, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return null;
+      }
+      return /*#__PURE__*/React.cloneElement(child, {
+        onlyIcon,
+        size,
+        disabled: disabled || child.props.disabled
+      });
+    })
+  });
+};
+ButtonGroup.Item = _ref2 => {
+  let {
+    label,
+    size = 'xs',
+    onlyIcon,
+    icon,
+    disabled,
+    children,
+    isCurrent,
+    className,
+    ...props
+  } = _ref2;
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (icon.type === 'icon') {
+      const IconComponent = icon.icon;
+      return _jsx(IconComponent, {
+        width: icon.size ?? svgSize[size],
+        height: icon.size ?? svgSize[size],
+        color: icon.color ? COLOR[icon.color] : 'currentColor'
+      });
+    }
+    if (icon.type === 'dot') {
+      return _jsx(Dot, {
+        color: icon.color,
+        size: icon.size ?? dotSize[size]
+      });
+    }
+    return icon.children;
+  };
+  const position = icon?.position ?? 'leading';
+  return /*#__PURE__*/createElement('button', {
+    className: classNames('ncua-button-group__item', {
+      'is-only-icon': onlyIcon
+    }, {
+      'is-current': isCurrent
+    }, className),
+    disabled,
+    type: 'button',
+    ...props
+  }, _jsxs(_Fragment, {
+    children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()]
+  }));
+};
+export { ButtonGroup };

package/dist/esm/src/components/feedback-and-status/badge/index.js

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './utils';

package/dist/esm/src/components/feedback-and-status/badge/utils.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot/Dot';
+const DEFAULT_DOT_COLOR = 'neutral';
+const sideSlotRender = _ref => {
+  let {
+    slot,
+    defaultIconSize
+  } = _ref;
+  if (slot.type === 'icon') {
+    const Icon = slot.icon;
+    return _jsx(Icon, {
+      height: slot.size ?? defaultIconSize,
+      width: slot.size ?? defaultIconSize,
+      color: slot.color ? COLOR[slot.color] : undefined
+    });
+  }
+  if (slot.type === 'dot') {
+    return _jsx(Dot, {
+      color: slot.color ?? DEFAULT_DOT_COLOR,
+      size: slot.size ?? 'sm'
+    });
+  }
+  return slot.children;
+};
+export { sideSlotRender };

package/dist/esm/src/components/feedback-and-status/empty-state/EmptyState.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../action/button/Button';
+export const EmptyState = _ref => {
+  let {
+    title,
+    description,
+    buttons
+  } = _ref;
+  const emptyStateButtons = buttons ? Array.isArray(buttons) ? buttons : [buttons] : [];
+  return _jsxs("div", {
+    className: "ncua-empty-state",
+    children: [_jsx("p", {
+      className: "ncua-empty-state__title",
+      children: title
+    }), _jsx("span", {
+      className: "ncua-empty-state__description",
+      children: description
+    }), emptyStateButtons.length > 0 && _jsx("div", {
+      className: "ncua-empty-state__button-group",
+      children: emptyStateButtons.map(_ref2 => {
+        let {
+          size,
+          label,
+          ...rest
+        } = _ref2;
+        return _jsx(Button, {
+          size: size ?? 'xs',
+          label: label,
+          ...rest
+        }, label);
+      })
+    })]
+  });
+};

package/dist/esm/src/components/feedback-and-status/progress-bar/components/index.js

@@ -0,0 +1,2 @@
+export * from './SegmentBar';
+export * from './SegmentLabels';

package/dist/esm/src/components/feedback-and-status/progress-bar/hooks/index.js

@@ -0,0 +1 @@
+export * from './useProgressBar';

package/dist/esm/src/components/feedback-and-status/progress-bar/index.js

@@ -0,0 +1,5 @@
+export * from './ProgressBar';
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './utils';

package/dist/esm/src/components/feedback-and-status/tag/Tag.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XClose } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { useCallback, useRef, useState } from 'react';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
+// 위치 계산 로직
+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
+  };
+  // 위/아래 공간을 먼저 확인하고 우선순위 결정
+  const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+  // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
+  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;
+    }
+  }
+  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
+  const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+  return fallbackPosition;
+};
+export const Tag = _ref => {
+  let {
+    size = 'sm',
+    icon,
+    text,
+    count,
+    close,
+    onButtonClick,
+    maxLength = 20
+  } = _ref;
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [calculatedPosition, setCalculatedPosition] = useState('top-right');
+  const tagRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const iconSize = {
+    sm: 14,
+    md: 16
+  };
+  // 텍스트 길이 체크 및 말줄임 처리
+  const shouldTruncate = text.length > maxLength;
+  const displayText = shouldTruncate ? `${text.slice(0, maxLength - 2)}...` : text;
+  const handleMouseEnter = useCallback(() => {
+    if (shouldTruncate) {
+      setIsTooltipVisible(true);
+      // 간단한 위치 계산 - 기본값 사용
+      if (tagRef.current && tooltipRef.current) {
+        const optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
+        setCalculatedPosition(optimalPosition);
+      } else {
+        // ref가 없으면 다음 렌더링 사이클에서 시도
+        setTimeout(() => {
+          if (tagRef.current) {
+            // tooltipRef가 없어도 tagRef만으로 계산
+            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]);
+  const handleMouseLeave = useCallback(() => {
+    setIsTooltipVisible(false);
+  }, []);
+  const sideSlotRender = slot => {
+    if (slot.type === 'icon') {
+      const SlotIcon = slot.icon;
+      return _jsx(SlotIcon, {
+        width: iconSize[size],
+        height: iconSize[size],
+        color: slot.color
+      });
+    }
+    if (slot.type === 'dot') {
+      return _jsx(Dot, {
+        color: slot.color,
+        size: slot.size ?? 'sm'
+      });
+    }
+    return slot.children;
+  };
+  return _jsxs("span", {
+    ref: tagRef,
+    className: classNames('ncua-tag', `ncua-tag--${size}`, {
+      'ncua-tag--truncated': shouldTruncate
+    }),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: [icon && sideSlotRender(icon), _jsx("span", {
+      className: "ncua-tag__text",
+      children: displayText
+    }), count && _jsx("span", {
+      className: "ncua-tag__count",
+      children: count
+    }), close && _jsx("button", {
+      type: "button",
+      className: "ncua-tag__close",
+      onClick: onButtonClick,
+      children: _jsx(XClose, {
+        color: COLOR.gray300,
+        width: iconSize[size],
+        height: iconSize[size]
+      })
+    }), shouldTruncate && isTooltipVisible && _jsx("span", {
+      ref: tooltipRef,
+      className: classNames('ncua-tag__tooltip', `ncua-tag__tooltip--${calculatedPosition}`),
+      children: _jsx("span", {
+        className: "ncua-tag__tooltip-content",
+        children: text
+      })
+    })]
+  });
+};