@visns-studio/visns-components 5.9.12 → 5.9.13

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -385,7 +385,6 @@ const CellWithTooltip = ({
     );
 };
 
-
 const DataGrid = forwardRef(
     (
         {
@@ -622,7 +621,6 @@ const DataGrid = forwardRef(
             if (ajaxSetting?.groupBy) {
                 groupsInitializedRef.current = false;
                 setCollapsedGroups({}); // Clear existing state when groupBy changes
-                
             }
         }, [ajaxSetting?.groupBy]);
 
@@ -746,7 +744,7 @@ const DataGrid = forwardRef(
                         setTableData(res.data);
                     }
                     dataRef.current = res.data;
-                    
+
                     // Force grid to recalculate row heights after data changes
                     // This helps with multi-line content timing without interfering with core mechanisms
                     setTimeout(() => {
@@ -1673,10 +1671,15 @@ const DataGrid = forwardRef(
 
                 rowProps.onClick = (event) => {
                     // Check if this is a group row - group rows should only handle expand/collapse, not onRowClick
-                    const isGroupRow = rowProps.isGroupRow || 
-                                     rowProps.data?.__group || 
-                                     event.target.closest('.InovuaReactDataGrid__group-row') ||
-                                     event.target.closest('.InovuaReactDataGrid__group-cell');
+                    const isGroupRow =
+                        rowProps.isGroupRow ||
+                        rowProps.data?.__group ||
+                        event.target.closest(
+                            '.InovuaReactDataGrid__group-row'
+                        ) ||
+                        event.target.closest(
+                            '.InovuaReactDataGrid__group-cell'
+                        );
 
                     if (isGroupRow) {
                         // For group rows, only allow the original onClick handler (for expand/collapse)
@@ -2274,7 +2277,7 @@ const DataGrid = forwardRef(
                 // Apply immediately and with a conservative delay
                 applyGroupedStyling();
                 const timer1 = setTimeout(applyGroupedStyling, 100);
-                
+
                 return () => {
                     clearTimeout(timer1);
                 };

package/src/components/crm/auth/styles/AuthForm.module.scss

@@ -0,0 +1,443 @@
+// Base layout styles
+.authLayout {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f9fafb;
+    padding: 1rem;
+}
+
+.authContainer {
+    width: 100%;
+    max-width: 500px;
+    
+    @media (max-width: 768px) {
+        max-width: 95%;
+        width: 95%;
+    }
+}
+
+.authWrapper {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+}
+
+.formContainer {
+    padding: 2.5rem;
+    
+    @media (max-width: 768px) {
+        padding: 2rem;
+    }
+    
+    @media (max-width: 480px) {
+        padding: 1.5rem;
+    }
+}
+
+.formContent {
+    width: 100%;
+}
+
+// Logo styles
+.logo {
+    display: block;
+    margin: 0 auto 2rem;
+    max-width: 150px;
+    height: auto;
+}
+
+// Typography
+.title {
+    text-align: center;
+    margin-bottom: 0.5rem;
+    color: #111827;
+    font-weight: 600;
+    font-size: 1.75rem;
+    line-height: 1.2;
+    
+    @media (max-width: 768px) {
+        font-size: 1.5rem;
+    }
+}
+
+.subtitle {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: #6b7280;
+    font-size: 0.875rem;
+    line-height: 1.4;
+}
+
+// Form fields wrapper
+.formFields {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    
+    @media (max-width: 768px) {
+        gap: 1.5rem;
+    }
+}
+
+// Form group (wrapper for each field)
+.formGroup {
+    position: relative;
+    width: 100%;
+}
+
+// Input wrapper and styles
+.inputWrapper {
+    position: relative;
+    width: 100%;
+}
+
+.inputLabel {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #374151;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.input {
+    width: 100%;
+    padding: 1rem 2.5rem 1rem 1rem;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    transition: all 0.2s ease-in-out;
+    background-color: #ffffff;
+    color: #111827;
+    min-height: 48px;
+    
+    @media (max-width: 768px) {
+        font-size: 16px; /* Prevents zoom on iOS */
+        min-height: 52px;
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color, #4f46e5);
+        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+    }
+
+    &::placeholder {
+        color: #9ca3af;
+        opacity: 1;
+    }
+
+    &:focus::placeholder {
+        opacity: 0.5;
+    }
+}
+
+.inputError {
+    border-color: #ef4444;
+    
+    &:focus {
+        border-color: #ef4444;
+        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+}
+
+.inputDisabled {
+    background-color: #f9fafb;
+    color: #9ca3af;
+    cursor: not-allowed;
+}
+
+.labelError {
+    color: #ef4444;
+}
+
+.inputIcon {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    pointer-events: none;
+    z-index: 2;
+}
+
+// Error message styles
+.errorMessage {
+    margin-top: 0.5rem;
+    color: #ef4444;
+    font-size: 0.875rem;
+    line-height: 1.4;
+}
+
+// Button styles
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 1rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    position: relative;
+    text-decoration: none;
+    line-height: 1.2;
+    min-height: 48px;
+    
+    @media (max-width: 768px) {
+        min-height: 52px;
+        font-size: 1rem;
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+}
+
+.button--primary {
+    background-color: var(--primary-color, #4f46e5);
+    color: white;
+
+    &:hover:not(:disabled) {
+        background-color: var(--primary-color-dark, #3730a3);
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
+    }
+}
+
+.button--secondary {
+    background-color: #6b7280;
+    color: white;
+
+    &:hover:not(:disabled) {
+        background-color: #4b5563;
+    }
+}
+
+.button--outline {
+    background-color: transparent;
+    color: var(--primary-color, #4f46e5);
+    border: 2px solid var(--primary-color, #4f46e5);
+
+    &:hover:not(:disabled) {
+        background-color: var(--primary-color, #4f46e5);
+        color: white;
+    }
+}
+
+.button--danger {
+    background-color: #ef4444;
+    color: white;
+
+    &:hover:not(:disabled) {
+        background-color: #dc2626;
+    }
+}
+
+.button--success {
+    background-color: #10b981;
+    color: white;
+
+    &:hover:not(:disabled) {
+        background-color: #059669;
+    }
+}
+
+.button--small {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
+.button--medium {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+}
+
+.button--large {
+    padding: 1rem 2rem;
+    font-size: 1.125rem;
+}
+
+.button--fullWidth {
+    width: 100%;
+}
+
+.button--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.buttonText {
+    flex: 1;
+}
+
+.buttonIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.buttonSpinner {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid transparent;
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// Checkbox styles
+.checkboxGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.checkboxWrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.checkbox {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid #d1d5db;
+    border-radius: 4px;
+    background-color: white;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:checked {
+        background-color: var(--primary-color, #4f46e5);
+        border-color: var(--primary-color, #4f46e5);
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+    }
+}
+
+.checkboxError {
+    border-color: #ef4444;
+}
+
+.checkboxDisabled {
+    background-color: #f9fafb;
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.checkboxLabel {
+    color: #374151;
+    font-size: 0.875rem;
+    cursor: pointer;
+    user-select: none;
+    line-height: 1.4;
+}
+
+.checkboxLabelDisabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+}
+
+// Utility classes
+.divider {
+    position: relative;
+    margin: 1.5rem 0;
+    text-align: center;
+    color: #6b7280;
+    font-size: 0.875rem;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background-color: #e5e7eb;
+        z-index: 0;
+    }
+
+    span {
+        background-color: white;
+        padding: 0 1rem;
+        position: relative;
+        z-index: 1;
+    }
+}
+
+.linkButton {
+    background: none;
+    border: none;
+    color: var(--primary-color, #4f46e5);
+    text-decoration: underline;
+    cursor: pointer;
+    font-size: 0.875rem;
+    padding: 0;
+
+    &:hover {
+        color: var(--primary-color-dark, #3730a3);
+    }
+
+    &:focus {
+        outline: 2px solid var(--primary-color, #4f46e5);
+        outline-offset: 2px;
+    }
+}
+
+// Responsive design
+@media (max-width: 480px) {
+    .authLayout {
+        padding: 0.5rem;
+    }
+
+    .authContainer {
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .formContainer {
+        padding: 1.5rem;
+    }
+
+    .title {
+        font-size: 1.375rem;
+    }
+
+    .formFields {
+        gap: 1.25rem;
+    }
+    
+    .input {
+        padding: 1rem;
+        font-size: 16px;
+    }
+    
+    .button {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+}