@ncds/ui-admin 0.0.23 → 0.0.25

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

@@ -31,17 +31,19 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b;
   var className = _a.className,
+    _c = _a.size,
+    size = _c === void 0 ? 'md' : _c,
     label = _a.label,
     required = _a.required,
     disabled = _a.disabled,
     hintText = _a.hintText,
     characterCount = _a.characterCount,
     destructive = _a.destructive,
-    props = __rest(_a, ["className", "label", "required", "disabled", "hintText", "characterCount", "destructive"]);
+    props = __rest(_a, ["className", "size", "label", "required", "disabled", "hintText", "characterCount", "destructive"]);
   var textareaRef = (0, _react.useRef)(null);
-  var _c = (0, _react.useState)(0),
-    textCount = _c[0],
-    setTextCount = _c[1];
+  var _d = (0, _react.useState)(0),
+    textCount = _d[0],
+    setTextCount = _d[1];
   var shouldShowHintArea = hintText || characterCount;
   (0, _react.useEffect)(function () {
     if (textareaRef.current && characterCount) {
@@ -58,7 +60,7 @@ var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (
     }
   }, [characterCount]);
   return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: (0, _classnames.default)('ncua-input', 'ncua-input--textarea', {
+    className: (0, _classnames.default)('ncua-input', 'ncua-input--textarea', "ncua-input--textarea--".concat(size), {
       destructive: destructive,
       'is-disabled': disabled
     }, className)
@@ -101,7 +103,11 @@ var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (
         children: (0, _jsxRuntime.jsxs)("span", __assign({
           className: "ncua-input__text-count-text"
         }, {
-          children: [textCount, " / ", (_b = props.maxLength) !== null && _b !== void 0 ? _b : 0]
+          children: [(0, _jsxRuntime.jsx)("span", __assign({
+            className: "ncua-input__text-count-text-count"
+          }, {
+            children: textCount
+          })), "/", (_b = props.maxLength) !== null && _b !== void 0 ? _b : 0]
         }))
       }))]
     }))]

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

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Modal", {
-  enumerable: true,
-  get: function () {
-    return _Modal.Modal;
-  }
-});
-var _Modal = require("./Modal");
+var _Modal = require("./Modal");
+Object.keys(_Modal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Modal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Modal[key];
+    }
+  });
+});

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

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _Notification = require("./Notification");
-Object.keys(_Notification).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Notification[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Notification[key];
-    }
-  });
-});
 var _FloatingNotification = require("./FloatingNotification");
 Object.keys(_FloatingNotification).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -35,4 +24,15 @@ Object.keys(_FullWidthNotification).forEach(function (key) {
       return _FullWidthNotification[key];
     }
   });
+});
+var _Notification = require("./Notification");
+Object.keys(_Notification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Notification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Notification[key];
+    }
+  });
 });

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

@@ -28,6 +28,9 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
+/**
+ * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ */
 var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var icon = _a.icon,
     placeholder = _a.placeholder,

package/dist/cjs/src/components/tab/TabButton.js

@@ -56,7 +56,7 @@ var TabButton = function (_a) {
       onClick: onClick_1
     }, anchorProps, {
       children: [label, badgeInfo && (0, _jsxRuntime.jsx)(_Badge.Badge, __assign({}, badgeInfo, {
-        size: "sm"
+        size: "xs"
       })), children]
     }));
   }

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

@@ -27,7 +27,7 @@ var Tag = function (_a) {
     count = _a.count,
     close = _a.close,
     onButtonClick = _a.onButtonClick;
-  var closeSize = {
+  var iconSize = {
     sm: 14,
     md: 16
   };
@@ -38,8 +38,8 @@ var Tag = function (_a) {
   }, {
     children: [icon && icon.name !== 'dot' && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
       name: icon.name,
-      width: 16,
-      height: 16,
+      width: iconSize[size],
+      height: iconSize[size],
       color: icon.color
     }), (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-tag__text"
@@ -57,8 +57,8 @@ var Tag = function (_a) {
       children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
         name: "x-close",
         color: _color.COLOR.gray300,
-        width: closeSize[size],
-        height: closeSize[size]
+        width: iconSize[size],
+        height: iconSize[size]
       })
     }))]
   }));

package/dist/cjs/src/constant/date-picker.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PERIOD_ITEM = void 0;
+var PERIOD_ITEM = exports.PERIOD_ITEM = {
+  TODAY: {
+    text: '오늘',
+    period: 0,
+    unit: 'days'
+  },
+  YESTERDAY: {
+    text: '어제',
+    period: 1,
+    unit: 'days'
+  },
+  '3DAYS': {
+    text: '3일',
+    period: 3,
+    unit: 'days'
+  },
+  '7DAYS': {
+    text: '7일',
+    period: 7,
+    unit: 'days'
+  },
+  '1WEEK': {
+    text: '1주일',
+    period: 1,
+    unit: 'week'
+  },
+  '15DAYS': {
+    text: '15일',
+    period: 15,
+    unit: 'days'
+  },
+  '1MONTHS': {
+    text: '1개월',
+    period: 1,
+    unit: 'months'
+  },
+  '3MONTHS': {
+    text: '3개월',
+    period: 3,
+    unit: 'months'
+  },
+  '1YEAR': {
+    text: '1년',
+    period: 1,
+    unit: 'years'
+  },
+  ENTIRE: {
+    text: '전체',
+    period: 0,
+    unit: null
+  },
+  NONE: {
+    text: '',
+    period: 0,
+    unit: null
+  }
+};

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

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

package/dist/cjs/src/utils/date-picker.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDateFormat = getDateFormat;
+exports.getSubtractDate = getSubtractDate;
+exports.getToday = getToday;
+var _moment = _interopRequireDefault(require("moment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getDateFormat(date) {
+  if (date === void 0) {
+    date = getToday();
+  }
+  return (0, _moment.default)(date).format('YYYY-MM-DD');
+}
+function getToday() {
+  return (0, _moment.default)().toDate();
+}
+function getSubtractDate(_a) {
+  var _b = _a.date,
+    date = _b === void 0 ? getToday() : _b,
+    period = _a.period,
+    unit = _a.unit;
+  return (0, _moment.default)(date).subtract(period, unit).toDate();
+}

package/dist/esm/index.js

@@ -1,16 +1,28 @@
 export * from './src/components/badge';
+export * from './src/components/breadcrumb';
 export * from './src/components/button';
 export * from './src/components/carousel';
 export * from './src/components/checkbox';
 export * from './src/components/date-picker';
+export * from './src/components/divider';
+export * from './src/components/dropdown';
+export * from './src/components/empty-state';
+export * from './src/components/featured-icon';
 export * from './src/components/input';
+export * from './src/components/modal';
+export * from './src/components/notification';
 export * from './src/components/pagination';
+export * from './src/components/progress-bar';
+export * from './src/components/progress-circle';
 export * from './src/components/radio';
 export * from './src/components/select';
 export * from './src/components/shared/hintText';
 export * from './src/components/shared/label';
 export * from './src/components/shared';
+export * from './src/components/slider';
 export * from './src/components/spinner';
+export * from './src/components/tab';
+export * from './src/components/tag';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';

package/dist/esm/src/components/button/ButtonGroup.js

@@ -49,6 +49,7 @@ export var ButtonGroup = function (_a) {
       }
       return /*#__PURE__*/React.cloneElement(child, {
         onlyIcon: onlyIcon,
+        size: size,
         disabled: disabled || child.props.disabled
       });
     })
@@ -59,20 +60,22 @@ ButtonGroup.Item = function (_a) {
   var _c = _a.as,
     as = _c === void 0 ? 'button' : _c,
     label = _a.label,
+    size = _a.size,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,
     children = _a.children,
-    props = __rest(_a, ["as", "label", "onlyIcon", "icon", "disabled", "children"]);
+    isCurrent = _a.isCurrent,
+    props = __rest(_a, ["as", "label", "size", "onlyIcon", "icon", "disabled", "children", "isCurrent"]);
   var renderIcon = function () {
-    var _a, _b, _c;
+    var _a, _b;
     if (!icon) return null;
     if (icon.type === 'icon') {
       return _jsx(Icon, {
         name: icon.icon,
-        width: svgSize[(_a = icon.size) !== null && _a !== void 0 ? _a : 'md'],
-        height: svgSize[(_b = icon.size) !== null && _b !== void 0 ? _b : 'md'],
-        color: COLOR[(_c = icon.color) !== null && _c !== void 0 ? _c : 'gray500']
+        width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size !== null && size !== void 0 ? size : 'md'],
+        height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size !== null && size !== void 0 ? size : 'md'],
+        color: icon.color ? COLOR[icon.color] : 'currentColor'
       });
     }
     return icon.children;
@@ -81,6 +84,10 @@ ButtonGroup.Item = function (_a) {
   return /*#__PURE__*/createElement(as, __assign({
     className: classNames('ncua-button-group__item', {
       'is-disabled': disabled
+    }, {
+      'is-only-icon': onlyIcon
+    }, {
+      'is-current': isCurrent
     }),
     disabled: disabled
   }, props), _jsxs(_Fragment, {

package/dist/esm/src/components/checkbox/Checkbox.js

@@ -48,11 +48,11 @@ export var Checkbox = function (_a) {
     }, props)), _jsx("span", {
       children: text && _jsxs(_Fragment, {
         children: [_jsx("span", __assign({
-          className: "ncua-checkbox__text"
+          className: "ncua-checkbox-field__text"
         }, {
           children: text
         })), supportText && _jsx("span", __assign({
-          className: "ncua-checkbox__support-text"
+          className: "ncua-checkbox-field__support-text"
         }, {
           children: supportText
         }))]

package/dist/esm/src/components/checkbox/CheckboxInput.js

@@ -16,11 +16,12 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Minus } from '@ncds/ui-admin-icon';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
+/**
+ * 현재 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ */
 export var CheckboxInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -32,7 +33,43 @@ export var CheckboxInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     destructive = _d === void 0 ? false : _d,
     onChange = _a.onChange,
     props = __rest(_a, ["size", "indeterminate", "disabled", "className", "destructive", "onChange"]);
-  var svgColor = disabled ? 'gray200' : 'gray700';
+  /**
+   * 체크박스 체크시 나오는 아이콘은 아이콘 컴포넌트와 굵기가 달라 별도로 정의하였습니다.
+   */
+  var checkIcon = _jsx(_Fragment, {
+    children: _jsx("svg", __assign({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none"
+    }, {
+      children: _jsx("path", {
+        d: "M10 3L4.5 8.5L2 6",
+        stroke: disabled ? '#D3D4D8' : '#171818',
+        "stroke-width": "1.6666",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    }))
+  });
+  var indeterminateIcon = _jsx(_Fragment, {
+    children: _jsx("svg", __assign({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none"
+    }, {
+      children: _jsx("path", {
+        d: "M2.5 6H9.5",
+        stroke: disabled ? '#D3D4D8' : '#2F2F30',
+        "stroke-width": "1.66666",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    }))
+  });
   return _jsxs("span", __assign({
     className: classNames('ncua-checkbox-input', "ncua-checkbox-input--".concat(size), {
       destructive: destructive
@@ -46,15 +83,7 @@ export var CheckboxInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, props)), _jsx("span", __assign({
       className: "ncua-checkbox-input__ico"
     }, {
-      children: !indeterminate ? _jsx(Check, {
-        width: 12,
-        height: 12,
-        color: COLOR[svgColor]
-      }) : _jsx(Minus, {
-        width: 12,
-        height: 12,
-        color: COLOR[svgColor]
-      })
+      children: !indeterminate ? checkIcon : indeterminateIcon
     }))]
   }));
 });

package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -0,0 +1,83 @@
+var __assign = this && this.__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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { RangeDatePicker } from './RangeDatePicker';
+import { ButtonGroup } from '../button';
+import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
+import { PERIOD_ITEM } from '../../constant/date-picker';
+export var RangeDatePickerWithButtons = function (_a) {
+  var currentButtonId = _a.currentButtonId,
+    setCurrentButtonId = _a.setCurrentButtonId,
+    startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    periodKeys = _a.periodKeys,
+    onDateValidation = _a.onDateValidation;
+  var setCalculatedDate = function () {
+    var currentPeriodItem = PERIOD_ITEM[currentButtonId];
+    if (!currentPeriodItem) {
+      return;
+    }
+    if (currentButtonId === 'ENTIRE') {
+      startDateOptions.onChangeDate('');
+      endDateOptions.onChangeDate('');
+      return;
+    }
+    var startDate = getDateFormat(getSubtractDate({
+      period: currentPeriodItem.period,
+      unit: currentPeriodItem.unit
+    }));
+    startDateOptions.onChangeDate(startDate);
+    if (endDateOptions.currentDate !== getDateFormat()) {
+      endDateOptions.onChangeDate(getDateFormat());
+    }
+  };
+  var handleOnChangeDate = function (date, type) {
+    type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+    currentButtonId && setCurrentButtonId('NONE');
+  };
+  useEffect(function () {
+    if (currentButtonId !== 'NONE') {
+      setCalculatedDate();
+    }
+  }, [currentButtonId]);
+  return _jsxs("div", __assign({
+    className: "ncua-range-date-picker-with-buttons"
+  }, {
+    children: [_jsx(ButtonGroup, __assign({
+      size: "sm"
+    }, {
+      children: periodKeys.map(function (key) {
+        return _jsx(ButtonGroup.Item, {
+          isCurrent: currentButtonId === key,
+          label: PERIOD_ITEM[key].text,
+          onClick: function () {
+            return setCurrentButtonId(key);
+          }
+        }, key);
+      })
+    })), _jsx(RangeDatePicker, {
+      startDateOptions: __assign(__assign({}, startDateOptions), {
+        onChangeDate: function (date) {
+          return handleOnChangeDate(date, 'START');
+        }
+      }),
+      endDateOptions: __assign(__assign({}, endDateOptions), {
+        onChangeDate: function (date) {
+          return handleOnChangeDate(date, 'END');
+        }
+      }),
+      validationOption: validationOption,
+      onDateValidation: onDateValidation
+    })]
+  }));
+};

package/dist/esm/src/components/date-picker/index.js

@@ -1,2 +1,4 @@
 export * from './DatePicker';
-export * from './RangeDatePicker';
+export * from './RangeDatePicker';
+export * from './RangeDatePickerWithButtons';
+export * from './utils';

package/dist/esm/src/components/featured-icon/FeaturedIcon.js

@@ -20,19 +20,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import Icon from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
 var iconSizeMap = {
   sm: 16,
   md: 20,
   lg: 24,
   xl: 28
 };
-var iconStrokeColorMap = {
-  neutral: 'gray700',
-  error: 'red500',
-  warning: 'orange500',
-  success: 'green600'
-};
 export var FeaturedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var name = _a.name,
     _b = _a.theme,
@@ -43,15 +36,6 @@ export var FeaturedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
     size = _d === void 0 ? 'md' : _d,
     className = _a.className,
     rest = __rest(_a, ["name", "theme", "color", "size", "className"]);
-  var getIconColor = function () {
-    if (theme === 'dark-circle') {
-      return 'white';
-    }
-    if (theme === 'square-outline') {
-      return 'gray700';
-    }
-    return iconStrokeColorMap[color];
-  };
   return _jsxs("div", __assign({
     ref: ref,
     className: classNames('ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size), className)
@@ -65,8 +49,7 @@ export var FeaturedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
     }), _jsx(Icon, {
       name: name,
       width: iconSizeMap[size],
-      height: iconSizeMap[size],
-      color: COLOR[getIconColor()]
+      height: iconSizeMap[size]
     })]
   }));
 });

package/dist/esm/src/components/index.js

@@ -4,9 +4,10 @@ export * from './button';
 export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
-export * from './featured-icon';
 export * from './divider';
+export * from './dropdown';
 export * from './empty-state';
+export * from './featured-icon';
 export * from './input';
 export * from './modal';
 export * from './notification';
@@ -16,6 +17,7 @@ export * from './progress-circle';
 export * from './radio';
 export * from './select';
 export * from './shared';
+export * from './slider';
 export * from './spinner';
 export * from './tab';
 export * from './tag';