@visns-studio/visns-components 5.4.5 → 5.4.6

package/package.json

@@ -14,9 +14,9 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.8.3",
+        "axios": "^1.8.4",
         "dayjs": "^1.11.13",
-        "fabric": "^6.5.4",
+        "fabric": "^6.6.2",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.18.2",
         "html-react-parser": "^5.2.3",
@@ -27,20 +27,20 @@
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "quill-image-uploader": "^1.3.0",
-        "react-big-calendar": "^1.17.1",
+        "react-big-calendar": "^1.18.0",
         "react-color": "^2.19.3",
         "react-confirm-alert": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^7.6.0",
-        "react-dropzone": "^14.3.5",
+        "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
         "react-number-format": "^5.4.3",
         "react-password-strength-bar": "^0.4.1",
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
         "react-reveal": "^1.2.2",
-        "react-router-dom": "^6.28.2",
-        "react-select": "^5.9.0",
+        "react-router-dom": "^6.30.0",
+        "react-select": "^5.10.1",
         "react-signature-pad-wrapper": "^4.1.0",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
@@ -55,30 +55,30 @@
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
-        "vite": "^5.4.15",
+        "vite": "^5.4.16",
         "yarn": "^1.22.22"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/plugin-transform-runtime": "^7.25.9",
-        "@babel/preset-env": "^7.26.0",
+        "@babel/core": "^7.26.10",
+        "@babel/plugin-transform-runtime": "^7.26.10",
+        "@babel/preset-env": "^7.26.9",
         "@babel/preset-react": "^7.26.3",
         "babel-loader": "^9.2.1",
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
-        "css-minimizer-webpack-plugin": "^7.0.0",
+        "css-minimizer-webpack-plugin": "^7.0.2",
         "mini-css-extract-plugin": "^2.9.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.83.4",
-        "sass-loader": "^16.0.4"
+        "sass": "^1.86.2",
+        "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.5",
+    "version": "5.4.6",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -133,6 +133,7 @@ const DataGrid = forwardRef(
             columns,
             form,
             gridHeight,
+            hoverColor,
             mapbox,
             pageData,
             pageSetting,
@@ -2856,6 +2857,7 @@ const DataGrid = forwardRef(
                         : 450
                     : 400,
             boxShadow: 'none',
+            ...(hoverColor ? { '--hover-color': hoverColor } : {}),
         });
         const headerProps = {
             style: style ? style : {},

package/src/components/crm/README_DATAGRID.md

@@ -0,0 +1,70 @@
+# DataGrid Component
+
+## Customizing Hover Color
+
+The DataGrid component now supports customizable hover colors. This allows you to set different hover colors for different instances of the DataGrid.
+
+### Method 1: Using the hoverColor Prop (Recommended)
+
+The simplest way to set a custom hover color is to use the `hoverColor` prop directly:
+
+```jsx
+import DataGrid from './components/crm/DataGrid';
+
+// In your component
+<DataGrid
+    hoverColor="rgb(255, 240, 230)" // Custom hover color
+    // other props...
+/>;
+```
+
+### Method 2: Using CSS Variables in Component Props
+
+You can pass a custom style object to the DataGrid component with the `--hover-color` CSS variable:
+
+```jsx
+import DataGrid from './components/crm/DataGrid';
+
+// Define custom styles with hover color
+const customStyle = {
+    '--hover-color': 'rgb(255, 240, 230)', // Custom hover color
+};
+
+// In your component
+<DataGrid
+    style={customStyle}
+    // other props...
+/>;
+```
+
+### Method 3: Using CSS/SCSS
+
+You can define the `--hover-color` CSS variable in your CSS or SCSS files:
+
+```css
+/* Global default hover color */
+:root {
+    --hover-color: rgb(230, 240, 250);
+}
+
+/* For specific containers */
+.special-grid-container {
+    --hover-color: rgb(255, 240, 230);
+}
+```
+
+Then apply the class to your container:
+
+```jsx
+<div className="special-grid-container">
+    <DataGrid {...props} />
+</div>
+```
+
+### Default Value
+
+If no hover color is specified (via prop or CSS variable), the DataGrid will use a default light blue color (`rgb(230, 240, 250)`).
+
+### Example
+
+See the `src/examples/CustomHoverDataGrid.jsx` file for a complete example of how to implement custom hover colors using all three methods.

package/src/components/crm/generic/GenericIndex.jsx

@@ -40,6 +40,7 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
             columns: setting.columns,
             setRowsSelected,
             settings: setting.settings,
+            style: setting.style || {},
             tableSetting,
             type: setting.type ? setting.type : 'table',
         });
@@ -340,6 +341,7 @@ function GenericIndex({
             <Table
                 {...config}
                 ref={gridRef}
+                hoverColor={config.style.hoverColor}
                 gridHeight={windowHeight * 0.65}
                 setConfig={setConfig}
                 setTableData={setTableData}

package/src/components/crm/styles/DataGrid.module.scss

@@ -23,7 +23,7 @@
 
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {
-        background: rgb(240, 240, 240) !important;
+        background: var(--hover-color, rgb(230, 240, 250)) !important;
         cursor: pointer;
     }
 }
@@ -38,7 +38,7 @@
 
 .InovuaReactDataGrid__row-hover-target:hover {
     color: var(--primary-color) !important;
-    background: rgb(240, 240, 240) !important;
+    background: var(--hover-color, rgb(230, 240, 250)) !important;
 }
 
 .InovuaReactDataGrid__row:hover {

package/src/components/styles/global.css

@@ -161,7 +161,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {
-        background: rgb(240, 240, 240) !important;
+        background: var(--hover-color, rgb(230, 240, 250)) !important;
         cursor: pointer;
     }
 }
@@ -176,7 +176,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 
 .InovuaReactDataGrid__row-hover-target:hover {
     color: var(--paragraph-color) !important;
-    background: rgb(240, 240, 240) !important;
+    background: var(--hover-color, rgb(230, 240, 250)) !important;
 }
 
 .InovuaReactDataGrid__row:hover {

package/src/examples/CustomHoverDataGrid.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import DataGrid from '../components/crm/DataGrid';
+
+// Example of using custom hover color with DataGrid
+const CustomHoverDataGrid = () => {
+    // Example DataGrid props with direct hoverColor prop
+    const exampleProps = {
+        // Your DataGrid props here
+        hoverColor: 'rgb(255, 240, 230)', // Peachy hover color
+        // Other props...
+    };
+
+    // Define custom styles with hover color (alternative method)
+    const customStyle = {
+        // You can define any CSS variables here
+        '--hover-color': 'rgb(230, 255, 230)', // Light green hover color
+    };
+
+    return (
+        <div>
+            <h2>DataGrid with Custom Hover Color</h2>
+            <p>
+                This example shows how to customize the hover color of the
+                DataGrid.
+            </p>
+
+            <h3>Method 1: Using the hoverColor prop (Recommended)</h3>
+            <div>
+                <DataGrid {...exampleProps} />
+            </div>
+
+            <h3>Method 2: Using CSS Variables in style prop</h3>
+            <div>
+                <DataGrid style={customStyle} />
+            </div>
+
+            <h3>Method 3: Using CSS/SCSS classes</h3>
+            <div className="custom-hover-grid">
+                <DataGrid />
+            </div>
+
+            <h3>How to Use Custom Hover Colors</h3>
+            <p>You can set a custom hover color in three ways:</p>
+            <ol>
+                <li>
+                    <strong>Using the hoverColor prop (Recommended):</strong>
+                    <pre>
+                        {`
+// Direct prop approach
+<DataGrid
+  hoverColor="rgb(255, 240, 230)"
+  {...otherProps}
+/>
+            `}
+                    </pre>
+                </li>
+                <li>
+                    <strong>Using CSS Variables in style prop:</strong>
+                    <pre>
+                        {`
+// Define in your component
+const customStyle = {
+  '--hover-color': 'rgb(230, 255, 230)'
+};
+
+// Apply to DataGrid
+<DataGrid style={customStyle} {...otherProps} />
+            `}
+                    </pre>
+                </li>
+                <li>
+                    <strong>Using CSS/SCSS:</strong>
+                    <pre>
+                        {`
+/* In your CSS/SCSS file */
+:root {
+  --hover-color: rgb(230, 240, 250);
+}
+
+/* For specific containers */
+.custom-hover-grid {
+  --hover-color: rgb(200, 220, 255);
+}
+            `}
+                    </pre>
+                </li>
+            </ol>
+        </div>
+    );
+};
+
+export default CustomHoverDataGrid;