@umituz/react-native-ai-generation-content 1.20.22 → 1.20.24

package/package.json

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

package/src/index.ts

@@ -94,7 +94,7 @@ export {
   GenerateButton, ResultDisplay, AIGenerationResult, ErrorDisplay, FeatureHeader,
   AIGenScreenHeader, CreditBadge, PhotoUploadCard, SettingsSheet, StyleSelector,
   AspectRatioSelector, DurationSelector, GridSelector, StylePresetsGrid, AIGenerationForm,
-  AIGenerationConfig,
+  AIGenerationConfig, AIGenerateWizardFlow,
   createAspectRatioOptions, createDurationOptions, createStyleOptions, createStyleOptionsFromConfig,
   ASPECT_RATIO_IDS, COMMON_DURATIONS,
 } from "./presentation/components";
@@ -125,7 +125,7 @@ export type {
   AspectRatioSelectorProps, DurationSelectorProps, GridSelectorProps, GridSelectorOption,
   StyleOption, AspectRatioOption, DurationValue, AspectRatioTranslations, DurationOption,
   StyleTranslations, AIGenerationFormProps, AIGenerationFormTranslations,
-  AIGenerationConfigProps,
+  AIGenerationConfigProps, AIGenerateWizardFlowProps,
 } from "./presentation/components";
 
 export { DEFAULT_SINGLE_PHOTO_FLOW, DEFAULT_DUAL_PHOTO_FLOW } from "./presentation/types/flow-config.types";

package/src/presentation/components/flows/AIGenerateWizardFlow.tsx

@@ -1,5 +1,5 @@
 
-import React, { useMemo, useCallback, useEffect } from "react";
+import React from "react";
 import { View, ScrollView, Platform, TouchableOpacity, Image } from "react-native";
 import {
   useAppDesignTokens,
@@ -14,55 +14,9 @@ import { PartnerStepScreen } from "../../../features/partner-upload/presentation
 import { AIGenerationConfig } from "../AIGenerationConfig";
 import { GenerationProgressContent } from "../GenerationProgressContent";
 import { AIGenerationResult } from "../display/AIGenerationResult";
-import { useAIGenerateState, AIGenerateStep } from "../../hooks/generation/useAIGenerateState";
-import { getAIFeatureConfig, hasAIFeature } from "../../screens/ai-feature/registry";
-
-export interface AIGenerateWizardFlowProps {
-  readonly featureType: string;
-  readonly translations: {
-    headerTitle: string;
-    uploadSubtitle: string;
-    uploadSubtitle2: string;
-    continue: string;
-    tapToUpload: string;
-    selectPhoto: string;
-    change: string;
-    analyzing: string;
-    error: string;
-    uploadFailed: string;
-    aiDisclosure: string;
-    heroTitle: string;
-    heroSubtitle: string;
-    presetsTitle: string;
-    showAdvancedLabel: string;
-    hideAdvancedLabel: string;
-    promptTitle: string;
-    promptPlaceholder: string;
-    styleTitle: string;
-    durationTitle: string;
-    generateButton: string;
-    generatingButton: string;
-    processingTitle: string;
-    processingMessage: string;
-    processingHint: string;
-    successTitle: string;
-    saveButton: string;
-    tryAgainButton: string;
-    fileTooLarge: string;
-    maxFileSize: string;
-  };
-  readonly styleOptions: any[];
-  readonly presets: any[];
-  readonly durationOptions: number[];
-  readonly onGenerate: (data: {
-    prompt: string;
-    style: string;
-    duration: number;
-    images: { uri: string }[];
-  }) => Promise<string | null>;
-  readonly onBack?: () => void;
-  readonly t: (key: string) => string;
-}
+import { AIGenerateStep } from "../../hooks/generation/useAIGenerateState";
+import { useAIGenerateWizardFlow } from "./useAIGenerateWizardFlow";
+import { AIGenerateWizardFlowProps } from "./AIGenerateWizardFlow.types";
 
 export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
   featureType,
@@ -89,85 +43,12 @@ export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
     showAdvanced,
     toggleAdvanced,
     isGenerating,
-    setIsGenerating,
     progress,
-    setProgress,
     result,
-    setResult,
-  } = useAIGenerateState();
-
-  const imageCountRequired = useMemo(() => {
-    if (!featureType || !hasAIFeature(featureType)) return 0;
-    const config = getAIFeatureConfig(featureType as any);
-    if (config.mode === "dual" || config.mode === "dual-video") return 2;
-    if (config.mode === "single" || config.mode === "single-with-prompt")
-      return 1;
-    return 0;
-  }, [featureType]);
-
-  useEffect(() => {
-    if (currentStep === AIGenerateStep.INFO) {
-      if (imageCountRequired > 0) {
-        setCurrentStep(AIGenerateStep.UPLOAD_1);
-      } else {
-        setCurrentStep(AIGenerateStep.CONFIG);
-      }
-    }
-  }, [featureType, imageCountRequired, setCurrentStep, currentStep]);
-
-  const handleBack = useCallback(() => {
-    if (currentStep === AIGenerateStep.UPLOAD_1) {
-      onBackProp?.();
-    } else if (currentStep === AIGenerateStep.UPLOAD_2) {
-      setCurrentStep(AIGenerateStep.UPLOAD_1);
-    } else if (currentStep === AIGenerateStep.CONFIG) {
-      if (imageCountRequired > 1) {
-        setCurrentStep(AIGenerateStep.UPLOAD_2);
-      } else if (imageCountRequired > 0) {
-        setCurrentStep(AIGenerateStep.UPLOAD_1);
-      } else {
-        onBackProp?.();
-      }
-    } else if (currentStep === AIGenerateStep.RESULT) {
-      setCurrentStep(AIGenerateStep.CONFIG);
-    }
-  }, [currentStep, setCurrentStep, imageCountRequired, onBackProp]);
-
-  const handleNext = useCallback(() => {
-    if (currentStep === AIGenerateStep.UPLOAD_1) {
-      if (imageCountRequired > 1) {
-        setCurrentStep(AIGenerateStep.UPLOAD_2);
-      } else {
-        setCurrentStep(AIGenerateStep.CONFIG);
-      }
-    } else if (currentStep === AIGenerateStep.UPLOAD_2) {
-      setCurrentStep(AIGenerateStep.CONFIG);
-    }
-  }, [currentStep, setCurrentStep, imageCountRequired]);
-
-  const handleGenerate = useCallback(async () => {
-    setIsGenerating(true);
-    setProgress(10);
-    setCurrentStep(AIGenerateStep.GENERATING);
-
-    try {
-      const output = await onGenerate({
-        prompt,
-        style: selectedStyle,
-        duration: selectedDuration,
-        images,
-      });
-      setResult(output);
-      setCurrentStep(AIGenerateStep.RESULT);
-    } catch (error) {
-      // Error handling should be added here
-      console.error("Generation failed", error);
-      setCurrentStep(AIGenerateStep.CONFIG);
-    } finally {
-      setIsGenerating(false);
-      setProgress(0);
-    }
-  }, [onGenerate, prompt, selectedStyle, selectedDuration, images, setCurrentStep, setIsGenerating, setProgress, setResult]);
+    handleBack,
+    handleNext,
+    handleGenerate,
+  } = useAIGenerateWizardFlow({ featureType, onGenerate, onBack: onBackProp });
 
   switch (currentStep) {
     case AIGenerateStep.UPLOAD_1:
@@ -178,10 +59,7 @@ export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
           t={t}
           onBack={handleBack}
           onContinue={(img: any) => {
-            setStepImage(isStep2 ? 1 : 0, {
-              uri: img.uri,
-              previewUrl: img.previewUrl || img.uri,
-            });
+            setStepImage(isStep2 ? 1 : 0, { uri: img.uri, previewUrl: img.previewUrl || img.uri });
             handleNext();
           }}
           translations={{
@@ -199,25 +77,14 @@ export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
             aiDisclosure: translations.aiDisclosure,
           }}
           initialName=""
-          config={{
-            showFaceDetection: featureType === "face-swap",
-            showNameInput: false,
-            showPhotoTips: true,
-          }}
+          config={{ showFaceDetection: featureType === "face-swap", showNameInput: false, showPhotoTips: true }}
         />
       );
     }
 
     case AIGenerateStep.GENERATING:
       return (
-        <ScreenLayout
-          header={
-            <AIGenScreenHeader
-              title={translations.headerTitle}
-              onNavigationPress={handleBack}
-            />
-          }
-        >
+        <ScreenLayout header={<AIGenScreenHeader title={translations.headerTitle} onNavigationPress={handleBack} />}>
           <View style={{ flex: 1, padding: tokens.spacing.xl }}>
             <GenerationProgressContent
               progress={progress}
@@ -231,41 +98,24 @@ export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
 
     case AIGenerateStep.RESULT:
       return (
-        <ScreenLayout
-          header={
-            <AIGenScreenHeader
-              title={translations.headerTitle}
-              onNavigationPress={handleBack}
-            />
-          }
-        >
+        <ScreenLayout header={<AIGenScreenHeader title={translations.headerTitle} onNavigationPress={handleBack} />}>
           <AIGenerationResult
             successText={translations.successTitle}
-            primaryAction={{
-              label: translations.saveButton,
-              onPress: () => {},
-              icon: "download",
-            }}
+            primaryAction={{ label: translations.saveButton, onPress: () => {}, icon: "download" }}
             secondaryAction={{
               label: translations.tryAgainButton,
               onPress: () => setCurrentStep(AIGenerateStep.CONFIG),
               icon: "refresh",
             }}
           >
-            <Image
-              source={{ uri: result || "" }}
-              style={{ width: "100%", aspectRatio: 2 / 3, borderRadius: 16 }}
-              resizeMode="cover"
-            />
+            <Image source={{ uri: result || "" }} style={{ width: "100%", aspectRatio: 2 / 3, borderRadius: 16 }} resizeMode="cover" />
           </AIGenerationResult>
         </ScreenLayout>
       );
 
     default:
       return (
-        <AtomicKeyboardAvoidingView
-          offset={Platform.OS === "ios" ? 94 : 0}
-        >
+        <AtomicKeyboardAvoidingView offset={Platform.OS === "ios" ? 94 : 0}>
           <ScrollView
             style={{ backgroundColor: tokens.colors.backgroundPrimary }}
             contentContainerStyle={{ paddingBottom: 100 }}
@@ -328,17 +178,7 @@ export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
               onGenerate={handleGenerate}
               images={images}
               hideGenerateButton={true}
-              translations={{
-                presetsTitle: translations.presetsTitle,
-                showAdvancedLabel: translations.showAdvancedLabel,
-                hideAdvancedLabel: translations.hideAdvancedLabel,
-                promptTitle: translations.promptTitle,
-                promptPlaceholder: translations.promptPlaceholder,
-                styleTitle: translations.styleTitle,
-                durationTitle: translations.durationTitle,
-                generateButton: translations.generateButton,
-                generatingButton: translations.generatingButton,
-              }}
+              translations={translations}
             />
           </ScrollView>
         </AtomicKeyboardAvoidingView>

package/src/presentation/components/flows/AIGenerateWizardFlow.types.ts

@@ -0,0 +1,49 @@
+
+export interface AIGenerateWizardTranslations {
+  readonly headerTitle: string;
+  readonly uploadSubtitle: string;
+  readonly uploadSubtitle2: string;
+  readonly continue: string;
+  readonly tapToUpload: string;
+  readonly selectPhoto: string;
+  readonly change: string;
+  readonly analyzing: string;
+  readonly error: string;
+  readonly uploadFailed: string;
+  readonly aiDisclosure: string;
+  readonly heroTitle: string;
+  readonly heroSubtitle: string;
+  readonly presetsTitle: string;
+  readonly showAdvancedLabel: string;
+  readonly hideAdvancedLabel: string;
+  readonly promptTitle: string;
+  readonly promptPlaceholder: string;
+  readonly styleTitle: string;
+  readonly durationTitle: string;
+  readonly generateButton: string;
+  readonly generatingButton: string;
+  readonly processingTitle: string;
+  readonly processingMessage: string;
+  readonly processingHint: string;
+  readonly successTitle: string;
+  readonly saveButton: string;
+  readonly tryAgainButton: string;
+  readonly fileTooLarge: string;
+  readonly maxFileSize: string;
+}
+
+export interface AIGenerateWizardFlowProps {
+  readonly featureType: string;
+  readonly translations: AIGenerateWizardTranslations;
+  readonly styleOptions: any[];
+  readonly presets: any[];
+  readonly durationOptions: number[];
+  readonly onGenerate: (data: {
+    prompt: string;
+    style: string;
+    duration: number;
+    images: { uri: string }[];
+  }) => Promise<string | null>;
+  readonly onBack?: () => void;
+  readonly t: (key: string) => string;
+}

package/src/presentation/components/flows/useAIGenerateWizardFlow.ts

@@ -0,0 +1,103 @@
+
+import { useMemo, useCallback, useEffect } from "react";
+import { useAIGenerateState, AIGenerateStep } from "../../hooks/generation/useAIGenerateState";
+import { getAIFeatureConfig, hasAIFeature } from "../../screens/ai-feature/registry";
+
+interface UseAIGenerateWizardFlowProps {
+  featureType: string;
+  onGenerate: (data: any) => Promise<string | null>;
+  onBack?: () => void;
+}
+
+export function useAIGenerateWizardFlow({
+  featureType,
+  onGenerate,
+  onBack: onBackProp,
+}: UseAIGenerateWizardFlowProps) {
+  const state = useAIGenerateState();
+  const { 
+    currentStep, setCurrentStep, isGenerating, setIsGenerating, 
+    setProgress, setResult, images, prompt, selectedStyle, 
+    selectedDuration, setStepImage 
+  } = state;
+
+  const imageCountRequired = useMemo(() => {
+    if (!featureType || !hasAIFeature(featureType)) return 0;
+    const config = getAIFeatureConfig(featureType as any);
+    if (config.mode === "dual" || config.mode === "dual-video") return 2;
+    if (config.mode === "single" || config.mode === "single-with-prompt")
+      return 1;
+    return 0;
+  }, [featureType]);
+
+  useEffect(() => {
+    if (currentStep === AIGenerateStep.INFO) {
+      if (imageCountRequired > 0) {
+        setCurrentStep(AIGenerateStep.UPLOAD_1);
+      } else {
+        setCurrentStep(AIGenerateStep.CONFIG);
+      }
+    }
+  }, [featureType, imageCountRequired, setCurrentStep, currentStep]);
+
+  const handleBack = useCallback(() => {
+    if (currentStep === AIGenerateStep.UPLOAD_1) {
+      onBackProp?.();
+    } else if (currentStep === AIGenerateStep.UPLOAD_2) {
+      setCurrentStep(AIGenerateStep.UPLOAD_1);
+    } else if (currentStep === AIGenerateStep.CONFIG) {
+      if (imageCountRequired > 1) {
+        setCurrentStep(AIGenerateStep.UPLOAD_2);
+      } else if (imageCountRequired > 0) {
+        setCurrentStep(AIGenerateStep.UPLOAD_1);
+      } else {
+        onBackProp?.();
+      }
+    } else if (currentStep === AIGenerateStep.RESULT) {
+      setCurrentStep(AIGenerateStep.CONFIG);
+    }
+  }, [currentStep, setCurrentStep, imageCountRequired, onBackProp]);
+
+  const handleNext = useCallback(() => {
+    if (currentStep === AIGenerateStep.UPLOAD_1) {
+      if (imageCountRequired > 1) {
+        setCurrentStep(AIGenerateStep.UPLOAD_2);
+      } else {
+        setCurrentStep(AIGenerateStep.CONFIG);
+      }
+    } else if (currentStep === AIGenerateStep.UPLOAD_2) {
+      setCurrentStep(AIGenerateStep.CONFIG);
+    }
+  }, [currentStep, setCurrentStep, imageCountRequired]);
+
+  const handleGenerate = useCallback(async () => {
+    setIsGenerating(true);
+    setProgress(10);
+    setCurrentStep(AIGenerateStep.GENERATING);
+
+    try {
+      const output = await onGenerate({
+        prompt,
+        style: selectedStyle,
+        duration: selectedDuration,
+        images,
+      });
+      setResult(output);
+      setCurrentStep(AIGenerateStep.RESULT);
+    } catch (error) {
+      console.error("Generation failed", error);
+      setCurrentStep(AIGenerateStep.CONFIG);
+    } finally {
+      setIsGenerating(false);
+      setProgress(0);
+    }
+  }, [onGenerate, prompt, selectedStyle, selectedDuration, images, setCurrentStep, setIsGenerating, setProgress, setResult]);
+
+  return {
+    ...state,
+    imageCountRequired,
+    handleBack,
+    handleNext,
+    handleGenerate,
+  };
+}