gdx-ui 1.1.0

package/components/row/Row.js

@@ -0,0 +1,77 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowItem = exports.Row = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
+var RowContext = /*#__PURE__*/(0, _react.createContext)(null);
+var Row = exports.Row = function Row(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 1 : _ref$columns,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$valign = _ref.valign,
+    valign = _ref$valign === void 0 ? 'top' : _ref$valign,
+    _ref$collapsed = _ref.collapsed,
+    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+    _ref$responsive = _ref.responsive,
+    responsive = _ref$responsive === void 0 ? true : _ref$responsive;
+  var transVAling = function transVAling(valign) {
+    if (valign === 'top') return 'flex-start';
+    // else if (valign === 'center') return 'center';
+    else if (valign === 'bottom') return 'flex-end';else valign;
+  };
+  var settings = {
+    columns: columns
+  };
+  var justifyContent = align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : align;
+  var alignItems = transVAling(valign);
+  return /*#__PURE__*/_react["default"].createElement(RowContext.Provider, {
+    value: {
+      settings: settings
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "row ".concat(collapsed ? 'collapesed-bottom' : '', " ").concat(responsive ? 'row-responsive' : '', " ").concat(className ? className : ''),
+    style: {
+      justifyContent: justifyContent,
+      alignItems: alignItems
+    }
+  }, children));
+};
+var RowItem = exports.RowItem = function RowItem(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    _ref2$grow = _ref2.grow,
+    grow = _ref2$grow === void 0 ? 0 : _ref2$grow,
+    _ref2$hover = _ref2.hover,
+    hover = _ref2$hover === void 0 ? false : _ref2$hover;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "row-item ".concat(hover ? 'hover' : '', " ").concat(className ? className : ''),
+    style: {
+      flexGrow: grow
+    }
+  }, children);
+};
+Row.propTypes = {
+  children: _propTypes["default"].any,
+  className: _propTypes["default"].string,
+  columns: _propTypes["default"].number,
+  align: _propTypes["default"].oneOf(['left', 'center', 'right']),
+  valign: _propTypes["default"].oneOf(['top', 'center', 'bottom', 'strech', 'baseline']),
+  collapsed: _propTypes["default"].bool,
+  responsive: _propTypes["default"].bool
+};
+RowItem.propTypes = {
+  children: _propTypes["default"].any,
+  className: _propTypes["default"].string,
+  grow: _propTypes["default"].number,
+  hover: _propTypes["default"].bool
+};

package/components/row/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Row = require("./Row");
+Object.keys(_Row).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Row[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Row[key];
+    }
+  });
+});

package/components/snackbar/Snackbar.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Snackbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _CircleButton = require("../button/CircleButton");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Snackbar = exports.Snackbar = function Snackbar(_ref) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "snackbar-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "snackbar snackbar-".concat(color)
+  }, children, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "snackbar-close"
+  }, /*#__PURE__*/_react["default"].createElement(_CircleButton.CircleButton, {
+    color: "white",
+    onClick: onClose
+  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTimes
+  }))))));
+};
+Snackbar.propTypes = {
+  children: _propTypes["default"].any,
+  color: _propTypes["default"].oneOf(['info', 'primary', 'alert', 'success']),
+  onClose: _propTypes["default"].func
+};

package/components/snackbar/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Snackbar = require("./Snackbar");
+Object.keys(_Snackbar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Snackbar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Snackbar[key];
+    }
+  });
+});

package/components/table/Table.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableRowSkeleton = exports.TableRow = exports.TableHeader = exports.TableFooter = exports.TableData = exports.TableBody = exports.Table = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _utils = require("../../utils/utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Table = exports.Table = function Table(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? true : _ref$expanded,
+    _ref$striped = _ref.striped,
+    striped = _ref$striped === void 0 ? false : _ref$striped,
+    _ref$hover = _ref.hover,
+    hover = _ref$hover === void 0 ? false : _ref$hover;
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: "table ".concat(expanded ? "expanded" : '', " \n      ").concat(hover ? "table-hover" : '', "\n      ").concat(bordered ? "bordered" : '', "\n      ").concat(striped ? "table-striped" : '', "\n      ").concat(className ? className : '')
+  }, children);
+};
+/**
+ * 
+ * @param {headers} data [{id, sortable, order, text, width}] 
+ * @returns 
+ */
+var TableHeader = exports.TableHeader = function TableHeader(_ref2) {
+  var headers = _ref2.headers;
+  if (!headers) {
+    throw new Error('Headers are required');
+  }
+  var maxWidth = headers[0].width && !isNaN(headers[0].width) && headers.reduce(function (s, h) {
+    return s + h.width;
+  }, 0);
+  return /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", {
+    key: (0, _utils.generateId)()
+  }, headers.map(function (_ref3) {
+    var id = _ref3.id,
+      text = _ref3.text,
+      sortable = _ref3.sortable,
+      order = _ref3.order,
+      width = _ref3.width,
+      align = _ref3.align;
+    return /*#__PURE__*/_react["default"].createElement("th", {
+      key: id ? id : (0, _utils.generateId)(),
+      className: align,
+      width: isNaN(width) ? width : "".concat(100 * width / maxWidth, "%")
+    }, sortable && (!order ? /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faArrowsUpDown
+    }) : /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: order === 'ASC' ? _freeSolidSvgIcons.faArrowUp : _freeSolidSvgIcons.faArrowDown
+    })), " ", text);
+  })));
+};
+var TableFooter = exports.TableFooter = function TableFooter(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/_react["default"].createElement("tfoot", null, children);
+};
+var TableBody = exports.TableBody = function TableBody(_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/_react["default"].createElement("tbody", null, children);
+};
+var TableRow = exports.TableRow = function TableRow(_ref6) {
+  var children = _ref6.children,
+    id = _ref6.id,
+    color = _ref6.color;
+  return /*#__PURE__*/_react["default"].createElement("tr", {
+    key: id ? id : (0, _utils.generateId)(),
+    className: "".concat(color && "highlight-".concat(color))
+  }, children);
+};
+var TableData = exports.TableData = function TableData(_ref7) {
+  var children = _ref7.children,
+    id = _ref7.id,
+    className = _ref7.className,
+    _ref7$align = _ref7.align,
+    align = _ref7$align === void 0 ? 'left' : _ref7$align;
+  return /*#__PURE__*/_react["default"].createElement("td", {
+    key: id ? id : (0, _utils.generateId)(),
+    className: "".concat(align, " ").concat(className ? className : '')
+  }, children);
+};
+var TableRowSkeleton = exports.TableRowSkeleton = function TableRowSkeleton(_ref8) {
+  var id = _ref8.id,
+    _ref8$colspan = _ref8.colspan,
+    colspan = _ref8$colspan === void 0 ? 100 : _ref8$colspan;
+  return /*#__PURE__*/_react["default"].createElement("tr", {
+    key: id ? id : (0, _utils.generateId)()
+  }, /*#__PURE__*/_react["default"].createElement("td", {
+    colSpan: colspan
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "skeleton blink-soft"
+  })));
+};
+Table.propTypes = {
+  children: _propTypes["default"].any,
+  className: _propTypes["default"].string,
+  bordered: _propTypes["default"].bool,
+  expanded: _propTypes["default"].bool,
+  striped: _propTypes["default"].bool,
+  hover: _propTypes["default"].bool
+};
+TableHeader.propTypes = {
+  headers: _propTypes["default"].array
+};
+TableBody.propTypes = {
+  children: _propTypes["default"].any
+};
+TableFooter.propTypes = {
+  children: _propTypes["default"].any
+};
+TableRow.propTypes = {
+  children: _propTypes["default"].any,
+  id: _propTypes["default"].string,
+  color: _propTypes["default"].oneOf([false, 'alert', 'success'])
+};
+TableData.propTypes = {
+  children: _propTypes["default"].any,
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  align: _propTypes["default"].oneOf(['left', 'center', 'right'])
+};
+TableRowSkeleton.propTypes = {
+  id: _propTypes["default"].string,
+  colspan: _propTypes["default"].number
+};

package/components/table/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Table = require("./Table");
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Table[key];
+    }
+  });
+});

package/components/tabs/Tabs.js

@@ -0,0 +1,82 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsWrapper = exports.Tabs = exports.TabContent = exports.Tab = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var TabsContext = /*#__PURE__*/(0, _react.createContext)(null);
+var TabsWrapper = exports.TabsWrapper = function TabsWrapper(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  return /*#__PURE__*/_react["default"].createElement(TabsContext.Provider, {
+    value: {
+      active: active,
+      setActive: setActive
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tabs-widget"
+  }, children));
+};
+var Tabs = exports.Tabs = function Tabs(_ref2) {
+  var children = _ref2.children,
+    active = _ref2.active;
+  var _useContext = (0, _react.useContext)(TabsContext),
+    setActive = _useContext.setActive;
+  (0, _react.useEffect)(function () {
+    active && setActive(active);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tabs"
+  }, children);
+};
+var Tab = exports.Tab = function Tab(_ref3) {
+  var children = _ref3.children,
+    control = _ref3.control,
+    current = _ref3.active,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+  var _useContext2 = (0, _react.useContext)(TabsContext),
+    active = _useContext2.active,
+    setActive = _useContext2.setActive;
+  var onClickTab = function onClickTab(control) {
+    setActive(control);
+  };
+  return /*#__PURE__*/_react["default"].createElement("button", {
+    disabled: disabled,
+    className: "tab ".concat(active === control ? 'active' : ''),
+    onClick: function onClick() {
+      return onClickTab(control);
+    }
+  }, children);
+};
+var TabContent = exports.TabContent = function TabContent(_ref4) {
+  var children = _ref4.children,
+    id = _ref4.id;
+  var _useContext3 = (0, _react.useContext)(TabsContext),
+    active = _useContext3.active;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: id,
+    className: "tab-content ".concat(active == id ? '' : 'hidden')
+  }, children);
+};
+Tab.propTypes = {
+  children: _propTypes["default"].any
+};
+Tabs.propTypes = {
+  children: _propTypes["default"].any
+};

package/components/tabs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Tabs = require("./Tabs");
+Object.keys(_Tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tabs[key];
+    }
+  });
+});

package/components/tree/Tree.js

@@ -0,0 +1,64 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItem = exports.Tree = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
+var _button = require("../button");
+var _utils = require("../../utils/utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var Tree = exports.Tree = function Tree(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "tree ".concat(className ? className : '')
+  }, children));
+};
+var TreeItem = exports.TreeItem = function TreeItem(_ref2) {
+  var children = _ref2.children,
+    child = _ref2.child,
+    onClick = _ref2.onClick;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    clicked = _useState2[0],
+    setClicked = _useState2[1];
+  var onClickButton = function onClickButton(e) {
+    onClick && onClick(e);
+    setClicked(!clicked);
+  };
+  return /*#__PURE__*/_react["default"].createElement("li", {
+    key: (0, _utils.generateId)(),
+    className: "tree-item"
+  }, children && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tree-button"
+  }, /*#__PURE__*/_react["default"].createElement(_button.CircleButton, {
+    color: "solid",
+    onClick: onClickButton
+  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: clicked ? _freeRegularSvgIcons.faMinusSquare : _freeRegularSvgIcons.faPlusSquare
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tree-children"
+  }, child), children && clicked && children);
+};
+Tree.propTypes = {
+  children: _propTypes["default"].any,
+  className: _propTypes["default"].string
+};
+TreeItem.propTypes = {
+  children: _propTypes["default"].any,
+  child: _propTypes["default"].any,
+  onClick: _propTypes["default"].func
+};

package/components/util/Alert.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Alert = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dialog = require("../dialog");
+var _row = require("../row");
+var _button = require("../button");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Alert = exports.Alert = function Alert(_ref) {
+  var children = _ref.children,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Alerta' : _ref$title,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'alert' : _ref$color,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/_react["default"].createElement(_dialog.Dialog, {
+    color: color,
+    onClose: onClose
+  }, /*#__PURE__*/_react["default"].createElement(_dialog.DialogTitle, null, title), /*#__PURE__*/_react["default"].createElement(_dialog.DialogContent, null, children), /*#__PURE__*/_react["default"].createElement(_dialog.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_row.Row, {
+    align: "right"
+  }, /*#__PURE__*/_react["default"].createElement(_row.RowItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, {
+    onClick: onClose,
+    color: color ? color : 'primary'
+  }, "Close")))));
+};
+Alert.propTypes = {
+  children: _propTypes["default"].any,
+  title: _propTypes["default"].string,
+  color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'success']),
+  onClose: _propTypes["default"].func
+};

package/components/util/List.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = exports.List = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var List = exports.List = function List(_ref) {
+  var children = _ref.children,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "clear-list ".concat(inline ? 'inline-list' : '')
+  }, /*#__PURE__*/_react["default"].createElement("ul", null, children));
+};
+var ListItem = exports.ListItem = function ListItem(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react["default"].createElement("li", null, children);
+};
+List.propTypes = {
+  children: _propTypes["default"].any.isRequired,
+  inline: _propTypes["default"].bool
+};
+ListItem.propTypes = {
+  children: _propTypes["default"].any.isRequired
+};

package/components/util/Loader.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loader = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Loader = exports.Loader = function Loader() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loader"
+  }, /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null), /*#__PURE__*/_react["default"].createElement("div", null));
+};

package/components/util/Locker.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Locker = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Locker = exports.Locker = function Locker() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "component-locker"
+  });
+};

package/components/util/Note.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Note = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Note = exports.Note = function Note(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "gray small ".concat(className ? className : '')
+  }, children);
+};
+Note.propTypes = {
+  children: _propTypes["default"].any,
+  className: _propTypes["default"].string
+};

package/components/util/Separator.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Separator = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Separator = exports.Separator = function Separator() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "margin-bottom border-bottom"
+  });
+};
+Separator.propTypes = {
+  children: _propTypes["default"].any
+};

package/components/util/Skeleton.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Skeleton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Skeleton = exports.Skeleton = function Skeleton(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'unset' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'unset' : _ref$height;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "skeleton blink-soft",
+    style: {
+      width: width,
+      height: height
+    }
+  });
+};
+Skeleton.propTypes = {
+  width: _propTypes["default"].number,
+  height: _propTypes["default"].number
+};

package/components/util/Text.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/**
+ * @param {type} text type define the className 
+ * @returns 
+ */
+var Text = exports.Text = function Text(_ref) {
+  var variant = _ref.variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'normal' : _ref$size,
+    children = _ref.children;
+  var Tag = variant || 'p';
+  return /*#__PURE__*/_react["default"].createElement(Tag, {
+    className: size
+  }, children);
+};
+Text.propTypes = {
+  variant: _propTypes["default"].string,
+  size: _propTypes["default"].oneOf(['small', 'normal', 'large']),
+  children: _propTypes["default"].any
+};