@umituz/react-native-ai-generation-content 1.17.182 → 1.17.183

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.182",
+  "version": "1.17.183",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/features/ai-hug/presentation/components/AIHugFeature.tsx

@@ -1,16 +1,14 @@
 /**
  * AIHugFeature Component
  * Self-contained AI hug video feature UI component
- * Uses hook internally, only requires config and translations
+ * Uses centralized DualImageVideoFeatureLayout for consistent UX
  */
 
-import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
-import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
-import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
-import { GenerationProgressModal } from "../../../../presentation/components/GenerationProgressModal";
+import { DualImageVideoFeatureLayout } from "../../../../presentation/layouts";
+import type { ProcessingModalRenderProps } from "../../../../presentation/layouts";
 import { useAIHugFeature } from "../hooks";
 import type {
   AIHugTranslations,
@@ -18,23 +16,18 @@ import type {
 } from "../../domain/types";
 
 export interface AIHugFeatureProps {
-  /** Feature configuration with provider-specific settings */
   config: AIHugFeatureConfig;
-  /** Translations for all UI text */
-  translations: AIHugTranslations;
-  /** Source image picker callback */
+  translations: AIHugTranslations & {
+    modalTitle?: string;
+    modalMessage?: string;
+    modalHint?: string;
+    modalBackgroundHint?: string;
+  };
   onSelectSourceImage: () => Promise<string | null>;
-  /** Target image picker callback */
   onSelectTargetImage: () => Promise<string | null>;
-  /** Save video callback */
   onSaveVideo: (videoUrl: string) => Promise<void>;
-  /** Called before processing starts. Return false to cancel. */
   onBeforeProcess?: () => Promise<boolean>;
-  /** Optional custom processing modal renderer */
-  renderProcessingModal?: (props: {
-    visible: boolean;
-    progress: number;
-  }) => React.ReactNode;
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => React.ReactNode;
 }
 
 export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
@@ -46,8 +39,6 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
   onBeforeProcess,
   renderProcessingModal,
 }) => {
-  const tokens = useAppDesignTokens();
-
   const feature = useAIHugFeature({
     config,
     onSelectSourceImage,
@@ -56,103 +47,41 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
     onBeforeProcess,
   });
 
-  const handleProcess = useCallback(() => {
-    void feature.process();
-  }, [feature]);
-
-  const handleSave = useCallback(() => {
-    void feature.save();
-  }, [feature]);
-
-  const handleSelectSource = useCallback(() => {
-    void feature.selectSourceImage();
-  }, [feature]);
-
-  const handleSelectTarget = useCallback(() => {
-    void feature.selectTargetImage();
-  }, [feature]);
-
-  if (feature.processedVideoUrl) {
-    return (
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationResult
-          successText={translations.successText}
-          primaryAction={{
-            label: translations.saveButtonText,
-            onPress: handleSave,
-          }}
-          secondaryAction={{
-            label: translations.tryAnotherText,
-            onPress: feature.reset,
-          }}
-        />
-      </ScrollView>
-    );
-  }
-
-  const defaultModal = (
-    <GenerationProgressModal
-      visible={feature.isProcessing}
-      progress={feature.progress}
-      icon="sparkles"
-      title={translations.modalTitle || "Creating your video"}
-      message={translations.modalMessage || "AI is working its magic..."}
-      hint={translations.modalHint || "This may take a moment"}
-      backgroundHint={translations.modalBackgroundHint || "Continue in background"}
-      onClose={() => {
-        // Allow continuing in background - just close modal
-      }}
-    />
+  const modalTranslations = useMemo(
+    () => ({
+      title: translations.modalTitle || "Creating your video",
+      message: translations.modalMessage || "AI is working its magic...",
+      hint: translations.modalHint || "This may take a moment",
+      backgroundHint: translations.modalBackgroundHint || "Continue in background",
+    }),
+    [translations],
   );
 
   return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-          }}
-        >
-          <View style={styles.pickerContainer}>
-            <DualImagePicker
-              sourceImageUri={feature.sourceImageUri}
-              targetImageUri={feature.targetImageUri}
-              isDisabled={feature.isProcessing}
-              onSelectSource={handleSelectSource}
-              onSelectTarget={handleSelectTarget}
-              sourcePlaceholder={translations.sourceUploadTitle}
-              targetPlaceholder={translations.targetUploadTitle}
-              layout="horizontal"
-            />
-          </View>
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal
-        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
-        : defaultModal}
-    </>
+    <DualImageVideoFeatureLayout
+      feature={feature}
+      translations={translations}
+      modalTranslations={modalTranslations}
+      renderProcessingModal={renderProcessingModal}
+      renderInput={({ sourceImageUri, targetImageUri, onSelectSource, onSelectTarget, isDisabled }) => (
+        <View style={styles.pickerContainer}>
+          <DualImagePicker
+            sourceImageUri={sourceImageUri}
+            targetImageUri={targetImageUri}
+            isDisabled={isDisabled}
+            onSelectSource={onSelectSource}
+            onSelectTarget={onSelectTarget}
+            sourcePlaceholder={translations.sourceUploadTitle}
+            targetPlaceholder={translations.targetUploadTitle}
+            layout="horizontal"
+          />
+        </View>
+      )}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    paddingVertical: 16,
-  },
   pickerContainer: {
     marginHorizontal: 16,
     marginBottom: 16,

package/src/features/ai-kiss/presentation/components/AIKissFeature.tsx

@@ -1,16 +1,14 @@
 /**
  * AIKissFeature Component
  * Self-contained AI kiss video feature UI component
- * Uses hook internally, only requires config and translations
+ * Uses centralized DualImageVideoFeatureLayout for consistent UX
  */
 
-import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
-import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
-import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
-import { GenerationProgressModal } from "../../../../presentation/components/GenerationProgressModal";
+import { DualImageVideoFeatureLayout } from "../../../../presentation/layouts";
+import type { ProcessingModalRenderProps } from "../../../../presentation/layouts";
 import { useAIKissFeature } from "../hooks";
 import type {
   AIKissTranslations,
@@ -19,16 +17,17 @@ import type {
 
 export interface AIKissFeatureProps {
   config: AIKissFeatureConfig;
-  translations: AIKissTranslations;
+  translations: AIKissTranslations & {
+    modalTitle?: string;
+    modalMessage?: string;
+    modalHint?: string;
+    modalBackgroundHint?: string;
+  };
   onSelectSourceImage: () => Promise<string | null>;
   onSelectTargetImage: () => Promise<string | null>;
   onSaveVideo: (videoUrl: string) => Promise<void>;
-  /** Called before processing starts. Return false to cancel. */
   onBeforeProcess?: () => Promise<boolean>;
-  renderProcessingModal?: (props: {
-    visible: boolean;
-    progress: number;
-  }) => React.ReactNode;
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => React.ReactNode;
 }
 
 export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
@@ -40,8 +39,6 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
   onBeforeProcess,
   renderProcessingModal,
 }) => {
-  const tokens = useAppDesignTokens();
-
   const feature = useAIKissFeature({
     config,
     onSelectSourceImage,
@@ -50,103 +47,41 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
     onBeforeProcess,
   });
 
-  const handleProcess = useCallback(() => {
-    void feature.process();
-  }, [feature]);
-
-  const handleSave = useCallback(() => {
-    void feature.save();
-  }, [feature]);
-
-  const handleSelectSource = useCallback(() => {
-    void feature.selectSourceImage();
-  }, [feature]);
-
-  const handleSelectTarget = useCallback(() => {
-    void feature.selectTargetImage();
-  }, [feature]);
-
-  if (feature.processedVideoUrl) {
-    return (
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationResult
-          successText={translations.successText}
-          primaryAction={{
-            label: translations.saveButtonText,
-            onPress: handleSave,
-          }}
-          secondaryAction={{
-            label: translations.tryAnotherText,
-            onPress: feature.reset,
-          }}
-        />
-      </ScrollView>
-    );
-  }
-
-  const defaultModal = (
-    <GenerationProgressModal
-      visible={feature.isProcessing}
-      progress={feature.progress}
-      icon="sparkles"
-      title={translations.modalTitle || "Creating your video"}
-      message={translations.modalMessage || "AI is working its magic..."}
-      hint={translations.modalHint || "This may take a moment"}
-      backgroundHint={translations.modalBackgroundHint || "Continue in background"}
-      onClose={() => {
-        // Allow continuing in background - just close modal
-      }}
-    />
+  const modalTranslations = useMemo(
+    () => ({
+      title: translations.modalTitle || "Creating your video",
+      message: translations.modalMessage || "AI is working its magic...",
+      hint: translations.modalHint || "This may take a moment",
+      backgroundHint: translations.modalBackgroundHint || "Continue in background",
+    }),
+    [translations],
   );
 
   return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-          }}
-        >
-          <View style={styles.pickerContainer}>
-            <DualImagePicker
-              sourceImageUri={feature.sourceImageUri}
-              targetImageUri={feature.targetImageUri}
-              isDisabled={feature.isProcessing}
-              onSelectSource={handleSelectSource}
-              onSelectTarget={handleSelectTarget}
-              sourcePlaceholder={translations.sourceUploadTitle}
-              targetPlaceholder={translations.targetUploadTitle}
-              layout="horizontal"
-            />
-          </View>
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal
-        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
-        : defaultModal}
-    </>
+    <DualImageVideoFeatureLayout
+      feature={feature}
+      translations={translations}
+      modalTranslations={modalTranslations}
+      renderProcessingModal={renderProcessingModal}
+      renderInput={({ sourceImageUri, targetImageUri, onSelectSource, onSelectTarget, isDisabled }) => (
+        <View style={styles.pickerContainer}>
+          <DualImagePicker
+            sourceImageUri={sourceImageUri}
+            targetImageUri={targetImageUri}
+            isDisabled={isDisabled}
+            onSelectSource={onSelectSource}
+            onSelectTarget={onSelectTarget}
+            sourcePlaceholder={translations.sourceUploadTitle}
+            targetPlaceholder={translations.targetUploadTitle}
+            layout="horizontal"
+          />
+        </View>
+      )}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    paddingVertical: 16,
-  },
   pickerContainer: {
     marginHorizontal: 16,
     marginBottom: 16,

package/src/features/anime-selfie/presentation/components/AnimeSelfieFeature.tsx

@@ -1,15 +1,14 @@
 /**
  * AnimeSelfieFeature Component
  * Self-contained anime selfie feature UI component
- * Uses hook internally, only requires config and translations
+ * Uses centralized SingleImageFeatureLayout for consistent UX
  */
 
-import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet, Image } from "react-native";
-import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
+import React, { useMemo } from "react";
+import { Image, StyleSheet } from "react-native";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
-import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
-import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
+import { SingleImageFeatureLayout } from "../../../../presentation/layouts";
+import type { ProcessingModalRenderProps } from "../../../../presentation/layouts";
 import { useAnimeSelfieFeature } from "../hooks";
 import type {
   AnimeSelfieTranslations,
@@ -18,15 +17,17 @@ import type {
 
 export interface AnimeSelfieFeatureProps {
   config: AnimeSelfieFeatureConfig;
-  translations: AnimeSelfieTranslations;
+  translations: AnimeSelfieTranslations & {
+    modalTitle?: string;
+    modalMessage?: string;
+    modalHint?: string;
+    modalBackgroundHint?: string;
+  };
   onSelectImage: () => Promise<string | null>;
   onSaveImage: (imageUrl: string) => Promise<void>;
   /** Called before processing starts. Return false to cancel. */
   onBeforeProcess?: () => Promise<boolean>;
-  renderProcessingModal?: (props: {
-    visible: boolean;
-    progress: number;
-  }) => React.ReactNode;
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => React.ReactNode;
 }
 
 export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
@@ -37,10 +38,6 @@ export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
   onBeforeProcess,
   renderProcessingModal,
 }) => {
-  const tokens = useAppDesignTokens();
-  const { width: screenWidth, horizontalPadding } = useResponsive();
-  const imageSize = screenWidth - horizontalPadding * 2;
-
   const feature = useAnimeSelfieFeature({
     config,
     onSelectImage,
@@ -48,125 +45,55 @@ export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
     onBeforeProcess,
   });
 
-  const photoTranslations = useMemo(
+  const modalTranslations = useMemo(
     () => ({
-      tapToUpload: translations.uploadTitle,
-      selectPhoto: translations.uploadSubtitle,
-      change: translations.uploadChange,
-      analyzing: translations.uploadAnalyzing,
+      title: translations.modalTitle || "Processing",
+      message: translations.modalMessage || "AI is transforming your photo...",
+      hint: translations.modalHint || "This may take a moment",
+      backgroundHint: translations.modalBackgroundHint || "Continue in background",
     }),
     [translations],
   );
 
-  const handleProcess = useCallback(() => {
-    void feature.process();
-  }, [feature]);
-
-  const handleSave = useCallback(() => {
-    void feature.save();
-  }, [feature]);
-
-  const handleSelectImage = useCallback(() => {
-    void feature.selectImage();
-  }, [feature]);
-
-  if (feature.processedUrl) {
-    return (
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationResult
-          successText={translations.successText}
-          primaryAction={{
-            label: translations.saveButtonText,
-            onPress: handleSave,
-          }}
-          secondaryAction={{
-            label: translations.tryAnotherText,
-            onPress: feature.reset,
-          }}
-        >
-          <Image
-            source={{ uri: feature.processedUrl }}
-            style={[styles.resultImage, { width: imageSize, height: imageSize }]}
-            resizeMode="contain"
-          />
-        </AIGenerationResult>
-      </ScrollView>
-    );
-  }
-
   return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          progress={feature.progress}
+    <SingleImageFeatureLayout
+      feature={feature}
+      translations={translations}
+      modalTranslations={modalTranslations}
+      renderProcessingModal={renderProcessingModal}
+      renderInput={({ imageUri, onSelect, isDisabled, isProcessing }) => (
+        <PhotoUploadCard
+          imageUri={imageUri}
+          onPress={onSelect}
+          isValidating={isProcessing}
+          disabled={isDisabled}
           translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-            progressTitle: translations.processingText,
+            tapToUpload: translations.uploadTitle,
+            selectPhoto: translations.uploadSubtitle,
+            change: translations.uploadChange,
+            analyzing: translations.uploadAnalyzing,
           }}
-        >
-          <PhotoUploadCard
-            imageUri={feature.imageUri}
-            onPress={handleSelectImage}
-            isValidating={feature.isProcessing}
-            disabled={feature.isProcessing}
-            translations={photoTranslations}
-            config={{
-              aspectRatio: 1,
-              borderRadius: 24,
-              showValidationStatus: false,
-              allowChange: true,
-            }}
-          />
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
-    </>
+          config={{
+            aspectRatio: 1,
+            borderRadius: 24,
+            showValidationStatus: false,
+            allowChange: true,
+          }}
+        />
+      )}
+      renderResult={({ imageUrl, imageSize }) => (
+        <Image
+          source={{ uri: imageUrl }}
+          style={[styles.resultImage, { width: imageSize, height: imageSize }]}
+          resizeMode="contain"
+        />
+      )}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    paddingVertical: 16,
-  },
-  description: {
-    textAlign: "center",
-    marginHorizontal: 24,
-    marginBottom: 24,
-    lineHeight: 24,
-  },
-  successText: {
-    textAlign: "center",
-    marginBottom: 24,
-  },
-  resultImageContainer: {
-    alignItems: "center",
-    marginHorizontal: 24,
-    marginBottom: 24,
-  },
   resultImage: {
     borderRadius: 16,
   },
-  resultActions: {
-    marginHorizontal: 24,
-    gap: 12,
-  },
-  buttonContainer: {
-    marginHorizontal: 24,
-    marginTop: 8,
-  },
 });