@cashub/ui 0.22.9 → 0.22.11

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';

package/src/section/Section.js

@@ -1,66 +0,0 @@
-import styled from 'styled-components';
-import bgChartTriangle from '../assets/images/bg-chart-triangle.png';
-import bgChartCircle from '../assets/images/bg-chart-circle.png';
-import bgMap from '../assets/images/map.png';
-
-const Section = styled.div`
-  background: var(--color-background1);
-  border-radius: var(--border-radius);
-  color: var(--font-on-background);
-  padding: var(--spacing);
-  margin-bottom: var(--spacing);
-
-  ${({ backgroundReverse }) =>
-    backgroundReverse && 'background: var(--color-background2);'}
-
-  ${({ paddingS }) => paddingS && 'padding: var(--spacing-s);'}
-
-  ${({ paddingXS }) => paddingXS && 'padding: var(--spacing-xs);'}
-
-  ${({ noPadding }) => noPadding && 'padding: 0;'}
-
-  ${({ noPaddingX }) => noPaddingX && 'padding-left: 0; padding-right: 0;'}
-
-  ${({ noPaddingTop }) => noPaddingTop && 'padding-top: 0;'}
-
-  ${({ noPaddingBottom }) => noPaddingBottom && 'padding-bottom: 0;'}
-
-  ${({ marginBottomS }) => marginBottomS && 'margin-bottom: var(--spacing-s);'}
-
-  ${({ noMarginBottom }) => noMarginBottom && 'margin-bottom: 0;'}
-
-  ${({ fullHeight }) => fullHeight && 'height: calc(100% - var(--spacing));'}
-
-  ${({ backgroundMarker }) =>
-    backgroundMarker &&
-    `
-      background: var(--color-background2);
-      background-image: url(${bgChartCircle}), url(${bgChartTriangle});
-      background-repeat: no-repeat;
-      background-position: left top, right bottom;
-      background-size: 337px 312px, 166px 225px;
-    `}
-
-  ${({ backgroundMap }) =>
-    backgroundMap &&
-    `
-      background: var(--color-background2);
-      background-image: url(${bgMap});
-      background-repeat: no-repeat;
-      background-size: cover;
-    `}
-
-  ${({ border }) =>
-    border && 'border: var(--border-width) solid var(--border-color);'}
-  
-  ${({ checkboxGroup }) =>
-    checkboxGroup &&
-    `
-      background: transparent;
-      width: 50%;
-      margin-left: auto;
-      margin-right: auto;
-    `}
-`;
-
-export default Section;

package/src/section/SectionBody.js

@@ -1,34 +0,0 @@
-import styled, { css } from 'styled-components';
-import scrollbar from '../styles/mixin/scrollbar';
-import media from '../styles/mixin/media';
-
-const SectionBody = styled.div`
-  // fix: overflow element(relate to z-index problem)
-  // position: relative;
-  background: transparent;
-  padding: var(--spacing) 0 0 0;
-
-  ${({ noPadding }) => noPadding && 'padding: 0;'}
-
-  ${({ maxHeight }) =>
-    maxHeight &&
-    css`
-      max-height: ${maxHeight}px;
-      overflow-y: auto;
-      overflow-x: hidden;
-      ${scrollbar}
-    `}
-
-  ${({ maxHeightLaptop }) =>
-    maxHeightLaptop &&
-    css`
-      ${media.laptop`
-        max-height: ${maxHeightLaptop}px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        ${scrollbar}
-      `}
-    `}
-`;
-
-export default SectionBody;

package/src/section/SectionHeader.js

@@ -1,41 +0,0 @@
-import styled, { css } from 'styled-components';
-import headerStyle from '../styles/config/header.style';
-
-const SectionHeader = styled.div`
-  background: transparent;
-  padding: 0;
-  margin-bottom: calc(var(--spacing-s) * -1);
-
-  > * {
-    padding-bottom: var(--spacing-s);
-  }
-
-  ${({ inline }) =>
-    inline &&
-    css`
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    `}
-
-  ${({ flexStart }) => flexStart && 'justify-content: flex-start;'}
-
-  ${({ border }) =>
-    border && 'border-bottom: var(--border-width) solid var(--border-color);'}
-
-  ${({ backgroundFill }) =>
-    backgroundFill && 'background: var(--color-background1);'}
-
-  ${({ backgroundReverse }) => {
-    return backgroundReverse && 'background: var(--color-background2);';
-  }}
-
-  ${({ sticky }) =>
-    sticky &&
-    `position: sticky;
-    z-index:20;
-    top: ${headerStyle.height};
-  `}
-`;
-
-export default SectionHeader;

package/src/section/SectionToolbar.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const SectionToolbar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  > *:not(:first-child) {
-    margin-left: var(--spacing-s);
-  }
-`;
-
-export default SectionToolbar;

package/src/section/SectionToolbarItem.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-const SectionToolbarItem = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:not(:first-child) {
-    margin-left: var(--spacing-s);
-  }
-`;
-
-export default SectionToolbarItem;