@umituz/react-native-ai-generation-content 1.26.7 → 1.26.9

package/src/domains/generation/wizard/presentation/components/GenericWizardFlow.tsx

@@ -1,297 +0,0 @@
-/**
- * Generic Wizard Flow Component
- * ONE wizard to rule them all!
- *
- * Works for:
- * - Couple features (romantic-kiss, ai-hug, etc.)
- * - Face swap
- * - Image-to-video
- * - Text-to-video
- * - ANY future feature!
- *
- * NO feature-specific code here - everything driven by configuration!
- */
-
-import React, { useMemo, useCallback, useEffect, useRef } from "react";
-import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { useFlow } from "../../../../infrastructure/flow/useFlow";
-import { StepType } from "../../../../domain/entities/flow-config.types";
-import type { StepDefinition } from "../../../../domain/entities/flow-config.types";
-import { renderStep } from "../../infrastructure/renderers/step-renderer";
-import type { WizardFeatureConfig } from "../../domain/entities/wizard-config.types";
-import { buildFlowStepsFromWizard } from "../../infrastructure/builders/dynamic-step-builder";
-import { useWizardGeneration, type WizardScenarioData } from "../hooks/useWizardGeneration";
-import type { AlertMessages } from "../../../../presentation/hooks/generation/types";
-
-export interface GenericWizardFlowProps {
-  readonly featureConfig: WizardFeatureConfig;
-  readonly scenario?: WizardScenarioData;
-  readonly userId?: string;
-  readonly alertMessages?: AlertMessages;
-  readonly onStepChange?: (stepId: string, stepType: StepType | string) => void;
-  readonly onGenerationStart?: (data: Record<string, unknown>, proceedToGenerating: () => void) => void;
-  readonly onGenerationComplete?: (result: unknown) => void;
-  readonly onGenerationError?: (error: string) => void;
-  readonly onCreditsExhausted?: () => void;
-  readonly onBack?: () => void;
-  readonly t: (key: string) => string;
-  readonly translations?: Record<string, string>;
-  readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
-  readonly renderGenerating?: (progress: number) => React.ReactElement | null;
-  readonly renderResult?: (result: unknown) => React.ReactElement | null;
-}
-
-export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
-  featureConfig,
-  scenario,
-  userId,
-  alertMessages,
-  onStepChange,
-  onGenerationStart,
-  onGenerationComplete,
-  onGenerationError,
-  onCreditsExhausted,
-  onBack,
-  t,
-  translations,
-  renderPreview,
-  renderGenerating,
-  renderResult,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Build flow steps from wizard config
-  const flowSteps = useMemo<StepDefinition[]>(() => {
-    return buildFlowStepsFromWizard(featureConfig, {
-      includePreview: !!renderPreview,
-      includeGenerating: !!renderGenerating,
-    });
-  }, [featureConfig, renderPreview, renderGenerating]);
-
-  // Initialize flow and destructure to prevent infinite loops
-  const flow = useFlow({
-    steps: flowSteps,
-    initialStepIndex: 0,
-  });
-
-  // Destructure flow to get stable references for useCallback dependencies
-  const {
-    currentStep,
-    currentStepIndex,
-    customData,
-    generationProgress,
-    generationResult,
-    nextStep,
-    previousStep,
-    setCustomData,
-    updateProgress,
-  } = flow;
-
-  // Handle progress change - memoized to prevent infinite loops
-  const handleProgressChange = useCallback(
-    (progress: number) => {
-      updateProgress(progress);
-    },
-    [updateProgress],
-  );
-
-  // Ensure scenario has required fields - use feature config as fallback
-  const validatedScenario = useMemo(() => {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[GenericWizardFlow] Validating scenario", {
-        hasScenario: !!scenario,
-        scenarioId: scenario?.id,
-        hasAiPrompt: scenario?.aiPrompt !== undefined,
-        hasModel: !!scenario?.model,
-        scenarioModel: scenario?.model,
-        outputType: scenario?.outputType,
-      });
-    }
-
-    if (scenario && scenario.id && scenario.aiPrompt !== undefined) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[GenericWizardFlow] Scenario validation passed", {
-          scenarioId: scenario.id,
-          model: scenario.model,
-          outputType: scenario.outputType,
-        });
-      }
-      return scenario;
-    }
-
-    // Fallback to feature config
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.warn("[GenericWizardFlow] Scenario missing required fields, using fallback", {
-        hasScenario: !!scenario,
-        scenarioId: scenario?.id,
-        featureConfigId: featureConfig.id,
-      });
-    }
-
-    return {
-      id: featureConfig.id,
-      aiPrompt: "",
-      outputType: "image" as const, // Default to image for safety
-      title: featureConfig.id,
-    };
-  }, [scenario, featureConfig.id]);
-
-  // Generation hook - handles AI generation automatically
-  const generationHook = useWizardGeneration({
-    scenario: validatedScenario,
-    wizardData: customData,
-    userId,
-    isGeneratingStep: currentStep?.type === StepType.GENERATING,
-    alertMessages,
-    onSuccess: onGenerationComplete,
-    onError: onGenerationError,
-    onProgressChange: handleProgressChange,
-    onCreditsExhausted,
-  });
-
-  // Track previous step ID to prevent infinite loops
-  const prevStepIdRef = useRef<string | undefined>(undefined);
-
-  // DEBUG logging
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.log("[GenericWizardFlow] Render", {
-      featureId: featureConfig.id,
-      currentStepId: currentStep?.id,
-      currentStepType: currentStep?.type,
-      stepIndex: currentStepIndex,
-      totalSteps: flowSteps.length,
-    });
-  }
-
-  // Notify parent when step changes
-  // Only call onStepChange when step ID actually changes (not on every object reference change)
-  useEffect(() => {
-    if (currentStep && onStepChange) {
-      const currentStepId = currentStep.id;
-      // Only notify if step ID changed
-      if (prevStepIdRef.current !== currentStepId) {
-        prevStepIdRef.current = currentStepId;
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.log("[GenericWizardFlow] Step changed", {
-            stepId: currentStep.id,
-            stepType: currentStep.type,
-          });
-        }
-        onStepChange(currentStep.id, currentStep.type);
-      }
-    }
-  }, [currentStep, currentStepIndex, onStepChange]);
-
-  // Handle step continue
-  const handleStepContinue = useCallback(
-    (stepData: Record<string, unknown>) => {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[GenericWizardFlow] Step continue", {
-          stepId: currentStep?.id,
-          data: stepData,
-        });
-      }
-
-      // Store step data in custom data
-      Object.entries(stepData).forEach(([key, value]) => {
-        setCustomData(key, value);
-      });
-
-      // Check if this is the last step before generating
-      if (currentStepIndex === flowSteps.length - 2) {
-        // Next step is GENERATING
-        // Notify parent and provide callback to proceed to generating
-        // Parent will call proceedToGenerating() after feature gate passes
-        if (onGenerationStart) {
-          onGenerationStart(customData, () => {
-            if (typeof __DEV__ !== "undefined" && __DEV__) {
-              console.log("[GenericWizardFlow] Proceeding to GENERATING step");
-            }
-            nextStep();
-          });
-        }
-        // DON'T call nextStep() here - parent will call it via proceedToGenerating callback
-        return;
-      }
-
-      // Move to next step (for all non-generation steps)
-      nextStep();
-    },
-    [currentStep, currentStepIndex, customData, setCustomData, nextStep, flowSteps.length, onGenerationStart],
-  );
-
-  // Handle back
-  const handleBack = useCallback(() => {
-    if (currentStepIndex === 0) {
-      onBack?.();
-    } else {
-      previousStep();
-    }
-  }, [currentStepIndex, previousStep, onBack]);
-
-  // Render current step
-  const renderCurrentStep = useCallback(() => {
-    const step = currentStep;
-    if (!step) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.warn("[GenericWizardFlow] No current step!");
-      }
-      return null;
-    }
-
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[GenericWizardFlow] Rendering step", {
-        stepId: step.id,
-        stepType: step.type,
-      });
-    }
-
-    // Special steps with custom renderers
-    switch (step.type) {
-      case StepType.SCENARIO_PREVIEW:
-        // Preview continues to next step automatically
-        return renderPreview?.(nextStep) || null;
-
-      case StepType.GENERATING:
-        return renderGenerating?.(generationProgress) || null;
-
-      case StepType.RESULT_PREVIEW:
-        return renderResult?.(generationResult) || null;
-
-      default:
-        // Use generic step renderer
-        return renderStep({
-          step,
-          onContinue: handleStepContinue,
-          onBack: handleBack,
-          t,
-          translations,
-        });
-    }
-  }, [
-    currentStep,
-    generationProgress,
-    generationResult,
-    nextStep,
-    renderPreview,
-    renderGenerating,
-    renderResult,
-    handleStepContinue,
-    handleBack,
-    t,
-    translations,
-  ]);
-
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      {renderCurrentStep()}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

package/src/domains/generation/wizard/presentation/screens/GeneratingScreen.tsx

@@ -1,123 +0,0 @@
-/**
- * Generic Generating Screen
- * Shows progress while AI generates content
- * Used by ALL features - NO feature-specific code!
- */
-
-import React from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-
-export interface GeneratingScreenProps {
-  readonly progress: number;
-  readonly scenario?: {
-    readonly id: string;
-    readonly title?: string;
-  };
-  readonly t: (key: string) => string;
-  readonly onCancel?: () => void;
-}
-
-export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
-  progress,
-  scenario,
-  t,
-  onCancel,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.log("[GeneratingScreen] Rendering", {
-      progress,
-      scenarioId: scenario?.id,
-    });
-  }
-
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <View style={styles.content}>
-        <ActivityIndicator size="large" color={tokens.colors.primary} />
-
-        <AtomicText type="heading2" style={styles.title}>
-          {t("generator.title")}
-        </AtomicText>
-
-        <AtomicText type="body" style={[styles.message, { color: tokens.colors.textSecondary }]}>
-          {t("generator.waitMessage")}
-        </AtomicText>
-
-        {/* Progress Bar */}
-        <View style={styles.progressContainer}>
-          <View style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceVariant }]}>
-            <View
-              style={[
-                styles.progressFill,
-                {
-                  backgroundColor: tokens.colors.primary,
-                  width: `${Math.min(100, Math.max(0, progress))}%`,
-                },
-              ]}
-            />
-          </View>
-          <AtomicText type="caption" style={[styles.progressText, { color: tokens.colors.textSecondary }]}>
-            {Math.round(progress)}%
-          </AtomicText>
-        </View>
-
-        {/* Scenario Info */}
-        {scenario && (
-          <AtomicText type="caption" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
-            {scenario.title || scenario.id}
-          </AtomicText>
-        )}
-
-        {/* Hint */}
-        <AtomicText type="caption" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
-          {t("generator.hint")}
-        </AtomicText>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  content: {
-    width: "80%",
-    maxWidth: 400,
-    alignItems: "center",
-    gap: 16,
-  },
-  title: {
-    textAlign: "center",
-    marginTop: 24,
-  },
-  message: {
-    textAlign: "center",
-  },
-  progressContainer: {
-    width: "100%",
-    marginTop: 24,
-    gap: 8,
-  },
-  progressBar: {
-    height: 8,
-    borderRadius: 4,
-    overflow: "hidden",
-  },
-  progressFill: {
-    height: "100%",
-    borderRadius: 4,
-  },
-  progressText: {
-    textAlign: "center",
-  },
-  hint: {
-    textAlign: "center",
-    marginTop: 8,
-  },
-});

package/src/domains/generation/wizard/presentation/screens/GenericPhotoUploadScreen.tsx

@@ -1,222 +0,0 @@
-/**
- * Generic Photo Upload Screen
- * Used by wizard domain for ANY photo upload step
- * NO feature-specific concepts (no partner, couple, etc.)
- * Works for: couple features, face-swap, image-to-video, ANY photo upload need
- */
-
-import React, { useMemo } from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  useAppDesignTokens,
-  ScreenLayout,
-  AtomicText,
-  AtomicIcon,
-  NavigationHeader,
-  type DesignTokens,
-} from "@umituz/react-native-design-system";
-import { PhotoUploadCard } from "../../../../presentation/components";
-import { FaceDetectionToggle } from "../../../../domains/face-detection";
-import { PhotoTips } from "../../../../features/partner-upload/presentation/components/PhotoTips";
-import type { UploadedImage } from "../../../../features/partner-upload/domain/types";
-import { usePhotoUploadState } from "../hooks/usePhotoUploadState";
-
-export interface PhotoUploadScreenTranslations {
-  readonly title: string;
-  readonly subtitle: string;
-  readonly continue: string;
-  readonly tapToUpload: string;
-  readonly selectPhoto: string;
-  readonly change: string;
-  readonly analyzing: string;
-  readonly fileTooLarge: string;
-  readonly maxFileSize: string;
-  readonly error: string;
-  readonly uploadFailed: string;
-  readonly aiDisclosure?: string;
-}
-
-export interface PhotoUploadScreenConfig {
-  readonly showFaceDetection?: boolean;
-  readonly showPhotoTips?: boolean;
-  readonly maxFileSizeMB?: number;
-}
-
-export interface PhotoUploadScreenProps {
-  readonly translations: PhotoUploadScreenTranslations;
-  readonly t: (key: string) => string;
-  readonly config?: PhotoUploadScreenConfig;
-  readonly faceDetectionEnabled?: boolean;
-  readonly onFaceDetectionToggle?: (enabled: boolean) => void;
-  readonly onBack: () => void;
-  readonly onContinue: (image: UploadedImage) => void;
-}
-
-const DEFAULT_CONFIG: PhotoUploadScreenConfig = {
-  showFaceDetection: false,
-  showPhotoTips: true,
-  maxFileSizeMB: 10,
-};
-
-export const GenericPhotoUploadScreen: React.FC<PhotoUploadScreenProps> = ({
-  translations,
-  t,
-  config = DEFAULT_CONFIG,
-  faceDetectionEnabled = false,
-  onFaceDetectionToggle,
-  onBack,
-  onContinue,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const { image, handlePickImage, canContinue } = usePhotoUploadState({
-    config: { maxFileSizeMB: config.maxFileSizeMB },
-    translations: {
-      fileTooLarge: translations.fileTooLarge,
-      maxFileSize: translations.maxFileSize,
-      error: translations.error,
-      uploadFailed: translations.uploadFailed,
-    },
-  });
-
-  const handleContinuePress = () => {
-    if (!canContinue || !image) return;
-    onContinue(image);
-  };
-
-  const styles = useMemo(() => createStyles(tokens), [tokens]);
-  const showFaceDetection = config.showFaceDetection ?? false;
-  const showPhotoTips = config.showPhotoTips ?? true;
-
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <NavigationHeader
-        title={translations.title}
-        onBackPress={onBack}
-        rightElement={
-          <TouchableOpacity
-            onPress={handleContinuePress}
-            activeOpacity={0.7}
-            disabled={!canContinue || !image}
-            style={[
-              styles.continueButton,
-              {
-                backgroundColor: canContinue && image ? tokens.colors.primary : tokens.colors.surfaceVariant,
-                opacity: canContinue && image ? 1 : 0.5,
-              },
-            ]}
-          >
-            <AtomicText
-              type="bodyMedium"
-              style={[
-                styles.continueText,
-                { color: canContinue && image ? tokens.colors.onPrimary : tokens.colors.textSecondary },
-              ]}
-            >
-              {translations.continue}
-            </AtomicText>
-            <AtomicIcon
-              name="arrow-forward"
-              size="sm"
-              color={canContinue && image ? "onPrimary" : "textSecondary"}
-            />
-          </TouchableOpacity>
-        }
-      />
-      <ScreenLayout
-        edges={["left", "right"]}
-        backgroundColor="transparent"
-        scrollable={true}
-        keyboardAvoiding={true}
-        contentContainerStyle={styles.scrollContent}
-        hideScrollIndicator={true}
-      >
-        <AtomicText style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
-          {translations.subtitle}
-        </AtomicText>
-
-        {/* Photo Tips - InfoGrid version */}
-        {showPhotoTips && (
-          <PhotoTips
-            t={t}
-            titleKey="photoUpload.tips.title"
-            headerIcon="bulb"
-            style={{ marginHorizontal: 24, marginBottom: 20 }}
-          />
-        )}
-
-        {showFaceDetection && onFaceDetectionToggle && (
-          <FaceDetectionToggle
-            isEnabled={faceDetectionEnabled}
-            onToggle={onFaceDetectionToggle}
-            label={t("photoUpload.faceDetection")}
-            hidden={true}
-          />
-        )}
-
-        <PhotoUploadCard
-          imageUri={image?.previewUrl || null}
-          onPress={handlePickImage}
-          isValidating={false}
-          isValid={null}
-          translations={{
-            tapToUpload: translations.tapToUpload,
-            selectPhoto: translations.selectPhoto,
-            change: translations.change,
-            analyzing: translations.analyzing,
-          }}
-        />
-
-        {translations.aiDisclosure && (
-          <View style={styles.disclosureContainer}>
-            <AtomicText
-              type="labelSmall"
-              style={[styles.disclosureText, { color: tokens.colors.textSecondary }]}
-            >
-              {translations.aiDisclosure}
-            </AtomicText>
-          </View>
-        )}
-      </ScreenLayout>
-    </View>
-  );
-};
-
-const createStyles = (tokens: DesignTokens) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    scrollContent: {
-      paddingBottom: 40,
-    },
-    subtitle: {
-      fontSize: 16,
-      textAlign: "center",
-      marginHorizontal: 24,
-      marginBottom: 24,
-    },
-    continueButton: {
-      flexDirection: "row",
-      alignItems: "center",
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.xs,
-      borderRadius: tokens.borders.radius.full,
-    },
-    continueText: {
-      fontWeight: "800",
-      marginRight: 4,
-    },
-    disclosureContainer: {
-      marginTop: 24,
-      marginHorizontal: 24,
-      padding: 16,
-      borderRadius: 12,
-      backgroundColor: tokens.colors.surfaceVariant + "40",
-    },
-    disclosureText: {
-      textAlign: "center",
-      lineHeight: 18,
-      opacity: 0.8,
-    },
-  });

package/src/domains/generation/wizard/presentation/steps/PhotoUploadStep.tsx

@@ -1,66 +0,0 @@
-/**
- * Generic Photo Upload Step
- * Used by ALL features that need photo uploads
- * (couple, face-swap, image-to-video, etc.)
- */
-
-import React from "react";
-import type { PhotoUploadStepConfig } from "../../domain/entities/wizard-config.types";
-
-// Use wizard domain's generic photo upload screen - NO feature-specific references!
-import { GenericPhotoUploadScreen } from "../screens/GenericPhotoUploadScreen";
-import type { UploadedImage } from "../../../../features/partner-upload/domain/types";
-
-export interface PhotoUploadStepProps {
-  readonly config: PhotoUploadStepConfig;
-  readonly onContinue: (image: UploadedImage) => void;
-  readonly onBack: () => void;
-  readonly t: (key: string) => string;
-  readonly translations?: Record<string, string>;
-}
-
-export const PhotoUploadStep: React.FC<PhotoUploadStepProps> = ({
-  config,
-  onContinue,
-  onBack,
-  t,
-  translations,
-}) => {
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.log("[PhotoUploadStep] Rendering", {
-      stepId: config.id,
-      label: config.label,
-    });
-  }
-
-  return (
-    <GenericPhotoUploadScreen
-      translations={{
-        title: config.titleKey ? t(config.titleKey) : config.label || "Upload Photo",
-        subtitle: config.subtitleKey ? t(config.subtitleKey) : t("photoUpload.subtitle"),
-        continue: t("common.continue"),
-        tapToUpload: t("photoUpload.tapToUpload"),
-        selectPhoto: t("photoUpload.selectPhoto"),
-        change: t("common.change"),
-        analyzing: t("photoUpload.analyzing"),
-        fileTooLarge: t("common.errors.file_too_large"),
-        maxFileSize: t("common.errors.max_file_size"),
-        error: t("common.error"),
-        uploadFailed: t("common.errors.upload_failed"),
-      }}
-      t={t}
-      config={{
-        showFaceDetection: config.showFaceDetection ?? false,
-        showPhotoTips: config.showPhotoTips ?? true,
-        maxFileSizeMB: config.maxFileSizeMB ?? 10,
-      }}
-      onBack={onBack}
-      onContinue={(image) => {
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.log("[PhotoUploadStep] Photo uploaded", { stepId: config.id });
-        }
-        onContinue(image);
-      }}
-    />
-  );
-};