@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/page/Disclaimer.js

@@ -0,0 +1,121 @@
+import styled from 'styled-components';
+const Disclaimer = styled.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, '.');
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export default Disclaimer;

package/esm/page/index.js

@@ -0,0 +1 @@
+export { default as Disclaimer } from './Disclaimer';

package/esm/paginate/Paginate.js

@@ -0,0 +1,129 @@
+import styled, { css } from 'styled-components';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa/index.esm';
+import { usePagination, DOTS } from '@cashub/hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Paginate = props => {
+  const {
+    currentPage,
+    totalCount,
+    pageSize,
+    siblingCount = 1,
+    onPageChange,
+    alignRight
+  } = props;
+  const paginationRange = 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__*/_jsxs(Container, {
+    alignRight: alignRight,
+    children: [/*#__PURE__*/_jsx(Link, {
+      disabled: currentPage === 1,
+      onClick: onPrevious,
+      children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx(FaAngleLeft, {})
+      })
+    }), paginationRange.map((pageNumber, index) => {
+      if (pageNumber === DOTS) {
+        return /*#__PURE__*/_jsx(Link, {
+          className: "paginationDots",
+          children: "\u2026"
+        }, index);
+      }
+      return /*#__PURE__*/_jsx(Link, {
+        active: pageNumber === currentPage,
+        onClick: () => onPageChange(pageNumber),
+        children: pageNumber
+      }, index);
+    }), /*#__PURE__*/_jsx(Link, {
+      disabled: currentPage === lastPage,
+      onClick: onNext,
+      children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx(FaAngleRight, {})
+      })
+    })]
+  });
+};
+const Container = styled.ul`
+  display: flex;
+  text-align: center;
+
+  ${_ref => {
+  let {
+    alignRight
+  } = _ref;
+  return alignRight && 'justify-content: flex-end';
+}};
+`;
+const Link = styled.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 && 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 = styled.span`
+  font-size: var(--font-body1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+export default Paginate;

package/esm/paginate/index.js

@@ -0,0 +1 @@
+export { default as Paginate } from './Paginate';

package/esm/popover/Popover.js

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
+import styled from 'styled-components';
+import OutsideClickHandler from 'react-outside-click-handler';
+import { useCustomPopper } from '@cashub/hooks';
+import { appendElementTo } from '@cashub/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Popover = _ref => {
+  let {
+    container,
+    id,
+    ...props
+  } = _ref;
+  const rootElement = appendElementTo('PopoverContainer', 'div', container);
+  const handleClose = () => {
+    // unmount component and clear event handler and state before remove container
+    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.render(/*#__PURE__*/_jsx(Box, {
+    ...props,
+    id: `popover${id}`,
+    handleClose: handleClose
+  }), rootElement);
+};
+const Box = _ref2 => {
+  let {
+    target,
+    id,
+    handleClose,
+    content,
+    boundary
+  } = _ref2;
+  const [popoverElement, setTooltipElement] = useState(null);
+  const {
+    styles,
+    attributes,
+    state
+  } = useCustomPopper(target, popoverElement, {
+    boundary
+  });
+  return /*#__PURE__*/_jsx(OutsideClickHandler, {
+    onOutsideClick: event => {
+      if (`popover${event.target.id}` !== id) {
+        handleClose();
+      }
+    },
+    children: /*#__PURE__*/_jsx(Wrapper, {
+      children: /*#__PURE__*/_jsx(PopoverBox, {
+        id: id,
+        ref: setTooltipElement,
+        style: styles.popper,
+        ...attributes.popper,
+        placement: state && state.placement,
+        children: content
+      })
+    })
+  });
+};
+const Wrapper = styled.div`
+  position: relative;
+`;
+const PopoverBox = styled.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;
+`;
+export default Popover;

package/esm/popover/index.js

@@ -0,0 +1 @@
+export { default as Popover } from './Popover';

package/esm/qrcode/QRCode.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import QRCode from 'qrcode.react';
+import CasHUBLogoOnly from '../assets/images/cashub-logo-only.png';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const QRCodeBox = _ref => {
+  let {
+    content,
+    options = {}
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsxs(Container, {
+      children: [/*#__PURE__*/_jsx(QRCode, {
+        value: content,
+        size: 300,
+        imageSettings: {
+          src: CasHUBLogoOnly,
+          x: null,
+          y: null,
+          height: 40,
+          width: 40,
+          excavate: true
+        }
+      }), options.text && /*#__PURE__*/_jsx(Text, {
+        children: options.text
+      })]
+    }), options.message && /*#__PURE__*/_jsx(Message, {
+      children: options.message
+    })]
+  });
+};
+const Wrapper = styled.div`
+  color: var(--font-on-background);
+  text-align: center;
+  font-weight: var(--font-bold);
+`;
+const Container = styled.div`
+  display: inline-block;
+  padding: var(--spacing);
+  background: #fff;
+  border-radius: var(--border-radius);
+`;
+const Text = styled.p`
+  margin-top: var(--spacing-s);
+  font-size: var(--font-h3);
+  color: #000;
+`;
+const Message = styled.p`
+  margin-top: var(--spacing);
+  font-size: var(--font-h2);
+`;
+export default QRCodeBox;

package/esm/qrcode/QRCodeContainter.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const QRCodeContainter = _ref => {
+  let {
+    src,
+    alt
+  } = _ref;
+  return /*#__PURE__*/_jsx(Figure, {
+    children: /*#__PURE__*/_jsx(Image, {
+      src: src,
+      alt: alt
+    })
+  });
+};
+const Figure = styled.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 = styled.img`
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--border-radius);
+`;
+export default QRCodeContainter;

package/esm/qrcode/index.js

@@ -0,0 +1,2 @@
+export { default as QRCode } from './QRCode';
+export { default as QRCodeContainter } from './QRCodeContainter';

package/esm/ribbon/Ribbon.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+import colorOnBackground from '../styles/mixin/colorOnBackground';
+const Ribbon = styled.div`
+  width: 120px;
+  height: 120px;
+  position: absolute;
+  overflow: hidden;
+  top: -3px;
+  left: -3px;
+`;
+const RibbonContent = styled.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}
+  ${colorOnBackground}
+`;
+export default Object.assign(Ribbon, {
+  Content: RibbonContent
+});

package/esm/ribbon/index.js

@@ -0,0 +1 @@
+export { default as Ribbon } from './Ribbon';

package/esm/section/Section.js

@@ -0,0 +1,126 @@
+import styled from 'styled-components';
+import bgChartTriangle from '../assets/images/bg-chart-triangle.png';
+import bgChartCircle from '../assets/images/bg-chart-circle.png';
+import bgMap from '../assets/images/map.png';
+const Section = styled.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}), url(${bgChartTriangle});
+      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(${bgMap});
+      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;
+    `;
+}}
+`;
+export default Section;

package/esm/section/SectionBody.js

@@ -0,0 +1,43 @@
+import styled, { css } from 'styled-components';
+import scrollbar from '../styles/mixin/scrollbar';
+import media from '../styles/mixin/media';
+const SectionBody = styled.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 && css`
+      max-height: ${maxHeight}px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      ${scrollbar}
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    maxHeightLaptop
+  } = _ref3;
+  return maxHeightLaptop && css`
+      ${media.laptop`
+        max-height: ${maxHeightLaptop}px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        ${scrollbar}
+      `}
+    `;
+}}
+`;
+export default SectionBody;

package/esm/section/SectionHeader.js

@@ -0,0 +1,61 @@
+import styled, { css } from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+const SectionHeader = styled.div`
+  background: transparent;
+  padding: 0;
+  margin-bottom: calc(var(--spacing-s) * -1);
+
+  > * {
+    padding-bottom: var(--spacing-s);
+  }
+
+  ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline && 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: ${headerStyle.height};
+  `;
+}}
+`;
+export default SectionHeader;

package/esm/section/SectionToolbar.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+const SectionToolbar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+`;
+export default SectionToolbar;