@cashub/ui 0.48.30 → 0.49.0-beta.0

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,236 @@
+import { useEffect, useState } from 'react';
+import { Select } from '../';
+
+const metadata = {
+  title: 'Select / Select',
+  component: Select,
+  argTypes: {
+    options: {
+      description:
+        'Array of objects. Each object includes id and text properties, and can include highlightText for colored text in the option label.',
+    },
+    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',
+    },
+    displayMode: {
+      description:
+        'Defines the visual representation of selected items when **multiple selection** is enabled.',
+      options: ['tags', 'text'],
+      control: { type: 'inline-radio' },
+      table: {
+        defaultValue: { summary: 'tags' },
+      },
+    },
+    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',
+    },
+    flexGrow: {
+      description: 'Style variant',
+    },
+    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',
+    },
+    footer: {
+      description:
+        'An optional slot for rendering custom content (e.g., action buttons, status text) at the bottom of the list.',
+      control: { type: 'element' },
+    },
+  },
+};
+
+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)}
+        footer={
+          <span
+            role='button'
+            style={{ cursor: 'pointer', display: 'block', width: '100%' }}
+            onClick={() => {
+              prompt('Enter new value');
+            }}
+          >
+            Create New
+          </span>
+        }
+      />
+    </>
+  );
+};
+Default.args = {
+  options: [
+    {
+      id: 1,
+      text: 'option 1',
+      icon: 'http://localhost:10084/cashub/images/2024/08/09/8fneYZiugGEYsgDqDyQue6k1o1uK2talRb8qTu73.png',
+      isDisable: true,
+      suffix: 'Incompatible',
+    },
+    {
+      id: 2,
+      text: '1.2.0 Incompatible with installed version | Latest created',
+      highlightText: 'Incompatible with installed version',
+    },
+    { id: 3, text: 'option 3' },
+    { id: 4, text: 'option 4' },
+    {
+      text: 'option Group',
+      child: [
+        { id: 5, text: 'option 5' },
+        { id: 6, text: 'option 6' },
+      ],
+    },
+  ],
+  multiple: false,
+  displayMode: 'tags',
+  allowClear: false,
+  allowSearch: true,
+  disabled: false,
+  placeholder: '',
+  fullWidth: false,
+  large: false,
+  fill: false,
+  fillReverse: false,
+  enableSelectAll: true,
+  flexGrow: true,
+};
+
+const SelectedDisabledOption = ({ onSelect, onDeselect, ...args }) => {
+  const [data, setData] = useState(args.selected);
+
+  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 (!data.includes(value)) {
+      setData((previousData) => {
+        return [...previousData, value];
+      });
+    }
+  };
+
+  return (
+    <Select
+      {...args}
+      selected={data}
+      onSelect={(option) => handleChangeOnSelectValue(option)}
+      onDeselect={(option) => handleChangeOnDeselectValue(option)}
+    />
+  );
+};
+SelectedDisabledOption.args = {
+  options: [
+    { id: 1, text: 'option 1 (disabled, pre-selected)', isDisable: true },
+    { id: 2, text: 'option 2 (disabled)', isDisable: true },
+    { id: 3, text: 'option 3 (pre-selected)' },
+    { id: 4, text: 'option 4' },
+  ],
+  selected: [1, 3],
+  multiple: true,
+  displayMode: 'tags',
+  allowClear: false,
+  allowSearch: true,
+  disabled: false,
+  placeholder: '',
+  fullWidth: false,
+  large: false,
+  fill: false,
+  fillReverse: false,
+  enableSelectAll: false,
+  flexGrow: true,
+};
+
+export default metadata;
+export { Default, SelectedDisabledOption };

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/Checkbox.js

@@ -0,0 +1,33 @@
+import styled, { css } from 'styled-components';
+import { MdDone } from 'react-icons/md';
+
+const Checkbox = ({ selected }) => {
+  return <Container selected={selected}>{selected && <MdDone />}</Container>;
+};
+
+const Container = styled.div`
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border: var(--border-width) solid var(--border-color);
+  margin-right: var(--spacing-xs);
+  border-radius: 4px;
+
+  ${({ selected }) =>
+    selected &&
+    css`
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+    `}
+
+  > svg {
+    position: absolute;
+    color: var(--font-on-primary);
+    font-size: var(--font-h3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+export default Checkbox;

package/src/select/subComponent/Footer.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Footer = styled.div`
+  padding: var(--spacing-s);
+  border-top: 1px solid var(--border-color);
+`;
+
+export default Footer;

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: 85;
+`;
+ListBox.displayName = 'ListBox';
+
+export default ListBox;

package/src/select/subComponent/Option.js

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+
+const Option = styled.div`
+  display: flex;
+  align-items: center;
+  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);
+    `}
+
+  ${({ disabled }) => disabled && css`
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--font-on-mute);
+  `}
+`;
+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;