@umituz/react-native-ai-generation-content 1.17.275 → 1.17.277

package/package.json

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

package/src/domains/creations/domain/value-objects/CreationsConfig.ts

@@ -27,6 +27,8 @@ export interface CreationsTranslations {
   readonly statusFilterTitle?: string;
   readonly mediaFilterTitle?: string;
   readonly clearFilter?: string;
+  readonly resultTitle?: string;
+  readonly resultLabel?: string;
 }
 
 export interface CreationsFilterConfig {

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -14,7 +14,10 @@ import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
 import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
+import { ResultPreviewScreen } from "../../../result-preview/presentation/components/ResultPreviewScreen";
+import { useResultActions } from "../../../result-preview/presentation/hooks/useResultActions";
 import { MEDIA_FILTER_OPTIONS, STATUS_FILTER_OPTIONS } from "../../domain/types/creation-filter";
+import { getPreviewUrl } from "../../domain/utils";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
@@ -24,11 +27,9 @@ interface CreationsGalleryScreenProps {
   readonly repository: ICreationsRepository;
   readonly config: CreationsConfig;
   readonly t: (key: string) => string;
-  readonly locale?: string;
   readonly onEmptyAction?: () => void;
   readonly emptyActionLabel?: string;
   readonly showFilter?: boolean;
-  readonly onViewResult?: (creation: Creation) => void;
 }
 
 export function CreationsGalleryScreen({
@@ -39,15 +40,23 @@ export function CreationsGalleryScreen({
   onEmptyAction,
   emptyActionLabel,
   showFilter = config.showFilter ?? true,
-  onViewResult,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
   const { share } = useSharing();
   const alert = useAlert();
+  const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
 
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
   const deleteMutation = useDeleteCreation({ userId, repository });
 
+  const selectedImageUrl = selectedCreation ? (getPreviewUrl(selectedCreation.output) || selectedCreation.uri) : undefined;
+
+  const { isSharing, isSaving, handleDownload, handleShare } = useResultActions({
+    imageUrl: selectedImageUrl,
+    onSaveSuccess: () => alert.show(AlertType.SUCCESS, AlertMode.TOAST, t("result.saveSuccess"), t("result.saveSuccessMessage")),
+    onSaveError: () => alert.show(AlertType.ERROR, AlertMode.TOAST, t("common.error"), t("result.saveError")),
+  });
+
   const statusOptions = config.filterConfig?.statusOptions ?? STATUS_FILTER_OPTIONS;
   const mediaOptions = config.filterConfig?.mediaOptions ?? MEDIA_FILTER_OPTIONS;
   const showStatusFilter = config.filterConfig?.showStatusFilter ?? true;
@@ -57,7 +66,7 @@ export function CreationsGalleryScreen({
 
   useFocusEffect(useCallback(() => { void refetch(); }, [refetch]));
 
-  const handleShare = useCallback((c: Creation) => {
+  const handleShareCard = useCallback((c: Creation) => {
     void share(c.uri, { dialogTitle: t("common.share") });
   }, [share, t]);
 
@@ -80,6 +89,18 @@ export function CreationsGalleryScreen({
     })();
   }, [userId, repository, refetch]);
 
+  const handleCardPress = useCallback((item: Creation) => {
+    setSelectedCreation(item);
+  }, []);
+
+  const handleBack = useCallback(() => {
+    setSelectedCreation(null);
+  }, []);
+
+  const handleTryAgain = useCallback(() => {
+    setSelectedCreation(null);
+  }, []);
+
   const filterButtons = useMemo(() => {
     const buttons = [];
     if (showStatusFilter) {
@@ -103,27 +124,17 @@ export function CreationsGalleryScreen({
     return buttons;
   }, [showStatusFilter, showMediaFilter, filters, t, config.translations]);
 
-  const handleCardPress = useCallback((item: Creation) => {
-    if (__DEV__) {
-      console.log("[CreationsGalleryScreen] Card pressed", {
-        creationId: item.id,
-        hasOnViewResult: !!onViewResult
-      });
-    }
-    onViewResult?.(item);
-  }, [onViewResult]);
-
   const renderItem = useCallback(({ item }: { item: Creation }) => (
     <CreationCard
       creation={item}
       callbacks={{
         onPress: () => handleCardPress(item),
-        onShare: async () => handleShare(item),
+        onShare: async () => handleShareCard(item),
         onDelete: () => handleDelete(item),
         onFavorite: () => handleFavorite(item, !item.isFavorite),
       }}
     />
-  ), [handleShare, handleDelete, handleFavorite, handleCardPress]);
+  ), [handleShareCard, handleDelete, handleFavorite, handleCardPress]);
 
   const renderHeader = useMemo(() => {
     if ((!creations || creations.length === 0) && !isLoading) return null;
@@ -155,6 +166,30 @@ export function CreationsGalleryScreen({
     />
   ), [isLoading, creations, filters.isFiltered, tokens, t, config, emptyActionLabel, onEmptyAction, filters.clearAllFilters]);
 
+  // Show result preview when a creation is selected
+  if (selectedCreation && selectedImageUrl) {
+    return (
+      <ResultPreviewScreen
+        imageUrl={selectedImageUrl}
+        isSaving={isSaving}
+        isSharing={isSharing}
+        onDownload={handleDownload}
+        onShare={handleShare}
+        onTryAgain={handleTryAgain}
+        onNavigateBack={handleBack}
+        translations={{
+          title: t(config.translations.resultTitle ?? "result.title"),
+          yourResult: t(config.translations.resultLabel ?? "result.yourResult"),
+          saveButton: t("result.saveButton"),
+          saving: t("result.saving"),
+          shareButton: t("result.shareButton"),
+          sharing: t("result.sharing"),
+          tryAnother: t("result.tryAnother"),
+        }}
+      />
+    );
+  }
+
   return (
     <ScreenLayout scrollable={false}>
       <FlatList
@@ -163,10 +198,7 @@ export function CreationsGalleryScreen({
         keyExtractor={(item) => item.id}
         ListHeaderComponent={renderHeader}
         ListEmptyComponent={renderEmpty}
-        contentContainerStyle={[
-          styles.listContent, 
-          (!filters.filtered || filters.filtered.length === 0) && styles.emptyContent
-        ]}
+        contentContainerStyle={[styles.listContent, (!filters.filtered || filters.filtered.length === 0) && styles.emptyContent]}
         showsVerticalScrollIndicator={false}
         refreshControl={<RefreshControl refreshing={isLoading} onRefresh={() => void refetch()} tintColor={tokens.colors.primary} />}
       />
@@ -177,7 +209,6 @@ export function CreationsGalleryScreen({
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
   header: { borderBottomWidth: 1 },
   listContent: { paddingHorizontal: 16, paddingTop: 16 },
   emptyContent: { flexGrow: 1 },