@umituz/web-design-system 3.1.22 → 4.0.2

package/src/domain/tokens/shadow.tokens.ts

@@ -1,25 +0,0 @@
-/**
- * Shadow Tokens
- * @description Box shadow scale
- */
-
-export type ShadowToken =
-  | 'sm'
-  | 'default'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | 'inner'
-  | 'none';
-
-export const shadows: Record<ShadowToken, string> = {
-  'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-  'default': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-  'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-  'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-  'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-  'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-  'none': '0 0 #0000',
-};

package/src/domain/tokens/spacing.tokens.ts

@@ -1,65 +0,0 @@
-/**
- * Spacing Tokens
- * @description Consistent spacing scale
- */
-
-export type SpacingToken =
-  | '0'
-  | 'px'
-  | '0.5'
-  | '1'
-  | '1.5'
-  | '2'
-  | '2.5'
-  | '3'
-  | '3.5'
-  | '4'
-  | '5'
-  | '6'
-  | '7'
-  | '8'
-  | '9'
-  | '10'
-  | '12'
-  | '16'
-  | '20'
-  | '24'
-  | '32'
-  | '40'
-  | '48'
-  | '56'
-  | '64'
-  | '72'
-  | '80'
-  | '96';
-
-export const spacing: Record<SpacingToken, string> = {
-  '0': '0',
-  'px': '1px',
-  '0.5': '0.125rem',
-  '1': '0.25rem',
-  '1.5': '0.375rem',
-  '2': '0.5rem',
-  '2.5': '0.625rem',
-  '3': '0.75rem',
-  '3.5': '0.875rem',
-  '4': '1rem',
-  '5': '1.25rem',
-  '6': '1.5rem',
-  '7': '1.75rem',
-  '8': '2rem',
-  '9': '2.25rem',
-  '10': '2.5rem',
-  '12': '3rem',
-  '16': '4rem',
-  '20': '5rem',
-  '24': '6rem',
-  '32': '8rem',
-  '40': '10rem',
-  '48': '12rem',
-  '56': '14rem',
-  '64': '16rem',
-  '72': '18rem',
-  '80': '20rem',
-  '96': '24rem',
-};

package/src/domain/tokens/typography.tokens.ts

@@ -1,74 +0,0 @@
-/**
- * Typography Tokens
- * @description Font sizes, weights, and line heights
- */
-
-export type FontSizeToken =
-  | 'xs'
-  | 'sm'
-  | 'base'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | '4xl'
-  | '5xl'
-  | '6xl'
-  | '7xl'
-  | '8xl'
-  | '9xl';
-
-export type FontWeightToken =
-  | 'thin'
-  | 'extralight'
-  | 'light'
-  | 'normal'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold'
-  | 'black';
-
-export const fontSizes: Record<FontSizeToken, string> = {
-  'xs': '0.75rem',
-  'sm': '0.875rem',
-  'base': '1rem',
-  'lg': '1.125rem',
-  'xl': '1.25rem',
-  '2xl': '1.5rem',
-  '3xl': '1.875rem',
-  '4xl': '2.25rem',
-  '5xl': '3rem',
-  '6xl': '3.75rem',
-  '7xl': '4.5rem',
-  '8xl': '6rem',
-  '9xl': '8rem',
-};
-
-export const fontWeights: Record<FontWeightToken, string> = {
-  'thin': '100',
-  'extralight': '200',
-  'light': '300',
-  'normal': '400',
-  'medium': '500',
-  'semibold': '600',
-  'bold': '700',
-  'extrabold': '800',
-  'black': '900',
-};
-
-export const lineHeights: Record<FontSizeToken, string> = {
-  'xs': '1rem',
-  'sm': '1.25rem',
-  'base': '1.5rem',
-  'lg': '1.75rem',
-  'xl': '1.75rem',
-  '2xl': '2rem',
-  '3xl': '2.25rem',
-  '4xl': '2.5rem',
-  '5xl': '1',
-  '6xl': '1',
-  '7xl': '1',
-  '8xl': '1',
-  '9xl': '1',
-};

package/src/infrastructure/error/ErrorBoundary.tsx

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