@umituz/react-native-ai-generation-content 1.17.266 → 1.17.268

package/package.json

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

package/src/domains/result-preview/presentation/components/GenerationErrorScreen.tsx

@@ -0,0 +1,196 @@
+/**
+ * GenerationErrorScreen
+ * Generic error screen for AI generation failures
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  ScreenLayout,
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  AtomicButton,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+
+/**
+ * Error screen translations
+ */
+export interface GenerationErrorTranslations {
+  /** Error title */
+  readonly title: string;
+  /** Try again button */
+  readonly tryAgain: string;
+  /** Choose another button */
+  readonly chooseAnother: string;
+  /** Credit info message */
+  readonly noCreditCharged: string;
+}
+
+/**
+ * Error screen config
+ */
+export interface GenerationErrorConfig {
+  /** Show credit info message */
+  readonly showCreditInfo?: boolean;
+  /** Icon name */
+  readonly iconName?: string;
+  /** Icon size */
+  readonly iconSize?: number;
+}
+
+/**
+ * Error screen props
+ */
+export interface GenerationErrorScreenProps {
+  /** Error message to display */
+  readonly errorMessage?: string;
+  /** Translations */
+  readonly translations: GenerationErrorTranslations;
+  /** Configuration */
+  readonly config?: GenerationErrorConfig;
+  /** Try again callback */
+  readonly onTryAgain: () => void;
+  /** Choose another scenario callback */
+  readonly onChooseAnother: () => void;
+  /** Optional custom style */
+  readonly style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_CONFIG: GenerationErrorConfig = {
+  showCreditInfo: true,
+  iconName: "alert-circle",
+  iconSize: 56,
+};
+
+export const GenerationErrorScreen: React.FC<GenerationErrorScreenProps> = ({
+  errorMessage,
+  translations,
+  config = DEFAULT_CONFIG,
+  onTryAgain,
+  onChooseAnother,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: tokens.colors.backgroundPrimary },
+        style,
+      ]}
+    >
+      <ScreenLayout
+        scrollable={false}
+        edges={["top", "bottom"]}
+        backgroundColor="transparent"
+      >
+        <View style={styles.content}>
+          <View style={styles.iconContainer}>
+            <AtomicIcon
+              name={mergedConfig.iconName || "alert-circle"}
+              size={mergedConfig.iconSize || 56}
+              customColor={tokens.colors.error}
+            />
+          </View>
+
+          <AtomicText style={styles.title}>{translations.title}</AtomicText>
+
+          <AtomicText style={styles.message}>
+            {errorMessage || translations.title}
+          </AtomicText>
+
+          {mergedConfig.showCreditInfo && (
+            <View style={styles.infoContainer}>
+              <AtomicIcon
+                name="information-circle-outline"
+                size={16}
+                customColor={tokens.colors.textSecondary}
+              />
+              <AtomicText style={styles.infoText}>
+                {translations.noCreditCharged}
+              </AtomicText>
+            </View>
+          )}
+
+          <View style={styles.spacer} />
+
+          <View style={styles.actionsContainer}>
+            <AtomicButton
+              title={translations.tryAgain}
+              onPress={onTryAgain}
+              variant="primary"
+              size="lg"
+              fullWidth
+            />
+
+            <View style={styles.secondaryButtonContainer}>
+              <AtomicButton
+                title={translations.chooseAnother}
+                onPress={onChooseAnother}
+                variant="text"
+                size="md"
+                fullWidth
+              />
+            </View>
+          </View>
+        </View>
+      </ScreenLayout>
+    </View>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    content: {
+      flex: 1,
+      alignItems: "center",
+      paddingHorizontal: 32,
+      paddingTop: 80,
+      paddingBottom: 40,
+    },
+    iconContainer: {
+      marginBottom: 24,
+    },
+    title: {
+      ...tokens.typography.headingMedium,
+      color: tokens.colors.textPrimary,
+      fontWeight: "700",
+      marginBottom: 12,
+      textAlign: "center",
+    },
+    message: {
+      ...tokens.typography.bodyMedium,
+      color: tokens.colors.textSecondary,
+      textAlign: "center",
+      lineHeight: 22,
+      marginBottom: 24,
+    },
+    infoContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+      opacity: 0.7,
+    },
+    infoText: {
+      ...tokens.typography.bodySmall,
+      color: tokens.colors.textSecondary,
+    },
+    spacer: {
+      flex: 1,
+    },
+    actionsContainer: {
+      width: "100%",
+      gap: 16,
+    },
+    secondaryButtonContainer: {
+      marginTop: 4,
+    },
+  });

package/src/domains/result-preview/presentation/components/index.ts

@@ -6,3 +6,9 @@ export { ResultPreviewScreen } from "./ResultPreviewScreen";
 export { ResultImageCard } from "./ResultImageCard";
 export { ResultActionBar } from "./ResultActionBar";
 export { RecentCreationsSection } from "./RecentCreationsSection";
+export { GenerationErrorScreen } from "./GenerationErrorScreen";
+export type {
+  GenerationErrorTranslations,
+  GenerationErrorConfig,
+  GenerationErrorScreenProps,
+} from "./GenerationErrorScreen";

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,
+  };
+};