@cashub/ui 0.22.8 → 0.22.9

package/src/select/__stories__/InputSelect.stories.js

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import InputSelect from '../InputSelect';
+
+const metadata = {
+  title: 'Select / InputSelect',
+  component: InputSelect,
+  argTypes: {
+    options: {
+      description: 'A list of options that allows a user to select',
+    },
+    value: {
+      description: 'Filled in or selected value',
+    },
+    disabled: {
+      description:
+        'Indicates that the user can or can not interact with the element',
+    },
+    onSelect: {
+      description: 'A callback that trigger when select a option',
+    },
+    onChange: {
+      description: 'A callback that trigger when change input value',
+    },
+  },
+};
+
+const Default = ({ value, onChange, onSelect, ...args }) => {
+  const [localValue, setLocalValue] = useState(value);
+
+  const handleChange = (event) => {
+    setLocalValue(event.target.value);
+    onChange(event);
+  };
+
+  const handleSelect = (value) => {
+    setLocalValue(value);
+    onSelect(value);
+  };
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  return (
+    <InputSelect
+      {...args}
+      value={localValue}
+      onChange={handleChange}
+      onSelect={handleSelect}
+    />
+  );
+};
+Default.args = {
+  options: [{ package_name: '1' }, { package_name: '2' }],
+  value: '',
+  disabled: false,
+};
+
+export default metadata;
+export { Default };

package/src/select/__stories__/Select.stories.js

@@ -0,0 +1,132 @@
+import { useEffect, useState } from 'react';
+import { Select } from '../';
+
+const metadata = {
+  title: 'Select / Select',
+  component: Select,
+  argTypes: {
+    options: {
+      description:
+        'Array of object, each object include id and text properties',
+    },
+    selected: {
+      description: 'Current selected option',
+    },
+    onSelect: {
+      description: "A callback that return new selected option's id",
+      control: {
+        action: 'onSelect',
+      },
+    },
+    onDeselect: {
+      description: "A callback that return unselect option's id",
+    },
+    multiple: {
+      description: 'Enable or disable multiple selection feature',
+    },
+    allowClear: {
+      description: 'Allow clear selected option or not',
+    },
+    allowSearch: {
+      description: 'Enable or disable search option feature',
+    },
+    disabled: {
+      description: 'Disable select component',
+    },
+    placeholder: {
+      description:
+        'Text that appears in the input when it has no option selected',
+    },
+    fullWidth: {
+      description: 'Style variant',
+    },
+    large: {
+      description: 'Style variant',
+    },
+    fill: {
+      description: 'Style variant',
+    },
+    fillReverse: {
+      description: 'Style variant',
+    },
+    onBlur: {
+      description: 'A callback, called when the Select panel is closed',
+    },
+    enableSelectAll: {
+      description: 'Enable select all function',
+    },
+  },
+};
+
+const Default = ({ onSelect, onDeselect, ...args }) => {
+  const [data, setData] = useState(args.multiple ? [] : '');
+
+  const handleChangeOnDeselectValue = (value) => {
+    onDeselect(value);
+
+    setData((previousData) => {
+      const newData = [...previousData];
+      const index = newData.indexOf(value);
+      if (index > -1) {
+        newData.splice(index, 1);
+      }
+
+      return newData;
+    });
+  };
+
+  const handleChangeOnSelectValue = (value) => {
+    onSelect(value);
+    if (args.multiple) {
+      if (!data.includes(value)) {
+        setData((previousData) => {
+          return [...previousData, value];
+        });
+      }
+    } else {
+      setData(value);
+    }
+  };
+
+  useEffect(() => {
+    if (args.multiple) {
+      setData([]);
+    }
+
+    if (!args.multiple) {
+      setData('');
+    }
+  }, [args.multiple]);
+
+  return (
+    <>
+      <Select
+        {...args}
+        selected={data}
+        onSelect={(option) => handleChangeOnSelectValue(option)}
+        onDeselect={(option) => handleChangeOnDeselectValue(option)}
+      />
+    </>
+  );
+};
+Default.args = {
+  options: [
+    { id: 1, text: 'option 1' },
+    { id: 2, text: 'option 2' },
+    { id: 3, text: 'option 3' },
+    { id: 4, text: 'option 4' },
+  ],
+  multiple: true,
+  allowClear: false,
+  allowSearch: true,
+  disabled: false,
+  placeholder: '',
+  fullWidth: false,
+  large: false,
+  fill: false,
+  fillReverse: false,
+  enableSelectAll: true,
+};
+
+export default metadata;
+export { Default };

package/src/select/__test__/Select.test.js

@@ -0,0 +1,219 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import Select from '../Select';
+import userEvent from '@testing-library/user-event';
+
+describe('Test Select component', () => {
+  const options = [
+    { id: 'data1', text: 'data1' },
+    { id: 'data2', text: 'data2' },
+    { id: 'data3', text: 'data3' },
+  ];
+
+  test('click select can show dropDown list', () => {
+    render(<Select options={options} selected='' />);
+    const select = screen.getByRole('combobox');
+    expect(select).toBeInTheDocument();
+
+    const dropDownHidden = screen.queryByRole('listbox');
+    expect(dropDownHidden).toBe(null);
+
+    userEvent.click(select);
+    const dropDown = screen.getByRole('listbox');
+    expect(dropDown).toHaveStyle('visibility: visible');
+    expect(dropDown).toBeVisible();
+
+    // 選項
+    const optionsItem1 = screen.getByText('data1', { selector: 'div' });
+    const optionsItem2 = screen.getByText('data2', { selector: 'div' });
+    const optionsItem3 = screen.getByText('data3', { selector: 'div' });
+    const searchInput = screen.getByPlaceholderText('Search', {
+      selector: 'input',
+    });
+    expect(optionsItem1).toBeVisible();
+    expect(optionsItem2).toBeVisible();
+    expect(optionsItem3).toBeVisible();
+    expect(searchInput).toBeVisible();
+  });
+
+  test('click a option can show selected value for single choice', () => {
+    const handleOnSelect = jest.fn();
+    let selected = '';
+    handleOnSelect.mockImplementation((value) => {
+      selected = value;
+    });
+
+    const { rerender } = render(
+      <Select
+        options={options}
+        onSelect={handleOnSelect}
+        selected=''
+        placeholder='pls choice'
+      />,
+    );
+    const select = screen.getByRole('combobox');
+    expect(select).toHaveTextContent('pls choice');
+
+    userEvent.click(select);
+    const dropDown = screen.getByRole('listbox');
+    expect(dropDown).toBeVisible();
+    const optionsList = screen.getAllByRole('option');
+    expect(optionsList).toHaveLength(3);
+
+    userEvent.click(optionsList[0]);
+
+    rerender(
+      <Select
+        options={options}
+        onSelect={handleOnSelect}
+        selected={selected}
+        placeholder='pls choice'
+      />,
+    );
+
+    expect(select).toHaveTextContent(options[0].text);
+
+    expect(handleOnSelect).toHaveBeenCalledTimes(1);
+    const dropDownHidden = screen.queryByRole('listbox', { name: 'dropDown' });
+    expect(dropDownHidden).toBe(null);
+    expect(select).toHaveFocus();
+
+    rerender(
+      <Select
+        options={options}
+        selected={options[0].id}
+        onSelect={handleOnSelect}
+        placeholder='pls choice'
+      />,
+    );
+
+    expect(optionsList[0]).toHaveStyle({ background: 'var(--color-hover)' });
+    expect(optionsList[1]).toHaveStyle({
+      background: 'var(--color-background1)',
+    });
+    expect(select).toHaveTextContent(options[0].text);
+  });
+
+  test('on blur hide options', () => {
+    render(<Select options={options} selected='' />);
+    const select = screen.getByRole('combobox');
+
+    userEvent.click(select);
+    const dropDown = screen.queryByRole('listbox');
+    expect(dropDown).toHaveStyle('visibility: visible');
+    expect(dropDown).toBeVisible();
+
+    userEvent.click(document.body);
+    expect(dropDown).toHaveStyle('visibility: hidden');
+    expect(dropDown).not.toBeVisible();
+  });
+
+  test('disabled', () => {
+    render(<Select disabled={true} options={options} selected='' />);
+    expect(screen.getByRole('combobox')).toHaveStyle('cursor: not-allowed');
+  });
+
+  test('select can supports onSelect and onDeselect for multiple choice', () => {
+    let selectValue = [];
+
+    const handleOnSelect = jest.fn();
+    handleOnSelect.mockImplementation((value) => {
+      if (!selectValue.includes(value)) {
+        selectValue = [...selectValue, value];
+      }
+    });
+
+    const handleDeSelect = jest.fn();
+    handleDeSelect.mockImplementation((value) => {
+      const index = selectValue.indexOf(value);
+      if (index > -1) {
+        selectValue.splice(index, 1);
+      }
+    });
+
+    const { rerender } = render(
+      <Select
+        options={options}
+        selected={selectValue}
+        multiple={true}
+        onSelect={handleOnSelect}
+        onDeselect={handleDeSelect}
+      />,
+    );
+    const select = screen.getByRole('combobox');
+    expect(select).toBeInTheDocument();
+
+    const dropDownHidden = screen.queryByRole('listbox');
+    expect(dropDownHidden).toBe(null);
+
+    userEvent.click(select);
+    const dropDown = screen.getByRole('listbox');
+    expect(dropDown).toHaveStyle('visibility: visible');
+    expect(dropDown).toBeVisible();
+
+    const optionsList = screen.getAllByRole('option');
+    expect(optionsList[0]).toBeVisible();
+    // 選擇一筆
+    userEvent.click(optionsList[1]);
+    expect(dropDownHidden).toBe(null);
+
+    rerender(
+      <Select
+        options={options}
+        selected={selectValue}
+        multiple={true}
+        onSelect={handleOnSelect}
+        onDeselect={handleDeSelect}
+      />,
+    );
+
+    expect(handleOnSelect).toHaveBeenCalledTimes(1);
+    expect(handleDeSelect).toHaveBeenCalledTimes(0);
+    expect(select).toHaveTextContent(options[1].text);
+    expect(select).toHaveFocus();
+
+    const selectedOption = screen.getAllByTestId('removeOption');
+    // 刪除一筆
+    userEvent.click(selectedOption[0]);
+
+    rerender(
+      <Select
+        options={options}
+        selected={selectValue}
+        multiple={true}
+        onSelect={handleOnSelect}
+        onDeselect={handleDeSelect}
+      />,
+    );
+    expect(handleDeSelect).toHaveBeenCalledTimes(1);
+    expect(select).not.toHaveTextContent('');
+    expect(select).toHaveFocus();
+  });
+});
+
+describe('testing SearchBox component', () => {
+  const options = [
+    { id: '1', text: 'data1' },
+    { id: '2', text: 'data2' },
+    { id: '3', text: 'data3' },
+  ];
+
+  test('SearchBox can type letters', () => {
+    render(<Select options={options} selected='' />);
+    const SearchBox = screen.getByPlaceholderText('Search');
+    expect(SearchBox).toBeInTheDocument();
+
+    userEvent.type(SearchBox, 'data1');
+    expect(SearchBox).toHaveValue('data1');
+  });
+
+  test('keyUp letters can render option', () => {
+    render(<Select options={options} selected='' />);
+    const SearchBox = screen.getByPlaceholderText('Search');
+    fireEvent.change(SearchBox, { target: { value: 'data' } });
+
+    fireEvent.keyUp(SearchBox, { key: 'Enter', keyCode: 13 || 108 });
+
+    const optionsList = screen.getAllByRole('option');
+    expect(optionsList).toHaveLength(3);
+  });
+});

package/src/select/index.js

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

package/src/select/subComponent/ListBox.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const ListBox = styled.div`
+  visibility: ${({ $display }) => ($display ? 'visible' : 'hidden')};
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  width: ${({ width }) => width}px;
+  z-index: 31;
+`;
+ListBox.displayName = 'ListBox';
+
+export default ListBox;

package/src/select/subComponent/Option.js

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+
+const Option = styled.div`
+  max-width: 100%;
+  word-break: break-all;
+  padding: 12px var(--spacing-s);
+  background: var(--color-background1);
+  transition: background 0.3s;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  ${({ selected, focus }) =>
+    (selected || focus) &&
+    css`
+      background: var(--color-hover);
+    `}
+`;
+Option.displayName = 'Option';
+
+export default Option;

package/src/select/subComponent/OptionGroup.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const OptionGroup = styled.div`
+  [role='presentation'] {
+    font-weight: bold;
+
+    &:hover {
+      background: var(--color-background1);
+    }
+  }
+
+  [role='option'] {
+    padding-left: calc(var(--spacing-s) * 2);
+  }
+`;
+OptionGroup.displayName = 'OptionGroup';
+
+export default OptionGroup;

package/src/select/subComponent/Options.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import scrollbar from '../../styles/mixin/scrollbar';
+
+const Options = styled.div`
+  position: relative;
+  padding: var(--spacing-xs) 0;
+  max-height: min(320px, calc(50vh - 36px - 20px - 36px));
+  overflow-y: auto;
+  overflow-x: visible;
+  border-radius: var(--border-radius);
+
+  ${({ allowSearch }) =>
+    allowSearch &&
+    `
+      padding-top: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    `}
+
+  ${scrollbar}
+`;
+Options.displayName = 'Options';
+
+export default Options;

package/src/select/subComponent/SearchBox.js

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { GoSearch } from 'react-icons/go';
+import inputPlaceholder from '../../styles/mixin/inputPlaceholder';
+
+const SearchBox = forwardRef((props, ref) => {
+  const handleClick = (event) => {
+    event.stopPropagation();
+  };
+
+  return (
+    <Wrapper onClick={handleClick}>
+      <GoSearch />
+      <SearchInput type='text' ref={ref} {...props} />
+    </Wrapper>
+  );
+});
+
+const Wrapper = styled.div`
+  position: relative;
+  padding: var(--spacing-xs);
+
+  > svg {
+    color: var(--font-on-mute);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: calc(var(--spacing-s) + var(--spacing-xs));
+  }
+`;
+Wrapper.displayName = 'Wrapper';
+
+const SearchInput = styled.input`
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  border-radius: var(--border-radius-l);
+  border: var(--border-width) solid var(--border-color);
+  outline: none;
+  width: 100%;
+  padding: 10px var(--spacing-s) 10px calc(var(--spacing-s) * 2 + 8px);
+  max-height: 36px;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  ${inputPlaceholder`
+    color: var(--font-on-mute);
+  `}
+`;
+SearchInput.displayName = 'SearchInput';
+
+export default SearchBox;

package/src/select/subComponent/SelectedMultiple.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { FaTimes } from 'react-icons/fa';
+
+const SelectedMultiple = ({ content, onClick, disabled }) => {
+  return (
+    <Selected>
+      {!disabled && (
+        <span onClick={onClick} data-testid='removeOption'>
+          <FaTimes />
+        </span>
+      )}
+      {content}
+    </Selected>
+  );
+};
+
+const Selected = styled.div`
+  align-items: center;
+  display: flex;
+  background: var(--color-background3);
+  border-radius: var(--border-radius-l);
+  padding: 0.25rem calc(var(--spacing-xs) + 4px);
+  margin: 4px 10px 4px 0;
+  color: var(--font-on-background);
+  font-weight: var(--font-normal);
+  word-break: break-all;
+
+  > span {
+    display: flex;
+    align-items: center;
+
+    > svg {
+      margin-right: var(--spacing-xs);
+      color: var(--font-on-background);
+    }
+  }
+`;
+
+export default SelectedMultiple;

package/src/select/subComponent/SelectedSingle.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const SelectedSingle = styled.div`
+  color: var(--font-on-background);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+SelectedSingle.displayName = 'SelectedSingle';
+
+export default SelectedSingle;

package/src/styles/GlobalStyle.js

@@ -0,0 +1,59 @@
+import { createGlobalStyle } from 'styled-components';
+import '../assets/css/global.css';
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    --color-white: ${({ theme }) => theme.colorWhite};
+    --color-dark: ${({ theme }) => theme.colorDark};
+    --color-grey: ${({ theme }) => theme.colorGrey};
+    --color-primary: ${({ theme }) => theme.colorPrimary};
+    --color-success: ${({ theme }) => theme.colorSuccess};
+    --color-warning: ${({ theme }) => theme.colorWarning};
+    --color-danger: ${({ theme }) => theme.colorDanger};
+    --color-hover: ${({ theme }) => theme.colorHover};
+    --color-active: ${({ theme }) => theme.colorActive};
+    --color-scroll-bar: ${({ theme }) => theme.scrollBarColor};
+    --color-background1: ${({ theme }) => theme.bgColor1};
+    --color-background2: ${({ theme }) => theme.bgColor2};
+    --color-background3: ${({ theme }) => theme.bgColor3};
+    --color-backdrop: ${({ theme }) => theme.backdropBg};
+
+    --font-h1: ${({ theme }) => theme.fontH1};
+    --font-h2: ${({ theme }) => theme.fontH2};
+    --font-h3: ${({ theme }) => theme.fontH3};
+    --font-body1: ${({ theme }) => theme.fontBody1};
+    --font-body2: ${({ theme }) => theme.fontBody2};
+    --font-button: ${({ theme }) => theme.fontButton};
+    --font-caption: ${({ theme }) => theme.fontCaption};
+    --font-family: ${({ theme }) => theme.fontFamily};
+    --font-normal: ${({ theme }) => theme.fontWeightNormal};
+    --font-bold: ${({ theme }) => theme.fontWeightBold};
+    --font-on-primary: ${({ theme }) => theme.fontOnPrimary};
+    --font-on-success: ${({ theme }) => theme.fontOnSuccess};
+    --font-on-warning: ${({ theme }) => theme.fontOnWarning};
+    --font-on-danger: ${({ theme }) => theme.fontOnDanger};
+    --font-on-background: ${({ theme }) => theme.fontOnBg};
+    --font-on-mute: ${({ theme }) => theme.fontMutedColor};
+
+    --box-shadow: ${({ theme }) => theme.boxShadow};
+    --border-color: ${({ theme }) => theme.borderColor};
+    --border-width: ${({ theme }) => theme.borderWidth};
+    --border-radius-s: ${({ theme }) => theme.borderRadiusS};
+    --border-radius: ${({ theme }) => theme.borderRadius};
+    --border-radius-l: ${({ theme }) => theme.borderRadiusL};
+    --border-radius-round: ${({ theme }) => theme.borderRadiusRound};
+
+    --spacing-xs: ${({ theme }) => theme.spacerXS};
+    --spacing-s: ${({ theme }) => theme.spacerS};
+    --spacing: ${({ theme }) => theme.spacer};
+    --spacing-l: ${({ theme }) => theme.spacerL};
+
+    background : ${({ theme }) => theme.bgColor1};
+  }
+
+  .margin-bottom-s {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+
+export default GlobalStyle;

package/src/styles/config/breakpoint.style.js

@@ -0,0 +1,8 @@
+const breakpoints = {
+  desktop: 1920,
+  laptop: 1200,
+  tablet: 768,
+  mobile: 576,
+};
+
+export default breakpoints;

package/src/styles/config/header.style.js

@@ -0,0 +1,5 @@
+const headerStyle = {
+  height: '64px',
+};
+
+export default headerStyle;

package/src/styles/config/sidebar.style.js

@@ -0,0 +1,12 @@
+const sidebarStyle = {
+  close: {
+    width: '72px',
+    height: '100%',
+  },
+  open: {
+    width: '316px',
+    height: '100%',
+  },
+};
+
+export default sidebarStyle;

package/src/styles/index.js

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