canvasframework 0.5.16 → 0.5.18

package/features/Skeleton.js

@@ -1,193 +0,0 @@
-import Component from '../core/Component.js';
-
-/**
- * Composant Skeleton (placeholder animé pendant le chargement)
- * @class
- * @extends Component
- * @param {Framework} framework - Instance du framework
- * @param {Object} [options={}] - Options de configuration
- * @param {string} [options.type='text'] - Type de skeleton ('text', 'circle', 'rectangle')
- * @param {number} [options.animationDuration=1.5] - Durée de l'animation en secondes
- * @example
- * const skeleton = new Skeleton(framework, {
- *   type: 'text',
- *   width: 200,
- *   height: 100
- * });
- */
-class Skeleton extends Component {
-  /**
-   * @constructs Skeleton
-   */
-  constructor(framework, options = {}) {
-    super(framework, options);
-    /** @type {string} */
-    this.type = options.type || 'text';
-    /** @type {number} */
-    this.animationDuration = (options.animationDuration || 1.5) * 1000; // en ms
-    /** @type {number} */
-    this.startTime = Date.now();
-    /** @type {number} */
-    this.borderRadius = options.borderRadius || 4;
-    
-    this.startAnimation();
-  }
-  
-  /**
-   * Démarre l'animation du skeleton
-   * @private
-   */
-  startAnimation() {
-    const animate = () => {
-      if (!this.visible) {
-        requestAnimationFrame(animate);
-        return;
-      }
-      requestAnimationFrame(animate);
-    };
-    animate();
-  }
-  
-  /**
-   * Calcule la progression de l'animation (0 à 1)
-   * @private
-   * @returns {number}
-   */
-  getAnimationProgress() {
-    const elapsed = Date.now() - this.startTime;
-    const progress = (elapsed % this.animationDuration) / this.animationDuration;
-    return progress;
-  }
-  
-  /**
-   * Crée le gradient shimmer diagonal style Ionic/Material
-   * @private
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {number} x
-   * @param {number} y
-   * @param {number} width
-   * @param {number} height
-   * @returns {CanvasGradient}
-   */
-  createShimmerGradient(ctx, x, y, width, height) {
-    const progress = this.getAnimationProgress();
-    
-    // Calculer la diagonale pour l'effet
-    const diagonal = Math.sqrt(width * width + height * height);
-    
-    // Position du gradient qui se déplace
-    const offset = diagonal * 2;
-    const position = -diagonal + (offset * progress);
-    
-    // Angle à 45 degrés (de haut-gauche vers bas-droite)
-    const angle = Math.PI / 4;
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    
-    const gradient = ctx.createLinearGradient(
-      x + position * cos,
-      y + position * sin,
-      x + (position + diagonal) * cos,
-      y + (position + diagonal) * sin
-    );
-    
-    // Gradient blanc avec transparence (style Ionic/Material)
-    gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
-    gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.4)');
-    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
-    
-    return gradient;
-  }
-  
-  /**
-   * Dessine un rectangle arrondi
-   * @private
-   */
-  roundRect(ctx, x, y, width, height, radius) {
-    if (width < 2 * radius) radius = width / 2;
-    if (height < 2 * radius) radius = height / 2;
-    
-    ctx.beginPath();
-    ctx.moveTo(x + radius, y);
-    ctx.arcTo(x + width, y, x + width, y + height, radius);
-    ctx.arcTo(x + width, y + height, x, y + height, radius);
-    ctx.arcTo(x, y + height, x, y, radius);
-    ctx.arcTo(x, y, x + width, y, radius);
-    ctx.closePath();
-  }
-  
-  /**
-   * Dessine le skeleton avec l'effet shimmer Ionic/Material
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
-  draw(ctx) {
-    ctx.save();
-    
-    // Couleur de fond (gris clair Material)
-    const backgroundColor = '#e0e0e0';
-    
-    switch(this.type) {
-      case 'circle':
-        // Dessiner le cercle de base
-        ctx.fillStyle = backgroundColor;
-        ctx.beginPath();
-        ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
-        ctx.fill();
-        
-        // Créer un clipping path pour le shimmer
-        ctx.beginPath();
-        ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
-        ctx.clip();
-        
-        // Appliquer le shimmer
-        ctx.fillStyle = this.createShimmerGradient(ctx, this.x, this.y, this.width, this.height);
-        ctx.fillRect(this.x, this.y, this.width, this.height);
-        break;
-        
-      case 'text':
-        const lineHeight = 16;
-        const lineSpacing = 10;
-        const totalLineHeight = lineHeight + lineSpacing;
-        const lines = Math.floor(this.height / totalLineHeight);
-        
-        for (let i = 0; i < lines; i++) {
-          const lineWidth = i === lines - 1 ? this.width * 0.6 : this.width;
-          const lineY = this.y + i * totalLineHeight;
-          
-          // Fond de la ligne
-          ctx.fillStyle = backgroundColor;
-          this.roundRect(ctx, this.x, lineY, lineWidth, lineHeight, this.borderRadius);
-          ctx.fill();
-          
-          // Shimmer sur la ligne
-          ctx.save();
-          this.roundRect(ctx, this.x, lineY, lineWidth, lineHeight, this.borderRadius);
-          ctx.clip();
-          
-          ctx.fillStyle = this.createShimmerGradient(ctx, this.x, lineY, lineWidth, lineHeight);
-          ctx.fillRect(this.x - 100, lineY - 100, lineWidth + 200, lineHeight + 200);
-          ctx.restore();
-        }
-        break;
-        
-      default:
-        // Rectangle de base
-        ctx.fillStyle = backgroundColor;
-        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
-        ctx.fill();
-        
-        // Shimmer
-        ctx.save();
-        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
-        ctx.clip();
-        
-        ctx.fillStyle = this.createShimmerGradient(ctx, this.x, this.y, this.width, this.height);
-        ctx.fillRect(this.x - 100, this.y - 100, this.width + 200, this.height + 200);
-        ctx.restore();
-    }
-    
-    ctx.restore();
-  }
-}
-
-export default Skeleton;

package/features/Stack.js

@@ -1,21 +0,0 @@
-import LayoutComponent from './LayoutComponent.js';
-
-class Stack extends LayoutComponent {
-  constructor(framework, options = {}) {
-    super(framework, options);
-  }
-
-  layoutRecursive() {
-    for (const child of this.children) {
-      child.layoutRecursive ? child.layoutRecursive() : child.layout?.();
-    }
-  }
-
-  draw(ctx) {
-    for (const child of this.children) {
-      child.draw(ctx);
-    }
-  }
-}
-
-export default Stack;

package/index.js

@@ -1,119 +0,0 @@
-// framework/index.js
-
-// Core
-export { default as CanvasFramework } from './core/CanvasFramework.js';
-export { default as Component } from './core/Component.js';
-export { default as ui, createRef } from './core/UIBuilder.js';
-
-// Components
-export { default as Button } from './components/Button.js';
-export { default as SegmentedControl } from './components/SegmentedControl.js';
-export { default as Input } from './components/Input.js';
-export { default as Slider } from './components/Slider.js';
-export { default as Text } from './components/Text.js';
-export { default as View } from './components/View.js';
-export { default as Card } from './components/Card.js';
-export { default as FAB } from './components/FAB.js';
-export { default as SpeedDialFAB } from './components/SpeedDialFAB.js';
-export { default as MorphingFAB } from './components/MorphingFAB.js';
-export { default as CircularProgress } from './components/CircularProgress.js';
-export { default as ImageComponent } from './components/ImageComponent.js';
-export { default as DatePicker } from './components/DatePicker.js';
-export { default as IOSDatePickerWheel } from './components/IOSDatePickerWheel.js';
-export { default as AndroidDatePickerDialog } from './components/AndroidDatePickerDialog.js';
-export { default as Avatar } from './components/Avatar.js';
-export { default as Snackbar } from './components/Snackbar.js';
-export { default as BottomNavigationBar } from './components/BottomNavigationBar.js';
-export { default as Video } from './components/Video.js';
-export { default as Modal } from './components/Modal.js';
-export { default as Drawer } from './components/Drawer.js';
-export { default as AppBar } from './components/AppBar.js';
-export { default as Chip } from './components/Chip.js';
-export { default as Stepper } from './components/Stepper.js';
-export { default as Accordion } from './components/Accordion.js';
-export { default as Tabs } from './components/Tabs.js';
-export { default as Switch } from './components/Switch.js';
-export { default as ListItem } from './components/ListItem.js';
-export { default as SwipeableListItem } from './components/SwipeableListItem.js';
-export { default as List } from './components/List.js';
-export { default as VirtualList } from './components/VirtualList.js';
-export { default as BottomSheet } from './components/BottomSheet.js';
-export { default as ProgressBar } from './components/ProgressBar.js';
-export { default as RadioButton } from './components/RadioButton.js';
-export { default as Dialog } from './components/Dialog.js';
-export { default as ContextMenu } from './components/ContextMenu.js';
-export { default as Checkbox } from './components/Checkbox.js';
-export { default as Toast } from './components/Toast.js';
-export { default as NumberInput } from './components/NumberInput.js';
-export { default as TextField } from './components/TextField.js';
-export { default as SelectDialog } from './components/SelectDialog.js';
-export { default as Select } from './components/Select.js';
-export { default as MultiSelectDialog } from './components/MultiSelectDialog.js';
-export { default as Divider } from './components/Divider.js';
-export { default as FileUpload } from './components/FileUpload.js';
-export { default as Table } from './components/Table.js';
-export { default as TreeView } from './components/TreeView.js';
-export { default as SearchInput } from './components/SearchInput.js';
-export { default as ImageCarousel } from './components/ImageCarousel.js';
-export { default as PasswordInput } from './components/PasswordInput.js';
-export { default as InputTags } from './components/InputTags.js';
-export { default as InputDatalist } from './components/InputDatalist.js';
-export { default as Banner } from './components/Banner.js';
-export { default as Chart } from './components/Chart.js';
-export { default as SliverAppBar } from './components/SliverAppBar.js';
-export { default as AudioPlayer } from './components/AudioPlayer.js';
-export { default as Camera } from './components/Camera.js';
-export { default as FloatedCamera } from './components/FloatedCamera.js';
-export { default as TimePicker } from './components/TimePicker.js';
-export { default as QRCodeReader } from './components/QRCodeReader.js';
-
-// Utils
-export { default as SafeArea } from './utils/SafeArea.js';
-export { default as StateManager } from './utils/StateManager.js';
-export { default as I18n } from './utils/I18n.js';
-export { default as SecureStorage } from './utils/SecureStorage.js';
-export { default as FormValidator } from './utils/FormValidator.js';
-export { default as DataStore } from './utils/DataStore.js';
-export { default as EventBus } from './utils/EventBus.js';
-export { default as IndexedDBManager } from './utils/IndexedDBManager.js';
-export { default as QueryBuilder } from './utils/QueryBuilder.js';
-export { default as OfflineSyncManager } from './utils/OfflineSyncManager.js';
-export { default as FetchClient } from './utils/FetchClient.js';
-export { default as GeoLocationService } from './utils/GeoLocationService.js';
-export { default as WebSocketClient } from './utils/WebSocketClient.js';
-export { default as AnimationEngine } from './utils/AnimationEngine.js';
-export { default as CryptoManager } from './utils/CryptoManager.js';
-export { default as NotificationManager } from './utils/NotificationManager.js';
-export { default as DevTools } from './utils/DevTools.js';
-export { default as FirebaseStorage } from './utils/FirebaseStorage.js';
-export { default as FirebaseAuth } from './utils/FirebaseAuth.js';
-export { default as FirebaseCore } from './utils/FirebaseCore.js';
-export { default as FirebaseFirestore } from './utils/FirebaseFirestore.js';
-export { default as FirebaseFunctions } from './utils/FirebaseFunctions.js';
-export { default as FirebaseRealtimeDB } from './utils/FirebaseRealtimeDB.js';
-export { default as PayPalPayment } from './utils/PayPalPayment.js';
-export { default as StripePayment } from './utils/StripePayment.js';
-
-// Features
-export { default as PullToRefresh } from './features/PullToRefresh.js';
-export { default as Skeleton } from './features/Skeleton.js';
-export { default as SignaturePad } from './features/SignaturePad.js';
-export { default as OpenStreetMap } from './features/OpenStreetMap.js';
-export { default as LayoutComponent } from './features/LayoutComponent.js';
-export { default as Grid } from './features/Grid.js';
-export { default as Row } from './features/Row.js';
-export { default as Column } from './features/Column.js';
-export { default as Positioned } from './features/Positioned.js';
-export { default as Stack } from './features/Stack.js';
-
-// Manager
-export { default as ErrorHandler } from './manager/ErrorHandler.js';
-export { default as PerformanceMonitor } from './manager/PerformanceMonitor.js';
-export { default as AccessibilityManager } from './manager/AccessibilityManager.js';
-export { default as MemoryManager } from './manager/MemoryManager.js';
-export { default as SecurityManager } from './manager/SecurityManager.js';
-export { default as FeatureFlags } from './manager/FeatureFlags.js';
-
-// Version du framework
-
-export const VERSION = '0.5.13';

package/manager/AccessibilityManager.js

@@ -1,107 +0,0 @@
-// ==========================================
-// 3. ACCESSIBILITY (A11Y)
-// ==========================================
-
-class AccessibilityManager {
-  constructor(framework) {
-    this.framework = framework;
-    this.focusedComponent = null;
-    this.ariaLiveRegion = null;
-    this.setupAccessibility();
-  }
-
-  setupAccessibility() {
-    // Créer une région ARIA live pour les annonces
-    this.ariaLiveRegion = document.createElement('div');
-    this.ariaLiveRegion.setAttribute('role', 'status');
-    this.ariaLiveRegion.setAttribute('aria-live', 'polite');
-    this.ariaLiveRegion.setAttribute('aria-atomic', 'true');
-    this.ariaLiveRegion.style.position = 'absolute';
-    this.ariaLiveRegion.style.left = '-10000px';
-    this.ariaLiveRegion.style.width = '1px';
-    this.ariaLiveRegion.style.height = '1px';
-    this.ariaLiveRegion.style.overflow = 'hidden';
-    document.body.appendChild(this.ariaLiveRegion);
-
-    // Rendre le canvas accessible au clavier
-    this.framework.canvas.setAttribute('tabindex', '0');
-    this.framework.canvas.setAttribute('role', 'application');
-    this.framework.canvas.setAttribute('aria-label', 'Interactive canvas application');
-
-    // Navigation au clavier
-    this.framework.canvas.addEventListener('keydown', this.handleKeyDown.bind(this));
-  }
-
-  announce(message) {
-    this.ariaLiveRegion.textContent = message;
-    
-    // Clear après 100ms pour permettre de ré-annoncer le même message
-    setTimeout(() => {
-      this.ariaLiveRegion.textContent = '';
-    }, 100);
-  }
-
-  handleKeyDown(e) {
-    const components = this.framework.components.filter(c => c.visible);
-    const currentIndex = components.indexOf(this.focusedComponent);
-
-    switch (e.key) {
-      case 'Tab':
-        e.preventDefault();
-        const nextIndex = e.shiftKey 
-          ? (currentIndex - 1 + components.length) % components.length
-          : (currentIndex + 1) % components.length;
-        
-        this.focusComponent(components[nextIndex]);
-        break;
-
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        if (this.focusedComponent && this.focusedComponent.onClick) {
-          this.focusedComponent.onClick();
-          this.announce(`Activated: ${this.getComponentLabel(this.focusedComponent)}`);
-        }
-        break;
-
-      case 'Escape':
-        e.preventDefault();
-        this.blur();
-        break;
-    }
-  }
-
-  focusComponent(component) {
-    if (this.focusedComponent) {
-      this.focusedComponent.focused = false;
-    }
-
-    this.focusedComponent = component;
-    component.focused = true;
-
-    // Annoncer le composant focalisé
-    this.announce(`Focused: ${this.getComponentLabel(component)}`);
-  }
-
-  blur() {
-    if (this.focusedComponent) {
-      this.focusedComponent.focused = false;
-      this.focusedComponent = null;
-    }
-  }
-
-  getComponentLabel(component) {
-    return component.text || 
-           component.label || 
-           component.ariaLabel || 
-           component.constructor.name;
-  }
-
-  destroy() {
-    if (this.ariaLiveRegion) {
-      this.ariaLiveRegion.remove();
-    }
-  }
-}
-
-export default AccessibilityManager;

package/manager/ErrorHandler.js

@@ -1,59 +0,0 @@
-// ==========================================
-// 1. ERROR HANDLING & LOGGING
-// ==========================================
-
-class ErrorHandler {
-  constructor(options = {}) {
-    this.sentryDsn = options.sentryDsn;
-    this.environment = options.environment || 'production';
-    this.logLevel = options.logLevel || 'error';
-    this.errors = [];
-  }
-
-  captureError(error, context = {}) {
-    const errorLog = {
-      message: error.message,
-      stack: error.stack,
-      context,
-      timestamp: Date.now(),
-      userAgent: navigator.userAgent,
-      url: window.location.href
-    };
-
-    this.errors.push(errorLog);
-    
-    // Log to console in dev
-    if (this.environment === 'development') {
-      console.error('🚨 Error captured:', errorLog);
-    }
-
-    // Send to Sentry in production
-    if (this.sentryDsn && this.environment === 'production') {
-      this.sendToSentry(errorLog);
-    }
-
-    return errorLog;
-  }
-
-  sendToSentry(errorLog) {
-    // Integration avec Sentry
-    if (window.Sentry) {
-      window.Sentry.captureException(new Error(errorLog.message), {
-        extra: errorLog.context
-      });
-    }
-  }
-
-  wrap(fn, context = '') {
-    return (...args) => {
-      try {
-        return fn(...args);
-      } catch (error) {
-        this.captureError(error, { context, args });
-        throw error;
-      }
-    };
-  }
-}
-
-export default ErrorHandler;

package/manager/FeatureFlags.js

@@ -1,60 +0,0 @@
-// ==========================================
-// 6. FEATURE FLAGS & AB TESTING
-// ==========================================
-
-class FeatureFlags {
-  constructor(config = {}) {
-    this.flags = config.flags || {};
-    this.userId = config.userId;
-    this.experiments = {};
-  }
-
-  isEnabled(flagName) {
-    const flag = this.flags[flagName];
-    
-    if (typeof flag === 'boolean') {
-      return flag;
-    }
-
-    if (typeof flag === 'object') {
-      // Percentage rollout
-      if (flag.percentage && this.userId) {
-        const hash = this.hashUserId(this.userId);
-        return hash < flag.percentage;
-      }
-
-      // A/B test
-      if (flag.variants) {
-        return this.getVariant(flagName, flag.variants);
-      }
-    }
-
-    return false;
-  }
-
-  getVariant(experimentName, variants) {
-    if (!this.userId) return variants[0];
-
-    const hash = this.hashUserId(this.userId + experimentName);
-    const variantIndex = hash % variants.length;
-    
-    this.experiments[experimentName] = variants[variantIndex];
-    return variants[variantIndex];
-  }
-
-  hashUserId(str) {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-      hash = ((hash << 5) - hash) + str.charCodeAt(i);
-      hash = hash & hash;
-    }
-    return Math.abs(hash) % 100;
-  }
-
-  trackExperiment(experimentName) {
-    // Envoyer à analytics
-    console.log('Experiment:', experimentName, this.experiments[experimentName]);
-  }
-}
-
-export default FeatureFlags;

package/manager/MemoryManager.js

@@ -1,107 +0,0 @@
-// ==========================================
-// 4. MEMORY MANAGEMENT
-// ==========================================
-
-class MemoryManager {
-  constructor(framework) {
-    this.framework = framework;
-    this.imageCache = new Map();
-    this.maxCacheSize = 50 * 1024 * 1024; // 50MB
-    this.currentCacheSize = 0;
-    this.componentRegistry = new WeakMap();
-  }
-
-  cacheImage(url, image) {
-    const size = this.estimateImageSize(image);
-    
-    // Éviction si dépassement
-    if (this.currentCacheSize + size > this.maxCacheSize) {
-      this.evictOldest();
-    }
-
-    this.imageCache.set(url, {
-      image,
-      size,
-      lastAccessed: Date.now(),
-      accessCount: 0
-    });
-
-    this.currentCacheSize += size;
-  }
-
-  getImage(url) {
-    const cached = this.imageCache.get(url);
-    if (cached) {
-      cached.lastAccessed = Date.now();
-      cached.accessCount++;
-      return cached.image;
-    }
-    return null;
-  }
-
-  evictOldest() {
-    let oldest = null;
-    let oldestTime = Infinity;
-
-    for (let [url, data] of this.imageCache) {
-      if (data.lastAccessed < oldestTime) {
-        oldestTime = data.lastAccessed;
-        oldest = url;
-      }
-    }
-
-    if (oldest) {
-      const data = this.imageCache.get(oldest);
-      this.currentCacheSize -= data.size;
-      this.imageCache.delete(oldest);
-    }
-  }
-
-  estimateImageSize(image) {
-    // Estimation approximative
-    return image.width * image.height * 4; // 4 bytes per pixel (RGBA)
-  }
-
-  registerComponent(component) {
-    this.componentRegistry.set(component, {
-      created: Date.now(),
-      listeners: []
-    });
-  }
-
-  unregisterComponent(component) {
-    const data = this.componentRegistry.get(component);
-    if (data) {
-      // Nettoyer tous les event listeners
-      data.listeners.forEach(({ element, event, handler }) => {
-        element.removeEventListener(event, handler);
-      });
-    }
-    this.componentRegistry.delete(component);
-  }
-
-  trackListener(component, element, event, handler) {
-    const data = this.componentRegistry.get(component);
-    if (data) {
-      data.listeners.push({ element, event, handler });
-    }
-  }
-
-  clearAll() {
-    this.imageCache.clear();
-    this.currentCacheSize = 0;
-  }
-
-  getMemoryReport() {
-    return {
-      imageCacheSize: `${(this.currentCacheSize / 1024 / 1024).toFixed(2)} MB`,
-      imageCacheCount: this.imageCache.size,
-      componentCount: this.framework.components.length,
-      heapSize: performance.memory 
-        ? `${(performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)} MB`
-        : 'N/A'
-    };
-  }
-}
-
-export default MemoryManager;