@umituz/react-native-ai-generation-content 1.21.0 → 1.21.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.21.0",
+  "version": "1.21.2",
   "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/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;

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]
@@ -121,7 +133,7 @@ export const MainCategoryScreen: React.FC<MainCategoryScreenProps> = ({
       <AIGenScreenHeader
         title={headerTitle || t("scenario.main_category.title")}
         description={headerDescription || t("scenario.main_category.subtitle")}
-        onBack={onBack}
+        onNavigationPress={onBack}
       />
       <FlatList
         data={mainCategories}

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]
@@ -128,7 +151,7 @@ export const SubCategoryScreen: React.FC<SubCategoryScreenProps> = ({
       <AIGenScreenHeader
         title={headerTitleKey ? t(headerTitleKey) : t("scenario.sub_category.title")}
         description={headerDescriptionKey ? t(headerDescriptionKey) : t("scenario.sub_category.subtitle")}
-        onBack={onBack}
+        onNavigationPress={onBack}
       />
       <FlatList
         data={filteredSubCategories}