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

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

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

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

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

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

package/src/select/subComponent/Checkbox.js

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

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

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

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

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

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

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