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

package/src/form/SearchSelect.js

@@ -1,198 +0,0 @@
-import styled from 'styled-components';
-import { FaSearch } from 'react-icons/fa';
-import { useEffect, useRef, useState } from 'react';
-import Checkbox from './Checkbox';
-import { MdClose } from 'react-icons/md';
-import inputPlaceholder from '../styles/mixin/inputPlaceholder';
-import scrollbar from '../styles/mixin/scrollbar';
-
-const SearchSelect = ({
-  keyword,
-  onSearch,
-  onSearchReset,
-  onToggleOptions,
-  options,
-  placeholder = 'Search',
-  setKeyword,
-  status = 'idle',
-}) => {
-  const containerRef = useRef();
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [dropdownWidth, setDropdownWidth] = useState(0);
-
-  const handleSearch = (event) => {
-    if (event) {
-      onSearch(event.target.value);
-      setKeyword(event.target.value);
-    } else {
-      onSearch(keyword);
-    }
-  };
-
-  const handleSearchReset = () => {
-    setKeyword('');
-    onSearchReset();
-  };
-
-  // close dropdown when click outside of the component
-  useEffect(() => {
-    if (!containerRef.current || !showDropdown) return;
-
-    const handleClick = (event) => {
-      if (!containerRef.current?.contains(event.target)) {
-        setShowDropdown(false);
-      }
-    };
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, [showDropdown]);
-
-  // close dropdown when no options
-  useEffect(() => {
-    setShowDropdown(options.length > 0);
-  }, [options.length]);
-
-  // align container width to dropdown
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const observer = new ResizeObserver((entries) => {
-      const newWidth = entries[0].contentRect.width;
-      setDropdownWidth(newWidth);
-    });
-
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <Container ref={containerRef}>
-      <InputWrapper>
-        <FaSearch
-          onClick={() => {
-            if (keyword.trim()) {
-              handleSearch();
-            }
-          }}
-        />
-        <Input
-          type='text'
-          placeholder={placeholder}
-          onChange={handleSearch}
-          onFocus={() => setShowDropdown(options.length > 0)}
-          value={keyword}
-        />
-        {onSearchReset && (
-          <MdClose
-            onClick={handleSearchReset}
-            style={{ visibility: status === 'empty' ? 'visible' : 'hidden' }}
-          />
-        )}
-      </InputWrapper>
-      {(showDropdown || status === 'empty') && (
-        <Dropdown style={{ width: dropdownWidth }}>
-          {onSearchReset && status === 'empty' && (
-            <MessageWrapper>
-              <Message>Data Not Found</Message>
-            </MessageWrapper>
-          )}
-          {(status !== 'empty') && (
-            <>
-              <OptionList>
-                {options.map((option, index) => {
-                  return (
-                    <Option
-                      key={index}
-                      onClick={() => onToggleOptions(index)}
-                    >
-                      <Checkbox
-                        checked={option.checked}
-                        htmlFor={option.text}
-                        noMargin
-                        onChange={() => onToggleOptions(index)}
-                        text={option.text}
-                      />
-                    </Option>
-                  );
-                })}
-              </OptionList>
-            </>
-          )}
-        </Dropdown>
-      )}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  position: relative;
-  min-width: 160px;
-  max-width: 320px;
-`;
-
-const InputWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  height: 36px;
-  background: var(--color-background2);
-  border-radius: var(--border-radius-l);
-  padding: var(--spacing-s);
-  margin: 0;
-  gap: var(--spacing-xs);
-
-  > svg {
-    color: var(--font-on-mute);
-  }
-`;
-
-const Input = styled.input`
-  background: transparent;
-  border: none;
-  font-size: var(--font-body1);
-  color: var(--font-on-background);
-  outline: none;
-  flex:1;
-  min-width: 0;
-
-  ${inputPlaceholder`
-    color: var(--font-on-mute);
-  `}
-`;
-
-const Dropdown = styled.div`
-  position: absolute;
-  inset: 44px auto auto 0px;
-  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);
-  z-index: 1;
-  padding: var(--spacing-xs) 0;
-  overflow-y: auto;
-  max-height: min(320px, ((50vh - 36px) - 20px) - 36px);
-  ${scrollbar}
-`;
-
-const OptionList = styled.div``;
-
-const Option = styled.div`
-  padding: 12px var(--spacing-s);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-hover);
-  }
-`;
-
-const MessageWrapper = styled.div`
-  width: 100%;
-  text-align: center;
-`;
-
-const Message = styled.p`
-  margin: 0;
-  padding: 12px var(--spacing-s);
-`;
-
-export default SearchSelect;

package/src/form/Searchbox.js

@@ -1,95 +0,0 @@
-import { useState } from 'react';
-import styled from 'styled-components';
-import { FaSearch } from 'react-icons/fa';
-import { MdClose } from 'react-icons/md';
-import inputPlaceholder from '../styles/mixin/inputPlaceholder';
-
-const Searchbox = ({ onSearch, autoFocus = false, ...props }) => {
-  const [keyword, setKeyword] = useState('');
-
-  const handleSearch = (keyword) => {
-    if (onSearch) onSearch(keyword);
-  };
-
-  const handleKeyup = (event) => {
-    if (event.keyCode === 108 || event.keyCode === 13) {
-      handleSearch(keyword);
-    }
-  };
-
-  const handleClear = () => {
-    setKeyword('');
-    handleSearch('');
-  };
-
-  return (
-    <Wrapper {...props}>
-      <FaSearch
-        onClick={() => {
-          handleSearch(keyword);
-        }}
-        role='button'
-        aria-label='search button'
-      />
-      <Input
-        type='text'
-        placeholder='Search'
-        autocomplete='false'
-        value={keyword}
-        onChange={(event) => setKeyword(event.target.value)}
-        onKeyUp={handleKeyup}
-        autoFocus={autoFocus}
-      />
-
-      {keyword && (
-        <MdClose
-          onClick={handleClear}
-          role='button'
-          aria-label='clear button'
-        />
-      )}
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 36px;
-  background: var(--color-background1);
-  border-radius: var(--border-radius-l);
-  padding: 0 calc(var(--spacing-s) + var(--font-body1) + var(--spacing-xs)) 0
-    var(--spacing-s);
-
-  > svg {
-    font-size: var(--font-body1);
-    color: var(--font-on-mute);
-
-    &:first-child {
-      margin-right: var(--spacing-xs);
-    }
-
-    &:last-child {
-      position: absolute;
-      right: var(--spacing-s);
-    }
-  }
-
-  ${({ border }) =>
-    border && 'border: var(--border-width) solid var(--border-color);'}
-`;
-
-const Input = styled.input`
-  background: transparent;
-  border: none;
-  font-size: var(--font-body1);
-  color: var(--font-on-background);
-  outline: none;
-
-  ${inputPlaceholder`
-    color: var(--font-on-mute);
-  `}
-`;
-
-export default Searchbox;

package/src/form/Slider.js

@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-
-const Slider = (props) => {
-  return <RangeInput {...props} />;
-};
-
-const RangeInput = styled.input.attrs(() => ({
-  type: 'range',
-}))`
-  appearance: none;
-  width: 100%;
-  height: 8px;
-  border-radius: var(--border-radius);
-  background: var(--color-grey);
-
-  ${({ autoWidth }) => autoWidth && 'width: auto;'};
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 16px;
-    height: 16px;
-    border-radius: var(--border-radius-round);
-    background: var(--color-primary);
-  }
-
-  &::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
-    border-radius: var(--border-radius-round);
-    background: var(--color-primary);
-  }
-`;
-
-export default Slider;

package/src/form/SwitchButton.js

@@ -1,86 +0,0 @@
-import styled, { css } from 'styled-components';
-
-const SwitchButton = ({
-  htmlFor,
-  text,
-  disabled,
-  checked = false,
-  onChange,
-}) => {
-  return (
-    <Label htmlFor={htmlFor} disabled={disabled}>
-      <Checkbox
-        onChange={() => {
-          onChange(checked ? 0 : 1);
-        }}
-        checked={checked}
-        type='checkbox'
-        id={htmlFor}
-        disabled={disabled}
-      />
-      <Switch>
-        <SwitchTrack checked={checked} />
-        <SwitchThumb checked={checked} />
-        {text}
-      </Switch>
-    </Label>
-  );
-};
-
-const Label = styled.label`
-  display: inline-block;
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `}
-`;
-
-const Checkbox = styled.input`
-  display: none;
-`;
-
-const Switch = styled.span`
-  color: var(--font-on-background);
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      opacity: 0.5;
-    `}
-`;
-
-const SwitchTrack = styled.div`
-  position: relative;
-  width: 32px;
-  height: 16px;
-  border-radius: var(--border-radius);
-  background: ${({ checked }) => {
-    return !checked ? 'var(--color-grey)' : 'var(--color-primary)';
-  }};
-  opacity: 0.5;
-  margin-right: calc(var(--spacing-xs) + 12px);
-  left: ${({ checked }) => (checked ? '0' : '12px')};
-`;
-
-const SwitchThumb = styled.span`
-  width: 24px;
-  height: 24px;
-  background: var(--color-grey);
-  border-radius: var(--border-radius-round);
-  position: absolute;
-  transition: 0.3s;
-
-  ${({ checked }) => {
-    return !checked
-      ? 'left: 0;'
-      : 'left: 20px;  background: var(--color-primary);';
-  }}
-`;
-
-export default SwitchButton;

package/src/form/Textarea.js

@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-import inputPlaceholder from '../styles/mixin/inputPlaceholder';
-import scrollbar from '../styles/mixin/scrollbar';
-
-const Textarea = styled.textarea`
-  display: block;
-  width: 100%;
-  border: var(--border-width) solid var(--border-color);
-  padding: 10px var(--spacing-s);
-  border-radius: var(--border-radius);
-  background: transparent;
-  color: var(--font-on-background);
-  transition: 0.3s;
-  line-height: 1.5;
-
-  /* disable resize because currently cannot fully control the resizer element */
-  resize: none;
-
-  ${scrollbar}
-
-  &:focus {
-    border: var(--border-width) solid var(--color-primary);
-    outline: none;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  ${inputPlaceholder`
-    color: var(--font-on-mute);
-  `}
-`;
-
-export default Textarea;

package/src/form/TreeView.js

@@ -1,77 +0,0 @@
-import styled from 'styled-components';
-import Label from './Label';
-import Checkbox from './Checkbox';
-import Input from './Input';
-import { FlexContainer } from '../container';
-
-const TreeView = ({ data, onChange, onBlur }) => {
-  const renderList = (data, parentPath = []) => {
-    return (
-      <UnorderedList>
-        {data.map((item) => {
-          const id = `${parentPath.join('')}${item.id}`.replace(/\s/g, '');
-          const currentPath = parentPath.concat(item.id);
-
-          return (
-            <li key={item.id}>
-              {item.type === 'checkbox' && (
-                <Checkbox
-                  noMargin
-                  htmlFor={id}
-                  checked={item.value}
-                  text={item.text}
-                  onChange={(event) => {
-                    onChange(event, currentPath);
-                  }}
-                  disabled={item.disabled}
-                />
-              )}
-
-              {item.type === 'text' && (
-                <FlexContainer alignCenter>
-                  <Label noMarginBottom htmlFor={id}>
-                    {item.text}
-                  </Label>
-                  &nbsp;
-                  <Input
-                    autoWidth
-                    type='text'
-                    id={id}
-                    value={item.value}
-                    onChange={(event) => {
-                      onChange(event, currentPath);
-                    }}
-                    onBlur={(event) => {
-                      onBlur(event, currentPath);
-                    }}
-                    disabled={item.disabled}
-                  />
-                </FlexContainer>
-              )}
-
-              {item.children?.length > 0
-                ? renderList(item.children, parentPath.concat(item.id))
-                : null}
-            </li>
-          );
-        })}
-      </UnorderedList>
-    );
-  };
-
-  return renderList(data);
-};
-
-const UnorderedList = styled.ul`
-  color: var(--font-on-background);
-
-  ul {
-    margin-left: var(--spacing-s);
-  }
-
-  li {
-    margin-top: var(--spacing-xs);
-  }
-`;
-
-export default TreeView;

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

@@ -1,87 +0,0 @@
-import Checkbox from '../Checkbox';
-import { useState, useEffect } from 'react';
-
-const metadata = {
-  title: 'Form/Checkbox',
-  component: Checkbox,
-  decorators: [
-    (Story) => (
-      <div style={{ border: '2px solid #000' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {
-    text: {
-      description: 'Checkbox text',
-    },
-    checked: {
-      description: 'choice checked or unchecked ',
-    },
-    indeterminate: {
-      description:
-        'Indicates the checked status is indeterminate (mixed), meaning it is neither checked nor unchecked.',
-    },
-    noMargin: {
-      description: 'no margin',
-    },
-    fontSizeBig: {
-      description: 'font size',
-    },
-    variant: {
-      description: 'checkbox style variant',
-      control: {
-        type: 'select',
-      },
-      options: ['square', 'circle'],
-    },
-    onChange: {
-      description: 'onChange event',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    setChecked(args.checked);
-  }, [args.checked]);
-
-  return (
-    <Checkbox
-      {...args}
-      onChange={() => {
-        setChecked(!checked);
-        onChange();
-      }}
-      checked={checked}
-    />
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  text: 'Email',
-  disabled: false,
-  checked: false,
-  indeterminate: false,
-  noMargin: false,
-  fontSizeBig: false,
-  variant: 'square',
-};
-
-const Circle = Template.bind({});
-Circle.args = {
-  text: 'Email',
-  disabled: false,
-  checked: false,
-  indeterminate: false,
-  noMargin: false,
-  fontSizeBig: false,
-  variant: 'circle',
-};
-export default metadata;
-
-export { Default, Circle };

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

@@ -1,33 +0,0 @@
-import FormItem from '../FormItem';
-import Label from '../Label';
-import Textarea from '../Textarea';
-
-const metadata = {
-  title: 'Form/FormItem',
-  component: FormItem,
-  argTypes: {
-    alignCenter: {
-      description: 'Enables Flexbox row layout with vertical alignment.',
-    },
-  },
-};
-
-// fix:Stories for multiple components(adjust import Button.stories.js)
-// const Template = (args) => (
-//   <FormItem {...args}>
-//     <Label htmlFor="description">Description</Label>
-//     <Textarea id="description" rows="4" value="Content" maxLength="512" />
-//   </FormItem>
-// );
-// export const Default = Template.bind({});
-// Default.args = {};
-
-const Default = () => (
-  <FormItem>
-    <Label htmlFor='description'>Description</Label>
-    <Textarea id='description' rows='4' value='Content' maxLength='512' />
-  </FormItem>
-);
-
-export default metadata;
-export { Default };

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

@@ -1,30 +0,0 @@
-import Input from '../Input';
-
-const metadata = {
-  title: 'Form/Input',
-  component: Input,
-  argTypes: {
-    borderRadiusS: {
-      description: 'border radius size',
-    },
-    alignCenter: {
-      description: 'text align center',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <Input {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Please fill up content',
-  disabled: false,
-  hidden: false,
-  borderRadiusS: false,
-  alignCenter: false,
-};
-
-export default metadata;
-export { Default };