@umituz/react-native-ai-generation-content 1.34.2 → 1.35.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.34.2",
+  "version": "1.35.1",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

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

@@ -1,16 +1,28 @@
 /**
  * Generic Wizard Flow Component
  * Config-driven wizard for AI generation features
+ * Supports both scenario object and scenarioId (resolved from registry)
  */
 
 import React, { useMemo, useCallback, useEffect, useRef, useState } from "react";
 import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens, useAlert, AlertType, AlertMode } from "@umituz/react-native-design-system";
+import {
+  useAppDesignTokens,
+  useAlert,
+  AlertType,
+  AlertMode,
+} from "@umituz/react-native-design-system";
 import { useFlow } from "../../../infrastructure/flow/useFlow";
-import { StepType, type StepDefinition } from "../../../../../domain/entities/flow-config.types";
+import {
+  StepType,
+  type StepDefinition,
+} from "../../../../../domain/entities/flow-config.types";
 import type { WizardFeatureConfig } from "../../domain/entities/wizard-config.types";
 import { buildFlowStepsFromWizard } from "../../infrastructure/builders/dynamic-step-builder";
-import { useWizardGeneration, type WizardScenarioData } from "../hooks/useWizardGeneration";
+import {
+  useWizardGeneration,
+  type WizardScenarioData,
+} from "../hooks/useWizardGeneration";
 import type { AlertMessages } from "../../../../../presentation/hooks/generation/types";
 import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
 import type { Creation } from "../../../../creations/domain/entities/Creation";
@@ -19,17 +31,25 @@ import { useResultActions } from "../../../../result-preview/presentation/hooks/
 import { validateScenario } from "../utilities/validateScenario";
 import { WizardStepRenderer } from "./WizardStepRenderer";
 import { StarRatingPicker } from "../../../../result-preview/presentation/components/StarRatingPicker";
+import {
+  getConfiguredScenario,
+  getDefaultOutputType,
+} from "../../../../scenarios/infrastructure/scenario-registry";
 
 declare const __DEV__: boolean;
 
 export interface GenericWizardFlowProps {
   readonly featureConfig: WizardFeatureConfig;
   readonly scenario?: WizardScenarioData;
+  readonly scenarioId?: string;
   readonly userId?: string;
   readonly alertMessages?: AlertMessages;
   readonly skipResultStep?: boolean;
   readonly onStepChange?: (stepId: string, stepType: StepType | string) => void;
-  readonly onGenerationStart?: (data: Record<string, unknown>, proceedToGenerating: () => void) => void;
+  readonly onGenerationStart?: (
+    data: Record<string, unknown>,
+    proceedToGenerating: () => void,
+  ) => void;
   readonly onGenerationComplete?: (result: unknown) => void;
   readonly onGenerationError?: (error: string) => void;
   readonly onCreditsExhausted?: () => void;
@@ -42,42 +62,137 @@ export interface GenericWizardFlowProps {
   readonly renderResult?: (result: unknown) => React.ReactElement | null;
 }
 
-export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
-  featureConfig,
-  scenario,
-  userId,
-  alertMessages,
-  skipResultStep = false,
-  onStepChange,
-  onGenerationStart,
-  onGenerationComplete,
-  onGenerationError,
-  onCreditsExhausted,
-  onBack,
-  onTryAgain,
-  t,
-  translations: _translations,
-  renderPreview,
-  renderGenerating,
-  renderResult,
-}) => {
+export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = (props) => {
+  const {
+    featureConfig,
+    scenario: scenarioProp,
+    scenarioId,
+    userId,
+    alertMessages,
+    skipResultStep = false,
+    onStepChange,
+    onGenerationStart,
+    onGenerationComplete,
+    onGenerationError,
+    onCreditsExhausted,
+    onBack,
+    onTryAgain,
+    t,
+    renderPreview,
+    renderGenerating,
+    renderResult,
+  } = props;
+
   const tokens = useAppDesignTokens();
   const alert = useAlert();
+
+  // Resolve scenario from prop or registry
+  const scenario = useMemo<WizardScenarioData | undefined>(() => {
+    if (scenarioProp) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[GenericWizardFlow] Using scenario from prop:", {
+          id: scenarioProp.id,
+          outputType: scenarioProp.outputType,
+        });
+      }
+      return scenarioProp;
+    }
+
+    if (scenarioId) {
+      const found = getConfiguredScenario(scenarioId);
+      if (found) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[GenericWizardFlow] Resolved from registry:", {
+            id: found.id,
+            outputType: found.outputType,
+          });
+        }
+        return found;
+      }
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.warn("[GenericWizardFlow] Scenario not in registry:", scenarioId);
+      }
+      return { id: scenarioId, outputType: getDefaultOutputType() };
+    }
+
+    return undefined;
+  }, [scenarioProp, scenarioId]);
+
+  const validatedScenario = useMemo(
+    () => validateScenario(scenario),
+    [scenario],
+  );
+
+  return (
+    <WizardFlowContent
+      featureConfig={featureConfig}
+      scenario={scenario}
+      validatedScenario={validatedScenario}
+      userId={userId}
+      alertMessages={alertMessages}
+      skipResultStep={skipResultStep}
+      onStepChange={onStepChange}
+      onGenerationStart={onGenerationStart}
+      onGenerationComplete={onGenerationComplete}
+      onGenerationError={onGenerationError}
+      onCreditsExhausted={onCreditsExhausted}
+      onBack={onBack}
+      onTryAgain={onTryAgain}
+      t={t}
+      tokens={tokens}
+      alert={alert}
+      renderPreview={renderPreview}
+      renderGenerating={renderGenerating}
+      renderResult={renderResult}
+    />
+  );
+};
+
+interface WizardFlowContentProps
+  extends Omit<GenericWizardFlowProps, "scenarioId" | "translations"> {
+  readonly validatedScenario: WizardScenarioData;
+  readonly tokens: ReturnType<typeof useAppDesignTokens>;
+  readonly alert: ReturnType<typeof useAlert>;
+}
+
+const WizardFlowContent: React.FC<WizardFlowContentProps> = (props) => {
+  const {
+    featureConfig,
+    scenario,
+    validatedScenario,
+    userId,
+    alertMessages,
+    skipResultStep = false,
+    onStepChange,
+    onGenerationStart,
+    onGenerationComplete,
+    onGenerationError,
+    onCreditsExhausted,
+    onBack,
+    onTryAgain,
+    t,
+    tokens,
+    alert,
+    renderPreview,
+    renderGenerating,
+    renderResult,
+  } = props;
+
   const [currentCreation, setCurrentCreation] = useState<Creation | null>(null);
   const [showRatingPicker, setShowRatingPicker] = useState(false);
   const [hasRated, setHasRated] = useState(false);
-  const [, setIsGeneratingDismissed] = useState(false);
   const prevStepIdRef = useRef<string | undefined>(undefined);
-
   const repository = useMemo(() => createCreationsRepository("creations"), []);
 
-  const flowSteps = useMemo<StepDefinition[]>(() => {
-    return buildFlowStepsFromWizard(featureConfig, {
-      includePreview: true,
-      includeGenerating: true,
-      includeResult: !skipResultStep,
-    });
-  }, [featureConfig, skipResultStep]);
+  const flowSteps = useMemo<StepDefinition[]>(
+    () =>
+      buildFlowStepsFromWizard(featureConfig, {
+        includePreview: true,
+        includeGenerating: true,
+        includeResult: !skipResultStep,
+      }),
+    [featureConfig, skipResultStep],
+  );
 
   const flow = useFlow({ steps: flowSteps, initialStepIndex: 0 });
   const {
@@ -92,30 +207,25 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
     setResult,
   } = flow;
 
-  const resultImageUrl = currentCreation?.output?.imageUrl || currentCreation?.uri || "";
+  const resultImageUrl =
+    currentCreation?.output?.imageUrl || currentCreation?.uri || "";
   const resultVideoUrl = currentCreation?.output?.videoUrl || "";
-  const { isSaving, isSharing, handleDownload, handleShare } = useResultActions({
-    imageUrl: resultImageUrl,
-    videoUrl: resultVideoUrl,
-  });
-
-  const validatedScenario = useMemo(() => validateScenario(scenario), [scenario]);
-
-  const handleGenerationComplete = useCallback((result: unknown) => {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[GenericWizardFlow] Generation completed", { skipResultStep });
-    }
-    setResult(result);
-    setCurrentCreation(result as Creation);
-
-    // Call onGenerationComplete first so parent can navigate if needed
-    onGenerationComplete?.(result);
+  const { isSaving, isSharing, handleDownload, handleShare } = useResultActions(
+    { imageUrl: resultImageUrl, videoUrl: resultVideoUrl },
+  );
 
-    // Only go to result step if not skipping
-    if (!skipResultStep) {
-      nextStep();
-    }
-  }, [setResult, nextStep, onGenerationComplete, skipResultStep]);
+  const handleGenerationComplete = useCallback(
+    (result: unknown) => {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[WizardFlowContent] Generation completed");
+      }
+      setResult(result);
+      setCurrentCreation(result as Creation);
+      onGenerationComplete?.(result);
+      if (!skipResultStep) nextStep();
+    },
+    [setResult, nextStep, onGenerationComplete, skipResultStep],
+  );
 
   useWizardGeneration({
     scenario: validatedScenario,
@@ -129,92 +239,74 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
   });
 
   useEffect(() => {
-    if (currentStep && onStepChange) {
-      const currentStepId = currentStep.id;
-      if (prevStepIdRef.current !== currentStepId) {
-        prevStepIdRef.current = currentStepId;
-        onStepChange(currentStep.id, currentStep.type);
-        // Reset dismissed state when entering generating step
-        if (currentStep.type === StepType.GENERATING) {
-          setIsGeneratingDismissed(false);
-        }
-      }
+    if (currentStep && onStepChange && prevStepIdRef.current !== currentStep.id) {
+      prevStepIdRef.current = currentStep.id;
+      onStepChange(currentStep.id, currentStep.type);
     }
-  }, [currentStep, currentStepIndex, onStepChange]);
+  }, [currentStep, onStepChange]);
 
-  // Handle dismiss generating - go back but generation continues in background
   const handleDismissGenerating = useCallback(() => {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[GenericWizardFlow] Dismissing generating screen - generation continues in background");
+      console.log("[WizardFlowContent] Dismissing - generation continues");
     }
-    setIsGeneratingDismissed(true);
-    // Show alert that generation continues
     alert.show(
       AlertType.INFO,
       AlertMode.TOAST,
       t("generator.backgroundTitle"),
-      t("generator.backgroundMessage")
+      t("generator.backgroundMessage"),
     );
-    // Go back to previous step (or close)
     onBack?.();
   }, [alert, t, onBack]);
 
   const handleBack = useCallback(() => {
-    if (currentStepIndex === 0) {
-      onBack?.();
-    } else {
-      previousStep();
-    }
+    if (currentStepIndex === 0) onBack?.();
+    else previousStep();
   }, [currentStepIndex, previousStep, onBack]);
 
-  // Wrapper for nextStep that checks onGenerationStart before transitioning to GENERATING
   const handleNextStep = useCallback(() => {
-    const nextIndex = currentStepIndex + 1;
-    const nextStepDef = flowSteps[nextIndex];
-
-    // If next step is GENERATING, we must call onGenerationStart for feature gating
-    if (nextStepDef?.type === StepType.GENERATING) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[GenericWizardFlow] About to enter GENERATING step, calling onGenerationStart");
-      }
-      if (onGenerationStart) {
-        onGenerationStart(customData, () => {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.log("[GenericWizardFlow] onGenerationStart callback invoked, proceeding to generation");
-          }
-          nextStep();
-        });
-        return;
-      }
+    const nextStepDef = flowSteps[currentStepIndex + 1];
+    if (nextStepDef?.type === StepType.GENERATING && onGenerationStart) {
+      onGenerationStart(customData, nextStep);
+      return;
     }
-
     nextStep();
   }, [currentStepIndex, flowSteps, customData, onGenerationStart, nextStep]);
 
-  const handlePhotoContinue = useCallback((stepId: string, image: UploadedImage) => {
-    setCustomData(stepId, image);
-    // Use handleNextStep which handles onGenerationStart check
-    handleNextStep();
-  }, [setCustomData, handleNextStep]);
-
-  const handleOpenRatingPicker = useCallback(() => {
-    setShowRatingPicker(true);
-  }, []);
-
-  const handleSubmitRating = useCallback(async (rating: number, description: string) => {
-    if (!currentCreation?.id || !userId) return;
-    const success = await repository.rate(userId, currentCreation.id, rating, description);
-    if (success) {
-      setHasRated(true);
-      alert.show(AlertType.SUCCESS, AlertMode.TOAST, t("result.rateSuccessTitle"), t("result.rateSuccessMessage"));
-    }
-    setShowRatingPicker(false);
-  }, [currentCreation, userId, repository, alert, t]);
+  const handlePhotoContinue = useCallback(
+    (stepId: string, image: UploadedImage) => {
+      setCustomData(stepId, image);
+      handleNextStep();
+    },
+    [setCustomData, handleNextStep],
+  );
 
-  const showRatingButton = Boolean(userId) && !hasRated;
+  const handleSubmitRating = useCallback(
+    async (rating: number, description: string) => {
+      if (!currentCreation?.id || !userId) return;
+      const success = await repository.rate(
+        userId,
+        currentCreation.id,
+        rating,
+        description,
+      );
+      if (success) {
+        setHasRated(true);
+        alert.show(
+          AlertType.SUCCESS,
+          AlertMode.TOAST,
+          t("result.rateSuccessTitle"),
+          t("result.rateSuccessMessage"),
+        );
+      }
+      setShowRatingPicker(false);
+    },
+    [currentCreation, userId, repository, alert, t],
+  );
 
   return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+    <View
+      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+    >
       <WizardStepRenderer
         step={currentStep}
         scenario={scenario}
@@ -223,13 +315,13 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
         generationResult={generationResult}
         isSaving={isSaving}
         isSharing={isSharing}
-        showRating={showRatingButton}
+        showRating={Boolean(userId) && !hasRated}
         onNext={handleNextStep}
         onBack={handleBack}
         onPhotoContinue={handlePhotoContinue}
         onDownload={handleDownload}
         onShare={handleShare}
-        onRate={handleOpenRatingPicker}
+        onRate={() => setShowRatingPicker(true)}
         onTryAgain={onTryAgain}
         onDismissGenerating={handleDismissGenerating}
         t={t}
@@ -251,7 +343,5 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+  container: { flex: 1 },
 });

package/src/domains/scenarios/index.ts

@@ -21,6 +21,16 @@ export {
 } from "./infrastructure/scenario-helpers";
 export type { AppScenarioConfig } from "./infrastructure/scenario-helpers";
 
+// Scenario Registry - Singleton for app configuration
+export {
+  configureScenarios,
+  getConfiguredScenario,
+  getDefaultOutputType,
+  isScenariosConfigured,
+  getAllConfiguredScenarios,
+} from "./infrastructure/scenario-registry";
+export type { ConfiguredScenario } from "./infrastructure/scenario-registry";
+
 // Utils
 export { createStoryTemplate } from "./infrastructure/utils/scenario-utils";
 

package/src/domains/scenarios/infrastructure/scenario-registry.ts

@@ -0,0 +1,101 @@
+/**
+ * Scenario Registry
+ * Singleton registry for app-configured scenarios
+ * Apps configure once at startup, package uses internally
+ */
+
+import type { Scenario, ScenarioOutputType } from "../domain/Scenario";
+
+declare const __DEV__: boolean;
+
+/** Configured scenario with required outputType */
+export interface ConfiguredScenario extends Scenario {
+  readonly outputType: ScenarioOutputType;
+  readonly [key: string]: unknown;
+}
+
+interface ScenarioRegistryState {
+  scenarios: Map<string, ConfiguredScenario>;
+  defaultOutputType: ScenarioOutputType;
+  isConfigured: boolean;
+}
+
+const state: ScenarioRegistryState = {
+  scenarios: new Map(),
+  defaultOutputType: "video",
+  isConfigured: false,
+};
+
+/**
+ * Configure scenarios for this app
+ * Call once at app startup
+ */
+export const configureScenarios = (
+  scenarios: readonly ConfiguredScenario[],
+  defaultOutputType: ScenarioOutputType = "video",
+): void => {
+  state.scenarios.clear();
+
+  for (const scenario of scenarios) {
+    state.scenarios.set(scenario.id, scenario);
+  }
+
+  state.defaultOutputType = defaultOutputType;
+  state.isConfigured = true;
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[ScenarioRegistry] Configured:", {
+      count: scenarios.length,
+      defaultOutputType,
+    });
+  }
+};
+
+/**
+ * Get scenario by ID from configured scenarios
+ */
+export const getConfiguredScenario = (
+  id: string,
+): ConfiguredScenario | undefined => {
+  const found = state.scenarios.get(id);
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[ScenarioRegistry] getConfiguredScenario:", {
+      id,
+      found: !!found,
+      outputType: found?.outputType,
+    });
+  }
+
+  return found;
+};
+
+/**
+ * Get default output type for this app
+ */
+export const getDefaultOutputType = (): ScenarioOutputType => {
+  return state.defaultOutputType;
+};
+
+/**
+ * Check if scenarios are configured
+ */
+export const isScenariosConfigured = (): boolean => {
+  return state.isConfigured;
+};
+
+/**
+ * Get all configured scenarios
+ */
+export const getAllConfiguredScenarios = (): readonly ConfiguredScenario[] => {
+  return Array.from(state.scenarios.values());
+};
+
+/**
+ * Reset registry (for testing)
+ */
+export const resetScenarioRegistry = (): void => {
+  state.scenarios.clear();
+  state.defaultOutputType = "video";
+  state.isConfigured = false;
+};

package/src/infrastructure/providers/generation-config.provider.tsx

@@ -1,100 +1,64 @@
 /**
  * Generation Config Provider
- * Provides app-specific configuration to the package
- * NO hard-coded models, everything comes from app!
+ * Provides app-specific AI models configuration
+ * For scenarios, use configureScenarios() from scenario-registry
  */
 
 import React, { createContext, useContext, type ReactNode } from "react";
 
 declare const __DEV__: boolean;
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export interface GenerationModels {
-  /** Image generation with face identity preservation (couple photos) */
   readonly imageCoupleMultiRef?: string;
-  /** Text-to-image generation */
   readonly imageTextToImage?: string;
-  /** Image-to-video generation */
   readonly imageToVideo?: string;
-  /** Text-to-video generation */
   readonly textToVideo?: string;
-  /** AI Kiss video */
   readonly aiKiss?: string;
-  /** AI Hug video */
   readonly aiHug?: string;
-  /** Face swap */
   readonly faceSwap?: string;
-  /** Meme generation (caption) */
   readonly memeCaption?: string;
-  /** Meme generation (image) */
   readonly memeImage?: string;
-  /** Text to voice */
   readonly textToVoice?: string;
 }
 
 export interface GenerationConfigValue {
-  /** AI models configuration from app */
   readonly models: GenerationModels;
-  /** Get model for specific feature type */
   readonly getModel: (featureType: keyof GenerationModels) => string;
 }
 
-// ============================================================================
-// Context
-// ============================================================================
-
-const GenerationConfigContext = createContext<GenerationConfigValue | null>(null);
-
-// ============================================================================
-// Provider
-// ============================================================================
+const GenerationConfigContext = createContext<GenerationConfigValue | null>(
+  null,
+);
 
 export interface GenerationConfigProviderProps {
   readonly children: ReactNode;
   readonly models: GenerationModels;
 }
 
-export const GenerationConfigProvider: React.FC<GenerationConfigProviderProps> = ({
-  children,
-  models,
-}) => {
+export const GenerationConfigProvider: React.FC<
+  GenerationConfigProviderProps
+> = ({ children, models }) => {
   if (typeof __DEV__ !== "undefined" && __DEV__) {
     const configuredModels = Object.entries(models)
       .filter(([, value]) => !!value)
       .map(([key]) => key);
-
-    console.log("[GenerationConfigProvider] Initialized with models:", {
-      configured: configuredModels,
-      imageCoupleMultiRef: models.imageCoupleMultiRef || "not configured",
-      imageTextToImage: models.imageTextToImage || "not configured",
-      imageToVideo: models.imageToVideo || "not configured",
-      textToVideo: models.textToVideo || "not configured",
-    });
+    console.log("[GenerationConfigProvider] Models:", configuredModels);
   }
 
   const getModel = (featureType: keyof GenerationModels): string => {
     const model = models[featureType];
     if (!model) {
-      const availableModels = Object.keys(models).filter(
-        (key) => models[key as keyof GenerationModels]
+      const available = Object.keys(models).filter(
+        (key) => models[key as keyof GenerationModels],
       );
-
       throw new Error(
-        `Model not configured for feature: ${featureType}.\n\n` +
-        `This app only supports: ${availableModels.join(", ") || "none"}.\n` +
-        `Please configure '${featureType}' in your GenerationConfigProvider if you need it.`
+        `Model not configured: ${featureType}. Available: ${available.join(", ") || "none"}`,
       );
     }
     return model;
   };
 
-  const value: GenerationConfigValue = {
-    models,
-    getModel,
-  };
+  const value: GenerationConfigValue = { models, getModel };
 
   return (
     <GenerationConfigContext.Provider value={value}>
@@ -103,19 +67,12 @@ export const GenerationConfigProvider: React.FC<GenerationConfigProviderProps> =
   );
 };
 
-// ============================================================================
-// Hook
-// ============================================================================
-
 export const useGenerationConfig = (): GenerationConfigValue => {
   const context = useContext(GenerationConfigContext);
-
   if (!context) {
     throw new Error(
-      "useGenerationConfig must be used within GenerationConfigProvider. " +
-      "Wrap your app with <GenerationConfigProvider models={{...}}>"
+      "useGenerationConfig must be used within GenerationConfigProvider",
     );
   }
-
   return context;
 };