@umituz/web-design-system 3.1.21 → 4.0.0

package/src/infrastructure/error/SuspenseWrapper.tsx

@@ -1,133 +0,0 @@
-import React, { Suspense } from 'react';
-import { ErrorBoundary } from './ErrorBoundary';
-
-export interface SuspenseWrapperProps {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
-  errorFallback?: React.ReactNode;
-  loadingText?: string;
-  variant?: 'default' | 'minimal' | 'card';
-  className?: string;
-  style?: React.CSSProperties;
-  showErrorBoundary?: boolean;
-  errorBoundaryLevel?: 'page' | 'component' | 'feature';
-}
-
-const DefaultLoadingSpinner: React.FC<{ text?: string; className?: string }> = ({ text, className }) => (
-  <div className={className} style={{
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '16px',
-    padding: '32px'
-  }}>
-    <div style={{
-      width: '40px',
-      height: '40px',
-      border: '4px solid #e5e7eb',
-      borderTopColor: '#3b82f6',
-      borderRadius: '50%',
-      animation: 'spin 1s linear infinite'
-    }} />
-    {text && <p style={{ fontSize: '14px', color: '#666' }}>{text}</p>}
-  </div>
-);
-
-export const SuspenseWrapper: React.FC<SuspenseWrapperProps> = ({
-  children,
-  fallback,
-  errorFallback,
-  loadingText = 'Loading...',
-  variant = 'default',
-  className = '',
-  style,
-  showErrorBoundary = true,
-  errorBoundaryLevel = 'component'
-}) => {
-  const defaultFallback = (
-    <DefaultLoadingSpinner
-      text={variant === 'card' ? loadingText : undefined}
-      className={className}
-    />
-  );
-
-  const suspenseContent = (
-    <Suspense fallback={fallback || defaultFallback}>
-      {children}
-    </Suspense>
-  );
-
-  const content = showErrorBoundary ? (
-    <ErrorBoundary
-      level={errorBoundaryLevel}
-      fallback={errorFallback}
-    >
-      {suspenseContent}
-    </ErrorBoundary>
-  ) : suspenseContent;
-
-  // Wrap in div if className or style is provided
-  if (className || style) {
-    return <div className={className} style={style}>{content}</div>;
-  }
-
-  return content;
-};
-
-// Specialized Suspense wrappers
-export const PageSuspense: React.FC<{
-  children: React.ReactNode;
-  loadingText?: string
-}> = ({ children, loadingText = 'Loading page...' }) => (
-  <SuspenseWrapper
-    variant="card"
-    loadingText={loadingText}
-    errorBoundaryLevel="page"
-    className="min-h-[400px]"
-  >
-    {children}
-  </SuspenseWrapper>
-);
-
-export const ComponentSuspense: React.FC<{
-  children: React.ReactNode;
-  loadingText?: string;
-  className?: string;
-}> = ({ children, loadingText = 'Loading component...', className }) => (
-  <SuspenseWrapper
-    variant="default"
-    loadingText={loadingText}
-    errorBoundaryLevel="component"
-    className={className}
-  >
-    {children}
-  </SuspenseWrapper>
-);
-
-export const FeatureSuspense: React.FC<{
-  children: React.ReactNode;
-  loadingText?: string
-}> = ({ children, loadingText = 'Loading feature...' }) => (
-  <SuspenseWrapper
-    variant="card"
-    loadingText={loadingText}
-    errorBoundaryLevel="feature"
-    style={{ padding: '24px' }}
-  >
-    {children}
-  </SuspenseWrapper>
-);
-
-export const InlineSuspense: React.FC<{
-  children: React.ReactNode
-}> = ({ children }) => (
-  <SuspenseWrapper
-    variant="minimal"
-    showErrorBoundary={false}
-  >
-    {children}
-  </SuspenseWrapper>
-);
-
-export default SuspenseWrapper;

package/src/infrastructure/error/index.ts

@@ -1,5 +0,0 @@
-export { ErrorBoundary } from './ErrorBoundary';
-export { ErrorDisplay, NetworkError, NotFoundError, PermissionError, ApiError } from './ErrorDisplay';
-export type { ErrorDisplayProps } from './ErrorDisplay';
-export { SuspenseWrapper, PageSuspense, ComponentSuspense, FeatureSuspense, InlineSuspense } from './SuspenseWrapper';
-export type { SuspenseWrapperProps } from './SuspenseWrapper';

package/src/infrastructure/performance/index.ts

@@ -1,92 +0,0 @@
-export { usePerformanceMonitor, useRenderPerformance } from './usePerformanceMonitor';
-export { useLazyLoading } from './useLazyLoading';
-export { useMemoryOptimization, useMemoryLeakDetector } from './useMemoryOptimization';
-
-export type { PerformanceMetrics, PerformanceConfig } from './usePerformanceMonitor';
-export type { MemoryOptimizationConfig, CleanupFunction } from './useMemoryOptimization';
-
-// Performance monitoring utilities
-export const performanceUtils = {
-  // Measure render performance
-  measureRender: (componentName: string, fn: () => void) => {
-    const start = performance.now();
-    fn();
-    const end = performance.now();
-
-    if (import.meta.env.DEV) {
-      const duration = end - start;
-      if (duration > 16) {
-        console.warn(`[Performance] ${componentName} took ${duration.toFixed(2)}ms to render`);
-      }
-    }
-
-    return end - start;
-  },
-
-  // Measure async operation
-  measureAsync: async <T>(componentName: string, operation: string, fn: () => Promise<T>): Promise<T> => {
-    const start = performance.now();
-    try {
-      const result = await fn();
-      const duration = performance.now() - start;
-
-      if (import.meta.env.DEV) {
-        console.log(`[Performance] ${componentName} ${operation} completed in ${duration.toFixed(2)}ms`);
-      }
-
-      return result;
-    } catch (error) {
-      const duration = performance.now() - start;
-      console.error(`[Performance] ${componentName} ${operation} failed after ${duration.toFixed(2)}ms:`, error);
-      throw error;
-    }
-  },
-
-  // Get performance metrics
-  getMetrics: () => {
-    if (typeof performance === 'undefined') {
-      return null;
-    }
-
-    // performance.memory is not in standard TypeScript lib but available in Chrome-based browsers
-    interface PerformanceMemory {
-      usedJSHeapSize: number;
-      totalJSHeapSize: number;
-      jsHeapSizeLimit: number;
-    }
-
-    interface PerformanceWithMemory extends Performance {
-      memory?: PerformanceMemory;
-    }
-
-    const mem = (performance as unknown as PerformanceWithMemory).memory;
-    if (!mem) {
-      return null;
-    }
-
-    return {
-      memory: {
-        usedJSHeapSize: mem.usedJSHeapSize,
-        totalJSHeapSize: mem.totalJSHeapSize,
-        jsHeapSizeLimit: mem.jsHeapSizeLimit,
-      },
-      navigation: performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined,
-    };
-  },
-
-  // Log performance summary
-  logSummary: () => {
-    const metrics = performanceUtils.getMetrics();
-    if (!metrics) return;
-
-    if (import.meta.env.DEV && metrics.memory) {
-      const memoryUsage = ((metrics.memory.usedJSHeapSize / metrics.memory.jsHeapSizeLimit) * 100).toFixed(2);
-      console.log(`[Performance] Memory usage: ${memoryUsage}%`);
-    }
-
-    if (metrics.navigation) {
-      const loadTime = metrics.navigation.loadEventEnd - metrics.navigation.fetchStart;
-      console.log(`[Performance] Page load time: ${loadTime.toFixed(2)}ms`);
-    }
-  },
-};

package/src/infrastructure/performance/useLazyLoading.ts

@@ -1,342 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-
-export const useIntersectionObserver = (
-  options: IntersectionObserverInit = {}
-) => {
-  const [isIntersecting, setIsIntersecting] = useState(false);
-  const [hasIntersected, setHasIntersected] = useState(false);
-  const targetRef = useRef<HTMLElement>(null);
-
-  const defaultOptions = React.useMemo(() => ({
-    threshold: 0.1,
-    rootMargin: '50px',
-    ...options,
-  }), [options]);
-
-  useEffect(() => {
-    const target = targetRef.current;
-    if (!target) return;
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        const isVisible = entry.isIntersecting;
-        setIsIntersecting(isVisible);
-
-        if (isVisible && !hasIntersected) {
-          setHasIntersected(true);
-        }
-      },
-      defaultOptions
-    );
-
-    observer.observe(target);
-
-    return () => {
-      observer.unobserve(target);
-    };
-  }, [defaultOptions, hasIntersected]);
-
-  return {
-    targetRef,
-    isIntersecting,
-    hasIntersected,
-  };
-};
-
-export const useLazyImage = (src: string, placeholder?: string) => {
-  const [imageSrc, setImageSrc] = useState(placeholder || '');
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [isError, setIsError] = useState(false);
-  const { targetRef, hasIntersected } = useIntersectionObserver();
-
-  useEffect(() => {
-    if (!hasIntersected || !src) return;
-
-    const img = new Image();
-
-    img.onload = () => {
-      setImageSrc(src);
-      setIsLoaded(true);
-      setIsError(false);
-    };
-
-    img.onerror = () => {
-      setIsError(true);
-      setIsLoaded(false);
-    };
-
-    img.src = src;
-
-    return () => {
-      img.onload = null;
-      img.onerror = null;
-    };
-  }, [hasIntersected, src]);
-
-  return {
-    targetRef,
-    imageSrc,
-    isLoaded,
-    isError,
-    hasIntersected,
-  };
-};
-
-export const useVirtualList = <T>(
-  items: T[],
-  options: {
-    itemHeight: number;
-    containerHeight: number;
-    overscan?: number;
-  }
-) => {
-  const { itemHeight, containerHeight, overscan = 5 } = options;
-  const [scrollTop, setScrollTop] = useState(0);
-  const scrollElementRef = useRef<HTMLDivElement>(null);
-
-  const totalHeight = items.length * itemHeight;
-  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-  const endIndex = Math.min(
-    items.length - 1,
-    Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
-  );
-
-  const visibleItems = items.slice(startIndex, endIndex + 1).map((item, index) => ({
-    item,
-    index: startIndex + index,
-    style: {
-      position: 'absolute' as const,
-      top: (startIndex + index) * itemHeight,
-      height: itemHeight,
-      width: '100%',
-    },
-  }));
-
-  const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
-    setScrollTop(event.currentTarget.scrollTop);
-  }, []);
-
-  return {
-    scrollElementRef,
-    visibleItems,
-    totalHeight,
-    handleScroll,
-    startIndex,
-    endIndex,
-  };
-};
-
-export const useResourcePreloader = () => {
-  const [preloadedResources, setPreloadedResources] = useState<Set<string>>(new Set());
-  const [loadingResources, setLoadingResources] = useState<Set<string>>(new Set());
-
-  const preloadImage = useCallback(async (src: string): Promise<void> => {
-    if (preloadedResources.has(src) || loadingResources.has(src)) {
-      return;
-    }
-
-    setLoadingResources(prev => new Set(prev).add(src));
-
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-
-      img.onload = () => {
-        setPreloadedResources(prev => new Set(prev).add(src));
-        setLoadingResources(prev => {
-          const newSet = new Set(prev);
-          newSet.delete(src);
-          return newSet;
-        });
-        resolve();
-      };
-
-      img.onerror = () => {
-        setLoadingResources(prev => {
-          const newSet = new Set(prev);
-          newSet.delete(src);
-          return newSet;
-        });
-        reject(new Error(`Failed to preload image: ${src}`));
-      };
-
-      img.src = src;
-    });
-  }, [preloadedResources, loadingResources]);
-
-  return {
-    preloadImage,
-    preloadedResources: Array.from(preloadedResources),
-    loadingResources: Array.from(loadingResources),
-    isPreloaded: (src: string) => preloadedResources.has(src),
-    isLoading: (src: string) => loadingResources.has(src),
-  };
-};
-
-export const useLazyComponent = <TProps = Record<string, unknown>>(
-  importFunc: () => Promise<{ default: React.ComponentType<TProps> }>,
-  fallback?: React.ComponentType<TProps>
-) => {
-  const [Component, setComponent] = useState<React.ComponentType<TProps> | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const { targetRef, hasIntersected } = useIntersectionObserver();
-
-  const loadComponent = useCallback(async () => {
-    if (Component || isLoading) return;
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const module = await importFunc();
-      setComponent(() => module.default);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error('Failed to load component'));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [importFunc, Component, isLoading]);
-
-  useEffect(() => {
-    if (hasIntersected) {
-      loadComponent();
-    }
-  }, [hasIntersected, loadComponent]);
-
-  const LazyComponent = useCallback((props: TProps) => {
-    if (error) {
-      return fallback ? React.createElement(fallback as React.ElementType, props) : null;
-    }
-
-    if (isLoading || !Component) {
-      return fallback ? React.createElement(fallback as React.ElementType, props) : null;
-    }
-
-    return React.createElement(Component as React.ElementType, props);
-  }, [Component, isLoading, error, fallback]);
-
-  return {
-    targetRef,
-    LazyComponent,
-    isLoading,
-    error,
-    hasIntersected,
-    loadComponent,
-  };
-};
-
-export const useProgressiveEnhancement = () => {
-  const [isOnline, setIsOnline] = useState(navigator.onLine);
-  const [connectionType, setConnectionType] = useState<'slow' | 'fast' | 'unknown'>('unknown');
-
-  const handleOnline = useCallback(() => {
-    setIsOnline(true);
-  }, []);
-
-  const handleOffline = useCallback(() => {
-    setIsOnline(false);
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener('online', handleOnline);
-    window.addEventListener('offline', handleOffline);
-
-    interface NetworkInformation {
-      effectiveType?: string;
-      addEventListener?: (type: string, listener: () => void) => void;
-      removeEventListener?: (type: string, listener: () => void) => void;
-    }
-
-    function getConnection(): NetworkInformation | undefined {
-      const nav = navigator as unknown as {
-        connection?: unknown;
-        mozConnection?: unknown;
-        webkitConnection?: unknown;
-      };
-      const conn = nav.connection || nav.mozConnection || nav.webkitConnection;
-      if (
-        conn &&
-        (typeof conn === 'object') &&
-        ('effectiveType' in conn)
-      ) {
-        return conn as NetworkInformation;
-      }
-      return undefined;
-    }
-
-    const connection = getConnection();
-
-    if (connection) {
-      const updateConnectionType = () => {
-        const effectiveType = connection.effectiveType;
-        if (effectiveType === 'slow-2g' || effectiveType === '2g') {
-          setConnectionType('slow');
-        } else if (effectiveType === '3g' || effectiveType === '4g') {
-          setConnectionType('fast');
-        } else {
-          setConnectionType('unknown');
-        }
-      };
-
-      updateConnectionType();
-      connection.addEventListener?.('change', updateConnectionType);
-
-      return () => {
-        window.removeEventListener('online', handleOnline);
-        window.removeEventListener('offline', handleOffline);
-        connection.removeEventListener?.('change', updateConnectionType);
-      };
-    }
-
-    return () => {
-      window.removeEventListener('online', handleOnline);
-      window.removeEventListener('offline', handleOffline);
-    };
-  }, [handleOnline, handleOffline]);
-
-  const shouldLoadHeavyContent = useCallback(() => {
-    return isOnline && connectionType !== 'slow';
-  }, [isOnline, connectionType]);
-
-  const shouldPreloadContent = useCallback(() => {
-    return isOnline && connectionType === 'fast';
-  }, [isOnline, connectionType]);
-
-  return {
-    isOnline,
-    connectionType,
-    shouldLoadHeavyContent,
-    shouldPreloadContent,
-  };
-};
-
-export const useLazyLoading = (options: {
-  enableImageLazyLoading?: boolean;
-  enableComponentLazyLoading?: boolean;
-  enableVirtualization?: boolean;
-  enablePreloading?: boolean;
-  enableProgressiveEnhancement?: boolean;
-} = {}) => {
-  const {
-    enableImageLazyLoading = true,
-    enableComponentLazyLoading = true,
-    enableVirtualization = true,
-    enablePreloading = true,
-    enableProgressiveEnhancement = true,
-  } = options;
-
-  const resourcePreloader = useResourcePreloader();
-  const progressiveEnhancement = useProgressiveEnhancement();
-
-  return {
-    useIntersectionObserver,
-    useLazyImage: enableImageLazyLoading ? useLazyImage : null,
-    useLazyComponent: enableComponentLazyLoading ? useLazyComponent : null,
-    useVirtualList: enableVirtualization ? useVirtualList : null,
-    preloadImage: enablePreloading ? resourcePreloader.preloadImage : undefined,
-    shouldLoadHeavyContent: enableProgressiveEnhancement ? progressiveEnhancement.shouldLoadHeavyContent : undefined,
-    shouldPreloadContent: enableProgressiveEnhancement ? progressiveEnhancement.shouldPreloadContent : undefined,
-    isOnline: enableProgressiveEnhancement ? progressiveEnhancement.isOnline : undefined,
-    connectionType: enableProgressiveEnhancement ? progressiveEnhancement.connectionType : undefined,
-  };
-};