@umituz/react-native-ai-generation-content 1.61.32 → 1.61.34

package/src/infrastructure/validation/input-validator.ts

@@ -0,0 +1,406 @@
+/**
+ * Input Validation Utilities
+ * Provides comprehensive input validation for security and data integrity
+ */
+
+import {
+  MAX_PROMPT_LENGTH,
+  MIN_PROMPT_LENGTH,
+  MAX_USER_ID_LENGTH,
+  MAX_CREATION_ID_LENGTH,
+} from "../constants/validation.constants";
+
+/**
+ * Validation result type
+ */
+export interface ValidationResult {
+  readonly isValid: boolean;
+  readonly errors: readonly string[];
+}
+
+/**
+ * String validation options
+ */
+export interface StringValidationOptions {
+  readonly minLength?: number;
+  readonly maxLength?: number;
+  readonly pattern?: RegExp;
+  readonly allowedCharacters?: RegExp;
+  readonly trim?: boolean;
+}
+
+/**
+ * Numeric validation options
+ */
+export interface NumericValidationOptions {
+  readonly min?: number;
+  readonly max?: number;
+  readonly integer?: boolean;
+}
+
+/**
+ * Sanitizes user input to prevent XSS and injection attacks
+ */
+export function sanitizeString(input: unknown): string {
+  if (typeof input !== "string") {
+    return "";
+  }
+
+  return input
+    .trim()
+    .replace(/[<>]/g, "") // Remove potential HTML tags
+    .replace(/javascript:/gi, "") // Remove javascript: protocol
+    .replace(/on\w+\s*=/gi, "") // Remove event handlers
+    .slice(0, 10000); // Limit length
+}
+
+/**
+ * Validates a string input against provided rules
+ */
+export function validateString(
+  input: unknown,
+  options: StringValidationOptions = {}
+): ValidationResult {
+  const errors: string[] = [];
+
+  // Check if input is a string
+  if (typeof input !== "string") {
+    return {
+      isValid: false,
+      errors: ["Input must be a string"],
+    };
+  }
+
+  let value = options.trim !== false ? input.trim() : input;
+
+  // Check min length
+  if (options.minLength !== undefined && value.length < options.minLength) {
+    errors.push(`Input must be at least ${options.minLength} characters`);
+  }
+
+  // Check max length
+  if (options.maxLength !== undefined && value.length > options.maxLength) {
+    errors.push(`Input must be at most ${options.maxLength} characters`);
+  }
+
+  // Check pattern
+  if (options.pattern && !options.pattern.test(value)) {
+    errors.push("Input format is invalid");
+  }
+
+  // Check allowed characters
+  if (options.allowedCharacters && !options.allowedCharacters.test(value)) {
+    errors.push("Input contains invalid characters");
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}
+
+/**
+ * Validates a numeric input
+ */
+export function validateNumber(
+  input: unknown,
+  options: NumericValidationOptions = {}
+): ValidationResult {
+  const errors: string[] = [];
+
+  // Check if input is a number
+  if (typeof input !== "number" || isNaN(input)) {
+    return {
+      isValid: false,
+      errors: ["Input must be a number"],
+    };
+  }
+
+  // Check if integer
+  if (options.integer && !Number.isInteger(input)) {
+    errors.push("Input must be an integer");
+  }
+
+  // Check min value
+  if (options.min !== undefined && input < options.min) {
+    errors.push(`Input must be at least ${options.min}`);
+  }
+
+  // Check max value
+  if (options.max !== undefined && input > options.max) {
+    errors.push(`Input must be at most ${options.max}`);
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}
+
+/**
+ * Validates URL format
+ */
+export function validateURL(input: unknown): ValidationResult {
+  if (typeof input !== "string") {
+    return {
+      isValid: false,
+      errors: ["URL must be a string"],
+    };
+  }
+
+  try {
+    const url = new URL(input);
+
+    // Only allow http and https protocols
+    if (!["http:", "https:"].includes(url.protocol)) {
+      return {
+        isValid: false,
+        errors: ["Only HTTP and HTTPS protocols are allowed"],
+      };
+    }
+
+    return { isValid: true, errors: [] };
+  } catch {
+    return {
+      isValid: false,
+      errors: ["Invalid URL format"],
+    };
+  }
+}
+
+/**
+ * Validates email format
+ */
+export function validateEmail(input: unknown): ValidationResult {
+  if (typeof input !== "string") {
+    return {
+      isValid: false,
+      errors: ["Email must be a string"],
+    };
+  }
+
+  // Basic email validation regex
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  if (!emailRegex.test(input)) {
+    return {
+      isValid: false,
+      errors: ["Invalid email format"],
+    };
+  }
+
+  return { isValid: true, errors: [] };
+}
+
+/**
+ * Validates base64 string
+ */
+export function validateBase64(input: unknown): ValidationResult {
+  if (typeof input !== "string") {
+    return {
+      isValid: false,
+      errors: ["Input must be a string"],
+    };
+  }
+
+  // Check if it's a valid base64 string
+  const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
+
+  if (!base64Regex.test(input)) {
+    return {
+      isValid: false,
+      errors: ["Invalid base64 format"],
+    };
+  }
+
+  // Check if length is valid (must be multiple of 4)
+  if (input.length % 4 !== 0) {
+    return {
+      isValid: false,
+      errors: ["Base64 string length must be a multiple of 4"],
+    };
+  }
+
+  return { isValid: true, errors: [] };
+}
+
+/**
+ * Validates object structure
+ */
+export function validateObject(
+  input: unknown,
+  requiredFields: readonly string[] = []
+): ValidationResult {
+  const errors: string[] = [];
+
+  if (typeof input !== "object" || input === null) {
+    return {
+      isValid: false,
+      errors: ["Input must be an object"],
+    };
+  }
+
+  // Check required fields
+  for (const field of requiredFields) {
+    if (!(field in input)) {
+      errors.push(`Missing required field: ${field}`);
+    }
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}
+
+/**
+ * Validates array input
+ */
+export function validateArray(
+  input: unknown,
+  options: {
+    readonly minLength?: number;
+    readonly maxLength?: number;
+    readonly itemType?: "string" | "number" | "object";
+  } = {}
+): ValidationResult {
+  const errors: string[] = [];
+
+  if (!Array.isArray(input)) {
+    return {
+      isValid: false,
+      errors: ["Input must be an array"],
+    };
+  }
+
+  // Check min length
+  if (options.minLength !== undefined && input.length < options.minLength) {
+    errors.push(`Array must have at least ${options.minLength} items`);
+  }
+
+  // Check max length
+  if (options.maxLength !== undefined && input.length > options.maxLength) {
+    errors.push(`Array must have at most ${options.maxLength} items`);
+  }
+
+  // Check item types
+  if (options.itemType) {
+    for (let i = 0; i < input.length; i++) {
+      const item = input[i];
+      const isValidType =
+        options.itemType === "string"
+          ? typeof item === "string"
+          : options.itemType === "number"
+          ? typeof item === "number"
+          : typeof item === "object" && item !== null;
+
+      if (!isValidType) {
+        errors.push(`Item at index ${i} is not a ${options.itemType}`);
+      }
+    }
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}
+
+/**
+ * Combines multiple validation results
+ */
+export function combineValidationResults(
+  results: readonly ValidationResult[]
+): ValidationResult {
+  const allErrors = results.flatMap((r) => r.errors);
+
+  return {
+    isValid: allErrors.length === 0,
+    errors: allErrors,
+  };
+}
+
+/**
+ * Sanitizes and validates user input in one step
+ */
+export function sanitizeAndValidate(
+  input: unknown,
+  options: StringValidationOptions = {}
+): { readonly sanitized: string; readonly validation: ValidationResult } {
+  const sanitized = sanitizeString(input);
+  const validation = validateString(sanitized, options);
+
+  return { sanitized, validation };
+}
+
+/**
+ * Validates prompt/input text for AI generation
+ */
+export function validateAIPrompt(input: unknown): ValidationResult {
+  const options: StringValidationOptions = {
+    minLength: MIN_PROMPT_LENGTH,
+    maxLength: MAX_PROMPT_LENGTH,
+    trim: true,
+  };
+
+  return validateString(input, options);
+}
+
+/**
+ * Validates image data (base64 or URL)
+ */
+export function validateImageData(input: unknown): ValidationResult {
+  if (typeof input !== "string") {
+    return {
+      isValid: false,
+      errors: ["Image data must be a string"],
+    };
+  }
+
+  // Check if it's a URL
+  if (input.startsWith("http://") || input.startsWith("https://")) {
+    return validateURL(input);
+  }
+
+  // Check if it's base64
+  if (input.startsWith("data:image/")) {
+    const base64Part = input.split(",")[1];
+    if (!base64Part) {
+      return {
+        isValid: false,
+        errors: ["Invalid data URI format"],
+      };
+    }
+    return validateBase64(base64Part);
+  }
+
+  return {
+    isValid: false,
+    errors: ["Image data must be a URL or base64 data URI"],
+  };
+}
+
+/**
+ * Validates user ID
+ */
+export function validateUserId(input: unknown): ValidationResult {
+  const options: StringValidationOptions = {
+    minLength: 1,
+    maxLength: MAX_USER_ID_LENGTH,
+    pattern: /^[a-zA-Z0-9_-]+$/,
+  };
+
+  return validateString(input, options);
+}
+
+/**
+ * Validates creation ID
+ */
+export function validateCreationId(input: unknown): ValidationResult {
+  const options: StringValidationOptions = {
+    minLength: 1,
+    maxLength: MAX_CREATION_ID_LENGTH,
+  };
+
+  return validateString(input, options);
+}

package/src/presentation/components/AIGenerationForm.tsx

@@ -43,22 +43,11 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   translations,
   children,
 }) => {
-  if (__DEV__) {
-    console.log("[AIGenerationForm] RENDERING NOW - hideGenerateButton:", hideGenerateButton);
-  }
-
   const tokens = useAppDesignTokens();
   const isAdvancedVisible = showAdvanced !== undefined ? showAdvanced : true;
-  // Button is disabled if: external isDisabled is true, OR prompt validation fails (when prompt is used)
   const promptInvalid = onPromptChange ? !prompt?.trim() : false;
   const buttonIsDisabled = isDisabled || promptInvalid;
 
-  useEffect(() => {
-    if (__DEV__) {
-      console.log("[AIGenerationForm] MOUNTED/UPDATED - prompt:", prompt, "isGenerating:", isGenerating, "buttonIsDisabled:", buttonIsDisabled, "hideGenerateButton:", hideGenerateButton);
-    }
-  }, [prompt, isGenerating, buttonIsDisabled, hideGenerateButton]);
-
   return (
     <>
       {presets && presets.length > 0 && onPresetPress && (

package/src/presentation/components/ErrorBoundary.tsx

@@ -0,0 +1,141 @@
+/**
+ * Error Boundary Component
+ * Catches JavaScript errors anywhere in the child component tree
+ * Displays a fallback UI instead of crashing the entire app
+ */
+
+import React, { Component, 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 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/index.ts

@@ -5,6 +5,7 @@ export { PendingJobProgressBar } from "./PendingJobProgressBar";
 export { PendingJobCardActions } from "./PendingJobCardActions";
 export { PromptInput } from "./PromptInput";
 export { AIGenerationHero } from "./AIGenerationHero";
+export { ErrorBoundary, withErrorBoundary } from "./ErrorBoundary";
 export * from "./StylePresetsGrid";
 export * from "./AIGenerationForm";
 export * from "./AIGenerationForm.types";

package/src/presentation/hooks/use-background-generation.ts

@@ -35,7 +35,6 @@ export interface UseBackgroundGenerationReturn<TInput, TResult> {
     input: TInput,
   ) => Promise<DirectExecutionResult<TResult>>;
   readonly cancelJob: (id: string) => void;
-  readonly retryJob: (id: string) => void;
   readonly pendingJobs: BackgroundJob<TInput, TResult>[];
   readonly activeJobCount: number;
   readonly hasActiveJobs: boolean;
@@ -173,21 +172,10 @@ export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
     [removeJob],
   );
 
-  const retryJob = useCallback(
-    (id: string) => {
-      const jobData = jobInputsRef.current.get(id);
-      if (!jobData) return;
-      removeJob(id);
-      void startJob(jobData.input, jobData.type);
-    },
-    [removeJob, startJob],
-  );
-
   return {
     startJob,
     executeDirectly,
     cancelJob,
-    retryJob,
     pendingJobs: jobs,
     activeJobCount: activeJobsRef.current.size,
     hasActiveJobs: activeJobsRef.current.size > 0,

package/src/presentation/hooks/useAIFeatureCallbacks.ts

@@ -53,8 +53,7 @@ export interface AIFeatureCallbacks<TRequest = unknown, TResult = unknown> {
   calculateCost: (multiplier?: number, _model?: string | null) => number;
   canAfford: (cost: number) => boolean;
   isAuthenticated: () => boolean;
-  /** Called when auth is required. Pass retryCallback to resume after auth. */
-  onAuthRequired: (retryCallback?: () => void) => void;
+  onAuthRequired: () => void;
   onCreditsRequired: (cost?: number) => void;
   onSuccess?: (result: TResult) => void;
   onError?: (error: string) => void;
@@ -98,8 +97,8 @@ export function useAIFeatureCallbacks<TRequest = unknown, TResult = unknown>(
     [creditCostPerUnit],
   );
 
-  const onAuthRequired = useCallback((retryCallback?: () => void) => {
-    showAuthModal(retryCallback);
+  const onAuthRequired = useCallback(() => {
+    showAuthModal();
   }, [showAuthModal]);
 
   const onCreditsRequired = useCallback(

package/src/presentation/types/result-config.types.ts

@@ -78,7 +78,6 @@ export interface ResultActionButton {
 export interface ResultActionsConfig {
   share?: ResultActionButton;
   save?: ResultActionButton;
-  retry?: ResultActionButton;
   layout?: "horizontal" | "vertical" | "grid";
   buttonSpacing?: number;
   spacing?: {
@@ -169,12 +168,6 @@ export const DEFAULT_RESULT_CONFIG: ResultConfig = {
       variant: "secondary",
       position: "bottom",
     },
-    retry: {
-      enabled: true,
-      icon: "refresh",
-      variant: "text",
-      position: "top",
-    },
     layout: "horizontal",
     buttonSpacing: 10,
     spacing: {