@umituz/react-native-ai-generation-content 1.27.23 → 1.27.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.27.23",
+  "version": "1.27.25",
   "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/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/index.ts

@@ -152,3 +152,11 @@ export * from "./domains/generation";
 export * from "./features/text-to-image";
 export * from "./features/text-to-video";
 export * from "./features/image-to-video";
+
+// Wizard Flows - Direct exports
+export { TextToImageWizardFlow } from "./features/text-to-image/presentation/screens/TextToImageWizardFlow";
+export type { TextToImageWizardFlowProps } from "./features/text-to-image/presentation/screens/TextToImageWizardFlow";
+export { TextToVideoWizardFlow } from "./features/text-to-video/presentation/screens/TextToVideoWizardFlow";
+export type { TextToVideoWizardFlowProps } from "./features/text-to-video/presentation/screens/TextToVideoWizardFlow";
+export { ImageToVideoWizardFlow } from "./features/image-to-video/presentation/screens/ImageToVideoWizardFlow";
+export type { ImageToVideoWizardFlowProps } from "./features/image-to-video/presentation/screens/ImageToVideoWizardFlow";

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%",
-  },
-});