@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/esm/src/components/image-file-input/ImageFileInput.js

@@ -1,30 +1,3 @@
-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);
-};
-var __rest = this && this.__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 __spreadArray = this && this.__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
@@ -34,149 +7,124 @@ import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/Fil
 import { HintText, Label } from '../shared';
 import { Tooltip } from '../tooltip';
 import { ImagePreview } from './components/ImagePreview';
-export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
-    accept = _a.accept,
-    _c = _a.multiple,
-    multiple = _c === void 0 ? false : _c,
-    maxFileSize = _a.maxFileSize,
-    maxFileCount = _a.maxFileCount,
-    value = _a.value,
-    onChange = _a.onChange,
-    onFileSelect = _a.onFileSelect,
-    onFail = _a.onFail,
-    _d = _a.buttonLabel,
-    buttonLabel = _d === void 0 ? '파일 찾기' : _d,
-    _e = _a.imagePreviewTooltipLabel,
-    imagePreviewTooltipLabel = _e === void 0 ? '이미지 업로드' : _e,
-    disabled = _a.disabled,
-    label = _a.label,
-    hintItems = _a.hintItems,
-    validation = _a.validation,
-    destructive = _a.destructive,
-    isRequired = _a.isRequired,
-    showHelpIcon = _a.showHelpIcon,
-    hintText = _a.hintText,
-    _f = _a.showFileTagList,
-    showFileTagList = _f === void 0 ? true : _f,
-    _g = _a.showHintText,
-    showHintText = _g === void 0 ? true : _g,
-    _h = _a.showFileInput,
-    showFileInput = _h === void 0 ? true : _h,
-    props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "imagePreviewTooltipLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText", "showFileTagList", "showHintText", "showFileInput"]);
-  var fileInputRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return fileInputRef.current;
-  });
-  var _j = useState([]),
-    internalFiles = _j[0],
-    setInternalFiles = _j[1];
-  var _k = useState(false),
-    isButtonHovered = _k[0],
-    setIsButtonHovered = _k[1];
+export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size = 'sm',
+    accept,
+    multiple = false,
+    maxFileSize,
+    maxFileCount,
+    value,
+    onChange,
+    onFileSelect,
+    onFail,
+    buttonLabel = '파일 찾기',
+    imagePreviewTooltipLabel = '이미지 업로드',
+    disabled,
+    label,
+    hintItems,
+    validation,
+    destructive,
+    isRequired,
+    showHelpIcon,
+    hintText,
+    showFileTagList = true,
+    showHintText = true,
+    showFileInput = true,
+    ...props
+  } = _ref;
+  const fileInputRef = useRef(null);
+  useImperativeHandle(ref, () => fileInputRef.current);
+  const [internalFiles, setInternalFiles] = useState([]);
+  const [isButtonHovered, setIsButtonHovered] = useState(false);
   // Determine if component is controlled or uncontrolled
-  var isControlled = value !== undefined;
-  var files = isControlled ? value : internalFiles;
+  const isControlled = value !== undefined;
+  const files = isControlled ? value : internalFiles;
   // Sync internal state with controlled value
-  useEffect(function () {
+  useEffect(() => {
     if (isControlled && value) {
       setInternalFiles(value);
     }
   }, [isControlled, value]);
-  var updateFiles = function (newFiles) {
+  const updateFiles = newFiles => {
     if (isControlled) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
+      onChange?.(newFiles);
     } else {
       setInternalFiles(newFiles);
-      onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(newFiles);
+      onFileSelect?.(newFiles);
     }
   };
-  var handleFileChange = function (event) {
-    var selectedFiles = event.target.files;
+  const handleFileChange = event => {
+    const selectedFiles = event.target.files;
     if (!selectedFiles || selectedFiles.length === 0) return;
-    var _a = validateFiles(Array.from(selectedFiles)),
-      validFiles = _a.validFiles,
-      invalidFiles = _a.invalidFiles;
+    const {
+      validFiles,
+      invalidFiles
+    } = validateFiles(Array.from(selectedFiles));
     // Replace existing file if maxFileCount is 1
-    var nextFiles = maxFileCount === 1 ? validFiles : __spreadArray(__spreadArray([], files, true), validFiles, true);
+    const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
     updateFiles(nextFiles);
     if (onFail && invalidFiles.length > 0) {
       onFail(invalidFiles);
     }
     event.target.value = '';
   };
-  var validateFiles = function (fileList) {
-    var validFiles = [];
-    var invalidFiles = [];
-    var _loop_1 = function (file) {
-      if (files.some(function (f) {
-        return f.name === file.name && f.size === file.size;
-      })) {
-        invalidFiles.push(__assign(__assign({}, file), {
+  const validateFiles = fileList => {
+    const validFiles = [];
+    const invalidFiles = [];
+    for (const file of fileList) {
+      if (files.some(f => f.name === file.name && f.size === file.size)) {
+        invalidFiles.push({
+          ...file,
           errorType: ImageFileInputErrorType.ALREADY_UPLOADED
-        }));
-        return "continue";
+        });
+        continue;
       }
       if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push(__assign(__assign({}, file), {
+        invalidFiles.push({
+          ...file,
           errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE
-        }));
-        return "continue";
+        });
+        continue;
       }
       // Skip max count check if maxFileCount is 1 (allow replacement)
       if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-        invalidFiles.push(__assign(__assign({}, file), {
+        invalidFiles.push({
+          ...file,
           errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT
-        }));
-        return "continue";
+        });
+        continue;
       }
       validFiles.push(file);
-    };
-    for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
-      var file = fileList_1[_i];
-      _loop_1(file);
     }
     return {
-      validFiles: validFiles,
-      invalidFiles: invalidFiles
+      validFiles,
+      invalidFiles
     };
   };
-  var handleBrowseClick = function () {
+  const handleBrowseClick = () => {
     if (fileInputRef.current && !disabled) {
       fileInputRef.current.click();
     }
   };
-  var handleRemoveFile = function (index) {
-    var newFiles = __spreadArray([], files, true);
+  const handleRemoveFile = index => {
+    const newFiles = [...files];
     newFiles.splice(index, 1);
     updateFiles(newFiles);
   };
-  var renderImagePreview = function (files) {
-    if (files === void 0) {
-      files = [];
-    }
-    var showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
-    return _jsxs("div", __assign({
-      className: "ncua-image-file-input__previews"
-    }, {
-      children: [files.map(function (file, index) {
-        return _jsx(ImagePreview, {
-          file: file,
-          onRemove: function () {
-            return handleRemoveFile(index);
-          }
-        }, "".concat(file.name, "-").concat(index));
-      }), showEmptySlot && _jsxs("div", __assign({
+  const renderImagePreview = function () {
+    let files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
+    return _jsxs("div", {
+      className: "ncua-image-file-input__previews",
+      children: [files.map((file, index) => _jsx(ImagePreview, {
+        file: file,
+        onRemove: () => handleRemoveFile(index)
+      }, `${file.name}-${index}`)), showEmptySlot && _jsxs("div", {
         className: "ncua-image-file-input__empty-slot-wrapper",
-        onMouseEnter: function () {
-          return !disabled && setIsButtonHovered(true);
-        },
-        onMouseLeave: function () {
-          return setIsButtonHovered(false);
-        },
-        onClick: handleBrowseClick
-      }, {
+        onMouseEnter: () => !disabled && setIsButtonHovered(true),
+        onMouseLeave: () => setIsButtonHovered(false),
+        onClick: handleBrowseClick,
         children: [_jsx(Button, {
           onlyIcon: true,
           size: size,
@@ -188,32 +136,26 @@ export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
           content: imagePreviewTooltipLabel,
           position: "bottom"
         })]
-      }))]
-    }));
+      })]
+    });
   };
-  var renderHintList = function () {
+  const renderHintList = () => {
     if (!hintItems || hintItems.length === 0) return null;
-    return _jsx("ul", __assign({
-      className: "ncua-file-input__hint-list"
-    }, {
-      children: hintItems.map(function (hint) {
-        return _jsx("li", __assign({
-          className: "ncua-file-input__hint-item"
-        }, {
-          children: hint
-        }), hint);
-      })
-    }));
+    return _jsx("ul", {
+      className: "ncua-file-input__hint-list",
+      children: hintItems.map(hint => _jsx("li", {
+        className: "ncua-file-input__hint-item",
+        children: hint
+      }, hint))
+    });
   };
-  return _jsxs("div", __assign({
-    className: classNames('ncua-image-file-input', "ncua-image-file-input--".concat(size), {
+  return _jsxs("div", {
+    className: classNames('ncua-image-file-input', `ncua-image-file-input--${size}`, {
       destructive: destructive
-    })
-  }, {
-    children: [renderImagePreview(files), showFileInput && _jsxs("div", __assign({
-      className: classNames('ncua-file-input', "ncua-file-input--".concat(size))
-    }, {
-      children: [_jsx("input", __assign({
+    }),
+    children: [renderImagePreview(files), showFileInput && _jsxs("div", {
+      className: classNames('ncua-file-input', `ncua-file-input--${size}`),
+      children: [_jsx("input", {
         hidden: true,
         ref: fileInputRef,
         type: "file",
@@ -221,21 +163,19 @@ export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         multiple: multiple,
         onChange: handleFileChange,
         tabIndex: -1,
-        "aria-hidden": "true"
-      }, props)), _jsxs("div", __assign({
-        className: "ncua-file-input__input-container"
-      }, {
-        children: [_jsxs("div", __assign({
-          className: "ncua-file-input__label"
-        }, {
-          children: [_jsx(Label, __assign({
-            isRequired: isRequired
-          }, {
+        "aria-hidden": "true",
+        ...props
+      }), _jsxs("div", {
+        className: "ncua-file-input__input-container",
+        children: [_jsxs("div", {
+          className: "ncua-file-input__label",
+          children: [_jsx(Label, {
+            isRequired: isRequired,
             children: label
-          })), showHelpIcon && _jsx(HelpCircle, {
+          }), showHelpIcon && _jsx(HelpCircle, {
             className: "ncua-input__help-icon"
           })]
-        })), _jsx(Button, {
+        }), _jsx(Button, {
           size: "xs",
           onClick: handleBrowseClick,
           disabled: disabled,
@@ -244,12 +184,11 @@ export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
             icon: Upload01
           },
           label: buttonLabel
-        }), showHintText && hintText && _jsx(HintText, __assign({
-          destructive: destructive
-        }, {
+        }), showHintText && hintText && _jsx(HintText, {
+          destructive: destructive,
           children: hintText
-        }))]
-      })), showHintText && renderHintList()]
-    }))]
-  }));
+        })]
+      }), showHintText && renderHintList()]
+    })]
+  });
 });

package/dist/esm/src/components/image-file-input/components/ImagePreview.js

@@ -1,22 +1,13 @@
-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 { Trash03 } from '@ncds/ui-admin-icon';
 import { Button } from '../../button';
-export var ImagePreview = function (_a) {
-  var file = _a.file,
-    onRemove = _a.onRemove;
-  return _jsxs("div", __assign({
-    className: "ncua-image-file-input__preview-container"
-  }, {
+export const ImagePreview = _ref => {
+  let {
+    file,
+    onRemove
+  } = _ref;
+  return _jsxs("div", {
+    className: "ncua-image-file-input__preview-container",
     children: [_jsx("img", {
       className: "ncua-image-file-input__preview-image",
       src: URL.createObjectURL(file),
@@ -34,5 +25,5 @@ export var ImagePreview = function (_a) {
       onClick: onRemove,
       className: "ncua-image-file-input__preview-remove-button"
     })]
-  }));
+  });
 };

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

@@ -1,9 +1,13 @@
 export * from './badge';
-export * from './breadcrumb';
+export * from './badge-group';
+export * from './bread-crumb';
 export * from './button';
-export * from './carousel';
+export * from './button-group';
+export * from './carousel-arrow';
+export * from './carousel-number-group';
 export * from './checkbox';
-export * from './combobox';
+export * from './combo-box';
+export * from './data-grid';
 export * from './date-picker';
 export * from './divider';
 export * from './dot';
@@ -11,22 +15,30 @@ export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';
 export * from './file-input';
+export * from './horizontal-tab';
 export * from './image-file-input';
-export * from './input';
+export * from './input-base';
 export * from './modal';
 export * from './notification';
+export * from './number-input';
 export * from './pagination';
+export * from './password-input';
 export * from './progress-bar';
 export * from './progress-circle';
 export * from './radio';
+export * from './range-date-picker';
+export * from './range-date-picker-with-buttons';
 export * from './select';
+export * from './select-box';
 export * from './select-dropdown';
-export * from './selectbox';
 export * from './shared';
 export * from './slider';
 export * from './spinner';
 export * from './switch';
 export * from './tab';
+export * from './table';
 export * from './tag';
+export * from './textarea';
 export * from './toggle';
-export * from './tooltip';
+export * from './tooltip';
+export * from './vertical-tab';

package/dist/esm/src/components/input-base/InputBase.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { COLOR } from '../../../constant/color';
+import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
+const validationSvgSize = {
+  xs: 14,
+  sm: 16
+};
+const generalSvgSize = {
+  xs: 14,
+  sm: 20
+};
+const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size = 'xs',
+    required,
+    label,
+    hintText,
+    disabled,
+    fullWidth = false,
+    validation,
+    destructive,
+    leadingElement,
+    trailingElement,
+    showHelpIcon,
+    maxLength,
+    showTextCount,
+    className,
+    ...props
+  } = _ref;
+  const inputRef = useRef(null);
+  const [textCount, setTextCount] = useState(0);
+  useEffect(() => {
+    if (inputRef.current && showTextCount) {
+      setTextCount(inputRef.current.value.length);
+      const handleInput = () => {
+        setTextCount(inputRef.current?.value.length ?? 0);
+      };
+      inputRef.current.addEventListener('input', handleInput);
+      return () => {
+        inputRef.current?.removeEventListener('input', handleInput);
+      };
+    }
+  }, [showTextCount]);
+  const renderOutsideSlot = slot => {
+    if (slot.type === 'custom' && slot.placement !== 'outside') {
+      return null;
+    }
+    switch (slot.type) {
+      case 'button':
+        return _jsx("button", {
+          type: slot.isSubmit ? 'submit' : 'button',
+          className: classNames('ncua-input__button', `ncua-input__button--${size}`),
+          onClick: slot.onClick,
+          children: slot.label
+        });
+      case 'text':
+        return _jsx("span", {
+          className: classNames('ncua-input__leading-text', `ncua-input__leading-text--${size}`),
+          children: slot.text
+        });
+      case 'custom':
+        return slot.children;
+      default:
+        return null;
+    }
+  };
+  const renderInsideSlot = (slot, position) => {
+    switch (slot.type) {
+      case 'icon':
+        {
+          const SlotIcon = slot.icon;
+          return _jsx("div", {
+            className: "ncua-input__icon-wrap",
+            children: _jsx(SlotIcon, {
+              className: classNames(`ncua-input__${position}-icon`, slot.className),
+              color: slot.color ? COLOR[slot.color] : undefined,
+              width: slot.size ?? generalSvgSize[size],
+              height: slot.size ?? generalSvgSize[size]
+            })
+          });
+        }
+      case 'custom':
+        if (slot.placement !== 'inside') {
+          return null;
+        }
+        return slot.children;
+      default:
+        return null;
+    }
+  };
+  const renderClearButton = () => {
+    if (!props.clearText) return null;
+    return _jsx("button", {
+      type: "button",
+      className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
+      onClick: props.onClearText,
+      children: _jsx(X, {
+        className: "ncua-input__clear-icon",
+        width: validationSvgSize[size],
+        height: validationSvgSize[size]
+      })
+    });
+  };
+  const renderStatusIcon = () => {
+    if (destructive) {
+      return _jsx("div", {
+        className: "ncua-input__icon-wrap ncua-input__right-icon",
+        children: _jsx(InfoCircle, {
+          className: "ncua-input__destructive-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      });
+    }
+    if (validation) {
+      return _jsx("div", {
+        className: "ncua-input__icon-wrap ncua-input__right-icon",
+        children: _jsx(CheckCircle, {
+          className: "ncua-input__validation-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      });
+    }
+    return null;
+  };
+  const renderLabel = () => {
+    if (!label) return null;
+    return _jsxs("div", {
+      className: classNames('ncua-input__label', `ncua-input__label--${size}`),
+      children: [_jsx(Label, {
+        isRequired: required,
+        htmlFor: props.id,
+        children: label
+      }), showHelpIcon && _jsx(HelpCircle, {
+        className: "ncua-input__help-icon"
+      })]
+    });
+  };
+  return _jsxs("div", {
+    className: classNames('ncua-input', `ncua-input--${size}`, {
+      destructive: destructive,
+      'is-disabled': disabled,
+      'full-width': fullWidth,
+      'ncua-input__trailing-button': trailingElement?.type === 'button',
+      'ncua-input__leading-text-wrap': leadingElement?.type === 'text'
+    }, className),
+    children: [renderLabel(), _jsxs("div", {
+      className: "ncua-input__content-wrap",
+      children: [_jsxs("div", {
+        className: "ncua-input__content",
+        children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", {
+          className: classNames('ncua-input__field', `ncua-input__field--${size}`),
+          children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", {
+            ref: node => {
+              if (typeof ref === 'function') {
+                ref(node);
+              } else if (ref) {
+                ref.current = node;
+              }
+              inputRef.current = node;
+            },
+            type: "text",
+            disabled: disabled,
+            maxLength: maxLength,
+            ...props
+          }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
+        }), trailingElement && renderOutsideSlot(trailingElement)]
+      }), showTextCount && maxLength && _jsxs("div", {
+        className: "ncua-input__field-text-count",
+        children: [_jsx("output", {
+          className: "ncua-input__field-text-count-current",
+          children: textCount
+        }), _jsxs("span", {
+          children: ["/", maxLength]
+        })]
+      })]
+    }), hintText && _jsx(HintText, {
+      className: "ncua-input__hint-text",
+      destructive: destructive,
+      children: hintText
+    })]
+  });
+});
+export { InputBase };

package/dist/esm/src/components/input-base/index.js

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