powr-sdk-web 2.0.16 → 2.2.0

package/dist/table/index.js

@@ -0,0 +1,435 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+var PowrTable = function PowrTable(_ref) {
+  var data = _ref.data,
+    columns = _ref.columns,
+    title = _ref.title,
+    description = _ref.description,
+    gradientColors = _ref.gradientColors,
+    onAction = _ref.onAction,
+    mobileCardConfig = _ref.mobileCardConfig,
+    customHeader = _ref.customHeader;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
+
+  // Detect mobile screen size
+  (0, _react.useEffect)(function () {
+    var checkMobile = function checkMobile() {
+      setIsMobile(window.innerWidth < 640);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return function () {
+      return window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+  var getStatusColor = function getStatusColor(status) {
+    var colors = {
+      'Complete': '#d4edda',
+      'In Progress': '#d4edda',
+      'Planning': '#fff3cd',
+      'Proposed': '#e3f2fd',
+      'In Review': '#fff3cd',
+      'Approved': '#d4edda',
+      'Rejected': '#f8d7da'
+    };
+    return colors[status] || '#e9ecef';
+  };
+  var getStatusTextColor = function getStatusTextColor(status) {
+    var colors = {
+      'Complete': '#155724',
+      'In Progress': '#155724',
+      'Planning': '#856404',
+      'Proposed': '#1976d2',
+      'In Review': '#856404',
+      'Approved': '#155724',
+      'Rejected': '#721c24'
+    };
+    return colors[status] || '#6c757d';
+  };
+  var renderCell = function renderCell(column, value, row) {
+    switch (column.type) {
+      case 'badge':
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          style: {
+            background: getStatusColor(value || 'Proposed'),
+            color: getStatusTextColor(value || 'Proposed'),
+            padding: '4px 8px',
+            borderRadius: '12px',
+            fontSize: '0.8em',
+            fontWeight: '500'
+          }
+        }, value || 'Proposed');
+      case 'progress':
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '8px'
+          }
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            width: '60px',
+            height: '8px',
+            background: '#e9ecef',
+            borderRadius: '4px',
+            overflow: 'hidden'
+          }
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            width: "".concat(value, "%"),
+            height: '100%',
+            background: '#28a745',
+            borderRadius: '4px'
+          }
+        })), /*#__PURE__*/_react["default"].createElement("span", {
+          style: {
+            fontSize: '0.8em',
+            fontWeight: '600',
+            color: '#28a745'
+          }
+        }, value, "%"));
+      case 'vote':
+        return /*#__PURE__*/_react["default"].createElement("button", {
+          onClick: function onClick() {
+            return onAction === null || onAction === void 0 ? void 0 : onAction('vote', row);
+          },
+          style: {
+            background: 'linear-gradient(135deg, #28a745 0%, #20c997 100%)',
+            color: 'white',
+            border: 'none',
+            padding: '8px 16px',
+            borderRadius: '20px',
+            fontSize: '0.9em',
+            fontWeight: '600',
+            cursor: 'pointer',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 2px 8px rgba(40, 167, 69, 0.3)'
+          }
+        }, "\uD83D\uDC4D ", value, " Vote", value !== 1 ? 's' : '');
+      case 'action':
+        // Handle case where value might be undefined or not have the expected structure
+        if (!value || _typeof(value) !== 'object') {
+          return null;
+        }
+        return /*#__PURE__*/_react["default"].createElement("button", {
+          onClick: function onClick() {
+            return onAction === null || onAction === void 0 ? void 0 : onAction(value.action || 'action', row);
+          },
+          style: {
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'white',
+            border: 'none',
+            padding: '8px 16px',
+            borderRadius: '8px',
+            fontSize: '0.9em',
+            fontWeight: '600',
+            cursor: 'pointer',
+            transition: 'all 0.3s ease',
+            whiteSpace: 'nowrap'
+          }
+        }, value.text || 'Action');
+      case 'link':
+        // Handle case where value might be undefined or not have the expected structure
+        if (!value || _typeof(value) !== 'object') {
+          return null;
+        }
+        return /*#__PURE__*/_react["default"].createElement("a", {
+          href: value.url || '#',
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: {
+            color: '#007bff',
+            textDecoration: 'none',
+            fontSize: '0.9em',
+            fontWeight: '500'
+          },
+          onMouseEnter: function onMouseEnter(e) {
+            return e.target.style.color = '#0056b3';
+          },
+          onMouseLeave: function onMouseLeave(e) {
+            return e.target.style.color = '#007bff';
+          }
+        }, value.text || 'Link');
+      default:
+        return value;
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      background: 'white',
+      margin: '20px 0',
+      padding: '30px',
+      borderRadius: '15px',
+      boxShadow: '0 4px 20px rgba(0,0,0,0.1)'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: '25px',
+      borderBottom: "3px solid ".concat(gradientColors),
+      paddingBottom: '15px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    style: {
+      color: '#2c3e50',
+      fontSize: '2em',
+      margin: 0
+    }
+  }, title), customHeader), description && /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      textAlign: 'center',
+      color: '#7f8c8d',
+      fontSize: '1.1em',
+      marginBottom: '30px'
+    }
+  }, description), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      overflowX: 'auto',
+      WebkitOverflowScrolling: 'touch',
+      display: isMobile ? 'none' : 'block'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    style: {
+      width: '100%',
+      borderCollapse: 'collapse',
+      background: 'white',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", {
+    style: {
+      background: "linear-gradient(135deg, ".concat(gradientColors, " 0%, ").concat(gradientColors, "dd 100%)"),
+      color: 'white'
+    }
+  }, columns.map(function (column) {
+    return /*#__PURE__*/_react["default"].createElement("th", {
+      key: column.key,
+      style: {
+        padding: '15px 12px',
+        textAlign: column.align || 'left',
+        fontWeight: '600',
+        fontSize: '0.9em',
+        width: column.width
+      }
+    }, column.label);
+  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, data.map(function (row, index) {
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: index,
+      style: {
+        borderBottom: '1px solid #e9ecef'
+      }
+    }, columns.map(function (column) {
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        key: column.key,
+        style: {
+          padding: '12px',
+          textAlign: column.align || 'left',
+          fontSize: column.type === 'text' ? '0.95em' : '0.9em',
+          fontWeight: column.type === 'text' ? '600' : 'normal'
+        }
+      }, column.render ? column.render(row[column.key] || null, row) : renderCell(column, row[column.key], row));
+    }));
+  })))), mobileCardConfig && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: isMobile ? 'block' : 'none'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }
+  }, data.map(function (row, index) {
+    var _columns$find, _columns$find2;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      style: {
+        background: 'white',
+        borderRadius: '12px',
+        padding: '20px',
+        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+        border: '1px solid #e9ecef'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: '12px',
+        marginBottom: '12px'
+      }
+    }, mobileCardConfig.iconKey && /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        fontSize: '1.5em'
+      }
+    }, row[mobileCardConfig.iconKey]), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h3", {
+      style: {
+        margin: '0 0 4px 0',
+        fontSize: '1.1rem',
+        fontWeight: '600',
+        color: '#2c3e50'
+      }
+    }, mobileCardConfig.renderTitle ? mobileCardConfig.renderTitle(row) : row[mobileCardConfig.titleKey]), mobileCardConfig.subtitleKey && /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '0.9rem',
+        color: '#6c757d',
+        lineHeight: '1.4'
+      }
+    }, mobileCardConfig.renderSubtitle ? mobileCardConfig.renderSubtitle(row) : row[mobileCardConfig.subtitleKey]))), mobileCardConfig.tags && /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        marginBottom: '16px',
+        flexWrap: 'wrap'
+      }
+    }, mobileCardConfig.tags.map(function (tagKey) {
+      var value = row[tagKey];
+      var column = columns.find(function (col) {
+        return col.key === tagKey;
+      });
+      if (!value && tagKey !== 'status') return null;
+
+      // Use custom render function if available, otherwise use default styling
+      if (column !== null && column !== void 0 && column.render) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          key: tagKey
+        }, column.render(value, row));
+      }
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        key: tagKey,
+        style: {
+          background: getStatusColor(value || 'Proposed'),
+          color: getStatusTextColor(value || 'Proposed'),
+          padding: '4px 8px',
+          borderRadius: '12px',
+          fontSize: '0.8rem',
+          fontWeight: '500'
+        }
+      }, value || 'Proposed');
+    })), columns.find(function (col) {
+      return col.type === 'progress';
+    }) && /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: '16px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '8px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        fontSize: '0.9rem',
+        fontWeight: '600'
+      }
+    }, "Progress"), /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        fontSize: '0.9rem',
+        fontWeight: '600',
+        color: '#28a745'
+      }
+    }, row[((_columns$find = columns.find(function (col) {
+      return col.type === 'progress';
+    })) === null || _columns$find === void 0 ? void 0 : _columns$find.key) || ''], "%")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '100%',
+        height: '8px',
+        background: '#e9ecef',
+        borderRadius: '4px',
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: "".concat(row[((_columns$find2 = columns.find(function (col) {
+          return col.type === 'progress';
+        })) === null || _columns$find2 === void 0 ? void 0 : _columns$find2.key) || ''], "%"),
+        height: '100%',
+        background: '#28a745',
+        borderRadius: '4px'
+      }
+    }))), mobileCardConfig.metaInfo && /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        fontSize: '0.85rem',
+        color: '#6c757d'
+      }
+    }, mobileCardConfig.metaInfo.map(function (infoKey) {
+      var column = columns.find(function (col) {
+        return col.key === infoKey;
+      });
+      var value = row[infoKey];
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        key: infoKey
+      }, column !== null && column !== void 0 && column.render ? column.render(value, row) : value);
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        marginTop: '16px',
+        justifyContent: 'flex-start'
+      }
+    }, columns.filter(function (col) {
+      return col.type === 'action' || col.type === 'vote';
+    }).map(function (column) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: column.key
+      }, column.render ? column.render(row[column.key] || null, row) : renderCell(column, row[column.key], row));
+    })));
+  }))));
+};
+PowrTable.propTypes = {
+  data: _propTypes["default"].array.isRequired,
+  columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    key: _propTypes["default"].string.isRequired,
+    label: _propTypes["default"].string.isRequired,
+    type: _propTypes["default"].oneOf(['text', 'badge', 'progress', 'action', 'link', 'vote']).isRequired,
+    align: _propTypes["default"].oneOf(['left', 'center', 'right']),
+    width: _propTypes["default"].string,
+    render: _propTypes["default"].func
+  })).isRequired,
+  title: _propTypes["default"].string.isRequired,
+  description: _propTypes["default"].string,
+  gradientColors: _propTypes["default"].string.isRequired,
+  onAction: _propTypes["default"].func,
+  mobileCardConfig: _propTypes["default"].shape({
+    titleKey: _propTypes["default"].string.isRequired,
+    subtitleKey: _propTypes["default"].string,
+    iconKey: _propTypes["default"].string,
+    tags: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    metaInfo: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    renderTitle: _propTypes["default"].func,
+    renderSubtitle: _propTypes["default"].func
+  }),
+  customHeader: _propTypes["default"].node
+};
+var _default = exports["default"] = PowrTable;

package/package.json

@@ -1,43 +1,43 @@
-{
-    "name": "powr-sdk-web",
-    "version": "2.0.16",
-    "main": "dist/index.js",
-
-    "scripts": {
-        "build": "babel src -d dist --copy-files",
-        "prepublishOnly": "npm run build"
-    },
-    "keywords": [
-        "react",
-        "component",
-        "npm",
-        "file-upload",
-        "powrbase",
-        "comments"
-    ],
-    "author": "Lawazia Tech",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/lawaziatech/react-byto.git"
-    },
-    "peerDependencies": {
-        "react": "*",
-        "react-dom": "*",
-        "react-toastify": "*",
-        "filepond": "*"
-    },
-    "dependencies": {
-        "react-hook-form": "^7.58.0",
-        "axios": "^1.7.7",
-        "react-filepond": "^7.1.2",
-        "filepond": "^4.30.4"
-    },
-    "devDependencies": {
-        "@babel/cli": "^7.24.1",
-        "@babel/core": "^7.24.4",
-        "@babel/preset-env": "^7.24.4",
-        "@babel/preset-react": "^7.24.1",
-        "prop-types": "^15.8.1"
-    }
-}
+{
+    "name": "powr-sdk-web",
+    "version": "2.2.0",
+    "main": "dist/index.js",
+    "scripts": {
+        "build": "babel src -d dist --copy-files",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "react",
+        "component",
+        "npm",
+        "file-upload",
+        "powrbase",
+        "comments"
+    ],
+    "author": "Lawazia Tech",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/lawaziatech/react-byto.git"
+    },
+    "peerDependencies": {
+        "filepond": "*",
+        "react": "*",
+        "react-dom": "*",
+        "react-toastify": "*"
+    },
+    "dependencies": {
+        "axios": "^1.7.7",
+        "filepond": "*",
+        "powr-sdk-web": "^2.1.0",
+        "react-filepond": "^7.1.2",
+        "react-hook-form": "^7.58.0"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.24.1",
+        "@babel/core": "^7.24.4",
+        "@babel/preset-env": "^7.24.4",
+        "@babel/preset-react": "^7.24.1",
+        "prop-types": "^15.8.1"
+    }
+}