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

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

@@ -1,147 +0,0 @@
-/**
- * Scenario Domain Types
- * Generic types for scenario selection feature
- * Supports both flat and hierarchical category systems
- */
-
-export enum ScenarioCategory {
-  TIME_TRAVEL = "time_travel",
-  FAMILY = "family",
-  LIFESTYLE = "lifestyle",
-  FANTASY = "fantasy",
-  CAREER = "career",
-  TRAVEL = "travel",
-  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;                 // 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")
-}
-
-/**
- * Scenario Main Category (Top-level grouping for hierarchical system)
- */
-export interface ScenarioMainCategory {
-  readonly id: string;
-  readonly title: string;
-  readonly description?: string;
-  readonly icon?: string;
-  readonly emoji?: string;
-  readonly order: number;
-  readonly subCategoryIds: readonly string[];
-}
-
-/**
- * Scenario Sub Category (Second-level grouping for hierarchical system)
- */
-export interface ScenarioSubCategory {
-  readonly id: string;
-  readonly title: string;
-  readonly description?: string;
-  readonly icon?: string;
-  readonly emoji?: string;
-  readonly mainCategoryId: string;
-  readonly scenarioCategories: readonly string[];
-  readonly order: number;
-}
-
-/**
- * Hierarchical scenario category configuration
- */
-export interface ScenarioHierarchyConfig {
-  readonly mainCategories: readonly ScenarioMainCategory[];
-  readonly subCategories: readonly ScenarioSubCategory[];
-}
-
-export interface ScenarioSelectorConfig {
-  readonly titleKey: string;
-  readonly subtitleKey: string;
-  readonly showCategoryFilter?: boolean;
-  readonly enableSearch?: boolean;
-  readonly pageSize?: number;
-}
-
-export interface ScenarioPreviewConfig {
-  readonly showTips?: boolean;
-  readonly showDetails?: boolean;
-  readonly enableCustomization?: boolean;
-}
-
-export interface MagicPromptConfig {
-  readonly maxLength: number;
-  readonly minLength: number;
-  readonly headerKey: string;
-  readonly headlinePart1Key: string;
-  readonly headlinePart2Key: string;
-  readonly subtitleKey: string;
-  readonly inputLabelKey: string;
-  readonly surpriseButtonKey: string;
-  readonly placeholderKey: string;
-  readonly styleTitleKey: string;
-  readonly inspirationTitleKey: string;
-  readonly continueKey: string;
-}
-
-export interface VisualStyleOption {
-  readonly id: string;
-  readonly icon: string;
-  readonly labelKey: string;
-}
-
-export interface InspirationChipData {
-  readonly id: string;
-  readonly labelKey: string;
-  readonly promptKey: string;
-}
-
-export const SCENARIO_DEFAULTS = {
-  pageSize: 10,
-  maxPromptLength: 500,
-  minPromptLength: 10,
-} as const;

package/src/features/scenarios/index.ts

@@ -1,64 +0,0 @@
-/**
- * Scenarios Feature
- * Config-driven scenario selection and preview screens
- */
-
-// Domain types
-export type {
-  ScenarioData,
-  ScenarioSelectorConfig,
-  ScenarioPreviewConfig,
-  MagicPromptConfig,
-  VisualStyleOption,
-  InspirationChipData,
-  ScenarioMainCategory,
-  ScenarioSubCategory,
-  ScenarioHierarchyConfig,
-} from "./domain/types";
-export { SCENARIO_DEFAULTS } from "./domain/types";
-
-// Note: ScenarioCategory is now exported from domains/scenarios
-// Import from there instead: import { ScenarioCategory } from '@umituz/react-native-ai-generation-content'
-
-// Components
-export {
-  ScenarioHeader,
-  ScenarioGrid,
-  MagicPromptHeadline,
-  InspirationChips,
-  StyleSelector,
-} from "./presentation/components";
-export type {
-  ScenarioHeaderProps,
-  ScenarioGridProps,
-  MagicPromptHeadlineProps,
-  InspirationChipsProps,
-  StyleSelectorProps,
-} from "./presentation/components";
-
-// Screens
-export { ScenarioSelectorScreen } from "./presentation/screens/ScenarioSelectorScreen";
-export type { ScenarioSelectorScreenProps } from "./presentation/screens/ScenarioSelectorScreen";
-
-export { ScenarioPreviewScreen } from "./presentation/screens/ScenarioPreviewScreen";
-export type {
-  ScenarioPreviewScreenProps,
-  ScenarioPreviewTranslations,
-} from "./presentation/screens/ScenarioPreviewScreen";
-
-export { MagicPromptScreen } from "./presentation/screens/MagicPromptScreen";
-export type { MagicPromptScreenProps } from "./presentation/screens/MagicPromptScreen";
-
-// Hierarchical Screens
-export { MainCategoryScreen } from "./presentation/screens/MainCategoryScreen";
-export type { MainCategoryScreenProps } from "./presentation/screens/MainCategoryScreen";
-
-export { SubCategoryScreen } from "./presentation/screens/SubCategoryScreen";
-export type { SubCategoryScreenProps } from "./presentation/screens/SubCategoryScreen";
-
-export { HierarchicalScenarioListScreen } from "./presentation/screens/HierarchicalScenarioListScreen";
-export type { HierarchicalScenarioListScreenProps } from "./presentation/screens/HierarchicalScenarioListScreen";
-
-// Containers
-export { CategoryNavigationContainer } from "./presentation/containers/CategoryNavigationContainer";
-export type { CategoryNavigationContainerProps } from "./presentation/containers/CategoryNavigationContainer";

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

@@ -1,82 +0,0 @@
-/**
- * InspirationChips Component
- * Horizontal scrollable suggestion chips for Magic Prompt
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { InspirationChipData } from "../../domain/types";
-
-export interface InspirationChipsProps {
-  readonly chips: readonly InspirationChipData[];
-  readonly title: string;
-  readonly onSelect: (promptKey: string) => void;
-  readonly t: (key: string) => string;
-}
-
-export const InspirationChips: React.FC<InspirationChipsProps> = ({
-  chips,
-  title,
-  onSelect,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          marginBottom: tokens.spacing.lg,
-        },
-        sectionTitle: {
-          fontWeight: "700",
-          marginBottom: tokens.spacing.sm,
-        },
-        chipsContainer: {
-          gap: tokens.spacing.sm,
-          paddingBottom: 4,
-        },
-        chip: {
-          paddingHorizontal: tokens.spacing.md,
-          paddingVertical: 10,
-          borderRadius: 999,
-          borderWidth: 1,
-          borderColor: tokens.colors.border,
-          backgroundColor: tokens.colors.surface,
-        },
-      }),
-    [tokens],
-  );
-
-  return (
-    <View style={styles.container}>
-      <AtomicText type="labelLarge" style={styles.sectionTitle}>
-        {title}
-      </AtomicText>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.chipsContainer}
-      >
-        {chips.map((chip) => (
-          <TouchableOpacity
-            key={chip.id}
-            style={styles.chip}
-            onPress={() => onSelect(chip.promptKey)}
-          >
-            <AtomicText
-              type="bodySmall"
-              style={{ color: tokens.colors.textPrimary }}
-            >
-              {t(chip.labelKey)}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
-  );
-};

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

@@ -1,79 +0,0 @@
-/**
- * MagicPromptHeadline Component
- * Headline section with highlighted text for Magic Prompt screen
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-
-export interface MagicPromptHeadlineProps {
-  readonly headlinePart1: string;
-  readonly headlinePart2: string;
-  readonly subtitle: string;
-}
-
-export const MagicPromptHeadline: React.FC<MagicPromptHeadlineProps> = ({
-  headlinePart1,
-  headlinePart2,
-  subtitle,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.titleRow}>
-        <AtomicText
-          type="headlineLarge"
-          style={[styles.title, { color: tokens.colors.textPrimary }]}
-        >
-          {headlinePart1}{" "}
-          <AtomicText
-            type="headlineLarge"
-            style={[
-              styles.titleHighlight,
-              { color: tokens.colors.textPrimary },
-            ]}
-          >
-            {headlinePart2}
-          </AtomicText>
-        </AtomicText>
-      </View>
-      <AtomicText
-        type="bodyLarge"
-        style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
-      >
-        {subtitle}
-      </AtomicText>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 24,
-  },
-  titleRow: {
-    marginBottom: 12,
-  },
-  title: {
-    fontWeight: "800",
-    fontSize: 32,
-    lineHeight: 40,
-  },
-  titleHighlight: {
-    fontWeight: "800",
-    fontSize: 32,
-    lineHeight: 40,
-    textDecorationLine: "underline",
-    textDecorationColor: "rgba(255, 140, 90, 0.5)",
-    textDecorationStyle: "solid",
-  },
-  subtitle: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-});

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

@@ -1,224 +0,0 @@
-/**
- * ScenarioGrid Component
- * Grid display for scenario selection with category filtering
- */
-
-import React, { useMemo, useCallback, useState } from "react";
-import {
-  View,
-  FlatList,
-  StyleSheet,
-  type ListRenderItemInfo,
-} from "react-native";
-import {
-  useAppDesignTokens,
-  useResponsive,
-  AtomicCard,
-  AtomicText,
-  AtomicSkeleton,
-  FilterGroup,
-  type DesignTokens,
-} from "@umituz/react-native-design-system";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import type { ScenarioData, ScenarioCategory } from "../../domain/types";
-import { SCENARIO_DEFAULTS } from "../../domain/types";
-
-export interface ScenarioGridProps {
-  readonly scenarios: readonly ScenarioData[];
-  readonly selectedScenarioId: string | null;
-  readonly onSelect: (id: string) => void;
-  readonly categories: readonly ScenarioCategory[];
-  readonly t: (key: string) => string;
-  readonly pageSize?: number;
-  readonly categoryAllLabel?: string;
-}
-
-export const ScenarioGrid: React.FC<ScenarioGridProps> = ({
-  scenarios,
-  selectedScenarioId,
-  onSelect,
-  categories,
-  t,
-  pageSize = SCENARIO_DEFAULTS.pageSize,
-  categoryAllLabel = "All",
-}) => {
-  const [category, setCategory] = useState<ScenarioCategory | "all">("all");
-  const [displayedCount, setDisplayedCount] = useState(pageSize);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
-  const { width } = useResponsive();
-
-  const numColumns = 2;
-  const horizontalPadding = tokens.spacing.md;
-  const cardSpacing = tokens.spacing.md;
-  const availableWidth = width - horizontalPadding * 2 - cardSpacing;
-  const cardWidth = availableWidth / numColumns;
-
-  const filteredScenarios = useMemo(() => {
-    if (category === "all") return scenarios;
-    return scenarios.filter((s) => s.category === category);
-  }, [scenarios, category]);
-
-  const displayedScenarios = useMemo(
-    () => filteredScenarios.slice(0, displayedCount),
-    [filteredScenarios, displayedCount],
-  );
-
-  const hasMore = displayedCount < filteredScenarios.length;
-  const isLoadingMore = isLoading && displayedCount > pageSize;
-
-  const styles = useMemo(
-    () => createStyles(tokens, cardWidth, cardSpacing, horizontalPadding),
-    [tokens, cardWidth, cardSpacing, horizontalPadding],
-  );
-
-  const loadMore = useCallback(() => {
-    if (hasMore && !isLoading) {
-      setIsLoading(true);
-      setTimeout(() => {
-        setDisplayedCount((prev) =>
-          Math.min(prev + pageSize, filteredScenarios.length),
-        );
-        setIsLoading(false);
-      }, 300);
-    }
-  }, [hasMore, isLoading, filteredScenarios.length, pageSize]);
-
-  const handleCategoryChange = useCallback(
-    (val: ScenarioCategory | "all") => {
-      setCategory(val);
-      setDisplayedCount(pageSize);
-    },
-    [pageSize],
-  );
-
-  const ListEmptyComponent = useMemo(
-    () => (
-      <View style={[styles.centerContainer, { paddingHorizontal: horizontalPadding }]}>
-        <AtomicText type="bodyMedium" color="textSecondary">
-          {t("scenario.empty")}
-        </AtomicText>
-      </View>
-    ),
-    [t, styles.centerContainer, horizontalPadding],
-  );
-
-  const ListFooterComponent = useMemo(
-    () =>
-      isLoadingMore ? (
-        <View style={[styles.footerLoader, { paddingHorizontal: horizontalPadding }]}>
-          <AtomicSkeleton pattern="card" count={2} />
-        </View>
-      ) : null,
-    [isLoadingMore, styles.footerLoader, horizontalPadding],
-  );
-
-  const ListHeaderComponent = useMemo(
-    () => (
-      <View style={{ marginBottom: tokens.spacing.md }}>
-        <FilterGroup
-          items={[
-            { label: categoryAllLabel, value: "all" },
-            ...categories.map((cat) => ({
-              label: t(`category.${cat}`),
-              value: cat,
-            })),
-          ]}
-          selectedValue={category}
-          onSelect={(val) =>
-            handleCategoryChange(val as ScenarioCategory | "all")
-          }
-          contentContainerStyle={{ paddingHorizontal: horizontalPadding }}
-        />
-      </View>
-    ),
-    [
-      category,
-      t,
-      horizontalPadding,
-      tokens.spacing.md,
-      categories,
-      categoryAllLabel,
-      handleCategoryChange,
-    ],
-  );
-
-  const renderItem = useCallback(
-    ({ item }: ListRenderItemInfo<ScenarioData>) => {
-      const title = t(`scenario.${item.id}.title`);
-      const description = t(`scenario.${item.id}.description`);
-
-      return (
-        <AtomicCard
-          image={item.previewImageUrl ?? item.imageUrl ?? ""}
-          title={title}
-          subtitle={description}
-          selected={selectedScenarioId === item.id}
-          imageAspectRatio={1.25}
-          style={{ width: cardWidth }}
-          onPress={() => onSelect(item.id)}
-          testID={`scenario-card-${item.id}`}
-        />
-      );
-    },
-    [cardWidth, selectedScenarioId, onSelect, t],
-  );
-
-  return (
-    <FlatList
-      data={displayedScenarios}
-      numColumns={numColumns}
-      key={`grid-${numColumns}`}
-      showsVerticalScrollIndicator={false}
-      columnWrapperStyle={styles.row}
-      renderItem={renderItem}
-      keyExtractor={(item: ScenarioData) => item.id}
-      ListHeaderComponent={ListHeaderComponent}
-      ListEmptyComponent={filteredScenarios.length === 0 ? ListEmptyComponent : null}
-      ListFooterComponent={ListFooterComponent}
-      onEndReached={loadMore}
-      onEndReachedThreshold={0.5}
-      contentContainerStyle={[
-        styles.listContent,
-        {
-          paddingBottom: insets.bottom + 100,
-        },
-      ]}
-      initialNumToRender={pageSize}
-      maxToRenderPerBatch={pageSize}
-      windowSize={5}
-    />
-  );
-};
-
-const createStyles = (
-  tokens: DesignTokens,
-  cardWidth: number,
-  cardSpacing: number,
-  horizontalPadding: number,
-) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    listContent: {
-      paddingTop: tokens.spacing.sm,
-      flexGrow: 1,
-    },
-    row: {
-      gap: cardSpacing,
-      marginBottom: cardSpacing,
-      paddingHorizontal: horizontalPadding,
-    },
-    centerContainer: {
-      flex: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      paddingVertical: tokens.spacing.xl,
-    },
-    footerLoader: {
-      paddingVertical: tokens.spacing.md,
-    },
-  });

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

@@ -1,55 +0,0 @@
-/**
- * ScenarioHeader Component
- * Header section for scenario selection screen
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-  type DesignTokens,
-} from "@umituz/react-native-design-system";
-
-export interface ScenarioHeaderProps {
-  readonly title: string;
-  readonly subtitle: string;
-}
-
-export const ScenarioHeader: React.FC<ScenarioHeaderProps> = ({
-  title,
-  subtitle,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = React.useMemo(() => createStyles(tokens), [tokens]);
-
-  return (
-    <View style={styles.container}>
-      <AtomicText type="headlineLarge" style={styles.title}>
-        {title}
-      </AtomicText>
-      <AtomicText
-        type="bodyMedium"
-        color="textSecondary"
-        style={styles.subtitle}
-      >
-        {subtitle}
-      </AtomicText>
-    </View>
-  );
-};
-
-const createStyles = (tokens: DesignTokens) =>
-  StyleSheet.create({
-    container: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingBottom: tokens.spacing.md,
-      gap: tokens.spacing.xs,
-    },
-    title: {
-      lineHeight: 34,
-    },
-    subtitle: {
-      lineHeight: 22,
-    },
-  });