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

package/package.json

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

package/src/domains/generation/wizard/index.ts

@@ -42,3 +42,10 @@ export type {
   WizardScenarioData,
   WizardOutputType,
 } from "./presentation/hooks/useWizardGeneration";
+
+// Presentation - Components
+export { GenericWizardFlow } from "./presentation/components";
+export type { GenericWizardFlowProps } from "./presentation/components";
+
+// Presentation - Screens
+export { GeneratingScreen } from "./presentation/screens";

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

@@ -0,0 +1,293 @@
+/**
+ * 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, type StepDefinition } from "../../../../../domain/entities/flow-config.types";
+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
+  // Note: Hook is used for its side effects (automatic generation)
+  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:
+        // Other step types should be handled by custom render props
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.warn("[GenericWizardFlow] Unhandled step type", { stepType: step.type });
+        }
+        return null;
+    }
+  }, [
+    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/components/index.ts

@@ -0,0 +1,2 @@
+export { GenericWizardFlow } from "./GenericWizardFlow";
+export type { GenericWizardFlowProps } from "./GenericWizardFlow";

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

@@ -0,0 +1,123 @@
+/**
+ * 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: _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="headlineMedium" style={styles.title}>
+          {t("generator.title")}
+        </AtomicText>
+
+        <AtomicText type="bodyMedium" 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="bodySmall" style={[styles.progressText, { color: tokens.colors.textSecondary }]}>
+            {Math.round(progress)}%
+          </AtomicText>
+        </View>
+
+        {/* Scenario Info */}
+        {scenario && (
+          <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
+            {scenario.title || scenario.id}
+          </AtomicText>
+        )}
+
+        {/* Hint */}
+        <AtomicText type="bodySmall" 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/index.ts

@@ -0,0 +1 @@
+export { GeneratingScreen } from "./GeneratingScreen";

package/src/domains/scenarios/domain/scenario.types.ts

@@ -84,3 +84,42 @@ export interface ScenarioSelection {
   readonly mainCategory: MainCategory;
   readonly subCategory: SubCategory;
 }
+
+/**
+ * Legacy types for presentation components (backward compatibility)
+ * Used by CategoryNavigationContainer and related screens
+ */
+export interface ScenarioMainCategory {
+  readonly id: string;
+  readonly titleKey: string;
+  readonly descriptionKey?: string;
+  readonly icon?: string;
+  readonly emoji?: string;
+  readonly order: number;
+  readonly subCategoryIds: readonly string[];
+}
+
+export interface ScenarioSubCategory {
+  readonly id: string;
+  readonly titleKey: string;
+  readonly descriptionKey?: string;
+  readonly icon?: string;
+  readonly emoji?: string;
+  readonly mainCategoryId: string;
+  readonly scenarioCategories: readonly string[];
+  readonly order: number;
+}
+
+export interface ScenarioData {
+  readonly id: string;
+  readonly category?: string;
+  readonly title: string;
+  readonly description: string;
+  readonly icon: string;
+  readonly imageUrl?: string;
+  readonly previewImageUrl?: string;
+  readonly aiPrompt: string;
+  readonly storyTemplate: string;
+  readonly requiresPhoto?: boolean;
+  readonly hidden?: boolean;
+}

package/src/domains/scenarios/index.ts

@@ -25,3 +25,26 @@ export {
 } from "./configs/wizard-configs";
 
 export type { WizardConfigOptions } from "./configs/wizard-configs";
+
+// Presentation - Containers
+export { CategoryNavigationContainer } from "./presentation/containers";
+export type { CategoryNavigationContainerProps } from "./presentation/containers";
+
+// Presentation - Screens
+export {
+  ScenarioPreviewScreen,
+  MainCategoryScreen,
+  SubCategoryScreen,
+  HierarchicalScenarioListScreen,
+} from "./presentation/screens";
+export type {
+  MainCategoryScreenProps,
+  SubCategoryScreenProps,
+} from "./presentation/screens";
+
+// Legacy types (backward compatibility)
+export type {
+  ScenarioMainCategory,
+  ScenarioSubCategory,
+  ScenarioData,
+} from "./domain/scenario.types";

package/src/domains/scenarios/presentation/containers/CategoryNavigationContainer.tsx

@@ -0,0 +1,178 @@
+/**
+ * CategoryNavigationContainer
+ * Orchestrates 3-step hierarchical scenario selection flow:
+ * Main Category → Sub Category → Scenario List
+ */
+
+import React, { useState, useCallback, useEffect } from "react";
+import type {
+  ScenarioData,
+  ScenarioMainCategory,
+  ScenarioSubCategory,
+} from "../../domain/scenario.types";
+import { MainCategoryScreen } from "../screens/MainCategoryScreen";
+import { SubCategoryScreen } from "../screens/SubCategoryScreen";
+import { HierarchicalScenarioListScreen } from "../screens/HierarchicalScenarioListScreen";
+
+type NavigationStep = "main_category" | "sub_category" | "scenario_list";
+
+export interface CategoryNavigationContainerProps {
+  readonly mainCategories: readonly ScenarioMainCategory[];
+  readonly subCategories: readonly ScenarioSubCategory[];
+  readonly scenarios: readonly ScenarioData[];
+  readonly onSelectScenario: (scenarioId: string) => void;
+  readonly onBack?: () => void;
+  readonly t: (key: string) => string;
+  readonly headerTitle?: string;
+  readonly headerDescription?: string;
+  readonly numColumns?: number;
+}
+
+export const CategoryNavigationContainer: React.FC<
+  CategoryNavigationContainerProps
+> = ({
+  mainCategories,
+  subCategories,
+  scenarios,
+  onSelectScenario,
+  onBack,
+  t,
+  headerTitle,
+  headerDescription,
+  numColumns = 2,
+}) => {
+  const [currentStep, setCurrentStep] = useState<NavigationStep>("main_category");
+  const [selectedMainCategoryId, setSelectedMainCategoryId] = useState<string | null>(null);
+  const [selectedSubCategoryId, setSelectedSubCategoryId] = useState<string | null>(null);
+
+  // Debug: Initial mount
+  useEffect(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Mounted", {
+        mainCategoriesCount: mainCategories.length,
+        subCategoriesCount: subCategories.length,
+        scenariosCount: scenarios.length,
+        currentStep,
+      });
+    }
+  }, []);
+
+  // Debug: Step changes
+  useEffect(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Step changed", {
+        currentStep,
+        selectedMainCategoryId,
+        selectedSubCategoryId,
+      });
+    }
+  }, [currentStep, selectedMainCategoryId, selectedSubCategoryId]);
+
+  const handleSelectMainCategory = useCallback((categoryId: string) => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Main category selected", {
+        categoryId,
+      });
+    }
+    setSelectedMainCategoryId(categoryId);
+    setCurrentStep("sub_category");
+  }, []);
+
+  const handleSelectSubCategory = useCallback((subCategoryId: string) => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Sub category selected", {
+        subCategoryId,
+      });
+    }
+    setSelectedSubCategoryId(subCategoryId);
+    setCurrentStep("scenario_list");
+  }, []);
+
+  const handleBackFromSubCategory = useCallback(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Back from sub category");
+    }
+    setSelectedMainCategoryId(null);
+    setCurrentStep("main_category");
+  }, []);
+
+  const handleBackFromScenarioList = useCallback(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Back from scenario list");
+    }
+    setSelectedSubCategoryId(null);
+    setCurrentStep("sub_category");
+  }, []);
+
+  const handleBackFromMainCategory = useCallback(() => {
+    if (onBack) {
+      onBack();
+    }
+  }, [onBack]);
+
+  if (currentStep === "main_category") {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Rendering MainCategoryScreen", {
+        mainCategoriesCount: mainCategories.length,
+      });
+    }
+    return (
+      <MainCategoryScreen
+        mainCategories={mainCategories}
+        onSelectCategory={handleSelectMainCategory}
+        onBack={onBack ? handleBackFromMainCategory : undefined}
+        t={t}
+        headerTitle={headerTitle}
+        headerDescription={headerDescription}
+      />
+    );
+  }
+
+  if (currentStep === "sub_category" && selectedMainCategoryId) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Rendering SubCategoryScreen", {
+        selectedMainCategoryId,
+        subCategoriesCount: subCategories.length,
+      });
+    }
+    return (
+      <SubCategoryScreen
+        mainCategoryId={selectedMainCategoryId}
+        subCategories={subCategories}
+        onSelectSubCategory={handleSelectSubCategory}
+        onBack={handleBackFromSubCategory}
+        t={t}
+      />
+    );
+  }
+
+  if (currentStep === "scenario_list" && selectedSubCategoryId) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Rendering HierarchicalScenarioListScreen", {
+        selectedSubCategoryId,
+        scenariosCount: scenarios.length,
+      });
+    }
+    return (
+      <HierarchicalScenarioListScreen
+        subCategoryId={selectedSubCategoryId}
+        subCategories={subCategories}
+        scenarios={scenarios}
+        onSelectScenario={onSelectScenario}
+        onBack={handleBackFromScenarioList}
+        t={t}
+        numColumns={numColumns}
+      />
+    );
+  }
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[CategoryNavigationContainer] Rendering NULL - no matching condition", {
+      currentStep,
+      selectedMainCategoryId,
+      selectedSubCategoryId,
+    });
+  }
+
+  return null;
+};

package/src/domains/scenarios/presentation/containers/index.ts

@@ -0,0 +1,2 @@
+export { CategoryNavigationContainer } from "./CategoryNavigationContainer";
+export type { CategoryNavigationContainerProps } from "./CategoryNavigationContainer";