@umituz/react-native-ai-generation-content 1.27.24 → 1.27.26

package/package.json

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

package/src/domains/generation/wizard/configs/image-to-video.config.ts

@@ -12,7 +12,8 @@ export const IMAGE_TO_VIDEO_WIZARD_CONFIG: WizardFeatureConfig = {
     {
       id: "photo_1",
       type: "photo_upload",
-      label: "Your Photo",
+      titleKey: "imageToVideo.selectPhoto",
+      subtitleKey: "imageToVideo.selectPhotoHint",
       showFaceDetection: false,
       showPhotoTips: true,
       required: true,
@@ -20,13 +21,15 @@ export const IMAGE_TO_VIDEO_WIZARD_CONFIG: WizardFeatureConfig = {
     {
       id: "motion_prompt",
       type: "text_input",
-      required: false,
+      titleKey: "imageToVideo.motionPrompt",
       placeholderKey: "imageToVideo.motionPromptPlaceholder",
+      required: false,
       maxLength: 200,
     },
     {
       id: "duration",
       type: "selection",
+      titleKey: "generation.duration.title",
       selectionType: "duration",
       options: [
         { id: "5s", label: "5 seconds", value: 5 },

package/src/domains/generation/wizard/configs/text-to-image.config.ts

@@ -9,9 +9,9 @@ const promptStep: TextInputStepConfig = {
   id: "prompt",
   type: "text_input",
   required: true,
-  titleKey: "text2image.wizard.prompt.title",
-  subtitleKey: "text2image.wizard.prompt.subtitle",
-  placeholderKey: "text2image.wizard.prompt.placeholder",
+  titleKey: "text2image.hero.title",
+  subtitleKey: "text2image.hero.subtitle",
+  placeholderKey: "text2image.prompt.placeholder",
   minLength: 3,
   maxLength: 1000,
   multiline: true,

package/src/domains/generation/wizard/configs/text-to-video.config.ts

@@ -13,7 +13,9 @@ export const TEXT_TO_VIDEO_WIZARD_CONFIG: WizardFeatureConfig = {
       id: "prompt",
       type: "text_input",
       required: true,
-      placeholderKey: "textToVideo.promptPlaceholder",
+      titleKey: "textToVideo.hero.title",
+      subtitleKey: "textToVideo.hero.subtitle",
+      placeholderKey: "textToVideo.prompt.placeholder",
       minLength: 3,
       maxLength: 500,
       multiline: true,
@@ -21,6 +23,7 @@ export const TEXT_TO_VIDEO_WIZARD_CONFIG: WizardFeatureConfig = {
     {
       id: "duration",
       type: "selection",
+      titleKey: "generation.duration.title",
       selectionType: "duration",
       options: [
         { id: "5s", label: "5 seconds", value: 5 },

package/src/domains/generation/wizard/infrastructure/strategies/image-generation.strategy.ts

@@ -16,6 +16,7 @@ import {
 } from "./wizard-strategy.constants";
 import { buildFacePreservationPrompt } from "../../../../prompts/infrastructure/builders/face-preservation-builder";
 import { buildInteractionStylePrompt, type InteractionStyle } from "../../../../prompts/infrastructure/builders/interaction-style-builder";
+import { extractPrompt, extractSelection } from "../utils";
 
 declare const __DEV__: boolean;
 
@@ -165,9 +166,8 @@ export async function buildImageInput(
 ): Promise<ImageGenerationInput | null> {
   const photos = await extractPhotosFromWizardData(wizardData);
 
-  // Get prompt from wizardData (text_input step) OR scenario.aiPrompt
-  const userPrompt = wizardData.prompt as string | undefined;
-  const prompt = userPrompt?.trim() || scenario.aiPrompt?.trim();
+  // Extract prompt using type-safe extractor with fallback
+  const prompt = extractPrompt(wizardData, scenario.aiPrompt);
 
   if (!prompt) {
     throw new Error("Prompt is required for image generation");
@@ -178,18 +178,19 @@ export async function buildImageInput(
   if (photos.length > 0) {
     const styleEnhancements: string[] = [];
 
-    const romanticMoods = wizardData.selection_romantic_mood as string[] | undefined;
-    if (romanticMoods?.length) {
+    // Extract selections using type-safe extractor
+    const romanticMoods = extractSelection(wizardData.selection_romantic_mood);
+    if (Array.isArray(romanticMoods) && romanticMoods.length > 0) {
       styleEnhancements.push(`Mood: ${romanticMoods.join(", ")}`);
     }
 
-    const artStyle = wizardData.selection_art_style as string | undefined;
-    if (artStyle && artStyle !== DEFAULT_STYLE_VALUE) {
+    const artStyle = extractSelection(wizardData.selection_art_style);
+    if (typeof artStyle === "string" && artStyle !== DEFAULT_STYLE_VALUE) {
       styleEnhancements.push(`Art style: ${artStyle}`);
     }
 
-    const artist = wizardData.selection_artist_style as string | undefined;
-    if (artist && artist !== DEFAULT_STYLE_VALUE) {
+    const artist = extractSelection(wizardData.selection_artist_style);
+    if (typeof artist === "string" && artist !== DEFAULT_STYLE_VALUE) {
       styleEnhancements.push(`Artist style: ${artist}`);
     }
 
@@ -198,8 +199,9 @@ export async function buildImageInput(
     }
   }
 
-  // Get style from wizard selection (for text-to-image)
-  const style = wizardData.style as string | undefined;
+  // Extract style using type-safe extractor (for text-to-image)
+  const styleValue = extractSelection(wizardData.style);
+  const style = typeof styleValue === "string" ? styleValue : undefined;
 
   // Get interaction style from scenario (default: romantic for couple apps)
   const interactionStyle = (scenario.interactionStyle as InteractionStyle) ?? "romantic";

package/src/domains/generation/wizard/infrastructure/strategies/video-generation.strategy.ts

@@ -10,6 +10,7 @@ import { createCreationsRepository } from "../../../../creations/infrastructure/
 import type { WizardScenarioData } from "../../presentation/hooks/useWizardGeneration";
 import type { WizardStrategy } from "./wizard-strategy.types";
 import { PHOTO_KEY_PREFIX, VIDEO_FEATURE_PATTERNS } from "./wizard-strategy.constants";
+import { extractPrompt, extractDuration } from "../utils";
 
 // ============================================================================
 // Types
@@ -86,17 +87,15 @@ export async function buildVideoInput(
 ): Promise<VideoGenerationInput | null> {
   const photos = await extractPhotosFromWizardData(wizardData);
 
-  // Get prompt from wizardData or scenario
-  const userPrompt = wizardData.prompt as string | undefined;
-  const motionPrompt = wizardData.motion_prompt as string | undefined;
-  const prompt = userPrompt?.trim() || motionPrompt?.trim() || scenario.aiPrompt?.trim();
+  // Extract prompt using type-safe extractor with fallback
+  const prompt = extractPrompt(wizardData, scenario.aiPrompt);
 
   if (!prompt) {
     throw new Error("Prompt is required for video generation");
   }
 
-  // Get duration from wizardData
-  const duration = wizardData.duration as number | undefined;
+  // Extract duration using type-safe extractor (default: 5 seconds)
+  const duration = extractDuration(wizardData, 5);
 
   return {
     sourceImageBase64: photos[0],

package/src/domains/generation/wizard/infrastructure/utils/index.ts

@@ -0,0 +1,8 @@
+export {
+  extractString,
+  extractTrimmedString,
+  extractNumber,
+  extractSelection,
+  extractPrompt,
+  extractDuration,
+} from "./wizard-data-extractors";

package/src/domains/generation/wizard/infrastructure/utils/wizard-data-extractors.ts

@@ -0,0 +1,198 @@
+/**
+ * Wizard Data Extractors
+ * Type-safe utilities for extracting values from wizard data
+ *
+ * Pattern: Type Guards + Normalizers
+ * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html
+ * @see https://betterstack.com/community/guides/scaling-nodejs/typescript-type-guards/
+ */
+
+// ============================================================================
+// Type Guards
+// ============================================================================
+
+/**
+ * Check if value is a non-null object
+ */
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Check if object has a specific property
+ * Uses 'in' operator for safe property checking
+ */
+function hasProperty<K extends string>(
+  obj: Record<string, unknown>,
+  key: K,
+): obj is Record<K, unknown> {
+  return key in obj;
+}
+
+// ============================================================================
+// String Extractors
+// ============================================================================
+
+/**
+ * Extracts string from various input formats:
+ * - Direct string: "my text"
+ * - Object with text field: { text: "my text" }
+ * - Object with uri field (fallback): { uri: "my text" }
+ *
+ * @param value - The value to extract string from
+ * @returns The extracted string or undefined
+ */
+export function extractString(value: unknown): string | undefined {
+  // Direct string
+  if (typeof value === "string") {
+    return value;
+  }
+
+  // Object with text or uri field
+  if (isObject(value)) {
+    if (hasProperty(value, "text") && typeof value.text === "string") {
+      return value.text;
+    }
+    if (hasProperty(value, "uri") && typeof value.uri === "string") {
+      return value.uri;
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Extracts and trims string, returning undefined if empty
+ */
+export function extractTrimmedString(value: unknown): string | undefined {
+  const str = extractString(value);
+  const trimmed = str?.trim();
+  return trimmed && trimmed.length > 0 ? trimmed : undefined;
+}
+
+// ============================================================================
+// Number Extractors
+// ============================================================================
+
+/**
+ * Extracts number from various input formats:
+ * - Direct number: 5
+ * - Object with value field: { value: 5 }
+ * - Object with selection field: { selection: 5 }
+ *
+ * @param value - The value to extract number from
+ * @returns The extracted number or undefined
+ */
+export function extractNumber(value: unknown): number | undefined {
+  // Direct number
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return value;
+  }
+
+  // Object with value or selection field
+  if (isObject(value)) {
+    if (hasProperty(value, "value") && typeof value.value === "number") {
+      return value.value;
+    }
+    if (hasProperty(value, "selection") && typeof value.selection === "number") {
+      return value.selection;
+    }
+  }
+
+  return undefined;
+}
+
+// ============================================================================
+// Selection Extractors
+// ============================================================================
+
+/**
+ * Extracts selection value (string or string array) from wizard data
+ *
+ * @param value - The value to extract selection from
+ * @returns The extracted selection or undefined
+ */
+export function extractSelection(value: unknown): string | string[] | undefined {
+  // Direct string
+  if (typeof value === "string") {
+    return value;
+  }
+
+  // Direct string array
+  if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+    return value as string[];
+  }
+
+  // Object with selection field
+  if (isObject(value)) {
+    if (hasProperty(value, "selection")) {
+      const selection = value.selection;
+      if (typeof selection === "string") {
+        return selection;
+      }
+      if (Array.isArray(selection) && selection.every((v) => typeof v === "string")) {
+        return selection as string[];
+      }
+    }
+  }
+
+  return undefined;
+}
+
+// ============================================================================
+// Prompt Extractor (Specialized)
+// ============================================================================
+
+/**
+ * Extracts prompt from wizard data with fallback chain
+ * Checks multiple keys in order: prompt, motion_prompt, text
+ *
+ * @param wizardData - The wizard data object
+ * @param fallback - Optional fallback value (e.g., scenario.aiPrompt)
+ * @returns The extracted and trimmed prompt or undefined
+ */
+export function extractPrompt(
+  wizardData: Record<string, unknown>,
+  fallback?: string,
+): string | undefined {
+  // Priority chain for prompt keys
+  const promptKeys = ["prompt", "motion_prompt", "text", "userPrompt"];
+
+  for (const key of promptKeys) {
+    if (key in wizardData) {
+      const extracted = extractTrimmedString(wizardData[key]);
+      if (extracted) {
+        return extracted;
+      }
+    }
+  }
+
+  // Use fallback if provided
+  return fallback?.trim() || undefined;
+}
+
+// ============================================================================
+// Duration Extractor (Specialized)
+// ============================================================================
+
+/**
+ * Extracts duration from wizard data
+ * Handles both direct number and object with value field
+ *
+ * @param wizardData - The wizard data object
+ * @param defaultValue - Default duration if not found
+ * @returns The extracted duration in seconds
+ */
+export function extractDuration(
+  wizardData: Record<string, unknown>,
+  defaultValue = 5,
+): number {
+  const durationData = wizardData.duration;
+
+  const extracted = extractNumber(durationData);
+  if (extracted !== undefined && extracted > 0) {
+    return extracted;
+  }
+
+  return defaultValue;
+}

package/src/domains/generation/wizard/presentation/components/WizardHeader.tsx

@@ -0,0 +1,96 @@
+/**
+ * WizardHeader Component
+ * Header with back button on left, action button on right
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface WizardHeaderProps {
+  readonly onBack: () => void;
+  readonly onAction?: () => void;
+  readonly backLabel?: string;
+  readonly actionLabel?: string;
+  readonly isActionDisabled?: boolean;
+  readonly showAction?: boolean;
+}
+
+export const WizardHeader: React.FC<WizardHeaderProps> = ({
+  onBack,
+  onAction,
+  backLabel,
+  actionLabel,
+  isActionDisabled = false,
+  showAction = true,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.container, { paddingHorizontal: tokens.spacing.md }]}>
+      <TouchableOpacity onPress={onBack} style={styles.backButton}>
+        <AtomicIcon name="chevron-left" size="md" color="textPrimary" />
+        {backLabel ? (
+          <AtomicText type="bodyMedium" color="textPrimary">
+            {backLabel}
+          </AtomicText>
+        ) : null}
+      </TouchableOpacity>
+
+      {showAction && actionLabel ? (
+        <TouchableOpacity
+          onPress={onAction}
+          disabled={isActionDisabled}
+          style={[
+            styles.actionButton,
+            {
+              backgroundColor: isActionDisabled
+                ? tokens.colors.surfaceSecondary
+                : tokens.colors.primary,
+              borderRadius: tokens.radius.md,
+            },
+          ]}
+        >
+          <AtomicText
+            type="labelLarge"
+            style={{
+              color: isActionDisabled
+                ? tokens.colors.textSecondary
+                : tokens.colors.textInverse,
+              fontWeight: "600",
+            }}
+          >
+            {actionLabel}
+          </AtomicText>
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.placeholder} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+  backButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  actionButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  placeholder: {
+    width: 80,
+  },
+});

package/src/domains/generation/wizard/presentation/screens/TextInputScreen.tsx

@@ -1,17 +1,17 @@
 /**
  * TextInputScreen
  * Generic text input step for wizard flows
+ * Header: Back on left, Continue on right
  */
 
 import React, { useState, useCallback } from "react";
-import { View, ScrollView, TextInput } from "react-native";
+import { View, ScrollView, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicButton,
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { styles } from "./TextInputScreen.styles";
 import type { TextInputScreenProps } from "./TextInputScreen.types";
 
 export type {
@@ -48,17 +48,33 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {/* Header with Back on left, Continue on right */}
       <View style={[styles.header, { paddingHorizontal: tokens.spacing.md }]}>
-        <AtomicButton variant="text" size="sm" onPress={onBack}>
-          <View style={styles.backButtonContent}>
-            <AtomicIcon name="arrow-back" size="sm" color="textPrimary" />
-            {translations.backButton ? (
-              <AtomicText type="labelMedium" color="textPrimary" style={styles.backButtonText}>
-                {translations.backButton}
-              </AtomicText>
-            ) : null}
-          </View>
-        </AtomicButton>
+        <TouchableOpacity onPress={onBack} style={styles.backButton}>
+          <AtomicIcon name="chevron-left" size="md" color="textPrimary" />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={handleContinue}
+          disabled={!canContinue}
+          style={[
+            styles.continueButton,
+            {
+              backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceSecondary,
+              borderRadius: tokens.radius.md,
+            },
+          ]}
+        >
+          <AtomicText
+            type="labelLarge"
+            style={{
+              color: canContinue ? tokens.colors.textInverse : tokens.colors.textSecondary,
+              fontWeight: "600",
+            }}
+          >
+            {translations.continueButton}
+          </AtomicText>
+        </TouchableOpacity>
       </View>
 
       <ScrollView
@@ -120,12 +136,45 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
           </View>
         ) : null}
       </ScrollView>
-
-      <View style={[styles.footer, { padding: tokens.spacing.md }]}>
-        <AtomicButton variant="primary" size="lg" onPress={handleContinue} disabled={!canContinue} style={styles.continueButton}>
-          {translations.continueButton}
-        </AtomicButton>
-      </View>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+  backButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  continueButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  title: {
+    marginBottom: 8,
+  },
+  inputContainer: {
+    borderWidth: 1,
+    padding: 12,
+  },
+  textInput: {
+    fontSize: 16,
+    lineHeight: 22,
+  },
+  charCount: {
+    textAlign: "right",
+    marginTop: 8,
+  },
+});

package/src/features/text-to-image/presentation/screens/TextToImageWizardFlow.types.ts

@@ -0,0 +1,26 @@
+/**
+ * TextToImageWizardFlow Types
+ */
+
+import type { AlertMessages } from "../../../../presentation/hooks/generation/types";
+
+export interface TextToImageWizardFlowProps {
+  readonly model: string;
+  readonly userId?: string;
+  readonly isAuthenticated: boolean;
+  readonly hasPremium: boolean;
+  readonly creditBalance: number;
+  readonly isCreditsLoaded: boolean;
+  readonly onShowAuthModal: (callback: () => void) => void;
+  readonly onShowPaywall: () => void;
+  readonly onGenerationComplete?: () => void;
+  readonly onGenerationError?: (error: string) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly alertMessages?: AlertMessages;
+}
+
+export interface TextToImageFormState {
+  prompt: string;
+  selectedStyle: string;
+}

package/src/domains/generation/wizard/presentation/screens/TextInputScreen.styles.ts

@@ -1,48 +0,0 @@
-/**
- * TextInputScreen Styles
- */
-
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 8,
-  },
-  backButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  backButtonText: {
-    marginLeft: 4,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  title: {
-    marginBottom: 8,
-  },
-  inputContainer: {
-    borderWidth: 1,
-    padding: 12,
-  },
-  textInput: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  charCount: {
-    textAlign: "right",
-    marginTop: 4,
-  },
-  footer: {
-    borderTopWidth: 1,
-    borderTopColor: "rgba(0,0,0,0.1)",
-  },
-  continueButton: {
-    width: "100%",
-  },
-});