@umituz/react-native-ai-generation-content 1.17.7 → 1.17.8

package/package.json

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

package/src/features/ai-hug/index.ts

@@ -25,3 +25,7 @@ export type {
   UseAIHugFeatureProps,
   UseAIHugFeatureReturn,
 } from "./presentation";
+
+// Presentation Components
+export { AIHugFeature } from "./presentation";
+export type { AIHugFeatureProps } from "./presentation";

package/src/features/ai-hug/presentation/components/AIHugFeature.tsx

@@ -0,0 +1,209 @@
+/**
+ * AIHugFeature Component
+ * Self-contained AI hug feature UI component
+ * Uses hook internally, only requires config and translations
+ */
+
+import React, { useCallback } from "react";
+import { View, ScrollView, StyleSheet, Image, Dimensions } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicButton,
+} from "@umituz/react-native-design-system";
+import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
+import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
+import { useAIHugFeature } from "../hooks";
+import type {
+  AIHugTranslations,
+  AIHugFeatureConfig,
+} from "../../domain/types";
+
+export interface AIHugFeatureProps {
+  /** Feature configuration with provider-specific settings */
+  config: AIHugFeatureConfig;
+  /** User ID for the generation request */
+  userId: string;
+  /** Translations for all UI text */
+  translations: AIHugTranslations;
+  /** Source image picker callback */
+  onSelectSourceImage: () => Promise<string | null>;
+  /** Target image picker callback */
+  onSelectTargetImage: () => Promise<string | null>;
+  /** Save image callback */
+  onSaveImage: (imageUrl: string) => Promise<void>;
+  /** Optional custom processing modal renderer */
+  renderProcessingModal?: (props: {
+    visible: boolean;
+    progress: number;
+  }) => React.ReactNode;
+}
+
+export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
+  config,
+  userId,
+  translations,
+  onSelectSourceImage,
+  onSelectTargetImage,
+  onSaveImage,
+  renderProcessingModal,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const feature = useAIHugFeature({
+    config,
+    userId,
+    onSelectSourceImage,
+    onSelectTargetImage,
+    onSaveImage,
+  });
+
+  const handleProcess = useCallback(() => {
+    void feature.process();
+  }, [feature]);
+
+  const handleSave = useCallback(() => {
+    void feature.save();
+  }, [feature]);
+
+  const handleSelectSource = useCallback(() => {
+    void feature.selectSourceImage();
+  }, [feature]);
+
+  const handleSelectTarget = useCallback(() => {
+    void feature.selectTargetImage();
+  }, [feature]);
+
+  const canProcess = feature.sourceImageUri && feature.targetImageUri && !feature.isProcessing;
+
+  if (feature.processedUrl) {
+    const screenWidth = Dimensions.get("window").width;
+    const imageSize = screenWidth - 48;
+
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="headlineMedium"
+          style={[styles.successText, { color: tokens.colors.success }]}
+        >
+          {translations.successText}
+        </AtomicText>
+
+        <View style={styles.resultImageContainer}>
+          <Image
+            source={{ uri: feature.processedUrl }}
+            style={[styles.resultImage, { width: imageSize, height: imageSize }]}
+            resizeMode="contain"
+          />
+        </View>
+
+        <View style={styles.resultActions}>
+          <AtomicButton
+            title={translations.saveButtonText}
+            onPress={handleSave}
+            variant="primary"
+            size="lg"
+          />
+          <AtomicButton
+            title={translations.tryAnotherText}
+            onPress={feature.reset}
+            variant="secondary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+
+  return (
+    <>
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="bodyLarge"
+          style={[styles.description, { color: tokens.colors.textSecondary }]}
+        >
+          {translations.description}
+        </AtomicText>
+
+        <View style={styles.pickerContainer}>
+          <DualImagePicker
+            sourceImageUri={feature.sourceImageUri}
+            targetImageUri={feature.targetImageUri}
+            isDisabled={feature.isProcessing}
+            onSelectSource={handleSelectSource}
+            onSelectTarget={handleSelectTarget}
+            sourcePlaceholder={translations.sourceUploadTitle}
+            targetPlaceholder={translations.targetUploadTitle}
+            layout="horizontal"
+            variant="portrait"
+          />
+        </View>
+
+        <ErrorDisplay error={feature.error} />
+
+        <View style={styles.buttonContainer}>
+          <AtomicButton
+            title={
+              feature.isProcessing
+                ? translations.processingText
+                : translations.processButtonText
+            }
+            onPress={handleProcess}
+            disabled={!canProcess}
+            variant="primary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+
+      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+  pickerContainer: {
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  successText: {
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  resultImageContainer: {
+    alignItems: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+  },
+  resultImage: {
+    borderRadius: 16,
+  },
+  resultActions: {
+    marginHorizontal: 24,
+    gap: 12,
+  },
+  buttonContainer: {
+    marginHorizontal: 24,
+    marginTop: 8,
+  },
+});

package/src/features/ai-hug/presentation/components/index.ts

@@ -0,0 +1,2 @@
+export { AIHugFeature } from "./AIHugFeature";
+export type { AIHugFeatureProps } from "./AIHugFeature";

package/src/features/ai-hug/presentation/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from "./hooks";
+export * from "./components";

package/src/features/ai-kiss/index.ts

@@ -25,3 +25,7 @@ export type {
   UseAIKissFeatureProps,
   UseAIKissFeatureReturn,
 } from "./presentation";
+
+// Presentation Components
+export { AIKissFeature } from "./presentation";
+export type { AIKissFeatureProps } from "./presentation";

package/src/features/ai-kiss/presentation/components/AIKissFeature.tsx

@@ -0,0 +1,202 @@
+/**
+ * AIKissFeature Component
+ * Self-contained AI kiss feature UI component
+ * Uses hook internally, only requires config and translations
+ */
+
+import React, { useCallback } from "react";
+import { View, ScrollView, StyleSheet, Image, Dimensions } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicButton,
+} from "@umituz/react-native-design-system";
+import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
+import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
+import { useAIKissFeature } from "../hooks";
+import type {
+  AIKissTranslations,
+  AIKissFeatureConfig,
+} from "../../domain/types";
+
+export interface AIKissFeatureProps {
+  config: AIKissFeatureConfig;
+  userId: string;
+  translations: AIKissTranslations;
+  onSelectSourceImage: () => Promise<string | null>;
+  onSelectTargetImage: () => Promise<string | null>;
+  onSaveImage: (imageUrl: string) => Promise<void>;
+  renderProcessingModal?: (props: {
+    visible: boolean;
+    progress: number;
+  }) => React.ReactNode;
+}
+
+export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
+  config,
+  userId,
+  translations,
+  onSelectSourceImage,
+  onSelectTargetImage,
+  onSaveImage,
+  renderProcessingModal,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const feature = useAIKissFeature({
+    config,
+    userId,
+    onSelectSourceImage,
+    onSelectTargetImage,
+    onSaveImage,
+  });
+
+  const handleProcess = useCallback(() => {
+    void feature.process();
+  }, [feature]);
+
+  const handleSave = useCallback(() => {
+    void feature.save();
+  }, [feature]);
+
+  const handleSelectSource = useCallback(() => {
+    void feature.selectSourceImage();
+  }, [feature]);
+
+  const handleSelectTarget = useCallback(() => {
+    void feature.selectTargetImage();
+  }, [feature]);
+
+  const canProcess = feature.sourceImageUri && feature.targetImageUri && !feature.isProcessing;
+
+  if (feature.processedUrl) {
+    const screenWidth = Dimensions.get("window").width;
+    const imageSize = screenWidth - 48;
+
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="headlineMedium"
+          style={[styles.successText, { color: tokens.colors.success }]}
+        >
+          {translations.successText}
+        </AtomicText>
+
+        <View style={styles.resultImageContainer}>
+          <Image
+            source={{ uri: feature.processedUrl }}
+            style={[styles.resultImage, { width: imageSize, height: imageSize }]}
+            resizeMode="contain"
+          />
+        </View>
+
+        <View style={styles.resultActions}>
+          <AtomicButton
+            title={translations.saveButtonText}
+            onPress={handleSave}
+            variant="primary"
+            size="lg"
+          />
+          <AtomicButton
+            title={translations.tryAnotherText}
+            onPress={feature.reset}
+            variant="secondary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+
+  return (
+    <>
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="bodyLarge"
+          style={[styles.description, { color: tokens.colors.textSecondary }]}
+        >
+          {translations.description}
+        </AtomicText>
+
+        <View style={styles.pickerContainer}>
+          <DualImagePicker
+            sourceImageUri={feature.sourceImageUri}
+            targetImageUri={feature.targetImageUri}
+            isDisabled={feature.isProcessing}
+            onSelectSource={handleSelectSource}
+            onSelectTarget={handleSelectTarget}
+            sourcePlaceholder={translations.sourceUploadTitle}
+            targetPlaceholder={translations.targetUploadTitle}
+            layout="horizontal"
+            variant="portrait"
+          />
+        </View>
+
+        <ErrorDisplay error={feature.error} />
+
+        <View style={styles.buttonContainer}>
+          <AtomicButton
+            title={
+              feature.isProcessing
+                ? translations.processingText
+                : translations.processButtonText
+            }
+            onPress={handleProcess}
+            disabled={!canProcess}
+            variant="primary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+
+      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+  pickerContainer: {
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  successText: {
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  resultImageContainer: {
+    alignItems: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+  },
+  resultImage: {
+    borderRadius: 16,
+  },
+  resultActions: {
+    marginHorizontal: 24,
+    gap: 12,
+  },
+  buttonContainer: {
+    marginHorizontal: 24,
+    marginTop: 8,
+  },
+});

package/src/features/ai-kiss/presentation/components/index.ts

@@ -0,0 +1,2 @@
+export { AIKissFeature } from "./AIKissFeature";
+export type { AIKissFeatureProps } from "./AIKissFeature";

package/src/features/ai-kiss/presentation/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from "./hooks";
+export * from "./components";

package/src/features/anime-selfie/index.ts

@@ -26,3 +26,7 @@ export type {
   UseAnimeSelfieFeatureProps,
   UseAnimeSelfieFeatureReturn,
 } from "./presentation";
+
+// Presentation Components
+export { AnimeSelfieFeature } from "./presentation";
+export type { AnimeSelfieFeatureProps } from "./presentation";

package/src/features/anime-selfie/presentation/components/AnimeSelfieFeature.tsx

@@ -0,0 +1,199 @@
+/**
+ * AnimeSelfieFeature Component
+ * Self-contained anime selfie feature UI component
+ * Uses hook internally, only requires config and translations
+ */
+
+import React, { useCallback, useMemo } from "react";
+import { View, ScrollView, StyleSheet, Image, Dimensions } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicButton,
+} from "@umituz/react-native-design-system";
+import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
+import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
+import { useAnimeSelfieFeature } from "../hooks";
+import type {
+  AnimeSelfieTranslations,
+  AnimeSelfieFeatureConfig,
+} from "../../domain/types";
+
+export interface AnimeSelfieFeatureProps {
+  config: AnimeSelfieFeatureConfig;
+  userId: string;
+  translations: AnimeSelfieTranslations;
+  onSelectImage: () => Promise<string | null>;
+  onSaveImage: (imageUrl: string) => Promise<void>;
+  renderProcessingModal?: (props: {
+    visible: boolean;
+    progress: number;
+  }) => React.ReactNode;
+}
+
+export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
+  config,
+  userId,
+  translations,
+  onSelectImage,
+  onSaveImage,
+  renderProcessingModal,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const feature = useAnimeSelfieFeature({
+    config,
+    userId,
+    onSelectImage,
+    onSaveImage,
+  });
+
+  const photoTranslations = useMemo(
+    () => ({
+      tapToUpload: translations.uploadTitle,
+      selectPhoto: translations.uploadSubtitle,
+      change: translations.uploadChange,
+      analyzing: translations.uploadAnalyzing,
+    }),
+    [translations],
+  );
+
+  const handleProcess = useCallback(() => {
+    void feature.process();
+  }, [feature]);
+
+  const handleSave = useCallback(() => {
+    void feature.save();
+  }, [feature]);
+
+  const handleSelectImage = useCallback(() => {
+    void feature.selectImage();
+  }, [feature]);
+
+  if (feature.processedUrl) {
+    const screenWidth = Dimensions.get("window").width;
+    const imageSize = screenWidth - 48;
+
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="headlineMedium"
+          style={[styles.successText, { color: tokens.colors.success }]}
+        >
+          {translations.successText}
+        </AtomicText>
+
+        <View style={styles.resultImageContainer}>
+          <Image
+            source={{ uri: feature.processedUrl }}
+            style={[styles.resultImage, { width: imageSize, height: imageSize }]}
+            resizeMode="contain"
+          />
+        </View>
+
+        <View style={styles.resultActions}>
+          <AtomicButton
+            title={translations.saveButtonText}
+            onPress={handleSave}
+            variant="primary"
+            size="lg"
+          />
+          <AtomicButton
+            title={translations.tryAnotherText}
+            onPress={feature.reset}
+            variant="secondary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+
+  return (
+    <>
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="bodyLarge"
+          style={[styles.description, { color: tokens.colors.textSecondary }]}
+        >
+          {translations.description}
+        </AtomicText>
+
+        <PhotoUploadCard
+          imageUri={feature.imageUri}
+          onPress={handleSelectImage}
+          isValidating={feature.isProcessing}
+          disabled={feature.isProcessing}
+          translations={photoTranslations}
+          config={{
+            aspectRatio: 1,
+            borderRadius: 24,
+            showValidationStatus: false,
+            allowChange: true,
+          }}
+        />
+
+        <ErrorDisplay error={feature.error} />
+
+        <View style={styles.buttonContainer}>
+          <AtomicButton
+            title={
+              feature.isProcessing
+                ? translations.processingText
+                : translations.processButtonText
+            }
+            onPress={handleProcess}
+            disabled={!feature.imageUri || feature.isProcessing}
+            variant="primary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+
+      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+  successText: {
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  resultImageContainer: {
+    alignItems: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+  },
+  resultImage: {
+    borderRadius: 16,
+  },
+  resultActions: {
+    marginHorizontal: 24,
+    gap: 12,
+  },
+  buttonContainer: {
+    marginHorizontal: 24,
+    marginTop: 8,
+  },
+});

package/src/features/anime-selfie/presentation/components/index.ts

@@ -0,0 +1,2 @@
+export { AnimeSelfieFeature } from "./AnimeSelfieFeature";
+export type { AnimeSelfieFeatureProps } from "./AnimeSelfieFeature";

package/src/features/anime-selfie/presentation/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from "./hooks";
+export * from "./components";

package/src/features/face-swap/index.ts

@@ -25,3 +25,7 @@ export type {
   UseFaceSwapFeatureProps,
   UseFaceSwapFeatureReturn,
 } from "./presentation";
+
+// Presentation Components
+export { FaceSwapFeature } from "./presentation";
+export type { FaceSwapFeatureProps } from "./presentation";