@cashub/ui 0.21.1 → 0.22.1

package/container/FlexContainer.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const FlexContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  ", ";\n\n  ", ";\n"])), _ref => {
+const FlexContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), _ref => {
   let {
     marginBottom
   } = _ref;
@@ -18,5 +18,10 @@ const FlexContainer = _styledComponents.default.div(_templateObject || (_templat
     wrap
   } = _ref2;
   return wrap && 'flex-wrap: wrap';
+}, _ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'align-items: center;';
 });
 var _default = exports.default = FlexContainer;

package/form/Input.js

@@ -9,7 +9,7 @@ var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPla
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const Input = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: 36px;\n  border: var(--border-width) solid var(--border-color);\n  padding: 10px var(--spacing-s);\n  border-radius: var(--border-radius-l);\n  background: transparent;\n  color: var(--font-on-background);\n  transition: 0.3s;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &:focus {\n    border: var(--border-width) solid var(--color-primary);\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), (0, _inputPlaceholder.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))), _ref => {
+const Input = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: 36px;\n  border: var(--border-width) solid var(--border-color);\n  padding: 10px var(--spacing-s);\n  border-radius: var(--border-radius-l);\n  background: transparent;\n  color: var(--font-on-background);\n  transition: 0.3s;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &:focus {\n    border: var(--border-width) solid var(--color-primary);\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n"])), (0, _inputPlaceholder.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))), _ref => {
   let {
     hidden
   } = _ref;
@@ -24,5 +24,10 @@ const Input = _styledComponents.default.input(_templateObject || (_templateObjec
     alignCenter
   } = _ref3;
   return alignCenter && 'text-align: center;';
+}, _ref4 => {
+  let {
+    autoWidth
+  } = _ref4;
+  return autoWidth && 'width: auto;';
 });
 var _default = exports.default = Input;

package/form/Label.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  margin-bottom: var(--spacing-xs);\n\n  ", "\n\n  ", "\n"])), _ref => {
+const Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  word-break: break-word;\n  white-space: pre-wrap;\n  margin-bottom: var(--spacing-xs);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* use float to make element align to right */\n  /* use text-align to make all text(multiple line) align to right */\n  ", "\n"])), _ref => {
   let {
     required
   } = _ref;
@@ -18,5 +18,15 @@ const Label = _styledComponents.default.label(_templateObject || (_templateObjec
     noMarginBottom
   } = _ref2;
   return noMarginBottom && 'margin-bottom: 0;';
+}, _ref3 => {
+  let {
+    noBreakWord
+  } = _ref3;
+  return noBreakWord && 'word-break: keep-all;';
+}, _ref4 => {
+  let {
+    alignRight
+  } = _ref4;
+  return alignRight && "\n      text-align: right;\n      float: right;\n    ";
 });
 var _default = exports.default = Label;

package/form/Slider.js

@@ -4,11 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const Slider = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-    type: "range",
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RangeInput, {
     ...props
   });
 };
+const RangeInput = _styledComponents.default.input.attrs(() => ({
+  type: 'range'
+}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--border-radius);\n  background: var(--color-grey);\n\n  ", ";\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    border-radius: var(--border-radius-round);\n    background: var(--color-primary);\n  }\n\n  &::-moz-range-thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: var(--border-radius-round);\n    background: var(--color-primary);\n  }\n"])), _ref => {
+  let {
+    autoWidth
+  } = _ref;
+  return autoWidth && 'width: auto;';
+});
 var _default = exports.default = Slider;

package/form/TreeView.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Label = _interopRequireDefault(require("./Label"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _container = require("../container");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const TreeView = _ref => {
+  let {
+    data,
+    onChange,
+    onBlur
+  } = _ref;
+  const renderList = function (data) {
+    let parentPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(UnorderedList, {
+      children: data.map(item => {
+        var _item$children;
+        const id = "".concat(parentPath.join('')).concat(item.id).replace(/\s/g, '');
+        const currentPath = parentPath.concat(item.id);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          children: [item.type === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+            noMargin: true,
+            htmlFor: id,
+            checked: item.value,
+            text: item.text,
+            onChange: event => {
+              onChange(event, currentPath);
+            },
+            disabled: item.disabled
+          }), item.type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_container.FlexContainer, {
+            alignCenter: true,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
+              noMarginBottom: true,
+              htmlFor: id,
+              children: item.text
+            }), "\xA0", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+              autoWidth: true,
+              type: "text",
+              id: id,
+              value: item.value,
+              onChange: event => {
+                onChange(event, currentPath);
+              },
+              onBlur: onBlur,
+              disabled: item.disabled
+            })]
+          }), ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0 ? renderList(item.children, parentPath.concat(item.id)) : null]
+        }, item.id);
+      })
+    });
+  };
+  return renderList(data);
+};
+const UnorderedList = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n\n  ul {\n    margin-left: var(--spacing-s);\n  }\n\n  li {\n    margin-top: var(--spacing-xs);\n  }\n"])));
+var _default = exports.default = TreeView;

package/form/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "Searchbox", {
     return _Searchbox.default;
   }
 });
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () {
+    return _Slider.default;
+  }
+});
 Object.defineProperty(exports, "SwitchButton", {
   enumerable: true,
   get: function () {
@@ -57,6 +63,12 @@ Object.defineProperty(exports, "Textarea", {
     return _Textarea.default;
   }
 });
+Object.defineProperty(exports, "TreeView", {
+  enumerable: true,
+  get: function () {
+    return _TreeView.default;
+  }
+});
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _FormItem = _interopRequireDefault(require("./FormItem"));
 var _Input = _interopRequireDefault(require("./Input"));
@@ -64,6 +76,8 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _MutedText = _interopRequireDefault(require("./MutedText"));
 var _RadioButton = _interopRequireDefault(require("./RadioButton"));
 var _Searchbox = _interopRequireDefault(require("./Searchbox"));
+var _Slider = _interopRequireDefault(require("./Slider"));
 var _SwitchButton = _interopRequireDefault(require("./SwitchButton"));
 var _Textarea = _interopRequireDefault(require("./Textarea"));
+var _TreeView = _interopRequireDefault(require("./TreeView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.21.1",
+  "version": "0.22.1",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/styles/GlobalStyle.js

@@ -8,7 +8,7 @@ var _styledComponents = require("styled-components");
 require("../assets/css/global.css");
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    --color-white: ", ";\n    --color-dark: ", ";\n    --color-grey: ", ";\n    --color-primary: ", ";\n    --color-success: ", ";\n    --color-warning: ", ";\n    --color-danger: ", ";\n    --color-hover: ", ";\n    --color-active: ", ";\n    --color-scroll-bar: ", ";\n    --color-background1: ", ";\n    --color-background2: ", ";\n    --color-background3: ", ";\n    --color-backdrop: ", ";\n\n    --font-h1: ", ";\n    --font-h2: ", ";\n    --font-h3: ", ";\n    --font-body1: ", ";\n    --font-body2: ", ";\n    --font-button: ", ";\n    --font-caption: ", ";\n    --font-family: ", ";\n    --font-normal: ", ";\n    --font-bold: ", ";\n    --font-on-primary: ", ";\n    --font-on-success: ", ";\n    --font-on-warning: ", ";\n    --font-on-danger: ", ";\n    --font-on-background: ", ";\n    --font-on-mute: ", ";\n\n    --box-shadow: ", ";\n    --border-color: ", ";\n    --border-width: ", ";\n    --border-radius-s: ", ";\n    --border-radius: ", ";\n    --border-radius-l: ", ";\n    --border-radius-round: ", ";\n\n    --spacing-xs: ", ";\n    --spacing-s: ", ";\n    --spacing: ", ";\n    --spacing-l: ", ";\n\n    background : ", ";\n  }\n"])), _ref => {
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    --color-white: ", ";\n    --color-dark: ", ";\n    --color-grey: ", ";\n    --color-primary: ", ";\n    --color-success: ", ";\n    --color-warning: ", ";\n    --color-danger: ", ";\n    --color-hover: ", ";\n    --color-active: ", ";\n    --color-scroll-bar: ", ";\n    --color-background1: ", ";\n    --color-background2: ", ";\n    --color-background3: ", ";\n    --color-backdrop: ", ";\n\n    --font-h1: ", ";\n    --font-h2: ", ";\n    --font-h3: ", ";\n    --font-body1: ", ";\n    --font-body2: ", ";\n    --font-button: ", ";\n    --font-caption: ", ";\n    --font-family: ", ";\n    --font-normal: ", ";\n    --font-bold: ", ";\n    --font-on-primary: ", ";\n    --font-on-success: ", ";\n    --font-on-warning: ", ";\n    --font-on-danger: ", ";\n    --font-on-background: ", ";\n    --font-on-mute: ", ";\n\n    --box-shadow: ", ";\n    --border-color: ", ";\n    --border-width: ", ";\n    --border-radius-s: ", ";\n    --border-radius: ", ";\n    --border-radius-l: ", ";\n    --border-radius-round: ", ";\n\n    --spacing-xs: ", ";\n    --spacing-s: ", ";\n    --spacing: ", ";\n    --spacing-l: ", ";\n\n    background : ", ";\n  }\n\n  .margin-bottom-s {\n    margin-bottom: var(--spacing-s);\n  }\n"])), _ref => {
   let {
     theme
   } = _ref;