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

package/src/domains/wizard/presentation/steps/TextInputStep.tsx

@@ -0,0 +1,199 @@
+/**
+ * Generic Text Input Step
+ * Used by ANY feature that needs text input
+ * (text-to-video, prompt-based generation, etc.)
+ */
+
+import React, { useState, useCallback } from "react";
+import { View, StyleSheet, TextInput, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import type { TextInputStepConfig } from "../../domain/entities/wizard-config.types";
+
+export interface TextInputStepProps {
+  readonly config: TextInputStepConfig;
+  readonly onContinue: (text: string) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly translations?: Record<string, string>;
+}
+
+export const TextInputStep: React.FC<TextInputStepProps> = ({
+  config,
+  onContinue,
+  onBack,
+  t,
+  translations,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [text, setText] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[TextInputStep] Rendering", {
+      stepId: config.id,
+      textLength: text.length,
+      minLength: config.minLength,
+      maxLength: config.maxLength,
+    });
+  }
+
+  const handleContinue = useCallback(() => {
+    // Validate text length
+    if (config.minLength && text.length < config.minLength) {
+      setError(t("textInput.errors.tooShort"));
+      return;
+    }
+
+    if (config.maxLength && text.length > config.maxLength) {
+      setError(t("textInput.errors.tooLong"));
+      return;
+    }
+
+    if (text.trim().length === 0) {
+      setError(t("textInput.errors.required"));
+      return;
+    }
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[TextInputStep] Continue", { stepId: config.id, text });
+    }
+
+    onContinue(text);
+  }, [text, config, onContinue, t]);
+
+  const handleTextChange = useCallback((newText: string) => {
+    setText(newText);
+    setError(null); // Clear error on change
+  }, []);
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onBack} style={styles.backButton}>
+          <AtomicText type="body">{t("common.back")}</AtomicText>
+        </TouchableOpacity>
+      </View>
+
+      {/* Content */}
+      <View style={styles.content}>
+        {/* Title */}
+        {config.titleKey && (
+          <AtomicText type="heading2" style={styles.title}>
+            {t(config.titleKey)}
+          </AtomicText>
+        )}
+
+        {/* Subtitle */}
+        {config.subtitleKey && (
+          <AtomicText type="body" style={styles.subtitle}>
+            {t(config.subtitleKey)}
+          </AtomicText>
+        )}
+
+        {/* Text Input */}
+        <TextInput
+          style={[
+            styles.input,
+            config.multiline && styles.multilineInput,
+            {
+              backgroundColor: tokens.colors.backgroundSecondary,
+              borderColor: error ? tokens.colors.error : tokens.colors.border,
+              color: tokens.colors.textPrimary,
+            },
+          ]}
+          value={text}
+          onChangeText={handleTextChange}
+          placeholder={config.placeholderKey ? t(config.placeholderKey) : t("textInput.placeholder")}
+          placeholderTextColor={tokens.colors.textSecondary}
+          multiline={config.multiline}
+          numberOfLines={config.multiline ? 5 : 1}
+          maxLength={config.maxLength}
+        />
+
+        {/* Character Count */}
+        {config.maxLength && (
+          <AtomicText type="caption" style={styles.characterCount}>
+            {text.length} / {config.maxLength}
+          </AtomicText>
+        )}
+
+        {/* Error Message */}
+        {error && (
+          <AtomicText type="body" style={[styles.error, { color: tokens.colors.error }]}>
+            {error}
+          </AtomicText>
+        )}
+      </View>
+
+      {/* Continue Button */}
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={[
+            styles.continueButton,
+            {
+              backgroundColor: text.trim().length > 0 ? tokens.colors.primary : tokens.colors.disabled,
+            },
+          ]}
+          onPress={handleContinue}
+          disabled={text.trim().length === 0}
+        >
+          <AtomicText
+            type="buttonLarge"
+            style={{ color: text.trim().length > 0 ? tokens.colors.textOnPrimary : tokens.colors.textDisabled }}
+          >
+            {t("common.continue")}
+          </AtomicText>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    padding: 16,
+  },
+  backButton: {
+    alignSelf: "flex-start",
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    marginBottom: 8,
+  },
+  subtitle: {
+    marginBottom: 24,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    marginBottom: 8,
+  },
+  multilineInput: {
+    height: 120,
+    textAlignVertical: "top",
+  },
+  characterCount: {
+    textAlign: "right",
+    marginBottom: 8,
+  },
+  error: {
+    marginTop: 8,
+  },
+  footer: {
+    padding: 16,
+  },
+  continueButton: {
+    padding: 16,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+});

package/src/features/couple-future/domain/wizard-config.adapter.ts

@@ -0,0 +1,76 @@
+/**
+ * Wizard Configuration Adapter
+ * Adapts old wizard config to new dynamic step system
+ */
+
+import { buildStepsFromScenario, buildStepsWithNavigation, SCENARIO_CONFIGS } from "../../../infrastructure/flow/step-builder";
+import type { DynamicStepDefinition } from "../../../domain/entities/step-config.types";
+import type { WizardScenarioData } from "../presentation/types";
+import { StepType } from "../../../domain/entities/flow-config.types";
+
+/**
+ * Build steps for a scenario
+ * Returns dynamically generated step definitions based on scenario type
+ */
+export const buildStepsForScenario = (scenario: WizardScenarioData | undefined): DynamicStepDefinition[] => {
+  if (!scenario) {
+    // No scenario selected - only show scenario selection
+    return [
+      {
+        id: "SCENARIO_SELECTION",
+        type: StepType.SCENARIO_SELECTION,
+        required: true,
+      },
+    ];
+  }
+
+  const steps: DynamicStepDefinition[] = [];
+
+  // Always start with scenario preview if scenario is selected
+  steps.push({
+    id: "SCENARIO_PREVIEW",
+    type: StepType.SCENARIO_PREVIEW,
+    required: true,
+  });
+
+  // Get scenario-specific config
+  const scenarioConfig = SCENARIO_CONFIGS[scenario.category || ""] || SCENARIO_CONFIGS["romantic-kiss"];
+
+  // Build dynamic steps from config
+  const dynamicSteps = buildStepsFromScenario(scenario.id, scenarioConfig);
+  steps.push(...dynamicSteps);
+
+  // Add generating step
+  steps.push({
+    id: "GENERATING",
+    type: StepType.GENERATING,
+    required: true,
+  });
+
+  // Link steps together
+  return buildStepsWithNavigation(steps);
+};
+
+/**
+ * Get photo upload count for a scenario
+ * Used to determine how many partner images are needed
+ */
+export const getPhotoUploadCount = (scenario: WizardScenarioData | undefined): number => {
+  if (!scenario) return 0;
+
+  const scenarioConfig = SCENARIO_CONFIGS[scenario.category || ""] || SCENARIO_CONFIGS["romantic-kiss"];
+  return scenarioConfig.photoUploads?.count ?? 0;
+};
+
+/**
+ * Get photo upload label for a specific index
+ */
+export const getPhotoUploadLabel = (
+  scenario: WizardScenarioData | undefined,
+  index: number,
+): string => {
+  if (!scenario) return `Photo ${index + 1}`;
+
+  const scenarioConfig = SCENARIO_CONFIGS[scenario.category || ""] || SCENARIO_CONFIGS["romantic-kiss"];
+  return scenarioConfig.photoUploads?.labels?.[index] || `Photo ${index + 1}`;
+};

package/src/features/couple-future/presentation/components/CoupleFutureWizard.tsx

@@ -33,6 +33,15 @@ export const CoupleFutureWizard: React.FC<CoupleFutureWizardProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
+  // DEBUG: Log every render
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[CoupleFutureWizard] RENDER", {
+      hasData: !!data,
+      hasSelectedScenario: !!data.selectedScenario,
+      scenarioId: data.selectedScenario?.id,
+    });
+  }
+
   const stepDefinitions = useMemo(
     () => createStepDefinitions(config),
     [config],
@@ -48,6 +57,16 @@ export const CoupleFutureWizard: React.FC<CoupleFutureWizardProps> = ({
     initialStepIndex,
   });
 
+  // DEBUG: Log flow state
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[CoupleFutureWizard] FLOW STATE", {
+      currentStepIndex: flow.currentStepIndex,
+      currentStepId: flow.currentStep?.id,
+      currentStepType: flow.currentStep?.type,
+      totalSteps: stepDefinitions.length,
+    });
+  }
+
   // Notify parent app when step changes
   // NOTE: Do NOT include callbacks in dependencies - causes infinite loop!
   // Parent app re-renders when onStepChange updates state, which recreates callbacks,
@@ -107,10 +126,26 @@ export const CoupleFutureWizard: React.FC<CoupleFutureWizardProps> = ({
 
   const renderCurrentStep = useCallback(() => {
     const step = flow.currentStep;
-    if (!step) return null;
+    if (!step) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[CoupleFutureWizard] renderCurrentStep: NO STEP");
+      }
+      return null;
+    }
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[CoupleFutureWizard] renderCurrentStep", {
+        stepId: step.id,
+        stepType: step.type,
+        stepIndex: flow.currentStepIndex,
+      });
+    }
 
     switch (step.type) {
       case StepType.SCENARIO_SELECTION:
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[CoupleFutureWizard] Rendering SCENARIO_SELECTION (null)");
+        }
         return null; // Rendered by parent via CategoryNavigationContainer
 
       case StepType.SCENARIO_PREVIEW:
@@ -140,6 +175,15 @@ export const CoupleFutureWizard: React.FC<CoupleFutureWizardProps> = ({
           : translations.partnerB;
         const partnerConfig = isPartnerA ? config.partnerA : config.partnerB;
 
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[CoupleFutureWizard] Rendering PartnerStepScreen", {
+            isPartnerA,
+            stepId: step.id,
+            hasConfig: !!partnerConfig,
+            hasTranslations: !!partnerTranslations,
+          });
+        }
+
         return (
           <PartnerStepScreen
             key={isPartnerA ? "a" : "b"}

package/src/index.ts

@@ -219,3 +219,6 @@ export type {
   FlowUploadedImageData,
   FlowGenerationStatus,
 } from "./domain/entities/flow-config.types";
+
+// Wizard Domain - Generic, configuration-driven wizard system for ALL features
+export * from "./domains/wizard";

package/src/infrastructure/flow/step-builder.ts

@@ -0,0 +1,226 @@
+/**
+ * Dynamic Step Builder
+ * Builds step definitions from configuration
+ */
+
+import { StepType } from "../../domain/entities/flow-config.types";
+import type {
+  ScenarioStepConfig,
+  DynamicStepDefinition,
+  BuiltStep,
+  PhotoUploadStepConfig,
+} from "../../domain/entities/step-config.types";
+
+/**
+ * Build steps from scenario configuration
+ * Automatically creates photo upload steps, text input, etc. based on config
+ */
+export const buildStepsFromScenario = (
+  scenarioId: string,
+  config: ScenarioStepConfig,
+): DynamicStepDefinition[] => {
+  const steps: DynamicStepDefinition[] = [];
+
+  // Add photo upload steps (dynamic count)
+  if (config.photoUploads && config.photoUploads.count > 0) {
+    for (let i = 0; i < config.photoUploads.count; i++) {
+      const photoConfig: PhotoUploadStepConfig = {
+        id: `PHOTO_UPLOAD_${i}`,
+        label: config.photoUploads.labels?.[i] || `Photo ${i + 1}`,
+        showFaceDetection: config.photoUploads.showFaceDetection ?? false,
+        showNameInput: config.photoUploads.showNameInput ?? false,
+        showPhotoTips: true,
+        required: true,
+      };
+
+      steps.push({
+        id: `PHOTO_UPLOAD_${i}`,
+        type: StepType.PARTNER_UPLOAD, // Reuse existing type
+        config: photoConfig,
+        required: true,
+      });
+    }
+  }
+
+  // Add text input step
+  if (config.textInput?.enabled) {
+    steps.push({
+      id: "TEXT_INPUT",
+      type: StepType.TEXT_INPUT,
+      config: {
+        id: "TEXT_INPUT",
+        minLength: config.textInput.minLength ?? 0,
+        maxLength: config.textInput.maxLength ?? 500,
+        required: config.textInput.required ?? false,
+      },
+      required: config.textInput.required ?? false,
+    });
+  }
+
+  // Add style selection step
+  if (config.styleSelection?.enabled) {
+    steps.push({
+      id: "STYLE_SELECTION",
+      type: StepType.FEATURE_SELECTION,
+      config: {
+        id: "STYLE_SELECTION",
+        styles: config.styleSelection.styles ?? [],
+        required: config.styleSelection.required ?? false,
+      },
+      required: config.styleSelection.required ?? false,
+    });
+  }
+
+  // Add duration selection step
+  if (config.durationSelection?.enabled) {
+    steps.push({
+      id: "DURATION_SELECTION",
+      type: StepType.FEATURE_SELECTION,
+      config: {
+        id: "DURATION_SELECTION",
+        durations: config.durationSelection.durations ?? [5, 10, 15],
+        required: config.durationSelection.required ?? false,
+      },
+      required: config.durationSelection.required ?? false,
+    });
+  }
+
+  return steps;
+};
+
+/**
+ * Build steps with conditional navigation
+ * Allows data-driven next step decisions
+ */
+export const buildStepsWithNavigation = (
+  baseSteps: DynamicStepDefinition[],
+): DynamicStepDefinition[] => {
+  return baseSteps.map((step, index) => {
+    // Auto-link to next step if not specified
+    if (!step.nextStep && index < baseSteps.length - 1) {
+      return {
+        ...step,
+        nextStep: baseSteps[index + 1].id,
+      };
+    }
+    return step;
+  });
+};
+
+/**
+ * Get next step ID based on configuration and state
+ */
+export const resolveNextStep = (
+  currentStepId: string,
+  steps: readonly DynamicStepDefinition[],
+  context: {
+    readonly values: Record<string, unknown>;
+    readonly completedSteps: readonly string[];
+  },
+): string | null => {
+  const currentStep = steps.find((s) => s.id === currentStepId);
+  if (!currentStep) return null;
+
+  // Check if should skip based on skipIf condition
+  const nextStepCandidates = steps.filter((s) => {
+    if (s.skipIf && s.skipIf({ values: context.values })) {
+      return false;
+    }
+    return true;
+  });
+
+  // If nextStep is a function, call it
+  if (typeof currentStep.nextStep === "function") {
+    return currentStep.nextStep({
+      values: context.values,
+      currentStepId,
+      completedSteps: context.completedSteps,
+    });
+  }
+
+  // If nextStep is a string, return it
+  if (typeof currentStep.nextStep === "string") {
+    return currentStep.nextStep;
+  }
+
+  // Default: next step in array
+  const currentIndex = steps.findIndex((s) => s.id === currentStepId);
+  if (currentIndex >= 0 && currentIndex < steps.length - 1) {
+    return steps[currentIndex + 1].id;
+  }
+
+  return null;
+};
+
+/**
+ * Example scenario configurations
+ */
+export const SCENARIO_CONFIGS: Record<string, ScenarioStepConfig> = {
+  // Couple/Partner scenarios (2 photos)
+  "romantic-kiss": {
+    photoUploads: {
+      count: 2,
+      labels: ["First Partner", "Second Partner"],
+      showFaceDetection: true,
+      showNameInput: false,
+    },
+  },
+  "couple-hug": {
+    photoUploads: {
+      count: 2,
+      labels: ["Partner A", "Partner B"],
+      showFaceDetection: true,
+    },
+  },
+
+  // Single photo scenarios
+  "image-to-video": {
+    photoUploads: {
+      count: 1,
+      labels: ["Your Photo"],
+      showFaceDetection: false,
+    },
+    styleSelection: {
+      enabled: true,
+      required: true,
+    },
+    durationSelection: {
+      enabled: true,
+      required: true,
+    },
+  },
+
+  // Text-only scenarios
+  "text-to-video": {
+    textInput: {
+      enabled: true,
+      required: true,
+      minLength: 10,
+      maxLength: 500,
+    },
+    styleSelection: {
+      enabled: true,
+      required: true,
+    },
+    durationSelection: {
+      enabled: true,
+      required: true,
+    },
+  },
+
+  // Complex scenario with optional steps
+  "advanced-generation": {
+    photoUploads: {
+      count: 1,
+      labels: ["Base Image"],
+    },
+    textInput: {
+      enabled: true,
+      required: false, // Optional
+    },
+    styleSelection: {
+      enabled: true,
+      required: true,
+    },
+  },
+};