@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/form/SearchSelect.js

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

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

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

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

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

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

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

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

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