@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/paginate/Paginate.js

@@ -1,132 +0,0 @@
-import styled, { css } from 'styled-components';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
-import { usePagination, DOTS } from '@cashub/hooks';
-
-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 (
-    <Container alignRight={alignRight}>
-      <Link disabled={currentPage === 1} onClick={onPrevious}>
-        <Icon>
-          <FaAngleLeft />
-        </Icon>
-      </Link>
-
-      {paginationRange.map((pageNumber, index) => {
-        if (pageNumber === DOTS) {
-          return (
-            <Link key={index} className='paginationDots'>
-              &#8230;
-            </Link>
-          );
-        }
-
-        return (
-          <Link
-            key={index}
-            active={pageNumber === currentPage}
-            onClick={() => onPageChange(pageNumber)}
-          >
-            {pageNumber}
-          </Link>
-        );
-      })}
-
-      <Link disabled={currentPage === lastPage} onClick={onNext}>
-        <Icon>
-          <FaAngleRight />
-        </Icon>
-      </Link>
-    </Container>
-  );
-};
-
-const Container = styled.ul`
-  display: flex;
-  text-align: center;
-
-  ${({ alignRight }) => 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);
-  }
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      opacity: 0.5;
-      cursor: no-drop;
-    `};
-
-  ${({ active }) =>
-    active &&
-    `
-      background-color: var(--color-primary);
-      color: var(--font-on-primary);
-    `}
-
-  &:hover {
-    ${({ disabled, className }) =>
-      !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/src/paginate/__stories__/Paginate.stories.js

@@ -1,49 +0,0 @@
-import Paginate from '../Paginate';
-import { useState, useEffect } from 'react';
-
-const metadata = {
-  title: 'Paginate/Paginate',
-  component: Paginate,
-  argTypes: {
-    onPageChange: {
-      description: 'it is a function that can change page if click page number',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onPageChange } = args;
-  const [page, setPage] = useState(args.currentPage);
-
-  const handleOnPageChange = (num) => {
-    setPage(num);
-  };
-
-  useEffect(() => {
-    setPage(args.currentPage);
-  }, [args.currentPage]);
-
-  return (
-    <Paginate
-      {...args}
-      alt='picture'
-      onPageChange={(num) => {
-        handleOnPageChange(num);
-        onPageChange();
-      }}
-      currentPage={page}
-    />
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  currentPage: 5,
-  totalCount: 100,
-  pageSize: 10,
-  alignRight: false,
-  siblingCount: 1,
-};
-
-export default metadata;
-export { Default };

package/src/paginate/__test__/Paginate.test.js

@@ -1,124 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import 'jest-styled-components';
-import Paginate from '../Paginate';
-
-describe('Test Paginate Component', () => {
-  // component template
-  const renderComponent = (currentPage, onPageChange, alignRight) => {
-    return (
-      <Paginate
-        currentPage={currentPage}
-        totalCount={100}
-        pageSize={15}
-        onPageChange={onPageChange}
-        alignRight={alignRight}
-      />
-    );
-  };
-
-  test('render component', () => {
-    render(renderComponent(1));
-
-    const paginate = screen.getByRole('list');
-    expect(paginate).toBeInTheDocument();
-    expect(paginate).not.toHaveStyle('justify-content: flex-end');
-
-    const paginateButtons = screen.getAllByRole('listitem');
-    expect(paginateButtons).toHaveLength(9);
-
-    const [previousButton, button1, , , , , dots, , nextButton] =
-      paginateButtons;
-    paginateButtons.forEach((button, index) => {
-      // avoid check last button(next button)
-      if (index === paginateButtons.length - 1) {
-        return;
-      }
-
-      expect(button).toHaveStyle('margin-right: var(--spacing-xs)');
-    });
-    expect(nextButton).toHaveStyleRule('margin-right', 'var(--spacing-xs)', {
-      modifier: '&:not(:last-child)',
-    });
-
-    expect(previousButton).toHaveStyle({
-      opacity: '0.5',
-      cursor: 'no-drop',
-    });
-    paginateButtons.forEach((button, index) => {
-      // avoid check first button(previous button)
-      if (index === 0) {
-        return;
-      }
-
-      expect(button).not.toHaveStyle({
-        opacity: '0.5',
-        cursor: 'no-drop',
-      });
-    });
-
-    expect(button1).toHaveStyle('background-color: var(--color-primary)');
-
-    expect(dots).toHaveStyle('cursor: default');
-  });
-
-  test('variant style', () => {
-    render(renderComponent(1, null, true));
-
-    const paginate = screen.getByRole('list');
-    expect(paginate).toBeInTheDocument();
-    expect(paginate).toHaveStyle('justify-content: flex-end');
-  });
-
-  test('change page', () => {
-    let currentPage = 1;
-    const handlePageChange = jest.fn().mockImplementation((page) => {
-      currentPage = page;
-    });
-
-    const { rerender } = render(renderComponent(currentPage, handlePageChange));
-
-    const paginateButtons = screen.getAllByRole('listitem');
-    const [previousButton, , button2, , , , , button7, nextButton] =
-      paginateButtons;
-
-    userEvent.click(button2);
-    rerender(renderComponent(currentPage, handlePageChange));
-    expect(handlePageChange).toHaveBeenLastCalledWith(2);
-
-    userEvent.click(previousButton);
-    rerender(renderComponent(currentPage, handlePageChange));
-    expect(handlePageChange).toHaveBeenLastCalledWith(1);
-    expect(previousButton).toHaveStyle({
-      opacity: '0.5',
-      cursor: 'no-drop',
-    });
-
-    userEvent.click(previousButton);
-    rerender(renderComponent(currentPage, handlePageChange));
-    expect(handlePageChange).toHaveBeenCalledTimes(2);
-
-    userEvent.click(nextButton);
-    rerender(renderComponent(currentPage, handlePageChange));
-    expect(handlePageChange).toHaveBeenLastCalledWith(2);
-
-    userEvent.click(button7);
-    rerender(renderComponent(currentPage, handlePageChange));
-    expect(handlePageChange).toHaveBeenLastCalledWith(7);
-    expect(nextButton).toHaveStyle({
-      opacity: '0.5',
-      cursor: 'no-drop',
-    });
-
-    userEvent.click(nextButton);
-    rerender(renderComponent(currentPage, handlePageChange));
-    expect(handlePageChange).toHaveBeenCalledTimes(4);
-  });
-
-  test('invalid page range', () => {
-    render(renderComponent(0));
-
-    const paginate = screen.queryByRole('list');
-    expect(paginate).not.toBeInTheDocument();
-  });
-});

package/src/paginate/index.js

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

package/src/popover/Popover.js

@@ -1,82 +0,0 @@
-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';
-
-const Popover = ({ container, id, ...props }) => {
-  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(
-    <Box {...props} id={`popover${id}`} handleClose={handleClose} />,
-    rootElement,
-  );
-};
-
-const Box = ({ target, id, handleClose, content, boundary }) => {
-  const [popoverElement, setTooltipElement] = useState(null);
-
-  const { styles, attributes, state } = useCustomPopper(
-    target,
-    popoverElement,
-    {
-      boundary,
-    },
-  );
-
-  return (
-    <OutsideClickHandler
-      onOutsideClick={(event) => {
-        if (`popover${event.target.id}` !== id) {
-          handleClose();
-        }
-      }}
-    >
-      <Wrapper>
-        <PopoverBox
-          id={id}
-          ref={setTooltipElement}
-          style={styles.popper}
-          {...attributes.popper}
-          placement={state && state.placement}
-        >
-          {content}
-        </PopoverBox>
-      </Wrapper>
-    </OutsideClickHandler>
-  );
-};
-
-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/src/popover/__stories__/Popover.stories.js

@@ -1,44 +0,0 @@
-import Popover from '../Popover';
-
-const metadata = {
-  title: 'Popover/Popover',
-  component: Popover,
-  argTypes: {
-    target: {
-      description: 'target is a element',
-    },
-    content: {
-      description: 'popover content',
-    },
-    boundary: {
-      description: 'boundary is a element',
-    },
-  },
-};
-
-const Template = (args) => {
-  const showPopover = (args) => {
-    return Popover({ ...args });
-  };
-
-  return (
-    <div>
-      <button
-        id='button'
-        onClick={(event) => {
-          showPopover({ ...args, target: event.target });
-        }}
-      >
-        Click
-      </button>
-    </div>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  content: 'Click Button!',
-};
-
-export default metadata;
-export { Default };

package/src/popover/index.js

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

package/src/qrcode/QRCode.js

@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-import QRCode from 'qrcode.react';
-import CasHUBLogoOnly from '../assets/images/cashub-logo-only.png';
-
-const QRCodeBox = ({ content, options = {} }) => {
-  return (
-    <Wrapper>
-      <Container>
-        <QRCode
-          value={content}
-          size={300}
-          imageSettings={{
-            src: CasHUBLogoOnly,
-            x: null,
-            y: null,
-            height: 40,
-            width: 40,
-            excavate: true,
-          }}
-        />
-
-        {options.text && <Text>{options.text}</Text>}
-      </Container>
-
-      {options.message && <Message>{options.message}</Message>}
-    </Wrapper>
-  );
-};
-
-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/src/qrcode/QRCodeContainter.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const QRCodeContainter = ({ src, alt }) => {
-  return (
-    <Figure>
-      <Image src={src} alt={alt} />
-    </Figure>
-  );
-};
-
-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/src/qrcode/__stories__/QRCode.stories.js

@@ -1,36 +0,0 @@
-import QRCode from '../QRCode';
-
-const metadata = {
-  title: 'QRcode/QRCode',
-  component: QRCode,
-  argTypes: {
-    content: {
-      description: 'content include url and key,it is a object data',
-      control: 'object',
-    },
-    options: {
-      description: 'options include text and message,it is a  object data',
-      control: 'object',
-    },
-  },
-};
-
-const Template = (args) => {
-  const data = {
-    url: 'http://localhost:10085/kitting',
-    key: '172017257412',
-  };
-
-  return <QRCode {...args} content={JSON.stringify(data)} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  options: {
-    text: '172017257412',
-    message: 'Scan the merchant QR Code for kitting',
-  },
-};
-
-export default metadata;
-export { Default };

package/src/qrcode/__stories__/QRCodeContainter.stories.js

@@ -1,28 +0,0 @@
-import QRCodeContainter from '../QRCodeContainter';
-import QRcode from '../../assets/images/qrcode.png';
-
-const metadata = {
-  title: 'QRcode/QRCodeContainter',
-  component: QRCodeContainter,
-  argTypes: {
-    src: {
-      description: 'image',
-      control: { type: 'file', accept: '.png,.jpg,.jpeg,.bmp' },
-    },
-    alt: {
-      description:
-        'The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <QRCodeContainter {...args} alt='picture' />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  src: [`${QRcode}`],
-};
-
-export default metadata;

package/src/qrcode/index.js

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

package/src/ribbon/Ribbon.js

@@ -1,38 +0,0 @@
-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/src/ribbon/__stories__/Ribbon.stories.js

@@ -1,25 +0,0 @@
-import Ribbon from '../Ribbon';
-
-const metadata = {
-  title: 'Ribbon/Ribbon',
-  component: Ribbon,
-};
-
-const Template = (args) => (
-  <Ribbon>
-    <Ribbon.Content danger {...args}>
-      Disabled
-    </Ribbon.Content>
-  </Ribbon>
-);
-
-const Default = Template.bind({});
-Default.args = {
-  primary: false,
-  success: false,
-  warning: false,
-  danger: true,
-};
-
-export default metadata;
-export { Default };

package/src/ribbon/index.js

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