@visns-studio/visns-components 5.14.16 → 5.14.17

package/package.json

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

package/src/components/Field.jsx

@@ -25,6 +25,7 @@ import {
     X,
 } from 'lucide-react';
 import { toast } from 'react-toastify';
+import validator from 'validator';
 import styles from './styles/Field.module.scss';
 
 import CustomFetch from './Fetch';
@@ -81,6 +82,9 @@ function Field({
     const [formItemStyle, setFormItemStyle] = useState({});
     const [formItemClass, setFormItemClass] = useState('');
     const [options, setOptions] = useState([]);
+    const [emailError, setEmailError] = useState('');
+    const [emailSuggestions, setEmailSuggestions] = useState([]);
+    const [showEmailSuggestions, setShowEmailSuggestions] = useState(false);
 
     /** Canvas States */
     const [canvasPopupOpen, setCanvasPopupOpen] = useState(false);
@@ -91,6 +95,91 @@ function Field({
     const [lineColor, setLineColor] = useState('rgba(0, 0, 0, 1)');
     const sketchRef = useRef(null);
 
+    /** Email Functions */
+    const validateEmail = (email) => {
+        if (!email) {
+            setEmailError('');
+            return true;
+        }
+        
+        if (!validator.isEmail(email)) {
+            setEmailError('Please enter a valid email address');
+            return false;
+        }
+        
+        setEmailError('');
+        return true;
+    };
+
+    const generateEmailSuggestions = (inputEmail) => {
+        if (!inputEmail || inputEmail.length < 3) {
+            setEmailSuggestions([]);
+            setShowEmailSuggestions(false);
+            return;
+        }
+
+        const commonDomains = [
+            'gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 
+            'icloud.com', 'live.com', 'msn.com', 'aol.com',
+            'company.com', 'business.com', 'work.com'
+        ];
+
+        const suggestions = [];
+        const [localPart, domainPart] = inputEmail.split('@');
+        
+        if (!localPart) return;
+
+        if (!domainPart || domainPart.length === 0) {
+            // If no @ symbol or no domain part, suggest common domains
+            commonDomains.forEach(domain => {
+                suggestions.push(`${localPart}@${domain}`);
+            });
+        } else if (domainPart.length > 0 && domainPart.length < 4) {
+            // If domain part is short, suggest completions
+            commonDomains.forEach(domain => {
+                if (domain.toLowerCase().startsWith(domainPart.toLowerCase())) {
+                    suggestions.push(`${localPart}@${domain}`);
+                }
+            });
+        } else {
+            // Check for common typos and suggest corrections
+            const typoMap = {
+                'gmial.com': 'gmail.com',
+                'gmai.com': 'gmail.com',
+                'yahooo.com': 'yahoo.com',
+                'hotmial.com': 'hotmail.com',
+                'outlok.com': 'outlook.com',
+                'iclou.com': 'icloud.com'
+            };
+            
+            if (typoMap[domainPart.toLowerCase()]) {
+                suggestions.push(`${localPart}@${typoMap[domainPart.toLowerCase()]}`);
+            }
+        }
+
+        setEmailSuggestions(suggestions.slice(0, 5)); // Limit to 5 suggestions
+        setShowEmailSuggestions(suggestions.length > 0);
+    };
+
+    const handleEmailChange = (e) => {
+        const email = e.target.value;
+        validateEmail(email);
+        generateEmailSuggestions(email);
+        onChange(e);
+    };
+
+    const selectEmailSuggestion = (suggestion) => {
+        const syntheticEvent = {
+            target: {
+                dataset: { name: settings.id },
+                value: suggestion
+            }
+        };
+        validateEmail(suggestion);
+        setShowEmailSuggestions(false);
+        onChange(syntheticEvent);
+    };
+
     /** Canvas Functions */
     const handleCanvasSave = async () => {
         // Save the current canvas state
@@ -469,6 +558,7 @@ function Field({
                     'dropdown',
                     'dropdown-ajax',
                     'dynamicdata',
+                    'email',
                     'file',
                     'gallery',
                     'image',
@@ -2073,6 +2163,49 @@ function Field({
                         autoComplete="off"
                     />
                 );
+            case 'email':
+                return (
+                    <div className={styles.emailFieldContainer}>
+                        <input
+                            type="email"
+                            data-name={settings.id}
+                            className={`${inputClass[settings.id]} ${emailError ? styles.emailError : ''}`}
+                            placeholder="Enter email address"
+                            onChange={handleEmailChange}
+                            onBlur={() => setShowEmailSuggestions(false)}
+                            onFocus={() => generateEmailSuggestions(inputValue || '')}
+                            value={
+                                inputValue && inputValue !== 'null'
+                                    ? inputValue
+                                    : ''
+                            }
+                            readOnly={settings.readOnly ? settings.readOnly : false}
+                            autoComplete="email"
+                            spellCheck={false}
+                        />
+                        {emailError && (
+                            <div className={styles.emailErrorMessage}>
+                                {emailError}
+                            </div>
+                        )}
+                        {showEmailSuggestions && emailSuggestions.length > 0 && (
+                            <div className={styles.emailSuggestions}>
+                                {emailSuggestions.map((suggestion, index) => (
+                                    <div
+                                        key={index}
+                                        className={styles.emailSuggestion}
+                                        onMouseDown={(e) => {
+                                            e.preventDefault(); // Prevent blur event
+                                            selectEmailSuggestion(suggestion);
+                                        }}
+                                    >
+                                        {suggestion}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                );
             case 'password':
                 return (
                     <input
@@ -2109,6 +2242,7 @@ function Field({
                 'dropdown',
                 'dropdown-ajax',
                 'dynamicdata',
+                'email',
                 'file',
                 'gallery',
                 'image',

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

@@ -1303,3 +1303,102 @@ input[type='file']:hover {
         font-size: 0.85em;
     }
 }
+
+/* Email Field Styles */
+.emailFieldContainer {
+    position: relative;
+    width: 100%;
+}
+
+.emailError {
+    border-color: var(--error-color, #dc3545) !important;
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
+}
+
+.emailErrorMessage {
+    color: var(--error-color, #dc3545);
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.emailErrorMessage::before {
+    content: "⚠";
+    font-size: 1rem;
+}
+
+.emailSuggestions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--item-color, #fff);
+    border: 1px solid var(--border-color, #e9ecef);
+    border-top: none;
+    border-radius: 0 0 4px 4px; /* Match react-select border radius */
+    box-shadow: none; /* Match react-select no-shadow pattern */
+    z-index: 999; /* Match react-select z-index */
+    max-height: 200px;
+    overflow-y: auto;
+    font-size: 14px; /* Match react-select font size */
+}
+
+.emailSuggestion {
+    padding: 8px 12px; /* Match react-select option padding */
+    cursor: pointer;
+    transition: background-color 0.15s ease; /* Match react-select transition */
+    color: var(--text-color, #333);
+    line-height: 1.4;
+}
+
+.emailSuggestion:hover {
+    background-color: #f5f5f5; /* Match react-select hover state */
+    color: var(--text-color, #333);
+}
+
+.emailSuggestion:active {
+    background-color: var(--primary-color, #007bff);
+    color: white;
+}
+
+/* Enhanced email field input styles */
+.emailFieldContainer input[type="email"] {
+    border-radius: var(--br, 6px);
+    transition: border-color 0.15s ease; /* Match react-select transition */
+    position: relative;
+}
+
+.emailFieldContainer input[type="email"]:focus {
+    outline: none;
+    border-color: var(--primary-color, #007bff);
+    box-shadow: none; /* Match react-select no-shadow pattern */
+}
+
+.emailFieldContainer input[type="email"]:valid {
+    border-color: var(--success-color, #28a745);
+}
+
+.emailFieldContainer input[type="email"]:valid:focus {
+    border-color: var(--success-color, #28a745);
+    box-shadow: none; /* Match react-select no-shadow pattern */
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .emailSuggestions {
+        background: var(--dark-item-color, #2d3748);
+        border-color: var(--dark-border-color, #4a5568);
+    }
+    
+    .emailSuggestion {
+        color: var(--dark-text-color, #e2e8f0);
+        border-bottom-color: var(--dark-border-color, #4a5568);
+    }
+    
+    .emailSuggestion:hover {
+        background: var(--dark-primary-color, #3182ce);
+        color: var(--dark-primary-text-color, #fff);
+    }
+}