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

package/package.json

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

@@ -34,3 +34,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,
+  };
+};

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

@@ -0,0 +1,246 @@
+/**
+ * Flow Configuration Types
+ * 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 "@umituz/react-native-design-system";
+
+/**
+ * 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;
+  };
+}
+
+/**
+ * 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,
+  },
+};
+
+/**
+ * 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;
+}