@visns-studio/visns-components 5.10.11 → 5.11.2

package/README.md

@@ -93,6 +93,91 @@ const App = () => {
 export default App;
 ```
 
+## New Modular Architecture (v5.10.11+)
+
+### GenericIndex Component Refactoring
+
+Starting from version 5.10.11, the GenericIndex component has been refactored for better maintainability and reusability:
+
+**Before**: Single monolithic component (2,281 lines)
+**After**: Modular architecture with separated concerns
+
+#### New Components
+
+The refactoring introduced two new standalone components that can be used independently:
+
+**GenericGrid** - Standalone grid component with full data management capabilities:
+
+```jsx
+import { GenericGrid } from 'visns-components';
+
+<GenericGrid 
+  config={{
+    settings: { 
+      fetch: { 
+        url: '/api/data',
+        method: 'POST',
+        params: { filter: 'active' }
+      }
+    },
+    columns: [
+      { name: 'id', header: 'ID', type: 'number' },
+      { name: 'name', header: 'Name', type: 'text' },
+      { name: 'date', header: 'Date', type: 'date' }
+    ]
+  }}
+  userProfile={userProfile}
+  onDataChange={(data) => console.log('Data updated:', data)}
+  onRowClick={(row) => console.log('Row clicked:', row)}
+/>
+```
+
+**GenericReportForm** - Standalone export form component:
+
+```jsx
+import { GenericReportForm } from 'visns-components';
+
+<GenericReportForm 
+  config={{
+    form: {
+      title: 'Export Data',
+      description: 'Select your export criteria below',
+      filters: [
+        { id: 'startDate', type: 'date', label: 'Start Date', required: true },
+        { id: 'endDate', type: 'date', label: 'End Date', required: true },
+        { id: 'format', type: 'dropdown', label: 'Format', options: [
+          { value: 'csv', label: 'CSV' },
+          { value: 'xlsx', label: 'Excel' }
+        ]}
+      ],
+      url: '/api/export',
+      method: 'POST',
+      filename: 'export.csv'
+    }
+  }}
+  userProfile={userProfile}
+  onExport={(formData) => customExportHandler(formData)}
+  onFormChange={(formData) => console.log('Form changed:', formData)}
+/>
+```
+
+#### Benefits of the Refactoring
+
+- **Reduced complexity**: GenericIndex reduced from 2,281 to 1,031 lines (55% reduction)
+- **Enhanced reusability**: Grid and form components can be used independently
+- **Better maintainability**: Focused components are easier to debug and modify
+- **Improved testing**: Components can be unit tested separately
+- **Backward compatibility**: All existing GenericIndex usage remains unchanged
+
+#### Shared Utilities
+
+The refactoring also introduced shared utility functions:
+
+- **`shared/formatters.js`**: Cell content formatting and styling utilities
+- **`shared/gridUtils.js`**: Data operations (sorting, filtering, transformations)
+
+These utilities are available for use in custom components and provide consistent functionality across the library.
+
 ## Component Documentation
 
 ### Authentication Components

package/package.json

@@ -17,24 +17,24 @@
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
         "@vitejs/plugin-react": "^4.5.2",
         "add": "^2.0.6",
-        "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "browser-image-compression": "^2.0.2",
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.17.0",
+        "framer-motion": "^12.18.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
+        "lucide-react": "^0.516.0",
         "moment": "^2.30.1",
-        "motion": "^12.17.0",
+        "motion": "^12.18.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
-        "react-big-calendar": "^1.19.2",
+        "react-big-calendar": "^1.19.3",
         "react-color": "^2.19.3",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^8.4.0",
@@ -53,7 +53,7 @@
         "react-to-print": "^3.1.0",
         "react-toastify": "^11.0.5",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.29.0",
+        "react-tooltip": "^5.29.1",
         "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
@@ -65,7 +65,7 @@
         "validator": "^13.15.15",
         "vite": "^6.3.5",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.23.2"
+        "yet-another-react-lightbox": "^3.23.3"
     },
     "devDependencies": {
         "@babel/core": "^7.27.4",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.10.11",
+    "version": "5.11.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -14,22 +14,22 @@ import Toggle from 'react-toggle';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
-    Backspace,
+    Trash2 as Backspace,
     Check,
     Clock,
-    CloudDownload,
+    Download as CloudDownload,
     Copy,
     Edit,
     Folder,
     Inbox,
     Network,
-    Ribbon,
+    Award as Ribbon,
     Search,
-    ShippingBoxV1,
-    ToggleOff,
-    ToggleOnFill,
-    TriangleAlert,
-} from 'akar-icons';
+    Package as ShippingBoxV1,
+    ToggleLeft as ToggleOff,
+    ToggleRight as ToggleOnFill,
+    AlertTriangle as TriangleAlert,
+} from 'lucide-react';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
 import 'react-toggle/style.css';

package/src/components/cms/DropZone.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { useDropzone } from 'react-dropzone';
-import { CircleX, File, TrashCan } from 'akar-icons';
+import { X as CircleX, File, Trash2 as TrashCan } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
 import Popup from 'reactjs-popup';

package/src/components/cms/Form.jsx

@@ -6,7 +6,7 @@ import moment from 'moment';
 import Reveal from 'react-reveal/Reveal';
 import parse from 'html-react-parser';
 import { toast } from 'react-toastify';
-import { Copy, TrashBin } from 'akar-icons';
+import { Copy, Trash2 as TrashBin } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
 function Form(props) {

package/src/components/cms/Gallery.jsx

@@ -4,7 +4,7 @@ import {
     SortableElement,
     sortableHandle,
 } from 'react-sortable-hoc';
-import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+import { GripVertical as ChevronVertical, Edit as Pencil, Trash2 as TrashCan } from 'lucide-react';
 import styles from './styles/Gallery.module.css';
 
 // Drag handle component

package/src/components/cms/sorting/Item.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SortableElement, sortableHandle } from 'react-sortable-hoc';
-import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+import { GripVertical as ChevronVertical, Edit as Pencil, Trash2 as TrashCan } from 'lucide-react';
 
 import styles from './styles/Item.module.scss';
 

package/src/components/crm/Autocomplete.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo, memo, useRef } from 'react';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
-import { ToggleOffFill, ToggleOnFill, Search } from 'akar-icons';
+import { ToggleLeft, ToggleRight, Search } from 'lucide-react';
 import styles from './styles/Autocomplete.module.scss';
 import fetchUtil from '../../utils/fetchUtil';
 
@@ -255,7 +255,7 @@ const VisnsAutocomplete = memo((props) => {
                 />
 
                 {overwrite ? (
-                    <ToggleOnFill
+                    <ToggleRight
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content="Enable Autocomplete"
                         strokeWidth={2}
@@ -264,7 +264,7 @@ const VisnsAutocomplete = memo((props) => {
                         className={styles.toggleActive}
                     />
                 ) : (
-                    <ToggleOffFill
+                    <ToggleLeft
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content="Disable Autocomplete"
                         strokeWidth={2}

package/src/components/crm/Breadcrumb.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
-import { CircleChevronRight } from 'akar-icons';
+import { ChevronRight } from 'lucide-react';
 
 function Breadcrumb({ data, page }) {
     // Function to get nested data, handling array of keys
@@ -73,7 +73,7 @@ function Breadcrumb({ data, page }) {
             {page?.parentTitle && page?.parentUrl && (
                 <>
                     <Link to={page.parentUrl}>{parse(page.parentTitle)}</Link>
-                    <CircleChevronRight strokeWidth={2} size={18} />
+                    <ChevronRight strokeWidth={2} size={18} />
                 </>
             )}
 
@@ -87,7 +87,7 @@ function Breadcrumb({ data, page }) {
                     >
                         {parse(nestedData)}
                     </Link>
-                    <CircleChevronRight strokeWidth={2} size={18} />
+                    <ChevronRight strokeWidth={2} size={18} />
                 </>
             ) : (
                 page &&
@@ -102,7 +102,7 @@ function Breadcrumb({ data, page }) {
                         >
                             {parse(page.title)}
                         </Link>
-                        <CircleChevronRight strokeWidth={2} size={18} />
+                        <ChevronRight strokeWidth={2} size={18} />
                     </>
                 )
             )}