@cashub/ui-elv 1.0.0

package/timeline/Timeline.js

@@ -0,0 +1,139 @@
+"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 Timeline = _styledComponents.default.div`
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 7.8rem;
+    width: 0.214rem;
+    top: 5px;
+    bottom: 5px;
+    height: calc(100% - 5px);
+    background-color: #e7e9f5;
+
+    ${_ref => {
+  let {
+    noTag
+  } = _ref;
+  return noTag && 'left: 0.8rem;';
+}}
+  }
+`;
+const Items = _styledComponents.default.div``;
+const Item = _styledComponents.default.div`
+  display: table;
+  position: relative;
+  margin-bottom: 1.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const ItemTag = _styledComponents.default.span`
+  display: table-cell;
+  font-size: var(--font-body1);
+  font-weight: 500;
+  vertical-align: top;
+  position: absolute;
+  padding-top: 0.5rem;
+  color: var(--font-on-background);
+  width: 6.5rem;
+  text-align: center;
+`;
+const ItemCircle = _styledComponents.default.div`
+  border-radius: 50%;
+  border: 0.89rem solid #2d2c4c;
+  z-index: 1;
+  top: 0.2rem;
+  left: 7rem;
+  position: relative;
+
+  > svg {
+    font-size: 1.5rem;
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+    position: absolute;
+  }
+
+  ${_ref2 => {
+  let {
+    noTag
+  } = _ref2;
+  return noTag && 'left: 0;';
+}}
+
+  ${_ref3 => {
+  let {
+    success
+  } = _ref3;
+  return success && 'color: var(--color-success);';
+}}
+
+  ${_ref4 => {
+  let {
+    danger
+  } = _ref4;
+  return danger && 'color: var(--color-danger);';
+}}
+
+  ${_ref5 => {
+  let {
+    warning
+  } = _ref5;
+  return warning && 'color: var(--color-warning);';
+}}
+
+  ${_ref6 => {
+  let {
+    grey
+  } = _ref6;
+  return grey && 'color: var(--color-grey);';
+}}
+`;
+const ItemDescription = _styledComponents.default.div`
+  display: table-cell;
+  vertical-align: top;
+  font-size: 1rem;
+  padding: 0 0 0 8rem;
+  color: var(--font-on-background);
+
+  ${_ref7 => {
+  let {
+    noTag
+  } = _ref7;
+  return noTag && 'padding-left: 1rem;';
+}}
+`;
+const ItemTitle = _styledComponents.default.span`
+  display: block;
+  font-weight: 400;
+
+  &:last-child {
+    margin-top: 8px;
+  }
+`;
+const ItemText = _styledComponents.default.span`
+  display: block;
+  color: var(--font-on-mute);
+  margin-top: 8px;
+  line-height: 1.25;
+  word-break: break-all;
+`;
+var _default = exports.default = Object.assign(Timeline, {
+  Items,
+  Item,
+  ItemTag,
+  ItemCircle,
+  ItemDescription,
+  ItemTitle,
+  ItemText
+});

package/timeline/index.js

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

package/toast/CustomToastContainer.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactToastify = require("react-toastify");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)`
+  width: 360px;
+
+  .Toastify__toast {
+    padding: 15px 15px 15px 50px;
+    box-shadow: 0 0 8px #999999;
+    background-repeat: no-repeat;
+    background-position: 15px center;
+
+    &.no-background-image {
+      background-image: none;
+      padding-left: 15px;
+    }
+  }
+
+  .Toastify__toast--error {
+    background-color: var(--color-danger);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');
+  }
+
+  .Toastify__toast--success {
+    background-color: var(--color-success);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');
+  }
+
+  .Toastify__toast--warning {
+    background-color: var(--color-warning);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');
+  }
+
+  .Toastify__toast--info {
+    background-color: var(--color-primary);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');
+  }
+`;
+var _default = exports.default = CustomToastContainer;

package/toast/MessageContainer.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MessageContainer = _ref => {
+  let {
+    title,
+    message,
+    containHTML = false
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": "messageContainer",
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+      children: title
+    }), containHTML ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+      dangerouslySetInnerHTML: {
+        __html: message
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+      children: message
+    })]
+  });
+};
+const Title = _styledComponents.default.div`
+  margin: 0;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+`;
+const Message = _styledComponents.default.div`
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ul {
+    margin-left: 1rem;
+
+    li {
+      list-style: disc;
+    }
+  }
+`;
+var _default = exports.default = MessageContainer;

package/toast/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  CustomToastContainer: true,
+  MessageContainer: true
+};
+Object.defineProperty(exports, "CustomToastContainer", {
+  enumerable: true,
+  get: function () {
+    return _CustomToastContainer.default;
+  }
+});
+Object.defineProperty(exports, "MessageContainer", {
+  enumerable: true,
+  get: function () {
+    return _MessageContainer.default;
+  }
+});
+var _CustomToastContainer = _interopRequireDefault(require("./CustomToastContainer"));
+var _MessageContainer = _interopRequireDefault(require("./MessageContainer"));
+var _show = require("./show");
+Object.keys(_show).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _show[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _show[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/toast/show.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showWarningMessage = exports.showSuccessMessage = exports.showInfoMessage = exports.showErrorMessage = void 0;
+var _reactToastify = require("react-toastify");
+var _MessageContainer = _interopRequireDefault(require("./MessageContainer"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const showSuccessMessage = props => {
+  return showMessage('success', props);
+};
+exports.showSuccessMessage = showSuccessMessage;
+const showErrorMessage = props => {
+  return showMessage('error', props);
+};
+exports.showErrorMessage = showErrorMessage;
+const showWarningMessage = props => {
+  return showMessage('warning', props);
+};
+exports.showWarningMessage = showWarningMessage;
+const showInfoMessage = props => {
+  return showMessage('info', props);
+};
+exports.showInfoMessage = showInfoMessage;
+const showMessage = (type, _ref) => {
+  let {
+    title,
+    message,
+    containHTML = false,
+    options = {}
+  } = _ref;
+  return _reactToastify.toast[type](/*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageContainer.default, {
+    title: title,
+    message: message,
+    containHTML: containHTML
+  }), options);
+};

package/toast/style.css

@@ -0,0 +1 @@
+@import 'react-toastify/dist/ReactToastify.css';

package/tooltip/Tooltip.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _hooks = require("@cashub/hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    id,
+    title,
+    showArrow = false,
+    mode = 'hover',
+    fixed,
+    inline,
+    disabled,
+    placement
+  } = _ref;
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const [targetElement, setTargetElement] = (0, _react.useState)(null);
+  const [tooltipElement, setTooltipElement] = (0, _react.useState)(null);
+  const [arrowElement, setArrowElement] = (0, _react.useState)(null);
+  const ownRef = (0, _hooks.useForkRef)(setTargetElement, ref);
+  const {
+    styles,
+    attributes,
+    update
+  } = (0, _hooks.useCustomPopper)(targetElement, tooltipElement, {
+    strategy: fixed ? 'fixed' : 'absolute',
+    arrowElement,
+    ...(placement && {
+      placement
+    })
+  });
+  const handleOpen = (0, _react.useCallback)(() => {
+    setDisplay(true);
+    update();
+  }, [update]);
+  const handleClose = (0, _react.useCallback)(() => {
+    setDisplay(false);
+    update();
+  }, [update]);
+  const toggle = (0, _react.useCallback)(() => {
+    setDisplay(display => !display);
+    update();
+  }, [update]);
+  const wraperProps = (0, _react.useMemo)(() => {
+    if (disabled) return;
+    if (mode === 'click') {
+      return {
+        onClick: toggle
+      };
+    }
+    return {
+      // mode ==="hover"
+      onClick: handleClose,
+      onMouseOver: handleOpen,
+      onMouseLeave: handleClose
+    };
+  }, [mode, handleClose, handleOpen, toggle, disabled]);
+  const childrenProps = {
+    ...children.props,
+    ref: ownRef
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
+    onOutsideClick: handleClose,
+    display: inline ? 'inline-block' : 'block',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ...wraperProps,
+      "data-testid": "tooltipWrapper",
+      children: [/*#__PURE__*/(0, _react.cloneElement)(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipTooltip, {
+        id: id,
+        $display: display,
+        ref: setTooltipElement,
+        style: styles.popper,
+        ...attributes.popper,
+        role: "tooltip",
+        children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipArrow, {
+          "data-testid": "tooltipArrow",
+          ref: setArrowElement,
+          style: styles.arrow,
+          $display: showArrow
+        })]
+      })]
+    })
+  });
+});
+Tooltip.displayName = 'Tooltip';
+const TooltipTooltip = _styledComponents.default.div`
+  white-space: pre-line;
+  display: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+}};
+  border: 1px solid var(--border-color);
+  color: var(--font-on-background);
+  background: var(--color-background2);
+  box-shadow: var(--box-shadow);
+  border-radius: calc(var(--border-radius) / 2);
+  padding: var(--spacing-xs);
+  z-index: 80;
+  text-align: left;
+  font-size: var(--font-body1);
+  font-weight: var(--font-normal);
+  line-height: 1.5;
+  word-break: break-word;
+  max-width: 50vw;
+`;
+const TooltipArrow = _styledComponents.default.div`
+  display: ${_ref3 => {
+  let {
+    $display
+  } = _ref3;
+  return $display ? 'block' : 'none';
+}};
+  top: -0.5rem;
+  left: 0;
+  width: 1rem;
+  height: 1rem;
+
+  &::before {
+    position: absolute;
+    display: block;
+    content: '';
+    border-color: transparent;
+    border-style: solid;
+    top: 0;
+    border-width: 0 0.5rem 0.5rem 0.5rem;
+    border-bottom-color: var(--border-color);
+  }
+`;
+var _default = exports.default = Tooltip;

package/tooltip/index.js

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

package/treeView/TreeViewV2.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("treeflex/dist/css/treeflex.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const TreeViewV2 = _ref => {
+  let {
+    rootName,
+    children
+  } = _ref;
+  const generateTree = children => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: children.map(child => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: `tf-nc ${child.primary ? 'primary' : ''}`,
+            children: child.name
+          }), child.children.length > 0 && generateTree(child.children)]
+        }, child.id);
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "tf-tree",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "tf-nc",
+          children: rootName
+        }), generateTree(children)]
+      })
+    })
+  });
+};
+var _default = exports.default = TreeViewV2;

package/treeView/TreeflexStyle.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// integrate treeflex component
+const TreeflexStyle = (0, _styledComponents.createGlobalStyle)`
+  .tf-tree {
+    text-align: center;
+    color: var(--font-on-background);
+
+    .tf-nc {
+      border: var(--border-width) solid var(--border-color);
+      border-radius: 8px;
+      min-width: 120px;
+
+      &.primary {
+        border-color: var(--color-primary);
+        font-weight: var(--font-bold);
+      }
+    }
+
+    ${_scrollbar.default}
+  }
+
+  .tf-tree ul {
+    margin-bottom: 2em;
+  }
+
+  .tf-tree li ul {
+    margin-bottom: 0;
+  }
+
+  .tf-tree li li:before {
+    border: var(--border-width) solid var(--border-color);
+  }
+
+  .tf-tree .tf-nc:after,
+  .tf-tree .tf-nc:before,
+  .tf-tree .tf-node-content:after,
+  .tf-tree .tf-node-content:before {
+    border: var(--border-width) solid var(--border-color);
+  }
+`;
+var _default = exports.default = TreeflexStyle;

package/treeView/index.js

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