@umituz/react-native-ai-generation-content 1.23.4 → 1.24.1

package/src/domains/wizard/infrastructure/builders/dynamic-step-builder.ts

@@ -0,0 +1,107 @@
+/**
+ * Dynamic Step Builder
+ * Builds flow-compatible steps from wizard configurations
+ * Works with ANY feature - completely generic!
+ */
+
+import { StepType } from "../../../../domain/entities/flow-config.types";
+import type { StepDefinition } from "../../../../domain/entities/flow-config.types";
+import type {
+  WizardFeatureConfig,
+  WizardStepConfig,
+  ScenarioBasedConfig,
+  buildWizardConfigFromScenario,
+} from "../../domain/entities/wizard-config.types";
+
+/**
+ * Convert wizard step config to flow step definition
+ */
+const convertToFlowStep = (wizardStep: WizardStepConfig): StepDefinition => {
+  // Map wizard step types to flow step types
+  const typeMap: Record<string, StepType> = {
+    photo_upload: StepType.PARTNER_UPLOAD,
+    text_input: StepType.TEXT_INPUT,
+    selection: StepType.FEATURE_SELECTION,
+    preview: StepType.SCENARIO_PREVIEW,
+  };
+
+  return {
+    id: wizardStep.id,
+    type: typeMap[wizardStep.type] || StepType.CUSTOM,
+    required: wizardStep.required ?? true,
+    config: wizardStep, // Pass entire wizard config as config
+  };
+};
+
+/**
+ * Build flow steps from wizard feature config
+ * This is the ONLY function needed to convert any feature config to flow steps!
+ */
+export const buildFlowStepsFromWizard = (
+  featureConfig: WizardFeatureConfig,
+  options?: {
+    includePreview?: boolean;
+    includeGenerating?: boolean;
+  },
+): StepDefinition[] => {
+  const steps: StepDefinition[] = [];
+
+  // Add scenario preview if requested
+  if (options?.includePreview) {
+    steps.push({
+      id: "SCENARIO_PREVIEW",
+      type: StepType.SCENARIO_PREVIEW,
+      required: true,
+    });
+  }
+
+  // Convert all wizard steps to flow steps
+  featureConfig.steps.forEach((wizardStep) => {
+    if (wizardStep.enabled !== false) {
+      steps.push(convertToFlowStep(wizardStep));
+    }
+  });
+
+  // Add generating step if requested
+  if (options?.includeGenerating) {
+    steps.push({
+      id: "GENERATING",
+      type: StepType.GENERATING,
+      required: true,
+    });
+  }
+
+  return steps;
+};
+
+/**
+ * Get photo upload count from wizard config
+ */
+export const getPhotoUploadCount = (config: WizardFeatureConfig): number => {
+  return config.steps.filter((s) => s.type === "photo_upload").length;
+};
+
+/**
+ * Get step config by ID
+ */
+export const getStepConfig = (
+  config: WizardFeatureConfig,
+  stepId: string,
+): WizardStepConfig | undefined => {
+  return config.steps.find((s) => s.id === stepId);
+};
+
+/**
+ * Quick builder for common patterns
+ */
+export const quickBuildWizard = (
+  featureId: string,
+  scenarioConfig: ScenarioBasedConfig,
+): StepDefinition[] => {
+  const { buildWizardConfigFromScenario } = require("../../domain/entities/wizard-config.types");
+  const wizardConfig = buildWizardConfigFromScenario(featureId, scenarioConfig);
+  return buildFlowStepsFromWizard(wizardConfig, {
+    includePreview: true,
+    includeGenerating: true,
+  });
+};

package/src/domains/wizard/infrastructure/renderers/step-renderer.tsx

@@ -0,0 +1,106 @@
+/**
+ * Generic Step Renderer
+ * Renders any step type based on configuration
+ * NO feature-specific code! Works for ALL features!
+ */
+
+import React from "react";
+import { StepType } from "../../../../domain/entities/flow-config.types";
+import type { StepDefinition } from "../../../../domain/entities/flow-config.types";
+import type {
+  WizardStepConfig,
+  PhotoUploadStepConfig,
+  TextInputStepConfig,
+  SelectionStepConfig,
+} from "../../domain/entities/wizard-config.types";
+
+// Import generic step components (will create these)
+import { PhotoUploadStep } from "../../presentation/steps/PhotoUploadStep";
+import { TextInputStep } from "../../presentation/steps/TextInputStep";
+import { SelectionStep } from "../../presentation/steps/SelectionStep";
+
+export interface StepRendererProps {
+  readonly step: StepDefinition;
+  readonly onContinue: (data: Record<string, unknown>) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly translations?: Record<string, string>;
+}
+
+/**
+ * Render a step based on its type and configuration
+ * This is the ONLY renderer needed for ALL features!
+ */
+export const renderStep = (props: StepRendererProps): React.ReactElement | null => {
+  const { step, onContinue, onBack, t, translations } = props;
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[StepRenderer] Rendering step", {
+      stepId: step.id,
+      stepType: step.type,
+      hasConfig: !!step.config,
+    });
+  }
+
+  const wizardConfig = step.config as WizardStepConfig | undefined;
+
+  switch (step.type) {
+    case StepType.PARTNER_UPLOAD: {
+      // This handles ALL photo uploads (couple, face-swap, image-to-video, etc.)
+      const photoConfig = wizardConfig as PhotoUploadStepConfig;
+      return (
+        <PhotoUploadStep
+          config={photoConfig}
+          onContinue={(imageData) => {
+            onContinue({ [`photo_${step.id}`]: imageData });
+          }}
+          onBack={onBack}
+          t={t}
+          translations={translations}
+        />
+      );
+    }
+
+    case StepType.TEXT_INPUT: {
+      const textConfig = wizardConfig as TextInputStepConfig;
+      return (
+        <TextInputStep
+          config={textConfig}
+          onContinue={(text) => {
+            onContinue({ text });
+          }}
+          onBack={onBack}
+          t={t}
+          translations={translations}
+        />
+      );
+    }
+
+    case StepType.FEATURE_SELECTION: {
+      const selectionConfig = wizardConfig as SelectionStepConfig;
+      return (
+        <SelectionStep
+          config={selectionConfig}
+          onContinue={(selected) => {
+            onContinue({ [`selection_${step.id}`]: selected });
+          }}
+          onBack={onBack}
+          t={t}
+          translations={translations}
+        />
+      );
+    }
+
+    case StepType.SCENARIO_PREVIEW:
+    case StepType.GENERATING:
+    case StepType.RESULT_PREVIEW:
+      // These are handled by parent wizard component
+      return null;
+
+    default:
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.warn("[StepRenderer] Unknown step type", step.type);
+      }
+      return null;
+  }
+};

package/src/domains/wizard/presentation/components/GenericWizardFlow.tsx

@@ -0,0 +1,189 @@
+/**
+ * Generic Wizard Flow Component
+ * ONE wizard to rule them all!
+ *
+ * Works for:
+ * - Couple features (romantic-kiss, ai-hug, etc.)
+ * - Face swap
+ * - Image-to-video
+ * - Text-to-video
+ * - ANY future feature!
+ *
+ * NO feature-specific code here - everything driven by configuration!
+ */
+
+import React, { useMemo, useCallback, useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useFlow } from "../../../../infrastructure/flow/useFlow";
+import { StepType } from "../../../../domain/entities/flow-config.types";
+import type { StepDefinition } from "../../../../domain/entities/flow-config.types";
+import { renderStep } from "../../infrastructure/renderers/step-renderer";
+import type { WizardFeatureConfig } from "../../domain/entities/wizard-config.types";
+import { buildFlowStepsFromWizard } from "../../infrastructure/builders/dynamic-step-builder";
+
+export interface GenericWizardFlowProps {
+  readonly featureConfig: WizardFeatureConfig;
+  readonly onStepChange?: (stepId: string, stepType: StepType | string) => void;
+  readonly onGenerationStart?: (data: Record<string, unknown>) => void;
+  readonly onBack?: () => void;
+  readonly t: (key: string) => string;
+  readonly translations?: Record<string, string>;
+  readonly renderPreview?: () => React.ReactElement | null;
+  readonly renderGenerating?: (progress: number) => React.ReactElement | null;
+  readonly renderResult?: (result: unknown) => React.ReactElement | null;
+}
+
+export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
+  featureConfig,
+  onStepChange,
+  onGenerationStart,
+  onBack,
+  t,
+  translations,
+  renderPreview,
+  renderGenerating,
+  renderResult,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Build flow steps from wizard config
+  const flowSteps = useMemo<StepDefinition[]>(() => {
+    return buildFlowStepsFromWizard(featureConfig, {
+      includePreview: !!renderPreview,
+      includeGenerating: !!renderGenerating,
+    });
+  }, [featureConfig, renderPreview, renderGenerating]);
+
+  // Initialize flow
+  const flow = useFlow({
+    steps: flowSteps,
+    initialStepIndex: 0,
+  });
+
+  // DEBUG logging
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[GenericWizardFlow] Render", {
+      featureId: featureConfig.id,
+      currentStepId: flow.currentStep?.id,
+      currentStepType: flow.currentStep?.type,
+      stepIndex: flow.currentStepIndex,
+      totalSteps: flowSteps.length,
+    });
+  }
+
+  // Notify parent when step changes
+  useEffect(() => {
+    if (flow.currentStep && onStepChange) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[GenericWizardFlow] Step changed", {
+          stepId: flow.currentStep.id,
+          stepType: flow.currentStep.type,
+        });
+      }
+      onStepChange(flow.currentStep.id, flow.currentStep.type);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flow.currentStep, flow.currentStepIndex]);
+
+  // Handle step continue
+  const handleStepContinue = useCallback(
+    (stepData: Record<string, unknown>) => {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[GenericWizardFlow] Step continue", {
+          stepId: flow.currentStep?.id,
+          data: stepData,
+        });
+      }
+
+      // Store step data in custom data
+      Object.entries(stepData).forEach(([key, value]) => {
+        flow.setCustomData(key, value);
+      });
+
+      // Check if this is the last step before generating
+      if (flow.currentStepIndex === flowSteps.length - 2) {
+        // Next step is GENERATING
+        if (onGenerationStart) {
+          onGenerationStart(flow.customData);
+        }
+      }
+
+      // Move to next step
+      flow.nextStep();
+    },
+    [flow, flowSteps.length, onGenerationStart],
+  );
+
+  // Handle back
+  const handleBack = useCallback(() => {
+    if (flow.currentStepIndex === 0) {
+      onBack?.();
+    } else {
+      flow.previousStep();
+    }
+  }, [flow, onBack]);
+
+  // Render current step
+  const renderCurrentStep = useCallback(() => {
+    const step = flow.currentStep;
+    if (!step) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.warn("[GenericWizardFlow] No current step!");
+      }
+      return null;
+    }
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[GenericWizardFlow] Rendering step", {
+        stepId: step.id,
+        stepType: step.type,
+      });
+    }
+
+    // Special steps with custom renderers
+    switch (step.type) {
+      case StepType.SCENARIO_PREVIEW:
+        return renderPreview?.() || null;
+
+      case StepType.GENERATING:
+        return renderGenerating?.(flow.generationProgress) || null;
+
+      case StepType.RESULT_PREVIEW:
+        return renderResult?.(flow.generationResult) || null;
+
+      default:
+        // Use generic step renderer
+        return renderStep({
+          step,
+          onContinue: handleStepContinue,
+          onBack: handleBack,
+          t,
+          translations,
+        });
+    }
+  }, [
+    flow.currentStep,
+    flow.generationProgress,
+    flow.generationResult,
+    renderPreview,
+    renderGenerating,
+    renderResult,
+    handleStepContinue,
+    handleBack,
+    t,
+    translations,
+  ]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {renderCurrentStep()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/domains/wizard/presentation/hooks/usePhotoUploadState.ts

@@ -0,0 +1,115 @@
+/**
+ * Generic Photo Upload State Hook
+ * Manages photo upload state for wizard steps
+ * NO feature-specific logic - works for ANY photo upload
+ */
+
+import { useState, useCallback } from "react";
+import * as ImagePicker from "expo-image-picker";
+import { Alert } from "react-native";
+import type { UploadedImage } from "../../../../features/partner-upload/domain/types";
+
+export interface PhotoUploadConfig {
+  readonly maxFileSizeMB?: number;
+}
+
+export interface PhotoUploadTranslations {
+  readonly fileTooLarge: string;
+  readonly maxFileSize: string;
+  readonly error: string;
+  readonly uploadFailed: string;
+}
+
+export interface UsePhotoUploadStateProps {
+  readonly config?: PhotoUploadConfig;
+  readonly translations: PhotoUploadTranslations;
+}
+
+export interface UsePhotoUploadStateReturn {
+  readonly image: UploadedImage | null;
+  readonly handlePickImage: () => Promise<void>;
+  readonly canContinue: boolean;
+}
+
+const DEFAULT_MAX_FILE_SIZE_MB = 10;
+
+export const usePhotoUploadState = ({
+  config,
+  translations,
+}: UsePhotoUploadStateProps): UsePhotoUploadStateReturn => {
+  const [image, setImage] = useState<UploadedImage | null>(null);
+
+  const maxFileSizeMB = config?.maxFileSizeMB ?? DEFAULT_MAX_FILE_SIZE_MB;
+
+  const handlePickImage = useCallback(async () => {
+    try {
+      // Request permission
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (status !== "granted") {
+        Alert.alert(translations.error, "Permission to access media library is required");
+        return;
+      }
+
+      // Pick image
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: "images" as any,
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: 0.8,
+      });
+
+      if (result.canceled) {
+        return;
+      }
+
+      const selectedAsset = result.assets[0];
+      if (!selectedAsset) {
+        return;
+      }
+
+      // Check file size
+      const fileSize = selectedAsset.fileSize || 0;
+      const fileSizeMB = fileSize / (1024 * 1024);
+
+      if (fileSizeMB > maxFileSizeMB) {
+        Alert.alert(
+          translations.fileTooLarge,
+          translations.maxFileSize.replace("{size}", maxFileSizeMB.toString()),
+        );
+        return;
+      }
+
+      // Create uploaded image object
+      const uploadedImage: UploadedImage = {
+        uri: selectedAsset.uri,
+        previewUrl: selectedAsset.uri,
+        width: selectedAsset.width,
+        height: selectedAsset.height,
+        fileSize,
+      };
+
+      setImage(uploadedImage);
+
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[usePhotoUploadState] Image selected", {
+          width: uploadedImage.width,
+          height: uploadedImage.height,
+          fileSizeMB: fileSizeMB.toFixed(2),
+        });
+      }
+    } catch (error) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.error("[usePhotoUploadState] Error picking image", error);
+      }
+      Alert.alert(translations.error, translations.uploadFailed);
+    }
+  }, [maxFileSizeMB, translations]);
+
+  const canContinue = image !== null;
+
+  return {
+    image,
+    handlePickImage,
+    canContinue,
+  };
+};