vanillaforge 1.9.0

package/src/utils/notification.js

@@ -0,0 +1,123 @@
+/**
+ * Notification Utility
+ *
+ * Handles displaying messages to the user, such as toasts and modals.
+ */
+export class Notification {
+  /**
+   * Show a toast notification
+   *
+   * @param {string} message - The message to display
+   * @param {string} type - The type of toast ('error', 'warning', 'success', 'info')
+   */
+  showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+
+    // Basic styling, can be moved to a CSS file
+    toast.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      padding: 16px 20px;
+      background: #333;
+      color: #fff;
+      border-radius: 6px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      z-index: 9999;
+      max-width: 300px;
+      font-size: 14px;
+      line-height: 1.4;
+    `;
+
+    switch (type) {
+      case 'error':
+        toast.style.background = '#fee2e2';
+        toast.style.color = '#991b1b';
+        toast.style.border = '1px solid #fecaca';
+        break;
+      case 'warning':
+        toast.style.background = '#fef3cd';
+        toast.style.color = '#92400e';
+        toast.style.border = '1px solid #fde68a';
+        break;
+      case 'success':
+        toast.style.background = '#dcfce7';
+        toast.style.color = '#166534';
+        toast.style.border = '1px solid #bbf7d0';
+        break;
+    }
+
+    document.body.appendChild(toast);
+
+    setTimeout(() => {
+      if (toast.parentNode) {
+        toast.remove();
+      }
+    }, 5000);
+  }
+
+  /**
+   * Show a modal dialog
+   *
+   * @param {string} title - The title of the modal
+   * @param {string} message - The message to display in the modal body
+   * @param {Object} [options={}] - Options for the modal (e.g., buttons)
+   */
+  showModal(title, message, options = {}) {
+    const modal = document.createElement('div');
+    modal.className = 'modal-overlay';
+    modal.innerHTML = `
+      <div class="modal">
+        <div class="modal-header">
+          <h3>${title}</h3>
+          <button class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>${message}</p>
+          ${options.details ? `
+          <details style="margin-top: 16px;">
+            <summary>Technical Details</summary>
+            <pre style="font-size: 12px; margin-top: 8px;">${options.details}</pre>
+          </details>
+          ` : ''}
+        </div>
+        <div class="modal-footer">
+          ${(options.buttons || [{ label: 'Close', action: 'close' }]).map(btn => `<button class="modal-btn-${btn.action}">${btn.label}</button>`).join('')}
+        </div>
+      </div>
+    `;
+
+    modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 10000;
+    `;
+
+    modal.querySelector('.modal-close').onclick = () => modal.remove();
+
+    if (options.buttons) {
+      options.buttons.forEach(btn => {
+        modal.querySelector(`.modal-btn-${btn.action}`).onclick = () => {
+          if (btn.onClick) {
+            btn.onClick();
+          }
+          modal.remove();
+        };
+      });
+    } else {
+        modal.querySelector('.modal-btn-close').onclick = () => modal.remove();
+    }
+
+
+    document.body.appendChild(modal);
+  }
+}

package/src/utils/performance.js

@@ -0,0 +1,281 @@
+/**
+ * Performance optimization utilities for VanillaForge
+ * 
+ * Provides tools for optimizing application performance including
+ * lazy loading, caching, and resource management.
+ */
+
+/**
+ * Performance utilities class
+ */
+import { Logger } from './logger.js';
+
+export class PerformanceUtils {
+    constructor() {
+        this.cache = new Map();
+        this.observers = new Map();
+        this.loadingStates = new Map();
+        this.logger = new Logger('PerformanceUtils');
+    }
+
+    /**
+     * Debounce function execution
+     * @param {Function} func - Function to debounce
+     * @param {number} wait - Delay in milliseconds
+     * @param {boolean} immediate - Execute immediately on first call
+     * @returns {Function} Debounced function
+     */
+    debounce(func, wait, immediate = false) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                timeout = null;
+                if (!immediate) func.apply(this, args);
+            };
+            const callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) func.apply(this, args);
+        };
+    }
+
+    /**
+     * Throttle function execution
+     * @param {Function} func - Function to throttle
+     * @param {number} limit - Minimum time between executions
+     * @returns {Function} Throttled function
+     */
+    throttle(func, limit) {
+        let inThrottle;
+        return function(...args) {
+            if (!inThrottle) {
+                func.apply(this, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        };
+    }
+
+    /**
+     * Lazy load a component with intersection observer
+     * @param {HTMLElement} element - Element to observe
+     * @param {Function} loadCallback - Function to call when element is visible
+     * @param {Object} options - Intersection observer options
+     */
+    lazyLoad(element, loadCallback, options = {}) {
+        const defaultOptions = {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0.1
+        };
+
+        const observerOptions = { ...defaultOptions, ...options };
+
+        if ('IntersectionObserver' in window) {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        loadCallback(entry.target);
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, observerOptions);
+
+            observer.observe(element);
+            this.observers.set(element, observer);
+        } else {
+            // Fallback for browsers without IntersectionObserver
+            loadCallback(element);
+        }
+    }
+
+    /**
+     * Cache data with expiration
+     * @param {string} key - Cache key
+     * @param {*} data - Data to cache
+     * @param {number} ttl - Time to live in milliseconds
+     */
+    setCache(key, data, ttl = 300000) { // 5 minutes default
+        const expiry = Date.now() + ttl;
+        this.cache.set(key, { data, expiry });
+    }
+
+    /**
+     * Get cached data
+     * @param {string} key - Cache key
+     * @returns {*} Cached data or null if expired/not found
+     */
+    getCache(key) {
+        const cached = this.cache.get(key);
+        if (!cached) return null;
+
+        if (Date.now() > cached.expiry) {
+            this.cache.delete(key);
+            return null;
+        }
+
+        return cached.data;
+    }
+
+    /**
+     * Clear expired cache entries
+     */
+    clearExpiredCache() {
+        const now = Date.now();
+        for (const [key, value] of this.cache.entries()) {
+            if (now > value.expiry) {
+                this.cache.delete(key);
+            }
+        }
+    }
+
+    /**
+     * Measure function execution time
+     * @param {Function} func - Function to measure
+     * @param {string} label - Label for the measurement
+     * @returns {Promise|*} Function result
+     */
+    measure(func, label = 'Function') {
+        const start = performance.now();
+        const result = func();
+        
+        if (result instanceof Promise) {
+            return result.finally(() => {
+                const end = performance.now();
+                this.logger.info(`${label} execution time`, { duration: `${(end - start).toFixed(2)}ms` });
+            });
+        } else {
+            const end = performance.now();
+            this.logger.info(`${label} execution time`, { duration: `${(end - start).toFixed(2)}ms` });
+            return result;
+        }
+    }
+
+    /**
+     * Batch DOM operations to avoid layout thrashing
+     * @param {Function[]} operations - Array of DOM operations
+     */
+    batchDOMOperations(operations) {
+        requestAnimationFrame(() => {
+            operations.forEach(operation => operation());
+        });
+    }
+
+    /**
+     * Preload resources
+     * @param {string[]} urls - Array of resource URLs
+     * @param {string} type - Resource type ('image', 'script', 'style')
+     * @returns {Promise} Promise that resolves when all resources are loaded
+     */
+    async preloadResources(resources) {
+        const promises = resources.map(resource => {
+            return new Promise((resolve, reject) => {
+                let element;
+                const { url, type } = resource;
+
+                switch (type) {
+                    case 'image':
+                        element = new Image();
+                        element.src = url;
+                        break;
+                    case 'script':
+                        element = document.createElement('script');
+                        element.src = url;
+                        element.async = true;
+                        document.head.appendChild(element);
+                        break;
+                    case 'style':
+                        element = document.createElement('link');
+                        element.rel = 'stylesheet';
+                        element.href = url;
+                        document.head.appendChild(element);
+                        break;
+                    default:
+                        return reject(new Error(`Unsupported resource type: ${type}`));
+                }
+
+                element.onload = () => resolve({ url, type, status: 'loaded' });
+                element.onerror = () => reject({ url, type, status: 'failed' });
+            });
+        });
+
+        return Promise.allSettled(promises);
+    }
+
+
+    /**
+     * Monitor memory usage
+     * @param {Function} callback - Callback function to receive memory stats
+     * @param {number} interval - Monitoring interval in milliseconds
+     * @returns {number} Interval ID
+     */
+    monitorMemory(callback, interval = 5000) {
+        if (!performance.memory) {
+            console.warn('Memory monitoring not available in this browser');
+            return null;
+        }
+
+        return setInterval(() => {
+            const memory = {
+                used: Math.round(performance.memory.usedJSHeapSize / 1024 / 1024),
+                total: Math.round(performance.memory.totalJSHeapSize / 1024 / 1024),
+                limit: Math.round(performance.memory.jsHeapSizeLimit / 1024 / 1024)
+            };
+            callback(memory);
+        }, interval);
+    }
+
+    /**
+     * Cleanup observers and resources
+     */
+    cleanup() {
+        // Clear all intersection observers
+        this.observers.forEach((observer, element) => {
+            observer.unobserve(element);
+            observer.disconnect();
+        });
+        this.observers.clear();
+
+        // Clear cache
+        this.cache.clear();
+
+        // Clear loading states
+        this.loadingStates.clear();
+    }
+
+    /**
+     * Create a performance mark
+     * @param {string} name - Mark name
+     */
+    mark(name) {
+        if (performance.mark) {
+            performance.mark(name);
+        }
+    }
+
+    /**
+     * Measure performance between two marks
+     * @param {string} name - Measure name
+     * @param {string} startMark - Start mark name
+     * @param {string} endMark - End mark name
+     */
+    measureBetween(name, startMark, endMark) {
+        if (performance.measure) {
+            performance.measure(name, startMark, endMark);
+        }
+    }
+
+    /**
+     * Get performance entries
+     * @param {string} type - Entry type (mark, measure, navigation, etc.)
+     * @returns {Array} Performance entries
+     */
+    getPerformanceEntries(type) {
+        if (performance.getEntriesByType) {
+            return performance.getEntriesByType(type);
+        }
+        return [];
+    }
+}
+
+export const performanceUtils = new PerformanceUtils();

package/src/utils/storage.js

@@ -0,0 +1,86 @@
+/**
+ * Storage Adapters
+ *
+ * Provides a consistent interface for key-value storage, abstracting
+ * away the underlying implementation (e.g., localStorage, in-memory).
+ */
+
+/**
+ * Base class for storage adapters
+ */
+class StorageAdapter {
+  getItem(_key) {
+    throw new Error('Not implemented');
+  }
+
+  setItem(_key, _value) {
+    throw new Error('Not implemented');
+  }
+
+  removeItem(_key) {
+    throw new Error('Not implemented');
+  }
+
+  getLogs(key) {
+    try {
+      const logs = this.getItem(key) || '[]';
+      return JSON.parse(logs);
+    } catch (error) {
+      console.error('Failed to retrieve logs:', error);
+      return [];
+    }
+  }
+
+  saveLogs(key, logs, maxLogs = 100) {
+    try {
+      if (logs.length > maxLogs) {
+        logs.splice(0, logs.length - maxLogs);
+      }
+      this.setItem(key, JSON.stringify(logs));
+    } catch (error) {
+      console.error('Failed to save logs:', error);
+    }
+  }
+}
+
+/**
+ * localStorage adapter (for browser environments)
+ */
+export class LocalStorageAdapter extends StorageAdapter {
+  getItem(key) {
+    if (typeof localStorage === 'undefined') return null;
+    return localStorage.getItem(key);
+  }
+
+  setItem(key, value) {
+    if (typeof localStorage === 'undefined') return;
+    localStorage.setItem(key, value);
+  }
+
+  removeItem(key) {
+    if (typeof localStorage === 'undefined') return;
+    localStorage.removeItem(key);
+  }
+}
+
+/**
+ * In-memory storage adapter (for testing or non-browser environments)
+ */
+export class InMemoryStorageAdapter extends StorageAdapter {
+  constructor() {
+    super();
+    this.storage = new Map();
+  }
+
+  getItem(key) {
+    return this.storage.get(key) || null;
+  }
+
+  setItem(key, value) {
+    this.storage.set(key, value);
+  }
+
+  removeItem(key) {
+    this.storage.delete(key);
+  }
+}

package/src/utils/sweet-alert.js

@@ -0,0 +1,84 @@
+/**
+ * SweetAlert2 Utility
+ * 
+ * Wrapper for SweetAlert2 to ensure it's available and provide consistent styling
+ * 
+ * @author VanillaForge Team
+ * @version 3.0.0
+ * @since 2025-06-14
+ */
+
+export class SweetAlert {
+  constructor(swalInstance) {
+    if (!swalInstance) {
+      throw new Error('SweetAlert2 instance is required.');
+    }
+    this.swal = swalInstance;
+  }
+
+  fire(options) {
+    const defaultOptions = {
+      customClass: {
+        popup: 'swal-custom-popup',
+        title: 'swal-custom-title',
+        content: 'swal-custom-content',
+        confirmButton: 'swal-custom-confirm',
+        cancelButton: 'swal-custom-cancel'
+      },
+      buttonsStyling: false
+    };
+
+    return this.swal.fire({
+      ...defaultOptions,
+      ...options
+    });
+  }
+
+  success(title, text = '', options = {}) {
+    return this.fire({
+      icon: 'success',
+      title,
+      text,
+      ...options
+    });
+  }
+
+  error(title, text = '', options = {}) {
+    return this.fire({
+      icon: 'error',
+      title,
+      text,
+      ...options
+    });
+  }
+
+  warning(title, text = '', options = {}) {
+    return this.fire({
+      icon: 'warning',
+      title,
+      text,
+      ...options
+    });
+  }
+
+  info(title, text = '', options = {}) {
+    return this.fire({
+      icon: 'info',
+      title,
+      text,
+      ...options
+    });
+  }
+
+  confirm(title, text = '', options = {}) {
+    return this.fire({
+      icon: 'question',
+      title,
+      text,
+      showCancelButton: true,
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No',
+      ...options
+    });
+  }
+}

package/src/utils/validation.js

@@ -0,0 +1,70 @@
+/**
+ * Validation Utilities
+ * 
+ * This module provides comprehensive validation functions for the VanillaForge.
+ * It includes validation for user input, data integrity, business rules, and security.
+ * 
+ * Features:
+ * - Email validation
+ * - Phone number validation
+ * - Currency amount validation
+ * - Date validation
+ * - String sanitization
+ * - Business rule validation
+ * - Security validation
+ * 
+ * @author VanillaForge Team
+ * @version 3.0.0
+ * @since 2024-06-14
+ */
+
+import { Logger } from './logger.js';
+import * as Validators from './validators.js';
+
+export class ValidationUtils {
+    constructor(logger) {
+        this.logger = logger || new Logger('ValidationUtils');
+        this.validators = {
+            email: Validators.validateEmail,
+            phone: Validators.validatePhoneNumber,
+            currency: Validators.validateCurrencyAmount,
+            // Add other validators here
+        };
+    }
+
+    validate(type, value, options) {
+        const validator = this.validators[type];
+        if (!validator) {
+            this.logger.warn(`Validator for type "${type}" not found.`);
+            return { isValid: true, sanitized: value, errors: [] };
+        }
+        try {
+            return validator(value, options);
+        } catch (error) {
+            this.logger.error(`Validation failed for type "${type}"`, { error, value });
+            return { isValid: false, errors: ['Validation failed due to an unexpected error.'] };
+        }
+    }
+
+    validateFields(data, rules) {
+        const result = {
+            isValid: true,
+            errors: {},
+            sanitized: {}
+        };
+
+        for (const [field, rule] of Object.entries(rules)) {
+            const value = data[field];
+            const fieldResult = this.validate(rule.type, value, rule.options);
+
+            if (!fieldResult.isValid) {
+                result.isValid = false;
+                result.errors[field] = fieldResult.errors;
+            } else {
+                result.sanitized[field] = fieldResult.sanitized;
+            }
+        }
+
+        return result;
+    }
+}