@stokr/components-library 2.1.2-beta.2 → 2.1.3

package/dist/components/2FA/disable-2fa-flow.js

@@ -42,7 +42,8 @@ var Disable2FA = function Disable2FA(_ref) {
     onRequiresRecentLoginError = _ref.onRequiresRecentLoginError,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_AuthContext.AuthContext),
-    unenrollUser2FA = _useContext.unenrollUser2FA;
+    unenrollUser2FA = _useContext.unenrollUser2FA,
+    refreshIdToken = _useContext.refreshIdToken;
   var _useState = (0, _react.useState)({
       confirmDisable: false,
       sucess: false
@@ -52,51 +53,72 @@ var Disable2FA = function Disable2FA(_ref) {
     setIsModalOpen = _useState2[1];
   (0, _react.useEffect)(function () {
     if (showFlow) {
+      refreshToken();
       setIsModalOpen(_objectSpread(_objectSpread({}, isModalOpen), {}, {
         confirmDisable: true
       }));
     }
   }, [props.showFlow]);
-  var handleDisableClick = /*#__PURE__*/function () {
+  var refreshToken = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.prev = 0;
-            _context.next = 3;
+            try {
+              refreshIdToken();
+            } catch (error) {
+              console.log('🚀 ~ error in refreshToken:', error);
+            }
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function refreshToken() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleDisableClick = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            _context2.next = 3;
             return unenrollUser2FA();
           case 3:
             setIsModalOpen(_objectSpread(_objectSpread({}, isModalOpen), {}, {
               sucess: true
             }));
-            _context.prev = 4;
-            _context.next = 7;
+            _context2.prev = 4;
+            _context2.next = 7;
             return (0, _fetchData.default)('auth/disable-2fa-email');
           case 7:
-            _context.next = 12;
+            _context2.next = 12;
             break;
           case 9:
-            _context.prev = 9;
-            _context.t0 = _context["catch"](4);
-            console.log('🚀 ~ error while sending email:', _context.t0);
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](4);
+            console.log('🚀 ~ error while sending email:', _context2.t0);
           case 12:
-            _context.next = 18;
+            _context2.next = 18;
             break;
           case 14:
-            _context.prev = 14;
-            _context.t1 = _context["catch"](0);
-            console.log('🚀 ~ file: disable-2fa-flow.js ~ error:', _context.t1);
-            if (_context.t1.code === 'auth/requires-recent-login') {
+            _context2.prev = 14;
+            _context2.t1 = _context2["catch"](0);
+            console.log('🚀 ~ file: disable-2fa-flow.js ~ error:', _context2.t1);
+            if (_context2.t1.code === 'auth/requires-recent-login') {
               onRequiresRecentLoginError && onRequiresRecentLoginError();
             }
           case 18:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee, null, [[0, 14], [4, 9]]);
+      }, _callee2, null, [[0, 14], [4, 9]]);
     }));
     return function handleDisableClick() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Modal.Modal, {

package/dist/components/2FA/enable-2fa-flow.js

@@ -37,14 +37,12 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
     onRequiresRecentLoginError = _ref.onRequiresRecentLoginError;
   var _useContext = (0, _react.useContext)(_AuthContext.AuthContext),
     user = _useContext.user,
-    generateTotpSecret = _useContext.generateTotpSecret,
     enrollUserToTotp = _useContext.enrollUserToTotp,
     refreshIdToken = _useContext.refreshIdToken;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     showSuccess = _useState2[0],
     setshowSuccess = _useState2[1];
-  //const [totpData, settotpData] = useState(totpData)
   var _useState3 = (0, _react.useState)({
       popup: undefined,
       message: undefined
@@ -64,9 +62,8 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
           case 0:
             try {
               refreshIdToken();
-              console.log('RefreshIdTOken called');
             } catch (error) {
-              console.log('🚀 ~ error:', error);
+              console.log('🚀 ~ error in refreshToken:', error);
             }
           case 1:
           case "end":
@@ -78,25 +75,6 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
-  // useEffect(() => {
-  //   if (user) {
-  //     generateTotpSecret(user)
-  //       .then((data) => {
-  //         settotpData(data)
-  //         return
-  //       })
-  //       .catch((error) => {
-  //         console.log(error)
-  //         if (
-  //           error.code === 'auth/requires-recent-login' ||
-  //           error.code === 'auth/unsupported-first-factor'
-  //         ) {
-  //           onRequiresRecentLoginError && onRequiresRecentLoginError()
-  //         }
-  //       })
-  //   }
-  // }, [user])
-
   var onSubmit = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(data) {
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {

package/dist/components/2FA/main-flow.js

@@ -102,22 +102,20 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
             return generateTotpSecret(user);
           case 3:
             response = _context.sent;
-            console.log('🚀 ~ response:', response);
             settotpData(response);
-            _context.next = 11;
+            _context.next = 10;
             break;
-          case 8:
-            _context.prev = 8;
+          case 7:
+            _context.prev = 7;
             _context.t0 = _context["catch"](0);
             if (_context.t0.code === 'auth/requires-recent-login' || _context.t0.code === 'auth/unsupported-first-factor') {
               setisLoginRequired(true);
-              // onRequiresRecentLoginError && onRequiresRecentLoginError()
             }
-          case 11:
+          case 10:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 8]]);
+      }, _callee, null, [[0, 7]]);
     }));
     return function generateTotp() {
       return _ref2.apply(this, arguments);
@@ -164,11 +162,11 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
     };
   }();
   var onRequiresRecentLoginErrorHandler = function onRequiresRecentLoginErrorHandler() {
-    // setIsFlowOpen({
-    //   requiresRecentLogin: true,
-    //   enable2fa: false,
-    //   disable2fa: false,
-    // })
+    setIsFlowOpen({
+      requiresRecentLogin: true,
+      enable2fa: false,
+      disable2fa: false
+    });
     onRequiresRecentLoginError && onRequiresRecentLoginError();
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
@@ -195,7 +193,7 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
     },
     handleChange: function handleChange(value) {
       //log in again is only if you try to set up 2fa, not disable it
-      if (isLoginRequired && value === 'disabled') {
+      if (isLoginRequired && value === 'enabled') {
         setIsFlowOpen({
           requiresRecentLogin: true,
           enable2fa: false,

package/dist/components/AdminDashboard/Table/ReactTable.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactTable = ReactTable;
+exports.default = exports.ReactTableWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactTable = require("react-table");
+var _Table = require("./Table.styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pagination = _interopRequireDefault(require("../../Pagination/Pagination"));
+var _ComponentWrapper = _interopRequireDefault(require("../../ComponentWrapper/ComponentWrapper.styles"));
+var _Card = require("../../Card/Card.styles");
+var _InputWithButton = _interopRequireDefault(require("../../Input/InputWithButton"));
+var _Button = _interopRequireDefault(require("../../Button/Button.styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+//This components is used only to memoize the values before we sent them to the react-table
+var ReactTableWrapper = function ReactTableWrapper(props) {
+  var makeNewColumns = function makeNewColumns(data) {
+    return data === null || data === void 0 ? void 0 : data.map(function (column) {
+      if (column.key === 'dropdown') {
+        return {
+          Header: function Header() {
+            return null;
+          },
+          id: column.key,
+          Cell: function Cell(_ref) {
+            var row = _ref.row;
+            return (
+              /*#__PURE__*/
+              // Use Cell to render an expander for dropdown cell.
+              // We can use the getToggleRowExpandedProps prop-getter
+              // to build the expander. (moved to the whole row to make it easier to click)
+              _react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Table.TableDropdownIcon, {
+                isActive: row.isExpanded
+              }))
+            );
+          }
+        };
+      }
+      return {
+        Header: column.label,
+        accessor: column.key
+        //totalWidth: 50, // column.width,
+      };
+    });
+  };
+
+  var memoizedColumns = _react.default.useMemo(function () {
+    return makeNewColumns(props.columns);
+  }, []);
+  var memoizedData = _react.default.useMemo(function () {
+    return props.data;
+  }, []);
+  var memoizedSubColumns = _react.default.useMemo(function () {
+    return makeNewColumns(props.subColumns);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(ReactTable, {
+    columns: memoizedColumns,
+    data: memoizedData,
+    subColumns: memoizedSubColumns,
+    blue: props.blue,
+    withSubTable: props.withSubTable,
+    calculateSubData: props.calculateSubData
+  });
+};
+exports.ReactTableWrapper = ReactTableWrapper;
+function ReactTable(props) {
+  var columns = props.columns,
+    data = props.data,
+    subColumns = props.subColumns,
+    blue = props.blue,
+    noPagination = props.noPagination,
+    withSubTable = props.withSubTable,
+    isSubTable = props.isSubTable,
+    calculateSubData = props.calculateSubData;
+
+  // Use the state and functions returned from useTable to build UI
+  var _useTable = (0, _reactTable.useTable)({
+      columns: columns,
+      data: data,
+      initialState: {
+        pageIndex: 0,
+        pageSize: isSubTable ? 10000 : 10
+      }
+    }, _reactTable.useExpanded, _reactTable.usePagination),
+    getTableProps = _useTable.getTableProps,
+    getTableBodyProps = _useTable.getTableBodyProps,
+    headerGroups = _useTable.headerGroups,
+    prepareRow = _useTable.prepareRow,
+    visibleColumns = _useTable.visibleColumns,
+    page = _useTable.page,
+    gotoPage = _useTable.gotoPage,
+    setPageSize = _useTable.setPageSize,
+    _useTable$state = _useTable.state,
+    pageIndex = _useTable$state.pageIndex,
+    pageSize = _useTable$state.pageSize;
+  return /*#__PURE__*/_react.default.createElement(_Table.Styles, null, /*#__PURE__*/_react.default.createElement(_Table.TableWrap, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable, getTableProps(), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
+    return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
+      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Th, _extends({}, column.getHeaderProps({
+        className: column.collapse ? 'collapse' : ''
+      }), {
+        blue: blue
+      }), column.render('Header'));
+    }));
+  })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
+    prepareRow(row);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, row.getRowProps(), row.cells.map(function (cell) {
+      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), cell.getCellProps({
+        className: cell.column.collapse ? 'collapse' : ''
+      }), {
+        blue: blue
+      }), cell.render('Cell'));
+    })), withSubTable && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
+      key: "".concat(row.id, "-").concat(i)
+    }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
+      colSpan: visibleColumns.length,
+      subTable: true
+    }, /*#__PURE__*/_react.default.createElement(ReactTable, {
+      columns: subColumns,
+      data: calculateSubData(row),
+      noPagination: true,
+      isSubTable: true
+    }))));
+  })))), !noPagination && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    flex: true,
+    style: {
+      justifyContent: 'space-between',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+    currentPage: pageIndex + 1,
+    totalCount: data.length,
+    pageSize: pageSize,
+    onPageChange: function onPageChange(page) {
+      return gotoPage(page - 1);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Card.Card, {
+    noPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, {
+    style: {
+      padding: '2px 20px'
+    }
+  }, "Page Size:"), /*#__PURE__*/_react.default.createElement(_InputWithButton.default, {
+    id: "pageSize",
+    name: "pageSize",
+    value: pageSize,
+    type: "number",
+    placeholder: 'Page size',
+    onChange: function onChange(e) {
+      return setPageSize(Number(e.target.value));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default //onClick={() => setPageSize(Number(inputPageSize))}
+  , null, "apply"))))));
+}
+ReactTable.propTypes = {
+  columns: _propTypes.default.array.isRequired,
+  data: _propTypes.default.array.isRequired,
+  subColumns: _propTypes.default.array,
+  calculateSubData: _propTypes.default.func,
+  blue: _propTypes.default.bool,
+  noPagination: _propTypes.default.bool,
+  withSubTable: _propTypes.default.bool,
+  isSubTable: _propTypes.default.bool
+};
+ReactTable.defaultProps = {
+  blue: false,
+  noPagination: false,
+  withSubTable: false,
+  isSubTable: false
+};
+var _default = ReactTableWrapper;
+exports.default = _default;

package/dist/components/AdminDashboard/Table/Table.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableWrapper = exports.TableCellType = exports.StyledTable = exports.Row = exports.HeadWrapper = exports.Head = exports.Container = exports.Column = exports.Body = void 0;
+exports.TableWrapper = exports.TableWrap = exports.TableDropdownIcon = exports.TableCellType = exports.Styles = exports.StyledTr = exports.StyledTh = exports.StyledTd = exports.StyledTable = exports.StyledReactTable = exports.Row = exports.HeadWrapper = exports.Head = exports.Container = exports.Column = exports.Body = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Container = _styledComponents.default.div.withConfig({
@@ -76,4 +76,52 @@ var TableCellType = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.cWhite;
 });
-exports.TableCellType = TableCellType;
+exports.TableCellType = TableCellType;
+var TableDropdownIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-down'
+}).withConfig({
+  displayName: "Tablestyles__TableDropdownIcon",
+  componentId: "sc-pdcd6r-9"
+})(["width:14px;height:20px;font-size:20px;margin-top:-10px;transform:rotate(0);transition:0.3s transform;cursor:pointer;", ""], function (props) {
+  return props.isActive && "\n      transform: rotate(180deg);\n  ";
+});
+exports.TableDropdownIcon = TableDropdownIcon;
+var Styles = _styledComponents.default.div.withConfig({
+  displayName: "Tablestyles__Styles",
+  componentId: "sc-pdcd6r-10"
+})(["display:block;max-width:100%;table{th,td{&.collapse{width:0.0000000001%;}}}"]);
+exports.Styles = Styles;
+var TableWrap = _styledComponents.default.div.withConfig({
+  displayName: "Tablestyles__TableWrap",
+  componentId: "sc-pdcd6r-11"
+})(["display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;"]);
+exports.TableWrap = TableWrap;
+var StyledTh = _styledComponents.default.th.withConfig({
+  displayName: "Tablestyles__StyledTh",
+  componentId: "sc-pdcd6r-12"
+})(["text-transform:uppercase;padding:10px;font-size:11px;letter-spacing:1.6px;font-weight:600;background-color:white;color:#000000de;border-bottom:1px solid #e1e1e1;line-height:20px;", ""], function (props) {
+  return props.blue && "\n      background-color: #0050ca;\n      color: #ffffff;\n      border:none;\n  ";
+});
+exports.StyledTh = StyledTh;
+var StyledTd = _styledComponents.default.td.withConfig({
+  displayName: "Tablestyles__StyledTd",
+  componentId: "sc-pdcd6r-13"
+})(["padding:26px 15px;border-bottom:1px solid #e1e1e1;font-size:14px;", " ", ""], function (props) {
+  return props.blue && "\n      background-color: #004bb7;\n    color: #ffffff;\n  ";
+}, function (props) {
+  return props.subTable && "\n     padding: 0;\n      &:last-child {\n        border-bottom: 0;\n      }\n  ";
+});
+exports.StyledTd = StyledTd;
+var StyledTr = _styledComponents.default.tr.withConfig({
+  displayName: "Tablestyles__StyledTr",
+  componentId: "sc-pdcd6r-14"
+})([""]);
+exports.StyledTr = StyledTr;
+var StyledReactTable = _styledComponents.default.table.withConfig({
+  displayName: "Tablestyles__StyledReactTable",
+  componentId: "sc-pdcd6r-15"
+})(["width:100%;border-spacing:0;"]);
+exports.StyledReactTable = StyledReactTable;
+StyledReactTable.Tr = StyledTr;
+StyledReactTable.Th = StyledTh;
+StyledReactTable.Td = StyledTd;

package/dist/components/Background/Background.stories.js

@@ -47,7 +47,9 @@ var Template = function Template(args) {
 };
 var BackgroundDefault = Template.bind({});
 exports.BackgroundDefault = BackgroundDefault;
-BackgroundDefault.args = {};
+BackgroundDefault.args = {
+  src: 'https://www.cookingclassy.com/wp-content/uploads/2014/06/chocolate-chip-cookie-16.jpg'
+};
 BackgroundDefault.parameters = {
   viewport: {
     defaultViewport: 'reset viewport'

package/dist/context/Auth.js

@@ -160,7 +160,6 @@ var Auth = /*#__PURE__*/function () {
         var user = _firebaseConfig.auth.currentUser;
         if (!user) reject('User not available');
         user.getIdToken(true).then(function (idToken) {
-          console.log('Token refreshed');
           resolve(idToken);
         }).catch(function (error) {
           reject(error);

package/dist/index.js

@@ -25,6 +25,17 @@ Object.keys(_Table).forEach(function (key) {
     }
   });
 });
+var _ReactTable = require("./components/AdminDashboard/Table/ReactTable");
+Object.keys(_ReactTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ReactTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ReactTable[key];
+    }
+  });
+});
 var _AgreementItem = require("./components/AgreementItem/AgreementItem");
 Object.keys(_AgreementItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.1.2-beta.2",
+  "version": "2.1.3",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -67,6 +67,7 @@
     "react-scripts": "5.0.1",
     "react-select": "^5.7.0",
     "react-slick": "^0.29.0",
+    "react-table": "^7.8.0",
     "react-tippy": "^1.4.0",
     "react-transition-group": "^4.4.5",
     "scroll-to-element": "^2.0.3",