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

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

@@ -0,0 +1,154 @@
+/**
+ * useSingleImageFeature Hook
+ * Provider-agnostic hook for single image processing features
+ * App provides processRequest callback with their AI provider
+ */
+
+import { useCallback, useState } from "react";
+import type {
+  BaseFeatureState,
+  BaseFeatureActions,
+  FeatureProcessResult,
+  OnProgressCallback,
+  OnSelectImageCallback,
+  OnSaveCallback,
+} from "./types";
+
+/**
+ * Request passed to processRequest callback
+ */
+export interface SingleImageProcessRequest {
+  readonly imageUri: string;
+  readonly onProgress: OnProgressCallback;
+}
+
+/**
+ * Configuration for single image feature
+ */
+export interface UseSingleImageFeatureConfig {
+  readonly onSelectImage: OnSelectImageCallback;
+  readonly processRequest: (
+    request: SingleImageProcessRequest
+  ) => Promise<FeatureProcessResult>;
+  readonly onSave?: OnSaveCallback;
+  readonly onError?: (error: string) => void;
+  readonly onSuccess?: (url: string) => void;
+}
+
+/**
+ * State for single image feature
+ */
+export interface SingleImageFeatureState extends BaseFeatureState {
+  readonly imageUri: string | null;
+}
+
+/**
+ * Return type for single image feature hook
+ */
+export interface UseSingleImageFeatureReturn
+  extends SingleImageFeatureState,
+    BaseFeatureActions {
+  readonly selectImage: () => Promise<void>;
+  readonly process: () => Promise<void>;
+  readonly save: () => Promise<void>;
+}
+
+export function useSingleImageFeature(
+  config: UseSingleImageFeatureConfig
+): UseSingleImageFeatureReturn {
+  const [imageUri, setImageUri] = 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 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;
+    }
+
+    setIsProcessing(true);
+    setProgress(0);
+    setError(null);
+
+    try {
+      const result = await config.processRequest({
+        imageUri,
+        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, 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);
+    setProcessedUrl(null);
+    setIsProcessing(false);
+    setProgress(0);
+    setError(null);
+  }, []);
+
+  const clearError = useCallback((): void => {
+    setError(null);
+  }, []);
+
+  return {
+    imageUri,
+    processedUrl,
+    isProcessing,
+    progress,
+    error,
+    selectImage,
+    process,
+    save,
+    reset,
+    clearError,
+  };
+}

package/src/presentation/hooks/index.ts

@@ -2,6 +2,9 @@
  * Presentation Hooks
  */
 
+// Base Feature Hooks (Provider-Agnostic)
+export * from "./base";
+
 export { useGeneration } from "./use-generation";
 export type {
   UseGenerationOptions,
@@ -34,3 +37,9 @@ export type {
   PhotoGenerationState,
   PhotoGenerationStatus,
 } from "./photo-generation.types";
+
+export { useGenerationFlow } from "./useGenerationFlow";
+export type {
+  UseGenerationFlowOptions,
+  UseGenerationFlowReturn,
+} from "./useGenerationFlow";

package/src/presentation/hooks/useGenerationFlow.ts

@@ -0,0 +1,315 @@
+/**
+ * useGenerationFlow Hook
+ * Manages step-by-step generation flow state and navigation
+ *
+ * @package @umituz/react-native-ai-generation-content
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type {
+  GenerationFlowConfig,
+  GenerationFlowState,
+  PhotoStepData,
+  PhotoStepConfig,
+} from "../types/flow-config.types";
+
+export interface UseGenerationFlowOptions {
+  /** Flow configuration */
+  config: GenerationFlowConfig;
+  /** Callback when flow is complete */
+  onComplete?: (state: GenerationFlowState) => void;
+  /** Callback when step changes */
+  onStepChange?: (stepIndex: number, stepConfig: PhotoStepConfig) => void;
+}
+
+export interface UseGenerationFlowReturn {
+  /** Current flow state */
+  state: GenerationFlowState;
+  /** Current step configuration */
+  currentStepConfig: PhotoStepConfig | null;
+  /** Current step data */
+  currentStepData: PhotoStepData | null;
+  /** Whether can go to next step */
+  canGoNext: boolean;
+  /** Whether can go to previous step */
+  canGoBack: boolean;
+  /** Go to next step */
+  goNext: () => void;
+  /** Go to previous step */
+  goBack: () => void;
+  /** Update current step photo */
+  updatePhoto: (imageUri: string, previewUrl?: string) => void;
+  /** Update current step name */
+  updateName: (name: string) => void;
+  /** Update current step validation */
+  updateValidation: (isValid: boolean) => void;
+  /** Update text input */
+  updateTextInput: (text: string) => void;
+  /** Reset flow */
+  reset: () => void;
+  /** Complete flow */
+  complete: () => void;
+}
+
+/**
+ * Hook to manage generation flow state
+ */
+export const useGenerationFlow = ({
+  config,
+  onComplete,
+  onStepChange,
+}: UseGenerationFlowOptions): UseGenerationFlowReturn => {
+  // Initialize state
+  const [state, setState] = useState<GenerationFlowState>(() => ({
+    currentStepIndex: 0,
+    photoSteps: config.photoSteps.map((step) => ({
+      id: step.id,
+      imageUri: null,
+      previewUrl: undefined,
+      name: undefined,
+      isValid: undefined,
+      validationStatus: "pending",
+    })),
+    textInput: config.textInputStep
+      ? {
+          id: config.textInputStep.id,
+          text: "",
+          isValid: false,
+        }
+      : undefined,
+    isComplete: false,
+    isProcessing: false,
+  }));
+
+  // Get current step configuration
+  const currentStepConfig = useMemo(() => {
+    if (state.currentStepIndex >= config.photoSteps.length) {
+      return null;
+    }
+    return config.photoSteps[state.currentStepIndex];
+  }, [state.currentStepIndex, config.photoSteps]);
+
+  // Get current step data
+  const currentStepData = useMemo(() => {
+    if (state.currentStepIndex >= state.photoSteps.length) {
+      return null;
+    }
+    return state.photoSteps[state.currentStepIndex];
+  }, [state.currentStepIndex, state.photoSteps]);
+
+  // Check if current step is valid
+  const isCurrentStepValid = useMemo(() => {
+    if (!currentStepData || !currentStepConfig) {
+      return false;
+    }
+
+    // Check photo
+    if (!currentStepData.imageUri) {
+      return false;
+    }
+
+    // Check name if required
+    if (currentStepConfig.requireNameInput && !currentStepData.name) {
+      return false;
+    }
+
+    // Check validation if enabled
+    if (currentStepConfig.enableValidation && !currentStepData.isValid) {
+      return false;
+    }
+
+    return true;
+  }, [currentStepData, currentStepConfig]);
+
+  // Can go to next step
+  const canGoNext = useMemo(() => {
+    return isCurrentStepValid && !state.isProcessing;
+  }, [isCurrentStepValid, state.isProcessing]);
+
+  // Can go back
+  const canGoBack = useMemo(() => {
+    return (
+      state.currentStepIndex > 0 &&
+      config.behavior?.allowBack !== false &&
+      !state.isProcessing
+    );
+  }, [state.currentStepIndex, config.behavior?.allowBack, state.isProcessing]);
+
+  // Go to next step
+  const goNext = useCallback(() => {
+    if (!canGoNext) return;
+
+    setState((prev) => {
+      const nextIndex = prev.currentStepIndex + 1;
+
+      // If we've completed all photo steps, mark as complete
+      if (nextIndex >= config.photoSteps.length) {
+        const newState = {
+          ...prev,
+          isComplete: true,
+        };
+        onComplete?.(newState);
+        return newState;
+      }
+
+      // Move to next step
+      const newState = {
+        ...prev,
+        currentStepIndex: nextIndex,
+      };
+
+      // Notify step change
+      onStepChange?.(nextIndex, config.photoSteps[nextIndex]);
+
+      return newState;
+    });
+  }, [canGoNext, config.photoSteps, onComplete, onStepChange]);
+
+  // Go to previous step
+  const goBack = useCallback(() => {
+    if (!canGoBack) return;
+
+    setState((prev) => {
+      const prevIndex = prev.currentStepIndex - 1;
+      const newState = {
+        ...prev,
+        currentStepIndex: prevIndex,
+        isComplete: false,
+      };
+
+      // Notify step change
+      onStepChange?.(prevIndex, config.photoSteps[prevIndex]);
+
+      return newState;
+    });
+  }, [canGoBack, config.photoSteps, onStepChange]);
+
+  // Update photo
+  const updatePhoto = useCallback(
+    (imageUri: string, previewUrl?: string) => {
+      setState((prev) => {
+        const newPhotoSteps = [...prev.photoSteps];
+        newPhotoSteps[prev.currentStepIndex] = {
+          ...newPhotoSteps[prev.currentStepIndex],
+          imageUri,
+          previewUrl,
+          validationStatus: "pending",
+        };
+
+        return {
+          ...prev,
+          photoSteps: newPhotoSteps,
+        };
+      });
+    },
+    [],
+  );
+
+  // Update name
+  const updateName = useCallback((name: string) => {
+    setState((prev) => {
+      const newPhotoSteps = [...prev.photoSteps];
+      newPhotoSteps[prev.currentStepIndex] = {
+        ...newPhotoSteps[prev.currentStepIndex],
+        name,
+      };
+
+      return {
+        ...prev,
+        photoSteps: newPhotoSteps,
+      };
+    });
+  }, []);
+
+  // Update validation
+  const updateValidation = useCallback((isValid: boolean) => {
+    setState((prev) => {
+      const newPhotoSteps = [...prev.photoSteps];
+      newPhotoSteps[prev.currentStepIndex] = {
+        ...newPhotoSteps[prev.currentStepIndex],
+        isValid,
+        validationStatus: isValid ? "valid" : "invalid",
+      };
+
+      return {
+        ...prev,
+        photoSteps: newPhotoSteps,
+      };
+    });
+  }, []);
+
+  // Update text input
+  const updateTextInput = useCallback(
+    (text: string) => {
+      setState((prev) => {
+        if (!prev.textInput) return prev;
+
+        const minLength = config.textInputStep?.minLength ?? 0;
+        const maxLength = config.textInputStep?.maxLength ?? Infinity;
+        const isValid = text.length >= minLength && text.length <= maxLength;
+
+        return {
+          ...prev,
+          textInput: {
+            ...prev.textInput,
+            text,
+            isValid,
+          },
+        };
+      });
+    },
+    [config.textInputStep],
+  );
+
+  // Reset flow
+  const reset = useCallback(() => {
+    setState({
+      currentStepIndex: 0,
+      photoSteps: config.photoSteps.map((step) => ({
+        id: step.id,
+        imageUri: null,
+        previewUrl: undefined,
+        name: undefined,
+        isValid: undefined,
+        validationStatus: "pending",
+      })),
+      textInput: config.textInputStep
+        ? {
+            id: config.textInputStep.id,
+            text: "",
+            isValid: false,
+          }
+        : undefined,
+      isComplete: false,
+      isProcessing: false,
+    });
+  }, [config.photoSteps, config.textInputStep]);
+
+  // Complete flow
+  const complete = useCallback(() => {
+    setState((prev) => {
+      const newState = {
+        ...prev,
+        isComplete: true,
+      };
+      onComplete?.(newState);
+      return newState;
+    });
+  }, [onComplete]);
+
+  return {
+    state,
+    currentStepConfig,
+    currentStepData,
+    canGoNext,
+    canGoBack,
+    goNext,
+    goBack,
+    updatePhoto,
+    updateName,
+    updateValidation,
+    updateTextInput,
+    reset,
+    complete,
+  };
+};