@umituz/react-native-ai-generation-content 1.21.1 → 1.22.0

package/package.json

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

package/src/features/scenarios/domain/types.ts

@@ -14,18 +14,54 @@ export enum ScenarioCategory {
   CULTURAL = "cultural",
 }
 
+/**
+ * Output type for AI generation
+ */
+export type ScenarioOutputType = 'image' | 'video' | 'both';
+
+/**
+ * Scenario media configuration
+ */
+export interface ScenarioMedia {
+  readonly imageUrl?: string;          // Preview/thumbnail image
+  readonly videoUrl?: string;          // Preview video URL
+  readonly previewImageUrl?: string;   // Smaller thumbnail
+}
+
 export interface ScenarioData {
   readonly id: string;
   readonly category?: ScenarioCategory | string;
+
+  // Content (app provides in target language)
   readonly title: string;
   readonly description: string;
+
+  // AI Configuration
+  readonly outputType: ScenarioOutputType;    // What this scenario generates
+  readonly aiPrompt: string;                  // AI generation prompt
+  readonly storyTemplate?: string;            // Story template with placeholders (optional)
+
+  // Media
   readonly icon: string;
-  readonly imageUrl?: string;
-  readonly previewImageUrl?: string;
-  readonly aiPrompt: string;
-  readonly storyTemplate: string;
-  readonly requiresPhoto?: boolean;
-  readonly hidden?: boolean;
+  readonly imageUrl?: string;                 // Preview image
+  readonly videoUrl?: string;                 // Preview video
+  readonly previewImageUrl?: string;          // Thumbnail
+
+  // Requirements
+  readonly requiresPhoto?: boolean;           // Requires user photo upload
+  readonly requiresMultiplePhotos?: boolean;  // Requires multiple photos (e.g., couples)
+  readonly minPhotos?: number;                // Minimum photos required
+  readonly maxPhotos?: number;                // Maximum photos allowed
+
+  // Display
+  readonly hidden?: boolean;                  // Hide from UI
+  readonly featured?: boolean;                // Featured/promoted scenario
+  readonly order?: number;                    // Display order
+
+  // Metadata
+  readonly tags?: readonly string[];          // Search/filter tags
+  readonly duration?: number;                 // Video duration (for video scenarios)
+  readonly aspectRatio?: string;              // Output aspect ratio (e.g., "16:9", "9:16")
 }
 
 /**
@@ -33,8 +69,8 @@ export interface ScenarioData {
  */
 export interface ScenarioMainCategory {
   readonly id: string;
-  readonly titleKey: string;
-  readonly descriptionKey?: string;
+  readonly title: string;
+  readonly description?: string;
   readonly icon?: string;
   readonly emoji?: string;
   readonly order: number;
@@ -46,8 +82,8 @@ export interface ScenarioMainCategory {
  */
 export interface ScenarioSubCategory {
   readonly id: string;
-  readonly titleKey: string;
-  readonly descriptionKey?: string;
+  readonly title: string;
+  readonly description?: string;
   readonly icon?: string;
   readonly emoji?: string;
   readonly mainCategoryId: string;

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

@@ -4,7 +4,7 @@
  * Main Category → Sub Category → Scenario List
  */
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import type {
   ScenarioData,
   ScenarioMainCategory,
@@ -45,22 +45,61 @@ export const CategoryNavigationContainer: React.FC<
   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");
   }, []);
@@ -72,6 +111,11 @@ export const CategoryNavigationContainer: React.FC<
   }, [onBack]);
 
   if (currentStep === "main_category") {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Rendering MainCategoryScreen", {
+        mainCategoriesCount: mainCategories.length,
+      });
+    }
     return (
       <MainCategoryScreen
         mainCategories={mainCategories}
@@ -85,6 +129,12 @@ export const CategoryNavigationContainer: React.FC<
   }
 
   if (currentStep === "sub_category" && selectedMainCategoryId) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Rendering SubCategoryScreen", {
+        selectedMainCategoryId,
+        subCategoriesCount: subCategories.length,
+      });
+    }
     return (
       <SubCategoryScreen
         mainCategoryId={selectedMainCategoryId}
@@ -97,6 +147,12 @@ export const CategoryNavigationContainer: React.FC<
   }
 
   if (currentStep === "scenario_list" && selectedSubCategoryId) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CategoryNavigationContainer] Rendering HierarchicalScenarioListScreen", {
+        selectedSubCategoryId,
+        scenariosCount: scenarios.length,
+      });
+    }
     return (
       <HierarchicalScenarioListScreen
         subCategoryId={selectedSubCategoryId}
@@ -110,5 +166,13 @@ export const CategoryNavigationContainer: React.FC<
     );
   }
 
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[CategoryNavigationContainer] Rendering NULL - no matching condition", {
+      currentStep,
+      selectedMainCategoryId,
+      selectedSubCategoryId,
+    });
+  }
+
   return null;
 };

package/src/features/scenarios/presentation/screens/HierarchicalScenarioListScreen.tsx

@@ -4,7 +4,7 @@
  * PERFORMANCE OPTIMIZED: No FlatList key remounting, memoized calculations
  */
 
-import React, { useMemo, useCallback, useState } from "react";
+import React, { useMemo, useCallback, useState, useEffect } from "react";
 import {
   View,
   FlatList,
@@ -56,13 +56,44 @@ export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListSc
   );
 
   const filteredScenarios = useMemo(() => {
-    if (!subCategory) return [];
+    if (!subCategory) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[HierarchicalScenarioListScreen] No subCategory found", {
+          subCategoryId,
+          subCategoriesCount: subCategories.length,
+        });
+      }
+      return [];
+    }
 
-    return scenarios.filter((scenario) => {
+    const filtered = scenarios.filter((scenario) => {
       if (!scenario.category) return false;
       return subCategory.scenarioCategories.includes(scenario.category);
     });
-  }, [scenarios, subCategory]);
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[HierarchicalScenarioListScreen] Filtered scenarios", {
+        subCategoryId: subCategory.id,
+        scenarioCategories: subCategory.scenarioCategories,
+        totalScenarios: scenarios.length,
+        filteredCount: filtered.length,
+        sampleScenarioCategories: scenarios.slice(0, 5).map(s => s.category),
+      });
+    }
+
+    return filtered;
+  }, [scenarios, subCategory, subCategoryId, subCategories]);
+
+  // Debug: Monitor component state
+  useEffect(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[HierarchicalScenarioListScreen] Component state", {
+        subCategoryId,
+        hasSubCategory: !!subCategory,
+        filteredScenariosCount: filteredScenarios.length,
+      });
+    }
+  }, [subCategoryId, subCategory, filteredScenarios]);
 
   const horizontalPadding = tokens.spacing.md;
   const cardSpacing = tokens.spacing.md;
@@ -91,15 +122,13 @@ export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListSc
 
   const renderItem = useCallback(
     ({ item }: ListRenderItemInfo<ScenarioData>) => {
-      const title = t(`scenario.${item.id}.title`);
-      const description = t(`scenario.${item.id}.description`);
       const isSelected = selectedId === item.id;
 
       return (
         <AtomicCard
           image={item.previewImageUrl || item.imageUrl || ""}
-          title={title}
-          subtitle={description}
+          title={item.title}
+          subtitle={item.description}
           imageAspectRatio={1.25}
           selected={isSelected}
           style={{ width: cardWidth }}
@@ -108,7 +137,7 @@ export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListSc
         />
       );
     },
-    [cardWidth, selectedId, t, handleCardPress]
+    [cardWidth, selectedId, handleCardPress]
   );
 
   const ListEmptyComponent = useMemo(

package/src/features/scenarios/presentation/screens/MainCategoryScreen.tsx

@@ -3,7 +3,7 @@
  * Displays main categories for hierarchical scenario selection
  */
 
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useEffect } from "react";
 import {
   View,
   FlatList,
@@ -42,10 +42,22 @@ export const MainCategoryScreen: React.FC<MainCategoryScreenProps> = ({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
+  // Debug: Monitor component state
+  useEffect(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[MainCategoryScreen] Component mounted/updated", {
+        mainCategoriesCount: mainCategories.length,
+      });
+    }
+  }, [mainCategories]);
+
   const styles = useMemo(() => createStyles(tokens), [tokens]);
 
   const handleCategoryPress = useCallback(
     (categoryId: string) => {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[MainCategoryScreen] Category pressed", { categoryId });
+      }
       onSelectCategory(categoryId);
     },
     [onSelectCategory]
@@ -53,8 +65,8 @@ export const MainCategoryScreen: React.FC<MainCategoryScreenProps> = ({
 
   const renderItem = useCallback(
     ({ item }: ListRenderItemInfo<ScenarioMainCategory>) => {
-      const title = t(item.titleKey);
-      const description = item.descriptionKey ? t(item.descriptionKey) : "";
+      const title = item.title;
+      const description = item.description || "";
 
       return (
         <TouchableOpacity
@@ -109,7 +121,7 @@ export const MainCategoryScreen: React.FC<MainCategoryScreenProps> = ({
         </TouchableOpacity>
       );
     },
-    [t, tokens, styles, handleCategoryPress]
+    [tokens, styles, handleCategoryPress]
   );
 
   return (

package/src/features/scenarios/presentation/screens/SubCategoryScreen.tsx

@@ -3,7 +3,7 @@
  * Displays sub-categories for a selected main category
  */
 
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useEffect } from "react";
 import {
   View,
   FlatList,
@@ -44,15 +44,38 @@ export const SubCategoryScreen: React.FC<SubCategoryScreenProps> = ({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  const filteredSubCategories = useMemo(
-    () => subCategories.filter((sub) => sub.mainCategoryId === mainCategoryId),
-    [subCategories, mainCategoryId]
-  );
+  const filteredSubCategories = useMemo(() => {
+    const filtered = subCategories.filter((sub) => sub.mainCategoryId === mainCategoryId);
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[SubCategoryScreen] Filtered sub-categories", {
+        mainCategoryId,
+        totalSubCategories: subCategories.length,
+        filteredCount: filtered.length,
+        sampleMainCategoryIds: subCategories.slice(0, 5).map(s => s.mainCategoryId),
+      });
+    }
+
+    return filtered;
+  }, [subCategories, mainCategoryId]);
+
+  // Debug: Monitor component state
+  useEffect(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[SubCategoryScreen] Component mounted/updated", {
+        mainCategoryId,
+        filteredSubCategoriesCount: filteredSubCategories.length,
+      });
+    }
+  }, [mainCategoryId, filteredSubCategories]);
 
   const styles = useMemo(() => createStyles(tokens), [tokens]);
 
   const handleSubCategoryPress = useCallback(
     (subCategoryId: string) => {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[SubCategoryScreen] Sub-category pressed", { subCategoryId });
+      }
       onSelectSubCategory(subCategoryId);
     },
     [onSelectSubCategory]
@@ -60,8 +83,8 @@ export const SubCategoryScreen: React.FC<SubCategoryScreenProps> = ({
 
   const renderItem = useCallback(
     ({ item }: ListRenderItemInfo<ScenarioSubCategory>) => {
-      const title = t(item.titleKey);
-      const description = item.descriptionKey ? t(item.descriptionKey) : "";
+      const title = item.title;
+      const description = item.description || "";
 
       return (
         <TouchableOpacity
@@ -116,7 +139,7 @@ export const SubCategoryScreen: React.FC<SubCategoryScreenProps> = ({
         </TouchableOpacity>
       );
     },
-    [t, tokens, styles, handleSubCategoryPress]
+    [tokens, styles, handleSubCategoryPress]
   );
 
   return (