@cashub/ui-elv 1.0.0

package/iconbox/IconBox.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
+var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
+var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const IconBox = _ref => {
+  let {
+    icon,
+    title,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
+        sizeXS: true,
+        marginRight: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+          sizeXS: true,
+          src: icon,
+          alt: `${title}'s icon`
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
+        children: title
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
+      children: children
+    })]
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-l);
+  margin-bottom: var(--spacing);
+  border-radius: var(--border-radius);
+  background: var(--color-background2);
+  color: var(--font-on-background);
+
+  background: var(--color-background2);
+  background-image: url(${_bgChartTriangle.default});
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: 30% 70%;
+`;
+const IconBoxHead = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing);
+`;
+const IconBoxTitle = _styledComponents.default.div`
+  font-size: var(--font-h2);
+  font-weight: bold;
+  word-break: break-all;
+`;
+const IconBoxBody = _styledComponents.default.div`
+  font-size: var(--font-h1);
+  font-weight: bold;
+  text-align: center;
+`;
+var _default = exports.default = IconBox;

package/iconbox/IconBoxV2.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
+var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
+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 IconBoxV2 = _styledComponents.default.div`
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+  background: var(--color-background1);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  border: 2px solid transparent;
+
+  ${_ref => {
+  let {
+    fullHeight
+  } = _ref;
+  return fullHeight && 'height: calc(100% - var(--spacing));';
+}}
+
+  ${_ref2 => {
+  let {
+    selected
+  } = _ref2;
+  return selected && (0, _styledComponents.css)`
+      border-color: var(--color-primary);
+      background: color-mix(
+        in srgb,
+        var(--color-primary) 10%,
+        var(--color-background1)
+      );
+    `;
+}}
+`;
+const Body = _styledComponents.default.div`
+  display: flex;
+`;
+const Description = _styledComponents.default.div`
+  flex: 1 1 auto;
+  font-size: var(--font-body1);
+`;
+const Info = _styledComponents.default.div`
+  word-break: break-all;
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+const Tool = _styledComponents.default.div`
+  flex: 0 0 calc(var(--spacing-s) + 36px);
+  padding-left: var(--spacing-s);
+
+  > *:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+var _default = exports.default = Object.assign(IconBoxV2, {
+  Body,
+  Description,
+  Info,
+  Tool,
+  Figure: _IconBoxFigure.default,
+  Image: _IconBoxImage.default
+});

package/iconbox/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ApplicationIconBox", {
+  enumerable: true,
+  get: function () {
+    return _ApplicationIconBox.default;
+  }
+});
+Object.defineProperty(exports, "IconBox", {
+  enumerable: true,
+  get: function () {
+    return _IconBox.default;
+  }
+});
+Object.defineProperty(exports, "IconBoxV2", {
+  enumerable: true,
+  get: function () {
+    return _IconBoxV.default;
+  }
+});
+var _ApplicationIconBox = _interopRequireDefault(require("./ApplicationIconBox"));
+var _IconBox = _interopRequireDefault(require("./IconBox"));
+var _IconBoxV = _interopRequireDefault(require("./IconBoxV2"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/iconbox/subComponent/IconBoxFigure.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const IconBoxFigure = _styledComponents.default.figure`
+  flex: 0 0 120px;
+
+  ${_ref => {
+  let {
+    marginRight
+  } = _ref;
+  return marginRight && 'margin-right: var(--spacing);';
+}}
+  ${_ref2 => {
+  let {
+    paddingRight
+  } = _ref2;
+  return paddingRight && 'padding-right: var(--spacing);';
+}}
+  ${_ref3 => {
+  let {
+    paddingRightS
+  } = _ref3;
+  return paddingRightS && 'padding-right: var(--spacing-s);';
+}}
+  ${_ref4 => {
+  let {
+    paddingBottomS
+  } = _ref4;
+  return paddingBottomS && 'padding-bottom: var(--spacing-s);';
+}}
+
+  ${_ref5 => {
+  let {
+    sizeS
+  } = _ref5;
+  return sizeS && 'flex-basis: 80px;';
+}}
+  ${_ref6 => {
+  let {
+    sizeXS
+  } = _ref6;
+  return sizeXS && 'flex-basis: 40px;';
+}}
+`;
+var _default = exports.default = IconBoxFigure;

package/iconbox/subComponent/IconBoxImage.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const IconBoxImage = _styledComponents.default.img.attrs(() => ({
+  crossOrigin: 'anonymous'
+}))`
+  width: 120px;
+  height: 120px;
+
+  ${_ref => {
+  let {
+    rounded
+  } = _ref;
+  return rounded && 'border-radius: var(--border-radius);';
+}}
+
+  ${_ref2 => {
+  let {
+    sizeS
+  } = _ref2;
+  return sizeS && `
+      width: 80px;
+      height: 80px;
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    sizeXS
+  } = _ref3;
+  return sizeXS && `
+      width: 40px;
+      height: 40px;
+    `;
+}}
+`;
+var _default = exports.default = IconBoxImage;

package/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/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/image/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ImageFluid", {
+  enumerable: true,
+  get: function () {
+    return _ImageFluid.default;
+  }
+});
+Object.defineProperty(exports, "UploadImage", {
+  enumerable: true,
+  get: function () {
+    return _UploadImage.default;
+  }
+});
+var _ImageFluid = _interopRequireDefault(require("./ImageFluid"));
+var _UploadImage = _interopRequireDefault(require("./UploadImage"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }