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

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

@@ -1,242 +0,0 @@
-/**
- * MagicPromptScreen
- * Config-driven custom prompt screen
- */
-
-import React, { useState, useCallback, useMemo } from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import {
-  AtomicText,
-  AtomicTextArea,
-  AtomicIcon,
-  useAppDesignTokens,
-  ScreenLayout,
-  NavigationHeader,
-} from "@umituz/react-native-design-system";
-import { MagicPromptHeadline } from "../components/MagicPromptHeadline";
-import { InspirationChips } from "../components/InspirationChips";
-import { StyleSelector } from "../components/StyleSelector";
-import type {
-  MagicPromptConfig,
-  VisualStyleOption,
-  InspirationChipData,
-} from "../../domain/types";
-
-export interface MagicPromptScreenProps {
-  readonly config: MagicPromptConfig;
-  readonly visualStyles: readonly VisualStyleOption[];
-  readonly inspirationChips: readonly InspirationChipData[];
-  readonly surprisePrompts: readonly string[];
-  readonly initialPrompt: string;
-  readonly initialVisualStyle: string;
-  readonly onContinue: (prompt: string, visualStyle: string) => void;
-  readonly onBack: () => void;
-  readonly t: (key: string) => string;
-}
-
-export const MagicPromptScreen: React.FC<MagicPromptScreenProps> = ({
-  config,
-  visualStyles,
-  inspirationChips,
-  surprisePrompts,
-  initialPrompt,
-  initialVisualStyle,
-  onContinue,
-  onBack,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-  const [text, setText] = useState(initialPrompt);
-  const [selectedStyle, setSelectedStyle] = useState(initialVisualStyle);
-
-  const handleSurprise = useCallback(() => {
-    const randomIndex = Math.floor(Math.random() * surprisePrompts.length);
-    const surprisePrompt = t(surprisePrompts[randomIndex]);
-    setText(surprisePrompt);
-
-    const randomStyleIndex = Math.floor(Math.random() * visualStyles.length);
-    setSelectedStyle(visualStyles[randomStyleIndex].id);
-  }, [surprisePrompts, visualStyles, t]);
-
-  const handleInspirationSelect = useCallback(
-    (promptKey: string) => {
-      const prompt = t(promptKey);
-      setText(prompt);
-    },
-    [t],
-  );
-
-  const handleStyleSelect = useCallback((styleId: string) => {
-    setSelectedStyle(styleId);
-  }, []);
-
-  const handleContinue = useCallback(() => {
-    onContinue(text, selectedStyle);
-  }, [onContinue, text, selectedStyle]);
-
-  const isValid = text.trim().length >= config.minLength;
-
-  const componentStyles = useMemo(
-    () =>
-      StyleSheet.create({
-        inputCard: {
-          borderWidth: 1,
-          borderRadius: 16,
-          padding: 16,
-          marginBottom: 24,
-        },
-        inputHeader: {
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: 12,
-        },
-        label: {
-          textTransform: "uppercase",
-          fontWeight: "700",
-          letterSpacing: 1,
-        },
-        surpriseButton: {
-          flexDirection: "row",
-          alignItems: "center",
-          gap: 6,
-          paddingHorizontal: 12,
-          paddingVertical: 6,
-          borderRadius: 999,
-        },
-        surpriseText: { fontWeight: "600" },
-        textArea: { marginBottom: 12 },
-        charCounter: { alignItems: "flex-end", paddingTop: 8 },
-      }),
-    [],
-  );
-
-  return (
-    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
-      <NavigationHeader
-        title={t(config.headerKey)}
-        onBackPress={onBack}
-        rightElement={
-          <TouchableOpacity
-            onPress={handleContinue}
-            disabled={!isValid}
-            activeOpacity={0.7}
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              backgroundColor: isValid
-                ? tokens.colors.primary
-                : tokens.colors.surfaceVariant,
-              paddingHorizontal: tokens.spacing.md,
-              paddingVertical: tokens.spacing.xs,
-              borderRadius: tokens.borders.radius.full,
-              opacity: isValid ? 1 : 0.5,
-            }}
-          >
-            <AtomicText
-              type="bodyMedium"
-              style={{
-                fontWeight: "800",
-                color: isValid
-                  ? tokens.colors.onPrimary
-                  : tokens.colors.textSecondary,
-                marginRight: 4,
-              }}
-            >
-              {t(config.continueKey)}
-            </AtomicText>
-            <AtomicIcon
-              name="arrow-forward"
-              size="sm"
-              color={isValid ? "onPrimary" : "textSecondary"}
-            />
-          </TouchableOpacity>
-        }
-      />
-      <ScreenLayout
-        scrollable={true}
-        edges={["left", "right"]}
-        keyboardAvoiding={true}
-        contentContainerStyle={{ paddingHorizontal: tokens.spacing.lg }}
-      >
-        <MagicPromptHeadline
-          headlinePart1={t(config.headlinePart1Key)}
-          headlinePart2={t(config.headlinePart2Key)}
-          subtitle={t(config.subtitleKey)}
-        />
-
-        <View
-          style={[
-            componentStyles.inputCard,
-            { borderColor: tokens.colors.border },
-          ]}
-        >
-          <View style={componentStyles.inputHeader}>
-            <AtomicText
-              type="labelSmall"
-              style={[
-                componentStyles.label,
-                { color: tokens.colors.textSecondary },
-              ]}
-            >
-              {t(config.inputLabelKey)}
-            </AtomicText>
-            <TouchableOpacity
-              onPress={handleSurprise}
-              style={[
-                componentStyles.surpriseButton,
-                { backgroundColor: tokens.colors.primaryContainer },
-              ]}
-            >
-              <AtomicIcon name="sparkles" size="xs" color="primary" />
-              <AtomicText
-                type="labelSmall"
-                style={[
-                  componentStyles.surpriseText,
-                  { color: tokens.colors.primary },
-                ]}
-              >
-                {t(config.surpriseButtonKey)}
-              </AtomicText>
-            </TouchableOpacity>
-          </View>
-
-          <AtomicTextArea
-            placeholder={t(config.placeholderKey)}
-            value={text}
-            onChangeText={setText}
-            numberOfLines={8}
-            maxLength={config.maxLength}
-            autoFocus
-            minHeight={200}
-            style={componentStyles.textArea}
-          />
-
-          <View style={componentStyles.charCounter}>
-            <AtomicText
-              type="labelSmall"
-              style={{ color: tokens.colors.textSecondary }}
-            >
-              {text.length}/{config.maxLength}
-            </AtomicText>
-          </View>
-        </View>
-
-        <InspirationChips
-          chips={inspirationChips}
-          title={t(config.inspirationTitleKey)}
-          onSelect={handleInspirationSelect}
-          t={t}
-        />
-
-        <StyleSelector
-          styles={visualStyles}
-          selectedStyle={selectedStyle}
-          title={t(config.styleTitleKey)}
-          onSelect={handleStyleSelect}
-          t={t}
-        />
-      </ScreenLayout>
-    </View>
-  );
-};

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

@@ -1,198 +0,0 @@
-/**
- * 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/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 = item.title;
-      const description = item.description || "";
-
-      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>
-      );
-    },
-    [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/features/scenarios/presentation/screens/ScenarioPreviewScreen.tsx

@@ -1,164 +0,0 @@
-/**
- * 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/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,
-    },
-  });

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

@@ -1,66 +0,0 @@
-/**
- * ScenarioSelectorScreen
- * Config-driven scenario selection screen
- */
-
-import React from "react";
-import { StyleSheet } from "react-native";
-import {
-  useAppDesignTokens,
-  ScreenLayout,
-  type DesignTokens,
-} from "@umituz/react-native-design-system";
-import { ScenarioHeader } from "../components/ScenarioHeader";
-import { ScenarioGrid } from "../components/ScenarioGrid";
-import type { ScenarioData, ScenarioCategory, ScenarioSelectorConfig } from "../../domain/types";
-
-export interface ScenarioSelectorScreenProps {
-  readonly config: ScenarioSelectorConfig;
-  readonly scenarios: readonly ScenarioData[];
-  readonly categories: readonly ScenarioCategory[];
-  readonly selectedScenarioId: string | null;
-  readonly onSelect: (id: string) => void;
-  readonly t: (key: string) => string;
-}
-
-export const ScenarioSelectorScreen: React.FC<ScenarioSelectorScreenProps> = ({
-  config,
-  scenarios,
-  categories,
-  selectedScenarioId,
-  onSelect,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = React.useMemo(() => createStyles(tokens), [tokens]);
-
-  return (
-    <ScreenLayout
-      scrollable={false}
-      edges={["left", "right"]}
-      contentContainerStyle={styles.container}
-      backgroundColor={tokens.colors.backgroundPrimary}
-    >
-      <ScenarioHeader
-        title={t(config.titleKey)}
-        subtitle={t(config.subtitleKey)}
-      />
-      <ScenarioGrid
-        scenarios={scenarios}
-        categories={categories}
-        selectedScenarioId={selectedScenarioId}
-        onSelect={onSelect}
-        t={t}
-        categoryAllLabel={t("category.all")}
-      />
-    </ScreenLayout>
-  );
-};
-
-const createStyles = (_tokens: DesignTokens) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-      paddingTop: 0,
-    },
-  });