@umituz/react-native-ai-generation-content 1.20.38 → 1.20.40

package/package.json

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

package/src/domain/entities/flow-config.types.ts

@@ -0,0 +1,174 @@
+/**
+ * Flow Configuration Types
+ * Generic multi-step flow system for AI generation
+ */
+
+/** Step Types */
+export enum StepType {
+  CATEGORY_SELECTION = "category_selection",
+  SCENARIO_SELECTION = "scenario_selection",
+  SCENARIO_PREVIEW = "scenario_preview",
+  PARTNER_UPLOAD = "partner_upload",
+  TEXT_INPUT = "text_input",
+  FEATURE_SELECTION = "feature_selection",
+  GENERATING = "generating",
+  RESULT_PREVIEW = "result_preview",
+  CUSTOM = "custom",
+}
+
+/** Partner Configuration */
+export interface PartnerConfig {
+  readonly partnerId: "A" | "B" | "single";
+  readonly showNameInput?: boolean;
+  readonly showFaceDetection?: boolean;
+  readonly showPhotoTips?: boolean;
+  readonly maxNameLength?: number;
+}
+
+/** Category Data - App provides */
+export interface CategoryData {
+  readonly id: string;
+  readonly titleKey: string;
+  readonly descriptionKey?: string;
+  readonly icon: string;
+  readonly imageUrl?: string;
+  readonly subcategories?: readonly CategoryData[];
+}
+
+/** Scenario Data - App provides */
+export interface ScenarioData {
+  readonly id: string;
+  readonly categoryId?: string;
+  readonly titleKey: string;
+  readonly descriptionKey: string;
+  readonly icon: string;
+  readonly imageUrl?: string;
+  readonly previewImageUrl?: string;
+  readonly aiPrompt: string;
+  readonly storyTemplate?: string;
+}
+
+/** Visual Style Option */
+export interface VisualStyleData {
+  readonly id: string;
+  readonly icon: string;
+  readonly labelKey: string;
+  readonly promptModifier?: string;
+}
+
+/** Uploaded Image Data */
+export interface UploadedImageData {
+  readonly uri: string;
+  readonly base64: string;
+  readonly mimeType: string;
+}
+
+/** Step Transition */
+export interface StepTransition {
+  readonly next?: string | ((state: FlowState) => string | null);
+  readonly back?: string;
+  readonly skipIf?: (state: FlowState) => boolean;
+}
+
+/** Step Definition */
+export interface StepDefinition<TConfig = unknown> {
+  readonly id: string;
+  readonly type: StepType;
+  readonly required?: boolean;
+  readonly config?: TConfig;
+  readonly transitions?: StepTransition;
+  readonly component?: React.ComponentType<StepComponentProps>;
+}
+
+/** Flow Generation Status */
+export type FlowGenerationStatus = "idle" | "preparing" | "generating" | "completed" | "failed";
+
+/** Flow State */
+export interface FlowState {
+  readonly currentStepId: string;
+  readonly currentStepIndex: number;
+  readonly completedSteps: readonly string[];
+  readonly selectedCategory?: CategoryData;
+  readonly selectedScenario?: ScenarioData;
+  readonly partners: Record<string, UploadedImageData | undefined>;
+  readonly partnerNames: Record<string, string>;
+  readonly textInput?: string;
+  readonly visualStyle?: string;
+  readonly selectedFeatures: Record<string, readonly string[]>;
+  readonly customData: Record<string, unknown>;
+  readonly generationStatus: FlowGenerationStatus;
+  readonly generationProgress: number;
+  readonly generationResult?: unknown;
+  readonly generationError?: string;
+}
+
+/** Flow Actions */
+export interface FlowActions {
+  goToStep: (stepId: string) => void;
+  nextStep: () => void;
+  previousStep: () => void;
+  setCategory: (category: CategoryData | undefined) => void;
+  setScenario: (scenario: ScenarioData | undefined) => void;
+  setPartnerImage: (partnerId: string, image: UploadedImageData | undefined) => void;
+  setPartnerName: (partnerId: string, name: string) => void;
+  setTextInput: (text: string) => void;
+  setVisualStyle: (styleId: string) => void;
+  setSelectedFeatures: (featureType: string, ids: readonly string[]) => void;
+  setCustomData: (key: string, value: unknown) => void;
+  startGeneration: () => void;
+  updateProgress: (progress: number) => void;
+  setResult: (result: unknown) => void;
+  setError: (error: string) => void;
+  reset: () => void;
+  completeStep: (stepId: string) => void;
+}
+
+/** Step Component Props */
+export interface StepComponentProps {
+  readonly step: StepDefinition;
+  readonly state: FlowState;
+  readonly actions: FlowActions;
+  readonly onNext: () => void;
+  readonly onBack: () => void;
+  readonly isProcessing: boolean;
+  readonly progress: number;
+  readonly error: string | null;
+}
+
+/** Flow Callbacks */
+export interface FlowCallbacks {
+  onAuthRequired?: (resume: () => void) => void;
+  onCreditsExhausted?: () => void;
+  onGenerationStart?: () => void;
+  onGenerationSuccess?: (result: unknown) => void;
+  onGenerationError?: (error: string) => void;
+  onStepChange?: (stepId: string, index: number) => void;
+  onFlowComplete?: (result: unknown) => void;
+}
+
+/** Flow Data Provider - App provides data */
+export interface FlowDataProvider {
+  readonly categories?: readonly CategoryData[];
+  readonly scenarios?: readonly ScenarioData[];
+  readonly visualStyles?: readonly VisualStyleData[];
+  readonly surprisePrompts?: readonly string[];
+}
+
+/** Flow Configuration */
+export interface FlowConfiguration {
+  readonly id: string;
+  readonly steps: readonly StepDefinition[];
+  readonly initialStepId?: string;
+  readonly callbacks?: FlowCallbacks;
+  readonly data?: FlowDataProvider;
+  readonly creditCost?: number;
+  readonly userId?: string;
+}
+
+/** Flow Features */
+export interface FlowFeatures {
+  readonly categorySelection: boolean;
+  readonly partnerCount: 0 | 1 | 2;
+  readonly textInput: boolean;
+  readonly scenarioSelection: boolean;
+}

package/src/domain/entities/index.ts

@@ -10,3 +10,4 @@ export * from "./progress.types";
 export * from "./middleware.types";
 export * from "./job.types";
 export * from "./processing-modes.types";
+export * from "./flow-config.types";

package/src/features/hd-touch-up/presentation/hooks/useHDTouchUpFeature.ts

@@ -4,7 +4,7 @@
  */
 
 import { useSingleImageFeature, type BaseSingleImageHookReturn } from "../../../image-to-image";
-import type { HDTouchUpFeatureConfig, HDTouchUpResult } from "../../domain/types";
+import type { HDTouchUpFeatureConfig } from "../../domain/types";
 
 export interface UseHDTouchUpFeatureProps {
   config: HDTouchUpFeatureConfig;

package/src/features/photo-restoration/presentation/hooks/usePhotoRestoreFeature.ts

@@ -4,7 +4,7 @@
  */
 
 import { useSingleImageFeature, type BaseSingleImageHookReturn } from "../../../image-to-image";
-import type { PhotoRestoreFeatureConfig, PhotoRestoreResult } from "../../domain/types";
+import type { PhotoRestoreFeatureConfig } from "../../domain/types";
 
 export interface UsePhotoRestoreFeatureProps {
   config: PhotoRestoreFeatureConfig;

package/src/features/remove-background/presentation/hooks/useRemoveBackgroundFeature.ts

@@ -4,7 +4,7 @@
  */
 
 import { useSingleImageFeature, type BaseSingleImageHookReturn } from "../../../image-to-image";
-import type { RemoveBackgroundFeatureConfig, RemoveBackgroundResult } from "../../domain/types";
+import type { RemoveBackgroundFeatureConfig } from "../../domain/types";
 
 export interface UseRemoveBackgroundFeatureProps {
   config: RemoveBackgroundFeatureConfig;

package/src/features/upscaling/presentation/hooks/useUpscaleFeature.ts

@@ -4,7 +4,7 @@
  */
 
 import { useSingleImageFeature, type BaseSingleImageHookReturn } from "../../../image-to-image";
-import type { UpscaleFeatureConfig, UpscaleResult } from "../../domain/types";
+import type { UpscaleFeatureConfig } from "../../domain/types";
 
 export interface UseUpscaleFeatureProps {
   config: UpscaleFeatureConfig;

package/src/index.ts

@@ -194,3 +194,25 @@ export type {
 
 // AIGenerationWizard - Generic wizard for all AI generation flows
 export * from "./features/wizard";
+
+// Flow System - Dynamic multi-step flow management
+export { createFlowStore, useFlow, resetFlowStore } from "./infrastructure/flow";
+export type { FlowStoreType } from "./infrastructure/flow";
+export { StepType } from "./domain/entities/flow-config.types";
+export type {
+  StepDefinition,
+  FlowState,
+  FlowActions,
+  FlowConfiguration,
+  FlowCallbacks,
+  FlowDataProvider,
+  FlowFeatures,
+  StepComponentProps,
+  StepTransition,
+  PartnerConfig,
+  CategoryData,
+  ScenarioData,
+  VisualStyleData,
+  UploadedImageData,
+  FlowGenerationStatus,
+} from "./domain/entities/flow-config.types";

package/src/infrastructure/flow/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Flow Infrastructure
+ * Multi-step flow management system
+ */
+
+export { createFlowStore, type FlowStoreType } from "./useFlowStore";
+export { useFlow, resetFlowStore } from "./useFlow";

package/src/infrastructure/flow/useFlow.ts

@@ -0,0 +1,87 @@
+/**
+ * useFlow Hook
+ * Main hook for accessing flow state and actions
+ */
+
+import { useRef, useCallback, useMemo } from "react";
+import { createFlowStore, type FlowStoreType } from "./useFlowStore";
+import type { FlowState, FlowActions, StepDefinition } from "../../domain/entities/flow-config.types";
+
+interface UseFlowConfig {
+  steps: readonly StepDefinition[];
+  initialStepId?: string;
+}
+
+interface UseFlowReturn extends FlowState, FlowActions {
+  canGoNext: boolean;
+  canGoBack: boolean;
+  currentStep: StepDefinition | undefined;
+  totalSteps: number;
+  isFirstStep: boolean;
+  isLastStep: boolean;
+  hasPartner: (partnerId: string) => boolean;
+  getPartnerImage: (partnerId: string) => FlowState["partners"][string];
+  getPartnerName: (partnerId: string) => string;
+}
+
+let flowStoreInstance: FlowStoreType | null = null;
+
+export const useFlow = (config: UseFlowConfig): UseFlowReturn => {
+  const storeRef = useRef<FlowStoreType | null>(null);
+
+  if (!storeRef.current) {
+    if (!flowStoreInstance) {
+      flowStoreInstance = createFlowStore(config);
+    }
+    storeRef.current = flowStoreInstance;
+  }
+
+  const store = storeRef.current;
+  const state = store();
+  const totalSteps = config.steps.length;
+
+  const canGoNext = state.currentStepIndex < totalSteps - 1;
+  const canGoBack = state.currentStepIndex > 0;
+  const isFirstStep = state.currentStepIndex === 0;
+  const isLastStep = state.currentStepIndex === totalSteps - 1;
+
+  const currentStep = useMemo(
+    () => config.steps[state.currentStepIndex],
+    [config.steps, state.currentStepIndex],
+  );
+
+  const hasPartner = useCallback(
+    (partnerId: string) => state.partners[partnerId] != null,
+    [state.partners],
+  );
+
+  const getPartnerImage = useCallback(
+    (partnerId: string) => state.partners[partnerId],
+    [state.partners],
+  );
+
+  const getPartnerName = useCallback(
+    (partnerId: string) => state.partnerNames[partnerId] ?? "",
+    [state.partnerNames],
+  );
+
+  return {
+    ...state,
+    canGoNext,
+    canGoBack,
+    currentStep,
+    totalSteps,
+    isFirstStep,
+    isLastStep,
+    hasPartner,
+    getPartnerImage,
+    getPartnerName,
+  };
+};
+
+export const resetFlowStore = () => {
+  if (flowStoreInstance) {
+    flowStoreInstance.getState().reset();
+  }
+  flowStoreInstance = null;
+};

package/src/infrastructure/flow/useFlowStore.ts

@@ -0,0 +1,145 @@
+/**
+ * useFlowStore
+ * Zustand store for multi-step flow state management
+ */
+
+import { createStore } from "@umituz/react-native-design-system";
+import type {
+  FlowState,
+  FlowActions,
+  CategoryData,
+  ScenarioData,
+  UploadedImageData,
+  StepDefinition,
+} from "../../domain/entities/flow-config.types";
+
+interface FlowStoreState extends FlowState {
+  stepDefinitions: readonly StepDefinition[];
+}
+
+const createInitialState = (): FlowState => ({
+  currentStepId: "",
+  currentStepIndex: 0,
+  completedSteps: [],
+  selectedCategory: undefined,
+  selectedScenario: undefined,
+  partners: {},
+  partnerNames: {},
+  textInput: undefined,
+  visualStyle: undefined,
+  selectedFeatures: {},
+  customData: {},
+  generationStatus: "idle",
+  generationProgress: 0,
+  generationResult: undefined,
+  generationError: undefined,
+});
+
+interface FlowStoreConfig {
+  steps: readonly StepDefinition[];
+  initialStepId?: string;
+}
+
+export const createFlowStore = (config: FlowStoreConfig) => {
+  const initialStepId = config.initialStepId ?? config.steps[0]?.id ?? "";
+  const initialIndex = Math.max(0, config.steps.findIndex((s) => s.id === initialStepId));
+
+  const initialState: FlowStoreState = {
+    ...createInitialState(),
+    currentStepId: initialStepId,
+    currentStepIndex: initialIndex,
+    stepDefinitions: config.steps,
+  };
+
+  return createStore<FlowStoreState, FlowActions>({
+    name: "flow_store",
+    initialState,
+    persist: false,
+    actions: (set, get) => ({
+      goToStep: (stepId: string) => {
+        const { stepDefinitions } = get();
+        const index = stepDefinitions.findIndex((s) => s.id === stepId);
+        if (index >= 0) {
+          set({ currentStepId: stepId, currentStepIndex: index, generationError: undefined });
+        }
+      },
+
+      nextStep: () => {
+        const { stepDefinitions, currentStepIndex, completedSteps, currentStepId } = get();
+        const nextIndex = currentStepIndex + 1;
+        if (nextIndex < stepDefinitions.length) {
+          const nextStep = stepDefinitions[nextIndex];
+          const newCompleted = completedSteps.includes(currentStepId)
+            ? completedSteps
+            : [...completedSteps, currentStepId];
+          set({ currentStepId: nextStep.id, currentStepIndex: nextIndex, completedSteps: newCompleted });
+        }
+      },
+
+      previousStep: () => {
+        const { stepDefinitions, currentStepIndex } = get();
+        if (currentStepIndex > 0) {
+          const prevStep = stepDefinitions[currentStepIndex - 1];
+          set({ currentStepId: prevStep.id, currentStepIndex: currentStepIndex - 1 });
+        }
+      },
+
+      setCategory: (category: CategoryData | undefined) => set({ selectedCategory: category }),
+      setScenario: (scenario: ScenarioData | undefined) => set({ selectedScenario: scenario }),
+
+      setPartnerImage: (partnerId: string, image: UploadedImageData | undefined) => {
+        const { partners } = get();
+        set({ partners: { ...partners, [partnerId]: image } });
+      },
+
+      setPartnerName: (partnerId: string, name: string) => {
+        const { partnerNames } = get();
+        set({ partnerNames: { ...partnerNames, [partnerId]: name } });
+      },
+
+      setTextInput: (text: string) => set({ textInput: text }),
+      setVisualStyle: (styleId: string) => set({ visualStyle: styleId }),
+
+      setSelectedFeatures: (featureType: string, ids: readonly string[]) => {
+        const { selectedFeatures } = get();
+        set({ selectedFeatures: { ...selectedFeatures, [featureType]: ids } });
+      },
+
+      setCustomData: (key: string, value: unknown) => {
+        const { customData } = get();
+        set({ customData: { ...customData, [key]: value } });
+      },
+
+      startGeneration: () => {
+        set({ generationStatus: "preparing", generationProgress: 0, generationError: undefined });
+      },
+
+      updateProgress: (progress: number) => {
+        set({ generationProgress: progress, generationStatus: progress > 0 ? "generating" : "preparing" });
+      },
+
+      setResult: (result: unknown) => {
+        set({ generationResult: result, generationStatus: "completed", generationProgress: 100 });
+      },
+
+      setError: (error: string) => {
+        set({ generationError: error, generationStatus: "failed", generationProgress: 0 });
+      },
+
+      reset: () => {
+        const { stepDefinitions } = get();
+        const firstStepId = stepDefinitions[0]?.id ?? "";
+        set({ ...createInitialState(), currentStepId: firstStepId, stepDefinitions });
+      },
+
+      completeStep: (stepId: string) => {
+        const { completedSteps } = get();
+        if (!completedSteps.includes(stepId)) {
+          set({ completedSteps: [...completedSteps, stepId] });
+        }
+      },
+    }),
+  });
+};
+
+export type FlowStoreType = ReturnType<typeof createFlowStore>;

package/src/presentation/components/AIGenerationConfig.tsx

@@ -4,7 +4,6 @@ import { View, Image, StyleSheet } from "react-native";
 import { AIGenerationHero } from "./AIGenerationHero";
 import { AIGenerationForm } from "./AIGenerationForm";
 import type { AIGenerationFormProps } from "./AIGenerationForm.types";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
 
 export interface AIGenerationConfigProps extends Omit<AIGenerationFormProps, "isGenerating" | "progress"> {
   readonly heroTitle: string;
@@ -24,8 +23,6 @@ export const AIGenerationConfig: React.FC<AIGenerationConfigProps> = ({
   progress = 0,
   ...formProps
 }) => {
-  const tokens = useAppDesignTokens();
-
   return (
     <View style={styles.container}>
       {heroTitle && (

package/src/presentation/components/flows/AIGenerateWizardFlow.tsx

@@ -61,7 +61,7 @@ export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
         <PartnerStepScreen
           t={t}
           onBack={handleBack}
-          onContinue={(img: any) => {
+          onContinue={(img: { uri: string; previewUrl?: string }) => {
             setStepImage(isStep2 ? 1 : 0, { uri: img.uri, previewUrl: img.previewUrl || img.uri });
             handleNext();
           }}
@@ -184,7 +184,7 @@ export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
               isGenerating={isGenerating}
               progress={progress}
               presets={presets}
-              onPresetPress={handleGenerate as any}
+              onPresetPress={() => { void handleGenerate(); }}
               prompt={prompt}
               onPromptChange={setPrompt}
               styles={styleOptions}

package/src/presentation/components/flows/AIGenerateWizardFlow.types.ts

@@ -33,11 +33,24 @@ export interface AIGenerateWizardTranslations {
   readonly maxFileSize: string;
 }
 
+export interface StyleOption {
+  readonly id: string;
+  readonly label: string;
+  readonly icon?: string;
+}
+
+export interface PresetOption {
+  readonly id: string;
+  readonly label: string;
+  readonly prompt?: string;
+  readonly icon?: string;
+}
+
 export interface AIGenerateWizardFlowProps {
   readonly featureType: string;
   readonly translations: AIGenerateWizardTranslations;
-  readonly styleOptions: any[];
-  readonly presets: any[];
+  readonly styleOptions: StyleOption[];
+  readonly presets: PresetOption[];
   readonly durationOptions: number[];
   readonly onGenerate: (data: {
     prompt: string;

package/src/presentation/components/flows/useAIGenerateWizardFlow.ts

@@ -3,9 +3,16 @@ import { useMemo, useCallback, useEffect } from "react";
 import { useAIGenerateState, AIGenerateStep } from "../../hooks/generation/useAIGenerateState";
 import { getAIFeatureConfig, hasAIFeature } from "../../screens/ai-feature/registry";
 
+interface GenerationData {
+  prompt: string;
+  style: string;
+  duration: number;
+  images: { uri: string; previewUrl?: string }[];
+}
+
 interface UseAIGenerateWizardFlowProps {
   featureType: string;
-  onGenerate: (data: any) => Promise<string | null | void>;
+  onGenerate: (data: GenerationData) => Promise<string | null | void>;
   onBack?: () => void;
 }
 
@@ -15,15 +22,15 @@ export function useAIGenerateWizardFlow({
   onBack: onBackProp,
 }: UseAIGenerateWizardFlowProps) {
   const state = useAIGenerateState();
-  const { 
-    currentStep, setCurrentStep, isGenerating, setIsGenerating, 
-    setProgress, setResult, images, prompt, selectedStyle, 
-    selectedDuration, setStepImage 
+  const {
+    currentStep, setCurrentStep, setIsGenerating,
+    setProgress, setResult, images, prompt, selectedStyle,
+    selectedDuration
   } = state;
 
   const imageCountRequired = useMemo(() => {
     if (!featureType || !hasAIFeature(featureType)) return 0;
-    const config = getAIFeatureConfig(featureType as any);
+    const config = getAIFeatureConfig(featureType as Parameters<typeof getAIFeatureConfig>[0]);
     if (config.mode === "dual" || config.mode === "dual-video") return 2;
     if (config.mode === "single" || config.mode === "single-with-prompt")
       return 1;

package/src/presentation/hooks/generation/orchestrator.ts

@@ -70,7 +70,10 @@ export const useGenerationOrchestrator = <TInput, TResult>(
 
   const offlineStore = useOfflineStore();
   const { showError, showSuccess } = useAlert();
-  const defaultCredits = useDeductCredit({ userId, onCreditsExhausted }) as any;
+  const defaultCredits = useDeductCredit({ userId, onCreditsExhausted }) as {
+    checkCredits: (amount: number) => Promise<boolean>;
+    deductCredit: (amount: number) => Promise<void>;
+  };
 
   // Use provided credit callbacks or default to useDeductCredit hook
   const checkCredits = credits?.checkCredits ?? defaultCredits.checkCredits;

package/src/presentation/hooks/generation/useAIFeatureGeneration.ts

@@ -9,12 +9,25 @@ import { prepareImage } from "../../../infrastructure/utils";
 import type { AIFeatureId } from "../../screens/ai-feature/types";
 import type { ImageFeatureType, VideoFeatureType } from "../../../domain/interfaces";
 
+interface AlertMessages {
+  success?: string;
+  error?: string;
+  network?: string;
+  credits?: string;
+}
+
+interface GenerationError {
+  type: string;
+  message: string;
+  originalError?: Error;
+}
+
 interface FeatureGenerationConfig {
   featureType: AIFeatureId;
   userId?: string;
-  alertMessages: any;
-  onSuccess?: (result: any) => void;
-  onError?: (error: any) => void;
+  alertMessages: AlertMessages;
+  onSuccess?: (result: string) => void;
+  onError?: (error: GenerationError) => void;
   creditCost?: number;
   onCreditsExhausted?: () => void;
 }