@visns-studio/visns-components 5.15.2 → 5.15.3

package/README.md

@@ -9,10 +9,14 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
-## Recent Updates (v5.15.1)
+## Recent Updates (v5.15.3)
 
 ### Latest Enhancements
 
+- **Complete StandardModal Migration**: All components now use StandardModal instead of reactjs-popup for consistent modal behavior across the entire library
+- **HTML Content Support**: Terms and conditions now properly parse HTML content from TinyMCE editors with clean rendering
+- **Improved Typography**: Refined font sizing in Terms and Conditions to match page typography hierarchy
+- **Modal Component Refactoring**: StandardModal converted to pure React implementation with enhanced accessibility and mobile support
 - **Enhanced JSON Table Field**: Improved json-table field type with better styling, user experience, and data editing capabilities
 - **Dynamic Action Labels**: GenericDetail component now supports dynamic action labels and custom action buttons for better user interaction
 - **Dependency Updates**: Updated lucide-react to version 0.536.0 for improved icon consistency and performance
@@ -3379,6 +3383,29 @@ npm run build
 yarn build
 ```
 
+## Migration Notes
+
+### StandardModal Migration (v5.15.3) - COMPLETED
+
+We have successfully migrated all components from `reactjs-popup` to our standardized `StandardModal` component for improved consistency and better user experience.
+
+**All Migrations Completed ✅:**
+- ✅ **GenericQuote**: Updated to use StandardModal for form modals
+- ✅ **StandardModal**: Refactored to pure React implementation with enhanced accessibility
+- ✅ **Field.jsx**: Migrated 2 Popup instances (childFormShow and canvasPopupOpen)
+- ✅ **GenericFormBuilder.jsx**: Migrated 2 Popup instances (modalShow and modalFormShow)  
+- ✅ **DropZone.jsx**: Migrated 1 Popup instance (modalShow)
+- ✅ **modals/GalleryModal.jsx**: Migrated 1 Popup instance (modalGalleryShow) with custom overlay styling
+- ✅ **QuickAction.jsx**: Migrated 1 Popup instance (modalShow)
+- ✅ **Call.jsx**: Migrated 1 Popup instance (modalShow)
+
+**Benefits of StandardModal:**
+- Consistent modal behavior across all components
+- Better keyboard navigation and accessibility
+- Unified styling and responsive design
+- No external dependency on reactjs-popup
+- Enhanced mobile support with virtual keyboard accommodation
+
 ## Contributing
 
 We welcome contributions! Please follow these steps:
@@ -3633,6 +3660,13 @@ All existing GenericQuote functionality remains unchanged:
 
 Proposal features are **opt-in** and activated only when `proposalConfig.enabled: true` is set.
 
+**Recent Improvements (v5.15.3):**
+- **StandardModal Integration**: Replaced reactjs-popup with StandardModal for consistent modal behavior and better maintainability
+- **HTML Content Rendering**: Terms and conditions now support rich HTML content from TinyMCE editors with proper parsing via `html-react-parser`
+- **Typography Optimization**: Refined font sizing (14px desktop, 12px mobile) for better visual hierarchy and page consistency
+- **Enhanced Styling**: Improved CSS for HTML elements including lists, paragraphs, and formatted text in terms sections
+- **Complete Modal Consistency**: All modals throughout the library now use the same StandardModal component
+
 **Advanced Usage Example:**
 
 ```jsx

package/package.json

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

package/src/components/Call.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Popup from "reactjs-popup";
+import StandardModal from "./generic/StandardModal";
 import moment from "moment";
 
 import CustomFetch from "./Fetch";
@@ -124,12 +124,14 @@ function CallPop(props) {
                             </button>
                         </div>
                     </div>
-                    <Popup
-                        open={modalShow}
+                    <StandardModal
+                        isOpen={modalShow}
                         onClose={() => {
                             setCallShow(false);
                             setModalShow(false);
                         }}
+                        size="medium"
+                        closeOnDocumentClick={false}
                     >
                         <div className="modalwrap">
                             <div className="grid">
@@ -210,7 +212,7 @@ function CallPop(props) {
                                 </div>
                             </div>
                         </div>
-                    </Popup>
+                    </StandardModal>
                 </>
             ) : null}
         </>

package/src/components/DropZone.jsx

@@ -15,7 +15,7 @@ import {
 } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
-import Popup from 'reactjs-popup';
+import StandardModal from './generic/StandardModal';
 import imageCompression from 'browser-image-compression';
 
 import { confirmDialog } from './utils/ConfirmDialog';
@@ -637,9 +637,10 @@ function VisnsDropZone({ fetchData, files, settings, url, urlKey, deleteUrl, ent
                     </div>
                 ) : null}
             </div>
-            <Popup
-                open={modalShow}
+            <StandardModal
+                isOpen={modalShow}
                 onClose={modalClose}
+                size="large"
                 closeOnDocumentClick={false}
             >
                 <div className={`${styles.modalwrap} top--modal`}>
@@ -704,7 +705,7 @@ function VisnsDropZone({ fetchData, files, settings, url, urlKey, deleteUrl, ent
                         </div>
                     </div>
                 </div>
-            </Popup>
+            </StandardModal>
         </>
     );
 }

package/src/components/Field.jsx

@@ -6,7 +6,7 @@ import _ from 'lodash';
 import Toggle from 'react-toggle';
 import moment from 'moment';
 import parse from 'html-react-parser';
-import Popup from 'reactjs-popup';
+import StandardModal from './generic/StandardModal';
 import { Sketch } from '@uiw/react-color';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { NumericFormat, PatternFormat } from 'react-number-format';
@@ -3095,12 +3095,11 @@ function Field({
                 {renderFieldLabel()}
             </label>
             {renderAdditionalContainer()}
-            <Popup
-                open={childFormShow}
+            <StandardModal
+                isOpen={childFormShow}
                 onClose={childFormClose}
+                size="large"
                 closeOnDocumentClick={false}
-                overlayStyle={{ zIndex: 10001 }}
-                contentStyle={{ zIndex: 10002 }}
             >
                 <Form
                     ajaxSetting={childForm.ajaxSetting}
@@ -3118,13 +3117,12 @@ function Field({
                     updateForm={setChildForm}
                     userProfile={userProfile}
                 />
-            </Popup>
-            <Popup
-                open={canvasPopupOpen}
+            </StandardModal>
+            <StandardModal
+                isOpen={canvasPopupOpen}
                 onClose={() => setCanvasPopupOpen(false)}
+                size="large"
                 closeOnDocumentClick={false}
-                overlayStyle={{ zIndex: 10001 }}
-                contentStyle={{ zIndex: 10002 }}
             >
                 <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
                     <div className={styles.modal}>
@@ -3240,7 +3238,7 @@ function Field({
                         </div>
                     </div>
                 </div>
-            </Popup>
+            </StandardModal>
         </div>
     );
 }

package/src/components/QuickAction.jsx

@@ -6,7 +6,7 @@ import React, {
     useMemo,
 } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Popup from 'reactjs-popup';
+import StandardModal from './generic/StandardModal';
 import { Search, X, Zap } from 'lucide-react';
 
 import CustomFetch from './Fetch';
@@ -408,20 +408,11 @@ const QuickAction = ({ setting }) => {
                 </div>
             </div>
 
-            <Popup 
-                open={modalShow} 
+            <StandardModal
+                isOpen={modalShow}
                 onClose={modalClose}
+                size="large"
                 closeOnDocumentClick={false}
-                contentStyle={{
-                    width: '80vw',
-                    maxWidth: '1200px',
-                    minWidth: '600px',
-                    padding: 0,
-                    border: 'none',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    maxHeight: '90vh',
-                }}
             >
                 <Form
                     closeModal={modalClose}
@@ -431,7 +422,7 @@ const QuickAction = ({ setting }) => {
                     columnId={formId}
                     childDropdownCallback={childDropdownCallback}
                 />
-            </Popup>
+            </StandardModal>
         </>
     );
 };

package/src/components/generic/GenericFormBuilder.jsx

@@ -2,7 +2,7 @@ import '../styles/global.css';
 
 import React, { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import Popup from 'reactjs-popup';
+import StandardModal from './StandardModal';
 import { arrayMove } from '@dnd-kit/sortable';
 import {
     DndContext,
@@ -1222,12 +1222,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 </div>
             </div>
 
-            <Popup
-                open={modalShow}
+            <StandardModal
+                isOpen={modalShow}
                 onClose={handleCloseModal}
+                size="medium"
                 closeOnDocumentClick={false}
             >
-                {modalShow && <div className={styles.modalBackdrop} />}
                 <div className={styles.modalwrap}>
                     <div className={styles.modal}>
                         <div className={styles.modal__header}>
@@ -2254,14 +2254,14 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                         </div>
                     </div>
                 </div>
-            </Popup>
+            </StandardModal>
 
-            <Popup
-                open={modalFormShow}
+            <StandardModal
+                isOpen={modalFormShow}
                 onClose={handleCloseModalForm}
+                size="medium"
                 closeOnDocumentClick={false}
             >
-                {modalFormShow && <div className={styles.modalBackdrop} />}
                 <div className={styles.modalwrap}>
                     <div className={styles.modal}>
                         <div className={styles.modal__header}>
@@ -2308,7 +2308,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                         </div>
                     </div>
                 </div>
-            </Popup>
+            </StandardModal>
 
             {/* React Tooltips */}
             <Tooltip

package/src/components/generic/GenericQuote.jsx

@@ -2,11 +2,12 @@ import '../styles/global.css';
 
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import Popup from 'reactjs-popup';
+import StandardModal from './StandardModal';
 import moment from 'moment';
 import get from 'lodash/get';
 import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
+import parse from 'html-react-parser';
 import { arrayMoveImmutable } from 'array-move';
 import { showConfirmDialog } from './ConfirmationDialog';
 import { FileText, DollarSign, Clock, Eye, X, Edit3, FileEdit, Save, Settings } from 'lucide-react';
@@ -1988,61 +1989,57 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                             Terms and Conditions
                         </h3>
                         <div className={styles.termsContent}>
-                            {data.terms_and_condition}
+                            {parse(data.terms_and_condition || '')}
                         </div>
                     </div>
                 )}
             </div>
 
             {/* Form Modal */}
-            <Popup
-                open={modalShow}
+            <StandardModal
+                isOpen={modalShow}
                 onClose={modalClose}
+                size="large"
                 closeOnDocumentClick={false}
-                contentStyle={{ width: '80vw', maxWidth: '1200px' }}
             >
-                <div className="modalwrap top--modal modalWide">
-                    <div className="modal">
-                        <Form
-                            closeModal={modalClose}
-                            columnId={formId}
-                            fetchTable={() => {
-                                // Reload the quote data after form submission
-                                const fetchData = async () => {
-                                    if (
-                                        routeParams[urlParam] &&
-                                        routeParams[urlParam] > 0
-                                    ) {
-                                        try {
-                                            const res = await CustomFetch(
-                                                `${page.fetchUrl}/${routeParams[urlParam]}`,
-                                                'GET',
-                                                {}
-                                            );
-                                            setData(res.data);
-                                        } catch (error) {
-                                            console.error(
-                                                'Error fetching data:',
-                                                error
-                                            );
-                                        }
-                                    }
-                                };
-                                fetchData();
-                            }}
-                            formSettings={formData}
-                            formType={formType}
-                            style={form.style || {}}
-                            updateForm={setFormData}
-                            paramValue={
-                                routeParams[urlParam]
-                                    ? routeParams[urlParam]
-                                    : 0
+                <Form
+                    closeModal={modalClose}
+                    columnId={formId}
+                    fetchTable={() => {
+                        // Reload the quote data after form submission
+                        const fetchData = async () => {
+                            if (
+                                routeParams[urlParam] &&
+                                routeParams[urlParam] > 0
+                            ) {
+                                try {
+                                    const res = await CustomFetch(
+                                        `${page.fetchUrl}/${routeParams[urlParam]}`,
+                                        'GET',
+                                        {}
+                                    );
+                                    setData(res.data);
+                                } catch (error) {
+                                    console.error(
+                                        'Error fetching data:',
+                                        error
+                                    );
+                                }
                             }
-                        />
-                    </div>
-                </div>
-            </Popup>
+                        };
+                        fetchData();
+                    }}
+                    formSettings={formData}
+                    formType={formType}
+                    style={form.style || {}}
+                    updateForm={setFormData}
+                    paramValue={
+                        routeParams[urlParam]
+                            ? routeParams[urlParam]
+                            : 0
+                    }
+                />
+            </StandardModal>
         </div>
     );
 }

package/src/components/generic/StandardModal.jsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
-import Popup from 'reactjs-popup';
+import React, { useState, useEffect, useCallback } from 'react';
 import { X } from 'lucide-react';
 import formStyles from '../styles/Form.module.scss';
 
@@ -67,6 +66,37 @@ const StandardModal = ({
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, []);
+
+    // Handle keyboard events
+    const handleKeyDown = useCallback((e) => {
+        if (!isOpen) return;
+        
+        if (e.key === 'Escape' && closeOnEscape) {
+            onClose();
+        }
+    }, [isOpen, closeOnEscape, onClose]);
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'unset';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, handleKeyDown]);
+
+    // Handle backdrop click
+    const handleBackdropClick = (e) => {
+        if (closeOnDocumentClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+
     // Apply vertical alignment class if needed
     const getModalClasses = () => {
         let classes = formStyles.modal;
@@ -76,32 +106,47 @@ const StandardModal = ({
         return classes;
     };
 
-    // Get size-based styles for the popup content with device-aware positioning
-    const getContentStyle = () => {
+    // Get overlay styles
+    const getOverlayStyle = () => {
         const baseStyle = {
-            ...customStyles.modal
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: verticalAlign === 'top' ? 'flex-start' : 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+            padding: '20px',
+            ...customStyles.overlay
         };
 
-        // Device-specific positioning for virtual keyboard accommodation
-        let positioningStyle = {};
-        if (isMobile || isTablet) {
-            // Position modal higher on mobile/tablet to accommodate virtual keyboard
-            positioningStyle = {
-                top: '5%', // Position higher (5% from top)
-                left: '50%', // Center horizontally
-                transform: 'translateX(-50%)', // Only center horizontally, no vertical transform
-                maxHeight: '85vh', // Limit height to prevent overflow
-                overflowY: 'auto', // Allow scrolling within modal if needed
-                position: 'fixed' // Ensure fixed positioning for proper centering
-            };
+        if (verticalAlign === 'top') {
+            baseStyle.paddingTop = '5%';
         }
 
+        return baseStyle;
+    };
+
+    // Get size-based styles for the modal content with device-aware positioning
+    const getContentStyle = () => {
+        const baseStyle = {
+            position: 'relative',
+            backgroundColor: 'white',
+            borderRadius: '8px',
+            boxShadow: '0 10px 30px rgba(0, 0, 0, 0.3)',
+            maxHeight: isMobile || isTablet ? '85vh' : '90vh',
+            overflowY: 'auto',
+            ...customStyles.modal
+        };
+
         // Apply size-based styles with device considerations
         switch (size) {
             case 'small':
                 return {
                     ...baseStyle,
-                    ...positioningStyle,
                     width: isMobile ? '95vw' : '400px',
                     minWidth: isMobile ? '300px' : '400px',
                     maxWidth: isMobile ? '95vw' : '600px'
@@ -109,7 +154,6 @@ const StandardModal = ({
             case 'large':
                 return {
                     ...baseStyle,
-                    ...positioningStyle,
                     width: '95vw',
                     minWidth: isMobile ? '300px' : '800px',
                     maxWidth: isMobile ? '95vw' : '1600px'
@@ -118,51 +162,55 @@ const StandardModal = ({
             default:
                 return {
                     ...baseStyle,
-                    ...positioningStyle,
-                    width: isMobile ? '95vw' : '90vw',
+                    width: isMobile ? '95vw' : '80vw',
                     minWidth: isMobile ? '300px' : '600px',
-                    maxWidth: isMobile ? '95vw' : '1400px'
+                    maxWidth: isMobile ? '95vw' : '1200px'
                 };
         }
     };
 
+    if (!isOpen) {
+        return null;
+    }
+
     return (
-        <Popup
-            open={isOpen}
-            onClose={onClose}
-            modal
-            closeOnDocumentClick={closeOnDocumentClick}
-            closeOnEscape={closeOnEscape}
-            contentStyle={getContentStyle()}
+        <div 
+            style={getOverlayStyle()}
+            onClick={handleBackdropClick}
         >
-            <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 
+                style={getContentStyle()}
+                onClick={(e) => e.stopPropagation()}
+            >
+                <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>
             </div>
-        </Popup>
+        </div>
     );
 };
 

package/src/components/modals/GalleryModal.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Popup from 'reactjs-popup';
+import StandardModal from '../generic/StandardModal';
 import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 // import Vapor from 'laravel-vapor'; // Commented out to avoid build issues
@@ -169,22 +169,15 @@ const GalleryModal = ({
 
     return (
         <>
-            <Popup
-                open={modalGalleryShow}
+            <StandardModal
+                isOpen={modalGalleryShow}
                 onClose={modalGalleryClose}
+                size="large"
                 closeOnDocumentClick={false}
-                contentStyle={{
-                    width: '90vw',
-                    maxWidth: '1400px',
-                    minWidth: '600px',
-                    padding: 0,
-                    border: 'none',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    maxHeight: '90vh',
-                }}
-                overlayStyle={{
-                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                customStyles={{
+                    overlay: {
+                        backgroundColor: 'rgba(0, 0, 0, 0.7)'
+                    }
                 }}
             >
                 <div className={styles.modalwrap}>
@@ -390,7 +383,7 @@ const GalleryModal = ({
                         </div>
                     </div>
                 </div>
-            </Popup>
+            </StandardModal>
 
             {/* Lightbox for full-size image viewing */}
             <Lightbox

package/src/components/styles/GenericQuote.module.scss

@@ -1061,10 +1061,49 @@
 }
 
 .termsContent {
-    font-size: 0.9rem;
-    line-height: 1.6;
+    font-size: 14px;
+    line-height: 1.4;
     color: var(--paragraph-color);
-    white-space: pre-wrap;
+    
+    /* Reset styles to avoid conflicts with TinyMCE HTML content */
+    white-space: normal;
+    
+    /* Basic styling for TinyMCE HTML elements */
+    ul, ol {
+        margin: 8px 0;
+        padding-left: 20px;
+    }
+    
+    li {
+        margin: 4px 0;
+        padding: 0;
+    }
+    
+    p {
+        margin: 8px 0;
+    }
+    
+    strong, b {
+        font-weight: 600;
+    }
+    
+    em, i {
+        font-style: italic;
+    }
+    
+    /* Remove excessive spacing from nested elements */
+    ul ul, ol ol, ul ol, ol ul {
+        margin: 2px 0;
+    }
+    
+    /* Ensure proper spacing for the first and last elements */
+    > *:first-child {
+        margin-top: 0;
+    }
+    
+    > *:last-child {
+        margin-bottom: 0;
+    }
 }
 
 .quoteTableSection {
@@ -1387,7 +1426,7 @@
     }
 
     .termsContent {
-        font-size: 0.85rem;
-        line-height: 1.5;
+        font-size: 12px;
+        line-height: 1.3;
     }
 }