canvasframework 0.3.6

package/utils/FormValidator.js

@@ -0,0 +1,355 @@
+/**
+ * Validateur de formulaires avec règles personnalisables
+ * @class
+ * @property {Object} rules - Règles de validation
+ * @property {Object} messages - Messages d'erreur personnalisés
+ * @property {Object} errors - Erreurs de validation
+ */
+class FormValidator {
+  /**
+   * Crée une instance de FormValidator
+   * @param {Object} [rules={}] - Règles de validation
+   * @param {Object} [customMessages={}] - Messages personnalisés
+   */
+  constructor(rules = {}, customMessages = {}) {
+    this.rules = rules;
+    this.customMessages = customMessages;
+    this.errors = {};
+    
+    // Messages par défaut
+    this.defaultMessages = {
+      required: 'This field is required',
+      email: 'Please enter a valid email address',
+      min: 'Value must be at least {min}',
+      max: 'Value must not exceed {max}',
+      minLength: 'Must be at least {minLength} characters',
+      maxLength: 'Must not exceed {maxLength} characters',
+      pattern: 'Invalid format',
+      url: 'Please enter a valid URL',
+      numeric: 'Must be a number',
+      integer: 'Must be an integer',
+      phone: 'Please enter a valid phone number',
+      match: 'Fields do not match',
+      custom: 'Invalid value'
+    };
+  }
+
+  /**
+   * Valide toutes les données
+   * @param {Object} data - Données à valider
+   * @returns {boolean} True si valide
+   */
+  validate(data) {
+    this.errors = {};
+    let isValid = true;
+
+    for (let field in this.rules) {
+      const fieldRules = this.rules[field];
+      const value = data[field];
+
+      const fieldErrors = this.validateField(field, value, data);
+      
+      if (fieldErrors.length > 0) {
+        this.errors[field] = fieldErrors;
+        isValid = false;
+      }
+    }
+
+    return isValid;
+  }
+
+  /**
+   * Valide un champ spécifique
+   * @param {string} field - Nom du champ
+   * @param {*} value - Valeur à valider
+   * @param {Object} [allData={}] - Toutes les données (pour match, etc.)
+   * @returns {Array} Liste des erreurs
+   */
+  validateField(field, value, allData = {}) {
+    const fieldRules = this.rules[field];
+    const errors = [];
+
+    if (!fieldRules) return errors;
+
+    // Required
+    if (fieldRules.required && this.isEmpty(value)) {
+      errors.push(this.getMessage(field, 'required'));
+      return errors; // Arrêter si requis et vide
+    }
+
+    // Si vide et non requis, ne pas valider le reste
+    if (this.isEmpty(value) && !fieldRules.required) {
+      return errors;
+    }
+
+    // Email
+    if (fieldRules.email && !this.isEmail(value)) {
+      errors.push(this.getMessage(field, 'email'));
+    }
+
+    // Min
+    if (fieldRules.min !== undefined && Number(value) < fieldRules.min) {
+      errors.push(this.getMessage(field, 'min', { min: fieldRules.min }));
+    }
+
+    // Max
+    if (fieldRules.max !== undefined && Number(value) > fieldRules.max) {
+      errors.push(this.getMessage(field, 'max', { max: fieldRules.max }));
+    }
+
+    // MinLength
+    if (fieldRules.minLength && String(value).length < fieldRules.minLength) {
+      errors.push(this.getMessage(field, 'minLength', { minLength: fieldRules.minLength }));
+    }
+
+    // MaxLength
+    if (fieldRules.maxLength && String(value).length > fieldRules.maxLength) {
+      errors.push(this.getMessage(field, 'maxLength', { maxLength: fieldRules.maxLength }));
+    }
+
+    // Pattern
+    if (fieldRules.pattern && !fieldRules.pattern.test(value)) {
+      errors.push(this.getMessage(field, 'pattern'));
+    }
+
+    // URL
+    if (fieldRules.url && !this.isURL(value)) {
+      errors.push(this.getMessage(field, 'url'));
+    }
+
+    // Numeric
+    if (fieldRules.numeric && !this.isNumeric(value)) {
+      errors.push(this.getMessage(field, 'numeric'));
+    }
+
+    // Integer
+    if (fieldRules.integer && !this.isInteger(value)) {
+      errors.push(this.getMessage(field, 'integer'));
+    }
+
+    // Phone
+    if (fieldRules.phone && !this.isPhone(value)) {
+      errors.push(this.getMessage(field, 'phone'));
+    }
+
+    // Match (compare avec un autre champ)
+    if (fieldRules.match && value !== allData[fieldRules.match]) {
+      errors.push(this.getMessage(field, 'match'));
+    }
+
+    // Custom validator
+    if (fieldRules.custom && typeof fieldRules.custom === 'function') {
+      const customResult = fieldRules.custom(value, allData);
+      if (customResult !== true) {
+        errors.push(typeof customResult === 'string' ? customResult : this.getMessage(field, 'custom'));
+      }
+    }
+
+    return errors;
+  }
+
+  /**
+   * Obtient un message d'erreur
+   * @param {string} field - Nom du champ
+   * @param {string} rule - Nom de la règle
+   * @param {Object} [params={}] - Paramètres à injecter
+   * @returns {string} Message d'erreur
+   * @private
+   */
+  getMessage(field, rule, params = {}) {
+    let message = this.customMessages[`${field}.${rule}`] || 
+                  this.customMessages[rule] || 
+                  this.defaultMessages[rule];
+
+    // Remplacer les placeholders
+    for (let key in params) {
+      message = message.replace(`{${key}}`, params[key]);
+    }
+
+    return message;
+  }
+
+  /**
+   * Vérifie si une valeur est vide
+   * @param {*} value - Valeur à vérifier
+   * @returns {boolean} True si vide
+   * @private
+   */
+  isEmpty(value) {
+    return value === null || 
+           value === undefined || 
+           value === '' || 
+           (Array.isArray(value) && value.length === 0);
+  }
+
+  /**
+   * Vérifie si c'est un email valide
+   * @param {string} value - Email
+   * @returns {boolean} True si valide
+   * @private
+   */
+  isEmail(value) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(value);
+  }
+
+  /**
+   * Vérifie si c'est une URL valide
+   * @param {string} value - URL
+   * @returns {boolean} True si valide
+   * @private
+   */
+  isURL(value) {
+    try {
+      new URL(value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Vérifie si c'est un nombre
+   * @param {*} value - Valeur
+   * @returns {boolean} True si numérique
+   * @private
+   */
+  isNumeric(value) {
+    return !isNaN(parseFloat(value)) && isFinite(value);
+  }
+
+  /**
+   * Vérifie si c'est un entier
+   * @param {*} value - Valeur
+   * @returns {boolean} True si entier
+   * @private
+   */
+  isInteger(value) {
+    return Number.isInteger(Number(value));
+  }
+
+  /**
+   * Vérifie si c'est un numéro de téléphone
+   * @param {string} value - Téléphone
+   * @returns {boolean} True si valide
+   * @private
+   */
+  isPhone(value) {
+    const phoneRegex = /^[\d\s\-\+\(\)]+$/;
+    return phoneRegex.test(value) && value.replace(/\D/g, '').length >= 10;
+  }
+
+  /**
+   * Obtient toutes les erreurs
+   * @returns {Object} Erreurs
+   */
+  getErrors() {
+    return this.errors;
+  }
+
+  /**
+   * Obtient les erreurs d'un champ
+   * @param {string} field - Nom du champ
+   * @returns {Array} Erreurs du champ
+   */
+  getFieldErrors(field) {
+    return this.errors[field] || [];
+  }
+
+  /**
+   * Vérifie si un champ a des erreurs
+   * @param {string} field - Nom du champ
+   * @returns {boolean} True si le champ a des erreurs
+   */
+  hasError(field) {
+    return this.errors[field] && this.errors[field].length > 0;
+  }
+
+  /**
+   * Réinitialise les erreurs
+   */
+  reset() {
+    this.errors = {};
+  }
+
+  /**
+   * Ajoute une règle de validation
+   * @param {string} field - Nom du champ
+   * @param {Object} rules - Règles
+   */
+  addRule(field, rules) {
+    this.rules[field] = { ...this.rules[field], ...rules };
+  }
+
+  /**
+   * Supprime une règle
+   * @param {string} field - Nom du champ
+   */
+  removeRule(field) {
+    delete this.rules[field];
+  }
+
+  /**
+   * Valide en temps réel (debounced)
+   * @param {string} field - Nom du champ
+   * @param {*} value - Valeur
+   * @param {Object} [allData={}] - Toutes les données
+   * @param {number} [delay=300] - Délai en ms
+   * @returns {Promise} Promise qui se résout avec les erreurs
+   */
+  validateAsync(field, value, allData = {}, delay = 300) {
+    if (this.validateTimer) {
+      clearTimeout(this.validateTimer);
+    }
+
+    return new Promise((resolve) => {
+      this.validateTimer = setTimeout(() => {
+        const errors = this.validateField(field, value, allData);
+        
+        if (errors.length > 0) {
+          this.errors[field] = errors;
+        } else {
+          delete this.errors[field];
+        }
+        
+        resolve(errors);
+      }, delay);
+    });
+  }
+}
+
+// Règles prédéfinies utiles
+FormValidator.presets = {
+  // Login form
+  login: {
+    email: { required: true, email: true },
+    password: { required: true, minLength: 8 }
+  },
+  
+  // Registration form
+  registration: {
+    username: { required: true, minLength: 3, maxLength: 20, pattern: /^[a-zA-Z0-9_]+$/ },
+    email: { required: true, email: true },
+    password: { required: true, minLength: 8, pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/ },
+    confirmPassword: { required: true, match: 'password' },
+    terms: { required: true }
+  },
+  
+  // Contact form
+  contact: {
+    name: { required: true, minLength: 2 },
+    email: { required: true, email: true },
+    phone: { phone: true },
+    message: { required: true, minLength: 10, maxLength: 500 }
+  },
+  
+  // Payment form
+  payment: {
+    cardNumber: { required: true, pattern: /^\d{16}$/ },
+    cardName: { required: true, minLength: 2 },
+    expiryDate: { required: true, pattern: /^\d{2}\/\d{2}$/ },
+    cvv: { required: true, pattern: /^\d{3,4}$/ }
+  }
+};
+
+export default FormValidator;

package/utils/GeoLocationService.js

@@ -0,0 +1,62 @@
+/**
+ * Service de géolocalisation (point ou suivi continu)
+ * @class
+ * @property {number|null} watchId - ID du watch geolocation
+ */
+class GeoLocationService {
+  constructor() {
+    this.watchId = null;
+  }
+
+  /**
+   * Obtient la position actuelle
+   * @param {PositionOptions} [options] - Options de geolocation
+   * @returns {Promise<{latitude:number, longitude:number, accuracy:number}>}
+   */
+  getCurrentPosition(options = {}) {
+    return new Promise((resolve, reject) => {
+      if (!navigator.geolocation) return reject(new Error("Geolocation not supported"));
+
+      navigator.geolocation.getCurrentPosition(
+        (pos) => resolve({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+          accuracy: pos.coords.accuracy
+        }),
+        reject,
+        options
+      );
+    });
+  }
+
+  /**
+   * Suivi de position en continu
+   * @param {Function} callback - Callback appelé à chaque mise à jour
+   * @param {PositionOptions} [options] - Options de geolocation
+   */
+  watchPosition(callback, options = {}) {
+    if (!navigator.geolocation) return;
+
+    this.watchId = navigator.geolocation.watchPosition(
+      (pos) => callback({
+        latitude: pos.coords.latitude,
+        longitude: pos.coords.longitude,
+        accuracy: pos.coords.accuracy
+      }),
+      (err) => console.error("Geolocation error:", err),
+      options
+    );
+  }
+
+  /**
+   * Arrête le suivi continu
+   */
+  clearWatch() {
+    if (this.watchId !== null) {
+      navigator.geolocation.clearWatch(this.watchId);
+      this.watchId = null;
+    }
+  }
+}
+
+export default GeoLocationService;

package/utils/I18n.js

@@ -0,0 +1,207 @@
+/**
+ * Système d'internationalisation avec support de la pluralisation et du formatage
+ * @class
+ * @example
+ * const i18n = new I18n('fr');
+ * i18n.addTranslations('fr', {
+ *   greeting: 'Bonjour {{name}}',
+ *   items: { one: '{{count}} item', other: '{{count}} items' }
+ * });
+ * console.log(i18n.t('greeting', { name: 'John' }));
+ * console.log(i18n.plural('items', 5, { count: 5 }));
+ */
+class I18n {
+  /**
+   * @constructs I18n
+   * @param {string} [defaultLocale='en'] - Langue par défaut
+   */
+  constructor(defaultLocale = 'en') {
+    /** @type {string} */
+    this.locale = defaultLocale;
+    /** @type {string} */
+    this.fallbackLocale = 'en';
+    /** @type {Object} */
+    this.translations = {};
+    /** @type {Function[]} */
+    this.listeners = [];
+  }
+
+  /**
+   * Définir la langue courante
+   * @param {string} locale - Code de la langue (ex: 'fr', 'en')
+   * @returns {boolean} True si la langue a été définie
+   */
+  setLocale(locale) {
+    if (this.translations[locale]) {
+      this.locale = locale;
+      this.notifyListeners();
+      return true;
+    }
+    console.warn(`Locale ${locale} not found`);
+    return false;
+  }
+
+  /**
+   * Obtenir la langue courante
+   * @returns {string} Code de la langue courante
+   */
+  getLocale() {
+    return this.locale;
+  }
+
+  /**
+   * Ajouter des traductions pour une langue
+   * @param {string} locale - Code de la langue
+   * @param {Object} translations - Objet de traductions
+   */
+  addTranslations(locale, translations) {
+    if (!this.translations[locale]) {
+      this.translations[locale] = {};
+    }
+    
+    // Merge avec les traductions existantes
+    this.translations[locale] = {
+      ...this.translations[locale],
+      ...translations
+    };
+  }
+
+  /**
+   * Traduire une clé
+   * @param {string} key - Clé de traduction
+   * @param {Object} [params={}] - Paramètres à interpoler
+   * @param {string} [locale=null] - Langue spécifique (null pour la langue courante)
+   * @returns {string} Texte traduit
+   */
+  t(key, params = {}, locale = null) {
+    const currentLocale = locale || this.locale;
+    
+    // Chercher la traduction
+    let translation = this.getNestedValue(this.translations[currentLocale], key);
+    
+    // Fallback sur la langue par défaut
+    if (!translation && currentLocale !== this.fallbackLocale) {
+      translation = this.getNestedValue(this.translations[this.fallbackLocale], key);
+    }
+    
+    // Si toujours pas trouvé, retourner la clé
+    if (!translation) {
+      console.warn(`Translation not found for key: ${key}`);
+      return key;
+    }
+    
+    // Remplacer les paramètres
+    return this.interpolate(translation, params);
+  }
+
+  /**
+   * Obtenir une valeur imbriquée dans un objet (ex: "user.profile.name")
+   * @param {Object} obj - Objet source
+   * @param {string} path - Chemin de la propriété
+   * @returns {*} Valeur trouvée ou undefined
+   * @private
+   */
+  getNestedValue(obj, path) {
+    return path.split('.').reduce((current, key) => {
+      return current ? current[key] : undefined;
+    }, obj);
+  }
+
+  /**
+   * Interpoler les paramètres dans une chaîne de traduction
+   * @param {string} template - Template avec paramètres
+   * @param {Object} params - Paramètres à remplacer
+   * @returns {string} Chaîne interpolée
+   * @private
+   */
+  interpolate(template, params) {
+    return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+      return params.hasOwnProperty(key) ? params[key] : match;
+    });
+  }
+
+  /**
+   * Gérer la pluralisation
+   * @param {string} key - Clé de traduction (base)
+   * @param {number} count - Nombre pour déterminer la pluralité
+   * @param {Object} [params={}] - Paramètres additionnels
+   * @returns {string} Texte traduit avec pluralisation
+   */
+  plural(key, count, params = {}) {
+    const pluralKey = count === 1 ? `${key}.one` : `${key}.other`;
+    return this.t(pluralKey, { ...params, count });
+  }
+
+  /**
+   * Formater une date selon la locale
+   * @param {Date} date - Date à formater
+   * @param {string} [format='long'] - Format de date ('short', 'long', 'full')
+   * @returns {string} Date formatée
+   */
+  formatDate(date, format = 'long') {
+    const options = {
+      short: { year: 'numeric', month: '2-digit', day: '2-digit' },
+      long: { year: 'numeric', month: 'long', day: 'numeric' },
+      full: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+    };
+    
+    return new Intl.DateTimeFormat(this.locale, options[format] || options.long)
+      .format(date);
+  }
+
+  /**
+   * Formater un nombre selon la locale
+   * @param {number} number - Nombre à formater
+   * @param {Object} [options={}] - Options de formatage Intl.NumberFormat
+   * @returns {string} Nombre formaté
+   */
+  formatNumber(number, options = {}) {
+    return new Intl.NumberFormat(this.locale, options).format(number);
+  }
+
+  /**
+   * Formater une devise selon la locale
+   * @param {number} amount - Montant à formater
+   * @param {string} [currency='USD'] - Code de la devise
+   * @returns {string} Montant formaté avec devise
+   */
+  formatCurrency(amount, currency = 'USD') {
+    return new Intl.NumberFormat(this.locale, {
+      style: 'currency',
+      currency: currency
+    }).format(amount);
+  }
+
+  /**
+   * S'abonner aux changements de langue
+   * @param {Function} callback - Fonction appelée quand la langue change
+   * @returns {Function} Fonction de désabonnement
+   */
+  subscribe(callback) {
+    this.listeners.push(callback);
+    return () => {
+      const index = this.listeners.indexOf(callback);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+
+  /**
+   * Notifier les observateurs du changement de langue
+   * @private
+   */
+  notifyListeners() {
+    this.listeners.forEach(callback => callback(this.locale));
+  }
+
+  /**
+   * Obtenir les langues disponibles
+   * @returns {string[]} Liste des codes de langues disponibles
+   */
+  getAvailableLocales() {
+    return Object.keys(this.translations);
+  }
+}
+
+export default I18n;