@umituz/react-native-ai-generation-content 1.17.267 → 1.17.269

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.267",
+  "version": "1.17.269",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/features/couple-future/index.ts

@@ -41,3 +41,22 @@ export type {
   CoupleFeatureOption,
 } from "./infrastructure/coupleFeatureRegistry";
 export { enhanceCouplePrompt } from "./infrastructure/couplePromptEnhancer";
+
+// Generation utilities
+export {
+  buildGenerationInputFromConfig,
+  processGenerationResultFromConfig,
+  buildCreationFromConfig,
+  DEFAULT_VISUAL_STYLES,
+} from "./infrastructure/generationUtils";
+export type {
+  ScenarioConfig,
+  VisualStyleConfig,
+  GenerationImage,
+  BuildGenerationInputConfig,
+  GenerationInputResult,
+  ProcessResultConfig,
+  GenerationResultData,
+  BuildCreationConfig,
+  CoupleFutureCreationData,
+} from "./infrastructure/generationUtils";

package/src/features/couple-future/infrastructure/generationUtils.ts

@@ -0,0 +1,228 @@
+/**
+ * Generation Utilities
+ * Config-driven input building and result processing
+ */
+
+import { enhanceCouplePrompt } from "./couplePromptEnhancer";
+import type { CoupleFeatureSelection } from "../domain/types";
+
+/**
+ * Scenario config interface - app provides this data
+ */
+export interface ScenarioConfig {
+  readonly id: string;
+  readonly aiPrompt: string;
+  readonly storyTemplate: string;
+  readonly title?: string;
+}
+
+/**
+ * Visual style modifiers config
+ */
+export interface VisualStyleConfig {
+  readonly [key: string]: string;
+}
+
+export const DEFAULT_VISUAL_STYLES: VisualStyleConfig = {
+  realistic: "photorealistic, highly detailed, professional photography",
+  anime: "anime art style, vibrant colors, manga aesthetic, cel-shaded",
+  cinematic: "cinematic lighting, dramatic composition, film photography, movie scene",
+  "3d": "3D render, octane render, unreal engine, raytraced lighting",
+} as const;
+
+/**
+ * Uploaded image interface
+ */
+export interface GenerationImage {
+  readonly uri: string;
+  readonly base64?: string;
+  readonly previewUrl?: string;
+}
+
+/**
+ * Generation input builder config
+ */
+export interface BuildGenerationInputConfig {
+  readonly partnerA: GenerationImage | null;
+  readonly partnerB: GenerationImage | null;
+  readonly partnerAName: string;
+  readonly partnerBName: string;
+  readonly scenario: ScenarioConfig | null;
+  readonly customPrompt?: string;
+  readonly visualStyle: string;
+  readonly defaultPartnerAName: string;
+  readonly defaultPartnerBName: string;
+  readonly coupleFeatureSelection?: CoupleFeatureSelection;
+  readonly visualStyles?: VisualStyleConfig;
+  readonly customScenarioId?: string;
+}
+
+/**
+ * Generation input with base64
+ */
+export interface GenerationInputResult {
+  readonly partnerA: GenerationImage;
+  readonly partnerB: GenerationImage;
+  readonly partnerABase64: string;
+  readonly partnerBBase64: string;
+  readonly prompt: string;
+  readonly partnerAName: string;
+  readonly partnerBName: string;
+  readonly scenarioId: string;
+  readonly customPrompt?: string;
+}
+
+/**
+ * Build generation input from config
+ */
+export const buildGenerationInputFromConfig = (
+  config: BuildGenerationInputConfig,
+): GenerationInputResult | null => {
+  const {
+    partnerA,
+    partnerB,
+    partnerAName,
+    partnerBName,
+    scenario,
+    customPrompt,
+    visualStyle,
+    defaultPartnerAName,
+    defaultPartnerBName,
+    coupleFeatureSelection = {},
+    visualStyles = DEFAULT_VISUAL_STYLES,
+    customScenarioId = "custom",
+  } = config;
+
+  if (!partnerA || !partnerB || !scenario) {
+    return null;
+  }
+
+  let prompt = scenario.aiPrompt;
+
+  if (scenario.id === customScenarioId && customPrompt) {
+    prompt = prompt.replace("{{customPrompt}}", customPrompt);
+  }
+
+  const styleModifier = visualStyles[visualStyle];
+  if (visualStyle !== "realistic" && styleModifier) {
+    prompt = prompt.replace(/photorealistic/gi, styleModifier);
+  }
+
+  prompt = enhanceCouplePrompt(prompt, coupleFeatureSelection);
+
+  return {
+    partnerA,
+    partnerB,
+    partnerABase64: partnerA.base64 || "",
+    partnerBBase64: partnerB.base64 || "",
+    prompt,
+    partnerAName: partnerAName || defaultPartnerAName,
+    partnerBName: partnerBName || defaultPartnerBName,
+    scenarioId: scenario.id,
+    customPrompt,
+  };
+};
+
+/**
+ * Process result config
+ */
+export interface ProcessResultConfig {
+  readonly scenarioId: string;
+  readonly partnerAName: string;
+  readonly partnerBName: string;
+  readonly scenario: ScenarioConfig;
+}
+
+/**
+ * Generation result
+ */
+export interface GenerationResultData {
+  readonly imageUrl: string;
+  readonly story: string;
+  readonly date: string;
+  readonly scenarioId: string;
+  readonly names: string;
+  readonly timestamp: number;
+}
+
+/**
+ * Process generation result from config
+ */
+export const processGenerationResultFromConfig = (
+  imageUrl: string,
+  config: ProcessResultConfig,
+): GenerationResultData => {
+  const { scenario, partnerAName, partnerBName, scenarioId } = config;
+
+  const futureYear = new Date().getFullYear() + 5 + Math.floor(Math.random() * 20);
+  const months = ["May", "June", "August"];
+  const randomMonth = months[Math.floor(Math.random() * months.length)];
+  const randomDay = Math.floor(Math.random() * 28) + 1;
+
+  const story = scenario.storyTemplate
+    .replace(/\{\{partnerA\}\}/g, partnerAName)
+    .replace(/\{\{partnerB\}\}/g, partnerBName)
+    .replace(/\{\{year\}\}/g, String(futureYear));
+
+  return {
+    imageUrl,
+    story,
+    date: `${randomMonth} ${randomDay}, ${futureYear}`,
+    scenarioId,
+    names: `${partnerAName} & ${partnerBName}`,
+    timestamp: Date.now(),
+  };
+};
+
+/**
+ * Build creation config
+ */
+export interface BuildCreationConfig {
+  readonly scenarioId: string;
+  readonly partnerAName: string;
+  readonly partnerBName: string;
+  readonly scenarioTitle?: string;
+}
+
+/**
+ * Creation data
+ */
+export interface CoupleFutureCreationData {
+  readonly id: string;
+  readonly uri: string;
+  readonly type: string;
+  readonly prompt: string;
+  readonly metadata: {
+    readonly scenarioId: string;
+    readonly partnerAName: string;
+    readonly partnerBName: string;
+  };
+  readonly createdAt: Date;
+  readonly isShared: boolean;
+  readonly isFavorite: boolean;
+}
+
+/**
+ * Build creation from result
+ */
+export const buildCreationFromConfig = (
+  result: GenerationResultData,
+  config: BuildCreationConfig,
+): CoupleFutureCreationData => {
+  const { scenarioId, partnerAName, partnerBName, scenarioTitle } = config;
+
+  return {
+    id: `${scenarioId}_${Date.now()}`,
+    uri: result.imageUrl,
+    type: scenarioId,
+    prompt: scenarioTitle || scenarioId,
+    metadata: {
+      scenarioId,
+      partnerAName,
+      partnerBName,
+    },
+    createdAt: new Date(),
+    isShared: false,
+    isFavorite: false,
+  };
+};

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

@@ -0,0 +1,75 @@
+/**
+ * Scenario Domain Types
+ * Generic types for scenario selection feature
+ */
+
+export enum ScenarioCategory {
+  TIME_TRAVEL = "time_travel",
+  FAMILY = "family",
+  LIFESTYLE = "lifestyle",
+  FANTASY = "fantasy",
+  CAREER = "career",
+  TRAVEL = "travel",
+  CULTURAL = "cultural",
+}
+
+export interface ScenarioData {
+  readonly id: string;
+  readonly category?: ScenarioCategory;
+  readonly title: string;
+  readonly description: string;
+  readonly icon: string;
+  readonly imageUrl?: string;
+  readonly previewImageUrl?: string;
+  readonly aiPrompt: string;
+  readonly storyTemplate: string;
+  readonly requiresPhoto?: boolean;
+  readonly hidden?: boolean;
+}
+
+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

@@ -0,0 +1,45 @@
+/**
+ * Scenarios Feature
+ * Config-driven scenario selection and preview screens
+ */
+
+// Domain types
+export type {
+  ScenarioData,
+  ScenarioCategory,
+  ScenarioSelectorConfig,
+  ScenarioPreviewConfig,
+  MagicPromptConfig,
+  VisualStyleOption,
+  InspirationChipData,
+} from "./domain/types";
+export { ScenarioCategory as ScenarioCategoryEnum, SCENARIO_DEFAULTS } from "./domain/types";
+
+// 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";

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

@@ -0,0 +1,82 @@
+/**
+ * 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

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