@cashub/ui 0.22.7 → 0.22.9

package/src/table/hooks/useGenerateSort.js

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+import TableSort from '../subComponent/TableSort';
+
+const useGenerateSort = (sortColumn, sortType) => {
+  return useCallback(
+    (fieldName) => {
+      let isActiveAsc = false;
+      let isActiveDesc = false;
+      if (Array.isArray(sortColumn) && Array.isArray(sortType)) {
+        const sortColumnIndex = sortColumn.indexOf(fieldName);
+        if (sortColumnIndex !== -1) {
+          if (sortType[sortColumnIndex] === 'asc') {
+            isActiveAsc = true;
+          }
+
+          if (sortType[sortColumnIndex] === 'desc') {
+            isActiveDesc = true;
+          }
+        }
+      } else if (fieldName === sortColumn && sortType === 'asc') {
+        isActiveAsc = true;
+      } else if (fieldName === sortColumn && sortType === 'desc') {
+        isActiveDesc = true;
+      }
+
+      return (
+        <TableSort>
+          <TableSort.UpIcon $active={isActiveAsc} />
+          <TableSort.DownIcon $active={isActiveDesc} />
+        </TableSort>
+      );
+    },
+    [sortColumn, sortType],
+  );
+};
+
+export default useGenerateSort;

package/src/table/index.js

@@ -0,0 +1,4 @@
+export { default as GridTable } from './GridTable';
+export { default as Table } from './Table';
+export { default as PermissionTable } from './PermissionTable';
+export { default as ImageBox } from './ImageBox';

package/src/table/subComponent/BaseTableHeadCell.js

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components';
+
+const BaseTableHeadCell = styled.th`
+  position: relative;
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  width: ${({ width }) => width || 'auto'};
+  padding: var(--spacing-s) var(--spacing-xs);
+
+  > div {
+    display: flex;
+
+    > span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  ${({ sortable }) => {
+    return (
+      sortable &&
+      css`
+        cursor: pointer;
+
+        > div > span {
+          max-width: calc(100% - 1rem);
+          padding-right: var(--spacing-xs);
+        }
+      `
+    );
+  }}
+
+  ${({ align }) => {
+    switch (align) {
+      case 'center':
+        return css`
+          > div {
+            justify-content: center;
+          }
+        `;
+      default:
+        break;
+    }
+  }}
+`;
+
+export default BaseTableHeadCell;

package/src/table/subComponent/GridTableFooter.js

@@ -0,0 +1,18 @@
+import TableFooter from './TableFooter';
+import styled from 'styled-components';
+
+const GridTableFooter = styled(TableFooter)`
+  position: sticky;
+  bottom: 0;
+  height: 48px;
+  padding: 0 var(--spacing-xs);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+`;
+
+export default GridTableFooter;

package/src/table/subComponent/GridTableHeadCell.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import BaseTableHeadCell from './BaseTableHeadCell';
+
+const GridTableHeadCell = styled(BaseTableHeadCell)`
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+`;
+
+export default GridTableHeadCell;

package/src/table/subComponent/Resizer.js

@@ -0,0 +1,79 @@
+import { useState, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+
+const Resizer = ({ onResize }) => {
+  const [parentNode, setParentNode] = useState(null);
+
+  const handleMouseMove = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      const targetWidth =
+        event.clientX - parentNode.getBoundingClientRect().left;
+      parentNode.style.width = `${targetWidth}px`;
+
+      if (typeof onResize === 'function') {
+        onResize(targetWidth);
+      }
+    },
+    [parentNode, onResize],
+  );
+
+  const handleMouseUp = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      setParentNode(null);
+    },
+    [handleMouseMove],
+  );
+
+  const initResize = ({ target }) => {
+    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 (
+    <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/src/table/subComponent/TableFooter.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const TableFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ${({ center }) =>
+    center &&
+    `
+    flex-direction: column;
+    justify-content: center;
+  `}
+`;
+
+export default TableFooter;

package/src/table/subComponent/TableFooterInfo.js

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

package/src/table/subComponent/TableFooterPager.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const TableFooterPager = styled.div`
+  display: flex;
+
+  ${({ center }) => {
+    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/src/table/subComponent/TableHeadCell.js

@@ -0,0 +1,14 @@
+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/src/table/subComponent/TableSort.js

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

package/src/tagify/TagifyStyle.js

@@ -0,0 +1,35 @@
+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);
+      }
+    }
+  }
+`;
+
+export default TagifyStyle;

package/src/tagify/Tags.js

@@ -0,0 +1,46 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import Tagify from '@yaireo/tagify/dist/react.tagify';
+import '@yaireo/tagify/dist/tagify.css';
+
+const Tags = forwardRef(
+  ({ onChange, settings, tagifyProps, ...props }, ref) => {
+    return (
+      <Wrapper>
+        <Tagify
+          tagifyRef={ref}
+          settings={settings}
+          {...tagifyProps}
+          onChange={onChange}
+          {...props}
+        />
+      </Wrapper>
+    );
+  },
+);
+
+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);
+      }
+    }
+  }
+`;
+
+export default Tags;

package/src/tagify/__stories__/Tags.stories.js

@@ -0,0 +1,28 @@
+import Tags from '../Tags';
+
+const metadata = {
+  title: 'Tagify/Tags',
+  component: Tags,
+  argTypes: {
+    onChange: {
+      action: 'onChange evnet',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <Tags {...args}></Tags>;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  settings: {
+    whitelist: ['1', '2', '3', '4', '5', '6'],
+    dropdown: {
+      enabled: 0,
+      maxItems: 6,
+    },
+  },
+};
+export default metadata;
+export { Default };

package/src/tagify/index.js

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

package/src/text/Paragraph.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+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;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  ${({ flex }) => flex && 'display: flex;'}
+
+  ${({ justifyContentBetween }) =>
+    justifyContentBetween && 'justify-content: space-between;'}
+
+  ${({ inline }) =>
+    inline &&
+    `
+      display: inline;
+      margin-right: var(--spacing-s);
+    `}
+
+  ${({ fontH3 }) => fontH3 && 'font-size: var(--font-h3);'}
+
+  ${({ fontWeightBold }) => fontWeightBold && 'font-weight: bold;'}
+
+  ${({ marginBottomXS }) =>
+    marginBottomXS && 'margin-bottom: var(--spacing-xs);'}
+`;
+
+export default Paragraph;

package/src/text/__stories__/Paragraph.stories.js

@@ -0,0 +1,40 @@
+import Paragraph from '../Paragraph';
+
+const metadata = {
+  title: 'Text/Paragraph',
+  component: Paragraph,
+  decorators: [
+    (Story) => (
+      <div style={{ border: '2px solid #000' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const Template = (args) => {
+  return (
+    <>
+      <Paragraph {...args}>
+        Paragraph content
+        <b style={{ color: '2d2c4c' }}>Text</b>
+      </Paragraph>
+      <Paragraph {...args}>
+        Paragraph content
+        <b style={{ color: '2d2c4c' }}>Text</b>
+      </Paragraph>
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  flex: false,
+  justifyContentBetween: false,
+  inline: false,
+  fontH3: false,
+  fontWeightBold: false,
+};
+
+export default metadata;
+export { Default };

package/src/text/index.js

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

package/src/timeline/Timeline.js

@@ -0,0 +1,98 @@
+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;
+  }
+`;
+
+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;
+  }
+
+  ${({ success }) => success && 'color: var(--color-success);'}
+
+  ${({ danger }) => danger && 'color: var(--color-danger);'}
+
+  ${({ warning }) => warning && 'color: var(--color-warning);'}
+`;
+
+const ItemDescription = styled.div`
+  display: table-cell;
+  vertical-align: top;
+  font-size: 1rem;
+  padding: 0 0 0 8rem;
+  color: var(--font-on-background);
+`;
+
+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/src/timeline/__stories__/Timeline.stories.js

@@ -0,0 +1,49 @@
+import { FaGenderless } from 'react-icons/fa';
+import Timeline from '../Timeline';
+
+const metadata = {
+  title: 'Timeline/Timeline',
+  component: Timeline,
+  argTypes: {
+    success: {
+      description: 'circle color',
+    },
+    danger: {
+      description: 'circle color',
+    },
+    warning: {
+      description: 'circle color',
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <Timeline {...args}>
+      <Timeline.Items>
+        <Timeline.Item>
+          <Timeline.ItemTag>In Use</Timeline.ItemTag>
+          <Timeline.ItemCircle {...args}>
+            <FaGenderless />
+          </Timeline.ItemCircle>
+          <Timeline.ItemDescription>
+            <Timeline.ItemTitle>System 2021-12-09 14:39:55</Timeline.ItemTitle>
+            <Timeline.ItemText>
+              Description: Add the device to merchant:
+            </Timeline.ItemText>
+          </Timeline.ItemDescription>
+        </Timeline.Item>
+      </Timeline.Items>
+    </Timeline>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  success: true,
+  danger: false,
+  warning: false,
+};
+
+export default metadata;
+export { Default };

package/src/timeline/index.js

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

package/src/toast/CustomToastContainer.js

@@ -0,0 +1,30 @@
+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;
+  }
+
+  .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==');
+  }
+`;
+
+export default CustomToastContainer;