@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/cjs/src/components/forms-and-input/file-input/FileInput.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileInputErrorType = exports.FileInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _button = require("../../action/button");
+var _Tag = require("../../feedback-and-status/tag/Tag");
+var _shared = require("../../shared");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var FileInputErrorType;
+(function (FileInputErrorType) {
+  FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
+  FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
+  FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
+})(FileInputErrorType || (exports.FileInputErrorType = FileInputErrorType = {}));
+const FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref2, _ref) => {
+  let {
+    size = 'xs',
+    accept,
+    multiple = false,
+    maxFileSize,
+    maxFileCount,
+    value,
+    onChange,
+    onFileSelect,
+    onFail,
+    buttonLabel = '파일 찾기',
+    disabled,
+    label,
+    hintItems,
+    validation,
+    destructive,
+    isRequired,
+    showHelpIcon,
+    hintText,
+    ...props
+  } = _ref2;
+  const fileInputRef = (0, _react.useRef)(null);
+  const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
+  // Determine if component is controlled or uncontrolled
+  const isControlled = value !== undefined;
+  const files = isControlled ? value : internalFiles;
+  // Sync internal state with controlled value
+  (0, _react.useEffect)(() => {
+    if (isControlled && value) {
+      setInternalFiles(value);
+    }
+  }, [isControlled, value]);
+  const updateFiles = newFiles => {
+    if (isControlled) {
+      onChange?.(newFiles);
+    } else {
+      setInternalFiles(newFiles);
+      onFileSelect?.(newFiles);
+    }
+  };
+  const handleFileChange = event => {
+    const selectedFiles = event.target.files;
+    if (!selectedFiles || selectedFiles.length === 0) return;
+    const {
+      validFiles,
+      invalidFiles
+    } = validateFiles(Array.from(selectedFiles));
+    const nextFiles = [...files, ...validFiles];
+    updateFiles(nextFiles);
+    if (onFail && invalidFiles.length > 0) {
+      onFail(invalidFiles);
+    }
+  };
+  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: FileInputErrorType.ALREADY_UPLOADED
+        });
+        continue;
+      }
+      if (!!maxFileSize && file.size > maxFileSize) {
+        invalidFiles.push({
+          ...file,
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        });
+        continue;
+      }
+      if (!!maxFileCount && files.length + validFiles.length >= maxFileCount) {
+        invalidFiles.push({
+          ...file,
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT
+        });
+        continue;
+      }
+      validFiles.push(file);
+    }
+    return {
+      validFiles,
+      invalidFiles
+    };
+  };
+  const handleBrowseClick = () => {
+    if (fileInputRef.current && !disabled) {
+      fileInputRef.current.click();
+    }
+  };
+  const handleRemoveFile = index => {
+    const newFiles = [...files];
+    newFiles.splice(index, 1);
+    updateFiles(newFiles);
+  };
+  const renderFileTagList = () => {
+    if (files.length === 0) return null;
+    return (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-file-input__file-tags",
+      children: files.map((file, index) => (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-file-input__file-tag-container",
+        children: [(0, _jsxRuntime.jsx)(_Tag.Tag, {
+          text: file.name,
+          size: size === 'xs' ? 'sm' : 'md',
+          close: true,
+          onButtonClick: () => handleRemoveFile(index)
+        }), file.type.startsWith('image/') && (0, _jsxRuntime.jsx)("img", {
+          className: "ncua-file-input__file-image",
+          src: URL.createObjectURL(file),
+          alt: file.name
+        })]
+      }, `${file.name}-${index}`))
+    });
+  };
+  const renderHintList = () => {
+    if (!hintItems || hintItems.length === 0) return null;
+    return (0, _jsxRuntime.jsx)("ul", {
+      className: "ncua-file-input__hint-list",
+      children: hintItems.map(hint => (0, _jsxRuntime.jsx)("li", {
+        className: "ncua-file-input__hint-item",
+        children: hint
+      }, hint))
+    });
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-file-input', `ncua-file-input--${size}`),
+    children: [(0, _jsxRuntime.jsx)("input", {
+      hidden: true,
+      ref: fileInputRef,
+      type: "file",
+      accept: accept,
+      multiple: multiple,
+      onChange: handleFileChange,
+      tabIndex: -1,
+      "aria-hidden": "true",
+      ...props
+    }), (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-file-input__input-container",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-file-input__label",
+        children: [(0, _jsxRuntime.jsx)(_shared.Label, {
+          isRequired: isRequired,
+          children: label
+        }), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+          className: "ncua-input__help-icon"
+        })]
+      }), (0, _jsxRuntime.jsx)(_button.Button, {
+        size: size,
+        onClick: handleBrowseClick,
+        disabled: disabled,
+        leadingIcon: {
+          type: 'icon',
+          icon: _uiAdminIcon.Upload01
+        },
+        label: buttonLabel
+      }), hintText && (0, _jsxRuntime.jsx)(_shared.HintText, {
+        destructive: destructive,
+        children: hintText
+      })]
+    }), renderHintList(), renderFileTagList()]
+  });
+});

package/dist/cjs/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageFileInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _button = require("../../action/button");
+var _tooltip = require("../../overlays/tooltip");
+var _shared = require("../../shared");
+var _FileInput = require("../file-input/FileInput");
+var _ImagePreview = require("./components/ImagePreview");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => fileInputRef.current);
+  const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
+  const [isButtonHovered, setIsButtonHovered] = (0, _react.useState)(false);
+  // Determine if component is controlled or uncontrolled
+  const isControlled = value !== undefined;
+  const files = isControlled ? value : internalFiles;
+  // Sync internal state with controlled value
+  (0, _react.useEffect)(() => {
+    if (isControlled && value) {
+      setInternalFiles(value);
+    }
+  }, [isControlled, value]);
+  const updateFiles = newFiles => {
+    if (isControlled) {
+      onChange?.(newFiles);
+    } else {
+      setInternalFiles(newFiles);
+      onFileSelect?.(newFiles);
+    }
+  };
+  const handleFileChange = event => {
+    const selectedFiles = event.target.files;
+    if (!selectedFiles || selectedFiles.length === 0) return;
+    const {
+      validFiles,
+      invalidFiles
+    } = validateFiles(Array.from(selectedFiles));
+    // Replace existing file if maxFileCount is 1
+    const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
+    updateFiles(nextFiles);
+    if (onFail && invalidFiles.length > 0) {
+      onFail(invalidFiles);
+    }
+    event.target.value = '';
+  };
+  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: _FileInput.FileInputErrorType.ALREADY_UPLOADED
+        });
+        continue;
+      }
+      if (!!maxFileSize && file.size > maxFileSize) {
+        invalidFiles.push({
+          ...file,
+          errorType: _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        });
+        continue;
+      }
+      // Skip max count check if maxFileCount is 1 (allow replacement)
+      if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
+        invalidFiles.push({
+          ...file,
+          errorType: _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT
+        });
+        continue;
+      }
+      validFiles.push(file);
+    }
+    return {
+      validFiles,
+      invalidFiles
+    };
+  };
+  const handleBrowseClick = () => {
+    if (fileInputRef.current && !disabled) {
+      fileInputRef.current.click();
+    }
+  };
+  const handleRemoveFile = index => {
+    const newFiles = [...files];
+    newFiles.splice(index, 1);
+    updateFiles(newFiles);
+  };
+  const renderImagePreview = function () {
+    let files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
+    return (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-image-file-input__previews",
+      children: [files.map((file, index) => (0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview, {
+        file: file,
+        onRemove: () => handleRemoveFile(index)
+      }, `${file.name}-${index}`)), showEmptySlot && (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-image-file-input__empty-slot-wrapper",
+        onMouseEnter: () => !disabled && setIsButtonHovered(true),
+        onMouseLeave: () => setIsButtonHovered(false),
+        onClick: handleBrowseClick,
+        children: [(0, _jsxRuntime.jsx)(_button.Button, {
+          onlyIcon: true,
+          size: size,
+          className: (0, _classnames.default)('ncua-image-file-input__preview-container'),
+          onClick: handleBrowseClick,
+          disabled: disabled,
+          label: imagePreviewTooltipLabel
+        }), isButtonHovered && !disabled && (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+          content: imagePreviewTooltipLabel,
+          position: "bottom"
+        })]
+      })]
+    });
+  };
+  const renderHintList = () => {
+    if (!hintItems || hintItems.length === 0) return null;
+    return (0, _jsxRuntime.jsx)("ul", {
+      className: "ncua-file-input__hint-list",
+      children: hintItems.map(hint => (0, _jsxRuntime.jsx)("li", {
+        className: "ncua-file-input__hint-item",
+        children: hint
+      }, hint))
+    });
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-image-file-input', `ncua-image-file-input--${size}`, {
+      destructive: destructive
+    }),
+    children: [renderImagePreview(files), showFileInput && (0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('ncua-file-input', `ncua-file-input--${size}`),
+      children: [(0, _jsxRuntime.jsx)("input", {
+        hidden: true,
+        ref: fileInputRef,
+        type: "file",
+        accept: accept,
+        multiple: multiple,
+        onChange: handleFileChange,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        ...props
+      }), (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-file-input__input-container",
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-file-input__label",
+          children: [(0, _jsxRuntime.jsx)(_shared.Label, {
+            isRequired: isRequired,
+            children: label
+          }), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+            className: "ncua-input__help-icon"
+          })]
+        }), (0, _jsxRuntime.jsx)(_button.Button, {
+          size: "xs",
+          onClick: handleBrowseClick,
+          disabled: disabled,
+          leadingIcon: {
+            type: 'icon',
+            icon: _uiAdminIcon.Upload01
+          },
+          label: buttonLabel
+        }), showHintText && hintText && (0, _jsxRuntime.jsx)(_shared.HintText, {
+          destructive: destructive,
+          children: hintText
+        })]
+      }), showHintText && renderHintList()]
+    })]
+  });
+});

package/dist/cjs/src/components/forms-and-input/image-file-input/components/ImagePreview.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImagePreview = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _button = require("../../../action/button");
+const ImagePreview = _ref => {
+  let {
+    file,
+    onRemove
+  } = _ref;
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-image-file-input__preview-container",
+    children: [(0, _jsxRuntime.jsx)("img", {
+      className: "ncua-image-file-input__preview-image",
+      src: URL.createObjectURL(file),
+      alt: file.name
+    }), (0, _jsxRuntime.jsx)(_button.Button, {
+      size: "sm",
+      hierarchy: "text",
+      onlyIcon: true,
+      leadingIcon: {
+        type: 'icon',
+        icon: _uiAdminIcon.Trash03,
+        color: 'gray200'
+      },
+      label: "Remove image",
+      onClick: onRemove,
+      className: "ncua-image-file-input__preview-remove-button"
+    })]
+  });
+};
+exports.ImagePreview = ImagePreview;

package/dist/cjs/src/components/forms-and-input/image-file-input/components/index.js

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

package/dist/cjs/src/components/forms-and-input/image-file-input/index.js

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

package/dist/cjs/src/components/forms-and-input/input-base/InputBase.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputBase = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _color = require("../../../../constant/color");
+var _HintText = require("../../shared/hintText/HintText");
+var _Label = require("../../shared/label/Label");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const validationSvgSize = {
+  xs: 14,
+  sm: 16
+};
+const generalSvgSize = {
+  xs: 14,
+  sm: 20
+};
+const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size = 'xs',
+    required,
+    label,
+    hintText,
+    disabled,
+    fullWidth = false,
+    validation,
+    destructive,
+    leadingElement,
+    trailingElement,
+    showHelpIcon,
+    maxLength,
+    showTextCount,
+    className,
+    ...props
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  const [textCount, setTextCount] = (0, _react.useState)(0);
+  (0, _react.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 (0, _jsxRuntime.jsx)("button", {
+          type: slot.isSubmit ? 'submit' : 'button',
+          className: (0, _classnames.default)('ncua-input__button', `ncua-input__button--${size}`),
+          onClick: slot.onClick,
+          children: slot.label
+        });
+      case 'text':
+        return (0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)('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 (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-input__icon-wrap",
+            children: (0, _jsxRuntime.jsx)(SlotIcon, {
+              className: (0, _classnames.default)(`ncua-input__${position}-icon`, slot.className),
+              color: slot.color ? _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 (0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
+      onClick: props.onClearText,
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
+        className: "ncua-input__clear-icon",
+        width: validationSvgSize[size],
+        height: validationSvgSize[size]
+      })
+    });
+  };
+  const renderStatusIcon = () => {
+    if (destructive) {
+      return (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-input__icon-wrap ncua-input__right-icon",
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.InfoCircle, {
+          className: "ncua-input__destructive-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      });
+    }
+    if (validation) {
+      return (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-input__icon-wrap ncua-input__right-icon",
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.CheckCircle, {
+          className: "ncua-input__validation-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      });
+    }
+    return null;
+  };
+  const renderLabel = () => {
+    if (!label) return null;
+    return (0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('ncua-input__label', `ncua-input__label--${size}`),
+      children: [(0, _jsxRuntime.jsx)(_Label.Label, {
+        isRequired: required,
+        htmlFor: props.id,
+        children: label
+      }), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+        className: "ncua-input__help-icon"
+      })]
+    });
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('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(), (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-input__content-wrap",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-input__content",
+        children: [leadingElement && renderOutsideSlot(leadingElement), (0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames.default)('ncua-input__field', `ncua-input__field--${size}`),
+          children: [leadingElement && renderInsideSlot(leadingElement, 'left'), (0, _jsxRuntime.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 && (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-input__field-text-count",
+        children: [(0, _jsxRuntime.jsx)("output", {
+          className: "ncua-input__field-text-count-current",
+          children: textCount
+        }), (0, _jsxRuntime.jsxs)("span", {
+          children: ["/", maxLength]
+        })]
+      })]
+    }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+      className: "ncua-input__hint-text",
+      destructive: destructive,
+      children: hintText
+    })]
+  });
+});