@cashub/ui 0.48.28 → 0.49.0-beta.0

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,55 @@
+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/src/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';
+
+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);
+      }
+    }
+    .tagify__input::before {
+      color: var(--font-on-mute);
+    }
+  }
+`;
+
+export default Tags;

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

@@ -0,0 +1,59 @@
+import { useRef } from 'react';
+import Tags from '../Tags';
+import getCreateButtonTemplate from '../templates/getCreateButtonTemplate';
+
+const metadata = {
+  title: 'Tagify/Tags',
+  component: Tags,
+  argTypes: {
+    onChange: {
+      action: 'onChange evnet',
+    },
+  },
+};
+
+const Template = (args) => {
+  const tagifyRef = useRef();
+
+  const handleDropdownSelect = (event) => {
+    const { elm } = event.detail;
+    const { value } = elm.dataset;
+    if (value === '__create__') {
+      const newItem = prompt('Enter new value');
+      const { tagify } = event.detail;
+      if (!tagify.settings.whitelist.includes(newItem)) {
+        tagify.settings.whitelist.push(newItem);
+        tagify.settings.dropdown.maxItems = tagify.settings.whitelist.length;
+      }
+    }
+  };
+
+  return (
+    <Tags ref={tagifyRef} {...args} onDropdownSelect={handleDropdownSelect} />
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  settings: {
+    whitelist: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    dropdown: {
+      classname: 'has-fixed-bottom',
+      enabled: 0,
+      maxItems: 10,
+    },
+    templates: {
+      dropdownItemNoMatch() {
+        return `${getCreateButtonTemplate('Create New Item', { class: `${this.settings.classNames.dropdownItem} fixed-bottom` })}`;
+      },
+      dropdownFooter(suggestions) {
+        return suggestions.length > 0
+          ? `${getCreateButtonTemplate('Create New Item', { class: `${this.settings.classNames.dropdownItem} fixed-bottom` })}`
+          : '';
+      },
+    },
+  },
+};
+
+export default metadata;
+export { Default };

package/src/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/src/tagify/templates/getCreateButtonTemplate.js

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

package/src/text/Paragraph.js

@@ -0,0 +1,52 @@
+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;
+  }
+
+  ${({ 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);'}
+
+  ${color}
+
+  ${({ badge }) =>
+    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/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,106 @@
+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;
+
+    ${({ noTag }) => 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;
+  }
+
+  ${({ noTag }) => noTag && 'left: 0;'}
+
+  ${({ success }) => success && 'color: var(--color-success);'}
+
+  ${({ danger }) => danger && 'color: var(--color-danger);'}
+
+  ${({ warning }) => warning && 'color: var(--color-warning);'}
+
+  ${({ grey }) => 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);
+
+  ${({ noTag }) => 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/src/timeline/__stories__/Timeline.stories.js

@@ -0,0 +1,55 @@
+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',
+    },
+    grey: {
+      description: 'circle color',
+    },
+  },
+};
+
+const Template = (args) => {
+  const { noTag } = args;
+  return (
+    <Timeline {...args}>
+      <Timeline.Items>
+        <Timeline.Item>
+          {!noTag && <Timeline.ItemTag>In Use</Timeline.ItemTag>}
+          <Timeline.ItemCircle {...args}>
+            <FaGenderless />
+          </Timeline.ItemCircle>
+          <Timeline.ItemDescription noTag={noTag}>
+            <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,
+  grey: false,
+  noTag: 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,40 @@
+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/src/toast/MessageContainer.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+const MessageContainer = ({ title, message, containHTML = false }) => {
+  return (
+    <div data-testid='messageContainer'>
+      {title && <Title>{title}</Title>}
+      {containHTML ? (
+        <Message dangerouslySetInnerHTML={{ __html: message }} />
+      ) : (
+        <Message>{message}</Message>
+      )}
+    </div>
+  );
+};
+
+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/src/toast/__stories__/MessageContainer.stories.js

@@ -0,0 +1,47 @@
+import { useRef } from 'react';
+import { toast } from 'react-toastify';
+import MessageContainer from '../MessageContainer';
+
+const metadata = {
+  title: 'Toast/MessageContainer',
+  component: MessageContainer,
+};
+
+const Template = (args) => {
+  const toastId = useRef(null);
+  const ToastFunction = (args) => {
+    return toast.success(<MessageContainer {...args} />, {
+      autoClose: false,
+      closeOnClick: true,
+    });
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          toastId.current = ToastFunction(args);
+        }}
+      >
+        Click 1
+      </button>
+      <button
+        onClick={() => {
+          toast.dismiss(toastId.current);
+        }}
+      >
+        Close
+      </button>
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  title: 'title name',
+  message: 'this is a message',
+  containHTML: false,
+};
+
+export default metadata;
+export { Default };

package/src/toast/index.js

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

package/src/toast/show.js

@@ -0,0 +1,39 @@
+import { toast } from 'react-toastify';
+import MessageContainer from './MessageContainer';
+
+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,
+  { title, message, containHTML = false, options = {} },
+) => {
+  return toast[type](
+    <MessageContainer
+      title={title}
+      message={message}
+      containHTML={containHTML}
+    />,
+    options,
+  );
+};
+
+export {
+  showSuccessMessage,
+  showErrorMessage,
+  showWarningMessage,
+  showInfoMessage,
+};

package/src/toast/style.css

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