@umituz/react-native-ai-generation-content 1.26.2 → 1.26.4

package/src/features/scenarios/presentation/components/StyleSelector.tsx

@@ -1,119 +0,0 @@
-/**
- * StyleSelector Component
- * Visual style selection grid for Magic Prompt
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { VisualStyleOption } from "../../domain/types";
-
-export interface StyleSelectorProps {
-  readonly styles: readonly VisualStyleOption[];
-  readonly selectedStyle: string;
-  readonly title: string;
-  readonly onSelect: (styleId: string) => void;
-  readonly t: (key: string) => string;
-}
-
-export const StyleSelector: React.FC<StyleSelectorProps> = ({
-  styles: visualStyles,
-  selectedStyle,
-  title,
-  onSelect,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const componentStyles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          marginBottom: tokens.spacing.lg,
-        },
-        sectionTitle: {
-          fontWeight: "700",
-          marginBottom: tokens.spacing.sm,
-        },
-        stylesGrid: {
-          flexDirection: "row",
-          gap: tokens.spacing.md,
-        },
-        styleItem: {
-          flex: 1,
-          alignItems: "center",
-          gap: tokens.spacing.xs,
-        },
-        styleIcon: {
-          width: 64,
-          height: 64,
-          borderRadius: tokens.borders.radius.md,
-          alignItems: "center",
-          justifyContent: "center",
-        },
-        styleLabel: {
-          textAlign: "center",
-        },
-      }),
-    [tokens],
-  );
-
-  return (
-    <View style={componentStyles.container}>
-      <AtomicText type="labelLarge" style={componentStyles.sectionTitle}>
-        {title}
-      </AtomicText>
-      <View style={componentStyles.stylesGrid}>
-        {visualStyles.map((style) => (
-          <TouchableOpacity
-            key={style.id}
-            style={componentStyles.styleItem}
-            onPress={() => onSelect(style.id)}
-          >
-            <View
-              style={[
-                componentStyles.styleIcon,
-                {
-                  backgroundColor:
-                    selectedStyle === style.id
-                      ? tokens.colors.primaryContainer
-                      : tokens.colors.surface,
-                  borderWidth: selectedStyle === style.id ? 2 : 1,
-                  borderColor:
-                    selectedStyle === style.id
-                      ? tokens.colors.primary
-                      : tokens.colors.border,
-                },
-              ]}
-            >
-              <AtomicIcon
-                name={style.icon}
-                size="md"
-                color={selectedStyle === style.id ? "primary" : "textSecondary"}
-              />
-            </View>
-            <AtomicText
-              type="labelSmall"
-              style={[
-                componentStyles.styleLabel,
-                {
-                  color:
-                    selectedStyle === style.id
-                      ? tokens.colors.textPrimary
-                      : tokens.colors.textSecondary,
-                  fontWeight: selectedStyle === style.id ? "700" : "500",
-                },
-              ]}
-            >
-              {t(style.labelKey)}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </View>
-    </View>
-  );
-};

package/src/features/scenarios/presentation/components/index.ts

@@ -1,18 +0,0 @@
-/**
- * Scenario Components Index
- */
-
-export { ScenarioHeader } from "./ScenarioHeader";
-export type { ScenarioHeaderProps } from "./ScenarioHeader";
-
-export { ScenarioGrid } from "./ScenarioGrid";
-export type { ScenarioGridProps } from "./ScenarioGrid";
-
-export { MagicPromptHeadline } from "./MagicPromptHeadline";
-export type { MagicPromptHeadlineProps } from "./MagicPromptHeadline";
-
-export { InspirationChips } from "./InspirationChips";
-export type { InspirationChipsProps } from "./InspirationChips";
-
-export { StyleSelector } from "./StyleSelector";
-export type { StyleSelectorProps } from "./StyleSelector";

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

@@ -1,178 +0,0 @@
-/**
- * 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/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/features/scenarios/presentation/screens/HierarchicalScenarioListScreen.tsx

@@ -1,266 +0,0 @@
-/**
- * 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,
-  type DesignTokens,
-} from "@umituz/react-native-design-system";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import type { ScenarioData, ScenarioSubCategory } from "../../domain/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;
-}
-
-export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListScreenProps> = ({
-  subCategoryId,
-  subCategories,
-  scenarios,
-  onSelectScenario,
-  onBack,
-  t,
-  numColumns = 2,
-}) => {
-  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);
-    });
-
-    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 isSelected = selectedId === item.id;
-
-      return (
-        <AtomicCard
-          image={item.previewImageUrl || item.imageUrl || ""}
-          title={item.title}
-          subtitle={item.description}
-          imageAspectRatio={1.25}
-          selected={isSelected}
-          style={{ width: cardWidth }}
-          onPress={() => handleCardPress(item.id)}
-          testID={`scenario-card-${item.id}`}
-        />
-      );
-    },
-    [cardWidth, selectedId, handleCardPress]
-  );
-
-  const ListEmptyComponent = useMemo(
-    () => (
-      <View style={styles.emptyState}>
-        <AtomicText type="bodyLarge" color="textSecondary">
-          {t("scenario.list.empty")}
-        </AtomicText>
-      </View>
-    ),
-    [t, styles.emptyState]
-  );
-
-  if (!subCategory) {
-    return null;
-  }
-
-  const canContinue = !!selectedId;
-
-  return (
-    <View style={styles.container}>
-      <NavigationHeader
-        title={subCategory.title}
-        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={
-            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,
-    },
-    continueButton: {
-      flexDirection: "row",
-      alignItems: "center",
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.xs,
-      borderRadius: tokens.borders.radius.full,
-    },
-    continueText: {
-      fontWeight: "800",
-      marginRight: 4,
-    },
-  });