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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.20.40",
+  "version": "1.20.42",
   "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

@@ -25,31 +25,8 @@ export interface PartnerConfig {
   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 {
+export interface FlowVisualStyleData {
   readonly id: string;
   readonly icon: string;
   readonly labelKey: string;
@@ -57,7 +34,7 @@ export interface VisualStyleData {
 }
 
 /** Uploaded Image Data */
-export interface UploadedImageData {
+export interface FlowUploadedImageData {
   readonly uri: string;
   readonly base64: string;
   readonly mimeType: string;
@@ -88,9 +65,9 @@ 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 selectedCategory?: unknown;
+  readonly selectedScenario?: unknown;
+  readonly partners: Record<string, FlowUploadedImageData | undefined>;
   readonly partnerNames: Record<string, string>;
   readonly textInput?: string;
   readonly visualStyle?: string;
@@ -107,9 +84,9 @@ 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;
+  setCategory: (category: unknown) => void;
+  setScenario: (scenario: unknown) => void;
+  setPartnerImage: (partnerId: string, image: FlowUploadedImageData | undefined) => void;
   setPartnerName: (partnerId: string, name: string) => void;
   setTextInput: (text: string) => void;
   setVisualStyle: (styleId: string) => void;
@@ -148,9 +125,9 @@ export interface FlowCallbacks {
 
 /** Flow Data Provider - App provides data */
 export interface FlowDataProvider {
-  readonly categories?: readonly CategoryData[];
-  readonly scenarios?: readonly ScenarioData[];
-  readonly visualStyles?: readonly VisualStyleData[];
+  readonly categories?: readonly unknown[];
+  readonly scenarios?: readonly unknown[];
+  readonly visualStyles?: readonly FlowVisualStyleData[];
   readonly surprisePrompts?: readonly string[];
 }
 

package/src/features/couple-future/domain/wizard.types.ts

@@ -0,0 +1,118 @@
+/**
+ * Couple Future Wizard Types
+ * Configuration types for the couple future wizard component
+ */
+
+import type { StepType, FlowCallbacks, FlowUploadedImageData } from "../../../domain/entities/flow-config.types";
+
+/** Scenario data structure */
+export interface WizardScenarioData {
+  readonly id: string;
+  readonly title: string;
+  readonly description?: string;
+  readonly image?: string;
+  readonly aiPrompt?: string;
+  readonly category?: string;
+}
+
+/** Visual style option */
+export interface WizardVisualStyleOption {
+  readonly id: string;
+  readonly icon: string;
+  readonly labelKey: string;
+}
+
+/** Partner upload config */
+export interface WizardPartnerConfig {
+  readonly titleKey: string;
+  readonly subtitleKey: string;
+  readonly showFaceDetection?: boolean;
+  readonly showNameInput?: boolean;
+  readonly showPhotoTips?: boolean;
+}
+
+/** Wizard step config */
+export interface WizardStepConfig {
+  readonly id: string;
+  readonly type: StepType;
+  readonly enabled?: boolean;
+}
+
+/** Wizard configuration */
+export interface CoupleFutureWizardConfig {
+  readonly steps: readonly WizardStepConfig[];
+  readonly customScenarioId?: string;
+  readonly partnerA?: WizardPartnerConfig;
+  readonly partnerB?: WizardPartnerConfig;
+}
+
+/** Wizard translations */
+export interface CoupleFutureWizardTranslations {
+  readonly generator: {
+    readonly title: string;
+    readonly waitMessage: string;
+    readonly hint?: string;
+  };
+  readonly partnerA: {
+    readonly title: string;
+    readonly subtitle: string;
+    readonly continue: string;
+    readonly tapToUpload: string;
+    readonly selectPhoto: string;
+    readonly change: string;
+  };
+  readonly partnerB: {
+    readonly title: string;
+    readonly subtitle: string;
+    readonly continue: string;
+    readonly tapToUpload: string;
+    readonly selectPhoto: string;
+    readonly change: string;
+  };
+  readonly scenarioPreview: {
+    readonly continue: string;
+    readonly back?: string;
+  };
+  readonly defaultNames: {
+    readonly partnerA: string;
+    readonly partnerB: string;
+  };
+}
+
+/** Wizard data providers */
+export interface CoupleFutureWizardData {
+  readonly scenarios: readonly WizardScenarioData[];
+  readonly visualStyles?: readonly WizardVisualStyleOption[];
+  readonly surprisePrompts?: readonly string[];
+}
+
+/** Wizard callbacks */
+export interface CoupleFutureWizardCallbacks extends FlowCallbacks {
+  readonly onScenarioSelect?: (scenario: WizardScenarioData) => void;
+  readonly onPartnerUpload?: (partnerId: "A" | "B", image: FlowUploadedImageData) => void;
+  readonly requireFeature?: (callback: () => void) => boolean;
+}
+
+/** Wizard props */
+export interface CoupleFutureWizardProps {
+  readonly userId?: string;
+  readonly config: CoupleFutureWizardConfig;
+  readonly translations: CoupleFutureWizardTranslations;
+  readonly data: CoupleFutureWizardData;
+  readonly callbacks?: CoupleFutureWizardCallbacks;
+  readonly t: (key: string) => string;
+}
+
+/** Wizard state (exposed to parent) */
+export interface CoupleFutureWizardState {
+  readonly currentStepId: string;
+  readonly selectedScenario: WizardScenarioData | null;
+  readonly partnerA: FlowUploadedImageData | null;
+  readonly partnerB: FlowUploadedImageData | null;
+  readonly partnerAName: string;
+  readonly partnerBName: string;
+  readonly customPrompt: string;
+  readonly visualStyle: string;
+  readonly isGenerating: boolean;
+  readonly progress: number;
+}

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

@@ -47,6 +47,22 @@ export type {
 } from "./infrastructure/coupleFeatureRegistry";
 export { enhanceCouplePrompt } from "./infrastructure/couplePromptEnhancer";
 
+// Wizard Component
+export { CoupleFutureWizard, resetCoupleFutureWizard } from "./presentation/components/CoupleFutureWizard";
+export { GeneratingStepContent } from "./presentation/components/GeneratingStepContent";
+export type {
+  CoupleFutureWizardProps,
+  CoupleFutureWizardConfig,
+  CoupleFutureWizardTranslations,
+  CoupleFutureWizardData,
+  CoupleFutureWizardCallbacks,
+  CoupleFutureWizardState,
+  WizardScenarioData,
+  WizardVisualStyleOption,
+  WizardPartnerConfig,
+  WizardStepConfig,
+} from "./domain/wizard.types";
+
 // Generation utilities
 export {
   buildGenerationInputFromConfig,

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

@@ -0,0 +1,160 @@
+/**
+ * CoupleFutureWizard
+ * Complete wizard component for couple future generation flow
+ */
+
+import React, { useCallback, useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useFlow, resetFlowStore } from "../../../../infrastructure/flow";
+import { StepType } from "../../../../domain/entities/flow-config.types";
+import type { StepDefinition } from "../../../../domain/entities/flow-config.types";
+import type { CoupleFutureWizardProps, WizardScenarioData } from "../../domain/wizard.types";
+import { PartnerStepScreen } from "../../../partner-upload";
+import { ScenarioPreviewScreen } from "../../../scenarios";
+import { GeneratingStepContent } from "./GeneratingStepContent";
+
+const createStepDefinitions = (
+  config: CoupleFutureWizardProps["config"],
+): readonly StepDefinition[] => {
+  return config.steps.map((step) => ({
+    id: step.id,
+    type: step.type,
+    required: step.enabled !== false,
+  }));
+};
+
+export const CoupleFutureWizard: React.FC<CoupleFutureWizardProps> = ({
+  config,
+  translations,
+  data,
+  callbacks,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const stepDefinitions = useMemo(
+    () => createStepDefinitions(config),
+    [config],
+  );
+
+  const flow = useFlow({ steps: stepDefinitions });
+
+  const handleScenarioSelect = useCallback(
+    (scenario: WizardScenarioData) => {
+      flow.setCategory(scenario);
+      callbacks?.onScenarioSelect?.(scenario);
+      flow.nextStep();
+    },
+    [flow, callbacks],
+  );
+
+  const handleScenarioPreviewContinue = useCallback(() => {
+    const checkFeature = callbacks?.requireFeature;
+    if (checkFeature) {
+      checkFeature(() => flow.nextStep());
+    } else {
+      flow.nextStep();
+    }
+  }, [flow, callbacks]);
+
+  const handlePartnerAContinue = useCallback(
+    (image: { uri: string; base64: string; mimeType: string }, name?: string) => {
+      flow.setPartnerImage("A", image);
+      if (name) flow.setPartnerName("A", name);
+      callbacks?.onPartnerUpload?.("A", image);
+      flow.nextStep();
+    },
+    [flow, callbacks],
+  );
+
+  const handlePartnerBContinue = useCallback(
+    (image: { uri: string; base64: string; mimeType: string }, name?: string) => {
+      flow.setPartnerImage("B", image);
+      if (name) flow.setPartnerName("B", name);
+      callbacks?.onPartnerUpload?.("B", image);
+      flow.startGeneration();
+      callbacks?.onGenerationStart?.();
+    },
+    [flow, callbacks],
+  );
+
+  const renderCurrentStep = useCallback(() => {
+    const step = flow.currentStep;
+    if (!step) return null;
+
+    switch (step.type) {
+      case StepType.SCENARIO_SELECTION:
+        return null; // Rendered by parent via CategoryNavigationContainer
+
+      case StepType.SCENARIO_PREVIEW:
+        return (
+          <ScenarioPreviewScreen
+            scenario={flow.selectedCategory as never}
+            translations={translations.scenarioPreview as never}
+            onBack={flow.previousStep}
+            onContinue={handleScenarioPreviewContinue}
+            t={t}
+          />
+        );
+
+      case StepType.PARTNER_UPLOAD:
+        const isPartnerA = step.id.includes("A") || step.id === "PARTNER_A";
+        const partnerTranslations = isPartnerA
+          ? translations.partnerA
+          : translations.partnerB;
+        const partnerConfig = isPartnerA ? config.partnerA : config.partnerB;
+
+        return (
+          <PartnerStepScreen
+            key={isPartnerA ? "a" : "b"}
+            translations={partnerTranslations as never}
+            t={t}
+            initialName=""
+            config={{
+              showFaceDetection: partnerConfig?.showFaceDetection ?? false,
+              showNameInput: partnerConfig?.showNameInput ?? false,
+              showPhotoTips: partnerConfig?.showPhotoTips ?? true,
+              maxFileSizeMB: 10,
+              maxNameLength: 30,
+            }}
+            onBack={flow.previousStep}
+            onContinue={isPartnerA ? handlePartnerAContinue as never : handlePartnerBContinue as never}
+          />
+        );
+
+      case StepType.GENERATING:
+        return (
+          <GeneratingStepContent
+            progress={flow.generationProgress}
+            title={translations.generator.title}
+            message={translations.generator.waitMessage}
+            hint={translations.generator.hint}
+          />
+        );
+
+      default:
+        return null;
+    }
+  }, [
+    flow,
+    config,
+    translations,
+    t,
+    handleScenarioPreviewContinue,
+    handlePartnerAContinue,
+    handlePartnerBContinue,
+  ]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {renderCurrentStep()}
+    </View>
+  );
+};
+
+export { resetFlowStore as resetCoupleFutureWizard };
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

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

@@ -0,0 +1,86 @@
+/**
+ * GeneratingStepContent
+ * Display component for generation progress
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { GenerationProgressBar } from "../../../../presentation/components";
+
+interface GeneratingStepContentProps {
+  readonly progress: number;
+  readonly title: string;
+  readonly message: string;
+  readonly hint?: string;
+}
+
+export const GeneratingStepContent: React.FC<GeneratingStepContentProps> = ({
+  progress,
+  title,
+  message,
+  hint,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <View style={styles.content}>
+        <AtomicText type="headlineMedium" style={styles.title}>
+          {title}
+        </AtomicText>
+
+        <View style={styles.progressContainer}>
+          <GenerationProgressBar progress={progress} />
+        </View>
+
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.message, { color: tokens.colors.textSecondary }]}
+        >
+          {message}
+        </AtomicText>
+
+        {hint ? (
+          <AtomicText
+            type="labelSmall"
+            style={[styles.hint, { color: tokens.colors.textTertiary }]}
+          >
+            {hint}
+          </AtomicText>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  content: {
+    width: "100%",
+    paddingHorizontal: 24,
+    alignItems: "center",
+  },
+  title: {
+    textAlign: "center",
+    marginBottom: 32,
+  },
+  progressContainer: {
+    width: "100%",
+    marginBottom: 24,
+  },
+  message: {
+    textAlign: "center",
+    marginBottom: 16,
+  },
+  hint: {
+    textAlign: "center",
+  },
+});

package/src/index.ts

@@ -210,9 +210,7 @@ export type {
   StepComponentProps,
   StepTransition,
   PartnerConfig,
-  CategoryData,
-  ScenarioData,
-  VisualStyleData,
-  UploadedImageData,
+  FlowVisualStyleData,
+  FlowUploadedImageData,
   FlowGenerationStatus,
 } from "./domain/entities/flow-config.types";

package/src/infrastructure/flow/useFlow.ts

@@ -5,7 +5,7 @@
 
 import { useRef, useCallback, useMemo } from "react";
 import { createFlowStore, type FlowStoreType } from "./useFlowStore";
-import type { FlowState, FlowActions, StepDefinition } from "../../domain/entities/flow-config.types";
+import type { FlowState, FlowActions, StepDefinition, FlowUploadedImageData } from "../../domain/entities/flow-config.types";
 
 interface UseFlowConfig {
   steps: readonly StepDefinition[];
@@ -20,7 +20,7 @@ interface UseFlowReturn extends FlowState, FlowActions {
   isFirstStep: boolean;
   isLastStep: boolean;
   hasPartner: (partnerId: string) => boolean;
-  getPartnerImage: (partnerId: string) => FlowState["partners"][string];
+  getPartnerImage: (partnerId: string) => FlowUploadedImageData | undefined;
   getPartnerName: (partnerId: string) => string;
 }
 

package/src/infrastructure/flow/useFlowStore.ts

@@ -7,9 +7,7 @@ import { createStore } from "@umituz/react-native-design-system";
 import type {
   FlowState,
   FlowActions,
-  CategoryData,
-  ScenarioData,
-  UploadedImageData,
+  FlowUploadedImageData,
   StepDefinition,
 } from "../../domain/entities/flow-config.types";
 
@@ -84,10 +82,10 @@ export const createFlowStore = (config: FlowStoreConfig) => {
         }
       },
 
-      setCategory: (category: CategoryData | undefined) => set({ selectedCategory: category }),
-      setScenario: (scenario: ScenarioData | undefined) => set({ selectedScenario: scenario }),
+      setCategory: (category: unknown) => set({ selectedCategory: category }),
+      setScenario: (scenario: unknown) => set({ selectedScenario: scenario }),
 
-      setPartnerImage: (partnerId: string, image: UploadedImageData | undefined) => {
+      setPartnerImage: (partnerId: string, image: FlowUploadedImageData | undefined) => {
         const { partners } = get();
         set({ partners: { ...partners, [partnerId]: image } });
       },