@umituz/web-design-system 1.0.4 → 1.3.1

package/README.md

@@ -103,6 +103,46 @@ import type {
 } from '@umituz/web-design-system/types';
 ```
 
+### Security (Security & Validation)
+```tsx
+import {
+  validateInput,
+  validateEmail,
+  validateUrl,
+  sanitizeInput,
+  validateFileName,
+  CSP_CONFIG,
+  SECURITY_HEADERS,
+  VALIDATION_CONFIGS
+} from '@umituz/web-design-system/security';
+
+import { useFormValidation, COMMON_RULES } from '@umituz/web-design-system/security';
+```
+
+### Performance (Performance Optimization)
+```tsx
+import {
+  usePerformanceMonitor,
+  useLazyLoading,
+  useMemoryOptimization,
+  useLazyImage,
+  useLazyComponent,
+  useVirtualList
+} from '@umituz/web-design-system/performance';
+```
+
+### Error (Error Handling & Boundaries)
+```tsx
+import {
+  ErrorBoundary,
+  ErrorDisplay,
+  SuspenseWrapper,
+  NetworkError,
+  NotFoundError,
+  ApiError
+} from '@umituz/web-design-system/error';
+```
+
 ## 🎨 Component Examples
 
 ### Button
@@ -192,6 +232,147 @@ const fontSize = fontSizes['lg']; // '1.125rem'
 const fontWeight = fontWeights['semibold']; // '600'
 ```
 
+## 🔒 Security Features
+
+### Input Validation
+```tsx
+import { validateEmail, sanitizeInput, validateFileName } from '@umituz/web-design-system/security';
+
+// Validate email
+const result = validateEmail('user@example.com');
+if (result.isValid) {
+  // Email is valid
+}
+
+// Sanitize user input
+const clean = sanitizeInput(userInput);
+
+// Validate file names
+const fileResult = validateFileName(fileName);
+```
+
+### Form Validation Hook
+```tsx
+import { useFormValidation, COMMON_RULES } from '@umituz/web-design-system/security';
+
+const MyForm = () => {
+  const { formData, errors, updateField, validateAllFields, isFormValid } = useFormValidation(
+    { name: '', email: '' },
+    {
+      name: COMMON_RULES.name,
+      email: COMMON_RULES.email
+    }
+  );
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        value={formData.name}
+        onChange={(e) => updateField('name', e.target.value)}
+      />
+      {errors.name && <span className="error">{errors.name}</span>}
+    </form>
+  );
+};
+```
+
+## ⚡ Performance Features
+
+### Performance Monitoring
+```tsx
+import { usePerformanceMonitor } from '@umituz/web-design-system/performance';
+
+const MyComponent = () => {
+  const { metrics, getPerformanceReport } = usePerformanceMonitor({
+    componentName: 'MyComponent',
+    trackRenders: true,
+    trackMemory: true
+  });
+
+  return <div>Render time: {metrics.renderTime}ms</div>;
+};
+```
+
+### Lazy Loading
+```tsx
+import { useLazyLoading, useLazyImage } from '@umituz/web-design-system/performance';
+
+const LazyImage = () => {
+  const { targetRef, imageSrc, isLoaded } = useLazyImage('/large-image.jpg');
+
+  return (
+    <div ref={targetRef}>
+      {isLoaded ? <img src={imageSrc} alt="Lazy loaded" /> : <div>Loading...</div>}
+    </div>
+  );
+};
+```
+
+### Memory Optimization
+```tsx
+import { useMemoryOptimization } from '@umituz/web-design-system/performance';
+
+const MyComponent = () => {
+  const { addEventListener, setTimeout, addCleanup, getMemoryStats } = useMemoryOptimization();
+
+  useEffect(() => {
+    const cleanup = addEventListener(window, 'resize', handleResize);
+    const timerId = setTimeout(() => {}, 1000);
+
+    return () => {
+      cleanup();
+      // Automatic cleanup on unmount
+    };
+  }, []);
+
+  return <div>Memory stats: {getMemoryStats().totalTrackedItems} items</div>;
+};
+```
+
+## 🚨 Error Handling
+
+### Error Boundary
+```tsx
+import { ErrorBoundary } from '@umituz/web-design-system/error';
+
+<ErrorBoundary
+  level="page"
+  showDetails={true}
+  onError={(error, errorInfo) => console.error(error)}
+>
+  <MyComponent />
+</ErrorBoundary>
+```
+
+### Error Display
+```tsx
+import { ErrorDisplay, NetworkError, ApiError } from '@umituz/web-design-system/error';
+
+<ErrorDisplay
+  error={error}
+  title="Something went wrong"
+  severity="error"
+  showRetry={true}
+  onRetry={retryFunction}
+/>
+
+<NetworkError onRetry={retry} />
+<ApiError error={apiError} onRetry={retry} />
+```
+
+### Suspense Wrapper
+```tsx
+import { SuspenseWrapper, PageSuspense } from '@umituz/web-design-system/error';
+
+<PageSuspense loadingText="Loading page...">
+  <MyLazyComponent />
+</PageSuspense>
+
+<SuspenseWrapper variant="card" errorBoundaryLevel="feature">
+  <AsyncComponent />
+</SuspenseWrapper>
+```
+
 ## 📐 Atomic Design Principles
 
 This package follows Atomic Design methodology:

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.0.4",
-  "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms) for React applications",
+  "version": "1.3.1",
+  "private": false,
+  "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "sideEffects": false,
@@ -16,6 +17,9 @@
     "./constants": "./src/infrastructure/constants/index.ts",
     "./tokens": "./src/domain/tokens/index.ts",
     "./types": "./src/domain/types/index.ts",
+    "./security": "./src/infrastructure/security/index.ts",
+    "./performance": "./src/infrastructure/performance/index.ts",
+    "./error": "./src/infrastructure/error/index.ts",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -34,23 +38,32 @@
     "atoms",
     "molecules",
     "organisms",
-    "tailwind"
+    "tailwind",
+    "security",
+    "performance",
+    "error-handling",
+    "validation",
+    "optimization"
   ],
   "author": "umituz",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/umituz/web-design-system"
+    "url": "git+https://github.com/umituz/web-design-system.git"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "clsx": ">=2.0.0",
+    "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "clsx": "^2.1.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "tailwind-merge": "^3.5.0",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/global.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Global Type Declarations
+ * @description Global type definitions for the design system
+ */
+
+declare global {
+  interface ImportMetaEnv {
+    readonly DEV: boolean;
+    readonly MODE: string;
+    readonly BASE_URL: string;
+    readonly PROD: boolean;
+    readonly SSR: boolean;
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
+}
+
+export {};

package/src/index.ts

@@ -21,6 +21,9 @@ export * from './domain/tokens';
 export * from './domain/types';
 export * from './infrastructure/utils';
 export * from './infrastructure/constants';
+export * from './infrastructure/security';
+export * from './infrastructure/performance';
+export * from './infrastructure/error';
 export * from './presentation/atoms';
 export * from './presentation/molecules';
 export * from './presentation/organisms';

package/src/infrastructure/error/ErrorBoundary.tsx

@@ -0,0 +1,258 @@
+import React, { Component, ErrorInfo, ReactNode, memo } from "react";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  showDetails?: boolean;
+  level?: 'page' | 'component' | 'feature';
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: ErrorInfo;
+  errorId?: string;
+}
+
+const ErrorDetails = memo(({ error, errorInfo, showDetails }: {
+  error: Error;
+  errorInfo?: ErrorInfo;
+  showDetails: boolean;
+}) => {
+  if (!showDetails || !import.meta.env.DEV) return null;
+
+  return (
+    <div style={{ padding: '16px', background: '#f5f5f5', borderRadius: '8px', marginTop: '16px' }}>
+      <h4 style={{ fontWeight: 600, fontSize: '14px', marginBottom: '8px' }}>
+        🐛 Error Details (Development)
+      </h4>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <div>
+          <p style={{ fontSize: '12px', fontWeight: 500, color: '#666' }}>Message:</p>
+          <pre style={{ fontSize: '12px', color: '#dc2626', overflow: 'auto' }}>{error.message}</pre>
+        </div>
+        {error.stack && (
+          <div>
+            <p style={{ fontSize: '12px', fontWeight: 500, color: '#666' }}>Stack:</p>
+            <pre style={{ fontSize: '12px', color: '#666', overflow: 'auto', maxHeight: '128px' }}>
+              {error.stack}
+            </pre>
+          </div>
+        )}
+        {errorInfo?.componentStack && (
+          <div>
+            <p style={{ fontSize: '12px', fontWeight: 500, color: '#666' }}>Component Stack:</p>
+            <pre style={{ fontSize: '12px', color: '#666', overflow: 'auto', maxHeight: '128px' }}>
+              {errorInfo.componentStack}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+ErrorDetails.displayName = 'ErrorDetails';
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return {
+      hasError: true,
+      error,
+      errorId: `error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ error, errorInfo });
+
+    this.props.onError?.(error, errorInfo);
+
+    if (import.meta.env.DEV) {
+      console.group('🚨 ErrorBoundary caught an error');
+      console.error('Error:', error);
+      console.error('Error Info:', errorInfo);
+      console.groupEnd();
+    }
+  }
+
+  private handleReset = () => {
+    this.setState({ hasError: false, error: undefined, errorInfo: undefined, errorId: undefined });
+  };
+
+  private handleGoHome = () => {
+    window.location.href = '/';
+  };
+
+  private getLevelConfig = () => {
+    const { level = 'component' } = this.props;
+
+    switch (level) {
+      case 'page':
+        return {
+          title: 'Page Error',
+          description: 'This page encountered an unexpected error.',
+          showHomeButton: true,
+        };
+      case 'feature':
+        return {
+          title: 'Feature Error',
+          description: 'This feature is temporarily unavailable due to an error.',
+          showHomeButton: false,
+        };
+      default:
+        return {
+          title: 'Component Error',
+          description: 'A component on this page encountered an error.',
+          showHomeButton: false,
+        };
+    }
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      const config = this.getLevelConfig();
+      const { showDetails = false } = this.props;
+
+      return (
+        <div style={{
+          minHeight: '100vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '16px',
+          background: 'linear-gradient(to bottom right, #fef2f2, #fff7ed)'
+        }}>
+          <div style={{
+            width: '100%',
+            maxWidth: '672px',
+            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', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <div style={{
+                    width: '48px',
+                    height: '48px',
+                    background: '#fecaca',
+                    borderRadius: '50%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                  }}>
+                    <span style={{ fontSize: '24px' }}>⚠️</span>
+                  </div>
+                  <div>
+                    <h2 style={{ color: '#dc2626', margin: 0, fontSize: '20px', fontWeight: 600 }}>
+                      {config.title}
+                    </h2>
+                    <p style={{ color: '#666', margin: 0, fontSize: '14px' }}>
+                      {config.description}
+                    </p>
+                  </div>
+                </div>
+                {this.state.errorId && (
+                  <span style={{
+                    background: '#dc2626',
+                    color: 'white',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    fontSize: '12px',
+                    fontWeight: 500
+                  }}>
+                    ID: {this.state.errorId.slice(-8)}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            <div style={{ padding: '0 24px 24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+              {this.state.error && (
+                <ErrorDetails
+                  error={this.state.error}
+                  errorInfo={this.state.errorInfo}
+                  showDetails={showDetails}
+                />
+              )}
+
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+                <button
+                  onClick={this.handleReset}
+                  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>
+                {config.showHomeButton && (
+                  <button
+                    onClick={this.handleGoHome}
+                    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>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;