@umituz/react-native-ai-generation-content 1.17.265 → 1.17.266

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.265",
+  "version": "1.17.266",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -77,6 +77,7 @@
     "expo-haptics": "^15.0.8",
     "expo-image": "^3.0.11",
     "expo-image-manipulator": "^14.0.8",
+    "expo-image-picker": "^17.0.10",
     "expo-linear-gradient": "^15.0.8",
     "expo-localization": "^17.0.8",
     "expo-media-library": "^18.2.1",

package/src/features/love-message/infrastructure/persistence/PartnerProfileRepository.ts

@@ -3,7 +3,7 @@
  * Handles persistence of partner profile data
  */
 
-import { storageRepository } from "@umituz/react-native-design-system";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { PartnerProfile } from "../../domain/types";
 
 const PARTNER_PROFILE_STORAGE_KEY = "love_message_partner_profile";
@@ -14,12 +14,9 @@ export const PartnerProfileRepository = {
    */
   getProfile: async (): Promise<PartnerProfile | null> => {
     try {
-      const result = await storageRepository.getItem(
-        PARTNER_PROFILE_STORAGE_KEY,
-        "",
-      );
-      if (result.success && result.data) {
-        return JSON.parse(result.data) as PartnerProfile;
+      const data = await AsyncStorage.getItem(PARTNER_PROFILE_STORAGE_KEY);
+      if (data) {
+        return JSON.parse(data) as PartnerProfile;
       }
       return null;
     } catch {
@@ -32,11 +29,8 @@ export const PartnerProfileRepository = {
    */
   saveProfile: async (profile: PartnerProfile): Promise<boolean> => {
     try {
-      const result = await storageRepository.setItem(
-        PARTNER_PROFILE_STORAGE_KEY,
-        JSON.stringify(profile),
-      );
-      return result.success;
+      await AsyncStorage.setItem(PARTNER_PROFILE_STORAGE_KEY, JSON.stringify(profile));
+      return true;
     } catch {
       return false;
     }
@@ -47,10 +41,8 @@ export const PartnerProfileRepository = {
    */
   clearProfile: async (): Promise<boolean> => {
     try {
-      const result = await storageRepository.removeItem(
-        PARTNER_PROFILE_STORAGE_KEY,
-      );
-      return result.success;
+      await AsyncStorage.removeItem(PARTNER_PROFILE_STORAGE_KEY);
+      return true;
     } catch {
       return false;
     }

package/src/features/partner-upload/domain/types.ts

@@ -0,0 +1,59 @@
+/**
+ * Partner Upload Types
+ * Generic partner/photo upload feature types
+ */
+
+export interface UploadedImage {
+  readonly uri: string;
+  readonly base64?: string;
+  readonly previewUrl: string;
+  readonly width?: number;
+  readonly height?: number;
+}
+
+export interface PartnerStepConfig {
+  readonly titleKey: string;
+  readonly subtitleKey: string;
+  readonly showFaceDetection?: boolean;
+  readonly showNameInput?: boolean;
+  readonly showPhotoTips?: boolean;
+  readonly maxNameLength?: number;
+  readonly namePlaceholderKey?: string;
+}
+
+export interface PartnerStepTranslations {
+  readonly tapToUpload: string;
+  readonly selectPhoto: string;
+  readonly change: string;
+  readonly analyzing: string;
+  readonly continue: string;
+  readonly faceDetectionLabel?: string;
+  readonly namePlaceholder?: string;
+  readonly photoTip1?: string;
+  readonly photoTip2?: string;
+  readonly photoTip3?: string;
+}
+
+export interface PhotoTipsConfig {
+  readonly tips: readonly string[];
+  readonly icon?: string;
+}
+
+export const DEFAULT_PARTNER_STEP_CONFIG: PartnerStepConfig = {
+  titleKey: "partner.upload.title",
+  subtitleKey: "partner.upload.subtitle",
+  showFaceDetection: false,
+  showNameInput: true,
+  showPhotoTips: true,
+  maxNameLength: 50,
+  namePlaceholderKey: "partner.upload.namePlaceholder",
+} as const;
+
+export const DEFAULT_PHOTO_TIPS: PhotoTipsConfig = {
+  tips: [
+    "photoTips.tip1",
+    "photoTips.tip2",
+    "photoTips.tip3",
+  ],
+  icon: "lightbulb",
+} as const;

package/src/features/partner-upload/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Partner Upload Feature
+ * Generic partner/photo upload screens and components
+ */
+
+export type {
+  UploadedImage,
+  PartnerStepConfig,
+  PartnerStepTranslations,
+  PhotoTipsConfig,
+} from "./domain/types";
+export { DEFAULT_PARTNER_STEP_CONFIG, DEFAULT_PHOTO_TIPS } from "./domain/types";
+
+export { PhotoTips, PartnerInfoInput } from "./presentation/components";
+export type { PhotoTipsProps, PhotoTipConfig, PartnerInfoInputProps } from "./presentation/components";
+
+export { usePartnerStep } from "./presentation/hooks";
+export type {
+  UsePartnerStepConfig,
+  UsePartnerStepTranslations,
+  UsePartnerStepOptions,
+  UsePartnerStepReturn,
+} from "./presentation/hooks";
+
+export { PartnerStepScreen } from "./presentation/screens";
+export type {
+  PartnerStepScreenProps,
+  PartnerStepScreenTranslations,
+  PartnerStepScreenConfig,
+} from "./presentation/screens";

package/src/features/partner-upload/presentation/components/PartnerInfoInput.tsx

@@ -0,0 +1,112 @@
+/**
+ * PartnerInfoInput Component
+ * Name and optional description input for partner
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicInput, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface PartnerInfoInputProps {
+  readonly t: (key: string) => string;
+  readonly name: string;
+  readonly onNameChange: (name: string) => void;
+  readonly description?: string;
+  readonly onDescriptionChange?: (description: string) => void;
+  readonly showName?: boolean;
+  readonly showDescription?: boolean;
+  readonly maxNameLength?: number;
+  readonly maxDescriptionLength?: number;
+  readonly nameLabelKey?: string;
+  readonly namePlaceholderKey?: string;
+  readonly descriptionLabelKey?: string;
+  readonly descriptionPlaceholderKey?: string;
+  readonly optionalKey?: string;
+}
+
+export const PartnerInfoInput: React.FC<PartnerInfoInputProps> = ({
+  t,
+  name,
+  onNameChange,
+  description = "",
+  onDescriptionChange,
+  showName = false,
+  showDescription = false,
+  maxNameLength = 30,
+  maxDescriptionLength = 200,
+  nameLabelKey = "photoUpload.nameLabel",
+  namePlaceholderKey = "photoUpload.namePlaceholder",
+  descriptionLabelKey = "photoUpload.descriptionLabel",
+  descriptionPlaceholderKey = "photoUpload.descriptionPlaceholder",
+  optionalKey = "common.optional",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingHorizontal: 24,
+          gap: 16,
+        },
+        optionalLabel: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+          marginBottom: 8,
+        },
+        optional: {
+          fontSize: 12,
+          color: tokens.colors.textTertiary,
+          fontStyle: "italic",
+        },
+        label: {
+          fontSize: 14,
+          fontWeight: "600",
+          color: tokens.colors.textSecondary,
+        },
+      }),
+    [tokens],
+  );
+
+  if (!showName && !showDescription) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      {showName && (
+        <AtomicInput
+          label={t(nameLabelKey)}
+          value={name}
+          onChangeText={onNameChange}
+          placeholder={t(namePlaceholderKey)}
+          maxLength={maxNameLength}
+          showCharacterCount
+          variant="outlined"
+          size="md"
+        />
+      )}
+
+      {showDescription && onDescriptionChange && (
+        <View>
+          <View style={styles.optionalLabel}>
+            <AtomicText style={styles.label}>{t(descriptionLabelKey)}</AtomicText>
+            <AtomicText style={styles.optional}>({t(optionalKey)})</AtomicText>
+          </View>
+          <AtomicInput
+            value={description}
+            onChangeText={onDescriptionChange}
+            placeholder={t(descriptionPlaceholderKey)}
+            multiline
+            numberOfLines={3}
+            maxLength={maxDescriptionLength}
+            showCharacterCount
+            variant="outlined"
+            inputStyle={{ minHeight: 100, textAlignVertical: "top" }}
+          />
+        </View>
+      )}
+    </View>
+  );
+};

package/src/features/partner-upload/presentation/components/PhotoTips.tsx

@@ -0,0 +1,53 @@
+/**
+ * PhotoTips Component
+ * Displays photo upload tips in a grid layout
+ */
+
+import React, { useMemo } from "react";
+import { InfoGrid, type InfoGridItem } from "@umituz/react-native-design-system";
+
+export interface PhotoTipConfig {
+  readonly icon: string;
+  readonly textKey: string;
+}
+
+export interface PhotoTipsProps {
+  readonly t: (key: string) => string;
+  readonly titleKey?: string;
+  readonly headerIcon?: string;
+  readonly tips?: readonly PhotoTipConfig[];
+  readonly style?: object;
+}
+
+const DEFAULT_TIPS: readonly PhotoTipConfig[] = [
+  { icon: "sunny-outline", textKey: "photoUpload.tips.lighting" },
+  { icon: "person-outline", textKey: "photoUpload.tips.faceForward" },
+  { icon: "eye-outline", textKey: "photoUpload.tips.clearFace" },
+  { icon: "diamond-outline", textKey: "photoUpload.tips.goodQuality" },
+] as const;
+
+export const PhotoTips: React.FC<PhotoTipsProps> = ({
+  t,
+  titleKey = "photoUpload.tips.title",
+  headerIcon = "bulb",
+  tips = DEFAULT_TIPS,
+  style,
+}) => {
+  const gridItems: InfoGridItem[] = useMemo(
+    () =>
+      tips.map((tip) => ({
+        icon: tip.icon,
+        text: t(tip.textKey),
+      })),
+    [tips, t],
+  );
+
+  return (
+    <InfoGrid
+      title={t(titleKey)}
+      headerIcon={headerIcon}
+      items={gridItems}
+      style={style ?? { marginHorizontal: 24, marginBottom: 20 }}
+    />
+  );
+};

package/src/features/partner-upload/presentation/components/index.ts

@@ -0,0 +1,4 @@
+export { PhotoTips } from "./PhotoTips";
+export type { PhotoTipsProps, PhotoTipConfig } from "./PhotoTips";
+export { PartnerInfoInput } from "./PartnerInfoInput";
+export type { PartnerInfoInputProps } from "./PartnerInfoInput";

package/src/features/partner-upload/presentation/hooks/index.ts

@@ -0,0 +1,7 @@
+export { usePartnerStep } from "./usePartnerStep";
+export type {
+  UsePartnerStepConfig,
+  UsePartnerStepTranslations,
+  UsePartnerStepOptions,
+  UsePartnerStepReturn,
+} from "./usePartnerStep";

package/src/features/partner-upload/presentation/hooks/usePartnerStep.ts

@@ -0,0 +1,113 @@
+/**
+ * usePartnerStep Hook
+ * Manages partner photo upload step logic
+ */
+
+import { useState, useCallback } from "react";
+import { Alert } from "react-native";
+import * as ImagePicker from "expo-image-picker";
+import * as FileSystem from "expo-file-system";
+import type { UploadedImage } from "../../domain/types";
+
+export interface UsePartnerStepConfig {
+  readonly maxFileSizeMB?: number;
+  readonly imageQuality?: number;
+  readonly allowsEditing?: boolean;
+}
+
+export interface UsePartnerStepTranslations {
+  readonly fileTooLarge: string;
+  readonly maxFileSize: string;
+  readonly error: string;
+  readonly uploadFailed: string;
+}
+
+export interface UsePartnerStepOptions {
+  readonly initialName?: string;
+  readonly config?: UsePartnerStepConfig;
+  readonly translations: UsePartnerStepTranslations;
+}
+
+interface PartnerStepState {
+  image: UploadedImage | null;
+  name: string;
+  description: string;
+}
+
+const DEFAULT_CONFIG: UsePartnerStepConfig = {
+  maxFileSizeMB: 10,
+  imageQuality: 0.7,
+  allowsEditing: true,
+};
+
+export const usePartnerStep = (options: UsePartnerStepOptions) => {
+  const { initialName = "", config = DEFAULT_CONFIG, translations } = options;
+
+  const [state, setState] = useState<PartnerStepState>({
+    image: null,
+    name: initialName,
+    description: "",
+  });
+
+  const setName = useCallback((name: string) => {
+    setState((prev) => ({ ...prev, name }));
+  }, []);
+
+  const setDescription = useCallback((description: string) => {
+    setState((prev) => ({ ...prev, description }));
+  }, []);
+
+  const handlePickImage = useCallback(async () => {
+    try {
+      const maxFileSizeMB = config.maxFileSizeMB ?? 10;
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: config.allowsEditing ?? true,
+        quality: config.imageQuality ?? 0.7,
+      });
+
+      if (result.canceled || !result.assets?.[0]) return;
+
+      const asset = result.assets[0];
+
+      if (asset.fileSize && asset.fileSize > maxFileSizeMB * 1024 * 1024) {
+        Alert.alert(
+          translations.fileTooLarge,
+          translations.maxFileSize.replace("{size}", String(maxFileSizeMB)),
+        );
+        return;
+      }
+
+      const base64 = await FileSystem.readAsStringAsync(asset.uri, {
+        encoding: "base64",
+      });
+
+      const uploadedImage: UploadedImage = {
+        uri: asset.uri,
+        previewUrl: asset.uri,
+        base64: `data:image/jpeg;base64,${base64}`,
+        width: asset.width,
+        height: asset.height,
+      };
+
+      setState((prev) => ({
+        ...prev,
+        image: uploadedImage,
+      }));
+    } catch {
+      Alert.alert(translations.error, translations.uploadFailed);
+    }
+  }, [config, translations]);
+
+  const canContinue = state.image !== null;
+
+  return {
+    ...state,
+    setName,
+    setDescription,
+    handlePickImage,
+    canContinue,
+  };
+};
+
+export type UsePartnerStepReturn = ReturnType<typeof usePartnerStep>;

package/src/features/partner-upload/presentation/screens/PartnerStepScreen.tsx

@@ -0,0 +1,208 @@
+/**
+ * PartnerStepScreen
+ * Generic partner/photo upload screen
+ */
+
+import React, { useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  ScreenLayout,
+  AtomicText,
+  AtomicIcon,
+  NavigationHeader,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { PhotoUploadCard } from "../../../../presentation/components";
+import { FaceDetectionToggle } from "../../../../domains/face-detection";
+import { PhotoTips } from "../components/PhotoTips";
+import { PartnerInfoInput } from "../components/PartnerInfoInput";
+import { usePartnerStep } from "../hooks/usePartnerStep";
+import type { UploadedImage } from "../../domain/types";
+
+export interface PartnerStepScreenTranslations {
+  readonly title: string;
+  readonly subtitle: string;
+  readonly continue: string;
+  readonly tapToUpload: string;
+  readonly selectPhoto: string;
+  readonly change: string;
+  readonly analyzing: string;
+  readonly faceDetectionLabel?: string;
+  readonly fileTooLarge: string;
+  readonly maxFileSize: string;
+  readonly error: string;
+  readonly uploadFailed: string;
+}
+
+export interface PartnerStepScreenConfig {
+  readonly showFaceDetection?: boolean;
+  readonly showNameInput?: boolean;
+  readonly showPhotoTips?: boolean;
+  readonly maxFileSizeMB?: number;
+  readonly maxNameLength?: number;
+}
+
+export interface PartnerStepScreenProps {
+  readonly translations: PartnerStepScreenTranslations;
+  readonly t: (key: string) => string;
+  readonly initialName?: string;
+  readonly config?: PartnerStepScreenConfig;
+  readonly faceDetectionEnabled?: boolean;
+  readonly onFaceDetectionToggle?: (enabled: boolean) => void;
+  readonly onBack: () => void;
+  readonly onContinue: (image: UploadedImage, name: string) => void;
+}
+
+const DEFAULT_CONFIG: PartnerStepScreenConfig = {
+  showFaceDetection: false,
+  showNameInput: false,
+  showPhotoTips: true,
+  maxFileSizeMB: 10,
+  maxNameLength: 30,
+};
+
+export const PartnerStepScreen: React.FC<PartnerStepScreenProps> = ({
+  translations,
+  t,
+  initialName = "",
+  config = DEFAULT_CONFIG,
+  faceDetectionEnabled = false,
+  onFaceDetectionToggle,
+  onBack,
+  onContinue,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const { image, name, setName, handlePickImage, canContinue } = usePartnerStep({
+    initialName,
+    config: { maxFileSizeMB: config.maxFileSizeMB },
+    translations: {
+      fileTooLarge: translations.fileTooLarge,
+      maxFileSize: translations.maxFileSize,
+      error: translations.error,
+      uploadFailed: translations.uploadFailed,
+    },
+  });
+
+  const handleContinuePress = () => {
+    if (!canContinue || !image) return;
+    onContinue(image, name);
+  };
+
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+  const showFaceDetection = config.showFaceDetection ?? false;
+  const showNameInput = config.showNameInput ?? false;
+  const showPhotoTips = config.showPhotoTips ?? true;
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <NavigationHeader
+        title={translations.title}
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinuePress}
+            activeOpacity={0.7}
+            disabled={!canContinue || !image}
+            style={[
+              styles.continueButton,
+              {
+                backgroundColor: canContinue && image ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                opacity: canContinue && image ? 1 : 0.5,
+              },
+            ]}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.continueText,
+                { color: canContinue && image ? tokens.colors.onPrimary : tokens.colors.textSecondary },
+              ]}
+            >
+              {translations.continue}
+            </AtomicText>
+            <AtomicIcon
+              name="arrow-forward"
+              size="sm"
+              color={canContinue && image ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        edges={["left", "right"]}
+        backgroundColor="transparent"
+        scrollable={true}
+        keyboardAvoiding={true}
+        contentContainerStyle={styles.scrollContent}
+        hideScrollIndicator={true}
+      >
+        <AtomicText style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
+          {translations.subtitle}
+        </AtomicText>
+
+        {showPhotoTips && <PhotoTips t={t} />}
+
+        {showFaceDetection && onFaceDetectionToggle && (
+          <FaceDetectionToggle
+            isEnabled={faceDetectionEnabled}
+            onToggle={onFaceDetectionToggle}
+            label={translations.faceDetectionLabel ?? ""}
+            hidden={true}
+          />
+        )}
+
+        <PhotoUploadCard
+          imageUri={image?.previewUrl || null}
+          onPress={handlePickImage}
+          isValidating={false}
+          isValid={null}
+          translations={{
+            tapToUpload: translations.tapToUpload,
+            selectPhoto: translations.selectPhoto,
+            change: translations.change,
+            analyzing: translations.analyzing,
+          }}
+        />
+
+        {showNameInput && (
+          <PartnerInfoInput
+            t={t}
+            name={name}
+            onNameChange={setName}
+            showName={true}
+            maxNameLength={config.maxNameLength}
+          />
+        )}
+      </ScreenLayout>
+    </View>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingBottom: 40,
+    },
+    subtitle: {
+      fontSize: 16,
+      textAlign: "center",
+      marginHorizontal: 24,
+      marginBottom: 24,
+    },
+    continueButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.full,
+    },
+    continueText: {
+      fontWeight: "800",
+      marginRight: 4,
+    },
+  });

package/src/features/partner-upload/presentation/screens/index.ts

@@ -0,0 +1,6 @@
+export { PartnerStepScreen } from "./PartnerStepScreen";
+export type {
+  PartnerStepScreenProps,
+  PartnerStepScreenTranslations,
+  PartnerStepScreenConfig,
+} from "./PartnerStepScreen";

package/src/index.ts

@@ -152,6 +152,7 @@ export * from "./features/hd-touch-up";
 export * from "./features/meme-generator";
 export * from "./features/couple-future";
 export * from "./features/love-message";
+export * from "./features/partner-upload";
 export * from "./infrastructure/orchestration";
 
 // Result Preview Domain

package/src/infrastructure/utils/feature-utils.ts

@@ -3,9 +3,14 @@
  * Uses ONLY configured app services - no alternatives
  */
 
-import { readFileAsBase64 } from "@umituz/react-native-design-system";
+import * as FileSystem from "expo-file-system";
 import { getAuthService, getCreditService, getPaywallService, isAppServicesConfigured } from "../config/app-services.config";
 
+async function readFileAsBase64(uri: string): Promise<string> {
+  const base64 = await FileSystem.readAsStringAsync(uri, { encoding: "base64" });
+  return `data:image/jpeg;base64,${base64}`;
+}
+
 declare const __DEV__: boolean;
 
 export type ImageSelector = () => Promise<string | null>;

package/src/presentation/hooks/useGenerationCallbacksBuilder.ts

@@ -4,7 +4,7 @@
  */
 
 import { useCallback, useMemo, useRef } from "react";
-import { useQueryClient } from "@umituz/react-native-design-system";
+import { useQueryClient } from "@tanstack/react-query";
 import type {
   GenerationExecutionResult,
   GenerationCallbacks,