@umituz/react-native-ai-creations 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -31,6 +31,7 @@
     "@tanstack/react-query": ">=5.0.0",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-firestore": "latest",
+    "@umituz/react-native-image": "latest",
     "@umituz/react-native-sharing": "latest",
     "firebase": ">=11.0.0",
     "react": ">=18.2.0",
@@ -40,6 +41,7 @@
   "devDependencies": {
     "@tanstack/react-query": "^5.62.16",
     "@types/react": "^19.0.0",
+    "@umituz/react-native-image": "^1.1.1",
     "firebase": "^11.0.0",
     "react": "^19.0.0",
     "react-native": "^0.76.0",

package/src/presentation/components/CreationCard.tsx

@@ -16,6 +16,7 @@ import type { CreationType } from "../../domain/value-objects/CreationsConfig";
 interface CreationCardProps {
   readonly creation: Creation;
   readonly types: readonly CreationType[];
+  readonly onView?: (creation: Creation) => void;
   readonly onShare: (creation: Creation) => void;
   readonly onDelete: (creation: Creation) => void;
 }
@@ -23,6 +24,7 @@ interface CreationCardProps {
 export function CreationCard({
   creation,
   types,
+  onView,
   onShare,
   onDelete,
 }: CreationCardProps) {
@@ -32,6 +34,7 @@ export function CreationCard({
   const icon = typeConfig?.icon || "🎨";
   const label = typeConfig?.labelKey || creation.type;
 
+  const handleView = useCallback(() => onView?.(creation), [creation, onView]);
   const handleShare = useCallback(() => onShare(creation), [creation, onShare]);
   const handleDelete = useCallback(
     () => onDelete(creation),
@@ -114,6 +117,11 @@ export function CreationCard({
           <AtomicText style={styles.dateText}>{formattedDate}</AtomicText>
         </View>
         <View style={styles.actions}>
+          {onView && (
+            <TouchableOpacity style={styles.actionBtn} onPress={handleView}>
+              <AtomicIcon name="eye" size="sm" color="primary" />
+            </TouchableOpacity>
+          )}
           <TouchableOpacity style={styles.actionBtn} onPress={handleShare}>
             <AtomicIcon name="share-social" size="sm" color="primary" />
           </TouchableOpacity>

package/src/presentation/hooks/useCreations.ts

@@ -3,8 +3,6 @@
  * Fetches user's creations from repository
  */
 
-declare const __DEV__: boolean;
-
 import { useQuery } from "@tanstack/react-query";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 
@@ -24,21 +22,11 @@ export function useCreations({
   repository,
   enabled = true,
 }: UseCreationsProps) {
-  const result = useQuery({
+  return useQuery({
     queryKey: ["creations", userId ?? ""],
     queryFn: () => repository.getAll(userId!),
     enabled: !!userId && enabled,
     staleTime: CACHE_CONFIG.staleTime,
     gcTime: CACHE_CONFIG.gcTime,
   });
-
-  if (__DEV__) {
-    console.log("[useCreations] State:", {
-      isLoading: result.isLoading,
-      count: result.data?.length ?? 0,
-      enabled: !!userId && enabled,
-    });
-  }
-
-  return result;
 }

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -3,12 +3,11 @@
  * Full gallery view with filtering
  */
 
-declare const __DEV__: boolean;
-
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useState } from "react";
 import { View, FlatList, StyleSheet, RefreshControl, Alert } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useSharing } from "@umituz/react-native-sharing";
+import { ImageGallery } from "@umituz/react-native-image";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
@@ -36,6 +35,8 @@ export function CreationsGalleryScreen({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { share } = useSharing();
+  const [viewerVisible, setViewerVisible] = useState(false);
+  const [viewerIndex, setViewerIndex] = useState(0);
 
   const { data: creations, isLoading, refetch } = useCreations({
     userId,
@@ -46,13 +47,16 @@ export function CreationsGalleryScreen({
   const { filtered, selectedType, availableTypes, selectType } =
     useCreationsFilter({ creations });
 
-  if (__DEV__) {
-    console.log("[CreationsGalleryScreen] Render:", {
-      count: creations?.length ?? 0,
-      filtered: filtered.length,
-      selectedType,
-    });
-  }
+  const handleView = useCallback(
+    (creation: Creation) => {
+      const index = filtered.findIndex((c) => c.id === creation.id);
+      if (index >= 0) {
+        setViewerIndex(index);
+        setViewerVisible(true);
+      }
+    },
+    [filtered],
+  );
 
   const handleShare = useCallback(
     async (creation: Creation) => {
@@ -102,16 +106,22 @@ export function CreationsGalleryScreen({
     [tokens, insets.bottom],
   );
 
+  const viewerImages = useMemo(
+    () => filtered.map((creation) => ({ uri: creation.uri })),
+    [filtered],
+  );
+
   const renderItem = useCallback(
     ({ item }: { item: Creation }) => (
       <CreationCard
         creation={item}
         types={config.types}
+        onView={handleView}
         onShare={handleShare}
         onDelete={handleDelete}
       />
     ),
-    [config.types, handleShare, handleDelete],
+    [config.types, handleView, handleShare, handleDelete],
   );
 
   if (!isLoading && (!creations || creations.length === 0)) {
@@ -149,6 +159,13 @@ export function CreationsGalleryScreen({
           />
         }
       />
+      <ImageGallery
+        images={viewerImages}
+        visible={viewerVisible}
+        index={viewerIndex}
+        onDismiss={() => setViewerVisible(false)}
+        onIndexChange={setViewerIndex}
+      />
     </View>
   );
 }