@umituz/react-native-ai-generation-content 1.26.2 → 1.26.4

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

@@ -1,239 +0,0 @@
-/**
- * CoupleFutureWizard
- * Complete wizard component for couple future generation flow
- */
-
-import React, { useCallback, useMemo, useEffect } 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 } 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();
-
-  // DEBUG: Log every render
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.log("[CoupleFutureWizard] RENDER", {
-      hasData: !!data,
-      hasSelectedScenario: !!data.selectedScenario,
-      scenarioId: data.selectedScenario?.id,
-    });
-  }
-
-  const stepDefinitions = useMemo(
-    () => createStepDefinitions(config),
-    [config],
-  );
-
-  // Determine initial step: skip SCENARIO_SELECTION if scenario is pre-selected
-  const initialStepIndex = useMemo(() => {
-    return data.selectedScenario ? 1 : 0;
-  }, [data.selectedScenario]);
-
-  const flow = useFlow({
-    steps: stepDefinitions,
-    initialStepIndex,
-  });
-
-  // DEBUG: Log flow state
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.log("[CoupleFutureWizard] FLOW STATE", {
-      currentStepIndex: flow.currentStepIndex,
-      currentStepId: flow.currentStep?.id,
-      currentStepType: flow.currentStep?.type,
-      totalSteps: stepDefinitions.length,
-    });
-  }
-
-  // Notify parent app when step changes
-  // NOTE: Do NOT include callbacks in dependencies - causes infinite loop!
-  // Parent app re-renders when onStepChange updates state, which recreates callbacks,
-  // which would retrigger this effect, creating infinite loop.
-  useEffect(() => {
-    if (flow.currentStep && callbacks?.onStepChange) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[CoupleFutureWizard] Step changed", {
-          stepId: flow.currentStep.id,
-          stepType: flow.currentStep.type,
-          currentStepIndex: flow.currentStepIndex,
-        });
-      }
-      callbacks.onStepChange(flow.currentStep.id, flow.currentStep.type);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flow.currentStep, flow.currentStepIndex]);
-
-  const handleScenarioPreviewContinue = useCallback(() => {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[CoupleFutureWizard] Preview Continue clicked");
-    }
-    // No auth check needed here - just proceed to photo upload
-    flow.nextStep();
-  }, [flow]);
-
-  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);
-
-      // Check auth/credits BEFORE starting generation (this consumes a credit)
-      const checkFeature = callbacks?.requireFeature;
-      if (checkFeature) {
-        checkFeature(() => {
-          flow.startGeneration();
-          callbacks?.onGenerationStart?.();
-        });
-      } else {
-        flow.startGeneration();
-        callbacks?.onGenerationStart?.();
-      }
-    },
-    [flow, callbacks],
-  );
-
-  const renderCurrentStep = useCallback(() => {
-    const step = flow.currentStep;
-    if (!step) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[CoupleFutureWizard] renderCurrentStep: NO STEP");
-      }
-      return null;
-    }
-
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[CoupleFutureWizard] renderCurrentStep", {
-        stepId: step.id,
-        stepType: step.type,
-        stepIndex: flow.currentStepIndex,
-      });
-    }
-
-    switch (step.type) {
-      case StepType.SCENARIO_SELECTION:
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.log("[CoupleFutureWizard] Rendering SCENARIO_SELECTION (null)");
-        }
-        return null; // Rendered by parent via CategoryNavigationContainer
-
-      case StepType.SCENARIO_PREVIEW:
-        const scenario = flow.selectedCategory || data.selectedScenario;
-        const handlePreviewBack = () => {
-          // If we came from CategoryNavigationContainer, reset to SCENARIO step
-          if (data.selectedScenario && !flow.selectedCategory) {
-            callbacks?.onBackToScenarioSelection?.();
-          } else {
-            flow.previousStep();
-          }
-        };
-        return (
-          <ScenarioPreviewScreen
-            scenario={scenario as never}
-            translations={translations.scenarioPreview as never}
-            onBack={handlePreviewBack}
-            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;
-
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.log("[CoupleFutureWizard] Rendering PartnerStepScreen", {
-            isPartnerA,
-            stepId: step.id,
-            hasConfig: !!partnerConfig,
-            hasTranslations: !!partnerTranslations,
-          });
-        }
-
-        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

@@ -1,86 +0,0 @@
-/**
- * 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/features/couple-future/presentation/components/RomanticMoodSelector.tsx

@@ -1,147 +0,0 @@
-/**
- * Romantic Mood Selector Component
- * Multi-select mood selector with intensity control
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { CoupleFeatureSelection } from "../../domain/types";
-import { ROMANTIC_MOOD_OPTIONS } from "../../infrastructure/coupleFeatureRegistry";
-
-export interface RomanticMoodSelectorProps {
-  selection: CoupleFeatureSelection;
-  onSelectionChange: (selection: CoupleFeatureSelection) => void;
-  translationPrefix: string;
-  t: (key: string) => string;
-}
-
-export const RomanticMoodSelector: React.FC<RomanticMoodSelectorProps> = ({
-  selection,
-  onSelectionChange,
-  translationPrefix,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-  const selectedMoods = selection.romanticMoods || [];
-  const intensity = selection.romanticIntensity || 70;
-
-  const handleMoodToggle = (moodId: string) => {
-    const newMoods = selectedMoods.includes(moodId)
-      ? selectedMoods.filter((id) => id !== moodId)
-      : [...selectedMoods, moodId];
-    onSelectionChange({ ...selection, romanticMoods: newMoods });
-  };
-
-  const handleIntensityChange = (value: number) => {
-    onSelectionChange({ ...selection, romanticIntensity: value });
-  };
-
-  return (
-    <ScrollView style={s.container}>
-      <View style={s.section}>
-        <AtomicText
-          type="bodyMedium"
-          style={[s.title, { color: tokens.colors.textPrimary }]}
-        >
-          {t(`${translationPrefix}.selectMoods`)}
-        </AtomicText>
-
-        <View style={s.grid}>
-          {ROMANTIC_MOOD_OPTIONS.map((mood) => {
-            const isSelected = selectedMoods.includes(mood.id);
-            return (
-              <TouchableOpacity
-                key={mood.id}
-                style={[
-                  s.card,
-                  {
-                    backgroundColor: isSelected
-                      ? `${tokens.colors.primary}15`
-                      : tokens.colors.surface,
-                    borderColor: isSelected
-                      ? tokens.colors.primary
-                      : tokens.colors.borderLight,
-                  },
-                ]}
-                onPress={() => handleMoodToggle(mood.id)}
-              >
-                <AtomicIcon
-                  name={mood.iconKey as never}
-                  size="md"
-                  color={isSelected ? "primary" : "textSecondary"}
-                />
-                <AtomicText
-                  type="labelSmall"
-                  style={[
-                    s.label,
-                    {
-                      color: isSelected
-                        ? tokens.colors.primary
-                        : tokens.colors.textSecondary,
-                      fontWeight: isSelected ? "600" : "400",
-                    },
-                  ]}
-                >
-                  {t(`${translationPrefix}.moods.${mood.labelKey}`)}
-                </AtomicText>
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-      </View>
-
-      <View style={s.section}>
-        <View style={s.header}>
-          <AtomicText type="bodyMedium" style={[s.title, { color: tokens.colors.textPrimary }]}>
-            {t(`${translationPrefix}.intensity`)}
-          </AtomicText>
-          <AtomicText type="bodyMedium" style={{ color: tokens.colors.primary, fontWeight: "600" }}>
-            {intensity}%
-          </AtomicText>
-        </View>
-
-        <View style={s.slider}>
-          {[25, 50, 75, 100].map((value) => (
-            <TouchableOpacity
-              key={value}
-              style={[
-                s.button,
-                {
-                  backgroundColor: intensity === value ? tokens.colors.primary : tokens.colors.surface,
-                  borderColor: intensity === value ? tokens.colors.primary : tokens.colors.borderLight,
-                },
-              ]}
-              onPress={() => handleIntensityChange(value)}
-            >
-              <AtomicText
-                type="labelSmall"
-                style={{
-                  color: intensity === value ? tokens.colors.onPrimary : tokens.colors.textSecondary,
-                }}
-              >
-                {value}%
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-};
-
-const s = StyleSheet.create({
-  container: { flex: 1 },
-  section: { padding: 16, marginBottom: 8 },
-  title: { fontWeight: "600", marginBottom: 12 },
-  grid: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
-  card: { width: "22%", aspectRatio: 1, padding: 8, borderRadius: 12, borderWidth: 2, alignItems: "center", justifyContent: "center" },
-  label: { marginTop: 4, textAlign: "center", fontSize: 10 },
-  header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
-  slider: { flexDirection: "row", gap: 8, marginTop: 8 },
-  button: { flex: 1, padding: 12, borderRadius: 8, borderWidth: 2, alignItems: "center" },
-});

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

@@ -1,141 +0,0 @@
-/**
- * Wardrobe Selector Component
- * Wardrobe style selector with intensity control
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { CoupleFeatureSelection } from "../../domain/types";
-
-const WARDROBE_STYLES = [
-  { id: "casual", iconKey: "shirt-outline" },
-  { id: "formal", iconKey: "briefcase-outline" },
-  { id: "sporty", iconKey: "fitness-outline" },
-  { id: "elegant", iconKey: "star-outline" },
-];
-
-export interface WardrobeSelectorProps {
-  selection: CoupleFeatureSelection;
-  onSelectionChange: (selection: CoupleFeatureSelection) => void;
-  translationPrefix: string;
-  t: (key: string) => string;
-}
-
-export const WardrobeSelector: React.FC<WardrobeSelectorProps> = ({
-  selection,
-  onSelectionChange,
-  translationPrefix,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-  const selectedStyle = selection.wardrobeStyle;
-  const intensity = selection.wardrobeIntensity || 70;
-
-  const handleStyleSelect = (styleId: string) => {
-    onSelectionChange({ ...selection, wardrobeStyle: styleId });
-  };
-
-  const handleIntensityChange = (value: number) => {
-    onSelectionChange({ ...selection, wardrobeIntensity: value });
-  };
-
-  return (
-    <ScrollView style={s.container}>
-      <View style={s.section}>
-        <AtomicText
-          type="bodyMedium"
-          style={[s.title, { color: tokens.colors.textPrimary }]}
-        >
-          {t(`${translationPrefix}.selectStyle`)}
-        </AtomicText>
-
-        <View style={s.grid}>
-          {WARDROBE_STYLES.map((style) => {
-            const isSelected = selectedStyle === style.id;
-            return (
-              <TouchableOpacity
-                key={style.id}
-                style={[
-                  s.card,
-                  {
-                    backgroundColor: isSelected
-                      ? `${tokens.colors.primary}15`
-                      : tokens.colors.surface,
-                    borderColor: isSelected
-                      ? tokens.colors.primary
-                      : tokens.colors.borderLight,
-                  },
-                ]}
-                onPress={() => handleStyleSelect(style.id)}
-              >
-                <AtomicIcon
-                  name={style.iconKey as never}
-                  size="lg"
-                  color={isSelected ? "primary" : "textSecondary"}
-                />
-                <AtomicText
-                  type="labelMedium"
-                  style={[
-                    s.label,
-                    {
-                      color: isSelected
-                        ? tokens.colors.primary
-                        : tokens.colors.textSecondary,
-                      fontWeight: isSelected ? "600" : "400",
-                    },
-                  ]}
-                >
-                  {t(`${translationPrefix}.styles.${style.id}`)}
-                </AtomicText>
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-      </View>
-
-      {selectedStyle && (
-        <View style={s.section}>
-          <View style={s.header}>
-            <AtomicText type="bodyMedium" style={[s.title, { color: tokens.colors.textPrimary }]}>
-              {t(`${translationPrefix}.intensity`)}
-            </AtomicText>
-            <AtomicText type="bodyMedium" style={{ color: tokens.colors.primary, fontWeight: "600" }}>
-              {intensity}%
-            </AtomicText>
-          </View>
-
-          <View style={s.slider}>
-            {[25, 50, 75, 100].map((value) => (
-              <TouchableOpacity
-                key={value}
-                style={[s.button, { backgroundColor: intensity === value ? tokens.colors.primary : tokens.colors.surface, borderColor: intensity === value ? tokens.colors.primary : tokens.colors.borderLight }]}
-                onPress={() => handleIntensityChange(value)}
-              >
-                <AtomicText type="labelSmall" style={{ color: intensity === value ? tokens.colors.onPrimary : tokens.colors.textSecondary }}>
-                  {value}%
-                </AtomicText>
-              </TouchableOpacity>
-            ))}
-          </View>
-        </View>
-      )}
-    </ScrollView>
-  );
-};
-
-const s = StyleSheet.create({
-  container: { flex: 1 },
-  section: { padding: 16, marginBottom: 8 },
-  title: { fontWeight: "600", marginBottom: 12 },
-  grid: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
-  card: { width: "47%", padding: 16, borderRadius: 12, borderWidth: 2, alignItems: "center", justifyContent: "center" },
-  label: { marginTop: 8, textAlign: "center" },
-  header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
-  slider: { flexDirection: "row", gap: 8, marginTop: 8 },
-  button: { flex: 1, padding: 12, borderRadius: 8, borderWidth: 2, alignItems: "center" },
-});

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

@@ -1,12 +0,0 @@
-/**
- * Couple Future Components
- */
-
-export { RomanticMoodSelector } from "./RomanticMoodSelector";
-export type { RomanticMoodSelectorProps } from "./RomanticMoodSelector";
-export { ArtStyleSelector } from "./ArtStyleSelector";
-export type { ArtStyleSelectorProps } from "./ArtStyleSelector";
-export { ArtistStyleSelector } from "./ArtistStyleSelector";
-export type { ArtistStyleSelectorProps } from "./ArtistStyleSelector";
-export { WardrobeSelector } from "./WardrobeSelector";
-export type { WardrobeSelectorProps } from "./WardrobeSelector";