@cashub/ui-elv 1.0.0

package/popover/Popover.js

@@ -0,0 +1,91 @@
+"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 _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _hooks = require("@cashub/hooks");
+var _utils = require("@cashub/utils");
+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 Popover = _ref => {
+  let {
+    container,
+    id,
+    ...props
+  } = _ref;
+  const rootElement = (0, _utils.appendElementTo)('PopoverContainer', 'div', container);
+  const handleClose = () => {
+    // unmount component and clear event handler and state before remove container
+    (0, _reactDom.unmountComponentAtNode)(rootElement);
+    rootElement.remove();
+  };
+  const result = document.getElementById(`popover${id}`);
+  // found previous element mean want to close popover now, so remove it
+  if (result) {
+    handleClose();
+    return;
+  }
+  _reactDom.default.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+    ...props,
+    id: `popover${id}`,
+    handleClose: handleClose
+  }), rootElement);
+};
+const Box = _ref2 => {
+  let {
+    target,
+    id,
+    handleClose,
+    content,
+    boundary
+  } = _ref2;
+  const [popoverElement, setTooltipElement] = (0, _react.useState)(null);
+  const {
+    styles,
+    attributes,
+    state
+  } = (0, _hooks.useCustomPopper)(target, popoverElement, {
+    boundary
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
+    onOutsideClick: event => {
+      if (`popover${event.target.id}` !== id) {
+        handleClose();
+      }
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverBox, {
+        id: id,
+        ref: setTooltipElement,
+        style: styles.popper,
+        ...attributes.popper,
+        placement: state && state.placement,
+        children: content
+      })
+    })
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  position: relative;
+`;
+const PopoverBox = _styledComponents.default.div`
+  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;
+  font-size: var(--font-body1);
+  font-weight: var(--font-normal);
+  max-width: 50vw;
+  word-break: break-all;
+`;
+var _default = exports.default = Popover;

package/popover/index.js

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

package/qrcode/QRCode.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _qrcode = _interopRequireDefault(require("qrcode.react"));
+var _cashubLogoOnly = _interopRequireDefault(require("../assets/images/cashub-logo-only.png"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const QRCodeBox = _ref => {
+  let {
+    content,
+    options = {}
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_qrcode.default, {
+        value: content,
+        size: 300,
+        imageSettings: {
+          src: _cashubLogoOnly.default,
+          x: null,
+          y: null,
+          height: 40,
+          width: 40,
+          excavate: true
+        }
+      }), options.text && /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+        children: options.text
+      })]
+    }), options.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+      children: options.message
+    })]
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  color: var(--font-on-background);
+  text-align: center;
+  font-weight: var(--font-bold);
+`;
+const Container = _styledComponents.default.div`
+  display: inline-block;
+  padding: var(--spacing);
+  background: #fff;
+  border-radius: var(--border-radius);
+`;
+const Text = _styledComponents.default.p`
+  margin-top: var(--spacing-s);
+  font-size: var(--font-h3);
+  color: #000;
+`;
+const Message = _styledComponents.default.p`
+  margin-top: var(--spacing);
+  font-size: var(--font-h2);
+`;
+var _default = exports.default = QRCodeBox;

package/qrcode/QRCodeContainter.js

@@ -0,0 +1,34 @@
+"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 QRCodeContainter = _ref => {
+  let {
+    src,
+    alt
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Figure, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Image, {
+      src: src,
+      alt: alt
+    })
+  });
+};
+const Figure = _styledComponents.default.figure`
+  height: 240px;
+  padding: var(--spacing-s);
+  text-align: center;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+`;
+const Image = _styledComponents.default.img`
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--border-radius);
+`;
+var _default = exports.default = QRCodeContainter;

package/qrcode/index.js

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

package/ribbon/Ribbon.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
+var _colorOnBackground = _interopRequireDefault(require("../styles/mixin/colorOnBackground"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Ribbon = _styledComponents.default.div`
+  width: 120px;
+  height: 120px;
+  position: absolute;
+  overflow: hidden;
+  top: -3px;
+  left: -3px;
+`;
+const RibbonContent = _styledComponents.default.span`
+  position: absolute;
+  text-transform: uppercase;
+  text-align: center;
+  display: block;
+  width: 200px;
+  transform: rotate(-45deg);
+  top: 25px;
+  right: -25px;
+  padding: 5px 0;
+
+  &::before,
+  &::after {
+    display: block;
+    content: '';
+    border: 1px solid rgba(255, 255, 255, 0.4);
+  }
+
+  ${_backgroundColor.default}
+  ${_colorOnBackground.default}
+`;
+var _default = exports.default = Object.assign(Ribbon, {
+  Content: RibbonContent
+});

package/ribbon/index.js

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

package/section/Section.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
+var _bgChartCircle = _interopRequireDefault(require("../assets/images/bg-chart-circle.png"));
+var _map = _interopRequireDefault(require("../assets/images/map.png"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Section = _styledComponents.default.div`
+  background: var(--color-background1);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+
+  ${_ref => {
+  let {
+    backgroundReverse
+  } = _ref;
+  return backgroundReverse && 'background: var(--color-background2);';
+}}
+
+  ${_ref2 => {
+  let {
+    paddingS
+  } = _ref2;
+  return paddingS && 'padding: var(--spacing-s);';
+}}
+
+  ${_ref3 => {
+  let {
+    paddingXS
+  } = _ref3;
+  return paddingXS && 'padding: var(--spacing-xs);';
+}}
+
+  ${_ref4 => {
+  let {
+    noPadding
+  } = _ref4;
+  return noPadding && 'padding: 0;';
+}}
+
+  ${_ref5 => {
+  let {
+    noPaddingX
+  } = _ref5;
+  return noPaddingX && 'padding-left: 0; padding-right: 0;';
+}}
+
+  ${_ref6 => {
+  let {
+    noPaddingTop
+  } = _ref6;
+  return noPaddingTop && 'padding-top: 0;';
+}}
+
+  ${_ref7 => {
+  let {
+    noPaddingBottom
+  } = _ref7;
+  return noPaddingBottom && 'padding-bottom: 0;';
+}}
+
+  ${_ref8 => {
+  let {
+    marginBottomS
+  } = _ref8;
+  return marginBottomS && 'margin-bottom: var(--spacing-s);';
+}}
+
+  ${_ref9 => {
+  let {
+    noMarginBottom
+  } = _ref9;
+  return noMarginBottom && 'margin-bottom: 0;';
+}}
+
+  ${_ref10 => {
+  let {
+    fullHeight
+  } = _ref10;
+  return fullHeight && 'height: calc(100% - var(--spacing));';
+}}
+
+  ${_ref11 => {
+  let {
+    backgroundMarker
+  } = _ref11;
+  return backgroundMarker && `
+      background: var(--color-background2);
+      background-image: url(${_bgChartCircle.default}), url(${_bgChartTriangle.default});
+      background-repeat: no-repeat;
+      background-position: left top, right bottom;
+      background-size: 337px 312px, 166px 225px;
+    `;
+}}
+
+  ${_ref12 => {
+  let {
+    backgroundMap
+  } = _ref12;
+  return backgroundMap && `
+      background: var(--color-background2);
+      background-image: url(${_map.default});
+      background-repeat: no-repeat;
+      background-size: cover;
+    `;
+}}
+
+  ${_ref13 => {
+  let {
+    border
+  } = _ref13;
+  return border && 'border: var(--border-width) solid var(--border-color);';
+}}
+  
+  ${_ref14 => {
+  let {
+    checkboxGroup
+  } = _ref14;
+  return checkboxGroup && `
+      background: transparent;
+      width: 50%;
+      margin-left: auto;
+      margin-right: auto;
+    `;
+}}
+`;
+var _default = exports.default = Section;

package/section/SectionBody.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+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 SectionBody = _styledComponents.default.div`
+  // fix: overflow element(relate to z-index problem)
+  // position: relative;
+  background: transparent;
+  padding: var(--spacing) 0 0 0;
+
+  ${_ref => {
+  let {
+    noPadding
+  } = _ref;
+  return noPadding && 'padding: 0;';
+}}
+
+  ${_ref2 => {
+  let {
+    maxHeight
+  } = _ref2;
+  return maxHeight && (0, _styledComponents.css)`
+      max-height: ${maxHeight}px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      ${_scrollbar.default}
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    maxHeightLaptop
+  } = _ref3;
+  return maxHeightLaptop && (0, _styledComponents.css)`
+      ${_media.default.laptop`
+        max-height: ${maxHeightLaptop}px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        ${_scrollbar.default}
+      `}
+    `;
+}}
+`;
+var _default = exports.default = SectionBody;

package/section/SectionHeader.js

@@ -0,0 +1,70 @@
+"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"));
+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 SectionHeader = _styledComponents.default.div`
+  background: transparent;
+  padding: 0;
+  margin-bottom: calc(var(--spacing-s) * -1);
+
+  > * {
+    padding-bottom: var(--spacing-s);
+  }
+
+  ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline && (0, _styledComponents.css)`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    `;
+}}
+
+  ${_ref2 => {
+  let {
+    flexStart
+  } = _ref2;
+  return flexStart && 'justify-content: flex-start;';
+}}
+
+  ${_ref3 => {
+  let {
+    border
+  } = _ref3;
+  return border && 'border-bottom: var(--border-width) solid var(--border-color);';
+}}
+
+  ${_ref4 => {
+  let {
+    backgroundFill
+  } = _ref4;
+  return backgroundFill && 'background: var(--color-background1);';
+}}
+
+  ${_ref5 => {
+  let {
+    backgroundReverse
+  } = _ref5;
+  return backgroundReverse && 'background: var(--color-background2);';
+}}
+
+  ${_ref6 => {
+  let {
+    sticky
+  } = _ref6;
+  return sticky && `position: sticky;
+    z-index:20;
+    top: ${_header.default.height};
+  `;
+}}
+`;
+var _default = exports.default = SectionHeader;

package/section/SectionToolbar.js

@@ -0,0 +1,18 @@
+"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 SectionToolbar = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+`;
+var _default = exports.default = SectionToolbar;

package/section/SectionToolbarItem.js

@@ -0,0 +1,17 @@
+"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 SectionToolbarItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+`;
+var _default = exports.default = SectionToolbarItem;

package/section/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function () {
+    return _Section.default;
+  }
+});
+Object.defineProperty(exports, "SectionBody", {
+  enumerable: true,
+  get: function () {
+    return _SectionBody.default;
+  }
+});
+Object.defineProperty(exports, "SectionHeader", {
+  enumerable: true,
+  get: function () {
+    return _SectionHeader.default;
+  }
+});
+Object.defineProperty(exports, "SectionToolbar", {
+  enumerable: true,
+  get: function () {
+    return _SectionToolbar.default;
+  }
+});
+Object.defineProperty(exports, "SectionToolbarItem", {
+  enumerable: true,
+  get: function () {
+    return _SectionToolbarItem.default;
+  }
+});
+var _Section = _interopRequireDefault(require("./Section"));
+var _SectionBody = _interopRequireDefault(require("./SectionBody"));
+var _SectionHeader = _interopRequireDefault(require("./SectionHeader"));
+var _SectionToolbar = _interopRequireDefault(require("./SectionToolbar"));
+var _SectionToolbarItem = _interopRequireDefault(require("./SectionToolbarItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }