create-fluxstack 1.7.5 → 1.8.3

package/app/client/src/components/ErrorBoundary.tsx

@@ -1,107 +0,0 @@
-import React, { Component, type ErrorInfo, type ReactNode } from 'react'
-import { logClientError } from '../lib/errors'
-
-interface Props {
-  children: ReactNode
-  fallback?: ReactNode
-  onError?: (error: Error, errorInfo: ErrorInfo) => void
-  showErrorDetails?: boolean
-}
-
-interface State {
-  hasError: boolean
-  error?: Error
-  errorInfo?: ErrorInfo
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return {
-      hasError: true,
-      error
-    }
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Log the error
-    logClientError(error, { componentStack: errorInfo.componentStack || '' })
-    
-    // Call custom error handler if provided
-    this.props.onError?.(error, errorInfo)
-    
-    this.setState({
-      error,
-      errorInfo
-    })
-  }
-
-  handleRetry = () => {
-    this.setState({ hasError: false, error: undefined, errorInfo: undefined })
-  }
-
-  render() {
-    if (this.state.hasError) {
-      // Custom fallback UI
-      if (this.props.fallback) {
-        return this.props.fallback
-      }
-
-      // Default error UI
-      return (
-        <div className="error-boundary">
-          <div className="error-boundary-content">
-            <h2>Something went wrong</h2>
-            <p>We're sorry, but something unexpected happened.</p>
-            
-            {this.props.showErrorDetails && this.state.error && (
-              <details className="error-details">
-                <summary>Error Details</summary>
-                <pre>{this.state.error.message}</pre>
-                {this.state.errorInfo && (
-                  <pre>{this.state.errorInfo.componentStack}</pre>
-                )}
-              </details>
-            )}
-            
-            <div className="error-actions">
-              <button onClick={this.handleRetry} className="retry-button">
-                Try Again
-              </button>
-              <button onClick={() => window.location.reload()} className="reload-button">
-                Reload Page
-              </button>
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-// Hook version of ErrorBoundary for functional components
-export function useErrorBoundary() {
-  const [error, setError] = React.useState<Error | null>(null)
-
-  const resetError = React.useCallback(() => {
-    setError(null)
-  }, [])
-
-  const captureError = React.useCallback((error: Error) => {
-    setError(error)
-  }, [])
-
-  React.useEffect(() => {
-    if (error) {
-      throw error
-    }
-  }, [error])
-
-  return { captureError, resetError }
-}

package/app/client/src/components/ErrorDisplay.css

@@ -1,365 +0,0 @@
-/* Error Display Components Styles */
-
-.error-display {
-  border-radius: 8px;
-  padding: 16px;
-  margin: 8px 0;
-  border: 1px solid;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.error-display--inline {
-  background-color: #fef2f2;
-  border-color: #fecaca;
-  color: #991b1b;
-}
-
-.error-display--toast {
-  background-color: #ffffff;
-  border-color: #e5e7eb;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-  max-width: 400px;
-  animation: slideIn 0.3s ease-out;
-}
-
-.error-display--modal {
-  background-color: #ffffff;
-  border-color: #e5e7eb;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1001;
-  max-width: 500px;
-  width: 90%;
-}
-
-.error-display--warning {
-  background-color: #fffbeb;
-  border-color: #fed7aa;
-  color: #92400e;
-}
-
-.error-display--severe {
-  background-color: #fef2f2;
-  border-color: #fca5a5;
-  color: #dc2626;
-}
-
-.error-display__content {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-
-.error-display__icon {
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.error-display__message {
-  flex: 1;
-}
-
-.error-display__text {
-  margin: 0 0 8px 0;
-  font-weight: 500;
-  line-height: 1.4;
-}
-
-.error-display__correlation {
-  margin: 0;
-  font-size: 12px;
-  opacity: 0.7;
-  font-family: monospace;
-}
-
-.error-display__actions {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.error-display__button {
-  padding: 6px 12px;
-  border: 1px solid;
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.error-display__button--retry {
-  border-color: #3b82f6;
-  color: #3b82f6;
-}
-
-.error-display__button--retry:hover {
-  background-color: #3b82f6;
-  color: white;
-}
-
-.error-display__button--dismiss {
-  border-color: #6b7280;
-  color: #6b7280;
-}
-
-.error-display__button--dismiss:hover {
-  background-color: #6b7280;
-  color: white;
-}
-
-/* Error Boundary Styles */
-.error-boundary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  padding: 20px;
-}
-
-.error-boundary-content {
-  text-align: center;
-  max-width: 500px;
-}
-
-.error-boundary-content h2 {
-  color: #dc2626;
-  margin-bottom: 16px;
-}
-
-.error-boundary-content p {
-  color: #6b7280;
-  margin-bottom: 20px;
-}
-
-.error-details {
-  text-align: left;
-  margin: 16px 0;
-  padding: 12px;
-  background-color: #f9fafb;
-  border-radius: 4px;
-  border: 1px solid #e5e7eb;
-}
-
-.error-details summary {
-  cursor: pointer;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.error-details pre {
-  font-size: 12px;
-  color: #374151;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.error-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: center;
-}
-
-.retry-button, .reload-button {
-  padding: 8px 16px;
-  border: 1px solid #3b82f6;
-  border-radius: 4px;
-  background: #3b82f6;
-  color: white;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background-color 0.2s;
-}
-
-.retry-button:hover, .reload-button:hover {
-  background-color: #2563eb;
-}
-
-.reload-button {
-  background: transparent;
-  color: #3b82f6;
-}
-
-.reload-button:hover {
-  background-color: #3b82f6;
-  color: white;
-}
-
-/* Toast Container */
-.error-toast-container {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-}
-
-/* Inline Error */
-.inline-error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background-color: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 4px;
-  color: #dc2626;
-  font-size: 14px;
-  margin-top: 4px;
-}
-
-.inline-error__icon {
-  font-size: 16px;
-}
-
-.inline-error__message {
-  flex: 1;
-}
-
-/* Loading Spinner */
-.loading-spinner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  gap: 16px;
-}
-
-.spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #e5e7eb;
-  border-top: 3px solid #3b82f6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.loading-spinner p {
-  color: #6b7280;
-  margin: 0;
-}
-
-/* Error Summary */
-.error-summary {
-  background-color: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 8px;
-  padding: 16px;
-  margin: 16px 0;
-}
-
-.error-summary__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #fecaca;
-}
-
-.error-summary__header h3 {
-  margin: 0;
-  color: #dc2626;
-  font-size: 16px;
-}
-
-.error-summary__actions {
-  display: flex;
-  gap: 8px;
-}
-
-.error-summary__button {
-  padding: 4px 8px;
-  border: 1px solid #dc2626;
-  border-radius: 4px;
-  background: transparent;
-  color: #dc2626;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.error-summary__button:hover {
-  background-color: #dc2626;
-  color: white;
-}
-
-.error-summary__list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.error-summary__item {
-  padding: 8px;
-  background-color: rgba(255, 255, 255, 0.5);
-  border-radius: 4px;
-}
-
-.error-summary__more {
-  padding: 8px;
-  text-align: center;
-  color: #6b7280;
-  font-style: italic;
-  font-size: 14px;
-}
-
-/* Animations */
-@keyframes slideIn {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Responsive Design */
-@media (max-width: 640px) {
-  .error-display--toast {
-    top: 10px;
-    right: 10px;
-    left: 10px;
-    max-width: none;
-  }
-  
-  .error-display--modal {
-    top: 20px;
-    left: 10px;
-    right: 10px;
-    transform: none;
-    width: auto;
-    max-width: none;
-  }
-  
-  .error-display__content {
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  .error-display__actions {
-    justify-content: center;
-    width: 100%;
-  }
-  
-  .error-summary__header {
-    flex-direction: column;
-    gap: 12px;
-    align-items: stretch;
-  }
-}

package/app/client/src/components/ErrorDisplay.tsx

@@ -1,258 +0,0 @@
-import React from 'react'
-import { ClientAPIError } from '../lib/errors'
-import { getErrorMessage, isRetryableError } from '../lib/eden-api'
-
-interface ErrorDisplayProps {
-  error: Error | null
-  onRetry?: () => void
-  onDismiss?: () => void
-  showRetryButton?: boolean
-  showDismissButton?: boolean
-  className?: string
-  variant?: 'inline' | 'toast' | 'modal'
-}
-
-export function ErrorDisplay({
-  error,
-  onRetry,
-  onDismiss,
-  showRetryButton = true,
-  showDismissButton = true,
-  className = '',
-  variant = 'inline'
-}: ErrorDisplayProps) {
-  if (!error) return null
-
-  const errorMessage = getErrorMessage(error)
-  const canRetry = isRetryableError(error)
-  const isClientError = error instanceof ClientAPIError
-
-  const baseClasses = {
-    inline: 'error-display error-display--inline',
-    toast: 'error-display error-display--toast',
-    modal: 'error-display error-display--modal'
-  }
-
-  const severityClass = isClientError && error.statusCode >= 500 
-    ? 'error-display--severe' 
-    : 'error-display--warning'
-
-  return (
-    <div className={`${baseClasses[variant]} ${severityClass} ${className}`}>
-      <div className="error-display__content">
-        <div className="error-display__icon">
-          {isClientError && error.statusCode >= 500 ? '⚠️' : '❌'}
-        </div>
-        
-        <div className="error-display__message">
-          <p className="error-display__text">{errorMessage}</p>
-          
-          {isClientError && error.correlationId && (
-            <p className="error-display__correlation">
-              Reference ID: {error.correlationId}
-            </p>
-          )}
-        </div>
-        
-        <div className="error-display__actions">
-          {showRetryButton && canRetry && onRetry && (
-            <button 
-              onClick={onRetry}
-              className="error-display__button error-display__button--retry"
-            >
-              Try Again
-            </button>
-          )}
-          
-          {showDismissButton && onDismiss && (
-            <button 
-              onClick={onDismiss}
-              className="error-display__button error-display__button--dismiss"
-            >
-              Dismiss
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// Toast notification component for errors
-interface ErrorToastProps {
-  error: Error | null
-  onRetry?: () => void
-  onDismiss?: () => void
-  autoHide?: boolean
-  hideDelay?: number
-}
-
-export function ErrorToast({
-  error,
-  onRetry,
-  onDismiss,
-  autoHide = true,
-  hideDelay = 5000
-}: ErrorToastProps) {
-  const [isVisible, setIsVisible] = React.useState(!!error)
-
-  React.useEffect(() => {
-    if (error) {
-      setIsVisible(true)
-      
-      if (autoHide && !isRetryableError(error)) {
-        const timer = setTimeout(() => {
-          setIsVisible(false)
-          onDismiss?.()
-        }, hideDelay)
-        
-        return () => clearTimeout(timer)
-      }
-    } else {
-      setIsVisible(false)
-    }
-  }, [error, autoHide, hideDelay, onDismiss])
-
-  if (!isVisible || !error) return null
-
-  return (
-    <div className="error-toast-container">
-      <ErrorDisplay
-        error={error}
-        onRetry={onRetry}
-        onDismiss={() => {
-          setIsVisible(false)
-          onDismiss?.()
-        }}
-        variant="toast"
-        showDismissButton={true}
-      />
-    </div>
-  )
-}
-
-// Inline error component for forms
-interface InlineErrorProps {
-  error: Error | null
-  field?: string
-  className?: string
-}
-
-export function InlineError({ error, field, className = '' }: InlineErrorProps) {
-  if (!error) return null
-
-  // Check if error is related to specific field
-  const isFieldError = error instanceof ClientAPIError && 
-    error.details?.field === field
-
-  if (field && !isFieldError) return null
-
-  const errorMessage = getErrorMessage(error)
-
-  return (
-    <div className={`inline-error ${className}`}>
-      <span className="inline-error__icon">⚠️</span>
-      <span className="inline-error__message">{errorMessage}</span>
-    </div>
-  )
-}
-
-// Loading state with error fallback
-interface LoadingWithErrorProps {
-  loading: boolean
-  error: Error | null
-  onRetry?: () => void
-  children: React.ReactNode
-  loadingComponent?: React.ReactNode
-  errorComponent?: React.ReactNode
-}
-
-export function LoadingWithError({
-  loading,
-  error,
-  onRetry,
-  children,
-  loadingComponent,
-  errorComponent
-}: LoadingWithErrorProps) {
-  if (loading) {
-    return loadingComponent || (
-      <div className="loading-spinner">
-        <div className="spinner"></div>
-        <p>Loading...</p>
-      </div>
-    )
-  }
-
-  if (error) {
-    return errorComponent || (
-      <ErrorDisplay
-        error={error}
-        onRetry={onRetry}
-        variant="inline"
-      />
-    )
-  }
-
-  return <>{children}</>
-}
-
-// Error summary component for multiple errors
-interface ErrorSummaryProps {
-  errors: Error[]
-  onRetryAll?: () => void
-  onDismissAll?: () => void
-  maxVisible?: number
-}
-
-export function ErrorSummary({
-  errors,
-  onRetryAll,
-  onDismissAll,
-  maxVisible = 3
-}: ErrorSummaryProps) {
-  if (errors.length === 0) return null
-
-  const visibleErrors = errors.slice(0, maxVisible)
-  const hiddenCount = errors.length - maxVisible
-
-  return (
-    <div className="error-summary">
-      <div className="error-summary__header">
-        <h3>Multiple Errors Occurred ({errors.length})</h3>
-        
-        <div className="error-summary__actions">
-          {onRetryAll && (
-            <button onClick={onRetryAll} className="error-summary__button">
-              Retry All
-            </button>
-          )}
-          {onDismissAll && (
-            <button onClick={onDismissAll} className="error-summary__button">
-              Dismiss All
-            </button>
-          )}
-        </div>
-      </div>
-      
-      <div className="error-summary__list">
-        {visibleErrors.map((error, index) => (
-          <div key={index} className="error-summary__item">
-            <ErrorDisplay
-              error={error}
-              variant="inline"
-              showRetryButton={false}
-              showDismissButton={false}
-            />
-          </div>
-        ))}
-        
-        {hiddenCount > 0 && (
-          <div className="error-summary__more">
-            +{hiddenCount} more errors
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}