@ncds/ui-admin 0.0.11 → 0.0.13

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

@@ -0,0 +1,79 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import 'flatpickr/dist/flatpickr.css';
+import { Korean } from 'flatpickr/dist/l10n/ko';
+import { useRef } from 'react';
+import Flatpickr from 'react-flatpickr';
+import { COLOR } from '../../../constant/color';
+export var DatePicker = function (_a) {
+  var _b = _a.shouldFocus,
+    shouldFocus = _b === void 0 ? true : _b,
+    currentDate = _a.currentDate,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
+    onChangeDate = _a.onChangeDate,
+    datePickerOptions = _a.datePickerOptions,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
+  var ref = useRef(null);
+  var onChangeDateHandler = function (dateTimeStamp, dateStr) {
+    return onChangeDate(dateStr);
+  };
+  var options = __assign({
+    mode: 'single',
+    static: true,
+    locale: Korean,
+    dateFormat: 'Y-m-d',
+    clickOpens: true,
+    onChange: onChangeDateHandler,
+    allowInvalidPreload: true
+  }, datePickerOptions);
+  var svgSize = size === 'sm' ? 14 : 16;
+  return _jsxs("div", __assign({
+    className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
+      'ncua-date-picker--disabled': attrs.disabled
+    })
+  }, {
+    children: [_jsx(Flatpickr, __assign({}, attrs, {
+      ref: ref,
+      className: classNames('ncua-date-picker__input'),
+      options: options,
+      value: currentDate
+    })), _jsx("span", __assign({
+      className: "ncua-date-picker__ico"
+    }, {
+      children: _jsx("svg", __assign({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: svgSize,
+        height: svgSize,
+        viewBox: "0 0 16 16",
+        fill: "none"
+      }, {
+        children: _jsx("path", {
+          d: "M14 6.66671H2M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.257 13.5903 13.951 13.782 13.5747C14 13.1469 14 12.5868 14 11.4667V5.86671C14 4.7466 14 4.18655 13.782 3.75873C13.5903 3.3824 13.2843 3.07644 12.908 2.88469C12.4802 2.66671 11.9201 2.66671 10.8 2.66671H5.2C4.0799 2.66671 3.51984 2.66671 3.09202 2.88469C2.71569 3.07644 2.40973 3.3824 2.21799 3.75873C2 4.18655 2 4.7466 2 5.86671V11.4667C2 12.5868 2 13.1469 2.21799 13.5747C2.40973 13.951 2.71569 14.257 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z",
+          stroke: attrs.disabled ? COLOR.gray300 : 'black',
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      }))
+    }))]
+  }));
+};

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

@@ -0,0 +1,9 @@
+export * from './button';
+export * from './checkbox';
+export * from './radio';
+export * from './select';
+export * from './svg';
+export * from './toggle';
+export * from './tooltip';
+export * from './carousel';
+export * from './badge';

package/dist/esm/ui-admin/src/components/input/FileInput.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/ui-admin/src/components/input/InputBase.js

@@ -0,0 +1,163 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import { COLOR } from '../../../constant/color';
+import { Label } from '../shared/label/Label';
+import { HintText } from '../shared/hintText/HintText';
+var validationSvgSize = {
+  xs: 14,
+  md: 16
+};
+var generalSvgSize = {
+  xs: 14,
+  md: 20
+};
+export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    required = _a.required,
+    label = _a.label,
+    hintText = _a.hintText,
+    disabled = _a.disabled,
+    validation = _a.validation,
+    destructive = _a.destructive,
+    leadingElement = _a.leadingElement,
+    trailingElement = _a.trailingElement,
+    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement"]);
+  var renderOutsideSlot = function (slot, position) {
+    if (slot.type === 'custom' && slot.placement !== 'outside') {
+      return null;
+    }
+    switch (slot.type) {
+      case 'button':
+        return _jsx("button", __assign({
+          type: slot.isSubmit ? 'submit' : 'button',
+          className: classNames('ncua-input__button', "ncua-input__button--".concat(size)),
+          onClick: slot.onClick
+        }, {
+          children: slot.label
+        }));
+      case 'text':
+        return _jsx("span", __assign({
+          className: classNames('ncua-input__leading-text', "ncua-input__leading-text--".concat(size))
+        }, {
+          children: slot.text
+        }));
+      case 'custom':
+        return slot.children;
+      default:
+        return null;
+    }
+  };
+  var renderInsideSlot = function (slot, position) {
+    switch (slot.type) {
+      case 'icon':
+        return _jsx("div", __assign({
+          className: "ncua-input__icon-wrap"
+        }, {
+          children: _jsx(Icon, {
+            className: classNames("ncua-input__".concat(position, "-icon"), slot.className),
+            name: slot.icon,
+            color: slot.color ? COLOR[slot.color] : undefined,
+            width: generalSvgSize[size],
+            height: generalSvgSize[size]
+          })
+        }));
+      case 'custom':
+        return slot.children;
+      default:
+        return null;
+    }
+  };
+  var renderClearButton = function () {
+    if (!props.clearText) return null;
+    return _jsx("button", __assign({
+      className: "ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear",
+      onClick: props.onClearText
+    }, {
+      children: _jsx(Icon, {
+        name: "x",
+        className: "ncua-input__clear-icon",
+        width: validationSvgSize[size],
+        height: validationSvgSize[size]
+      })
+    }));
+  };
+  var renderStatusIcon = function () {
+    if (destructive) {
+      return _jsx("div", __assign({
+        className: "ncua-input__icon-wrap ncua-input__right-icon"
+      }, {
+        children: _jsx(Icon, {
+          name: "info-circle",
+          className: "ncua-input__destructive-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      }));
+    }
+    if (validation) {
+      return _jsx("div", __assign({
+        className: "ncua-input__icon-wrap ncua-input__right-icon"
+      }, {
+        children: _jsx(Icon, {
+          name: "check-circle",
+          className: "ncua-input__validation-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      }));
+    }
+    return null;
+  };
+  return _jsxs("div", __assign({
+    className: classNames('ncua-input', "ncua-input--".concat(size), {
+      destructive: destructive,
+      'is-disabled': disabled,
+      'ncua-input__trailing-button': (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.type) === 'button'
+    })
+  }, {
+    children: [label && _jsx(Label, __assign({
+      isRequired: required,
+      htmlFor: props.id,
+      className: "ncua-input__label--".concat(size)
+    }, {
+      children: label
+    })), _jsxs("div", __assign({
+      className: "ncua-input__content"
+    }, {
+      children: [leadingElement && renderOutsideSlot(leadingElement, 'left'), _jsxs("div", __assign({
+        className: classNames('ncua-input__field', "ncua-input--".concat(size))
+      }, {
+        children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", __assign({
+          ref: ref,
+          type: "text",
+          disabled: disabled
+        }, props)), trailingElement && renderInsideSlot(trailingElement, 'right'), renderClearButton(), renderStatusIcon()]
+      })), trailingElement && renderOutsideSlot(trailingElement, 'right')]
+    })), hintText && _jsx(HintText, __assign({
+      destructive: destructive
+    }, {
+      children: hintText
+    }))]
+  }));
+});

package/dist/esm/ui-admin/src/components/input/PasswordInput.js

@@ -0,0 +1,86 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { InputBase } from './InputBase';
+import { Eye, EyeOff } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+var svgSize = {
+  xs: 14,
+  md: 20
+};
+export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    props = __rest(_a, ["size"]);
+  var inputRef = useRef(null);
+  var _c = useState(false),
+    isVisible = _c[0],
+    setIsVisible = _c[1];
+  var _d = useState(false),
+    hasContent = _d[0],
+    setHasContent = _d[1];
+  var svgProps = {
+    width: svgSize[size],
+    height: svgSize[size]
+  };
+  var handleVisibilityChange = function () {
+    setIsVisible(!isVisible);
+  };
+  useEffect(function () {
+    if (inputRef.current) {
+      setHasContent(!!inputRef.current.value);
+      var handleInput_1 = function () {
+        var _a;
+        setHasContent(!!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value));
+      };
+      inputRef.current.addEventListener('input', handleInput_1);
+      return function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
+      };
+    }
+  }, []);
+  return _jsx(InputBase, __assign({
+    ref: function (node) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+      inputRef.current = node;
+    },
+    type: isVisible ? 'text' : 'password',
+    leadingElement: {
+      type: 'icon',
+      icon: 'lock-01',
+      color: hasContent ? 'gray600' : 'gray300'
+    },
+    trailingElement: {
+      type: 'custom',
+      placement: 'inside',
+      children: _jsx("button", __assign({
+        className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'),
+        onClick: handleVisibilityChange
+      }, {
+        children: isVisible ? _jsx(Eye, __assign({}, svgProps)) : _jsx(EyeOff, __assign({}, svgProps))
+      }))
+    }
+  }, props));
+});

package/dist/esm/ui-admin/src/components/input/Textarea.js

@@ -0,0 +1,102 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Label } from '../shared/label/Label';
+import { HintText } from '../shared/hintText/HintText';
+export var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
+  var className = _a.className,
+    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"]);
+  var textareaRef = useRef(null);
+  var _c = useState(0),
+    textCount = _c[0],
+    setTextCount = _c[1];
+  var shouldShowHintArea = hintText || characterCount;
+  useEffect(function () {
+    if (textareaRef.current && characterCount) {
+      setTextCount(textareaRef.current.value.length);
+      var handleInput_1 = function () {
+        var _a, _b;
+        setTextCount((_b = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value.length) !== null && _b !== void 0 ? _b : 0);
+      };
+      textareaRef.current.addEventListener('input', handleInput_1);
+      return function () {
+        var _a;
+        (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
+      };
+    }
+  }, [characterCount]);
+  return _jsxs("div", __assign({
+    className: classNames('ncua-input', 'ncua-input--textarea', {
+      destructive: destructive,
+      'is-disabled': disabled
+    }, className)
+  }, {
+    children: [label && _jsx(Label, __assign({
+      htmlFor: props.id,
+      isRequired: required
+    }, {
+      children: label
+    })), _jsx("div", __assign({
+      className: "ncua-input__content"
+    }, {
+      children: _jsx("div", __assign({
+        className: "ncua-input__field"
+      }, {
+        children: _jsx("textarea", __assign({
+          ref: function (node) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            textareaRef.current = node;
+          },
+          className: "ncua-input__textarea",
+          disabled: disabled
+        }, props))
+      }))
+    })), shouldShowHintArea && _jsxs("div", __assign({
+      className: "ncua-input__text-count-wrap"
+    }, {
+      children: [hintText && _jsx(HintText, __assign({
+        as: "div",
+        destructive: destructive
+      }, {
+        children: hintText
+      })), characterCount && _jsx("div", __assign({
+        className: "ncua-input__text-count"
+      }, {
+        children: _jsxs("span", __assign({
+          className: "ncua-input__text-count-text"
+        }, {
+          children: [textCount, " / ", (_b = props.maxLength) !== null && _b !== void 0 ? _b : 0]
+        }))
+      }))]
+    }))]
+  }));
+});

package/dist/esm/ui-admin/src/components/pagination/NavButton.js

@@ -0,0 +1,84 @@
+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 } from "react/jsx-runtime";
+import { Button } from '../button/Button';
+var NAV_BUTTON_CONFIG = {
+  first: {
+    label: '처음',
+    className: 'ncua-pagination__first',
+    getIcon: function (isPC) {
+      return 'chevron-left-double';
+    }
+  },
+  prev: {
+    label: '이전',
+    className: 'ncua-pagination__before',
+    getIcon: function (isPC) {
+      return isPC ? 'chevron-left' : 'arrow-left';
+    }
+  },
+  next: {
+    label: '다음',
+    className: 'ncua-pagination__next',
+    getIcon: function (isPC) {
+      return isPC ? 'chevron-right' : 'arrow-right';
+    }
+  },
+  last: {
+    label: '마지막',
+    className: 'ncua-pagination__last',
+    getIcon: function (isPC) {
+      return 'chevron-right-double';
+    }
+  }
+};
+export var NavButton = function (_a) {
+  var type = _a.type,
+    as = _a.as,
+    isPC = _a.isPC,
+    noPrev = _a.noPrev,
+    noNext = _a.noNext,
+    href = _a.href,
+    target = _a.target,
+    onClick = _a.onClick;
+  var config = NAV_BUTTON_CONFIG[type];
+  var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
+  var isFirstOrPrev = type === 'first' || type === 'prev';
+  var isNextOrLast = type === 'next' || type === 'last';
+  var disabled = isFirstOrPrev ? noPrev : isNextOrLast ? noNext : false;
+  // key를 제외한 공통 props
+  var buttonProps = {
+    label: config.label,
+    className: config.className,
+    onlyIcon: true,
+    leadingIcon: {
+      type: 'icon',
+      icon: config.getIcon(isPC),
+      color: disabled ? 'gray200' : 'gray700'
+    },
+    hierarchy: 'secondary-gray',
+    size: 'xs',
+    disabled: disabled,
+    onClick: onClick
+  };
+  // key 값 별도 계산
+  var buttonKey = isNavigationButton ? "".concat(isPC ? 'pc' : 'mobile', "-").concat(type) : undefined;
+  if (as === 'a') {
+    return _jsx(Button, __assign({
+      as: "a",
+      href: href,
+      target: target
+    }, buttonProps), buttonKey);
+  }
+  return _jsx(Button, __assign({
+    as: "button"
+  }, buttonProps), buttonKey);
+};