@umituz/web-design-system 1.0.4 → 1.3.1

package/src/infrastructure/performance/usePerformanceMonitor.ts

@@ -0,0 +1,158 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,171 @@
+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
+};

package/src/infrastructure/security/useFormValidation.ts

@@ -0,0 +1,216 @@
+import { useState, useCallback, useMemo } from 'react';
+
+export interface ValidationRule {
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: RegExp;
+  custom?: (value: string) => string | null;
+  message?: string;
+}
+
+export interface ValidationRules {
+  [fieldName: string]: ValidationRule;
+}
+
+export interface ValidationErrors {
+  [fieldName: string]: string;
+}
+
+export interface FormData {
+  [fieldName: string]: string | number | boolean | string[];
+}
+
+const validateField = (value: string | number | boolean | string[], rule: ValidationRule): string | null => {
+  const stringValue = Array.isArray(value) ? value.join(',') : String(value);
+
+  if (rule.required && (!stringValue || stringValue.trim() === '')) {
+    return rule.message || 'This field is required';
+  }
+
+  if (!stringValue || stringValue.trim() === '') {
+    return null;
+  }
+
+  if (rule.minLength && stringValue.length < rule.minLength) {
+    return rule.message || `Must be at least ${rule.minLength} characters`;
+  }
+
+  if (rule.maxLength && stringValue.length > rule.maxLength) {
+    return rule.message || `Must be no more than ${rule.maxLength} characters`;
+  }
+
+  if (rule.pattern && !rule.pattern.test(stringValue)) {
+    return rule.message || 'Invalid format';
+  }
+
+  if (rule.custom) {
+    return rule.custom(stringValue);
+  }
+
+  return null;
+};
+
+export const sanitizeInput = (value: string): string => {
+  return value
+    .trim()
+    .replace(/[<>]/g, '')
+    .replace(/\s+/g, ' ');
+};
+
+export const VALIDATION_PATTERNS = {
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  url: /^https?:\/\/.+/,
+  phone: /^\+?[\d\s\-()]+$/,
+  alphanumeric: /^[a-zA-Z0-9]+$/,
+  noSpecialChars: /^[a-zA-Z0-9\s]+$/,
+} as const;
+
+export const COMMON_RULES = {
+  required: { required: true },
+  email: {
+    pattern: VALIDATION_PATTERNS.email,
+    message: 'Please enter a valid email address'
+  },
+  url: {
+    pattern: VALIDATION_PATTERNS.url,
+    message: 'Please enter a valid URL'
+  },
+  phone: {
+    pattern: VALIDATION_PATTERNS.phone,
+    message: 'Please enter a valid phone number'
+  },
+  shortText: { maxLength: 100 },
+  mediumText: { maxLength: 500 },
+  longText: { maxLength: 2000 },
+  name: {
+    minLength: 2,
+    maxLength: 50,
+    pattern: VALIDATION_PATTERNS.noSpecialChars,
+    message: 'Name must be 2-50 characters and contain only letters, numbers, and spaces'
+  },
+  description: {
+    minLength: 10,
+    maxLength: 500,
+    message: 'Description must be 10-500 characters'
+  },
+} as const;
+
+export const useFormValidation = <T extends FormData>(
+  initialData: T,
+  validationRules: ValidationRules = {}
+) => {
+  const [formData, setFormData] = useState<T>(initialData);
+  const [errors, setErrors] = useState<ValidationErrors>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+  const validateSingleField = useCallback((fieldName: string, value: string | number | boolean | string[]): string | null => {
+    const rule = validationRules[fieldName];
+    if (!rule) return null;
+
+    return validateField(value, rule);
+  }, [validationRules]);
+
+  const validateAllFields = useCallback((): boolean => {
+    const newErrors: ValidationErrors = {};
+    let isValid = true;
+
+    Object.keys(validationRules).forEach(fieldName => {
+      const value = formData[fieldName];
+      const error = validateSingleField(fieldName, value);
+
+      if (error) {
+        newErrors[fieldName] = error;
+        isValid = false;
+      }
+    });
+
+    setErrors(newErrors);
+    return isValid;
+  }, [formData, validateSingleField, validationRules]);
+
+  const updateField = useCallback((fieldName: string, value: string | number | boolean | string[]) => {
+    const sanitizedValue = typeof value === 'string' ? sanitizeInput(value) : value;
+
+    setFormData(prev => ({ ...prev, [fieldName]: sanitizedValue }));
+
+    setTouched(prev => ({ ...prev, [fieldName]: true }));
+
+    if (touched[fieldName] || value !== '') {
+      const error = validateSingleField(fieldName, sanitizedValue);
+      setErrors(prev => ({ ...prev, [fieldName]: error || '' }));
+    }
+  }, [touched, validateSingleField]);
+
+  const clearFieldError = useCallback((fieldName: string) => {
+    setErrors(prev => ({ ...prev, [fieldName]: '' }));
+  }, []);
+
+  const clearAllErrors = useCallback(() => {
+    setErrors({});
+  }, []);
+
+  const resetForm = useCallback(() => {
+    setFormData(initialData);
+    setErrors({});
+    setTouched({});
+  }, [initialData]);
+
+  const setFormDataWithValidation = useCallback((newData: Partial<T>) => {
+    setFormData(prev => ({ ...prev, ...newData }));
+
+    const newErrors: ValidationErrors = {};
+    Object.keys(newData).forEach(fieldName => {
+      if (validationRules[fieldName]) {
+        const fieldValue = newData[fieldName];
+        const error = validateSingleField(fieldName, fieldValue as string | number | boolean | string[]);
+        if (error) {
+          newErrors[fieldName] = error;
+        }
+      }
+    });
+
+    setErrors(prev => ({ ...prev, ...newErrors }));
+  }, [validateSingleField, validationRules]);
+
+  const getFieldProps = useCallback((fieldName: string) => ({
+    value: formData[fieldName] || '',
+    onChange: (value: string | number | boolean | string[]) => updateField(fieldName, value),
+    onBlur: () => {
+      setTouched(prev => ({ ...prev, [fieldName]: true }));
+      const error = validateSingleField(fieldName, formData[fieldName]);
+      setErrors(prev => ({ ...prev, [fieldName]: error || '' }));
+    },
+    error: errors[fieldName],
+    isValid: !errors[fieldName] && touched[fieldName],
+  }), [formData, errors, touched, updateField, validateSingleField]);
+
+  const isFormValid = useMemo(() => {
+    return Object.keys(validationRules).every(fieldName => !errors[fieldName]);
+  }, [errors, validationRules]);
+
+  const hasErrors = useMemo(() => {
+    return Object.values(errors).some(error => error !== '');
+  }, [errors]);
+
+  const touchedFields = useMemo(() => {
+    return Object.keys(touched).filter(fieldName => touched[fieldName]);
+  }, [touched]);
+
+  return {
+    formData,
+    errors,
+    touched,
+    isFormValid,
+    hasErrors,
+    touchedFields,
+    updateField,
+    validateAllFields,
+    validateSingleField,
+    clearFieldError,
+    clearAllErrors,
+    resetForm,
+    setFormDataWithValidation,
+    getFieldProps,
+  };
+};