@umituz/web-design-system 3.1.22 → 4.0.2

package/src/infrastructure/error/ErrorDisplay.tsx

@@ -1,346 +0,0 @@
-import React from 'react';
-
-export interface ErrorDisplayProps {
-  error?: Error | string | null;
-  title?: string;
-  description?: string;
-  variant?: 'default' | 'minimal' | 'card' | 'inline';
-  severity?: 'error' | 'warning' | 'info';
-  showDetails?: boolean;
-  showRetry?: boolean;
-  showHome?: boolean;
-  onRetry?: () => void;
-  onHome?: () => void;
-  className?: string;
-  errorId?: string;
-}
-
-const severityConfig = {
-  error: {
-    icon: '❌',
-    color: '#dc2626',
-    bgColor: '#fef2f2',
-    borderColor: '#fecaca'
-  },
-  warning: {
-    icon: '⚠️',
-    color: '#d97706',
-    bgColor: '#fffbeb',
-    borderColor: '#fde68a'
-  },
-  info: {
-    icon: 'ℹ️',
-    color: '#2563eb',
-    bgColor: '#eff6ff',
-    borderColor: '#bfdbfe'
-  }
-};
-
-export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
-  error,
-  title = 'Something went wrong',
-  description = 'An unexpected error occurred. Please try again.',
-  variant = 'default',
-  severity = 'error',
-  showDetails = false,
-  showRetry = true,
-  showHome = false,
-  onRetry,
-  onHome,
-  className = '',
-  errorId
-}) => {
-  const config = severityConfig[severity];
-
-  const errorMessage = error instanceof Error ? error.message : (error || 'Unknown error');
-  const errorStack = error instanceof Error ? error.stack : undefined;
-
-  if (variant === 'minimal') {
-    return (
-      <div className={className} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: config.color }}>
-        <span>{config.icon}</span>
-        <span>{errorMessage}</span>
-      </div>
-    );
-  }
-
-  if (variant === 'inline') {
-    return (
-      <div className={className} style={{
-        padding: '12px 16px',
-        background: config.bgColor,
-        border: `1px solid ${config.borderColor}`,
-        borderRadius: '6px'
-      }}>
-        <span style={{ marginRight: '8px' }}>{config.icon}</span>
-        <span style={{ fontWeight: 500 }}>{title}:</span> {errorMessage}
-      </div>
-    );
-  }
-
-  if (variant === 'card') {
-    return (
-      <div className={className} style={{
-        background: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-        border: 'none'
-      }}>
-        <div style={{ padding: '24px' }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-              <div style={{
-                width: '48px',
-                height: '48px',
-                borderRadius: '50%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: config.bgColor,
-                fontSize: '24px'
-              }}>
-                {config.icon}
-              </div>
-              <div>
-                <h3 style={{ color: config.color, margin: 0, fontSize: '18px', fontWeight: 600 }}>
-                  {title}
-                </h3>
-                <p style={{ color: '#666', margin: 0, fontSize: '14px' }}>
-                  {description}
-                </p>
-              </div>
-            </div>
-            {errorId && (
-              <span style={{
-                background: severity === 'error' ? '#dc2626' : '#6b7280',
-                color: 'white',
-                padding: '4px 8px',
-                borderRadius: '4px',
-                fontSize: '12px',
-                fontWeight: 500
-              }}>
-                ID: {errorId.slice(-8)}
-              </span>
-            )}
-          </div>
-
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-            {showDetails && errorStack && (
-              <div style={{ padding: '16px', background: '#f5f5f5', borderRadius: '8px' }}>
-                <h4 style={{ fontWeight: 600, fontSize: '14px', marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  🐛 Error Details
-                </h4>
-                <pre style={{ fontSize: '12px', color: '#666', overflow: 'auto', maxHeight: '128px' }}>
-                  {errorStack}
-                </pre>
-              </div>
-            )}
-
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
-              {showRetry && onRetry && (
-                <button
-                  onClick={onRetry}
-                  style={{
-                    padding: '8px 16px',
-                    background: 'white',
-                    border: '1px solid #d1d5db',
-                    borderRadius: '6px',
-                    fontSize: '14px',
-                    fontWeight: 500,
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '8px'
-                  }}
-                >
-                  🔄 Try Again
-                </button>
-              )}
-              <button
-                onClick={() => window.location.reload()}
-                style={{
-                  padding: '8px 16px',
-                  background: '#3b82f6',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '6px',
-                  fontSize: '14px',
-                  fontWeight: 500,
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}
-              >
-                🔄 Refresh Page
-              </button>
-              {showHome && onHome && (
-                <button
-                  onClick={onHome}
-                  style={{
-                    padding: '8px 16px',
-                    background: '#6b7280',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '6px',
-                    fontSize: '14px',
-                    fontWeight: 500,
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '8px'
-                  }}
-                >
-                  🏠 Go Home
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Default variant
-  return (
-    <div className={className} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
-      <div style={{
-        width: '100%',
-        maxWidth: '448px',
-        background: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-        overflow: 'hidden'
-      }}>
-        <div style={{ padding: '24px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
-            <div style={{
-              width: '40px',
-              height: '40px',
-              borderRadius: '50%',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: config.bgColor,
-              fontSize: '20px'
-            }}>
-              {config.icon}
-            </div>
-            <div>
-              <h3 style={{ color: config.color, margin: 0, fontSize: '16px', fontWeight: 600 }}>
-                {title}
-              </h3>
-              <p style={{ color: '#666', margin: 0, fontSize: '14px' }}>
-                {description}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div style={{ padding: '0 24px 24px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <p style={{ fontSize: '14px', color: '#666', margin: 0 }}>{errorMessage}</p>
-          <div style={{ display: 'flex', gap: '8px' }}>
-            {showRetry && onRetry && (
-              <button
-                onClick={onRetry}
-                style={{
-                  padding: '8px 16px',
-                  background: 'white',
-                  border: '1px solid #d1d5db',
-                  borderRadius: '6px',
-                  fontSize: '14px',
-                  fontWeight: 500,
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}
-              >
-                🔄 Retry
-              </button>
-            )}
-            {showHome && onHome && (
-              <button
-                onClick={onHome}
-                style={{
-                  padding: '8px 16px',
-                  background: '#6b7280',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '6px',
-                  fontSize: '14px',
-                  fontWeight: 500,
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}
-              >
-                🏠 Home
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// Specialized error components
-export const NetworkError: React.FC<{ onRetry?: () => void; className?: string }> = ({
-  onRetry,
-  className
-}) => (
-  <ErrorDisplay
-    title="Network Error"
-    description="Unable to connect to the server. Please check your internet connection."
-    severity="warning"
-    showRetry={true}
-    onRetry={onRetry}
-    className={className}
-  />
-);
-
-export const NotFoundError: React.FC<{ onHome?: () => void; className?: string }> = ({
-  onHome,
-  className
-}) => (
-  <ErrorDisplay
-    title="Page Not Found"
-    description="The page you're looking for doesn't exist or has been moved."
-    severity="info"
-    showHome={true}
-    showRetry={false}
-    onHome={onHome}
-    className={className}
-  />
-);
-
-export const PermissionError: React.FC<{ className?: string }> = ({ className }) => (
-  <ErrorDisplay
-    title="Access Denied"
-    description="You don't have permission to access this resource."
-    severity="error"
-    showRetry={false}
-    showHome={true}
-    className={className}
-  />
-);
-
-export const ApiError: React.FC<{
-  error?: Error | string;
-  onRetry?: () => void;
-  className?: string
-}> = ({ error, onRetry, className }) => (
-  <ErrorDisplay
-    error={error}
-    title="API Error"
-    description="Failed to load data from the server."
-    severity="error"
-    showRetry={true}
-    onRetry={onRetry}
-    className={className}
-  />
-);
-
-export default ErrorDisplay;

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`);
-    }
-  },
-};