@umituz/react-native-ai-generation-content 1.17.210 → 1.17.211

package/package.json

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

package/src/domains/creations/presentation/components/CreationImagePreview.tsx

@@ -4,7 +4,13 @@
  */
 
 import React, { useMemo, useState } from "react";
-import { View, StyleSheet, Image, ImageErrorEventData, NativeSyntheticEvent } from "react-native";
+import {
+  View,
+  StyleSheet,
+  Image,
+  type ImageErrorEventData,
+  type NativeSyntheticEvent,
+} from "react-native";
 import {
   useAppDesignTokens,
   AtomicIcon,

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

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * AI Hug Feature
  * Provider-agnostic AI hug video generation feature
  */

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

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * AI Kiss Feature
  * Provider-agnostic AI kiss video generation feature
  */

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

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * Anime Selfie Feature
  * Provider-agnostic anime selfie generation feature
  */

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

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * Face Swap Feature
  * Provider-agnostic face swap generation feature
  */

package/src/features/hd-touch-up/index.ts

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * HD Touch Up Feature
  * Provider-agnostic HD enhancement feature
  */

package/src/features/meme-generator/index.ts

@@ -1,2 +1,3 @@
 export * from "./presentation/screens";
+export * from "./presentation/components";
 export * from "./infrastructure/services/MemeGenerationService";

package/src/features/meme-generator/presentation/components/MemeGeneratorFeature.tsx

@@ -0,0 +1,160 @@
+/**
+ * MemeGeneratorFeature Component
+ * 
+ * Unified Text-to-Image feature component for Meme Generation.
+ * Integrates PromptInput, StyleSelector, and Generation logic using useTextToImageFeature.
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, ScrollView, StyleSheet, Image, KeyboardAvoidingView, Platform } from "react-native";
+import { useAppDesignTokens, AtomicIcon, AtomicCard, AtomicText, AtomicSpinner } from "@umituz/react-native-design-system";
+import { getAuthService } from "../../../../infrastructure/config";
+import { useTextToImageFeature } from "../../../text-to-image/presentation/hooks/useTextToImageFeature";
+import { PromptInput } from "../../../../presentation/components/PromptInput";
+import { StyleSelector } from "../../../../presentation/components/selectors/StyleSelector";
+import { GenerateButton } from "../../../../presentation/components/buttons/GenerateButton";
+import { GridSelector } from "../../../../presentation/components/selectors/GridSelector";
+import { ResultDisplay } from "../../../../presentation/components/result/ResultDisplay";
+
+// Constants (Using default provided styles if config doesn't override)
+import { DEFAULT_IMAGE_STYLES } from "../../../text-to-image/domain/constants/processing-modes.constants";
+
+export interface MemeGeneratorFeatureProps {
+  config: any; // AIFeatureConfig merged with extraConfig
+  translations: any;
+  onSaveImage: (url: string) => Promise<void>;
+  onBeforeProcess?: () => Promise<boolean>;
+}
+
+export const MemeGeneratorFeature: React.FC<MemeGeneratorFeatureProps> = ({
+  config,
+  translations,
+  onSaveImage,
+  onBeforeProcess,
+}) => {
+  const tokens = useAppDesignTokens();
+  const authService = getAuthService();
+  const userId = authService.getUserId() || "anonymous";
+
+  // Config can override styles, or use defaults
+  const stylesList = config.styles || DEFAULT_IMAGE_STYLES || [];
+  
+  // Transform styles for GridSelector
+  const styleOptions = useMemo(() => stylesList.map((s: any) => ({
+      value: s.id,
+      label: s.name,
+      emoji: s.emoji || s.icon, // Handle different formats
+      description: s.description
+  })), [stylesList]);
+
+  const { state, setPrompt, generate, reset, isReady } = useTextToImageFeature({
+    config: {
+        model: config.model || "fal-ai/nano-banana-edit", 
+        buildInput: config.buildInput,
+        extractResult: config.extractResult,
+        ...config
+    },
+    userId,
+  });
+
+  const [selectedStyle, setSelectedStyle] = React.useState<string | null>(null);
+
+  const handleGenerate = useCallback(async () => {
+    if (onBeforeProcess) {
+      const canProceed = await onBeforeProcess();
+      if (!canProceed) return;
+    }
+    
+    // Append style logic handled via buildInput or here
+    // For now simple pass
+    await generate();
+  }, [generate, onBeforeProcess]);
+
+  const handleSave = useCallback(() => {
+    if (state.imageUrl) {
+        onSaveImage(state.imageUrl);
+    }
+  }, [state.imageUrl, onSaveImage]);
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    content: {
+      padding: tokens.spacing.lg,
+      gap: tokens.spacing.xl,
+      paddingBottom: 100,
+    },
+    section: {
+        gap: tokens.spacing.md,
+    },
+  });
+
+  if (state.imageUrl) {
+     return (
+        <ResultDisplay 
+            imageUrl={state.imageUrl}
+            onSave={handleSave}
+            onTryAgain={reset}
+            translations={{
+                save: translations.saveButtonText || "Save",
+                tryAgain: translations.tryAnotherText || "Try Another",
+                success: translations.successText || "Meme Generated!"
+            }}
+        />
+     );
+  }
+
+  return (
+    <KeyboardAvoidingView 
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={styles.container}
+    >
+      <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
+        
+        {/* Prompt Input */}
+        <View style={styles.section}>
+            <AtomicText type="labelLarge" style={{color: tokens.colors.textPrimary}}>
+                {translations.promptLabel || "Your Meme Idea"}
+            </AtomicText>
+            <PromptInput
+                value={state.prompt}
+                onChangeText={setPrompt}
+                placeholder={translations.promptPlaceholder || "Enter your funny idea..."}
+                isDisabled={state.isProcessing}
+                minHeight={100}
+            />
+        </View>
+
+        {/* Style Selector */}
+        {styleOptions.length > 0 && (
+            <GridSelector
+                title={translations.styleLabel || "Choose a Style"}
+                options={styleOptions}
+                selectedValue={selectedStyle}
+                onSelect={setSelectedStyle}
+                disabled={state.isProcessing}
+                columns={3}
+            />
+        )}
+
+        {/* Generate Button */}
+        <GenerateButton
+            onPress={handleGenerate}
+            isLoading={state.isProcessing}
+            isDisabled={!isReady}
+            title={translations.processButtonText || "Generate Meme"}
+        />
+
+        {/* Error Display */}
+        {state.error && (
+            <AtomicCard style={{backgroundColor: tokens.colors.errorContainer}}>
+                <AtomicText style={{color: tokens.colors.error}}>
+                    {state.error}
+                </AtomicText>
+            </AtomicCard>
+        )}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};

package/src/features/meme-generator/presentation/components/index.ts

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

package/src/features/photo-restoration/index.ts

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * Photo Restoration Feature
  * Provider-agnostic photo restoration feature
  */

package/src/features/remove-background/index.ts

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * Remove Background Feature
  * Provider-agnostic background removal feature
  */

package/src/features/remove-object/index.ts

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * Remove Object Feature
  * Provider-agnostic object removal (inpainting) feature
  */

package/src/features/upscaling/index.ts

@@ -1,4 +1,5 @@
 /**
+export * from "./presentation/components";
  * Upscaling Feature
  * Provider-agnostic image upscaling feature
  */

package/src/presentation/screens/ai-feature/AIFeatureScreen.tsx

@@ -25,6 +25,7 @@ import { ReplaceBackgroundFeature } from "../../../features/replace-background/p
 import { FaceSwapFeature } from "../../../features/face-swap/presentation/components/FaceSwapFeature";
 import { AIHugFeature } from "../../../features/ai-hug/presentation/components/AIHugFeature";
 import { AIKissFeature } from "../../../features/ai-kiss/presentation/components/AIKissFeature";
+import { MemeGeneratorFeature } from "../../../features/meme-generator/presentation/components/MemeGeneratorFeature";
 
 import { createFeatureTranslations } from "./translations";
 import type { AIFeatureScreenProps, AIFeatureId } from "./types";
@@ -45,6 +46,7 @@ const FEATURE_COMPONENTS: Record<AIFeatureId, React.ComponentType<any>> = {
   "face-swap": FaceSwapFeature,
   "ai-hug": AIHugFeature,
   "ai-kiss": AIKissFeature,
+  "meme-generator": MemeGeneratorFeature,
 };
 
 /**
@@ -115,6 +117,12 @@ export const AIFeatureScreen: React.FC<AIFeatureScreenProps> = ({
           onSelectImage,
           onSaveImage: onSaveMedia,
         };
+      case "text-input":
+        return {
+          ...baseProps,
+          onSaveImage: onSaveMedia,
+          // Text input doesn't need image selection
+        };
       case "dual":
         return {
           ...baseProps,

package/src/presentation/screens/ai-feature/translations.ts

@@ -84,6 +84,7 @@ export function createFeatureTranslations(config: AIFeatureConfig, t: TranslateF
         ? createComparisonTranslations(translationPrefix, t)
         : createSingleImageTranslations(translationPrefix, t);
     case "single-with-prompt":
+    case "text-input":
       return createPromptTranslations(translationPrefix, t);
     case "dual":
     case "dual-video":

package/src/presentation/screens/ai-feature/types.ts

@@ -18,12 +18,13 @@ export type AIFeatureId =
   | "replace-background"
   | "face-swap"
   | "ai-hug"
-  | "ai-kiss";
+  | "ai-kiss"
+  | "meme-generator";
 
 /**
  * Image mode for the feature
  */
-export type AIFeatureMode = "single" | "single-with-prompt" | "dual" | "dual-video";
+export type AIFeatureMode = "single" | "single-with-prompt" | "dual" | "dual-video" | "text-input";
 
 /**
  * Output type of the feature