@umituz/react-native-ai-generation-content 1.12.15 → 1.12.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.12.15",
+  "version": "1.12.17",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -78,4 +78,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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

@@ -1,5 +1,8 @@
 import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ImageGallery } from "@umituz/react-native-image";
+import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { Creation } from "../../domain/entities/Creation";
 
 interface CreationImageViewerProps {
@@ -23,12 +26,66 @@ export const CreationImageViewer: React.FC<CreationImageViewerProps> = ({
     onImageEdit,
     selectedCreationId,
 }) => {
+    const tokens = useAppDesignTokens();
+    const insets = useSafeAreaInsets();
+
     const handleImageChange = async (uri: string) => {
         if (selectedCreationId && onImageEdit) {
             await onImageEdit(uri, selectedCreationId);
         }
     };
 
+    const HeaderComponent = ({ imageIndex }: { imageIndex: number }) => (
+        <View style={[styles.header, { paddingTop: Math.max(insets.top, tokens.spacing.sm) }]} pointerEvents="box-none">
+            <View style={styles.counter}>
+                <AtomicText style={styles.counterText}>
+                    {imageIndex + 1} / {creations.length}
+                </AtomicText>
+            </View>
+            <TouchableOpacity
+                onPress={onDismiss}
+                style={styles.closeButton}
+                activeOpacity={0.7}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+                <AtomicIcon name="close" size="lg" color="white" />
+            </TouchableOpacity>
+        </View>
+    );
+
+    const styles = StyleSheet.create({
+        header: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            paddingHorizontal: tokens.spacing.lg,
+            zIndex: 999,
+        },
+        counter: {
+            backgroundColor: 'rgba(0,0,0,0.5)',
+            paddingHorizontal: tokens.spacing.md,
+            paddingVertical: tokens.spacing.xs,
+            borderRadius: tokens.spacing.pill || 20,
+            justifyContent: 'center',
+        },
+        counterText: {
+            ...tokens.typography.bodyMedium,
+            color: '#FFFFFF',
+            fontWeight: '600',
+        },
+        closeButton: {
+            width: 40,
+            height: 40,
+            borderRadius: 20,
+            backgroundColor: 'rgba(0,0,0,0.5)',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
+
     return (
         <ImageGallery
             images={creations.map((c) => ({ uri: c.uri }))}
@@ -36,6 +93,7 @@ export const CreationImageViewer: React.FC<CreationImageViewerProps> = ({
             index={index}
             onDismiss={onDismiss}
             onIndexChange={onIndexChange}
+            HeaderComponent={HeaderComponent}
             {...(enableEditing && { enableEditing } as any)}
             {...(onImageEdit && { onImageChange: handleImageChange } as any)}
         />

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

@@ -41,6 +41,7 @@ interface CreationsGalleryScreenProps {
   readonly headerTitle?: string;
   readonly showCount?: boolean;
   readonly enableSearch?: boolean;
+  readonly enableFilter?: boolean;
   readonly showGalleryHeader?: boolean;
 }
 
@@ -57,6 +58,7 @@ export function CreationsGalleryScreen({
   headerTitle,
   showCount = true,
   enableSearch = true,
+  enableFilter = false,
   showGalleryHeader = true,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
@@ -215,7 +217,7 @@ export function CreationsGalleryScreen({
             onFilterPress={() => filterSheetRef.current?.present()}
             onFavoritesPress={() => setShowOnlyFavorites(!showOnlyFavorites)}
             showOnlyFavorites={showOnlyFavorites}
-            isFilterEnabled={config.enableFiltering ?? false}
+            isFilterEnabled={enableFilter}
             showCount={showCount}
           />
         ) : null