@cashub/ui-elv 1.0.0

package/modal/TitleModal.js

@@ -0,0 +1,250 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireWildcard(require("react-dom"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _md = require("react-icons/md");
+var _hooks = require("@cashub/hooks");
+var _utils = require("@cashub/utils");
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+var _Heading = _interopRequireDefault(require("../heading/Heading3"));
+var _ModalBackdrop = _interopRequireDefault(require("../backdrop/ModalBackdrop"));
+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 TitleModal = props => {
+  const rootElement = (0, _utils.appendElementTo)('TitleModalContainer');
+  const Container = document.createElement('div');
+  rootElement.appendChild(Container);
+  const handleClose = async function () {
+    let dismiss = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (props.onBeforeClose) {
+      // expect a promise
+      // resolve indicate want to close modal
+      // reject indicate do not close modal
+      try {
+        await props.onBeforeClose(dismiss);
+      } catch (error) {
+        return;
+      }
+    }
+
+    // unmount component and clear event handler and state before remove container
+    (0, _reactDom.unmountComponentAtNode)(Container);
+    Container.remove();
+    if (props.onClose) {
+      props.onClose(dismiss);
+    }
+  };
+  const methods = {
+    close: handleClose
+  };
+  _reactDom.default.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContent, {
+    ...props,
+    onClose: handleClose,
+    methods: methods
+  }), Container);
+};
+const ModalContent = _ref => {
+  let {
+    children,
+    onClose,
+    methods,
+    size
+  } = _ref;
+  const refWrapper = (0, _react.useRef)(null);
+  const [clickTarget, setClickTarget] = (0, _react.useState)(null);
+  const child = (0, _react.useMemo)(() => {
+    return (0, _utils.isReactComponent)(children) ? /*#__PURE__*/(0, _react.cloneElement)(children, methods) : children;
+  }, [children, methods]);
+  const handleDismiss = dismiss => {
+    if (clickTarget === refWrapper.current) {
+      onClose(dismiss);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    ref: refWrapper,
+    onClick: () => {
+      handleDismiss(true);
+    },
+    onMouseDown: event => {
+      setClickTarget(event.target);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+      size: size,
+      onMouseDown: event => {
+        setClickTarget(event.target);
+      },
+      children: child
+    })
+  });
+};
+const ModalHeader = _ref2 => {
+  let {
+    handleClose,
+    children
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdClose, {
+      onClick: handleClose
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.default, {
+      children: children
+    })]
+  });
+};
+const ModalBody = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  const ownRef = (0, _react.useRef)(null);
+  const bodyRef = (0, _hooks.useForkRef)(ownRef, ref);
+  const recalculateHeight = (0, _react.useCallback)(() => {
+    // body element not render yet
+    if (!ownRef.current) return;
+    const ModalBodyElement = ownRef.current;
+    const ModalHeaderElement = ModalBodyElement.previousSibling;
+    const ModalFooterElement = ModalBodyElement.nextSibling;
+    let needSubtractHeight = 0;
+    if (ModalHeaderElement) {
+      needSubtractHeight += ModalHeaderElement.offsetHeight;
+    }
+    if (ModalFooterElement) {
+      needSubtractHeight += ModalFooterElement.offsetHeight;
+    }
+    ModalBodyElement.style.maxHeight = `calc(90vh - ${needSubtractHeight}px)`;
+  }, []);
+  (0, _react.useEffect)(() => {
+    recalculateHeight();
+    window.addEventListener('resize', recalculateHeight);
+    return () => window.removeEventListener('resize', recalculateHeight);
+  }, [recalculateHeight]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
+    ref: bodyRef,
+    ...props,
+    children: children
+  });
+});
+ModalBody.displayName = 'ModalBody';
+const ModalFooter = _ref4 => {
+  let {
+    children
+  } = _ref4;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
+    children: children
+  });
+};
+const Wrapper = (0, _styledComponents.default)(_ModalBackdrop.default)`
+  z-index: 80;
+`;
+const Container = _styledComponents.default.div`
+  position: relative;
+  border-radius: var(--border-radius);
+  background: var(--color-background2);
+  box-shadow: var(--box-shadow);
+  border: var(--border-width) solid var(--border-color);
+  width: 100%;
+
+  ${_ref5 => {
+  let {
+    size
+  } = _ref5;
+  switch (size) {
+    case 'extraLarge':
+      return 'max-width: 90%;';
+    case 'large':
+      return 'max-width: 75%;';
+    case 'normal':
+      return 'max-width: 50%;';
+    case 'small':
+      return 'max-width: 30%;';
+    default:
+      break;
+  }
+}}
+
+  ${_media.default.tablet`
+    ${_ref6 => {
+  let {
+    size
+  } = _ref6;
+  switch (size) {
+    case 'extraLarge':
+    case 'large':
+      return 'max-width: 90%;';
+    case 'normal':
+      return 'max-width: 75%;';
+    case 'small':
+      return 'max-width: 50%;';
+    default:
+      break;
+  }
+}}
+  `}
+
+  ${_media.default.mobile`
+    ${_ref7 => {
+  let {
+    size
+  } = _ref7;
+  switch (size) {
+    case 'normal':
+      return 'max-width: 90%;';
+    case 'small':
+      return 'max-width: 70%;';
+    default:
+      break;
+  }
+}}
+  `}
+`;
+const Header = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-s) 56px var(--spacing-s) var(--spacing-s);
+  border-bottom: var(--border-width) solid var(--border-color);
+  min-height: 64px;
+  color: var(--font-on-background);
+
+  > svg {
+    position: absolute;
+    top: 24px;
+    right: calc(12px + var(--spacing));
+    color: var(--font-on-mute);
+    font-size: var(--font-body1);
+    cursor: pointer;
+  }
+`;
+const Body = _styledComponents.default.div`
+  padding: var(--spacing);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  ${_scrollbar.default}
+
+  ${_ref8 => {
+  let {
+    noPaddingBottom
+  } = _ref8;
+  return noPaddingBottom && 'padding-bottom: 0;';
+}}
+`;
+const Footer = _styledComponents.default.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 var(--spacing);
+  border-top: var(--border-width) solid var(--border-color);
+  height: 64px;
+  line-height: 64px;
+`;
+var _default = exports.default = Object.assign(TitleModal, {
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter
+});

package/modal/index.js

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

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@cashub/ui-elv",
+  "version": "1.0.0",
+  "private": false,
+  "author": "CasHUB Team",
+  "description": "CasHUB UI components library (Elavon)",
+  "main": "index.js",
+  "keywords": [
+    "CasHUB"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@cashub/hooks": "^0.5.3",
+    "@cashub/utils": "^1.3.2",
+    "@googlemaps/markerclusterer": "^2.5.1",
+    "@googlemaps/react-wrapper": "^1.1.35",
+    "@monaco-editor/react": "^4.6.0",
+    "@popperjs/core": "^2.11.5",
+    "@yaireo/tagify": "^4.12.0",
+    "brace": "^0.11.1",
+    "chart.js": "^3.8.0",
+    "cropperjs": "^1.5.12",
+    "jsoneditor": "^9.8.0",
+    "jsoneditor-react": "^3.1.2",
+    "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
+    "lodash.uniqueid": "^4.0.1",
+    "moment": "^2.29.3",
+    "normalize.css": "^8.0.1",
+    "overlapping-marker-spiderfier": "^1.1.4",
+    "qrcode.react": "^3.0.2",
+    "rc-time-picker": "^3.7.3",
+    "react-chartjs-2": "^3.3.0",
+    "react-datepicker": "^4.8.0",
+    "react-helmet-async": "^2.0.3",
+    "react-leaflet": "^3.1.0",
+    "react-leaflet-markercluster": "^3.0.0-rc1",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^5.2.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.2",
+    "react-window": "^1.8.11",
+    "styled-components": "^5.3.0",
+    "treeflex": "^2.0.1"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/page/Disclaimer.js

@@ -0,0 +1,128 @@
+"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 Disclaimer = _styledComponents.default.div`
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  padding: var(--spacing);
+
+  > article {
+    line-height: 1.5;
+
+    &:not(:last-child) {
+      padding-bottom: var(--spacing-l);
+    }
+
+    > h2 {
+      text-align: center;
+      margin-bottom: var(--spacing-l);
+    }
+
+    > em {
+      display: block;
+      margin-bottom: var(--spacing-s);
+    }
+
+    > section {
+      margin-bottom: var(--spacing);
+
+      > h3 {
+        margin-bottom: var(--spacing-xs);
+      }
+
+      > p {
+        margin-bottom: var(--spacing-xs);
+      }
+
+      ul {
+        margin: var(--spacing-s) 0;
+
+        li {
+          margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-s);
+
+          &.disc {
+            list-style: disc;
+          }
+        }
+      }
+
+      ol {
+        padding: 0;
+        margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-s);
+
+        &.counter-number {
+          counter-reset: number;
+        }
+
+        &.counter-number-alpha {
+          counter-reset: number alpha;
+        }
+
+        &.nested-counter-number {
+          counter-reset: nested-number;
+        }
+
+        &.ml-0 {
+          margin-left: 0;
+        }
+
+        li {
+          margin: var(--spacing-s) 0;
+
+          &.decimal {
+            list-style: decimal;
+          }
+
+          &.counter-number-increment {
+            counter-increment: number;
+          }
+
+          &.counter-alpha-increment {
+            counter-increment: alpha;
+          }
+
+          &.counter-number {
+            display: flex;
+            margin: var(--spacing-xs) 0;
+
+            &::before {
+              margin-right: var(--spacing-xs);
+              content: counters(number, '.') ' ';
+            }
+          }
+
+          &.counter-alpha {
+            display: flex;
+            margin: var(--spacing-xs) 0;
+
+            &::before {
+              margin-right: var(--spacing-xs);
+              content: '(' counter(alpha, upper-alpha) ')';
+            }
+          }
+
+          &.nested-counter-number-increment {
+            counter-increment: nested-number;
+          }
+
+          &.nested-counter-number {
+            display: flex;
+            margin: var(--spacing-xs) 0;
+
+            &::before {
+              margin-right: var(--spacing-xs);
+              content: counters(number, '.') '.' counters(nested-number, '.');
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+var _default = exports.default = Disclaimer;

package/page/index.js

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

package/paginate/Paginate.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _fa = require("react-icons/fa");
+var _hooks = require("@cashub/hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+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 Paginate = props => {
+  const {
+    currentPage,
+    totalCount,
+    pageSize,
+    siblingCount = 1,
+    onPageChange,
+    alignRight
+  } = props;
+  const paginationRange = (0, _hooks.usePagination)({
+    currentPage,
+    totalCount,
+    siblingCount,
+    pageSize
+  });
+  const onNext = () => {
+    if (currentPage === lastPage) return;
+    onPageChange(currentPage + 1);
+  };
+  const onPrevious = () => {
+    if (currentPage === 1) return;
+    onPageChange(currentPage - 1);
+  };
+  if (currentPage === 0 || paginationRange.length < 1) {
+    return null;
+  }
+  const lastPage = paginationRange[paginationRange.length - 1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    alignRight: alignRight,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+      disabled: currentPage === 1,
+      onClick: onPrevious,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleLeft, {})
+      })
+    }), paginationRange.map((pageNumber, index) => {
+      if (pageNumber === _hooks.DOTS) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+          className: "paginationDots",
+          children: "\u2026"
+        }, index);
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+        active: pageNumber === currentPage,
+        onClick: () => onPageChange(pageNumber),
+        children: pageNumber
+      }, index);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+      disabled: currentPage === lastPage,
+      onClick: onNext,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleRight, {})
+      })
+    })]
+  });
+};
+const Container = _styledComponents.default.ul`
+  display: flex;
+  text-align: center;
+
+  ${_ref => {
+  let {
+    alignRight
+  } = _ref;
+  return alignRight && 'justify-content: flex-end';
+}};
+`;
+const Link = _styledComponents.default.li`
+  width: 36px;
+  line-height: 37px;
+  font-size: var(--font-body1);
+  color: var(--font-on-background);
+  border-radius: var(--border-radius-round);
+  cursor: pointer;
+  transition: 0.3s;
+
+  &:not(:last-child) {
+    margin-right: var(--spacing-xs);
+  }
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+      cursor: no-drop;
+    `;
+}};
+
+  ${_ref3 => {
+  let {
+    active
+  } = _ref3;
+  return active && `
+      background-color: var(--color-primary);
+      color: var(--font-on-primary);
+    `;
+}}
+
+  &:hover {
+    ${_ref4 => {
+  let {
+    disabled,
+    className
+  } = _ref4;
+  return !disabled && !className && `
+        background-color: var(--color-primary);
+        color: var(--font-on-primary);
+      `;
+}}
+  }
+
+  &.paginationDots {
+    cursor: default;
+  }
+`;
+const Icon = _styledComponents.default.span`
+  font-size: var(--font-body1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+var _default = exports.default = Paginate;

package/paginate/index.js

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