@cashub/ui 0.22.9 → 0.22.11

package/src/table/hooks/useGenerateSort.js

@@ -1,37 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

package/src/text/Paragraph.js

@@ -1,34 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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

package/src/timeline/Timeline.js

@@ -1,98 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

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

package/src/toast/CustomToastContainer.js

@@ -1,30 +0,0 @@
-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;