@umituz/react-native-ai-generation-content 1.61.45 → 1.61.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.61.45",
+  "version": "1.61.47",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -50,7 +50,8 @@
     "firebase": ">=10.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
-    "react-native-safe-area-context": ">=5.0.0"
+    "react-native-safe-area-context": ">=5.0.0",
+    "@umituz/react-native-design-system": ">=4.0.0"
   },
   "devDependencies": {
     "@expo/vector-icons": "^15.0.3",

package/src/presentation/components/display/index.ts

@@ -8,4 +8,7 @@ export {
   type AIGenerationResultProps,
   type AIGenerationResultAction,
 } from "./AIGenerationResult";
-export { ErrorDisplay, type ErrorDisplayProps } from "./ErrorDisplay";
+export {
+  ExceptionErrorState as ErrorDisplay,
+  ExceptionEmptyState,
+} from "@umituz/react-native-design-system";

package/src/presentation/components/index.ts

@@ -5,7 +5,7 @@ export { PendingJobProgressBar } from "./PendingJobProgressBar";
 export { PendingJobCardActions } from "./PendingJobCardActions";
 export { PromptInput } from "./PromptInput";
 export { AIGenerationHero } from "./AIGenerationHero";
-export { ErrorBoundary, withErrorBoundary } from "./ErrorBoundary";
+export { ErrorBoundary, withErrorBoundary } from "@umituz/react-native-design-system/exception";
 export * from "./StylePresetsGrid";
 export * from "./AIGenerationForm";
 export * from "./AIGenerationForm.types";

package/src/presentation/components/ErrorBoundary.tsx

@@ -1,141 +0,0 @@
-/**
- * Error Boundary Component
- * Catches JavaScript errors anywhere in the child component tree
- * Displays a fallback UI instead of crashing the entire app
- */
-
-import React, { ErrorInfo, ReactNode } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-
-interface ErrorBoundaryProps {
-  readonly children: ReactNode;
-  readonly fallback?: ReactNode;
-  readonly onError?: (error: Error, errorInfo: ErrorInfo) => void;
-}
-
-interface ErrorBoundaryState {
-  readonly hasError: boolean;
-  readonly error?: Error;
-}
-
-export class ErrorBoundary extends React.Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    // Log error to error reporting service
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.error("[ErrorBoundary] Caught error:", error, errorInfo);
-    }
-
-    this.props.onError?.(error, errorInfo);
-  }
-
-  handleReset = (): void => {
-    this.setState({ hasError: false, error: undefined });
-  };
-
-  render(): ReactNode {
-    if (this.state.hasError) {
-      // Use custom fallback if provided
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
-      // Default error UI
-      return (
-        <View style={styles.container}>
-          <View style={styles.content}>
-            <Text style={styles.title}>Something went wrong</Text>
-            <Text style={styles.message}>
-              An unexpected error occurred. Please try again.
-            </Text>
-            {typeof __DEV__ !== "undefined" && __DEV__ && this.state.error && (
-              <Text style={styles.errorText}>
-                {this.state.error.message}
-              </Text>
-            )}
-            <TouchableOpacity
-              style={styles.button}
-              onPress={this.handleReset}
-            >
-              <Text style={styles.buttonText}>Try Again</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 20,
-  },
-  content: {
-    alignItems: "center",
-    maxWidth: 400,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "bold",
-    marginBottom: 12,
-    color: "#d32f2f",
-  },
-  message: {
-    fontSize: 16,
-    textAlign: "center",
-    marginBottom: 20,
-    color: "#666",
-    lineHeight: 24,
-  },
-  errorText: {
-    fontSize: 12,
-    textAlign: "center",
-    marginBottom: 20,
-    color: "#999",
-    fontFamily: "monospace",
-  },
-  button: {
-    backgroundColor: "#2196F3",
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    borderRadius: 8,
-    minWidth: 120,
-    alignItems: "center",
-  },
-  buttonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-});
-
-/**
- * Higher-order component version of ErrorBoundary
- */
-export function withErrorBoundary<P extends object>(
-  WrappedComponent: React.ComponentType<P>,
-  fallback?: ReactNode,
-): React.ComponentType<P> {
-  return (props: P) => (
-    <ErrorBoundary fallback={fallback}>
-      <WrappedComponent {...props} />
-    </ErrorBoundary>
-  );
-}

package/src/presentation/components/display/ErrorDisplay.tsx

@@ -1,111 +0,0 @@
-/**
- * ErrorDisplay Component
- * Generic error display with retry action
- * Props-driven for 100+ apps compatibility
- */
-
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-  AtomicIcon,
-} from "@umituz/react-native-design-system";
-
-export interface ErrorDisplayProps {
-  readonly error: string | null;
-  readonly onRetry?: () => void;
-  readonly retryText?: string;
-  readonly icon?: string;
-}
-
-export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
-  error,
-  onRetry,
-  retryText,
-  icon = "alert-circle",
-}) => {
-  const tokens = useAppDesignTokens();
-
-  if (!error) {
-    return null;
-  }
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: `${tokens.colors.error}15`,
-          borderColor: `${tokens.colors.error}30`,
-          padding: tokens.spacing.md,
-          marginTop: tokens.spacing.md,
-        },
-      ]}
-    >
-      <View style={styles.header}>
-        <AtomicIcon
-          name={icon}
-          customSize={20}
-          customColor={tokens.colors.error}
-        />
-        <AtomicText
-          type="bodyMedium"
-          style={[styles.errorText, { color: tokens.colors.error }]}
-        >
-          {error}
-        </AtomicText>
-      </View>
-      {onRetry && retryText && (
-        <TouchableOpacity
-          onPress={onRetry}
-          style={[
-            styles.retryButton,
-            {
-              backgroundColor: tokens.colors.error,
-              marginTop: tokens.spacing.sm,
-            },
-          ]}
-        >
-          <AtomicIcon
-            name="refresh"
-            customSize={16}
-            customColor={tokens.colors.onError}
-          />
-          <AtomicText
-            type="bodySmall"
-            style={{ color: tokens.colors.onError, fontWeight: "600" }}
-          >
-            {retryText}
-          </AtomicText>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 12,
-    borderWidth: 1,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 10,
-  },
-  errorText: {
-    flex: 1,
-    lineHeight: 20,
-  },
-  retryButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    alignSelf: "flex-start",
-  },
-});