@cashub/ui 0.22.8 → 0.22.9

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

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

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

package/src/popover/Popover.js

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

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

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

package/src/qrcode/QRCode.js

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

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

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

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

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

package/src/ribbon/Ribbon.js

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

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

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

package/src/section/Section.js

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

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

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

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

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

package/src/section/__stories__/Section.stories.js

@@ -0,0 +1,52 @@
+import Section from '../Section';
+
+const metadata = {
+  title: 'Section/Section',
+  component: Section,
+  decorators: [
+    (Story) => (
+      <div style={{ color: 'white' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    backgroundMarker: {
+      description: 'background insert image',
+    },
+    backgroundMap: {
+      description: 'background insert image',
+    },
+    checkboxGroup: {
+      description: 'for checkbox element, width=50%,center space ',
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <div style={{ border: '1px solid #000' }}>
+      <Section {...args}></Section>
+    </div>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  backgroundReverse: false,
+  paddingS: false,
+  noPadding: false,
+  noPaddingX: false,
+  noPaddingTop: false,
+  noPaddingBottom: false,
+  marginBottomS: false,
+  noMarginBottom: false,
+  fullHeight: false,
+  backgroundMarker: false,
+  backgroundMap: false,
+  border: false,
+  checkboxGroup: false,
+};
+
+export default metadata;
+export { Default };