@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/table/subComponent/Resizer.js

@@ -0,0 +1,70 @@
+import { useState, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Resizer = _ref => {
+  let {
+    index,
+    onResize
+  } = _ref;
+  const [parentNode, setParentNode] = useState(null);
+  const handleMouseMove = useCallback(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    let targetWidth = event.clientX - parentNode.getBoundingClientRect().left;
+    if (targetWidth < 1) {
+      targetWidth = 1;
+    }
+    parentNode.style.width = `${targetWidth}px`;
+    if (typeof onResize === 'function') {
+      onResize(index, targetWidth);
+    }
+  }, [parentNode, index, onResize]);
+  const handleMouseUp = useCallback(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+    setParentNode(null);
+  }, [handleMouseMove]);
+  const initResize = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    setParentNode(target.parentNode);
+  };
+  useEffect(() => {
+    if (parentNode) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [parentNode, handleMouseMove, handleMouseUp]);
+  return /*#__PURE__*/_jsx(ColResize, {
+    onClick: event => {
+      event.stopPropagation();
+    },
+    onMouseDown: initResize
+  });
+};
+const ColResize = styled.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  height: 100%;
+
+  &::after {
+    content: '';
+    width: 8px;
+    margin-right: -4px;
+    cursor: col-resize;
+  }
+
+  &:hover::after {
+    background: var(--color-hover);
+  }
+`;
+export default Resizer;

package/esm/table/subComponent/TableFooter.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+const TableFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ${_ref => {
+  let {
+    center
+  } = _ref;
+  return center && `
+    flex-direction: column;
+    justify-content: center;
+  `;
+}}
+
+  ${_ref2 => {
+  let {
+    enableRowDrag
+  } = _ref2;
+  return enableRowDrag && 'padding-right: calc(1.5rem + 0.5rem);';
+}}
+`;
+export default TableFooter;

package/esm/table/subComponent/TableFooterInfo.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+const TableFooterInfo = styled.p`
+  font-size: var(--font-body2);
+  color: var(--font-on-background);
+`;
+export default TableFooterInfo;

package/esm/table/subComponent/TableFooterPager.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+const TableFooterPager = styled.div`
+  display: flex;
+
+  ${_ref => {
+  let {
+    center
+  } = _ref;
+  if (center) {
+    return `
+        flex-wrap: wrap;
+        justify-content: center;
+
+        > * {
+          margin-top: var(--spacing-xs);
+        }
+      `;
+  }
+  return `
+      > :last-child {
+        margin-left: var(--spacing-xs);
+      }
+    `;
+}}
+`;
+export default TableFooterPager;

package/esm/table/subComponent/TableHeadCell.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import BaseTableHeadCell from './BaseTableHeadCell';
+const TableHeadCell = styled(BaseTableHeadCell)`
+  &:first-child {
+    padding-left: var(--spacing);
+  }
+
+  &:last-child {
+    padding-right: var(--spacing);
+  }
+`;
+export default TableHeadCell;

package/esm/table/subComponent/TableSort.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { FaSortUp, FaSortDown } from 'react-icons/fa/index.esm';
+const TableSort = styled.div`
+  position: relative;
+
+  > svg {
+    color: var(--color-primary);
+    position: absolute;
+  }
+`;
+const UpIcon = styled(FaSortUp)`
+  top: -2px;
+  opacity: ${_ref => {
+  let {
+    $active
+  } = _ref;
+  return $active ? 1 : 0.5;
+}};
+`;
+const DownIcon = styled(FaSortDown)`
+  opacity: ${_ref2 => {
+  let {
+    $active
+  } = _ref2;
+  return $active ? 1 : 0.5;
+}};
+`;
+export default Object.assign(TableSort, {
+  UpIcon,
+  DownIcon
+});

package/esm/tagify/TagifyStyle.js

@@ -0,0 +1,54 @@
+import { createGlobalStyle } from 'styled-components';
+import scrollbar from '../styles/mixin/scrollbar';
+
+// integrate tagify component
+const TagifyStyle = createGlobalStyle`
+  .tagify__dropdown {
+    &__wrapper {
+      max-height: 320px;
+      border: 1px solid var(--border-color);
+      color: var(--font-on-background);
+      background: var(--color-background1);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+      padding: var(--spacing-s) 0;
+      overflow-y: auto;
+      overflow-x: visible;
+
+      ${scrollbar}
+    }
+
+    &__item {
+      max-width: 100%;
+      word-break: break-all;
+      padding: 12px var(--spacing-s);
+      background: var(--color-background1);
+      transition: 0.3s;
+
+      &:hover {
+        background: var(--color-hover);
+      }
+
+      &[data-value="__create__"] {
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+        border-top: 1px solid var(--border-color);
+        padding-top: var(--spacing);
+
+        &.fixed-bottom{
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          padding: var(--spacing-s);
+        }
+      }
+    }
+
+    &.has-fixed-bottom {
+      .tagify__dropdown__wrapper {
+        padding-bottom: 60px;
+      }
+    }
+  }
+`;
+export default TagifyStyle;

package/esm/tagify/Tags.js

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import Tagify from '@yaireo/tagify/dist/react.tagify';
+import '@yaireo/tagify/dist/tagify.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Tags = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onChange,
+    settings,
+    tagifyProps,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: /*#__PURE__*/_jsx(Tagify, {
+      tagifyRef: ref,
+      settings: settings,
+      ...tagifyProps,
+      onChange: onChange,
+      ...props
+    })
+  });
+});
+const Wrapper = styled.div`
+  .tagify[readonly]:not(.tagify--mix):not(.tagify--select) {
+    opacity: 0.5;
+  }
+  .tagify {
+    --tags-disabled-bg: var(--font-on-mute);
+    --tags-border-color: var(--border-color);
+    --tags-hover-border-color: var(--border-color);
+    --tags-focus-border-color: var(--color-primary);
+    --tag-invalid-color: var(--color-danger);
+    --tag-remove-btn-bg--hover: var(--color-danger);
+    --input-color: var(--font-on-background);
+
+    border-radius: var(--border-radius-l);
+    width: 100%;
+
+    .tagify__tag {
+      > div::before {
+        border-radius: var(--border-radius-l);
+      }
+    }
+    .tagify__input::before {
+      color: var(--font-on-mute);
+    }
+  }
+`;
+export default Tags;

package/esm/tagify/index.js

@@ -0,0 +1,3 @@
+export { default as Tags } from './Tags';
+export { default as TagifyStyle } from './TagifyStyle';
+export { default as getCreateButtonTemplate } from './templates/getCreateButtonTemplate';

package/esm/tagify/templates/getCreateButtonTemplate.js

@@ -0,0 +1,12 @@
+const getCreateButtonTemplate = function (label) {
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const attrString = Object.entries(props).map(_ref => {
+    let [key, val] = _ref;
+    return `${key}="${val}"`;
+  }).join(' ');
+  return `
+    <div ${attrString} tabindex="0" role="option" data-value="__create__">
+      ${label}
+    </div>`;
+};
+export default getCreateButtonTemplate;

package/esm/text/Paragraph.js

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import color from '../styles/mixin/color';
+const Paragraph = styled.p`
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  margin-bottom: var(--spacing-s);
+  word-break: break-word;
+  overflow-wrap: break-word;
+  position: relative;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  ${_ref => {
+  let {
+    flex
+  } = _ref;
+  return flex && 'display: flex;';
+}}
+
+  ${_ref2 => {
+  let {
+    justifyContentBetween
+  } = _ref2;
+  return justifyContentBetween && 'justify-content: space-between;';
+}}
+
+  ${_ref3 => {
+  let {
+    inline
+  } = _ref3;
+  return inline && `
+      display: inline;
+      margin-right: var(--spacing-s);
+    `;
+}}
+
+  ${_ref4 => {
+  let {
+    fontH3
+  } = _ref4;
+  return fontH3 && 'font-size: var(--font-h3);';
+}}
+
+  ${_ref5 => {
+  let {
+    fontWeightBold
+  } = _ref5;
+  return fontWeightBold && 'font-weight: bold;';
+}}
+
+  ${_ref6 => {
+  let {
+    marginBottomXS
+  } = _ref6;
+  return marginBottomXS && 'margin-bottom: var(--spacing-xs);';
+}}
+
+  ${color}
+
+  ${_ref7 => {
+  let {
+    badge
+  } = _ref7;
+  return badge && `&:after {
+      content: '';
+      position: absolute;
+      top: -2px;
+      right: -12px;
+      height: 8px;
+      width: 8px;
+      border-radius: var(--border-radius);
+      background-color: var(--color-${badge});
+    }
+  `;
+}}
+`;
+export default Paragraph;

package/esm/text/index.js

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

package/esm/timeline/Timeline.js

@@ -0,0 +1,132 @@
+import styled from 'styled-components';
+const Timeline = styled.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 = styled.div``;
+const Item = styled.div`
+  display: table;
+  position: relative;
+  margin-bottom: 1.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const ItemTag = styled.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 = styled.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 = styled.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 = styled.span`
+  display: block;
+  font-weight: 400;
+
+  &:last-child {
+    margin-top: 8px;
+  }
+`;
+const ItemText = styled.span`
+  display: block;
+  color: var(--font-on-mute);
+  margin-top: 8px;
+  line-height: 1.25;
+  word-break: break-all;
+`;
+export default Object.assign(Timeline, {
+  Items,
+  Item,
+  ItemTag,
+  ItemCircle,
+  ItemDescription,
+  ItemTitle,
+  ItemText
+});

package/esm/timeline/index.js

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

package/esm/toast/CustomToastContainer.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
+const CustomToastContainer = styled(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=');
+  }
+`;
+export default CustomToastContainer;

package/esm/toast/MessageContainer.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MessageContainer = _ref => {
+  let {
+    title,
+    message,
+    containHTML = false
+  } = _ref;
+  return /*#__PURE__*/_jsxs("div", {
+    "data-testid": "messageContainer",
+    children: [title && /*#__PURE__*/_jsx(Title, {
+      children: title
+    }), containHTML ? /*#__PURE__*/_jsx(Message, {
+      dangerouslySetInnerHTML: {
+        __html: message
+      }
+    }) : /*#__PURE__*/_jsx(Message, {
+      children: message
+    })]
+  });
+};
+const Title = styled.div`
+  margin: 0;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+`;
+const Message = styled.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;
+    }
+  }
+`;
+export default MessageContainer;

package/esm/toast/index.js

@@ -0,0 +1,3 @@
+export { default as CustomToastContainer } from './CustomToastContainer';
+export { default as MessageContainer } from './MessageContainer';
+export * from './show';

package/esm/toast/show.js

@@ -0,0 +1,29 @@
+import { toast } from 'react-toastify';
+import MessageContainer from './MessageContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const showSuccessMessage = props => {
+  return showMessage('success', props);
+};
+const showErrorMessage = props => {
+  return showMessage('error', props);
+};
+const showWarningMessage = props => {
+  return showMessage('warning', props);
+};
+const showInfoMessage = props => {
+  return showMessage('info', props);
+};
+const showMessage = (type, _ref) => {
+  let {
+    title,
+    message,
+    containHTML = false,
+    options = {}
+  } = _ref;
+  return toast[type](/*#__PURE__*/_jsx(MessageContainer, {
+    title: title,
+    message: message,
+    containHTML: containHTML
+  }), options);
+};
+export { showSuccessMessage, showErrorMessage, showWarningMessage, showInfoMessage };

package/esm/toast/style.css

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