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

package/src/form/__stories__/Label.stories.js

@@ -1,38 +0,0 @@
-import Label from '../Label';
-
-const metadata = {
-  title: 'Form/Label',
-  component: Label,
-  decorators: [
-    (Story) => (
-      <div style={{ border: '2px solid #000' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {
-    children: {
-      description: 'Label content',
-    },
-    required: {
-      description: 'required field ',
-    },
-    noMarginBottom: {
-      description: 'remove margin bottom',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <Label {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'Label Text',
-  required: false,
-  noMarginBottom: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/MutedText.stories.js

@@ -1,27 +0,0 @@
-import MutedText from '../MutedText';
-
-const metadata = {
-  title: 'Form/MutedText',
-  component: MutedText,
-  argTypes: {
-    children: {
-      description: 'MutedText contents',
-    },
-    alignRight: {
-      description: 'text align right',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <MutedText {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'MutedText',
-  alignRight: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/PasswordInput.stories.js

@@ -1,16 +0,0 @@
-import PasswordInput from '../PasswordInput';
-
-const metadata = {
-  title: 'Form/PasswordInput',
-  component: PasswordInput,
-  argTypes: {},
-};
-
-const Template = () => {
-  return <PasswordInput />;
-};
-
-const Default = Template.bind({});
-
-export default metadata;
-export { Default };

package/src/form/__stories__/RadioButton.stories.js

@@ -1,48 +0,0 @@
-import { useState, useEffect } from 'react';
-import RadioButton from '../RadioButton';
-
-const metadata = {
-  title: 'Form/RadioButton',
-  component: RadioButton,
-  argTypes: {
-    text: {
-      description: 'RadioButton name',
-    },
-    checked: {
-      description: 'choice checked or unchecked ',
-    },
-    onChange: {
-      description: 'onChange event',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    setChecked(args.checked);
-  }, [args.checked]);
-
-  return (
-    <RadioButton
-      {...args}
-      onChange={() => {
-        setChecked(!checked);
-        onChange();
-      }}
-      checked={checked}
-    />
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  text: 'All User',
-  disabled: false,
-  checked: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/SearchSelect.stories.js

@@ -1,99 +0,0 @@
-import SearchSelect from '../SearchSelect';
-import { useState, useMemo, useCallback } from 'react';
-
-const metadata = {
-  title: 'Form/SearchSelect',
-  component: SearchSelect,
-  argTypes:{
-    keyword:{
-      description: 'Search keyword',
-    },
-    onSearch: {
-      description: 'Search function',
-    },
-    onSearchReset: {
-      description: 'When no search result, dropdown will show "Data Not Found" and search status will become empty, this function will reset to idle search status',
-    },
-    onToggleOptions: {
-      description: 'To toggle dropdown options checkbox',
-    },
-    options:{
-      description: 'Dropdown options array with { text, checked, isSub }',
-    },
-    placeholder:{
-      description: 'Placeholder of outer search input',
-    },
-    setKeyword:{
-      description: 'set Search keyword state',
-    },
-    status:{
-      description: '3 status, idle for default, empty for no search result, success for have search result',
-    },
-  },
-};
-
-const Default = () => {
-  const [searchKeyword, setSearchKeyword] = useState('');
-  const [searchOptions, setSearchOptions] = useState([]);
-  const [searchStatus, setSearchStatus] = useState('idle');
-
-  const toggleSearchOptions = (index) => {
-    setSearchOptions((previous) => {
-      return previous.map((item, idx) => {
-        return index === idx
-          ? { ...item, checked: item.checked ? 0 : 1 }
-          : item;
-      });
-    });
-  };
-
-  const { searchCheckedList, searchCheckedSet } = useMemo(() => {
-    const list = searchOptions
-      .filter((option) => option.checked);
-    return {
-      searchCheckedList: list,
-      searchCheckedSet: new Set(list.map((item) => item.text)),
-    };
-  }, [searchOptions]);
-
-  const handleSelectSearch = useCallback((keyword) => {
-    const trimmed = keyword.trim();
-    if (!trimmed) {
-      setSearchOptions((previous) => {
-        return previous.filter((option) => {
-          return option.checked;
-        });
-      });
-      return;
-    }
-
-    const MOCK_DATA = [{ sn: '0001' }, { sn: '0002' }];
-
-    const newData = MOCK_DATA
-      .filter(({ sn }) => {
-        return !searchCheckedSet.has(sn) && sn.includes(trimmed);
-      })
-      .map(({ sn }) => {
-        return { text: sn, checked: 0, isSub:true };
-      });
-
-    setSearchOptions(newData.concat(searchCheckedList));
-    setSearchStatus(newData.length > 0 ? 'success' : 'empty');
-  }, [searchCheckedList, searchCheckedSet]);
-
-  return (
-    <SearchSelect
-      keyword={searchKeyword}
-      onSearch={handleSelectSearch}
-      onSearchReset={() => setSearchStatus('idle')}
-      onToggleOptions={toggleSearchOptions}
-      options={searchOptions}
-      placeholder='Search by serial number'
-      setKeyword={setSearchKeyword}
-      status={searchStatus}
-    />
-  );
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/Searchbox.stories.js

@@ -1,24 +0,0 @@
-import Searchbox from '../Searchbox';
-
-const metadata = {
-  title: 'Form/Searchbox',
-  component: Searchbox,
-  argTypes: {
-    onSearch: {
-      description: 'onSearch is a function',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <Searchbox {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  autoFocus: false,
-  border: true,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/Slider.stories.js

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import Slider from '../Slider';
-
-const metadata = {
-  title: 'Form/Slider',
-  component: Slider,
-  argTypes: {
-    value: {
-      description: 'The initial value of the control',
-    },
-    min: {
-      description: 'The lowest value in the range of permitted values',
-    },
-    max: {
-      description: 'The greatest value in the range of permitted values',
-    },
-    onChange: {
-      description:
-        "This event is fired when the user modifies the element's value",
-    },
-    onBlur: {
-      desctiption: 'This event is fires when the element has lost focus',
-    },
-  },
-};
-
-const Template = ({ value, onChange, ...args }) => {
-  const [currentValue, setCurrentValue] = useState(value);
-
-  const handleChange = (event) => {
-    setCurrentValue(event.target.value);
-    onChange(event);
-  };
-
-  return <Slider value={currentValue} onChange={handleChange} {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  value: 10,
-  min: 0,
-  max: 50,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/SwitchButton.stories.js

@@ -1,48 +0,0 @@
-import SwitchButton from '../SwitchButton';
-import { useState, useEffect } from 'react';
-
-const metadata = {
-  title: 'Form/SwitchButton',
-  component: SwitchButton,
-  argTypes: {
-    text: {
-      description: 'SwitchButton item',
-    },
-    checked: {
-      description: 'choice checked or unchecked ',
-    },
-    onChange: {
-      description: 'onChange event',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    setChecked(args.checked);
-  }, [args.checked]);
-
-  return (
-    <SwitchButton
-      {...args}
-      onChange={() => {
-        setChecked(!checked);
-        onChange();
-      }}
-      checked={checked}
-    />
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  text: 'Life Service',
-  disabled: false,
-  checked: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/Textarea.stories.js

@@ -1,19 +0,0 @@
-import Textarea from '../Textarea';
-
-const metadata = {
-  title: 'Form/Textarea',
-  component: Textarea,
-};
-
-const Template = (args) => {
-  return <Textarea {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Please fill up content',
-  disabled: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/TreeView.stories.js

@@ -1,76 +0,0 @@
-import TreeView from '../TreeView';
-
-const metadata = {
-  title: 'Form/TreeView',
-  component: TreeView,
-  argTypes: {
-    data: {
-      description: '',
-    },
-    onChange: {
-      description:
-        "This event is fired when the user modifies the element's value",
-    },
-    onBlur: {
-      desctiption: 'This event is fires when the element has lost focus',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <TreeView {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  data: [
-    {
-      id: 'Parent Checkbox',
-      text: 'Parent Checkbox',
-      type: 'checkbox',
-      disabled: false,
-      value: true,
-      children: [
-        {
-          id: 'Child Checkbox 1',
-          text: 'Child Checkbox 1',
-          type: 'checkbox',
-          disabled: false,
-          value: true,
-        },
-        {
-          id: 'Child Checkbox 2',
-          text: 'Child Checkbox 2 (Disabled)',
-          type: 'checkbox',
-          disabled: true,
-          value: false,
-        },
-        {
-          id: 'Child Input 1',
-          text: 'Child Input 1',
-          type: 'text',
-          disabled: false,
-          value: '',
-        },
-        {
-          id: 'Child Input 2',
-          text: 'Child Input 2 (Disabled)',
-          type: 'text',
-          disabled: true,
-          value: '',
-        },
-      ],
-    },
-    { id: 'Input', text: 'Input', type: 'text', disabled: false, value: '' },
-    {
-      id: 'Checkbox',
-      text: 'Checkbox',
-      type: 'checkbox',
-      disabled: false,
-      value: true,
-    },
-  ],
-};
-
-export default metadata;
-export { Default };

package/src/form/__test__/Checkbox.test.js

@@ -1,68 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import Checkbox from '../Checkbox';
-import 'jest-styled-components';
-
-describe('test checkbox', () => {
-  test('render checkbox', () => {
-    const { container } = render(<Checkbox />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  test('parameters make the style change', () => {
-    const { container } = render(<Checkbox disabled noMargin fontSizeBig />);
-
-    const span = container.firstChild.lastChild;
-    const label = container.firstChild;
-    const checkbox = screen.getByRole('checkbox', { hidden: true });
-
-    expect(label).toHaveStyleRule('font-size', 'var(--font-h3)');
-    expect(label).toHaveStyle({
-      margin: '0',
-    });
-    expect(span).toHaveStyle({
-      opacity: '0.5',
-      cursor: 'not-allowed',
-    });
-    expect(checkbox.disabled).toBe(true);
-  });
-
-  test('with parameters', () => {
-    let tastOption = [{ text: 'Enterprise', checked: 1 }];
-
-    const onChange = jest.fn((index) => {
-      tastOption[index].checked = tastOption[index].checked === 1 ? 0 : 1;
-    });
-
-    const { container, rerender } = render(
-      <Checkbox
-        text='testText'
-        htmlFor='testHtmlFor'
-        checked={tastOption[0].checked}
-        onChange={() => {
-          onChange(0);
-        }}
-      />
-    );
-    const label = container.firstChild;
-    const checkbox = screen.getByRole('checkbox', { hidden: true });
-
-    expect(label).toHaveAttribute('for', 'testHtmlFor');
-    expect(checkbox).toHaveAttribute('id', 'testHtmlFor');
-    expect(checkbox).toBeChecked();
-    expect(screen.getByText('testText').textContent).toBe('testText');
-
-    fireEvent.click(checkbox);
-    rerender(
-      <Checkbox
-        text='testText'
-        htmlFor='testHtmlFor'
-        checked={tastOption[0].checked}
-        onChange={() => {
-          onChange(0);
-        }}
-      />
-    );
-
-    expect(checkbox).not.toBeChecked();
-  });
-});

package/src/form/__test__/FormItem.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import FormItem from '../FormItem';
-
-test('render FormItem', () => {
-  render(<FormItem>item</FormItem>);
-
-  expect(screen.getByText('item')).toBeInTheDocument();
-});

package/src/form/__test__/Input.test.js

@@ -1,28 +0,0 @@
-import { screen, render } from '@testing-library/react';
-import Input from '../Input';
-import 'jest-styled-components';
-
-describe('test input', () => {
-  test('render input', () => {
-    render(<Input type='text' placeholder='test' />);
-
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toHaveStyleRule(
-      'color',
-      'var(--font-on-mute)',
-      { modifier: '::placeholder' }
-    );
-  });
-
-  test('hidden input', () => {
-    render(
-      <>
-        <label htmlFor='password'>password</label>
-        <Input id='password' type='password' hidden />
-      </>
-    );
-
-    expect(screen.getByLabelText('password')).toBeInTheDocument();
-    expect(screen.getByLabelText('password')).toHaveStyle('display: none');
-  });
-});

package/src/form/__test__/Label.test.js

@@ -1,33 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import Label from '../Label';
-import 'jest-styled-components';
-
-describe('test label', () => {
-  test('render label', () => {
-    render(<Label>Description</Label>);
-    expect(screen.getByText('Description')).toBeInTheDocument();
-  });
-
-  test('parameters', () => {
-    render(
-      <Label required inline>
-        Description
-      </Label>
-    );
-
-    expect(screen.getByText('Description')).toHaveStyle({
-      display: 'inline',
-      marginBottom: '0',
-    });
-    expect(screen.getByText('Description')).toHaveStyleRule('content', "' *'", {
-      modifier: '&:after',
-    });
-    expect(screen.getByText('Description')).toHaveStyleRule(
-      'color',
-      'var(--color-danger)',
-      {
-        modifier: '&:after',
-      }
-    );
-  });
-});

package/src/form/__test__/MutedText.test.js

@@ -1,18 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import MutedText from '../MutedText';
-
-describe('test MutedText', () => {
-  test('render MutedText', () => {
-    render(<MutedText>PasswordFormatTip</MutedText>);
-    expect(screen.getByText('PasswordFormatTip')).toBeInTheDocument();
-    expect(screen.getByText('PasswordFormatTip')).toHaveStyle({
-      textAlign: 'left',
-    });
-  });
-  test('parameters', () => {
-    render(<MutedText alignRight>PasswordFormatTip</MutedText>);
-    expect(screen.getByText('PasswordFormatTip')).toHaveStyle({
-      textAlign: 'right',
-    });
-  });
-});

package/src/form/__test__/RadioButton.test.js

@@ -1,57 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import RadioButton from '../RadioButton';
-
-const testFun = jest.fn();
-
-describe('test radioButton', () => {
-  let tableOption = { text: 'ForceDownload', checked: 1 };
-
-  test('render radioButton', () => {
-    const { container } = render(
-      <RadioButton
-        htmlFor='test'
-        text='test'
-        checked={tableOption.checked === 1}
-      />
-    );
-
-    const label = container.firstChild;
-    const checkbox = screen.getByLabelText('test');
-
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveAttribute('for', 'test');
-    expect(checkbox).toHaveAttribute('id', 'test');
-    expect(checkbox.disabled).toBe(false);
-    expect(checkbox).toBeChecked();
-    expect(screen.getByText('test').textContent).toBe('test');
-  });
-
-  test('disabled', () => {
-    render(<RadioButton htmlFor='test' text='test' disabled />);
-    const checkbox = screen.getByLabelText('test');
-    const span = screen.getByText('test');
-    expect(checkbox.disabled).toBe(true);
-    expect(span).toHaveStyle({
-      opacity: '0.5',
-    });
-  });
-
-  test('click RadioButton', () => {
-    let tableOption = { text: 'ForceDownload', checked: 0 };
-    render(
-      <RadioButton
-        htmlFor='test'
-        text='test'
-        value={1}
-        checked={tableOption.checked === 1}
-        onChange={testFun}
-      />
-    );
-    const checkbox = screen.getByLabelText('test');
-
-    fireEvent.click(checkbox);
-
-    expect(testFun).toBeCalledTimes(1);
-    expect(checkbox).not.toBeChecked();
-  });
-});