@umituz/react-native-ai-generation-content 1.20.12 → 1.20.13

package/src/presentation/layouts/SingleImageWithPromptFeatureLayout.tsx

@@ -2,11 +2,12 @@
  * SingleImageWithPromptFeatureLayout
  * Centralized layout for single-image + prompt processing features
  * (e.g., replace-background, remove-object)
- * Handles: Modal, ScrollView, AIGenerationForm, AIGenerationResult
+ * Handles: ScrollView, AIGenerationForm, AIGenerationResult, GenerationProgressContent
+ * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
 import React, { useCallback } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
   useResponsive,
@@ -14,7 +15,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { AIGenerationForm } from "../components/AIGenerationForm";
 import { AIGenerationResult } from "../components/display/AIGenerationResult";
-import { GenerationProgressModal } from "../components/GenerationProgressModal";
+import { GenerationProgressContent } from "../components/GenerationProgressContent";
 import type { SingleImageWithPromptFeatureLayoutProps } from "./types";
 
 export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptFeatureLayoutProps> = ({
@@ -25,7 +26,6 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
   renderInput,
   renderResult,
   description,
-  renderProcessingModal,
   children,
 }) => {
   const tokens = useAppDesignTokens();
@@ -51,19 +51,29 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
     [feature],
   );
 
-  // Default modal
-  const defaultModal = (
-    <GenerationProgressModal
-      visible={feature.isProcessing}
-      progress={feature.progress}
-      icon={modalIcon}
-      title={modalTranslations.title}
-      message={modalTranslations.message}
-      hint={modalTranslations.hint}
-      backgroundHint={modalTranslations.backgroundHint}
-      onClose={() => {}}
-    />
-  );
+  // Processing view - fullscreen (FutureUS pattern, no Modal)
+  if (feature.isProcessing) {
+    return (
+      <View
+        style={[
+          styles.processingContainer,
+          { backgroundColor: tokens.colors.backgroundPrimary },
+        ]}
+      >
+        <GenerationProgressContent
+          progress={feature.progress}
+          icon={modalIcon}
+          title={modalTranslations.title}
+          message={modalTranslations.message}
+          hint={modalTranslations.hint}
+          backgroundHint={modalTranslations.backgroundHint}
+          backgroundColor={tokens.colors.surface}
+          textColor={tokens.colors.textPrimary}
+          progressColor={tokens.colors.primary}
+        />
+      </View>
+    );
+  }
 
   // Result view
   if (feature.processedUrl) {
@@ -92,48 +102,42 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
 
   // Input view
   return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
+    <ScrollView
+      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+      contentContainerStyle={styles.content}
+      showsVerticalScrollIndicator={false}
+    >
+      <AIGenerationForm
+        onGenerate={handleProcess}
+        isGenerating={feature.isProcessing}
+        progress={feature.progress}
+        translations={{
+          generateButton: translations.processButtonText,
+          generatingButton: translations.processingText,
+          progressTitle: translations.processingText,
+        }}
       >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          progress={feature.progress}
-          translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-            progressTitle: translations.processingText,
-          }}
-        >
-          {description && (
-            <AtomicText
-              type="bodyLarge"
-              style={[styles.description, { color: tokens.colors.textSecondary }]}
-            >
-              {description}
-            </AtomicText>
-          )}
+        {description && (
+          <AtomicText
+            type="bodyLarge"
+            style={[styles.description, { color: tokens.colors.textSecondary }]}
+          >
+            {description}
+          </AtomicText>
+        )}
 
-          {children}
+        {children}
 
-          {renderInput({
-            imageUri: feature.imageUri,
-            onSelect: handleSelectImage,
-            isDisabled: feature.isProcessing,
-            isProcessing: feature.isProcessing,
-            prompt: feature.prompt,
-            onPromptChange: handlePromptChange,
-          })}
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal
-        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
-        : defaultModal}
-    </>
+        {renderInput({
+          imageUri: feature.imageUri,
+          onSelect: handleSelectImage,
+          isDisabled: feature.isProcessing,
+          isProcessing: feature.isProcessing,
+          prompt: feature.prompt,
+          onPromptChange: handlePromptChange,
+        })}
+      </AIGenerationForm>
+    </ScrollView>
   );
 };
 
@@ -150,4 +154,9 @@ const styles = StyleSheet.create({
     marginBottom: 24,
     lineHeight: 24,
   },
+  processingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });

package/src/presentation/layouts/index.ts

@@ -1,9 +1,3 @@
-/**
- * Feature Layout Types
- * Shared types for SingleImageFeatureLayout and DualImageFeatureLayout
- */
-
-// Re-export all partial types
 export type {
   ModalTranslations,
   BaseLayoutTranslations,
@@ -12,7 +6,6 @@ export type {
   DualImageInputRenderProps,
   SingleImageWithPromptInputRenderProps,
   ResultRenderProps,
-  ProcessingModalRenderProps,
   CustomResultRenderProps,
   DualImageVideoFeatureState,
   SingleImageWithPromptFeatureState,

package/src/presentation/layouts/types/index.ts

@@ -16,11 +16,7 @@ export type {
   SingleImageWithPromptInputRenderProps,
 } from "./input-props";
 
-export type {
-  ResultRenderProps,
-  ProcessingModalRenderProps,
-  CustomResultRenderProps,
-} from "./result-props";
+export type { ResultRenderProps, CustomResultRenderProps } from "./result-props";
 
 export type {
   DualImageVideoFeatureState,

package/src/presentation/layouts/types/layout-props.ts

@@ -18,11 +18,7 @@ import type {
   DualImageInputRenderProps,
   SingleImageWithPromptInputRenderProps,
 } from "./input-props";
-import type {
-  ResultRenderProps,
-  ProcessingModalRenderProps,
-  CustomResultRenderProps,
-} from "./result-props";
+import type { ResultRenderProps, CustomResultRenderProps } from "./result-props";
 import type {
   DualImageVideoFeatureState,
   SingleImageWithPromptFeatureState,
@@ -30,15 +26,16 @@ import type {
 
 /**
  * Single image feature layout props
+ * Note: No modal - shows fullscreen progress when processing (FutureUS pattern)
  */
 export interface SingleImageFeatureLayoutProps {
   /** Feature hook return */
   feature: BaseSingleImageHookReturn;
   /** UI translations */
   translations: BaseLayoutTranslations & PhotoUploadTranslations;
-  /** Modal translations */
+  /** Progress screen translations */
   modalTranslations: ModalTranslations;
-  /** Modal icon */
+  /** Progress screen icon */
   modalIcon?: string;
   /** Render the input section (photo upload) */
   renderInput: (props: SingleImageInputRenderProps) => ReactNode;
@@ -48,23 +45,22 @@ export interface SingleImageFeatureLayoutProps {
   renderCustomResult?: (props: CustomResultRenderProps) => ReactNode;
   /** Optional description text */
   description?: string;
-  /** Optional custom processing modal */
-  renderProcessingModal?: (props: ProcessingModalRenderProps) => ReactNode;
   /** Optional children to render before the input */
   children?: ReactNode;
 }
 
 /**
  * Dual image feature layout props
+ * Note: No modal - shows fullscreen progress when processing (FutureUS pattern)
  */
 export interface DualImageFeatureLayoutProps {
   /** Feature hook return */
   feature: BaseDualImageHookReturn;
   /** UI translations */
   translations: BaseLayoutTranslations;
-  /** Modal translations */
+  /** Progress screen translations */
   modalTranslations: ModalTranslations;
-  /** Modal icon */
+  /** Progress screen icon */
   modalIcon?: string;
   /** Render the input section (dual image picker) */
   renderInput: (props: DualImageInputRenderProps) => ReactNode;
@@ -72,45 +68,43 @@ export interface DualImageFeatureLayoutProps {
   renderResult: (props: ResultRenderProps) => ReactNode;
   /** Optional description text */
   description?: string;
-  /** Optional custom processing modal */
-  renderProcessingModal?: (props: ProcessingModalRenderProps) => ReactNode;
   /** Optional children to render before the input */
   children?: ReactNode;
 }
 
 /**
  * Dual image video feature layout props
+ * Note: No modal - shows fullscreen progress when processing (FutureUS pattern)
  */
 export interface DualImageVideoFeatureLayoutProps {
   /** Feature hook return */
   feature: DualImageVideoFeatureState;
   /** UI translations */
   translations: BaseLayoutTranslations;
-  /** Modal translations */
+  /** Progress screen translations */
   modalTranslations: ModalTranslations;
-  /** Modal icon */
+  /** Progress screen icon */
   modalIcon?: string;
   /** Render the input section (dual image picker) */
   renderInput: (props: DualImageInputRenderProps) => ReactNode;
   /** Optional description text */
   description?: string;
-  /** Optional custom processing modal */
-  renderProcessingModal?: (props: ProcessingModalRenderProps) => ReactNode;
   /** Optional children to render before the input */
   children?: ReactNode;
 }
 
 /**
  * Single image with prompt feature layout props
+ * Note: No modal - shows fullscreen progress when processing (FutureUS pattern)
  */
 export interface SingleImageWithPromptFeatureLayoutProps {
   /** Feature hook return */
   feature: SingleImageWithPromptFeatureState;
   /** UI translations */
   translations: BaseLayoutTranslations & PhotoUploadTranslations;
-  /** Modal translations */
+  /** Progress screen translations */
   modalTranslations: ModalTranslations;
-  /** Modal icon */
+  /** Progress screen icon */
   modalIcon?: string;
   /** Render the input section (photo upload + prompt) */
   renderInput: (props: SingleImageWithPromptInputRenderProps) => ReactNode;
@@ -118,8 +112,6 @@ export interface SingleImageWithPromptFeatureLayoutProps {
   renderResult: (props: ResultRenderProps) => ReactNode;
   /** Optional description text */
   description?: string;
-  /** Optional custom processing modal */
-  renderProcessingModal?: (props: ProcessingModalRenderProps) => ReactNode;
   /** Optional children to render before the input */
   children?: ReactNode;
 }

package/src/presentation/layouts/types/result-props.ts

@@ -11,14 +11,6 @@ export interface ResultRenderProps {
   imageSize: number;
 }
 
-/**
- * Processing modal render props
- */
-export interface ProcessingModalRenderProps {
-  visible: boolean;
-  progress: number;
-}
-
 /**
  * Custom result render props (includes feature state for comparison views)
  */

package/src/presentation/components/GenerationProgressModal.tsx

@@ -1,134 +0,0 @@
-/**
- * GenerationProgressModal
- * Generic AI generation progress modal using BaseModal
- * Props-driven for 100+ apps compatibility
- */
-
-import React, { useEffect } from "react";
-import { StyleSheet } from "react-native";
-import {
-  BaseModal,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import {
-  GenerationProgressContent,
-  type GenerationProgressContentProps,
-} from "./GenerationProgressContent";
-
-declare const __DEV__: boolean;
-
-export interface GenerationProgressRenderProps {
-  readonly progress: number;
-  readonly icon?: string;
-  readonly title?: string;
-  readonly message?: string;
-  readonly hint?: string;
-  readonly onDismiss?: () => void;
-  readonly onClose?: () => void;
-}
-
-export interface GenerationProgressModalProps
-  extends Omit<GenerationProgressContentProps, "backgroundColor"> {
-  readonly visible: boolean;
-  readonly modalBackgroundColor?: string;
-  readonly renderContent?: (
-    props: GenerationProgressRenderProps
-  ) => React.ReactNode;
-}
-
-export const GenerationProgressModal: React.FC<
-  GenerationProgressModalProps
-> = ({
-  visible,
-  progress,
-  icon,
-  title,
-  message,
-  hint,
-  dismissLabel,
-  onDismiss,
-  onClose,
-  backgroundHint,
-  modalBackgroundColor,
-  textColor,
-  hintColor,
-  progressColor,
-  progressBackgroundColor,
-  dismissButtonColor,
-  renderContent,
-}) => {
-  const tokens = useAppDesignTokens();
-  const clampedProgress = Math.max(0, Math.min(100, progress));
-
-  // Debug logging
-  useEffect(() => {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[GenerationProgressModal] Mounted/Updated:", {
-        visible,
-        progress: clampedProgress,
-        hasTitle: !!title,
-        hasMessage: !!message,
-      });
-    }
-  }, [visible, clampedProgress, title, message]);
-
-  useEffect(() => {
-    if (typeof __DEV__ !== "undefined" && __DEV__ && visible) {
-      console.log("[GenerationProgressModal] VISIBLE - Modal should be showing now");
-    }
-  }, [visible]);
-
-  const handleClose = React.useCallback(() => {
-    onDismiss?.();
-  }, [onDismiss]);
-
-  const content = renderContent ? (
-    renderContent({
-      progress: clampedProgress,
-      icon,
-      title,
-      message,
-      hint,
-      onDismiss,
-      onClose,
-    })
-  ) : (
-    <GenerationProgressContent
-      progress={clampedProgress}
-      icon={icon}
-      title={title}
-      message={message}
-      hint={hint}
-      dismissLabel={dismissLabel}
-      onDismiss={onDismiss}
-      onClose={onClose}
-      backgroundHint={backgroundHint}
-      backgroundColor={modalBackgroundColor || tokens.colors.surface}
-      textColor={textColor || tokens.colors.textPrimary}
-      hintColor={hintColor || tokens.colors.textTertiary}
-      progressColor={progressColor || tokens.colors.primary}
-      progressBackgroundColor={
-        progressBackgroundColor || tokens.colors.surfaceVariant
-      }
-      dismissButtonColor={dismissButtonColor || tokens.colors.primary}
-    />
-  );
-
-  return (
-    <BaseModal
-      visible={visible}
-      onClose={handleClose}
-      dismissOnBackdrop={false}
-      contentStyle={styles.modalContent}
-    >
-      {content}
-    </BaseModal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalContent: {
-    backgroundColor: "transparent",
-    borderWidth: 0,
-  },
-});