@umituz/react-native-ai-generation-content 1.18.2 → 1.19.1

package/package.json

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

package/src/features/couple-future/index.ts

@@ -16,6 +16,13 @@ export type {
 export { COUPLE_FUTURE_DEFAULTS } from "./domain/types";
 export { useCoupleFutureGeneration } from "./presentation/hooks/useCoupleFutureGeneration";
 export type { CoupleFutureConfig as UseCoupleFutureGenerationConfig } from "./presentation/hooks/useCoupleFutureGeneration";
+export { useCoupleFutureFlow } from "./presentation/hooks/useCoupleFutureFlow";
+export type {
+  CoupleFutureFlowConfig,
+  CoupleFutureFlowState,
+  CoupleFutureFlowActions,
+  CoupleFutureFlowProps,
+} from "./presentation/hooks/useCoupleFutureFlow";
 export {
   RomanticMoodSelector,
   ArtStyleSelector,

package/src/features/couple-future/presentation/hooks/useCoupleFutureFlow.ts

@@ -0,0 +1,219 @@
+/**
+ * useCoupleFutureFlow Hook
+ * Handles couple future wizard flow logic
+ */
+
+import { useCallback, useEffect, useRef } from "react";
+import { InteractionManager } from "react-native";
+import { useCoupleFutureGeneration } from "./useCoupleFutureGeneration";
+import { buildGenerationInputFromConfig } from "../../infrastructure/generationUtils";
+import type { UploadedImage } from "../../../partner-upload/domain/types";
+
+export interface CoupleFutureFlowConfig<TStep, TScenarioId> {
+  steps: {
+    SCENARIO: TStep;
+    SCENARIO_PREVIEW: TStep;
+    COUPLE_FEATURE_SELECTOR: TStep;
+    TEXT_INPUT: TStep;
+    PARTNER_A: TStep;
+    PARTNER_B: TStep;
+    GENERATING: TStep;
+  };
+  customScenarioId: TScenarioId;
+}
+
+export interface CoupleFutureFlowState<TStep, TScenarioId> {
+  step: TStep;
+  selectedScenarioId: TScenarioId | null;
+  selectedFeature: string | null;
+  partnerA: unknown;
+  partnerB: unknown;
+  partnerAName: string;
+  partnerBName: string;
+  customPrompt: string | null;
+  visualStyle: string | null;
+  selection: unknown;
+  isProcessing: boolean;
+  scenarioConfig: unknown;
+  selectedScenarioData: { requiresPhoto?: boolean } | null;
+}
+
+export interface CoupleFutureFlowActions<TStep, TScenarioId, TResult> {
+  setStep: (step: TStep) => void;
+  selectScenario: (id: TScenarioId) => void;
+  setPartnerA: (image: unknown) => void;
+  setPartnerAName: (name: string) => void;
+  setPartnerB: (image: unknown) => void;
+  setPartnerBName: (name: string) => void;
+  setCustomPrompt: (prompt: string) => void;
+  setVisualStyle: (style: string) => void;
+  startGeneration: () => void;
+  generationSuccess: (result: TResult) => void;
+  generationError: (error: string) => void;
+  requireFeature: (callback: () => void) => void;
+  onNavigateToHistory: () => void;
+}
+
+export interface CoupleFutureFlowProps<TStep, TScenarioId, TResult> {
+  userId?: string;
+  config: CoupleFutureFlowConfig<TStep, TScenarioId>;
+  state: CoupleFutureFlowState<TStep, TScenarioId>;
+  actions: CoupleFutureFlowActions<TStep, TScenarioId, TResult>;
+  generationConfig: {
+    visualStyleModifiers: Record<string, string>;
+    defaultPartnerAName: string;
+    defaultPartnerBName: string;
+  };
+  alertMessages: {
+    networkError: string;
+    policyViolation: string;
+    saveFailed: string;
+    creditFailed: string;
+    unknown: string;
+  };
+  processResult: (imageUrl: string, input: unknown) => TResult;
+  buildCreation: (result: TResult, input: unknown) => unknown;
+  onCreditsExhausted: () => void;
+}
+
+export const useCoupleFutureFlow = <TStep, TScenarioId, TResult>(
+  props: CoupleFutureFlowProps<TStep, TScenarioId, TResult>,
+) => {
+  const { config, state, actions, generationConfig, alertMessages } = props;
+  const { processResult, buildCreation, onCreditsExhausted, userId } = props;
+  const hasStarted = useRef(false);
+
+  const { generate, isGenerating, progress } =
+    useCoupleFutureGeneration<TResult>({
+      userId,
+      onCreditsExhausted,
+      onSuccess: (result) => {
+        actions.generationSuccess(result);
+        InteractionManager.runAfterInteractions(() => {
+          setTimeout(() => actions.onNavigateToHistory(), 300);
+        });
+      },
+      onError: actions.generationError,
+      processResult: processResult as never,
+      buildCreation: buildCreation as never,
+      alertMessages,
+    });
+
+  useEffect(() => {
+    if (state.step !== config.steps.GENERATING) {
+      hasStarted.current = false;
+      return;
+    }
+    if (!state.isProcessing || hasStarted.current) return;
+    hasStarted.current = true;
+
+    const input = buildGenerationInputFromConfig({
+      partnerA: state.partnerA as never,
+      partnerB: state.partnerB as never,
+      partnerAName: state.partnerAName,
+      partnerBName: state.partnerBName,
+      scenario: state.scenarioConfig as never,
+      customPrompt: state.customPrompt || undefined,
+      visualStyle: state.visualStyle || "",
+      defaultPartnerAName: generationConfig.defaultPartnerAName,
+      defaultPartnerBName: generationConfig.defaultPartnerBName,
+      coupleFeatureSelection: state.selection as never,
+      visualStyles: generationConfig.visualStyleModifiers,
+      customScenarioId: config.customScenarioId as string,
+    });
+    if (input) generate(input);
+  }, [state, config, generationConfig, generate]);
+
+  const handleScenarioSelect = useCallback(
+    (id: string) => {
+      actions.selectScenario(id as TScenarioId);
+      actions.setStep(config.steps.SCENARIO_PREVIEW);
+    },
+    [actions, config.steps.SCENARIO_PREVIEW],
+  );
+
+  const handleScenarioPreviewBack = useCallback(
+    () => actions.setStep(config.steps.SCENARIO),
+    [actions, config.steps.SCENARIO],
+  );
+
+  const handleScenarioPreviewContinue = useCallback(() => {
+    if (state.selectedFeature) {
+      actions.setStep(config.steps.COUPLE_FEATURE_SELECTOR);
+    } else if (
+      state.selectedScenarioId === config.customScenarioId ||
+      state.selectedScenarioData?.requiresPhoto === false
+    ) {
+      actions.setStep(config.steps.TEXT_INPUT);
+    } else {
+      actions.setStep(config.steps.PARTNER_A);
+    }
+  }, [actions, config, state]);
+
+  const handlePartnerAContinue = useCallback(
+    (image: UploadedImage, name: string) => {
+      actions.setPartnerA(image);
+      actions.setPartnerAName(name);
+      actions.setStep(config.steps.PARTNER_B);
+    },
+    [actions, config.steps.PARTNER_B],
+  );
+
+  const handlePartnerABack = useCallback(() => {
+    actions.setStep(
+      state.selectedScenarioId === config.customScenarioId
+        ? config.steps.TEXT_INPUT
+        : config.steps.SCENARIO_PREVIEW,
+    );
+  }, [actions, config, state.selectedScenarioId]);
+
+  const handlePartnerBContinue = useCallback(
+    (image: UploadedImage, name: string) => {
+      actions.requireFeature(() => {
+        actions.setPartnerB(image);
+        actions.setPartnerBName(name);
+        actions.startGeneration();
+      });
+    },
+    [actions],
+  );
+
+  const handlePartnerBBack = useCallback(
+    () => actions.setStep(config.steps.PARTNER_A),
+    [actions, config.steps.PARTNER_A],
+  );
+
+  const handleMagicPromptContinue = useCallback(
+    (prompt: string, style: string) => {
+      actions.setCustomPrompt(prompt);
+      actions.setVisualStyle(style);
+      if (state.selectedScenarioId === config.customScenarioId) {
+        actions.setStep(config.steps.PARTNER_A);
+      } else {
+        actions.startGeneration();
+      }
+    },
+    [actions, config, state.selectedScenarioId],
+  );
+
+  const handleMagicPromptBack = useCallback(
+    () => actions.setStep(config.steps.SCENARIO_PREVIEW),
+    [actions, config.steps.SCENARIO_PREVIEW],
+  );
+
+  return {
+    isGenerating,
+    progress,
+    handlers: {
+      handleScenarioSelect,
+      handleScenarioPreviewBack,
+      handleScenarioPreviewContinue,
+      handlePartnerAContinue,
+      handlePartnerABack,
+      handlePartnerBContinue,
+      handlePartnerBBack,
+      handleMagicPromptContinue,
+      handleMagicPromptBack,
+    },
+  };
+};

package/src/features/wizard/domain/types.ts

@@ -0,0 +1,81 @@
+/**
+ * AIGenerationWizard Types
+ * Generic wizard for all AI generation flows
+ */
+
+import type { ReactNode } from "react";
+import type { UploadedImage } from "../../partner-upload/domain/types";
+
+// Step types
+export type WizardStepId = string;
+
+export interface WizardStep {
+  id: WizardStepId;
+  component: React.ComponentType<WizardStepProps>;
+}
+
+export interface WizardStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  onComplete: () => void;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+}
+
+// Wizard state
+export interface WizardState {
+  currentStepIndex: number;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+  result: unknown | null;
+  images: Record<string, UploadedImage | null>;
+  names: Record<string, string>;
+  customData: Record<string, unknown>;
+}
+
+// Wizard config
+export interface AIGenerationWizardConfig {
+  steps: WizardStep[];
+  initialStep?: number;
+  creditCost?: number;
+}
+
+// Wizard callbacks
+export interface AIGenerationWizardCallbacks {
+  onAuthRequired?: (callback: () => void) => void;
+  onCreditsExhausted?: () => void;
+  onGenerationStart?: () => void;
+  onGenerationSuccess?: (result: unknown) => void;
+  onGenerationError?: (error: string) => void;
+  onStepChange?: (stepIndex: number, stepId: WizardStepId) => void;
+}
+
+// Main props
+export interface AIGenerationWizardProps {
+  userId?: string;
+  isAuthenticated?: boolean;
+  hasCredits?: boolean;
+  config: AIGenerationWizardConfig;
+  callbacks?: AIGenerationWizardCallbacks;
+  renderStep?: (step: WizardStep, props: WizardStepProps) => ReactNode;
+  children?: ReactNode;
+}
+
+// Store actions
+export interface WizardActions {
+  nextStep: () => void;
+  prevStep: () => void;
+  goToStep: (index: number) => void;
+  setImage: (key: string, image: UploadedImage | null) => void;
+  setName: (key: string, name: string) => void;
+  setCustomData: (key: string, value: unknown) => void;
+  setProcessing: (isProcessing: boolean) => void;
+  setProgress: (progress: number) => void;
+  setError: (error: string | null) => void;
+  setResult: (result: unknown) => void;
+  reset: () => void;
+}
+
+export type WizardStore = WizardState & WizardActions;

package/src/features/wizard/index.ts

@@ -0,0 +1,26 @@
+/**
+ * AIGenerationWizard Feature
+ * Generic wizard for all AI generation flows
+ */
+
+// Component
+export { AIGenerationWizard, default as AIGenerationWizardDefault } from "./presentation/components/AIGenerationWizard";
+
+// Hooks
+export { useWizard, resetWizardStore } from "./presentation/hooks/useWizard";
+
+// Store
+export { createWizardStore, type WizardStoreType } from "./presentation/store/useWizardStore";
+
+// Types (UploadedImage is already exported from partner-upload)
+export type {
+  WizardStepId,
+  WizardStep,
+  WizardStepProps,
+  WizardState,
+  WizardActions,
+  WizardStore,
+  AIGenerationWizardConfig,
+  AIGenerationWizardCallbacks,
+  AIGenerationWizardProps,
+} from "./domain/types";

package/src/features/wizard/presentation/components/AIGenerationWizard.tsx

@@ -0,0 +1,136 @@
+/**
+ * AIGenerationWizard
+ * Generic wizard component for all AI generation flows
+ */
+
+import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import { View, StyleSheet } from "react-native";
+import type {
+  AIGenerationWizardProps,
+  WizardStepProps,
+  WizardStep,
+} from "../../domain/types";
+import { createWizardStore, type WizardStoreType } from "../store/useWizardStore";
+
+export const AIGenerationWizard: React.FC<AIGenerationWizardProps> = ({
+  userId,
+  isAuthenticated = false,
+  hasCredits = true,
+  config,
+  callbacks,
+  renderStep,
+  children,
+}) => {
+  const { steps, initialStep = 0 } = config;
+  const storeRef = useRef<WizardStoreType | null>(null);
+
+  // Create store once
+  if (!storeRef.current) {
+    storeRef.current = createWizardStore({ totalSteps: steps.length });
+  }
+
+  const store = storeRef.current;
+  const state = store();
+
+  // Initialize to initialStep if provided
+  useEffect(() => {
+    if (initialStep > 0 && state.currentStepIndex === 0) {
+      state.goToStep(initialStep);
+    }
+  }, [initialStep, state]);
+
+  // Auth check before proceeding
+  const handleAuthCheck = useCallback(
+    (callback: () => void) => {
+      if (!isAuthenticated && callbacks?.onAuthRequired) {
+        callbacks.onAuthRequired(callback);
+        return false;
+      }
+      return true;
+    },
+    [isAuthenticated, callbacks],
+  );
+
+  // Credit check before generation
+  const handleCreditCheck = useCallback(() => {
+    if (!hasCredits && callbacks?.onCreditsExhausted) {
+      callbacks.onCreditsExhausted();
+      return false;
+    }
+    return true;
+  }, [hasCredits, callbacks]);
+
+  // Step navigation handlers
+  const handleNext = useCallback(() => {
+    const canProceed = handleAuthCheck(() => {
+      state.nextStep();
+    });
+    if (canProceed) {
+      state.nextStep();
+      callbacks?.onStepChange?.(
+        state.currentStepIndex + 1,
+        steps[state.currentStepIndex + 1]?.id ?? "",
+      );
+    }
+  }, [handleAuthCheck, state, callbacks, steps]);
+
+  const handleBack = useCallback(() => {
+    state.prevStep();
+    callbacks?.onStepChange?.(
+      state.currentStepIndex - 1,
+      steps[state.currentStepIndex - 1]?.id ?? "",
+    );
+  }, [state, callbacks, steps]);
+
+  const handleComplete = useCallback(() => {
+    if (!handleCreditCheck()) {
+      return;
+    }
+
+    state.setProcessing(true);
+    callbacks?.onGenerationStart?.();
+  }, [handleCreditCheck, state, callbacks]);
+
+  // Build step props
+  const stepProps: WizardStepProps = useMemo(
+    () => ({
+      onNext: handleNext,
+      onBack: handleBack,
+      onComplete: handleComplete,
+      isProcessing: state.isProcessing,
+      progress: state.progress,
+      error: state.error,
+    }),
+    [handleNext, handleBack, handleComplete, state.isProcessing, state.progress, state.error],
+  );
+
+  // Current step
+  const currentStep = steps[state.currentStepIndex];
+
+  // Render current step
+  const renderCurrentStep = useCallback(() => {
+    if (!currentStep) return null;
+
+    if (renderStep) {
+      return renderStep(currentStep, stepProps);
+    }
+
+    const StepComponent = currentStep.component;
+    return <StepComponent {...stepProps} />;
+  }, [currentStep, stepProps, renderStep]);
+
+  return (
+    <View style={styles.container}>
+      {renderCurrentStep()}
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default AIGenerationWizard;

package/src/features/wizard/presentation/hooks/useWizard.ts

@@ -0,0 +1,120 @@
+/**
+ * useWizard Hook
+ * Access wizard store state and actions
+ */
+
+import { useRef, useCallback } from "react";
+import { createWizardStore, type WizardStoreType } from "../store/useWizardStore";
+import type { WizardState, WizardActions } from "../../domain/types";
+import type { UploadedImage } from "../../../partner-upload/domain/types";
+
+interface UseWizardConfig {
+  totalSteps: number;
+}
+
+interface UseWizardReturn extends WizardState, WizardActions {
+  /** Check if user can go to next step */
+  canGoNext: boolean;
+  /** Check if user can go to previous step */
+  canGoBack: boolean;
+  /** Get image by key */
+  getImage: (key: string) => UploadedImage | null;
+  /** Get name by key */
+  getName: (key: string) => string;
+  /** Get custom data by key */
+  getData: <T>(key: string) => T | undefined;
+  /** Check if all required images are uploaded */
+  hasImages: (keys: string[]) => boolean;
+  /** Check if all required names are filled */
+  hasNames: (keys: string[]) => boolean;
+}
+
+// Store singleton per wizard instance
+let wizardStoreInstance: WizardStoreType | null = null;
+
+export const useWizard = (config: UseWizardConfig): UseWizardReturn => {
+  const storeRef = useRef<WizardStoreType | null>(null);
+
+  // Create or reuse store
+  if (!storeRef.current) {
+    if (!wizardStoreInstance) {
+      wizardStoreInstance = createWizardStore(config);
+    }
+    storeRef.current = wizardStoreInstance;
+  }
+
+  const store = storeRef.current;
+  const state = store();
+
+  // Computed helpers
+  const canGoNext = state.currentStepIndex < config.totalSteps - 1;
+  const canGoBack = state.currentStepIndex > 0;
+
+  const getImage = useCallback(
+    (key: string) => state.images[key] ?? null,
+    [state.images],
+  );
+
+  const getName = useCallback(
+    (key: string) => state.names[key] ?? "",
+    [state.names],
+  );
+
+  const getData = useCallback(
+    <T>(key: string) => state.customData[key] as T | undefined,
+    [state.customData],
+  );
+
+  const hasImages = useCallback(
+    (keys: string[]) => keys.every((key) => state.images[key] != null),
+    [state.images],
+  );
+
+  const hasNames = useCallback(
+    (keys: string[]) =>
+      keys.every((key) => state.names[key] && state.names[key].trim().length > 0),
+    [state.names],
+  );
+
+  return {
+    // State
+    currentStepIndex: state.currentStepIndex,
+    isProcessing: state.isProcessing,
+    progress: state.progress,
+    error: state.error,
+    result: state.result,
+    images: state.images,
+    names: state.names,
+    customData: state.customData,
+
+    // Actions
+    nextStep: state.nextStep,
+    prevStep: state.prevStep,
+    goToStep: state.goToStep,
+    setImage: state.setImage,
+    setName: state.setName,
+    setCustomData: state.setCustomData,
+    setProcessing: state.setProcessing,
+    setProgress: state.setProgress,
+    setError: state.setError,
+    setResult: state.setResult,
+    reset: state.reset,
+
+    // Helpers
+    canGoNext,
+    canGoBack,
+    getImage,
+    getName,
+    getData,
+    hasImages,
+    hasNames,
+  };
+};
+
+/** Reset the wizard store singleton */
+export const resetWizardStore = () => {
+  if (wizardStoreInstance) {
+    wizardStoreInstance.getState().reset();
+  }
+  wizardStoreInstance = null;
+};

package/src/features/wizard/presentation/store/useWizardStore.ts

@@ -0,0 +1,82 @@
+/**
+ * useWizardStore
+ * Built-in store for AIGenerationWizard using design-system createStore
+ */
+
+import { createStore } from "@umituz/react-native-design-system";
+import type { WizardState, WizardActions } from "../../domain/types";
+import type { UploadedImage } from "../../../partner-upload/domain/types";
+
+const INITIAL_STATE: WizardState = {
+  currentStepIndex: 0,
+  isProcessing: false,
+  progress: 0,
+  error: null,
+  result: null,
+  images: {},
+  names: {},
+  customData: {},
+};
+
+interface WizardStoreConfig {
+  totalSteps: number;
+}
+
+export const createWizardStore = (config: WizardStoreConfig) =>
+  createStore<WizardState, WizardActions>({
+    name: "wizard_store",
+    initialState: INITIAL_STATE,
+    persist: false,
+    actions: (set, get) => ({
+      nextStep: () => {
+        const { currentStepIndex } = get();
+        if (currentStepIndex < config.totalSteps - 1) {
+          set({ currentStepIndex: currentStepIndex + 1, error: null });
+        }
+      },
+
+      prevStep: () => {
+        const { currentStepIndex } = get();
+        if (currentStepIndex > 0) {
+          set({ currentStepIndex: currentStepIndex - 1, error: null });
+        }
+      },
+
+      goToStep: (index: number) => {
+        if (index >= 0 && index < config.totalSteps) {
+          set({ currentStepIndex: index, error: null });
+        }
+      },
+
+      setImage: (key: string, image: UploadedImage | null) => {
+        const { images } = get();
+        set({ images: { ...images, [key]: image } });
+      },
+
+      setName: (key: string, name: string) => {
+        const { names } = get();
+        set({ names: { ...names, [key]: name } });
+      },
+
+      setCustomData: (key: string, value: unknown) => {
+        const { customData } = get();
+        set({ customData: { ...customData, [key]: value } });
+      },
+
+      setProcessing: (isProcessing: boolean) => set({ isProcessing }),
+
+      setProgress: (progress: number) => set({ progress }),
+
+      setError: (error: string | null) => {
+        set({ error, isProcessing: false, progress: 0 });
+      },
+
+      setResult: (result: unknown) => {
+        set({ result, isProcessing: false, progress: 100 });
+      },
+
+      reset: () => set(INITIAL_STATE),
+    }),
+  });
+
+export type WizardStoreType = ReturnType<typeof createWizardStore>;

package/src/index.ts

@@ -188,3 +188,6 @@ export type {
   ComparisonTranslationKeys,
   PromptTranslationKeys,
 } from "./presentation/screens/ai-feature";
+
+// AIGenerationWizard - Generic wizard for all AI generation flows
+export * from "./features/wizard";