@cashub/ui 0.48.28 → 0.49.0-beta.0

package/dist/iconbox/subComponent/IconBoxImage.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _registry = _interopRequireDefault(require("../../icon/registry"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Wrapper = _styledComponents.default.span`
+  display: inline-flex;
+  width: 120px;
+  height: 120px;
+  color: ${_ref => {
+  let {
+    iconColor
+  } = _ref;
+  return iconColor || 'var(--color-primary)';
+}};
+  img, svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  ${_ref2 => {
+  let {
+    rounded
+  } = _ref2;
+  return rounded && 'border-radius: var(--border-radius); overflow: hidden;';
+}}
+  ${_ref3 => {
+  let {
+    sizeS
+  } = _ref3;
+  return sizeS && `
+      width: 80px;
+      height: 80px;
+    `;
+}}
+  ${_ref4 => {
+  let {
+    sizeXS
+  } = _ref4;
+  return sizeXS && `
+      width: 40px;
+      height: 40px;
+    `;
+}}
+  ${_ref5 => {
+  let {
+    size
+  } = _ref5;
+  return size && `
+      width: ${size}px;
+      height: ${size}px;
+    `;
+}}
+`;
+const IconBoxImage = _ref6 => {
+  let {
+    src: icon,
+    iconKey,
+    iconColor,
+    alt,
+    ...rest
+  } = _ref6;
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+  const override = theme?.useModernIcons && iconKey && _registry.default[iconKey];
+  const IconComponent = override || icon;
+  const isComponent = typeof IconComponent === 'function';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    iconColor: iconColor,
+    ...rest,
+    children: isComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      crossOrigin: "anonymous",
+      src: IconComponent,
+      alt: alt
+    })
+  });
+};
+var _default = exports.default = IconBoxImage;

package/dist/image/ImageFluid.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rounded = _interopRequireDefault(require("../styles/mixin/rounded"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ImageFluid = _styledComponents.default.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  ${_rounded.default}
+`;
+var _default = exports.default = ImageFluid;

package/dist/image/UploadImage.js

@@ -0,0 +1,250 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactI18next = require("react-i18next");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _fa = require("react-icons/fa");
+var _md = require("react-icons/md");
+var _utils = require("@cashub/utils");
+var _toast = require("../toast");
+var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
+var _ImageFigure = _interopRequireDefault(require("../figure/ImageFigure"));
+var _ImageFluid = _interopRequireDefault(require("./ImageFluid"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UploadImage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    id,
+    src,
+    alt = 'user avatar',
+    roundedCircle = false,
+    cropperHandler,
+    onBlur,
+    onClear,
+    allowClear = false
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const refWrapper = (0, _react.useRef)();
+  const [currentSrc, setCurrentSrc] = (0, _react.useState)(src);
+  const [currentFile, setCurrentFile] = (0, _react.useState)(null);
+  const [focusCount, setFocusCount] = (0, _react.useState)(0);
+  const handleAvatarRemove = () => {
+    setCurrentSrc(src);
+    ref.current.value = '';
+    setCurrentFile(null);
+  };
+  const restoreFile = (0, _react.useCallback)(() => {
+    if (!currentFile) return;
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(currentFile);
+    ref.current.files = dataTransfer.files;
+  }, [ref, currentFile]);
+  const handleImageFile = (0, _react.useCallback)((file, src) => {
+    const dataTransfer = new DataTransfer();
+    const changedImageFile = (0, _utils.dataURLtoFile)(src, file.name);
+    dataTransfer.items.add(changedImageFile);
+    setCurrentSrc(src);
+    setCurrentFile(changedImageFile);
+    ref.current.files = dataTransfer.files;
+  }, [ref]);
+  const handleOnChange = files => {
+    if (files.length === 0) {
+      // close file selector or cancel upload file need to restore to last uploaded file
+      restoreFile();
+    } else {
+      const fileType = files[0].name.slice(files[0].name.lastIndexOf('.')).toLowerCase();
+      if (['.jpeg', '.bmp', '.jpg', '.png'].includes(fileType)) {
+        if (files[0].size < 2097152) {
+          const srcUrl = URL.createObjectURL(files[0]);
+          handleCrop(srcUrl, files[0]);
+        } else {
+          ref.current.value = '';
+          restoreFile();
+          (0, _toast.showErrorMessage)({
+            title: t('error:Upload'),
+            message: t('error:UploadSize', {
+              size: '2MB'
+            })
+          });
+        }
+      } else {
+        ref.current.value = '';
+        restoreFile();
+        (0, _toast.showErrorMessage)({
+          title: t('error:Upload'),
+          message: t('error:LogoMerchantFileType')
+        });
+      }
+    }
+  };
+  const handleCrop = (0, _react.useCallback)((src, file) => {
+    cropperHandler({
+      src,
+      file,
+      width: 160,
+      height: 160,
+      onCrop: croppedSrc => {
+        handleImageFile(file, croppedSrc);
+      },
+      onClose: () => {
+        (0, _utils.getBase64DataUrlFromFile)(file, dataUrl => {
+          handleImageFile(file, dataUrl);
+        });
+      }
+    });
+  }, [cropperHandler, handleImageFile]);
+  const handleFocus = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.target.tagName === 'BUTTON') {
+      setFocusCount(focusCount + 1);
+    }
+  };
+  const handleBlur = event => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // if click figure,after click button
+    if (refWrapper.current.contains(event.relatedTarget)) return;
+    if (event.target === refWrapper.current && onBlur) {
+      onBlur();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    setCurrentSrc(src);
+  }, [src, ref]);
+
+  // if click button icon,can focus figure element
+  (0, _react.useEffect)(() => {
+    if (focusCount === 2) {
+      refWrapper.current.focus();
+      setFocusCount(0);
+    }
+  }, [ref, focusCount]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    ref: refWrapper,
+    roundedCircle: roundedCircle,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    tabIndex: "0",
+    children: [currentSrc && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFluid.default, {
+      crossOrigin: "anonymous",
+      src: currentSrc,
+      alt: alt,
+      rounded: true,
+      roundedCircle: roundedCircle
+    }), ref && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonGroup, {
+      roundedCircle: roundedCircle,
+      children: [ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(CropButton, {
+        roundedCircle: roundedCircle,
+        onClick: () => {
+          handleCrop(currentSrc, ref.current.files[0]);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdCrop, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModifyButton, {
+        roundedCircle: roundedCircle,
+        onClick: () => {
+          ref.current.click();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPen, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
+      ref: ref && ref,
+      id: id,
+      accept: ".jpeg, .bmp, .jpg, .png",
+      onChange: event => handleOnChange(event.target.files)
+    }), ref && ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
+      onClick: handleAvatarRemove,
+      roundedCircle: roundedCircle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
+    }), allowClear && src && ref && !ref.current?.files?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
+      onClick: onClear,
+      roundedCircle: roundedCircle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
+    })]
+  });
+});
+const Wrapper = (0, _styledComponents.default)(_ImageFigure.default)`
+  position: relative;
+  padding: var(--spacing-xs);
+`;
+const ButtonGroup = _styledComponents.default.div`
+  position: absolute;
+  top: -16px;
+  right: -12px;
+
+  ${_ref2 => {
+  let {
+    rounded
+  } = _ref2;
+  return rounded && `
+      top: 0;
+      right: 0;
+    `;
+}}
+`;
+const ActionButton = _styledComponents.default.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border: none;
+`;
+const CropButton = (0, _styledComponents.default)(ActionButton)`
+  color: var(--font-on-primary);
+  background: var(--color-primary);
+  border-radius: var(--border-radius);
+
+  ${_ref3 => {
+  let {
+    roundedCircle
+  } = _ref3;
+  return roundedCircle && `
+      position: relative;
+      top: -16px;
+    `;
+}}
+`;
+const ModifyButton = (0, _styledComponents.default)(ActionButton)`
+  color: var(--font-on-primary);
+  background: var(--color-primary);
+  border-radius: var(--border-radius);
+  margin-left: var(--spacing-xs);
+
+  ${_ref4 => {
+  let {
+    roundedCircle
+  } = _ref4;
+  return roundedCircle && `
+      position: relative;
+      top: 4px;
+    `;
+}}
+`;
+const RemoveIcon = (0, _styledComponents.default)(ActionButton)`
+  position: absolute;
+  color: var(--font-on-danger);
+  background: var(--color-danger);
+  border-radius: var(--border-radius);
+  bottom: -12px;
+  right: -12px;
+
+  ${_ref5 => {
+  let {
+    roundedCircle
+  } = _ref5;
+  return roundedCircle && `
+      bottom: 0;
+      right: 4px;
+    `;
+}}
+`;
+var _default = exports.default = UploadImage;

package/dist/jsoneditor/JsonEditor.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsoneditorReact = require("jsoneditor-react");
+var _brace = _interopRequireDefault(require("brace"));
+require("jsoneditor-react/es/editor.min.css");
+require("brace/mode/json");
+require("brace/theme/github");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const JsonEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsoneditorReact.JsonEditor, {
+      ref: ref,
+      ...props,
+      ace: _brace.default
+    })
+  });
+});
+const Wrapper = _styledComponents.default.div`
+  .jsoneditor {
+    border: 0;
+
+    div.jsoneditor-tree {
+      background: transparent;
+    }
+  }
+
+  div.jsoneditor td.jsoneditor-tree {
+    vertical-align: middle;
+  }
+
+  .jsoneditor-popover,
+  .jsoneditor-schema-error,
+  div.jsoneditor th,
+  div.jsoneditor td,
+  div.jsoneditor textarea,
+  div.jsoneditor select,
+  div.jsoneditor-field,
+  div.jsoneditor-value,
+  pre.jsoneditor-preview {
+    font-size: var(--font-body1);
+    color: var(--font-on-background);
+  }
+
+  div.jsoneditor select {
+    background: var(--color-background1);
+  }
+
+  div {
+    &.jsoneditor-readonly {
+      color: var(--font-on-background);
+    }
+
+    &.jsoneditor-value.jsoneditor-number {
+      color: var(--color-danger);
+    }
+
+    &.jsoneditor-field.jsoneditor-empty::after,
+    &.jsoneditor-value.jsoneditor-empty::after {
+      font-size: var(--font-body1);
+      color: var(--font-on-background);
+    }
+
+    &.jsoneditor-field[contenteditable='true']:focus,
+    &.jsoneditor-field[contenteditable='true']:hover,
+    &.jsoneditor-value[contenteditable='true']:focus,
+    &.jsoneditor-value[contenteditable='true']:hover,
+    &.jsoneditor-field.jsoneditor-highlight,
+    &.jsoneditor-value.jsoneditor-highlight {
+      background-color: transparent;
+      border: var(--border-width) solid var(--border-color);
+    }
+
+    &.jsoneditor-empty {
+      border-color: transparent;
+      border-style: none;
+    }
+
+    &.jsoneditor-tree button.jsoneditor-button {
+      filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(78deg)
+        brightness(104%) contrast(101%);
+    }
+
+    &.jsoneditor-tree button.jsoneditor-button:focus {
+      background-color: transparent;
+    }
+  }
+
+  // ace editor
+  .ace_editor.ace-jsoneditor {
+    border-radius: 8px;
+  }
+
+  .ace_gutter {
+    background: rgb(59, 57, 87) !important;
+    color: #ffffff !important;
+    z-index: 0;
+  }
+
+  .ace-jsoneditor .ace_gutter-active-line {
+    background: #00001d;
+  }
+
+  .ace_content {
+    background: rgb(76, 72, 110);
+    z-index: 0;
+  }
+
+  .ace-jsoneditor .ace_marker-layer .ace_active-line {
+    background: #00001d;
+  }
+
+  .ace-jsoneditor .ace_text-layer {
+    color: #fff;
+  }
+
+  .ace-jsoneditor .ace_variable {
+    color: #fff;
+  }
+
+  .ace-jsoneditor .ace_string {
+    color: #11d8cd;
+  }
+
+  .ace-jsoneditor .ace_cursor {
+    border-left: 2px solid #fff;
+  }
+
+  .ace_hidden-cursors .ace_cursor {
+    opacity: 0.5;
+  }
+`;
+var _default = exports.default = JsonEditor;

package/dist/keyframe/Pulse.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const Pulse = (0, _styledComponents.keyframes)`
+  0% {
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+`;
+var _default = exports.default = Pulse;

package/dist/keyframe/Spin.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const Spin = (0, _styledComponents.keyframes)`
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var _default = exports.default = Spin;

package/dist/layout/Aside.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _header = _interopRequireDefault(require("../styles/config/header.style"));
+var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _bgAside = _interopRequireDefault(require("../assets/images/bg-aside.png"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Aside = _styledComponents.default.aside`
+  width: ${_ref => {
+  let {
+    $display
+  } = _ref;
+  return $display ? `${_sidebar.default.open.width}` : `${_sidebar.default.close.width}`;
+}};
+  padding-top: var(--spacing-s);
+  height: calc(100vh - ${_header.default.height} - var(--spacing));
+  ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  if (theme?.hideAsideDecoration) {
+    return `background: var(--color-background4);`;
+  }
+  return `
+      background: url(${_bgAside.default}), var(--color-background4);
+      background-size: 356px 436px, auto;
+      background-repeat: no-repeat, no-repeat;
+      background-position: bottom, center;
+    `;
+}}
+  --font-on-background: var(--color-text-sidebar);
+  --color-hover: var(--color-hover-sidebar);
+  --color-active: var(--color-active-sidebar);
+  border-top-right-radius: var(--border-radius);
+  position: fixed;
+  top: calc(${_header.default.height} + var(--spacing));
+  transition: width 0.2s;
+  z-index: 60;
+  ${_media.default.tablet`
+    height: 100%;
+    top: 0;
+    padding-top:0;
+    border-top-right-radius:0;
+    left: 0;
+    box-shadow: var(--box-shadow);
+    ${props => props.$display === false && (0, _styledComponents.css)`
+        left: -${_sidebar.default.open.width};
+      `}
+  `};
+`;
+var _default = exports.default = Aside;

package/dist/layout/Backdrop.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _backdrop = require("../backdrop");
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Backdrop = (0, _styledComponents.default)(_backdrop.BaseBackdrop)`
+  visibility: hidden;
+
+  ${_media.default.tablet`
+    visibility: ${_ref => {
+  let {
+    $display
+  } = _ref;
+  return $display === true ? 'visible' : 'hidden';
+}};
+  `}
+`;
+var _default = exports.default = Backdrop;

package/dist/layout/Container.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _header = _interopRequireDefault(require("../styles/config/header.style"));
+var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _bgMainRegistry = _interopRequireDefault(require("./bgMainRegistry"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Container = _styledComponents.default.div`
+  transition: 0.3s;
+  width: 100%;
+  padding: calc(${_header.default.height} + var(--spacing)) var(--spacing)
+    var(--spacing);
+  background-color: var(--color-background1);
+  ${_ref => {
+  let {
+    theme
+  } = _ref;
+  if (theme?.hideMainDecoration) {
+    return '';
+  }
+  const bgKey = theme?.bgMainKey || 'default';
+  const bgImage = _bgMainRegistry.default[bgKey];
+  return `
+      background-image: url(${bgImage});
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-attachment: fixed;
+    `;
+}}
+  ${_ref2 => {
+  let {
+    hasSidebar,
+    $display
+  } = _ref2;
+  return hasSidebar === true && (0, _styledComponents.css)`
+        width: calc(
+          100% -
+            ${$display === true ? _sidebar.default.open.width : _sidebar.default.close.width}
+        );
+        margin-left: ${$display === true ? _sidebar.default.open.width : _sidebar.default.close.width};
+        ${_media.default.tablet`
+        width: 100%;
+        margin-left: 0;
+      `}
+      `;
+}}
+`;
+var _default = exports.default = Container;