@umituz/react-native-ai-generation-content 1.14.0 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -67,7 +67,7 @@
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@umituz/react-native-animation": "*",
-    "@umituz/react-native-design-system": "^2.3.33",
+    "@umituz/react-native-design-system": "^2.4.1",
     "@umituz/react-native-firebase": "^1.13.20",
     "@umituz/react-native-haptics": "^1.0.2",
     "@umituz/react-native-image": "*",

package/src/features/audio-generation/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/colorization/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/face-swap/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

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

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/image-captioning/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/inpainting/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/photo-restoration/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/sketch-to-image/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/style-transfer/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/text-to-image/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/text-to-video/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/features/upscaling/index.ts

@@ -1,2 +1 @@
 export * from './domain/entities';
-export * from './presentation/hooks';

package/src/index.ts

@@ -186,6 +186,7 @@ export {
   usePendingJobs,
   useBackgroundGeneration,
   usePhotoGeneration,
+  useGenerationFlow,
 } from "./presentation/hooks";
 
 export type {
@@ -203,6 +204,8 @@ export type {
   PhotoGenerationConfig,
   PhotoGenerationState,
   PhotoGenerationStatus,
+  UseGenerationFlowOptions,
+  UseGenerationFlowReturn,
 } from "./presentation/hooks";
 
 // =============================================================================
@@ -222,6 +225,7 @@ export {
   ResultStoryCard,
   ResultActions,
   DEFAULT_RESULT_CONFIG,
+  PhotoStep,
 } from "./presentation/components";
 
 export type {
@@ -246,8 +250,28 @@ export type {
   ResultActionsConfig,
   ResultLayoutConfig,
   ResultActionButton,
+  PhotoStepProps,
 } from "./presentation/components";
 
+// =============================================================================
+// PRESENTATION LAYER - Flow Configuration
+// =============================================================================
+
+export {
+  DEFAULT_SINGLE_PHOTO_FLOW,
+  DEFAULT_DUAL_PHOTO_FLOW,
+} from "./presentation/types/flow-config.types";
+
+export type {
+  PhotoStepConfig,
+  TextInputStepConfig,
+  PreviewStepConfig,
+  GenerationFlowConfig,
+  PhotoStepData,
+  TextInputStepData,
+  GenerationFlowState,
+} from "./presentation/types/flow-config.types";
+
 // =============================================================================
 // DOMAINS - AI Prompts
 // =============================================================================

package/src/presentation/components/index.ts

@@ -22,3 +22,4 @@ export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
 export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
 
 export * from "./result";
+export * from "./photo-step";

package/src/presentation/components/photo-step/PhotoStep.tsx

@@ -0,0 +1,96 @@
+/**
+ * PhotoStep Component
+ * Configurable photo upload step using design system components
+ *
+ * @package @umituz/react-native-ai-generation-content
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, type ViewStyle, type StyleProp } from "react-native";
+import {
+  StepHeader,
+  PhotoUploadCard,
+} from "@umituz/react-native-design-system";
+import type { PhotoStepConfig } from "../../types/flow-config.types";
+
+export interface PhotoStepProps {
+  /** Step configuration */
+  config: PhotoStepConfig;
+  /** Current photo URI */
+  imageUri: string | null;
+  /** Photo preview URL */
+  previewUrl?: string;
+  /** Whether photo is being validated */
+  isValidating?: boolean;
+  /** Whether photo is valid */
+  isValid?: boolean | null;
+  /** Handler for photo selection */
+  onPhotoSelect: () => void;
+  /** Whether photo selection is disabled */
+  disabled?: boolean;
+  /** Step title */
+  title: string;
+  /** Step subtitle */
+  subtitle?: string;
+  /** Translation strings for photo upload card */
+  translations: {
+    tapToUpload: string;
+    selectPhoto: string;
+    change: string;
+    analyzing?: string;
+  };
+  /** Additional content to render below photo card */
+  children?: React.ReactNode;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+}
+
+export const PhotoStep: React.FC<PhotoStepProps> = ({
+  config,
+  imageUri,
+  previewUrl,
+  isValidating = false,
+  isValid = null,
+  onPhotoSelect,
+  disabled = false,
+  title,
+  subtitle,
+  translations,
+  children,
+  style,
+}) => {
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+      }),
+    [],
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Step Header */}
+      <StepHeader
+        title={title}
+        subtitle={subtitle}
+        config={config.header}
+      />
+
+      {/* Photo Upload Card */}
+      <PhotoUploadCard
+        imageUri={previewUrl || imageUri}
+        onPress={onPhotoSelect}
+        isValidating={isValidating}
+        isValid={config.enableValidation ? isValid : null}
+        disabled={disabled}
+        config={config.photoCard}
+        translations={translations}
+      />
+
+      {/* Additional content (e.g., name input, tips, etc.) */}
+      {children}
+    </View>
+  );
+};

package/src/presentation/components/photo-step/index.ts

@@ -0,0 +1,2 @@
+export { PhotoStep } from "./PhotoStep";
+export type { PhotoStepProps } from "./PhotoStep";

package/src/presentation/hooks/base/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Base Feature Hooks
+ * Provider-agnostic hooks for AI image processing features
+ */
+
+export * from "./types";
+export * from "./use-single-image-feature";
+export * from "./use-dual-image-feature";
+export * from "./use-image-with-prompt-feature";

package/src/presentation/hooks/base/types.ts

@@ -0,0 +1,47 @@
+/**
+ * Base Feature Hook Types
+ * Provider-agnostic types for feature hooks
+ */
+
+/**
+ * Result from AI processing
+ */
+export interface FeatureProcessResult {
+  readonly success: boolean;
+  readonly outputUrl?: string;
+  readonly error?: string;
+  readonly metadata?: Record<string, unknown>;
+}
+
+/**
+ * Base state shared by all feature hooks
+ */
+export interface BaseFeatureState {
+  readonly isProcessing: boolean;
+  readonly progress: number;
+  readonly error: string | null;
+  readonly processedUrl: string | null;
+}
+
+/**
+ * Base actions shared by all feature hooks
+ */
+export interface BaseFeatureActions {
+  readonly reset: () => void;
+  readonly clearError: () => void;
+}
+
+/**
+ * Progress callback type
+ */
+export type OnProgressCallback = (progress: number) => void;
+
+/**
+ * Image selection callback - provided by app
+ */
+export type OnSelectImageCallback = () => Promise<string | null>;
+
+/**
+ * Save callback - provided by app
+ */
+export type OnSaveCallback = (url: string) => Promise<void>;

package/src/presentation/hooks/base/use-dual-image-feature.ts

@@ -0,0 +1,178 @@
+/**
+ * useDualImageFeature Hook
+ * Provider-agnostic hook for dual image processing features
+ * Examples: AI Hug, AI Kiss, Face Swap
+ */
+
+import { useCallback, useState } from "react";
+import type {
+  BaseFeatureState,
+  BaseFeatureActions,
+  FeatureProcessResult,
+  OnProgressCallback,
+  OnSelectImageCallback,
+  OnSaveCallback,
+} from "./types";
+
+/**
+ * Request passed to processRequest callback
+ */
+export interface DualImageProcessRequest {
+  readonly firstImageUri: string;
+  readonly secondImageUri: string;
+  readonly onProgress: OnProgressCallback;
+}
+
+/**
+ * Configuration for dual image feature
+ */
+export interface UseDualImageFeatureConfig {
+  readonly onSelectFirstImage: OnSelectImageCallback;
+  readonly onSelectSecondImage: OnSelectImageCallback;
+  readonly processRequest: (
+    request: DualImageProcessRequest
+  ) => Promise<FeatureProcessResult>;
+  readonly onSave?: OnSaveCallback;
+  readonly onError?: (error: string) => void;
+  readonly onSuccess?: (url: string) => void;
+}
+
+/**
+ * State for dual image feature
+ */
+export interface DualImageFeatureState extends BaseFeatureState {
+  readonly firstImageUri: string | null;
+  readonly secondImageUri: string | null;
+}
+
+/**
+ * Return type for dual image feature hook
+ */
+export interface UseDualImageFeatureReturn
+  extends DualImageFeatureState,
+    BaseFeatureActions {
+  readonly selectFirstImage: () => Promise<void>;
+  readonly selectSecondImage: () => Promise<void>;
+  readonly process: () => Promise<void>;
+  readonly save: () => Promise<void>;
+}
+
+export function useDualImageFeature(
+  config: UseDualImageFeatureConfig
+): UseDualImageFeatureReturn {
+  const [firstImageUri, setFirstImageUri] = useState<string | null>(null);
+  const [secondImageUri, setSecondImageUri] = useState<string | null>(null);
+  const [processedUrl, setProcessedUrl] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const selectFirstImage = useCallback(async (): Promise<void> => {
+    try {
+      const uri = await config.onSelectFirstImage();
+      if (uri) {
+        setFirstImageUri(uri);
+        setError(null);
+        setProcessedUrl(null);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "error.selectImage";
+      setError(message);
+      config.onError?.(message);
+    }
+  }, [config]);
+
+  const selectSecondImage = useCallback(async (): Promise<void> => {
+    try {
+      const uri = await config.onSelectSecondImage();
+      if (uri) {
+        setSecondImageUri(uri);
+        setError(null);
+        setProcessedUrl(null);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "error.selectImage";
+      setError(message);
+      config.onError?.(message);
+    }
+  }, [config]);
+
+  const process = useCallback(async (): Promise<void> => {
+    if (!firstImageUri || !secondImageUri) {
+      const message = "error.noImages";
+      setError(message);
+      config.onError?.(message);
+      return;
+    }
+
+    setIsProcessing(true);
+    setProgress(0);
+    setError(null);
+
+    try {
+      const result = await config.processRequest({
+        firstImageUri,
+        secondImageUri,
+        onProgress: setProgress,
+      });
+
+      if (result.success && result.outputUrl) {
+        setProcessedUrl(result.outputUrl);
+        config.onSuccess?.(result.outputUrl);
+      } else {
+        const message = result.error || "error.processing";
+        setError(message);
+        config.onError?.(message);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "error.processing";
+      setError(message);
+      config.onError?.(message);
+    } finally {
+      setIsProcessing(false);
+      setProgress(0);
+    }
+  }, [firstImageUri, secondImageUri, config]);
+
+  const save = useCallback(async (): Promise<void> => {
+    if (!processedUrl || !config.onSave) {
+      return;
+    }
+
+    try {
+      await config.onSave(processedUrl);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "error.save";
+      setError(message);
+      config.onError?.(message);
+    }
+  }, [processedUrl, config]);
+
+  const reset = useCallback((): void => {
+    setFirstImageUri(null);
+    setSecondImageUri(null);
+    setProcessedUrl(null);
+    setIsProcessing(false);
+    setProgress(0);
+    setError(null);
+  }, []);
+
+  const clearError = useCallback((): void => {
+    setError(null);
+  }, []);
+
+  return {
+    firstImageUri,
+    secondImageUri,
+    processedUrl,
+    isProcessing,
+    progress,
+    error,
+    selectFirstImage,
+    selectSecondImage,
+    process,
+    save,
+    reset,
+    clearError,
+  };
+}

package/src/presentation/hooks/base/use-image-with-prompt-feature.ts

@@ -0,0 +1,170 @@
+/**
+ * useImageWithPromptFeature Hook
+ * Provider-agnostic hook for image + prompt processing features
+ * Examples: Inpainting, Style Transfer, Background Replacement
+ */
+
+import { useCallback, useState } from "react";
+import type {
+  BaseFeatureState,
+  BaseFeatureActions,
+  FeatureProcessResult,
+  OnProgressCallback,
+  OnSelectImageCallback,
+  OnSaveCallback,
+} from "./types";
+
+/**
+ * Request passed to processRequest callback
+ */
+export interface ImageWithPromptProcessRequest {
+  readonly imageUri: string;
+  readonly prompt: string;
+  readonly onProgress: OnProgressCallback;
+}
+
+/**
+ * Configuration for image with prompt feature
+ */
+export interface UseImageWithPromptFeatureConfig {
+  readonly onSelectImage: OnSelectImageCallback;
+  readonly processRequest: (
+    request: ImageWithPromptProcessRequest
+  ) => Promise<FeatureProcessResult>;
+  readonly onSave?: OnSaveCallback;
+  readonly onError?: (error: string) => void;
+  readonly onSuccess?: (url: string) => void;
+  readonly requirePrompt?: boolean;
+}
+
+/**
+ * State for image with prompt feature
+ */
+export interface ImageWithPromptFeatureState extends BaseFeatureState {
+  readonly imageUri: string | null;
+  readonly prompt: string;
+}
+
+/**
+ * Return type for image with prompt feature hook
+ */
+export interface UseImageWithPromptFeatureReturn
+  extends ImageWithPromptFeatureState,
+    BaseFeatureActions {
+  readonly selectImage: () => Promise<void>;
+  readonly setPrompt: (prompt: string) => void;
+  readonly process: () => Promise<void>;
+  readonly save: () => Promise<void>;
+}
+
+export function useImageWithPromptFeature(
+  config: UseImageWithPromptFeatureConfig
+): UseImageWithPromptFeatureReturn {
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [prompt, setPrompt] = useState<string>("");
+  const [processedUrl, setProcessedUrl] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const selectImage = useCallback(async (): Promise<void> => {
+    try {
+      const uri = await config.onSelectImage();
+      if (uri) {
+        setImageUri(uri);
+        setError(null);
+        setProcessedUrl(null);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "error.selectImage";
+      setError(message);
+      config.onError?.(message);
+    }
+  }, [config]);
+
+  const process = useCallback(async (): Promise<void> => {
+    if (!imageUri) {
+      const message = "error.noImage";
+      setError(message);
+      config.onError?.(message);
+      return;
+    }
+
+    if (config.requirePrompt && !prompt.trim()) {
+      const message = "error.noPrompt";
+      setError(message);
+      config.onError?.(message);
+      return;
+    }
+
+    setIsProcessing(true);
+    setProgress(0);
+    setError(null);
+
+    try {
+      const result = await config.processRequest({
+        imageUri,
+        prompt: prompt.trim(),
+        onProgress: setProgress,
+      });
+
+      if (result.success && result.outputUrl) {
+        setProcessedUrl(result.outputUrl);
+        config.onSuccess?.(result.outputUrl);
+      } else {
+        const message = result.error || "error.processing";
+        setError(message);
+        config.onError?.(message);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "error.processing";
+      setError(message);
+      config.onError?.(message);
+    } finally {
+      setIsProcessing(false);
+      setProgress(0);
+    }
+  }, [imageUri, prompt, config]);
+
+  const save = useCallback(async (): Promise<void> => {
+    if (!processedUrl || !config.onSave) {
+      return;
+    }
+
+    try {
+      await config.onSave(processedUrl);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "error.save";
+      setError(message);
+      config.onError?.(message);
+    }
+  }, [processedUrl, config]);
+
+  const reset = useCallback((): void => {
+    setImageUri(null);
+    setPrompt("");
+    setProcessedUrl(null);
+    setIsProcessing(false);
+    setProgress(0);
+    setError(null);
+  }, []);
+
+  const clearError = useCallback((): void => {
+    setError(null);
+  }, []);
+
+  return {
+    imageUri,
+    prompt,
+    processedUrl,
+    isProcessing,
+    progress,
+    error,
+    selectImage,
+    setPrompt,
+    process,
+    save,
+    reset,
+    clearError,
+  };
+}