@umituz/react-native-ai-generation-content 1.17.143 → 1.17.145

package/src/presentation/hooks/flow-state.utils.ts

@@ -0,0 +1,101 @@
+/**
+ * Flow State Utilities
+ * State initialization and update helpers for generation flow
+ *
+ * @package @umituz/react-native-ai-generation-content
+ */
+
+import type {
+  GenerationFlowConfig,
+  GenerationFlowState,
+  PhotoStepData,
+  PhotoStepConfig,
+} from "../types/flow-config.types";
+
+/**
+ * Create initial flow state from config
+ */
+export function createInitialFlowState(
+  config: GenerationFlowConfig,
+): GenerationFlowState {
+  return {
+    currentStepIndex: 0,
+    photoSteps: config.photoSteps.map((step) => ({
+      id: step.id,
+      imageUri: null,
+      previewUrl: undefined,
+      name: undefined,
+      isValid: undefined,
+      validationStatus: "pending" as const,
+    })),
+    textInput: config.textInputStep
+      ? {
+          id: config.textInputStep.id,
+          text: "",
+          isValid: false,
+        }
+      : undefined,
+    isComplete: false,
+    isProcessing: false,
+  };
+}
+
+/**
+ * Update photo step in state
+ */
+export function updatePhotoStep(
+  state: GenerationFlowState,
+  stepIndex: number,
+  updates: Partial<PhotoStepData>,
+): GenerationFlowState {
+  const newPhotoSteps = [...state.photoSteps];
+  newPhotoSteps[stepIndex] = {
+    ...newPhotoSteps[stepIndex],
+    ...updates,
+  };
+
+  return {
+    ...state,
+    photoSteps: newPhotoSteps,
+  };
+}
+
+/**
+ * Check if current step is valid
+ */
+export function isStepValid(
+  stepData: PhotoStepData | null,
+  stepConfig: PhotoStepConfig | null,
+): boolean {
+  if (!stepData || !stepConfig) {
+    return false;
+  }
+
+  // Check photo
+  if (!stepData.imageUri) {
+    return false;
+  }
+
+  // Check name if required
+  if (stepConfig.requireNameInput && !stepData.name) {
+    return false;
+  }
+
+  // Check validation if enabled
+  if (stepConfig.enableValidation && !stepData.isValid) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Check if text input is valid
+ */
+export function isTextInputValid(
+  text: string,
+  minLength: number,
+  maxLength: number,
+): boolean {
+  return text.length >= minLength && text.length <= maxLength;
+}

package/src/presentation/hooks/useGenerationFlow.ts

@@ -12,42 +12,32 @@ import type {
   PhotoStepData,
   PhotoStepConfig,
 } from "../types/flow-config.types";
+import {
+  createInitialFlowState,
+  updatePhotoStep,
+  isStepValid,
+  isTextInputValid,
+} from "./flow-state.utils";
 
 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;
 }
 
@@ -59,186 +49,90 @@ export const useGenerationFlow = ({
   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,
-  }));
+  const [state, setState] = useState<GenerationFlowState>(() =>
+    createInitialFlowState(config),
+  );
 
-  // Get current step configuration
   const currentStepConfig = useMemo(() => {
-    if (state.currentStepIndex >= config.photoSteps.length) {
-      return null;
-    }
+    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;
-    }
+    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]);
+  const isCurrentStepValid = useMemo(
+    () => isStepValid(currentStepData, currentStepConfig),
+    [currentStepData, currentStepConfig],
+  );
 
-  // Can go to next step
-  const canGoNext = useMemo(() => {
-    return isCurrentStepValid && !state.isProcessing;
-  }, [isCurrentStepValid, state.isProcessing]);
+  const canGoNext = useMemo(
+    () => isCurrentStepValid && !state.isProcessing,
+    [isCurrentStepValid, state.isProcessing],
+  );
 
-  // Can go back
-  const canGoBack = useMemo(() => {
-    return (
+  const canGoBack = useMemo(
+    () =>
       state.currentStepIndex > 0 &&
       config.behavior?.allowBack !== false &&
-      !state.isProcessing
-    );
-  }, [state.currentStepIndex, config.behavior?.allowBack, state.isProcessing]);
+      !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,
-        };
+        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;
+      return { ...prev, currentStepIndex: nextIndex };
     });
   }, [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;
+      return { ...prev, currentStepIndex: prevIndex, isComplete: false };
     });
   }, [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,
-        };
-      });
-    },
-    [],
-  );
+  const updatePhoto = useCallback((imageUri: string, previewUrl?: string) => {
+    setState((prev) =>
+      updatePhotoStep(prev, prev.currentStepIndex, {
+        imageUri,
+        previewUrl,
+        validationStatus: "pending",
+      }),
+    );
+  }, []);
 
-  // Update name
   const updateName = useCallback((name: string) => {
-    setState((prev) => {
-      const newPhotoSteps = [...prev.photoSteps];
-      newPhotoSteps[prev.currentStepIndex] = {
-        ...newPhotoSteps[prev.currentStepIndex],
-        name,
-      };
-
-      return {
-        ...prev,
-        photoSteps: newPhotoSteps,
-      };
-    });
+    setState((prev) =>
+      updatePhotoStep(prev, prev.currentStepIndex, { name }),
+    );
   }, []);
 
-  // Update validation
   const updateValidation = useCallback((isValid: boolean) => {
-    setState((prev) => {
-      const newPhotoSteps = [...prev.photoSteps];
-      newPhotoSteps[prev.currentStepIndex] = {
-        ...newPhotoSteps[prev.currentStepIndex],
+    setState((prev) =>
+      updatePhotoStep(prev, prev.currentStepIndex, {
         isValid,
         validationStatus: isValid ? "valid" : "invalid",
-      };
-
-      return {
-        ...prev,
-        photoSteps: newPhotoSteps,
-      };
-    });
+      }),
+    );
   }, []);
 
-  // Update text input
   const updateTextInput = useCallback(
     (text: string) => {
       setState((prev) => {
@@ -246,14 +140,13 @@ export const useGenerationFlow = ({
 
         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,
+            isValid: isTextInputValid(text, minLength, maxLength),
           },
         };
       });
@@ -261,37 +154,13 @@ export const useGenerationFlow = ({
     [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]);
+    setState(createInitialFlowState(config));
+  }, [config]);
 
-  // Complete flow
   const complete = useCallback(() => {
     setState((prev) => {
-      const newState = {
-        ...prev,
-        isComplete: true,
-      };
+      const newState = { ...prev, isComplete: true };
       onComplete?.(newState);
       return newState;
     });

package/src/presentation/types/flow-config.types.ts

@@ -99,105 +99,11 @@ export interface GenerationFlowConfig {
   };
 }
 
-/**
- * Default single photo flow configuration
- */
-export const DEFAULT_SINGLE_PHOTO_FLOW: GenerationFlowConfig = {
-  photoSteps: [
-    {
-      enabled: true,
-      order: 1,
-      id: "photo-1",
-      header: {
-        showStepIndicator: false,
-        titleAlignment: "center",
-        titleFontSize: 28,
-        subtitleFontSize: 16,
-      },
-      photoCard: {
-        aspectRatio: 1,
-        borderRadius: 28,
-        showValidationStatus: true,
-        allowChange: true,
-        borderStyle: "dashed",
-      },
-      requireNameInput: true,
-      enableValidation: false,
-      validationType: "none",
-      showPhotoTips: true,
-    },
-  ],
-  behavior: {
-    allowBack: false,
-    showProgress: false,
-    autoAdvance: false,
-    requireAuth: false,
-    checkFeatureGate: true,
-  },
-};
-
-/**
- * Default dual photo flow configuration
- */
-export const DEFAULT_DUAL_PHOTO_FLOW: GenerationFlowConfig = {
-  photoSteps: [
-    {
-      enabled: true,
-      order: 1,
-      id: "partner-a",
-      header: {
-        showStepIndicator: true,
-        currentStep: 1,
-        totalSteps: 2,
-        titleAlignment: "center",
-        titleFontSize: 28,
-        subtitleFontSize: 16,
-      },
-      photoCard: {
-        aspectRatio: 1,
-        borderRadius: 28,
-        showValidationStatus: true,
-        allowChange: true,
-        borderStyle: "dashed",
-      },
-      requireNameInput: true,
-      enableValidation: false,
-      validationType: "none",
-      showPhotoTips: true,
-    },
-    {
-      enabled: true,
-      order: 2,
-      id: "partner-b",
-      header: {
-        showStepIndicator: true,
-        currentStep: 2,
-        totalSteps: 2,
-        titleAlignment: "center",
-        titleFontSize: 28,
-        subtitleFontSize: 16,
-      },
-      photoCard: {
-        aspectRatio: 1,
-        borderRadius: 28,
-        showValidationStatus: true,
-        allowChange: true,
-        borderStyle: "dashed",
-      },
-      requireNameInput: true,
-      enableValidation: false,
-      validationType: "none",
-      showPhotoTips: false,
-    },
-  ],
-  behavior: {
-    allowBack: true,
-    showProgress: true,
-    autoAdvance: false,
-    requireAuth: false,
-    checkFeatureGate: true,
-  },
-};
+// Re-export default configs from separate file
+export {
+  DEFAULT_SINGLE_PHOTO_FLOW,
+  DEFAULT_DUAL_PHOTO_FLOW,
+} from "./flow-default-configs";
 
 /**
  * Step data structure

package/src/presentation/types/flow-default-configs.ts

@@ -0,0 +1,106 @@
+/**
+ * Flow Default Configurations
+ * Default configurations for generation flows
+ */
+
+import type { GenerationFlowConfig } from "./flow-config.types";
+
+/**
+ * Default single photo flow configuration
+ */
+export const DEFAULT_SINGLE_PHOTO_FLOW: GenerationFlowConfig = {
+  photoSteps: [
+    {
+      enabled: true,
+      order: 1,
+      id: "photo-1",
+      header: {
+        showStepIndicator: false,
+        titleAlignment: "center",
+        titleFontSize: 28,
+        subtitleFontSize: 16,
+      },
+      photoCard: {
+        aspectRatio: 1,
+        borderRadius: 28,
+        showValidationStatus: true,
+        allowChange: true,
+        borderStyle: "dashed",
+      },
+      requireNameInput: true,
+      enableValidation: false,
+      validationType: "none",
+      showPhotoTips: true,
+    },
+  ],
+  behavior: {
+    allowBack: false,
+    showProgress: false,
+    autoAdvance: false,
+    requireAuth: false,
+    checkFeatureGate: true,
+  },
+};
+
+/**
+ * Default dual photo flow configuration
+ */
+export const DEFAULT_DUAL_PHOTO_FLOW: GenerationFlowConfig = {
+  photoSteps: [
+    {
+      enabled: true,
+      order: 1,
+      id: "partner-a",
+      header: {
+        showStepIndicator: true,
+        currentStep: 1,
+        totalSteps: 2,
+        titleAlignment: "center",
+        titleFontSize: 28,
+        subtitleFontSize: 16,
+      },
+      photoCard: {
+        aspectRatio: 1,
+        borderRadius: 28,
+        showValidationStatus: true,
+        allowChange: true,
+        borderStyle: "dashed",
+      },
+      requireNameInput: true,
+      enableValidation: false,
+      validationType: "none",
+      showPhotoTips: true,
+    },
+    {
+      enabled: true,
+      order: 2,
+      id: "partner-b",
+      header: {
+        showStepIndicator: true,
+        currentStep: 2,
+        totalSteps: 2,
+        titleAlignment: "center",
+        titleFontSize: 28,
+        subtitleFontSize: 16,
+      },
+      photoCard: {
+        aspectRatio: 1,
+        borderRadius: 28,
+        showValidationStatus: true,
+        allowChange: true,
+        borderStyle: "dashed",
+      },
+      requireNameInput: true,
+      enableValidation: false,
+      validationType: "none",
+      showPhotoTips: false,
+    },
+  ],
+  behavior: {
+    allowBack: true,
+    showProgress: true,
+    autoAdvance: false,
+    requireAuth: false,
+    checkFeatureGate: true,
+  },
+};

package/src/domains/creations/presentation/hooks/useStatusFilter.ts

@@ -1,54 +0,0 @@
-/**
- * useStatusFilter Hook
- * Handles status filtering (completed, pending, processing, failed)
- * SOLID: Single Responsibility - Only handles status filter state
- */
-
-import { useState, useCallback, useMemo } from "react";
-import type { FilterOption } from "../../domain/types/creation-filter";
-
-interface UseStatusFilterProps {
-  readonly options: FilterOption[];
-  readonly t: (key: string) => string;
-  readonly defaultId?: string;
-}
-
-interface UseStatusFilterReturn {
-  readonly selectedId: string;
-  readonly filterOptions: FilterOption[];
-  readonly hasActiveFilter: boolean;
-  readonly selectFilter: (id: string) => void;
-  readonly clearFilter: () => void;
-}
-
-export function useStatusFilter({
-  options,
-  t,
-  defaultId = "all"
-}: UseStatusFilterProps): UseStatusFilterReturn {
-  const [selectedId, setSelectedId] = useState(defaultId);
-
-  const filterOptions = useMemo(() =>
-    options.map(opt => ({
-      ...opt,
-      label: opt.labelKey ? t(opt.labelKey) : opt.label
-    })),
-    [options, t]
-  );
-
-  const selectFilter = useCallback((id: string) => {
-    setSelectedId(id);
-  }, []);
-
-  const clearFilter = useCallback(() => {
-    setSelectedId(defaultId);
-  }, [defaultId]);
-
-  return {
-    selectedId,
-    filterOptions,
-    hasActiveFilter: selectedId !== defaultId,
-    selectFilter,
-    clearFilter
-  };
-}