@umituz/web-design-system 3.1.22 → 4.0.0

package/src/infrastructure/performance/useMemoryOptimization.ts

@@ -1,293 +0,0 @@
-import { useEffect, useRef, useCallback, useState } from 'react';
-
-export interface MemoryOptimizationConfig {
-  enableCleanupLogging?: boolean;
-  trackEventListeners?: boolean;
-  trackTimers?: boolean;
-  trackSubscriptions?: boolean;
-}
-
-export interface CleanupFunction {
-  (): void;
-}
-
-export const useMemoryOptimization = (config: MemoryOptimizationConfig = {}) => {
-  const {
-    enableCleanupLogging = import.meta.env.DEV,
-    trackEventListeners = true,
-    trackTimers = true,
-    trackSubscriptions = true
-  } = config;
-
-  const cleanupFunctions = useRef<CleanupFunction[]>([]);
-  const eventListeners = useRef<Array<{
-    element: EventTarget;
-    event: string;
-    handler: EventListener;
-    options?: AddEventListenerOptions;
-  }>>([]);
-  const timers = useRef<Array<{
-    id: number;
-    type: 'timeout' | 'interval';
-  }>>([]);
-  const subscriptions = useRef<Array<{
-    name: string;
-    unsubscribe: () => void;
-  }>>([]);
-
-  const addCleanup = useCallback((cleanup: CleanupFunction, name?: string) => {
-    cleanupFunctions.current.push(cleanup);
-
-    if (enableCleanupLogging && name) {
-      console.log(`[Memory] Added cleanup: ${name}`);
-    }
-
-    return () => {
-      const index = cleanupFunctions.current.indexOf(cleanup);
-      if (index > -1) {
-        cleanupFunctions.current.splice(index, 1);
-      }
-    };
-  }, [enableCleanupLogging]);
-
-  const addEventListener = useCallback((
-    element: EventTarget,
-    event: string,
-    handler: EventListener,
-    options?: AddEventListenerOptions
-  ) => {
-    if (!trackEventListeners) {
-      element.addEventListener(event, handler, options);
-      return () => element.removeEventListener(event, handler, options);
-    }
-
-    element.addEventListener(event, handler, options);
-
-    const listenerInfo = { element, event, handler, options };
-    eventListeners.current.push(listenerInfo);
-
-    if (enableCleanupLogging) {
-      console.log(`[Memory] Added event listener: ${event}`);
-    }
-
-    return () => {
-      element.removeEventListener(event, handler, options);
-      const index = eventListeners.current.indexOf(listenerInfo);
-      if (index > -1) {
-        eventListeners.current.splice(index, 1);
-      }
-    };
-  }, [trackEventListeners, enableCleanupLogging]);
-
-  const setTimeout = useCallback((
-    callback: () => void,
-    delay: number
-  ) => {
-    const id = window.setTimeout(callback, delay);
-
-    if (trackTimers) {
-      timers.current.push({ id, type: 'timeout' });
-
-      if (enableCleanupLogging) {
-        console.log(`[Memory] Added timeout: ${id}`);
-      }
-    }
-
-    return id;
-  }, [trackTimers, enableCleanupLogging]);
-
-  const setInterval = useCallback((
-    callback: () => void,
-    delay: number
-  ) => {
-    const id = window.setInterval(callback, delay);
-
-    if (trackTimers) {
-      timers.current.push({ id, type: 'interval' });
-
-      if (enableCleanupLogging) {
-        console.log(`[Memory] Added interval: ${id}`);
-      }
-    }
-
-    return id;
-  }, [trackTimers, enableCleanupLogging]);
-
-  const clearTimeout = useCallback((id: number) => {
-    window.clearTimeout(id);
-
-    if (trackTimers) {
-      const index = timers.current.findIndex(timer => timer.id === id);
-      if (index > -1) {
-        timers.current.splice(index, 1);
-
-        if (enableCleanupLogging) {
-          console.log(`[Memory] Cleared timeout: ${id}`);
-        }
-      }
-    }
-  }, [trackTimers, enableCleanupLogging]);
-
-  const clearInterval = useCallback((id: number) => {
-    window.clearInterval(id);
-
-    if (trackTimers) {
-      const index = timers.current.findIndex(timer => timer.id === id);
-      if (index > -1) {
-        timers.current.splice(index, 1);
-
-        if (enableCleanupLogging) {
-          console.log(`[Memory] Cleared interval: ${id}`);
-        }
-      }
-    }
-  }, [trackTimers, enableCleanupLogging]);
-
-  const addSubscription = useCallback((
-    name: string,
-    unsubscribe: () => void
-  ) => {
-    if (!trackSubscriptions) {
-      return unsubscribe;
-    }
-
-    const subscription = { name, unsubscribe };
-    subscriptions.current.push(subscription);
-
-    if (enableCleanupLogging) {
-      console.log(`[Memory] Added subscription: ${name}`);
-    }
-
-    return () => {
-      unsubscribe();
-      const index = subscriptions.current.indexOf(subscription);
-      if (index > -1) {
-        subscriptions.current.splice(index, 1);
-
-        if (enableCleanupLogging) {
-          console.log(`[Memory] Unsubscribed: ${name}`);
-        }
-      }
-    };
-  }, [trackSubscriptions, enableCleanupLogging]);
-
-  const getMemoryStats = useCallback(() => {
-    return {
-      cleanupFunctions: cleanupFunctions.current.length,
-      eventListeners: eventListeners.current.length,
-      timers: timers.current.length,
-      subscriptions: subscriptions.current.length,
-      totalTrackedItems:
-        cleanupFunctions.current.length +
-        eventListeners.current.length +
-        timers.current.length +
-        subscriptions.current.length
-    };
-  }, []);
-
-  const cleanup = useCallback(() => {
-    if (enableCleanupLogging) {
-      const stats = getMemoryStats();
-      console.log(`[Memory] Running cleanup with ${stats.totalTrackedItems} items`);
-    }
-
-    eventListeners.current.forEach(({ element, event, handler, options }) => {
-      element.removeEventListener(event, handler, options);
-    });
-    eventListeners.current = [];
-
-    timers.current.forEach(({ id, type }) => {
-      if (type === 'timeout') {
-        window.clearTimeout(id);
-      } else {
-        window.clearInterval(id);
-      }
-    });
-    timers.current = [];
-
-    subscriptions.current.forEach(({ unsubscribe }) => {
-      unsubscribe();
-    });
-    subscriptions.current = [];
-
-    cleanupFunctions.current.forEach(cleanup => {
-      try {
-        cleanup();
-      } catch (error) {
-        console.error('[Memory] Cleanup function failed:', error);
-      }
-    });
-    cleanupFunctions.current = [];
-
-    if (enableCleanupLogging) {
-      console.log('[Memory] Cleanup complete');
-    }
-  }, [enableCleanupLogging, getMemoryStats]);
-
-  useEffect(() => {
-    return () => {
-      if (enableCleanupLogging) {
-        const stats = getMemoryStats();
-        console.log(`[Memory] Unmounting with ${stats.totalTrackedItems} items to clean`);
-      }
-
-      cleanup();
-    };
-  }, [cleanup, enableCleanupLogging, getMemoryStats]);
-
-  return {
-    addCleanup,
-    addEventListener,
-    setTimeout,
-    setInterval,
-    clearTimeout,
-    clearInterval,
-    addSubscription,
-    getMemoryStats,
-    cleanup
-  };
-};
-
-export const useMemoryLeakDetector = (componentName?: string) => {
-  const mountTime = useRef<number>(Date.now());
-  const [renderCount, setRenderCount] = useState<number>(0);
-  const [lifespan, setLifespan] = useState<number>(0);
-
-  useEffect(() => {
-    setRenderCount(prev => {
-      const newCount = prev + 1;
-
-      if (newCount > 100 && newCount % 10 === 0) {
-        console.warn(
-          `[Memory Leak] ${componentName || 'Component'} has rendered ${newCount} times. ` +
-          'This might indicate a memory leak or unnecessary re-renders.'
-        );
-      }
-
-      return newCount;
-    });
-  });
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setLifespan(Date.now() - mountTime.current);
-    }, 1000);
-
-    return () => {
-      clearInterval(interval);
-      const finalLifespan = Date.now() - mountTime.current;
-
-      if (import.meta.env.DEV) {
-        console.log(
-          `[Memory] ${componentName || 'Component'} unmounted after ${finalLifespan}ms ` +
-          `with ${renderCount} renders`
-        );
-      }
-    };
-  }, [componentName, renderCount]);
-
-  return {
-    renderCount,
-    lifespan
-  };
-};

package/src/infrastructure/performance/usePerformanceMonitor.ts

@@ -1,158 +0,0 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
-
-export interface PerformanceMetrics {
-  renderTime: number;
-  mountTime: number;
-  updateCount: number;
-  lastRenderTime: number;
-  averageRenderTime: number;
-  memoryUsage?: number;
-  componentName?: string;
-}
-
-export interface PerformanceConfig {
-  trackRenders?: boolean;
-  trackMemory?: boolean;
-  sampleRate?: number;
-  componentName?: string;
-  onMetricsUpdate?: (metrics: PerformanceMetrics) => void;
-}
-
-export const usePerformanceMonitor = (config: PerformanceConfig = {}) => {
-  const {
-    trackRenders = true,
-    trackMemory = false,
-    sampleRate = 1.0,
-    componentName = 'Unknown',
-    onMetricsUpdate
-  } = config;
-
-  const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    renderTime: 0,
-    mountTime: 0,
-    updateCount: 0,
-    lastRenderTime: 0,
-    averageRenderTime: 0,
-    componentName
-  });
-
-  const mountTimeRef = useRef<number>(0);
-  const renderStartRef = useRef<number>(0);
-  const renderTimesRef = useRef<number[]>([]);
-  const updateCountRef = useRef<number>(0);
-
-  useEffect(() => {
-    mountTimeRef.current = performance.now();
-    renderStartRef.current = performance.now();
-
-    return () => {
-      // Component unmount
-    };
-  }, [componentName]);
-
-  useEffect(() => {
-    if (!trackRenders || Math.random() > sampleRate) return;
-
-    const renderEndTime = performance.now();
-    const renderTime = renderEndTime - renderStartRef.current;
-
-    renderTimesRef.current.push(renderTime);
-    updateCountRef.current += 1;
-
-    if (renderTimesRef.current.length > 50) {
-      renderTimesRef.current = renderTimesRef.current.slice(-50);
-    }
-
-    const averageRenderTime = renderTimesRef.current.reduce((sum, time) => sum + time, 0) / renderTimesRef.current.length;
-
-    let memoryUsage: number | undefined;
-    if (trackMemory && 'memory' in performance) {
-      memoryUsage = (performance as { memory?: { usedJSHeapSize: number } }).memory?.usedJSHeapSize;
-    }
-
-    const newMetrics: PerformanceMetrics = {
-      renderTime,
-      mountTime: renderEndTime - mountTimeRef.current,
-      updateCount: updateCountRef.current,
-      lastRenderTime: renderTime,
-      averageRenderTime,
-      memoryUsage,
-      componentName
-    };
-
-    setMetrics(newMetrics);
-    onMetricsUpdate?.(newMetrics);
-
-    renderStartRef.current = performance.now();
-
-    if (import.meta.env.DEV) {
-      if (renderTime > 16) {
-        console.warn(`[Performance] Slow render detected: ${renderTime.toFixed(2)}ms`);
-      }
-      if (updateCountRef.current % 10 === 0) {
-        console.log({
-          renders: updateCountRef.current,
-          avgRenderTime: averageRenderTime.toFixed(2) + 'ms',
-          lastRenderTime: renderTime.toFixed(2) + 'ms'
-        });
-      }
-    }
-  }, [trackRenders, sampleRate, trackMemory, componentName, onMetricsUpdate]);
-
-  const resetMetrics = useCallback(() => {
-    renderTimesRef.current = [];
-    updateCountRef.current = 0;
-    mountTimeRef.current = performance.now();
-    renderStartRef.current = performance.now();
-
-    setMetrics({
-      renderTime: 0,
-      mountTime: 0,
-      updateCount: 0,
-      lastRenderTime: 0,
-      averageRenderTime: 0,
-      componentName
-    });
-  }, [componentName]);
-
-  const getPerformanceReport = useCallback(() => {
-    return {
-      ...metrics,
-      renderTimes: [...renderTimesRef.current],
-      isSlowComponent: metrics.averageRenderTime > 16,
-      performanceGrade: metrics.averageRenderTime < 5 ? 'A' :
-                       metrics.averageRenderTime < 10 ? 'B' :
-                       metrics.averageRenderTime < 16 ? 'C' : 'D'
-    };
-  }, [metrics]);
-
-  return {
-    metrics,
-    resetMetrics,
-    getPerformanceReport
-  };
-};
-
-export const useRenderPerformance = (componentName?: string) => {
-  const renderStartTime = useRef<number>(0);
-  const [renderStats, setRenderStats] = useState<{
-    lastRenderTime: number;
-    renderCount: number;
-  }>({
-    lastRenderTime: 0,
-    renderCount: 0
-  });
-
-  const startTime = performance.now();
-
-  useEffect(() => {
-    setRenderStats(prev => ({
-      lastRenderTime: performance.now() - startTime,
-      renderCount: prev.renderCount + 1
-    }));
-
-    renderStartTime.current = performance.now();
-  }, [componentName, renderStats, startTime]);
-
-  return renderStats;
-};

package/src/infrastructure/security/index.ts

@@ -1,10 +0,0 @@
-export * from './security-config';
-export * from './validation';
-export {
-  sanitizeInput as FormSanitizeInput,
-  useFormValidation,
-  COMMON_RULES,
-  VALIDATION_PATTERNS,
-  type ValidationRule,
-  type ValidationRules
-} from './useFormValidation';

package/src/infrastructure/security/security-config.ts

@@ -1,171 +0,0 @@
-import type { ValidationConfig } from './validation';
-
-/**
- * Content Security Policy configuration
- * Helps prevent XSS attacks by controlling resource loading
- */
-export const CSP_CONFIG = {
-  directives: {
-    'default-src': ["'self'"],
-    'script-src': ["'self'", "'unsafe-inline'"],
-    'style-src': ["'self'", "'unsafe-inline'"],
-    'img-src': ["'self'", "data:", "https:"],
-    'connect-src': ["'self'", "https:", "wss:"],
-    'font-src': ["'self'", "https:", "data:"],
-    'object-src': ["'none'"],
-    'media-src': ["'self'", "https:"],
-    'frame-src': ["'none'"],
-    'worker-src': ["'self'"],
-    'child-src': ["'none'"],
-    'form-action': ["'self'"],
-    'base-uri': ["'self'"],
-    'manifest-src': ["'self'"
-    ]
-  }
-} as const;
-
-/**
- * Validation configurations for different content types
- */
-export const VALIDATION_CONFIGS: Record<string, ValidationConfig> = {
-  PLAIN_TEXT: {
-    allowHtml: false,
-    stripTags: true,
-    allowedTags: [],
-    allowedAttributes: []
-  },
-
-  RICH_TEXT: {
-    allowHtml: true,
-    stripTags: false,
-    allowedTags: ['p', 'br', 'strong', 'em', 'u', 'ol', 'ul', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-    allowedAttributes: ['class']
-  },
-
-  LINK_CONTENT: {
-    allowHtml: true,
-    stripTags: false,
-    allowedTags: ['a', 'p', 'br', 'strong', 'em'],
-    allowedAttributes: ['href', 'title', 'target']
-  },
-
-  USER_PROFILE: {
-    allowHtml: false,
-    stripTags: true,
-    allowedTags: [],
-    allowedAttributes: []
-  },
-
-  COMMENT: {
-    allowHtml: true,
-    stripTags: false,
-    allowedTags: ['p', 'br', 'strong', 'em'],
-    allowedAttributes: []
-  }
-} as const;
-
-/**
- * File upload security settings
- */
-export const FILE_SECURITY_CONFIG = {
-  allowedMimeTypes: {
-    image: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
-    audio: ['audio/mpeg', 'audio/wav', 'audio/mp4', 'audio/flac'],
-    video: ['video/mp4', 'video/webm', 'video/quicktime'],
-    document: ['application/pdf', 'text/plain'],
-    avatar: ['image/jpeg', 'image/png', 'image/webp']
-  },
-
-  maxFileSizes: {
-    image: 10 * 1024 * 1024,
-    audio: 100 * 1024 * 1024,
-    video: 500 * 1024 * 1024,
-    document: 5 * 1024 * 1024,
-    avatar: 2 * 1024 * 1024
-  },
-
-  blockedExtensions: [
-    '.exe', '.bat', '.cmd', '.com', '.pif', '.scr', '.vbs', '.js', '.jar',
-    '.app', '.deb', '.pkg', '.dmg', '.rpm', '.msi', '.apk', '.ipa'
-  ],
-
-  blockedPatterns: [
-    /^\./,
-    /\.\.$/,
-    /[<>:"|?*]/,
-    /^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i
-  ]
-} as const;
-
-/**
- * Rate limiting configuration
- */
-export const RATE_LIMIT_CONFIG = {
-  api: {
-    default: 100,
-    auth: 10,
-    upload: 20,
-    generation: 30,
-    export: 10
-  },
-
-  actions: {
-    login: 5,
-    registration: 3,
-    passwordReset: 3,
-    contentCreation: 50,
-    fileUpload: 100
-  }
-} as const;
-
-/**
- * Session security configuration
- */
-export const SESSION_CONFIG = {
-  timeout: 720,
-  refreshThreshold: 60,
-  maxSessions: 5,
-  cookie: {
-    httpOnly: true,
-    secure: true,
-    sameSite: 'strict' as const,
-    maxAge: 720 * 60 * 1000
-  }
-} as const;
-
-/**
- * Security headers configuration
- */
-export const SECURITY_HEADERS = {
-  'X-Content-Type-Options': 'nosniff',
-  'X-Frame-Options': 'DENY',
-  'X-XSS-Protection': '1; mode=block',
-  'Referrer-Policy': 'strict-origin-when-cross-origin',
-  'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',
-  'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload'
-} as const;
-
-/**
- * CORS configuration
- */
-export const CORS_CONFIG = {
-  origin: [
-    'http://localhost:3000',
-    'http://localhost:5173',
-    'https://amaterasu.app'
-  ],
-  credentials: true,
-  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
-  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
-  maxAge: 86400
-} as const;
-
-export default {
-  CSP_CONFIG,
-  VALIDATION_CONFIGS,
-  FILE_SECURITY_CONFIG,
-  RATE_LIMIT_CONFIG,
-  SESSION_CONFIG,
-  SECURITY_HEADERS,
-  CORS_CONFIG
-};