@visns-studio/visns-components 5.14.8 → 5.14.9

package/README.md

@@ -50,6 +50,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 -   **Download** - File download functionality
 -   **Loader** - Loading indicators
 -   **Notification** - Toast notifications
+-   **StandardModal** - Reusable modal component with consistent styling
 -   **Call Popup** - Modal dialogs
 -   **QR Code** - QR code generation and printing
 
@@ -2312,6 +2313,64 @@ The QrCode component fetches QR code data from the specified URL and displays it
 }
 ```
 
+#### StandardModal
+
+A reusable modal component that standardizes the look and feel across all components. Uses the same styling as GenericIndex, GenericDetail, and DataGrid modals, providing consistent modal behavior throughout the application.
+
+```jsx
+import { StandardModal } from '@visns-studio/visns-components';
+
+// Basic usage (for custom content with header)
+<StandardModal
+    isOpen={showModal}
+    onClose={() => setShowModal(false)}
+    title="Modal Title"
+    showHeader={true}
+>
+    <div>Your custom content here</div>
+</StandardModal>
+
+// Usage with Form components (no header - Form provides its own)
+<StandardModal
+    isOpen={modalShow}
+    onClose={modalClose}
+    closeOnDocumentClick={false}
+    verticalAlign="top"
+>
+    <Form
+        closeModal={modalClose}
+        formSettings={formData}
+        // ... other Form props
+    />
+</StandardModal>
+```
+
+**Props:**
+
+- `isOpen` (boolean): Whether the modal is open
+- `onClose` (function): Function to call when modal should close
+- `title` (string): Modal title (only used if showHeader is true)
+- `children` (ReactNode): Modal content
+- `size` (string): Modal size - 'small' (400px), 'medium' (90vw, default), 'large' (95vw)
+- `closeOnDocumentClick` (boolean): Whether to close on outside click (default: true)
+- `closeOnEscape` (boolean): Whether to close on escape key (default: true)
+- `verticalAlign` (string): Vertical alignment - 'center' (default) or 'top'
+- `showHeader` (boolean): Whether to show modal header (default: false)
+- `customStyles` (object): Custom styles to override defaults
+
+**Size Options:**
+
+- **Small**: 400px width, ideal for simple dialogs and confirmations
+- **Medium** (default): 90vw width with 600px min and 1400px max, matches original modal sizing
+- **Large**: 95vw width with 800px min and 1600px max, for very large content
+
+**Important Notes:**
+
+- When wrapping Form components, use `showHeader={false}` (default) since Form components render their own headers
+- When creating custom modals with simple content, use `showHeader={true}` to display the title and close button
+- The component automatically handles responsive sizing and vertical alignment
+- Uses the same CSS classes as existing modals (modalwrap, modal, modal__header, modal__content)
+
 ### Enhanced OCR Template Component
 
 #### OcrTemplateEnhanced (v5.14.0+)

package/package.json

@@ -88,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.8",
+    "version": "5.14.9",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -30,7 +30,6 @@ import React, {
 import { useNavigate } from 'react-router-dom';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
-import Popup from 'reactjs-popup';
 import 'reactjs-popup/dist/index.css';
 import parse from 'html-react-parser';
 import { saveAs } from 'file-saver';
@@ -80,6 +79,7 @@ import CustomFetch from './Fetch';
 import Download from './Download';
 import Form from './Form';
 import CellWithTooltip from './cells/CellWithTooltip';
+import StandardModal from './generic/StandardModal';
 import DataGridSearch from './controls/DataGridSearch';
 import AutoRefreshControls from './controls/AutoRefreshControls';
 import AudioPlayer from './controls/AudioPlayer';
@@ -3714,55 +3714,32 @@ const DataGrid = forwardRef(
                 )}
 
                 <AudioPlayer audioSource={audioSource} />
-                <Popup
-                    open={modalShow}
+                <StandardModal
+                    isOpen={modalShow}
                     onClose={modalClose}
+                    title={formData.title || 'Edit Data'}
                     closeOnDocumentClick={false}
-                    contentStyle={{
-                        width: windowWidth < 768 ? '95vw' : '90vw',
-                        minWidth: windowWidth < 768 ? '95vw' : '600px',
-                        maxWidth: '1400px',
-                        ...(formData.verticalAlign === 'top' && {
-                            position: 'fixed',
-                            top: '5vh',
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            margin: '0',
-                        }),
-                    }}
-                    nested
+                    verticalAlign={formData.verticalAlign || 'center'}
                 >
-                    <div
-                        className={`${styles.modalwrap} ${
-                            styles['top--modal']
-                        } ${styles.modalWide} ${
-                            formData.verticalAlign === 'top'
-                                ? 'modal-top-aligned'
-                                : ''
-                        }`}
-                    >
-                        <div className={styles.modal}>
-                            <Form
-                                ajaxSetting={ajaxSetting}
-                                api={api}
-                                closeModal={modalClose}
-                                columnId={formId}
-                                fetchTable={handleReload}
-                                formSettings={formData}
-                                formType={formType}
-                                gridRef={gridRef}
-                                mapbox={mapbox}
-                                modalOpen={modalOpen}
-                                paramValue={paramValue}
-                                style={style}
-                                updateForm={setFormData}
-                                userProfile={userProfile}
-                                bulkEditMode={bulkEditMode}
-                                bulkEditGroupData={bulkEditGroupData}
-                            />
-                        </div>
-                    </div>
-                </Popup>
+                    <Form
+                        ajaxSetting={ajaxSetting}
+                        api={api}
+                        closeModal={modalClose}
+                        columnId={formId}
+                        fetchTable={handleReload}
+                        formSettings={formData}
+                        formType={formType}
+                        gridRef={gridRef}
+                        mapbox={mapbox}
+                        modalOpen={modalOpen}
+                        paramValue={paramValue}
+                        style={style}
+                        updateForm={setFormData}
+                        userProfile={userProfile}
+                        bulkEditMode={bulkEditMode}
+                        bulkEditGroupData={bulkEditGroupData}
+                    />
+                </StandardModal>
                 <GalleryModal
                     modalGalleryShow={modalGalleryShow}
                     modalGalleryClose={modalGalleryClose}

package/src/components/generic/GenericDashboard.jsx

@@ -4,15 +4,15 @@ import { Link, useNavigate } from 'react-router-dom';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsiveLine } from '@nivo/line';
 import { ResponsivePie } from '@nivo/pie';
-import Popup from 'reactjs-popup';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
-import { X, Minus, Plus, Star, Trash2, Eye, RotateCcw, Clock, Database, BarChart3, AlertCircle } from 'lucide-react';
+import { Minus, Plus, Star, Trash2, Eye, RotateCcw, Clock, Database, BarChart3, AlertCircle } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';
+import StandardModal from './StandardModal';
 
 import styles from '../styles/GenericDashboard.module.scss';
 
@@ -1961,63 +1961,49 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
             )}
             <div className={styles.grid} ref={container}>
                 {renderWidgets()}
-                <Popup
-                    open={showAddWidgetModal}
+                <StandardModal
+                    isOpen={showAddWidgetModal}
                     onClose={() => setShowAddWidgetModal(false)}
-                    modal
+                    title="Add a Widget"
+                    showHeader={true}
                 >
-                    <div className="modalwrap">
-                        <div className={`${styles.addWidgetPopup} modal`}>
-                            <div className="modal__header">
-                                <h1>Add a Widget</h1>
-                                <button
-                                    className="modal__close"
-                                    onClick={() => setShowAddWidgetModal(false)}
-                                >
-                                    <X strokeWidth={1} size={24} />
-                                </button>
-                            </div>
-                            <div className="modal__content">
-                                {availableWidgets.length > 0 ? (
-                                    <div>
-                                        <select
-                                            value={selectedAddWidgetId}
-                                            onChange={(e) =>
-                                                setSelectedAddWidgetId(
-                                                    e.target.value
-                                                )
-                                            }
-                                            className={styles.addWidgetSelect}
-                                        >
-                                            <option value="">
-                                                -- Select a widget --
-                                            </option>
-                                            {availableWidgets.map((widget) => (
-                                                <option
-                                                    key={widget.id}
-                                                    value={widget.id}
-                                                >
-                                                    {widget.title}
-                                                </option>
-                                            ))}
-                                        </select>
-                                        <button
-                                            className={styles.addWidgetButton}
-                                            onClick={handleAddWidget}
-                                            disabled={!selectedAddWidgetId}
-                                        >
-                                            Add
-                                        </button>
-                                    </div>
-                                ) : (
-                                    <div className={styles.noWidgetsMessage}>
-                                        No more widgets available
-                                    </div>
-                                )}
-                            </div>
+                    {availableWidgets.length > 0 ? (
+                        <div>
+                            <select
+                                value={selectedAddWidgetId}
+                                onChange={(e) =>
+                                    setSelectedAddWidgetId(
+                                        e.target.value
+                                    )
+                                }
+                                className={styles.addWidgetSelect}
+                            >
+                                <option value="">
+                                    -- Select a widget --
+                                </option>
+                                {availableWidgets.map((widget) => (
+                                    <option
+                                        key={widget.id}
+                                        value={widget.id}
+                                    >
+                                        {widget.title}
+                                    </option>
+                                ))}
+                            </select>
+                            <button
+                                className={styles.addWidgetButton}
+                                onClick={handleAddWidget}
+                                disabled={!selectedAddWidgetId}
+                            >
+                                ADD
+                            </button>
                         </div>
-                    </div>
-                </Popup>
+                    ) : (
+                        <div className={styles.noWidgetsMessage}>
+                            No more widgets available
+                        </div>
+                    )}
+                </StandardModal>
             </div>
         </>
     );

package/src/components/generic/GenericDetail.jsx

@@ -39,7 +39,6 @@ import { Calendar, momentLocalizer } from 'react-big-calendar';
 import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
 import moment from 'moment';
 import parse from 'html-react-parser';
-import Popup from 'reactjs-popup';
 import { motion } from 'framer-motion';
 import Dropzone from 'react-dropzone';
 import truncate from 'truncate';
@@ -79,6 +78,7 @@ import MergeEntity from '../MergeEntity';
 import MultiSelect from '../MultiSelect';
 import QrCode from '../QrCode';
 import StagePopupModal from './StagePopupModal';
+import StandardModal from './StandardModal';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 import CategorizedDropZone from '../CategorizedDropZone';
@@ -3831,51 +3831,29 @@ function GenericDetail({
                 </div>
             </div>
 
-            <Popup
-                open={modalShow}
+            <StandardModal
+                isOpen={modalShow}
                 onClose={modalClose}
+                title={formData.title || 'Edit Details'}
                 closeOnDocumentClick={false}
-                contentStyle={{
-                    width: windowWidth < 768 ? '95vw' : '90vw',
-                    minWidth: windowWidth < 768 ? '95vw' : '600px',
-                    maxWidth: '1400px',
-                    ...(formData.verticalAlign === 'top' && {
-                        position: 'fixed',
-                        top: '5vh',
-                        left: '50%',
-                        transform: 'translateX(-50%)',
-                        margin: '0',
-                    }),
-                }}
+                verticalAlign={formData.verticalAlign || 'center'}
             >
-                <div
-                    className={`${styles.modalwrap} ${
-                            styles['top--modal']
-                        } ${styles.modalWide} ${
-                        formData.verticalAlign === 'top'
-                            ? 'modal-top-aligned'
-                            : ''
-                    }`}
-                >
-                    <div className={styles.modal}>
-                        <Form
-                            closeModal={modalClose}
-                            columnId={formId}
-                            fetchTable={handleReload}
-                            formSettings={formData}
-                            formType={formType}
-                            style={userProfile?.settings?.style || {}}
-                            updateForm={setFormData}
-                            userProfile={userProfile}
-                            paramValue={
-                                routeParams[urlParam]
-                                    ? routeParams[urlParam]
-                                    : 0
-                            }
-                        />
-                    </div>
-                </div>
-            </Popup>
+                <Form
+                    closeModal={modalClose}
+                    columnId={formId}
+                    fetchTable={handleReload}
+                    formSettings={formData}
+                    formType={formType}
+                    style={userProfile?.settings?.style || {}}
+                    updateForm={setFormData}
+                    userProfile={userProfile}
+                    paramValue={
+                        routeParams[urlParam]
+                            ? routeParams[urlParam]
+                            : 0
+                    }
+                />
+            </StandardModal>
 
             <StagePopupModal
                 show={showStagePopup}

package/src/components/generic/GenericIndex.jsx

@@ -7,7 +7,6 @@ import { saveAs } from 'file-saver';
 import _ from 'lodash';
 import parse from 'html-react-parser';
 import moment from 'moment';
-import Popup from 'reactjs-popup';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';
@@ -16,6 +15,7 @@ import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 import GenericGrid from './GenericGrid';
 import GenericReportForm from './GenericReportForm';
+import StandardModal from './StandardModal';
 
 import styles from '../styles/GenericIndex.module.scss';
 
@@ -1006,44 +1006,22 @@ function GenericIndex({
             </div>
 
             {/* Custom Action Modal */}
-            <Popup
-                open={customActionModalShow}
+            <StandardModal
+                isOpen={customActionModalShow}
                 onClose={closeCustomActionModal}
+                title={customActionFormData.title || 'Custom Action'}
                 closeOnDocumentClick={false}
-                contentStyle={{
-                    width: windowWidth < 768 ? '95vw' : '90vw',
-                    minWidth: windowWidth < 768 ? '95vw' : '600px',
-                    maxWidth: '1400px',
-                    ...(customActionFormData.verticalAlign === 'top' && {
-                        position: 'fixed',
-                        top: '5vh',
-                        left: '50%',
-                        transform: 'translateX(-50%)',
-                        margin: '0',
-                    }),
-                }}
+                verticalAlign={customActionFormData.verticalAlign || 'center'}
             >
-                <div
-                    className={`${styles.modalwrap} ${
-                            styles['top--modal']
-                        } ${styles.modalWide} ${
-                        customActionFormData.verticalAlign === 'top'
-                            ? 'modal-top-aligned'
-                            : ''
-                    }`}
-                >
-                    <div className={styles.modal}>
-                        <Form
-                            closeModal={closeCustomActionModal}
-                            formSettings={customActionFormData}
-                            formType="create"
-                            fetchTable={handleCustomActionSubmit}
-                            style={userProfile?.settings?.style || {}}
-                            userProfile={userProfile}
-                        />
-                    </div>
-                </div>
-            </Popup>
+                <Form
+                    closeModal={closeCustomActionModal}
+                    formSettings={customActionFormData}
+                    formType="create"
+                    fetchTable={handleCustomActionSubmit}
+                    style={userProfile?.settings?.style || {}}
+                    userProfile={userProfile}
+                />
+            </StandardModal>
         </>
     );
 }

package/src/components/generic/StandardModal.jsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import Popup from 'reactjs-popup';
+import { X } from 'lucide-react';
+import formStyles from '../styles/Form.module.scss';
+
+/**
+ * StandardModal Component
+ * 
+ * A reusable modal component that standardizes the look and feel across all components.
+ * Uses the same styles as GenericIndex, GenericDetail, and DataGrid via Form.module.scss.
+ * 
+ * @param {Object} props
+ * @param {boolean} props.isOpen - Whether the modal is open
+ * @param {Function} props.onClose - Function to call when modal should close
+ * @param {string} props.title - Modal title (only used if showHeader is true)
+ * @param {React.ReactNode} props.children - Modal content
+ * @param {string} props.size - Modal size: 'small', 'medium', 'large' (default: 'medium')
+ * @param {boolean} props.closeOnDocumentClick - Whether to close on outside click (default: true)
+ * @param {boolean} props.closeOnEscape - Whether to close on escape key (default: true)
+ * @param {string} props.verticalAlign - Vertical alignment: 'center', 'top' (default: 'center')
+ * @param {boolean} props.showHeader - Whether to show modal header (default: false, because Form components have their own headers)
+ * @param {Object} props.customStyles - Custom styles to override defaults
+ */
+const StandardModal = ({
+    isOpen,
+    onClose,
+    title,
+    children,
+    size = 'medium',
+    closeOnDocumentClick = true,
+    closeOnEscape = true,
+    verticalAlign = 'center',
+    showHeader = false,
+    customStyles = {}
+}) => {
+    // Apply vertical alignment class if needed
+    const getModalClasses = () => {
+        let classes = formStyles.modal;
+        if (verticalAlign === 'top') {
+            classes += ' modal-top-aligned';
+        }
+        return classes;
+    };
+
+    // Get size-based styles for the popup content
+    const getContentStyle = () => {
+        const baseStyle = {
+            ...customStyles.modal
+        };
+
+        // Apply size-based styles
+        switch (size) {
+            case 'small':
+                return {
+                    ...baseStyle,
+                    width: '400px',
+                    minWidth: '400px',
+                    maxWidth: '600px'
+                };
+            case 'large':
+                return {
+                    ...baseStyle,
+                    width: '95vw',
+                    minWidth: '800px',
+                    maxWidth: '1600px'
+                };
+            case 'medium':
+            default:
+                // Use the same dimensions as modalWide class (original modal sizing)
+                return {
+                    ...baseStyle,
+                    width: '90vw',
+                    minWidth: '600px',
+                    maxWidth: '1400px'
+                };
+        }
+    };
+
+    return (
+        <Popup
+            open={isOpen}
+            onClose={onClose}
+            modal
+            closeOnDocumentClick={closeOnDocumentClick}
+            closeOnEscape={closeOnEscape}
+            contentStyle={getContentStyle()}
+        >
+            <div className={formStyles.modalwrap}>
+                <div 
+                    className={getModalClasses()}
+                >
+                    {showHeader && (
+                        <div className={formStyles.modal__header} style={customStyles.header}>
+                            <h1 style={customStyles.title}>{title}</h1>
+                            <button
+                                className={formStyles.modal__close}
+                                onClick={onClose}
+                                style={customStyles.closeButton}
+                                type="button"
+                                aria-label="Close modal"
+                            >
+                                <X strokeWidth={1} size={24} />
+                            </button>
+                        </div>
+                    )}
+                    {showHeader ? (
+                        <div className={formStyles.modal__content} style={customStyles.content}>
+                            {children}
+                        </div>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </div>
+        </Popup>
+    );
+};
+
+export default StandardModal;

package/src/index.js

@@ -72,6 +72,7 @@ import GenericSort from './components/generic/GenericSort';
 import NotificationList from './components/generic/NotificationList';
 import OcrTemplateEnhanced from './components/generic/OcrTemplateEnhanced';
 import StagePopupModal from './components/generic/StagePopupModal';
+import StandardModal from './components/generic/StandardModal';
 
 /** Proposal Components */
 import ProposalTemplateSectionManager from './components/proposal/ProposalTemplateSectionManager';
@@ -145,6 +146,7 @@ export {
     showConfirmDialog,
     SortableList,
     StagePopupModal,
+    StandardModal,
     Table,
     TableFilter,
     VariableInserter,