@stokr/components-library 2.3.44-beta.3 → 2.3.44-beta.4

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

@@ -37,8 +37,15 @@ function ReactTable(props) {
     customTdStyles = props.customTdStyles,
     customThStyles = props.customThStyles,
     customRowHoverStyles = props.customRowHoverStyles,
+    customRowHoverContent = props.customRowHoverContent,
     calculateSubData = props.calculateSubData;
 
+  // State to track which row is being hovered
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredRowIndex = _useState2[0],
+    setHoveredRowIndex = _useState2[1];
+
   // Use the state and functions returned from useTable to build UI
   var _useTable = (0, _reactTable.useTable)({
       columns: columns,
@@ -59,13 +66,24 @@ function ReactTable(props) {
     _useTable$state = _useTable.state,
     pageIndex = _useTable$state.pageIndex,
     pageSize = _useTable$state.pageSize;
-  var _useState = (0, _react.useState)(isSubTable ? 10000 : 10),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputPageSize = _useState2[0],
-    setInputPageSize = _useState2[1];
+  var _useState3 = (0, _react.useState)(isSubTable ? 10000 : 10),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputPageSize = _useState4[0],
+    setInputPageSize = _useState4[1];
   _react.default.useEffect(function () {
     setInputPageSize(pageSize);
   }, [pageSize]);
+
+  // Function to render cell content with hover support
+  var renderCellContent = function renderCellContent(cell, rowIndex, rowData) {
+    if (customRowHoverContent && hoveredRowIndex === rowIndex) {
+      var hoverContent = customRowHoverContent(cell.column.id, rowIndex, rowData);
+      if (hoverContent !== undefined) {
+        return hoverContent;
+      }
+    }
+    return cell.render('Cell');
+  };
   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) {
       var cellStyles = customThStyles ? customThStyles(column) : {};
@@ -73,7 +91,10 @@ function ReactTable(props) {
         className: column.collapse ? 'collapse' : '',
         style: _objectSpread({}, cellStyles)
       }), {
-        blue: blue
+        blue: blue,
+        width: column.width,
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth
       }), column.render('Header'));
     }));
   })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
@@ -81,17 +102,26 @@ function ReactTable(props) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: row.id
     }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, _extends({}, row.getRowProps(), {
-      customRowHoverStyles: customRowHoverStyles
-      // rowIndex={i}
-      // rowData={row.original}
+      customRowHoverStyles: customRowHoverStyles,
+      rowIndex: i,
+      rowData: row.original,
+      onMouseEnter: function onMouseEnter() {
+        return setHoveredRowIndex(i);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoveredRowIndex(null);
+      }
     }), row.cells.map(function (cell) {
       var cellStyles = customTdStyles ? customTdStyles(i, row.original) : {};
       return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), cell.getCellProps({
         className: cell.column.collapse ? 'collapse' : '',
         style: _objectSpread({}, cellStyles)
       }), {
-        blue: blue
-      }), cell.render('Cell'));
+        blue: blue,
+        width: cell.column.width,
+        minWidth: cell.column.minWidth,
+        maxWidth: cell.column.maxWidth
+      }), renderCellContent(cell, i, row.original));
     })), withSubTable && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
       key: "".concat(row.id, "-").concat(i)
     }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
@@ -124,7 +154,8 @@ ReactTable.propTypes = {
   noPagination: _propTypes.default.bool,
   withSubTable: _propTypes.default.bool,
   isSubTable: _propTypes.default.bool,
-  customRowHoverStyles: _propTypes.default.func
+  customRowHoverStyles: _propTypes.default.func,
+  customRowHoverContent: _propTypes.default.func
 };
 ReactTable.defaultProps = {
   blue: false,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowHover = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.BlueWrapper = exports.BlueTable = void 0;
+exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.BlueWrapper = exports.BlueTable = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ReactTable = require("./ReactTable");
 var _ReactTableWrapper = require("./ReactTableWrapper");
@@ -49,35 +49,54 @@ var _default = {
     },
     customRowHoverStyles: {
       control: 'function'
+    },
+    customRowHoverContent: {
+      control: 'function'
     }
   }
 }; // Sample columns and data for demonstration
 exports.default = _default;
 var columns = [{
   Header: 'ID',
-  accessor: 'id'
+  accessor: 'id',
+  width: '10%',
+  minWidth: '80px'
 }, {
   Header: 'Name',
-  accessor: 'name'
+  accessor: 'name',
+  width: '30%',
+  minWidth: '150px'
 }, {
   Header: 'Status',
-  accessor: 'status'
+  accessor: 'status',
+  width: '20%',
+  minWidth: '100px'
 }, {
   Header: '',
-  accessor: 'dropdown'
+  accessor: 'dropdown',
+  width: '40%',
+  minWidth: '120px'
 }];
 var columnsWrapper = [{
   label: 'ID',
-  key: 'id'
+  key: 'id',
+  width: '10%',
+  minWidth: '80px'
 }, {
   label: 'Name',
-  key: 'name'
+  key: 'name',
+  width: '30%',
+  minWidth: '150px'
 }, {
   label: 'Status',
-  key: 'status'
+  key: 'status',
+  width: '20%',
+  minWidth: '100px'
 }, {
   label: '',
-  key: 'dropdown'
+  key: 'dropdown',
+  width: '40%',
+  minWidth: '120px'
 }];
 var subColumns = [{
   Header: 'Detail ID',
@@ -160,6 +179,80 @@ var customRowHoverStyles = function customRowHoverStyles(rowIndex, rowData) {
   return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    transition: all 0.2s ease-in-out;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    \n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
 };
 
+// Custom row hover content function
+var customRowHoverContent = function customRowHoverContent(columnId, rowIndex, rowData) {
+  switch (columnId) {
+    case 'name':
+      // Show underlined link on hover
+      return /*#__PURE__*/_react.default.createElement("a", {
+        href: "/user/".concat(rowData.id),
+        style: {
+          textDecoration: 'underline',
+          color: '#0050ca',
+          fontWeight: 'bold'
+        }
+      }, rowData.name);
+    case 'dropdown':
+      // Show action buttons on hover
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("button", {
+        style: {
+          padding: '4px 8px',
+          fontSize: '12px',
+          backgroundColor: '#0050ca',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return alert("Edit ".concat(rowData.name));
+        }
+      }, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
+        style: {
+          padding: '4px 8px',
+          fontSize: '12px',
+          backgroundColor: '#dc3545',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return alert("Delete ".concat(rowData.name));
+        }
+      }, "Delete"));
+    case 'status':
+      // Show status with icon on hover
+      var statusColors = {
+        Active: '#28a745',
+        Inactive: '#dc3545',
+        Pending: '#ffc107'
+      };
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          backgroundColor: statusColors[rowData.status] || '#6c757d'
+        }
+      }), rowData.status);
+    default:
+      return undefined;
+    // Return undefined to use default content
+  }
+};
+
 // Status-based hover styles
 var statusBasedHoverStyles = function statusBasedHoverStyles(rowIndex, rowData) {
   switch (rowData.status) {
@@ -174,6 +267,22 @@ var statusBasedHoverStyles = function statusBasedHoverStyles(rowIndex, rowData)
   }
 };
 
+// Row-specific hover styles (example: different styles for first and last rows)
+var rowSpecificHoverStyles = function rowSpecificHoverStyles(rowIndex, rowData) {
+  // Special styling for first row
+  if (rowIndex === 0) {
+    return "\n      background-color: #e3f2fd !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n      td {\n        background-color: #e3f2fd !important;\n        border-bottom-color: #2196f3 !important;\n        font-weight: bold;\n      }\n    ";
+  }
+
+  // Special styling for last row
+  if (rowIndex === data.length - 1) {
+    return "\n      background-color: #f3e5f5 !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);\n      td {\n        background-color: #f3e5f5 !important;\n        border-bottom-color: #9c27b0 !important;\n        font-weight: bold;\n      }\n    ";
+  }
+
+  // Default styling for other rows
+  return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
+};
+
 // Function to calculate sub data
 var calculateSubData = function calculateSubData(row) {
   return row.original.subData || [];
@@ -207,11 +316,33 @@ exports.WithRowHover = WithRowHover;
 WithRowHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverStyles: customRowHoverStyles
 });
+var WithHoverContent = Template.bind({});
+exports.WithHoverContent = WithHoverContent;
+WithHoverContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowHoverContent: customRowHoverContent
+});
+var WithHoverStylesAndContent = Template.bind({});
+exports.WithHoverStylesAndContent = WithHoverStylesAndContent;
+WithHoverStylesAndContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowHoverStyles: customRowHoverStyles,
+  customRowHoverContent: customRowHoverContent
+});
 var WithStatusBasedHover = Template.bind({});
 exports.WithStatusBasedHover = WithStatusBasedHover;
 WithStatusBasedHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverStyles: statusBasedHoverStyles
 });
+var WithRowSpecificHover = Template.bind({});
+exports.WithRowSpecificHover = WithRowSpecificHover;
+WithRowSpecificHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowHoverStyles: rowSpecificHoverStyles
+});
+var WithFixedColumnWidths = Template.bind({});
+exports.WithFixedColumnWidths = WithFixedColumnWidths;
+WithFixedColumnWidths.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowHoverContent: customRowHoverContent,
+  customRowHoverStyles: customRowHoverStyles
+});
 var WithSubTable = Template.bind({});
 exports.WithSubTable = WithSubTable;
 WithSubTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {

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

@@ -99,17 +99,29 @@ 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) {
+})(["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  ";
+}, function (props) {
+  return props.width && "\n      width: ".concat(props.width, ";\n      min-width: ").concat(props.width, ";\n      max-width: ").concat(props.width, ";\n  ");
+}, function (props) {
+  return props.minWidth && "\n      min-width: ".concat(props.minWidth, ";\n  ");
+}, function (props) {
+  return props.maxWidth && "\n      max-width: ".concat(props.maxWidth, ";\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) {
+})(["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  ";
+}, function (props) {
+  return props.width && "\n      width: ".concat(props.width, ";\n      min-width: ").concat(props.width, ";\n      max-width: ").concat(props.width, ";\n  ");
+}, function (props) {
+  return props.minWidth && "\n      min-width: ".concat(props.minWidth, ";\n  ");
+}, function (props) {
+  return props.maxWidth && "\n      max-width: ".concat(props.maxWidth, ";\n  ");
 });
 exports.StyledTd = StyledTd;
 var StyledTr = _styledComponents.default.tr.withConfig({

package/dist/components/InfoIcon/InfoIcon.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTippy = require("react-tippy");
 var _InfoIcon = require("./InfoIcon.styles");
-var _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled"];
+var _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled", "fullWidth"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -21,11 +21,13 @@ var InfoIcon = function InfoIcon(_ref) {
     noMarginRight = _ref.noMarginRight,
     noIcon = _ref.noIcon,
     disabled = _ref.disabled,
+    fullWidth = _ref.fullWidth,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
     noMargin: noMargin,
     noMarginLeft: noMarginLeft,
-    noMarginRight: noMarginRight
+    noMarginRight: noMarginRight,
+    fullWidth: fullWidth
   }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
     position: position,
     title: title,

package/dist/components/InfoIcon/InfoIcon.styles.js

@@ -10,12 +10,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Container = _styledComponents.default.div.withConfig({
   displayName: "InfoIconstyles__Container",
   componentId: "sc-d3sdn3-0"
-})(["display:inline-block;vertical-align:middle;margin:0 12px;font-size:0;line-height:0;", " ", " ", " & > div{position:relative;display:inline-block!important;}"], function (props) {
+})(["display:inline-block;vertical-align:middle;margin:0 12px;font-size:0;line-height:0;", " ", " ", " ", " & > div{position:relative;display:inline-block !important;", "}"], function (props) {
   return props.noMargin && "\n    margin: 0;\n  ";
 }, function (props) {
   return props.noMarginLeft && "\n    margin-left: 0;\n  ";
 }, function (props) {
   return props.noMarginRight && "\n    margin-right: 0;\n  ";
+}, function (props) {
+  return props.fullWidth && "\n    width: 100%;\n    height: 100%;\n  ";
+}, function (props) {
+  return props.fullWidth && "\n      width: 100%;\n      height: 100%;\n      display: flex !important;\n      align-content: center;\n      flex-wrap: wrap;\n      justify-content: center;\n  ";
 });
 exports.Container = Container;
 var Icon = _styledComponents.default.i.attrs({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.44-beta.3",
+  "version": "2.3.44-beta.4",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",