@ncds/ui-admin 0.0.16 → 0.0.18

package/dist/cjs/ui-admin/src/components/date-picker/RangeDatePicker.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeDatePicker = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _lodash = require("lodash");
+var _moment = _interopRequireDefault(require("moment"));
+var _DatePicker = require("./DatePicker");
+var _utils = require("./utils");
+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 RangeDatePicker = function (_a) {
+  var startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    onDateValidation = _a.onDateValidation;
+  var resetDateAndAlert = (0, _react.useCallback)(function (type) {
+    var _a, _b;
+    var newDate = type === 'start' ? ((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) || '' : ((_b = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _b === void 0 ? void 0 : _b.endDate) || '';
+    if (type === 'start') {
+      startDateOptions.onChangeDate(newDate);
+    } else {
+      endDateOptions.onChangeDate(newDate);
+    }
+    onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      type: 'end',
+      errorType: 'reset',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var changeSettingDateAndAlert = (0, _react.useCallback)(function (type, isOverPeriod) {
+    if (isOverPeriod === void 0) {
+      isOverPeriod = false;
+    }
+    var _a = validationOption.setting,
+      unit = _a.unit,
+      period = _a.period;
+    var newDate = '';
+    if (type === 'start') {
+      newDate = (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
+    } else {
+      newDate = (0, _utils.getDateFormat)((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit).toDate());
+    }
+    onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      type: type,
+      errorType: isOverPeriod ? 'period' : 'overlap',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var validateDateType = function (date) {
+    return !isNaN(Date.parse(date));
+  };
+  (0, _react.useEffect)(function () {
+    var _a;
+    var needResetDate = validateDateType(startDateOptions.currentDate) && !(0, _lodash.isNil)((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) && (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('start');
+      return;
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      return;
+    }
+    var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = (0, _moment.default)(startDateOptions.currentDate).isSameOrAfter((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit));
+    if (isOverDate) {
+      changeSettingDateAndAlert('start');
+    }
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('start', !isValidPeriod);
+    }
+  }, [startDateOptions.currentDate]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    var needResetDate = validateDateType(endDateOptions.currentDate) && !(0, _lodash.isNil)((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('end');
+      return;
+    }
+    var isNotTodayEndDate = endDateOptions.currentDate !== (0, _utils.getDateFormat)();
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting) || !isNotTodayEndDate) {
+      return;
+    }
+    var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = (0, _moment.default)(endDateOptions.currentDate).isSameOrBefore((0, _moment.default)(startDateOptions.currentDate).add(period, unit));
+    if (isOverDate) {
+      changeSettingDateAndAlert('end');
+    }
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('end', !isValidPeriod);
+    }
+  }, [endDateOptions.currentDate]);
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-range-date-picker"
+  }, {
+    children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions)), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions))]
+  }));
+};
+exports.RangeDatePicker = RangeDatePicker;

package/dist/cjs/ui-admin/src/components/date-picker/index.js

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

package/dist/cjs/ui-admin/src/components/date-picker/utils.js

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

package/dist/cjs/ui-admin/src/components/tooltip/Tooltip.js

@@ -45,20 +45,23 @@ var Tooltip = function (_a) {
     iconType = _c === void 0 ? 'stroke' : _c,
     _d = _a.position,
     position = _d === void 0 ? 'top' : _d,
+    _e = _a.size,
+    size = _e === void 0 ? 'sm' : _e,
     title = _a.title,
     content = _a.content,
-    _e = _a.hideArrow,
-    hideArrow = _e === void 0 ? false : _e;
+    _f = _a.hideArrow,
+    hideArrow = _f === void 0 ? false : _f;
+  var iconSize = size === 'sm' ? 14 : 16;
   return (0, _jsxRuntime.jsxs)("span", __assign({
-    className: (0, _classnames.default)('ncua-tooltip', "".concat(hideArrow ? 'ncua-tooltip--hidden-arrow' : ''), "".concat(iconType === 'stroke' ? 'ncua-tooltip--stroke' : ''))
+    className: (0, _classnames.default)('ncua-tooltip', "ncua-tooltip--".concat(size), "".concat(hideArrow ? 'ncua-tooltip--hidden-arrow' : ''), "".concat(iconType === 'stroke' ? 'ncua-tooltip--stroke' : ''))
   }, {
     children: [iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
-      width: 16,
-      height: 16,
+      width: iconSize,
+      height: iconSize,
       color: "var(--gray-300"
     }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircleFill, {
-      width: 16,
-      height: 16,
+      width: iconSize,
+      height: iconSize,
       color: "var(--gray-300)"
     }), tooltipContent({
       tooltipType: tooltipType,

package/dist/esm/ui-admin/src/components/date-picker/RangeDatePicker.js

@@ -0,0 +1,110 @@
+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 { useCallback, useEffect } from 'react';
+import { isNil } from 'lodash';
+import moment from 'moment';
+import { DatePicker } from './DatePicker';
+import { getDateFormat } from './utils';
+export var RangeDatePicker = function (_a) {
+  var startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    onDateValidation = _a.onDateValidation;
+  var resetDateAndAlert = useCallback(function (type) {
+    var _a, _b;
+    var newDate = type === 'start' ? ((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) || '' : ((_b = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _b === void 0 ? void 0 : _b.endDate) || '';
+    if (type === 'start') {
+      startDateOptions.onChangeDate(newDate);
+    } else {
+      endDateOptions.onChangeDate(newDate);
+    }
+    onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      type: 'end',
+      errorType: 'reset',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var changeSettingDateAndAlert = useCallback(function (type, isOverPeriod) {
+    if (isOverPeriod === void 0) {
+      isOverPeriod = false;
+    }
+    var _a = validationOption.setting,
+      unit = _a.unit,
+      period = _a.period;
+    var newDate = '';
+    if (type === 'start') {
+      newDate = getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
+    } else {
+      newDate = getDateFormat(moment(endDateOptions.currentDate).subtract(period, unit).toDate());
+    }
+    onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      type: type,
+      errorType: isOverPeriod ? 'period' : 'overlap',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var validateDateType = function (date) {
+    return !isNaN(Date.parse(date));
+  };
+  useEffect(function () {
+    var _a;
+    var needResetDate = validateDateType(startDateOptions.currentDate) && !isNil((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('start');
+      return;
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      return;
+    }
+    var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = moment(startDateOptions.currentDate).isSameOrAfter(moment(endDateOptions.currentDate).subtract(period, unit));
+    if (isOverDate) {
+      changeSettingDateAndAlert('start');
+    }
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('start', !isValidPeriod);
+    }
+  }, [startDateOptions.currentDate]);
+  useEffect(function () {
+    var _a;
+    var needResetDate = validateDateType(endDateOptions.currentDate) && !isNil((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('end');
+      return;
+    }
+    var isNotTodayEndDate = endDateOptions.currentDate !== getDateFormat();
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting) || !isNotTodayEndDate) {
+      return;
+    }
+    var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
+    if (isOverDate) {
+      changeSettingDateAndAlert('end');
+    }
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('end', !isValidPeriod);
+    }
+  }, [endDateOptions.currentDate]);
+  return _jsxs("div", __assign({
+    className: "ncua-range-date-picker"
+  }, {
+    children: [_jsx(DatePicker, __assign({}, startDateOptions)), "-", _jsx(DatePicker, __assign({}, endDateOptions))]
+  }));
+};

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

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

package/dist/esm/ui-admin/src/components/date-picker/utils.js

@@ -0,0 +1,10 @@
+import moment from 'moment';
+export function getToday() {
+  return moment().toDate();
+}
+export function getDateFormat(date) {
+  if (date === void 0) {
+    date = getToday();
+  }
+  return moment(date).format('YYYY-MM-DD');
+}

package/dist/esm/ui-admin/src/components/tooltip/Tooltip.js

@@ -38,20 +38,23 @@ export var Tooltip = function (_a) {
     iconType = _c === void 0 ? 'stroke' : _c,
     _d = _a.position,
     position = _d === void 0 ? 'top' : _d,
+    _e = _a.size,
+    size = _e === void 0 ? 'sm' : _e,
     title = _a.title,
     content = _a.content,
-    _e = _a.hideArrow,
-    hideArrow = _e === void 0 ? false : _e;
+    _f = _a.hideArrow,
+    hideArrow = _f === void 0 ? false : _f;
+  var iconSize = size === 'sm' ? 14 : 16;
   return _jsxs("span", __assign({
-    className: classNames('ncua-tooltip', "".concat(hideArrow ? 'ncua-tooltip--hidden-arrow' : ''), "".concat(iconType === 'stroke' ? 'ncua-tooltip--stroke' : ''))
+    className: classNames('ncua-tooltip', "ncua-tooltip--".concat(size), "".concat(hideArrow ? 'ncua-tooltip--hidden-arrow' : ''), "".concat(iconType === 'stroke' ? 'ncua-tooltip--stroke' : ''))
   }, {
     children: [iconType === 'stroke' ? _jsx(HelpCircle, {
-      width: 16,
-      height: 16,
+      width: iconSize,
+      height: iconSize,
       color: "var(--gray-300"
     }) : _jsx(HelpCircleFill, {
-      width: 16,
-      height: 16,
+      width: iconSize,
+      height: iconSize,
       color: "var(--gray-300)"
     }), tooltipContent({
       tooltipType: tooltipType,

package/dist/types/ui-admin/src/components/date-picker/RangeDatePicker.d.ts

@@ -0,0 +1,24 @@
+import { unitOfTime } from 'moment';
+import { DatePickerProps } from './DatePicker';
+export type RangeDatePickerProps = {
+    startDateOptions: DatePickerProps;
+    endDateOptions: DatePickerProps;
+    validationOption?: {
+        initDate?: {
+            startDate?: string;
+            endDate?: string;
+        };
+        setting?: {
+            unit: unitOfTime.Diff;
+            period: number;
+        };
+    };
+    onDateValidation?: (params: {
+        type: 'start' | 'end';
+        errorType: 'reset' | 'period' | 'overlap';
+        newDate: string;
+        currentDate: string;
+    }) => void;
+};
+export declare const RangeDatePicker: ({ startDateOptions, endDateOptions, validationOption, onDateValidation, }: RangeDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RangeDatePicker.d.ts.map

package/dist/types/ui-admin/src/components/date-picker/index.d.ts

@@ -1,2 +1,3 @@
 export * from './DatePicker';
+export * from './RangeDatePicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/ui-admin/src/components/date-picker/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function getToday(): Date;
+export declare function getDateFormat(date?: Date | string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/ui-admin/src/components/tooltip/Tooltip.d.ts

@@ -2,10 +2,11 @@ interface TooltipProps {
     tooltipType?: 'white' | 'black';
     iconType?: 'stroke' | 'fill';
     position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    size?: 'sm' | 'md';
     hideArrow?: boolean;
     title?: string;
     content?: string;
 }
-export declare const Tooltip: ({ tooltipType, iconType, position, title, content, hideArrow, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -1088,15 +1088,15 @@ button {
 
 .ncua-tooltip {
   position: relative;
-  font-size: 11px;
+  font-size: 12px;
 }
 .ncua-tooltip svg {
   cursor: pointer;
 }
 .ncua-tooltip__bg {
   position: absolute;
-  padding: 12px;
   border-radius: 4px;
+  padding: 8px 12px;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -1225,6 +1225,9 @@ button {
 .ncua-tooltip:not(:hover) .ncua-tooltip__bg {
   display: none;
 }
+.ncua-tooltip:has(.ncua-tooltip__title) .ncua-tooltip__bg {
+  padding: 12px;
+}
 
 :root {
   --select-height-xs: 28px;
@@ -1616,6 +1619,7 @@ button {
 
 .ncua-date-picker {
   position: relative;
+  display: inline-block;
 }
 .ncua-date-picker .flatpickr-wrapper {
   border: 1px solid var(--gray-200);
@@ -1785,6 +1789,12 @@ button {
   color: var(--gray-300);
 }
 
+.ncua-range-date-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .ncua-carousel-number-group {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",