@ncds/ui-admin 0.0.33 → 0.0.34

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
     "build": "webpack --node-env production",
     "build:npm": "node build-npm.js",
     "dev": "webpack serve --node-env development --open --hot",
+    "dev:html": "webpack serve --node-env development --open --config webpack.html.config.js",
     "eject": "react-scripts eject",
     "lint": "eslint \"**/*.ts*\"",
     "major": "yarn version --major",

package/dist/cjs/assets/scripts/index.js

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

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

@@ -1,341 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Slider = void 0;
-var Slider = exports.Slider = /** @class */function () {
-  function Slider(element, options) {
-    var _this = this;
-    this.activeHandle = null;
-    this.isDragging = false;
-    this.handleElements = [];
-    this.progressElement = null;
-    this.trackElement = null;
-    this.handleMouseDown = function (e) {
-      var targetElement = e.target;
-      e.preventDefault();
-      _this.handleInteractionStart(e.clientX, targetElement);
-      if (_this.isDragging) {
-        // 드래그 이벤트 추가
-        document.addEventListener('mousemove', _this.handleMouseMove);
-        document.addEventListener('mouseup', _this.handleMouseUp);
-        // 텍스트 선택 방지
-        document.body.style.userSelect = 'none';
-      }
-    };
-    this.handleTouchStart = function (e) {
-      if (e.touches.length > 0) {
-        var targetElement = e.target;
-        e.preventDefault();
-        _this.handleInteractionStart(e.touches[0].clientX, targetElement);
-        if (_this.isDragging) {
-          // 드래그 이벤트 추가
-          document.addEventListener('touchmove', _this.handleTouchMove, {
-            passive: false
-          });
-          document.addEventListener('touchend', _this.handleTouchEnd);
-        }
-      }
-    };
-    this.handleMouseMove = function (e) {
-      if (_this.isDragging) {
-        _this.updateValueFromClientX(e.clientX);
-      }
-    };
-    this.handleTouchMove = function (e) {
-      if (_this.isDragging && e.touches.length > 0) {
-        e.preventDefault();
-        _this.updateValueFromClientX(e.touches[0].clientX);
-      }
-    };
-    this.handleMouseUp = function () {
-      _this.isDragging = false;
-      document.body.style.userSelect = '';
-      document.removeEventListener('mousemove', _this.handleMouseMove);
-      document.removeEventListener('mouseup', _this.handleMouseUp);
-    };
-    this.handleTouchEnd = function () {
-      _this.isDragging = false;
-      document.removeEventListener('touchmove', _this.handleTouchMove);
-      document.removeEventListener('touchend', _this.handleTouchEnd);
-    };
-    this.element = element;
-    this.options = Object.assign({
-      min: 0,
-      max: 100,
-      step: 1,
-      value: 0,
-      disabled: false
-    }, options);
-    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();
-  }
-  Slider.prototype.init = function () {
-    if (this.options.disabled) {
-      this.element.style.opacity = '0.5';
-    }
-    // 기존 내용 제거
-    this.element.innerHTML = '';
-    // Track 생성
-    this.trackElement = document.createElement('div');
-    this.trackElement.className = 'ncua-slider__track';
-    this.element.appendChild(this.trackElement);
-    // Progress 생성
-    this.progressElement = document.createElement('div');
-    this.progressElement.className = 'ncua-slider__progress';
-    this.element.appendChild(this.progressElement);
-    // Handle(s) 생성
-    if (Array.isArray(this.value)) {
-      // Range slider (2 handles)
-      var _a = this.value,
-        leftValue = _a[0],
-        rightValue = _a[1];
-      this.createHandle(0, leftValue);
-      this.createHandle(1, rightValue);
-    } else {
-      // Single slider (1 handle)
-      this.createHandle(0, this.value);
-    }
-    // 이벤트 리스너 추가
-    if (!this.options.disabled) {
-      this.element.addEventListener('mousedown', this.handleMouseDown);
-      this.element.addEventListener('touchstart', this.handleTouchStart, {
-        passive: false
-      });
-    }
-    // 초기 위치 설정
-    this.updateHandlePositions();
-  };
-  Slider.prototype.createHandle = function (index, value) {
-    var _this = this;
-    var handle = document.createElement('div');
-    handle.className = 'ncua-slider__handle';
-    handle.setAttribute('role', 'slider');
-    handle.setAttribute('tabindex', this.options.disabled ? '-1' : '0');
-    handle.setAttribute('aria-valuemin', Array.isArray(this.value) && index === 1 ? String(this.value[0]) : String(this.options.min));
-    handle.setAttribute('aria-valuemax', Array.isArray(this.value) && index === 0 ? String(this.value[1]) : String(this.options.max));
-    handle.setAttribute('aria-valuenow', String(value));
-    handle.setAttribute('aria-disabled', String(this.options.disabled));
-    handle.dataset.index = String(index);
-    handle.addEventListener('focus', function () {
-      _this.activeHandle = index;
-      _this.updateHandleClasses();
-    });
-    handle.addEventListener('blur', function () {
-      _this.activeHandle = null;
-      _this.updateHandleClasses();
-    });
-    if (this.options.labelPosition === 'bottom') {
-      var label = document.createElement('div');
-      label.className = "ncua-slider__label";
-      label.textContent = "".concat(value, "%");
-      handle.appendChild(label);
-    }
-    if (this.options.labelPosition === 'top-floating') {
-      var label = document.createElement('div');
-      label.className = "ncua-slider__label ncua-slider__label--tooltip";
-      label.textContent = "".concat(value, "%");
-      handle.appendChild(label);
-    }
-    this.element.appendChild(handle);
-    this.handleElements[index] = handle;
-  };
-  Slider.prototype.updateHandlePositions = function () {
-    if (Array.isArray(this.value)) {
-      // Range slider
-      var _a = this.value,
-        leftValue = _a[0],
-        rightValue = _a[1];
-      var leftPosition = this.getPositionFromValue(leftValue);
-      var rightPosition = this.getPositionFromValue(rightValue);
-      this.handleElements[0].style.left = "".concat(leftPosition, "%");
-      this.handleElements[1].style.left = "".concat(rightPosition, "%");
-      if (this.options.labelPosition) {
-        var leftLabel = this.handleElements[0].querySelector('.ncua-slider__label');
-        var rightLabel = this.handleElements[1].querySelector('.ncua-slider__label');
-        if (leftLabel) leftLabel.textContent = "".concat(leftValue, "%");
-        if (rightLabel) rightLabel.textContent = "".concat(rightValue, "%");
-      }
-      if (this.progressElement) {
-        this.progressElement.style.left = "".concat(leftPosition, "%");
-        this.progressElement.style.width = "".concat(rightPosition - leftPosition, "%");
-      }
-    } else {
-      // Single slider
-      var position = this.getPositionFromValue(this.value);
-      this.handleElements[0].style.left = "".concat(position, "%");
-      if (this.options.labelPosition) {
-        var label = this.handleElements[0].querySelector('.ncua-slider__label');
-        if (label) label.textContent = "".concat(this.value, "%");
-      }
-      if (this.progressElement) {
-        this.progressElement.style.left = '0';
-        this.progressElement.style.width = "".concat(position, "%");
-      }
-    }
-    // ARIA 속성 업데이트
-    this.updateAriaAttributes();
-  };
-  Slider.prototype.updateHandleClasses = function () {
-    var _this = this;
-    this.handleElements.forEach(function (handle, index) {
-      if (index === _this.activeHandle) {
-        handle.classList.add('is-active');
-      } else {
-        handle.classList.remove('is-active');
-      }
-    });
-  };
-  Slider.prototype.updateAriaAttributes = function () {
-    if (Array.isArray(this.value)) {
-      // Range slider
-      var _a = this.value,
-        leftValue = _a[0],
-        rightValue = _a[1];
-      this.handleElements[0].setAttribute('aria-valuenow', String(leftValue));
-      this.handleElements[0].setAttribute('aria-valuemax', String(rightValue));
-      this.handleElements[1].setAttribute('aria-valuenow', String(rightValue));
-      this.handleElements[1].setAttribute('aria-valuemin', String(leftValue));
-    } else {
-      // Single slider
-      this.handleElements[0].setAttribute('aria-valuenow', String(this.value));
-    }
-  };
-  Slider.prototype.getPositionFromValue = function (value) {
-    return (value - this.options.min) / (this.options.max - this.options.min) * 100;
-  };
-  Slider.prototype.getValueFromPosition = function (position) {
-    var percentage = Math.min(Math.max(position, 0), 100);
-    var exactValue = this.options.min + percentage / 100 * (this.options.max - this.options.min);
-    var steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
-    return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
-  };
-  Slider.prototype.handleInteractionStart = function (clientX, target) {
-    // 슬라이더 영역 내부를 클릭/터치한 경우
-    if (target.closest('.ncua-slider')) {
-      // 핸들을 직접 클릭/터치했는지 확인
-      var handleElement = target.closest('.ncua-slider__handle');
-      if (handleElement) {
-        if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.max) {
-          this.activeHandle = 0;
-        } 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);
-        }
-      } else {
-        // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
-        var rect = this.element.getBoundingClientRect();
-        var position = (clientX - rect.left) / rect.width * 100;
-        if (Array.isArray(this.value)) {
-          var _a = this.value,
-            leftValue = _a[0],
-            rightValue = _a[1];
-          var leftPosition = this.getPositionFromValue(leftValue);
-          var rightPosition = this.getPositionFromValue(rightValue);
-          if (position < leftPosition) {
-            this.activeHandle = 0;
-          } else if (position > rightPosition) {
-            this.activeHandle = 1;
-          } else {
-            this.activeHandle = Math.abs(position - leftPosition) < Math.abs(position - rightPosition) ? 0 : 1;
-          }
-        } else {
-          this.activeHandle = 0;
-        }
-      }
-      this.updateHandleClasses();
-      this.isDragging = true;
-      // 클릭/터치 위치로 값 업데이트
-      this.updateValueFromClientX(clientX);
-    }
-  };
-  Slider.prototype.updateValueFromClientX = function (clientX) {
-    if (!this.element || this.activeHandle === null) return;
-    var rect = this.element.getBoundingClientRect();
-    var position = (clientX - rect.left) / rect.width * 100;
-    var newValue = this.getValueFromPosition(position);
-    var prevValue = this.value;
-    if (Array.isArray(this.value)) {
-      // Range slider
-      var _a = this.value,
-        leftValue = _a[0],
-        rightValue = _a[1];
-      if (this.activeHandle === 0) {
-        // 왼쪽 핸들
-        this.value = [Math.min(newValue, rightValue), rightValue];
-      } else if (this.activeHandle === 1) {
-        // 오른쪽 핸들
-        this.value = [leftValue, Math.max(newValue, leftValue)];
-      }
-    } else {
-      // Single slider
-      this.value = newValue;
-    }
-    this.notifyChange(prevValue);
-    this.updateHandlePositions();
-  };
-  Slider.prototype.notifyChange = function (prevValue) {
-    var _this = this;
-    var isSingle = !Array.isArray(prevValue);
-    var checkChangedSingle = function () {
-      return prevValue !== _this.value;
-    };
-    var checkChangedRange = function () {
-      return Array.isArray(prevValue) && Array.isArray(_this.value) && (prevValue[0] !== _this.value[0] || prevValue[1] !== _this.value[1]);
-    };
-    var isChanged = isSingle ? checkChangedSingle() : checkChangedRange();
-    if (this.options.onChange && isChanged) {
-      this.options.onChange(this.value);
-    }
-  };
-  Slider.prototype.setValue = function (value) {
-    this.value = value;
-    this.updateHandlePositions();
-  };
-  Slider.prototype.getValue = function () {
-    return this.value;
-  };
-  Slider.prototype.disable = function () {
-    this.options.disabled = true;
-    this.element.style.opacity = '0.5';
-    this.handleElements.forEach(function (handle) {
-      handle.setAttribute('tabindex', '-1');
-      handle.setAttribute('aria-disabled', 'true');
-    });
-    this.element.removeEventListener('mousedown', this.handleMouseDown);
-    this.element.removeEventListener('touchstart', this.handleTouchStart);
-  };
-  Slider.prototype.enable = function () {
-    this.options.disabled = false;
-    this.element.style.opacity = '1';
-    this.handleElements.forEach(function (handle) {
-      handle.setAttribute('tabindex', '0');
-      handle.setAttribute('aria-disabled', 'false');
-    });
-    this.element.addEventListener('mousedown', this.handleMouseDown);
-    this.element.addEventListener('touchstart', this.handleTouchStart, {
-      passive: false
-    });
-  };
-  Slider.prototype.destroy = function () {
-    // 모든 이벤트 리스너 제거
-    this.element.removeEventListener('mousedown', this.handleMouseDown);
-    this.element.removeEventListener('touchstart', this.handleTouchStart);
-    document.removeEventListener('mousemove', this.handleMouseMove);
-    document.removeEventListener('mouseup', this.handleMouseUp);
-    document.removeEventListener('touchmove', this.handleTouchMove);
-    document.removeEventListener('touchend', this.handleTouchEnd);
-    // 모든 내용 제거
-    this.element.innerHTML = '';
-    // 참조 정리
-    this.handleElements = [];
-    this.progressElement = null;
-    this.trackElement = null;
-  };
-  return Slider;
-}();

package/dist/cjs/assets/scripts/test.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.test = void 0;
-var test = function () {
-  console.log('test');
-};
-exports.test = test;

package/dist/cjs/constant/color.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.COLOR = void 0;
-var COLOR = exports.COLOR = {
-  gray100: '#EAECF0',
-  gray200: '#D0D5DD',
-  gray300: '#98A2B3',
-  gray400: '#667085',
-  gray500: '#344054',
-  gray600: '#475467',
-  gray700: '#0C111D',
-  blue500: '#1570EF',
-  blue600: '#1849a9',
-  red500: '#ec1d31',
-  red600: '#dc0a2b',
-  orange500: '#e4501e',
-  orange600: '#b93815',
-  green500: '#099250',
-  green600: '#087443',
-  pink100: '#fce7f6',
-  pink600: '#c11574',
-  yellow600: '#c27004',
-  white: '#fff',
-  currentColor: 'currentColor',
-  black: '',
-  'secondary-gray-blue-50': '#f8f9fc',
-  'secondary-gray-blue-100': '#eaecf5',
-  'secondary-gray-blue-200': '#d5d9eb',
-  'secondary-gray-blue-300': '#b3b8db',
-  'secondary-gray-blue-400': '#717bbc',
-  'secondary-gray-blue-450': '#4e5ba6',
-  'secondary-gray-blue-500': '#3e4784',
-  'secondary-gray-blue-600': '#363f72',
-  'secondary-gray-blue-700': '#293056'
-};

package/dist/cjs/constant/size.js

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