@cashub/ui-elv 1.0.0

package/form/FormItem.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FormItem = _styledComponents.default.div`
+  margin-bottom: var(--spacing);
+
+  ${_ref => {
+  let {
+    alignCenter
+  } = _ref;
+  return alignCenter && `
+    display: flex;
+    align-items: center;
+  `;
+}}
+`;
+var _default = exports.default = FormItem;

package/form/Input.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Input = _styledComponents.default.input`
+  display: block;
+  width: 100%;
+  height: 36px;
+  border: var(--border-width) solid var(--border-color);
+  padding: 10px var(--spacing-s);
+  border-radius: var(--border-radius-l);
+  background: transparent;
+  color: var(--font-on-background);
+  transition: 0.3s;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &:focus {
+    border: var(--border-width) solid var(--color-primary);
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  ${(0, _inputPlaceholder.default)`
+    color: var(--font-on-mute);
+  `}
+
+  ${_ref => {
+  let {
+    hidden
+  } = _ref;
+  return hidden && 'display: none;';
+}}
+
+  ${_ref2 => {
+  let {
+    borderRadiusS
+  } = _ref2;
+  return borderRadiusS && 'border-radius: var(--border-radius-s);';
+}}
+
+  ${_ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'text-align: center;';
+}}
+
+  ${_ref4 => {
+  let {
+    autoWidth
+  } = _ref4;
+  return autoWidth && 'width: auto;';
+}};
+`;
+var _default = exports.default = Input;

package/form/Label.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Label = _styledComponents.default.label`
+  display: inline-block;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  word-break: break-word;
+  white-space: pre-wrap;
+  margin-bottom: var(--spacing-xs);
+
+  ${_ref => {
+  let {
+    required
+  } = _ref;
+  return required && `&:after {
+      content: ' *';
+      color: var(--color-danger);
+    }
+  `;
+}}
+
+  ${_ref2 => {
+  let {
+    noMarginBottom
+  } = _ref2;
+  return noMarginBottom && 'margin-bottom: 0;';
+}}
+
+  ${_ref3 => {
+  let {
+    noBreakWord
+  } = _ref3;
+  return noBreakWord && 'word-break: keep-all;';
+}}
+
+  /* use float to make element align to right */
+  /* use text-align to make all text(multiple line) align to right */
+  ${_ref4 => {
+  let {
+    alignRight
+  } = _ref4;
+  return alignRight && `
+      text-align: right;
+      float: right;
+    `;
+}}
+
+  ${_ref5 => {
+  let {
+    disabled
+  } = _ref5;
+  return disabled && 'opacity: 0.5;';
+}}
+`;
+var _default = exports.default = Label;

package/form/MutedText.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MutedText = _styledComponents.default.span`
+  display: block;
+  font-size: var(--font-caption);
+  color: var(--font-on-mute);
+  text-align: ${_ref => {
+  let {
+    alignRight
+  } = _ref;
+  return alignRight ? 'right' : 'left';
+}};
+  margin-top: var(--spacing-xs);
+`;
+var _default = exports.default = MutedText;

package/form/PasswordInput.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _button = require("../button");
+var _bi = require("react-icons/bi");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PasswordInput = _ref => {
+  let {
+    ...props
+  } = _ref;
+  const [type, setType] = (0, _react.useState)('password');
+  const toggleType = () => {
+    setType(type === 'password' ? 'text' : 'password');
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+      ...props,
+      type: type
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.IconButton, {
+      size: "small",
+      onClick: toggleType,
+      children: [type === 'password' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bi.BiHide, {}), type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bi.BiShow, {})]
+    })]
+  });
+};
+const Container = _styledComponents.default.div`
+  position: relative;
+
+  ${_Input.default} {
+    padding-right: 40px;
+  }
+
+  ${_button.IconButton} {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0.5rem;
+  }
+`;
+var _default = exports.default = PasswordInput;

package/form/RadioButton.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _Label = _interopRequireDefault(require("./Label"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const RadioButton = _ref => {
+  let {
+    htmlFor,
+    value,
+    text,
+    disabled,
+    checked,
+    onChange,
+    noMarginBottom
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledLabel, {
+    htmlFor: htmlFor,
+    disabled: disabled,
+    noMarginBottom: noMarginBottom,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCheckbox, {
+      onChange: () => {
+        onChange(value);
+      },
+      checked: checked,
+      type: "checkbox",
+      id: htmlFor,
+      disabled: disabled
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Unchecked, {}), text]
+    })]
+  });
+};
+const StyledCheckbox = (0, _styledComponents.default)(_Input.default)`
+  display: none;
+
+  &:checked + span {
+    > div {
+      &:before {
+        display: block;
+      }
+    }
+  }
+`;
+const StyledLabel = (0, _styledComponents.default)(_Label.default)`
+  margin-right: var(--spacing-xs);
+
+  > span {
+    ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && (0, _styledComponents.css)`
+        opacity: 0.5;
+      `;
+}}
+    display: flex;
+    align-items: center;
+
+    > div {
+      margin-right: var(--spacing-xs);
+      border-radius: var(--border-radius-round);
+
+      width: 24px;
+      height: 24px;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  ${_ref3 => {
+  let {
+    noMarginBottom
+  } = _ref3;
+  return noMarginBottom && 'margin-bottom: 0;';
+}}
+`;
+const Unchecked = _styledComponents.default.div`
+  border: var(--border-width) solid var(--border-color);
+  position: relative;
+
+  &:before {
+    content: '';
+    background: var(--color-primary);
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    border-radius: var(--border-radius-round);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+var _default = exports.default = RadioButton;

package/form/SearchSelect.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _fa = require("react-icons/fa");
+var _react = require("react");
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _md = require("react-icons/md");
+var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SearchSelect = _ref => {
+  let {
+    keyword,
+    onSearch,
+    onSearchReset,
+    onToggleOptions,
+    options,
+    placeholder = 'Search',
+    setKeyword,
+    status = 'idle'
+  } = _ref;
+  const containerRef = (0, _react.useRef)();
+  const [showDropdown, setShowDropdown] = (0, _react.useState)(false);
+  const [dropdownWidth, setDropdownWidth] = (0, _react.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
+  (0, _react.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
+  (0, _react.useEffect)(() => {
+    setShowDropdown(options.length > 0);
+  }, [options.length]);
+
+  // align container width to dropdown
+  (0, _react.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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaSearch, {
+        onClick: () => {
+          if (keyword.trim()) {
+            handleSearch();
+          }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
+        type: "text",
+        placeholder: placeholder,
+        onChange: handleSearch,
+        onFocus: () => setShowDropdown(options.length > 0),
+        value: keyword
+      }), onSearchReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdClose, {
+        onClick: handleSearchReset,
+        style: {
+          visibility: status === 'empty' ? 'visible' : 'hidden'
+        }
+      })]
+    }), (showDropdown || status === 'empty') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dropdown, {
+      style: {
+        width: dropdownWidth
+      },
+      children: [onSearchReset && status === 'empty' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+          children: "Data Not Found"
+        })
+      }), status !== 'empty' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionList, {
+          children: options.map((option, index) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
+              onClick: () => onToggleOptions(index),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+                checked: option.checked,
+                htmlFor: option.text,
+                noMargin: true,
+                onChange: () => onToggleOptions(index),
+                text: option.text
+              })
+            }, index);
+          })
+        })
+      })]
+    })]
+  });
+};
+const Container = _styledComponents.default.div`
+  position: relative;
+  min-width: 160px;
+  max-width: 320px;
+`;
+const InputWrapper = _styledComponents.default.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 = _styledComponents.default.input`
+  background: transparent;
+  border: none;
+  font-size: var(--font-body1);
+  color: var(--font-on-background);
+  outline: none;
+  flex:1;
+  min-width: 0;
+
+  ${(0, _inputPlaceholder.default)`
+    color: var(--font-on-mute);
+  `}
+`;
+const Dropdown = _styledComponents.default.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.default}
+`;
+const OptionList = _styledComponents.default.div``;
+const Option = _styledComponents.default.div`
+  padding: 12px var(--spacing-s);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+`;
+const MessageWrapper = _styledComponents.default.div`
+  width: 100%;
+  text-align: center;
+`;
+const Message = _styledComponents.default.p`
+  margin: 0;
+  padding: 12px var(--spacing-s);
+`;
+var _default = exports.default = SearchSelect;

package/form/Searchbox.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _fa = require("react-icons/fa");
+var _md = require("react-icons/md");
+var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Searchbox = _ref => {
+  let {
+    onSearch,
+    autoFocus = false,
+    ...props
+  } = _ref;
+  const [keyword, setKeyword] = (0, _react.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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaSearch, {
+      onClick: () => {
+        handleSearch(keyword);
+      },
+      role: "button",
+      "aria-label": "search button"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
+      type: "text",
+      placeholder: "Search",
+      autocomplete: "false",
+      value: keyword,
+      onChange: event => setKeyword(event.target.value),
+      onKeyUp: handleKeyup,
+      autoFocus: autoFocus
+    }), keyword && /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdClose, {
+      onClick: handleClear,
+      role: "button",
+      "aria-label": "clear button"
+    })]
+  });
+};
+const Wrapper = _styledComponents.default.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);
+    }
+  }
+
+  ${_ref2 => {
+  let {
+    border
+  } = _ref2;
+  return border && 'border: var(--border-width) solid var(--border-color);';
+}}
+`;
+const Input = _styledComponents.default.input`
+  background: transparent;
+  border: none;
+  font-size: var(--font-body1);
+  color: var(--font-on-background);
+  outline: none;
+
+  ${(0, _inputPlaceholder.default)`
+    color: var(--font-on-mute);
+  `}
+`;
+var _default = exports.default = Searchbox;

package/form/Slider.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Slider = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RangeInput, {
+    ...props
+  });
+};
+const RangeInput = _styledComponents.default.input.attrs(() => ({
+  type: 'range'
+}))`
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  border-radius: var(--border-radius);
+  background: var(--color-grey);
+
+  ${_ref => {
+  let {
+    autoWidth
+  } = _ref;
+  return 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);
+  }
+`;
+var _default = exports.default = Slider;