@umituz/react-native-ai-generation-content 1.65.1 → 1.65.2

package/src/presentation/hooks/useGenerationFlow.ts

@@ -1,165 +1,69 @@
 /**
  * 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";
+import { createInitialFlowState, isStepValid } from "./flow-state.utils";
 import {
-  createInitialFlowState,
-  updatePhotoStep,
-  isStepValid,
-  isTextInputValid,
-} from "./flow-state.utils";
-
-export interface UseGenerationFlowOptions {
-  config: GenerationFlowConfig;
-  onComplete?: (state: GenerationFlowState) => void;
-  onStepChange?: (stepIndex: number, stepConfig: PhotoStepConfig) => void;
-}
+  createPhotoUpdater,
+  createNameUpdater,
+  createValidationUpdater,
+  createTextInputUpdater,
+} from "./generation-flow-updates";
+import {
+  createGoNextHandler,
+  createGoBackHandler,
+  createCompleteHandler,
+} from "./generation-flow-navigation";
+import type {
+  UseGenerationFlowOptions,
+  UseGenerationFlowReturn,
+} from "./generation-flow.types";
 
-export interface UseGenerationFlowReturn {
-  state: GenerationFlowState;
-  currentStepConfig: PhotoStepConfig | null;
-  currentStepData: PhotoStepData | null;
-  canGoNext: boolean;
-  canGoBack: boolean;
-  goNext: () => void;
-  goBack: () => void;
-  updatePhoto: (imageUri: string, previewUrl?: string) => void;
-  updateName: (name: string) => void;
-  updateValidation: (isValid: boolean) => void;
-  updateTextInput: (text: string) => void;
-  reset: () => void;
-  complete: () => void;
-}
+export type { UseGenerationFlowOptions, UseGenerationFlowReturn };
 
-/**
- * Hook to manage generation flow state
- */
 export const useGenerationFlow = ({
   config,
   onComplete,
   onStepChange,
 }: UseGenerationFlowOptions): UseGenerationFlowReturn => {
-  const [state, setState] = useState<GenerationFlowState>(() =>
-    createInitialFlowState(config),
-  );
+  const [state, setState] = useState(() => createInitialFlowState(config));
 
-  const currentStepConfig = useMemo(() => {
-    if (state.currentStepIndex >= config.photoSteps.length) return null;
-    return config.photoSteps[state.currentStepIndex];
-  }, [state.currentStepIndex, config.photoSteps]);
+  const currentStepConfig = useMemo(
+    () => (state.currentStepIndex >= config.photoSteps.length ? null : config.photoSteps[state.currentStepIndex]),
+    [state.currentStepIndex, config.photoSteps]
+  );
 
-  const currentStepData = useMemo(() => {
-    if (state.currentStepIndex >= state.photoSteps.length) return null;
-    return state.photoSteps[state.currentStepIndex];
-  }, [state.currentStepIndex, state.photoSteps]);
+  const currentStepData = useMemo(
+    () => (state.currentStepIndex >= state.photoSteps.length ? null : state.photoSteps[state.currentStepIndex]),
+    [state.currentStepIndex, state.photoSteps]
+  );
 
   const isCurrentStepValid = useMemo(
     () => isStepValid(currentStepData, currentStepConfig),
-    [currentStepData, currentStepConfig],
+    [currentStepData, currentStepConfig]
   );
 
-  const canGoNext = useMemo(
-    () => isCurrentStepValid && !state.isProcessing,
-    [isCurrentStepValid, state.isProcessing],
-  );
+  const canGoNext = isCurrentStepValid && !state.isProcessing;
+  const canGoBack = state.currentStepIndex > 0 && config.behavior?.allowBack !== false && !state.isProcessing;
 
-  const canGoBack = useMemo(
-    () =>
-      state.currentStepIndex > 0 &&
-      config.behavior?.allowBack !== false &&
-      !state.isProcessing,
-    [state.currentStepIndex, config.behavior?.allowBack, state.isProcessing],
+  const goNext = useCallback(
+    createGoNextHandler(canGoNext, state, config, setState, onComplete, onStepChange),
+    [canGoNext, state, config, onComplete, onStepChange]
   );
 
-  const goNext = useCallback(() => {
-    if (!canGoNext) return;
-
-    const nextIndex = state.currentStepIndex + 1;
-    const isLastStep = nextIndex >= config.photoSteps.length;
-
-    if (isLastStep) {
-      const newState = { ...state, isComplete: true };
-      setState(newState);
-      onComplete?.(newState);
-    } else {
-      setState((prev) => ({ ...prev, currentStepIndex: nextIndex }));
-      onStepChange?.(nextIndex, config.photoSteps[nextIndex]);
-    }
-  }, [canGoNext, state, config.photoSteps, onComplete, onStepChange]);
-
-  const goBack = useCallback(() => {
-    if (!canGoBack) return;
-
-    const prevIndex = state.currentStepIndex - 1;
-    setState((prev) => ({ ...prev, currentStepIndex: prevIndex, isComplete: false }));
-    onStepChange?.(prevIndex, config.photoSteps[prevIndex]);
-  }, [canGoBack, state.currentStepIndex, config.photoSteps, onStepChange]);
-
-  const updatePhoto = useCallback((imageUri: string, previewUrl?: string) => {
-    setState((prev) =>
-      updatePhotoStep(prev, prev.currentStepIndex, {
-        imageUri,
-        previewUrl,
-        validationStatus: "pending",
-      }),
-    );
-  }, []);
-
-  const updateName = useCallback((name: string) => {
-    setState((prev) =>
-      updatePhotoStep(prev, prev.currentStepIndex, { name }),
-    );
-  }, []);
-
-  const updateValidation = useCallback((isValid: boolean) => {
-    setState((prev) =>
-      updatePhotoStep(prev, prev.currentStepIndex, {
-        isValid,
-        validationStatus: isValid ? "valid" : "invalid",
-      }),
-    );
-  }, []);
-
-  const updateTextInput = useCallback(
-    (text: string) => {
-      setState((prev) => {
-        if (!prev.textInput) return prev;
-
-        const minLength = config.textInputStep?.minLength ?? 0;
-        const maxLength = config.textInputStep?.maxLength ?? Infinity;
-
-        return {
-          ...prev,
-          textInput: {
-            ...prev.textInput,
-            text,
-            isValid: isTextInputValid(text, minLength, maxLength),
-          },
-        };
-      });
-    },
-    [config.textInputStep],
+  const goBack = useCallback(
+    createGoBackHandler(canGoBack, state.currentStepIndex, config, setState, onStepChange),
+    [canGoBack, state.currentStepIndex, config, onStepChange]
   );
 
-  const reset = useCallback(() => {
-    setState(createInitialFlowState(config));
-  }, [config]);
-
-  const complete = useCallback(() => {
-    const newState = { ...state, isComplete: true };
-    setState(newState);
-    onComplete?.(newState);
-  }, [state, onComplete]);
+  const updatePhoto = useCallback(createPhotoUpdater(setState), []);
+  const updateName = useCallback(createNameUpdater(setState), []);
+  const updateValidation = useCallback(createValidationUpdater(setState), []);
+  const updateTextInput = useCallback(createTextInputUpdater(setState, config), [config.textInputStep]);
+  const reset = useCallback(() => setState(createInitialFlowState(config)), [config]);
+  const complete = useCallback(createCompleteHandler(state, setState, onComplete), [state, onComplete]);
 
   return {
     state,

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

@@ -1,152 +1,21 @@
 /**
- * Flow Configuration Types
+ * Flow Configuration Types - Barrel Export
  * Configuration system for step-by-step generation flows
  *
  * @package @umituz/react-native-ai-generation-content
  */
 
-import type { StepHeaderConfig } from "@umituz/react-native-design-system";
-import type { PhotoUploadCardConfig } from "../components/PhotoUploadCard";
-
-/**
- * Photo upload step configuration
- */
-export interface PhotoStepConfig {
-  /** Whether this step is enabled */
-  enabled: boolean;
-  /** Step order (1, 2, 3, etc.) */
-  order: number;
-  /** Step identifier */
-  id: string;
-  /** Header configuration */
-  header?: StepHeaderConfig;
-  /** Photo upload card configuration */
-  photoCard?: PhotoUploadCardConfig;
-  /** Whether name input is required */
-  requireNameInput?: boolean;
-  /** Whether photo validation is enabled */
-  enableValidation?: boolean;
-  /** Validation type */
-  validationType?: "none" | "face-detection" | "custom";
-  /** Whether to show photo tips */
-  showPhotoTips?: boolean;
-  /** Custom validation function */
-  customValidator?: (imageUri: string) => Promise<boolean>;
-}
-
-/**
- * Text input step configuration
- */
-export interface TextInputStepConfig {
-  /** Whether this step is enabled */
-  enabled: boolean;
-  /** Step order */
-  order: number;
-  /** Step identifier */
-  id: string;
-  /** Header configuration */
-  header?: StepHeaderConfig;
-  /** Minimum character length */
-  minLength?: number;
-  /** Maximum character length */
-  maxLength?: number;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Whether to show character counter */
-  showCharacterCount?: boolean;
-}
-
-/**
- * Preview step configuration
- */
-export interface PreviewStepConfig {
-  /** Whether this step is enabled */
-  enabled: boolean;
-  /** Step order */
-  order: number;
-  /** Step identifier */
-  id: string;
-  /** Header configuration */
-  header?: StepHeaderConfig;
-  /** Whether to show edit buttons */
-  allowEditing?: boolean;
-  /** Preview layout style */
-  layout?: "grid" | "list" | "carousel";
-}
-
-/**
- * Complete flow configuration
- */
-export interface GenerationFlowConfig {
-  /** Photo upload steps (can be 1 or multiple) */
-  photoSteps: PhotoStepConfig[];
-  /** Text input step */
-  textInputStep?: TextInputStepConfig;
-  /** Preview step */
-  previewStep?: PreviewStepConfig;
-  /** Flow behavior */
-  behavior?: {
-    /** Whether to allow going back */
-    allowBack?: boolean;
-    /** Whether to show progress indicator */
-    showProgress?: boolean;
-    /** Whether to auto-advance after photo selection */
-    autoAdvance?: boolean;
-    /** Whether to require authentication */
-    requireAuth?: boolean;
-    /** Whether to check feature gate */
-    checkFeatureGate?: boolean;
-  };
-}
+export type {
+  PhotoStepConfig,
+  TextInputStepConfig,
+  PreviewStepConfig,
+} from "./flow-step-configs.types";
+export type { GenerationFlowConfig } from "./flow-generation-config.types";
+export type { PhotoStepData, TextInputStepData } from "./flow-step-data.types";
+export type { GenerationFlowState } from "./flow-state.types";
 
 // Re-export default configs from separate file
 export {
   DEFAULT_SINGLE_PHOTO_FLOW,
   DEFAULT_DUAL_PHOTO_FLOW,
 } from "./flow-default-configs";
-
-/**
- * Step data structure
- */
-export interface PhotoStepData {
-  /** Step identifier */
-  id: string;
-  /** Photo URI */
-  imageUri: string | null;
-  /** Preview URL */
-  previewUrl?: string;
-  /** Name/label for this photo */
-  name?: string;
-  /** Whether validation passed */
-  isValid?: boolean;
-  /** Validation status */
-  validationStatus?: "pending" | "validating" | "valid" | "invalid";
-}
-
-/**
- * Text input step data
- */
-export interface TextInputStepData {
-  /** Step identifier */
-  id: string;
-  /** Text content */
-  text: string;
-  /** Whether text is valid */
-  isValid?: boolean;
-}
-
-/**
- * Complete flow state
- */
-export interface GenerationFlowState {
-  /** Current step index */
-  currentStepIndex: number;
-  /** Photo steps data */
-  photoSteps: PhotoStepData[];
-  /** Text input data */
-  textInput?: TextInputStepData;
-  /** Whether flow is complete */
-  isComplete: boolean;
-  /** Whether currently processing */
-  isProcessing: boolean;
-}

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

@@ -0,0 +1,25 @@
+/**
+ * Flow Generation Configuration Types
+ */
+
+import type { PhotoStepConfig, TextInputStepConfig, PreviewStepConfig } from "./flow-step-configs.types";
+
+/**
+ * Complete flow configuration
+ */
+export interface GenerationFlowConfig {
+  /** Photo upload steps (can be 1 or multiple) */
+  photoSteps: PhotoStepConfig[];
+  /** Text input step */
+  textInputStep?: TextInputStepConfig;
+  /** Preview step */
+  previewStep?: PreviewStepConfig;
+  /** Flow behavior */
+  behavior?: {
+    allowBack?: boolean;
+    showProgress?: boolean;
+    autoAdvance?: boolean;
+    requireAuth?: boolean;
+    checkFeatureGate?: boolean;
+  };
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Flow State Types
+ */
+
+import type { PhotoStepData, TextInputStepData } from "./flow-step-data.types";
+
+/**
+ * Complete flow state
+ */
+export interface GenerationFlowState {
+  currentStepIndex: number;
+  photoSteps: PhotoStepData[];
+  textInput?: TextInputStepData;
+  isComplete: boolean;
+  isProcessing: boolean;
+}

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

@@ -0,0 +1,48 @@
+/**
+ * Flow Step Configuration Types
+ */
+
+import type { StepHeaderConfig } from "@umituz/react-native-design-system";
+import type { PhotoUploadCardConfig } from "../components/PhotoUploadCard";
+
+/**
+ * Photo upload step configuration
+ */
+export interface PhotoStepConfig {
+  enabled: boolean;
+  order: number;
+  id: string;
+  header?: StepHeaderConfig;
+  photoCard?: PhotoUploadCardConfig;
+  requireNameInput?: boolean;
+  enableValidation?: boolean;
+  validationType?: "none" | "face-detection" | "custom";
+  showPhotoTips?: boolean;
+  customValidator?: (imageUri: string) => Promise<boolean>;
+}
+
+/**
+ * Text input step configuration
+ */
+export interface TextInputStepConfig {
+  enabled: boolean;
+  order: number;
+  id: string;
+  header?: StepHeaderConfig;
+  minLength?: number;
+  maxLength?: number;
+  placeholder?: string;
+  showCharacterCount?: boolean;
+}
+
+/**
+ * Preview step configuration
+ */
+export interface PreviewStepConfig {
+  enabled: boolean;
+  order: number;
+  id: string;
+  header?: StepHeaderConfig;
+  allowEditing?: boolean;
+  layout?: "grid" | "list" | "carousel";
+}

package/src/presentation/types/flow-step-data.types.ts

@@ -0,0 +1,24 @@
+/**
+ * Flow Step Data Types
+ */
+
+/**
+ * Step data structure
+ */
+export interface PhotoStepData {
+  id: string;
+  imageUri: string | null;
+  previewUrl?: string;
+  name?: string;
+  isValid?: boolean;
+  validationStatus?: "pending" | "validating" | "valid" | "invalid";
+}
+
+/**
+ * Text input step data
+ */
+export interface TextInputStepData {
+  id: string;
+  text: string;
+  isValid?: boolean;
+}

package/src/presentation/types/result-actions.types.ts

@@ -0,0 +1,50 @@
+/**
+ * Result Actions Configuration Types
+ */
+
+export interface ResultActionButton {
+  enabled?: boolean;
+  label?: string;
+  icon?: string;
+  variant?: "primary" | "secondary" | "outline" | "text";
+  position?: "top" | "bottom";
+}
+
+export interface ResultActionsConfig {
+  share?: ResultActionButton;
+  save?: ResultActionButton;
+  retry?: ResultActionButton;
+  layout?: "horizontal" | "vertical" | "grid";
+  buttonSpacing?: number;
+  spacing?: {
+    paddingHorizontal?: number;
+    paddingBottom?: number;
+  };
+}
+
+export const DEFAULT_ACTIONS_CONFIG: ResultActionsConfig = {
+  share: {
+    enabled: true,
+    icon: "share-social",
+    variant: "primary",
+    position: "bottom",
+  },
+  save: {
+    enabled: true,
+    icon: "download",
+    variant: "secondary",
+    position: "bottom",
+  },
+  retry: {
+    enabled: true,
+    icon: "refresh",
+    variant: "outline",
+    position: "bottom",
+  },
+  layout: "horizontal",
+  buttonSpacing: 10,
+  spacing: {
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+  },
+};