@umituz/react-native-ai-generation-content 1.20.41 → 1.20.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.20.41",
+  "version": "1.20.43",
   "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/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",
+  },
+});