@umituz/react-native-ai-generation-content 1.26.10 → 1.26.12

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

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

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

@@ -0,0 +1,291 @@
+/**
+ * HierarchicalScenarioListScreen
+ * Displays scenarios filtered by sub-category with optimized performance
+ * PERFORMANCE OPTIMIZED: No FlatList key remounting, memoized calculations
+ */
+
+import React, { useMemo, useCallback, useState, useEffect } from "react";
+import {
+  View,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  type ListRenderItemInfo,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicCard,
+  useAppDesignTokens,
+  useResponsive,
+  ScreenLayout,
+  NavigationHeader,
+  AtomicIcon,
+  AtomicSpinner,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { ScenarioData, ScenarioSubCategory } from "../../domain/scenario.types";
+
+export interface HierarchicalScenarioListScreenProps {
+  readonly subCategoryId: string;
+  readonly subCategories: readonly ScenarioSubCategory[];
+  readonly scenarios: readonly ScenarioData[];
+  readonly onSelectScenario: (scenarioId: string) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly numColumns?: number;
+  readonly isLoading?: boolean;
+}
+
+export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListScreenProps> = ({
+  subCategoryId,
+  subCategories,
+  scenarios,
+  onSelectScenario,
+  onBack,
+  t,
+  numColumns = 2,
+  isLoading = false,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+  const { width } = useResponsive();
+
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const subCategory = useMemo(
+    () => subCategories.find((sub) => sub.id === subCategoryId),
+    [subCategories, subCategoryId]
+  );
+
+  const filteredScenarios = useMemo(() => {
+    if (!subCategory) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[HierarchicalScenarioListScreen] No subCategory found", {
+          subCategoryId,
+          subCategoriesCount: subCategories.length,
+        });
+      }
+      return [];
+    }
+
+    const filtered = scenarios.filter((scenario) => {
+      if (!scenario.category) return false;
+      return subCategory.scenarioCategories?.includes(scenario.category) ?? false;
+    });
+
+    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;
+
+  // Calculate card width once - memoized to prevent unnecessary recalculations
+  const cardWidth = useMemo(() => {
+    const availableWidth = width - horizontalPadding * 2 - cardSpacing;
+    return availableWidth / numColumns;
+  }, [width, horizontalPadding, cardSpacing, numColumns]);
+
+  const styles = useMemo(
+    () => createStyles(tokens, cardSpacing, horizontalPadding),
+    [tokens, cardSpacing, horizontalPadding]
+  );
+
+  const handleContinue = useCallback(() => {
+    if (selectedId) {
+      onSelectScenario(selectedId);
+    }
+  }, [selectedId, onSelectScenario]);
+
+  // Memoized callback for card selection - prevents inline arrow functions
+  const handleCardPress = useCallback((itemId: string) => {
+    setSelectedId(itemId);
+  }, []);
+
+  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}
+          imageAspectRatio={1.25}
+          selected={isSelected}
+          style={{ width: cardWidth }}
+          onPress={() => handleCardPress(item.id)}
+          testID={`scenario-card-${item.id}`}
+        />
+      );
+    },
+    [cardWidth, selectedId, t, handleCardPress]
+  );
+
+  const ListEmptyComponent = useMemo(
+    () => (
+      <View style={styles.emptyState}>
+        <AtomicText type="bodyLarge" color="textSecondary">
+          {t("scenario.list.empty")}
+        </AtomicText>
+      </View>
+    ),
+    [t, styles.emptyState]
+  );
+  
+  const LoadingComponent = useMemo(
+    () => (
+      <View style={styles.loadingContainer}>
+        <AtomicSpinner size="lg" color="primary" />
+        <AtomicText type="bodyMedium" style={{ marginTop: tokens.spacing.md }}>
+          {t("common.loading")}
+        </AtomicText>
+      </View>
+    ),
+    [tokens, t, styles.loadingContainer]
+  );
+
+  if (!subCategory) {
+    return null;
+  }
+
+  const canContinue = !!selectedId;
+
+  return (
+    <View style={styles.container}>
+      <NavigationHeader
+        title={t(subCategory.titleKey)}
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinue}
+            disabled={!canContinue}
+            activeOpacity={0.7}
+            style={[
+              styles.continueButton,
+              {
+                backgroundColor: canContinue
+                  ? tokens.colors.primary
+                  : tokens.colors.surfaceVariant,
+                opacity: canContinue ? 1 : 0.5,
+              },
+            ]}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.continueText,
+                {
+                  color: canContinue
+                    ? tokens.colors.onPrimary
+                    : tokens.colors.textSecondary,
+                },
+              ]}
+            >
+              {t("common.continue")}
+            </AtomicText>
+            <AtomicIcon
+              name="arrow-forward"
+              size="sm"
+              color={canContinue ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={false}
+        edges={["left", "right"]}
+        backgroundColor={tokens.colors.backgroundPrimary}
+      >
+        <FlatList
+          data={filteredScenarios}
+          numColumns={numColumns}
+          showsVerticalScrollIndicator={false}
+          columnWrapperStyle={styles.row}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          ListEmptyComponent={
+            isLoading 
+              ? LoadingComponent 
+              : (filteredScenarios.length === 0 ? ListEmptyComponent : null)
+          }
+          contentContainerStyle={[
+            styles.listContent,
+            { paddingBottom: insets.bottom + 100 },
+          ]}
+          removeClippedSubviews
+          maxToRenderPerBatch={10}
+          updateCellsBatchingPeriod={50}
+          initialNumToRender={10}
+          windowSize={21}
+        />
+      </ScreenLayout>
+    </View>
+  );
+};
+
+const createStyles = (
+  tokens: DesignTokens,
+  cardSpacing: number,
+  horizontalPadding: number
+) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    listContent: {
+      paddingTop: tokens.spacing.sm,
+      flexGrow: 1,
+    },
+    row: {
+      gap: cardSpacing,
+      marginBottom: cardSpacing,
+      paddingHorizontal: horizontalPadding,
+    },
+    emptyState: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      paddingVertical: tokens.spacing.xl,
+    },
+    loadingContainer: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      paddingVertical: tokens.spacing.xl,
+    },
+    continueButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.full,
+    },
+    continueText: {
+      fontWeight: "800",
+      marginRight: 4,
+    },
+  });

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

@@ -0,0 +1,198 @@
+/**
+ * MainCategoryScreen
+ * Displays main categories for hierarchical scenario selection
+ */
+
+import React, { useMemo, useCallback, useEffect } from "react";
+import {
+  View,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  type ListRenderItemInfo,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  ScreenLayout,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AIGenScreenHeader } from "../../../../presentation/components";
+import type { ScenarioMainCategory } from "../../domain/scenario.types";
+
+export interface MainCategoryScreenProps {
+  readonly mainCategories: readonly ScenarioMainCategory[];
+  readonly onSelectCategory: (categoryId: string) => void;
+  readonly onBack?: () => void;
+  readonly t: (key: string) => string;
+  readonly headerTitle?: string;
+  readonly headerDescription?: string;
+}
+
+export const MainCategoryScreen: React.FC<MainCategoryScreenProps> = ({
+  mainCategories,
+  onSelectCategory,
+  onBack,
+  t,
+  headerTitle,
+  headerDescription,
+}) => {
+  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]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<ScenarioMainCategory>) => {
+      const title = t(item.titleKey);
+      const description = item.descriptionKey ? t(item.descriptionKey) : "";
+
+      return (
+        <TouchableOpacity
+          style={[
+            styles.card,
+            {
+              backgroundColor: tokens.colors.surface,
+              borderColor: tokens.colors.border,
+            },
+          ]}
+          onPress={() => handleCategoryPress(item.id)}
+          activeOpacity={0.7}
+          testID={`main-category-${item.id}`}
+        >
+          <View style={styles.cardContent}>
+            <View
+              style={[
+                styles.iconContainer,
+                { backgroundColor: tokens.colors.surfaceVariant },
+              ]}
+            >
+              {item.emoji ? (
+                <AtomicText style={styles.emoji}>{item.emoji}</AtomicText>
+              ) : (
+                <AtomicIcon name={item.icon as never} size="lg" color="primary" />
+              )}
+            </View>
+            <View style={styles.textContent}>
+              <AtomicText
+                style={[styles.title, { color: tokens.colors.textPrimary }]}
+              >
+                {title}
+              </AtomicText>
+              {description ? (
+                <AtomicText
+                  style={[
+                    styles.description,
+                    { color: tokens.colors.textSecondary },
+                  ]}
+                  numberOfLines={2}
+                >
+                  {description}
+                </AtomicText>
+              ) : null}
+            </View>
+            <AtomicIcon
+              name="chevron-forward"
+              size="md"
+              color="textSecondary"
+            />
+          </View>
+        </TouchableOpacity>
+      );
+    },
+    [t, tokens, styles, handleCategoryPress]
+  );
+
+  return (
+    <ScreenLayout
+      scrollable={false}
+      edges={["top", "left", "right"]}
+      backgroundColor={tokens.colors.backgroundPrimary}
+    >
+      <AIGenScreenHeader
+        title={headerTitle || t("scenario.main_category.title")}
+        description={headerDescription || t("scenario.main_category.subtitle")}
+        onNavigationPress={onBack}
+      />
+      <FlatList
+        data={mainCategories}
+        showsVerticalScrollIndicator={false}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={[
+          styles.listContent,
+          { paddingBottom: insets.bottom + 100 },
+        ]}
+        removeClippedSubviews
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        initialNumToRender={7}
+        windowSize={11}
+      />
+    </ScreenLayout>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    listContent: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingBottom: tokens.spacing.xl,
+      gap: tokens.spacing.sm,
+    },
+    card: {
+      borderRadius: tokens.borders.radius.lg,
+      borderWidth: 1,
+      overflow: "hidden",
+    },
+    cardContent: {
+      flexDirection: "row",
+      alignItems: "center",
+      padding: tokens.spacing.md,
+    },
+    iconContainer: {
+      width: 56,
+      height: 56,
+      borderRadius: 28,
+      justifyContent: "center",
+      alignItems: "center",
+      marginRight: tokens.spacing.md,
+    },
+    emoji: {
+      fontSize: 28,
+    },
+    textContent: {
+      flex: 1,
+      marginRight: tokens.spacing.sm,
+    },
+    title: {
+      fontSize: 17,
+      fontWeight: "700",
+      marginBottom: 2,
+    },
+    description: {
+      fontSize: 14,
+      lineHeight: 18,
+    },
+  });

package/src/domains/scenarios/presentation/screens/ScenarioPreviewScreen.tsx

@@ -0,0 +1,164 @@
+/**
+ * ScenarioPreviewScreen
+ * Config-driven scenario preview screen
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  ScreenLayout,
+  type DesignTokens,
+  HeroSection,
+  AtomicIcon,
+  NavigationHeader,
+} from "@umituz/react-native-design-system";
+import type { ScenarioData } from "../../domain/scenario.types";
+
+export interface ScenarioPreviewTranslations {
+  readonly continueButton: string;
+  readonly whatToExpect: string;
+}
+
+export interface ScenarioPreviewScreenProps {
+  readonly scenario: ScenarioData;
+  readonly translations: ScenarioPreviewTranslations;
+  readonly onBack: () => void;
+  readonly onContinue: () => void;
+  readonly t: (key: string) => string;
+}
+
+export const ScenarioPreviewScreen: React.FC<ScenarioPreviewScreenProps> = ({
+  scenario,
+  translations,
+  onBack,
+  onContinue,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+      <NavigationHeader
+        title=""
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={onContinue}
+            activeOpacity={0.7}
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: tokens.colors.primary,
+              paddingHorizontal: tokens.spacing.md,
+              paddingVertical: tokens.spacing.xs,
+              borderRadius: tokens.borders.radius.full,
+            }}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={{
+                fontWeight: "800",
+                color: tokens.colors.onPrimary,
+                marginRight: 4,
+              }}
+            >
+              {translations.continueButton}
+            </AtomicText>
+            <AtomicIcon name="arrow-forward" size="sm" color="onPrimary" />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={true}
+        edges={["left", "right"]}
+        hideScrollIndicator={true}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <HeroSection
+          icon={scenario.icon}
+          imageUrl={scenario.imageUrl ?? scenario.previewImageUrl}
+        />
+
+        <View style={styles.contentSection}>
+          <AtomicText style={styles.scenarioTitle}>
+            {t(`scenario.${scenario.id}.title`)}
+          </AtomicText>
+
+          <AtomicText style={styles.scenarioDescription}>
+            {t(`scenario.${scenario.id}.description`)}
+          </AtomicText>
+
+          <View style={styles.infoCard}>
+            <View style={styles.infoHeader}>
+              <AtomicIcon name="information-circle" size="sm" color="primary" />
+              <AtomicText style={styles.infoTitle}>
+                {translations.whatToExpect}
+              </AtomicText>
+            </View>
+            <AtomicText style={styles.infoDescription}>
+              {t(`scenario.${scenario.id}.details`)}
+            </AtomicText>
+          </View>
+        </View>
+      </ScreenLayout>
+    </View>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    scrollContent: {
+      paddingBottom: 120,
+    },
+    contentSection: {
+      paddingHorizontal: tokens.spacing.lg,
+      marginTop: -40,
+    },
+    scenarioTitle: {
+      ...tokens.typography.headingLarge,
+      color: tokens.colors.textPrimary,
+      fontWeight: "900",
+      marginBottom: 12,
+      textAlign: "left",
+    },
+    scenarioDescription: {
+      ...tokens.typography.bodyLarge,
+      color: tokens.colors.textSecondary,
+      lineHeight: 28,
+      marginBottom: 24,
+      opacity: 0.9,
+      textAlign: "left",
+    },
+    infoCard: {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.lg,
+      padding: tokens.spacing.lg,
+      borderWidth: 1,
+      borderColor: tokens.colors.outlineVariant,
+    },
+    infoHeader: {
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: tokens.spacing.sm,
+      gap: tokens.spacing.xs,
+    },
+    infoTitle: {
+      ...tokens.typography.labelLarge,
+      color: tokens.colors.textPrimary,
+      fontWeight: "700",
+      textTransform: "uppercase",
+      letterSpacing: 0.5,
+    },
+    infoDescription: {
+      ...tokens.typography.bodyMedium,
+      color: tokens.colors.textSecondary,
+      lineHeight: 22,
+    },
+  });