@umituz/react-native-ai-generation-content 1.17.16 → 1.17.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.16",
+  "version": "1.17.18",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -101,8 +101,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@umituz/react-native-ai-generation-content": "^1.17.14"
   }
 }

package/src/domains/creations/presentation/components/CreationDetail/DetailImage.tsx

@@ -1,38 +1,38 @@
-
 import React from 'react';
-import { View, StyleSheet, Image, Dimensions } from 'react-native';
-import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet, useWindowDimensions } from 'react-native';
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { Image } from 'expo-image';
 
 interface DetailImageProps {
     readonly uri: string;
 }
 
-const { width } = Dimensions.get('window');
+const HORIZONTAL_PADDING = 16;
+const ASPECT_RATIO = 16 / 9;
 
 export const DetailImage: React.FC<DetailImageProps> = ({ uri }) => {
     const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
+    const { width } = useWindowDimensions();
+    const imageWidth = width - (HORIZONTAL_PADDING * 2);
+    const imageHeight = imageWidth / ASPECT_RATIO;
 
     return (
         <View style={styles.container}>
-            <View style={styles.frame}>
-                <Image source={{ uri }} style={styles.image} resizeMode="cover" />
+            <View style={[styles.frame, { width: imageWidth, height: imageHeight, backgroundColor: tokens.colors.surface }]}>
+                <Image source={{ uri }} style={styles.image} contentFit="cover" />
             </View>
         </View>
     );
 };
 
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
-        paddingHorizontal: tokens.spacing.lg,
-        marginVertical: tokens.spacing.lg,
+        paddingHorizontal: HORIZONTAL_PADDING,
+        marginVertical: 16,
     },
     frame: {
-        width: width - (tokens.spacing.lg * 2),
-        height: width - (tokens.spacing.lg * 2),
-        borderRadius: 24,
+        borderRadius: 16,
         overflow: 'hidden',
-        backgroundColor: tokens.colors.surface,
     },
     image: {
         width: '100%',

package/src/domains/creations/presentation/components/CreationDetail/DetailVideo.tsx

@@ -4,12 +4,8 @@
  */
 
 import React, { useState, useCallback } from "react";
-import { View, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
-import {
-  useAppDesignTokens,
-  AtomicIcon,
-  type DesignTokens,
-} from "@umituz/react-native-design-system";
+import { View, StyleSheet, TouchableOpacity, useWindowDimensions } from "react-native";
+import { useAppDesignTokens, AtomicIcon } from "@umituz/react-native-design-system";
 import { Image } from "expo-image";
 import { useVideoPlayer, VideoView } from "expo-video";
 
@@ -18,14 +14,17 @@ interface DetailVideoProps {
   readonly thumbnailUrl?: string;
 }
 
-const { width } = Dimensions.get("window");
+const HORIZONTAL_PADDING = 16;
+const ASPECT_RATIO = 16 / 9;
 
 export const DetailVideo: React.FC<DetailVideoProps> = ({
   videoUrl,
   thumbnailUrl,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = useStyles(tokens);
+  const { width } = useWindowDimensions();
+  const videoWidth = width - (HORIZONTAL_PADDING * 2);
+  const videoHeight = videoWidth / ASPECT_RATIO;
   const [isPlaying, setIsPlaying] = useState(false);
 
   const player = useVideoPlayer(videoUrl, (p) => {
@@ -39,7 +38,7 @@ export const DetailVideo: React.FC<DetailVideoProps> = ({
 
   return (
     <View style={styles.container}>
-      <View style={styles.frame}>
+      <View style={[styles.frame, { width: videoWidth, height: videoHeight, backgroundColor: tokens.colors.surface }]}>
         {isPlaying ? (
           <VideoView
             player={player}
@@ -60,10 +59,10 @@ export const DetailVideo: React.FC<DetailVideoProps> = ({
                 contentFit="cover"
               />
             ) : (
-              <View style={styles.placeholder} />
+              <View style={[styles.placeholder, { backgroundColor: tokens.colors.surfaceSecondary }]} />
             )}
             <View style={styles.playButtonContainer}>
-              <View style={styles.playButton}>
+              <View style={[styles.playButton, { backgroundColor: tokens.colors.primary }]}>
                 <AtomicIcon name="play" customSize={32} color="onPrimary" />
               </View>
             </View>
@@ -74,50 +73,44 @@ export const DetailVideo: React.FC<DetailVideoProps> = ({
   );
 };
 
-const useStyles = (tokens: DesignTokens) =>
-  StyleSheet.create({
-    container: {
-      paddingHorizontal: tokens.spacing.lg,
-      marginVertical: tokens.spacing.lg,
-    },
-    frame: {
-      width: width - tokens.spacing.lg * 2,
-      height: width - tokens.spacing.lg * 2,
-      borderRadius: 24,
-      overflow: "hidden",
-      backgroundColor: tokens.colors.surface,
-    },
-    video: {
-      width: "100%",
-      height: "100%",
-    },
-    thumbnailContainer: {
-      width: "100%",
-      height: "100%",
-      justifyContent: "center",
-      alignItems: "center",
-    },
-    thumbnail: {
-      width: "100%",
-      height: "100%",
-    },
-    placeholder: {
-      width: "100%",
-      height: "100%",
-      backgroundColor: tokens.colors.surfaceSecondary,
-    },
-    playButtonContainer: {
-      ...StyleSheet.absoluteFillObject,
-      justifyContent: "center",
-      alignItems: "center",
-    },
-    playButton: {
-      width: 64,
-      height: 64,
-      borderRadius: 32,
-      backgroundColor: tokens.colors.primary,
-      justifyContent: "center",
-      alignItems: "center",
-      paddingLeft: 4,
-    },
-  });
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: HORIZONTAL_PADDING,
+    marginVertical: 16,
+  },
+  frame: {
+    borderRadius: 16,
+    overflow: "hidden",
+  },
+  video: {
+    width: "100%",
+    height: "100%",
+  },
+  thumbnailContainer: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  thumbnail: {
+    width: "100%",
+    height: "100%",
+  },
+  placeholder: {
+    width: "100%",
+    height: "100%",
+  },
+  playButtonContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  playButton: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingLeft: 4,
+  },
+});

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

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
-import { useAppDesignTokens, type DesignTokens, ScreenLayout } from "@umituz/react-native-design-system";
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { Creation } from '../../domain/entities/Creation';
 import { hasVideoContent, getPreviewUrl } from '../../domain/utils';
 import { DetailHeader } from '../components/CreationDetail/DetailHeader';
@@ -37,6 +38,7 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
     t
 }) => {
     const tokens = useAppDesignTokens();
+    const insets = useSafeAreaInsets();
     const { getLocalizedTitle } = useCreationsProvider();
 
     // Extract data safely
@@ -57,48 +59,53 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
         return false;
     }, [creation.type, creation.output]);
 
-    const styles = useStyles(tokens);
-
     // Get video URL and thumbnail for video content
     const videoUrl = creation.output?.videoUrl || creation.uri;
     const thumbnailUrl = getPreviewUrl(creation.output) || undefined;
 
     return (
-        <ScreenLayout
-            scrollable={true}
-            edges={['top', 'bottom']}
-            backgroundColor={tokens.colors.background}
-            header={
+        <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
+            <View style={{ paddingTop: insets.top }}>
                 <DetailHeader
                     title={title}
                     date={date}
                     onClose={onClose}
                 />
-            }
-            contentContainerStyle={styles.scrollContent}
-        >
-            {isVideo ? (
-                <DetailVideo videoUrl={videoUrl} thumbnailUrl={thumbnailUrl} />
-            ) : (
-                <DetailImage uri={creation.uri} />
-            )}
+            </View>
+            <ScrollView
+                style={styles.scrollView}
+                contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 32 }]}
+                showsVerticalScrollIndicator={false}
+            >
+                {isVideo ? (
+                    <DetailVideo videoUrl={videoUrl} thumbnailUrl={thumbnailUrl} />
+                ) : (
+                    <DetailImage uri={creation.uri} />
+                )}
 
-            {story ? (
-                <DetailStory story={story} />
-            ) : null}
+                {story ? (
+                    <DetailStory story={story} />
+                ) : null}
 
-            <DetailActions
-                onShare={() => onShare(creation)}
-                onDelete={() => onDelete(creation)}
-                shareLabel={t("result.shareButton")}
-                deleteLabel={t("common.delete")}
-            />
-        </ScreenLayout>
+                <DetailActions
+                    onShare={() => onShare(creation)}
+                    onDelete={() => onDelete(creation)}
+                    shareLabel={t("result.shareButton")}
+                    deleteLabel={t("common.delete")}
+                />
+            </ScrollView>
+        </View>
     );
 };
 
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+    },
     scrollContent: {
-        paddingBottom: tokens.spacing.xxl,
+        paddingTop: 8,
     },
 });

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

@@ -1,6 +1,8 @@
 declare const __DEV__: boolean;
 
 import React, { useMemo, useCallback, useState } from "react";
+import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useAppDesignTokens,
   useAlert,
@@ -9,7 +11,7 @@ import {
   useSharing,
   FilterBottomSheet,
   type BottomSheetModalRef,
-  ScreenLayout,
+  type DesignTokens,
 } from "@umituz/react-native-design-system";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
@@ -17,7 +19,7 @@ import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
 import {
   GalleryHeader,
-  CreationsGrid,
+  CreationCard,
   CreationImageViewer,
   GalleryEmptyStates,
 } from "../components";
@@ -26,6 +28,7 @@ import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import { CreationDetailScreen } from "./CreationDetailScreen";
+import { CreationsProvider } from "../components/CreationsProvider";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -40,8 +43,6 @@ interface CreationsGalleryScreenProps {
   readonly showFilter?: boolean;
 }
 
-import { CreationsProvider } from "../components/CreationsProvider";
-
 export function CreationsGalleryScreen(props: CreationsGalleryScreenProps) {
   return (
     <CreationsProvider config={props.config} t={props.t}>
@@ -62,6 +63,7 @@ function CreationsGalleryScreenContent({
   emptyActionLabel,
   showFilter = config.showFilter ?? true,
 }: CreationsGalleryScreenProps) {
+  const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
   const { share } = useSharing();
   const alert = useAlert();
@@ -76,14 +78,12 @@ function CreationsGalleryScreenContent({
   const deleteMutation = useDeleteCreation({ userId, repository });
   const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
 
-  // Refetch creations when screen comes into focus
   useFocusEffect(
     useCallback(() => {
       void refetch();
     }, [refetch])
   );
 
-  // Prepare data for UI using utils
   const allCategories = useMemo(
     () => getFilterCategoriesFromConfig(config, t),
     [config, t],
@@ -118,27 +118,62 @@ function CreationsGalleryScreenContent({
     );
   }, [alert, config, deleteMutation, t]);
 
-  // Handle viewing a creation - shows detail screen
   const handleView = useCallback((creation: Creation) => {
     setSelectedCreation(creation);
   }, []);
 
-  // Handle favorite toggle
   const handleFavorite = useCallback((creation: Creation, isFavorite: boolean) => {
     void (async () => {
       if (!userId) return;
-      const success = await repository.updateFavorite(
-        userId,
-        creation.id,
-        isFavorite,
-      );
+      const success = await repository.updateFavorite(userId, creation.id, isFavorite);
       if (success) {
         void refetch();
       }
     })();
   }, [userId, repository, refetch]);
 
-  const renderEmptyComponent = useMemo(() => (
+  const styles = useStyles(tokens, insets);
+
+  const renderItem = useCallback(
+    ({ item }: { item: Creation }) => (
+      <CreationCard
+        creation={item}
+        callbacks={{
+          onPress: () => handleView(item),
+          onShare: async () => handleShare(item),
+          onDelete: () => handleDelete(item),
+          onFavorite: () => handleFavorite(item, !item.isFavorite),
+        }}
+      />
+    ),
+    [handleView, handleShare, handleDelete, handleFavorite]
+  );
+
+  const renderHeader = useMemo(() => {
+    if ((!creations || creations.length === 0) && !isLoading) return null;
+
+    return (
+      <View style={styles.header}>
+        <GalleryHeader
+          title={t(config.translations.title)}
+          count={filtered.length}
+          countLabel={t(config.translations.photoCount)}
+          isFiltered={isFiltered}
+          showFilter={showFilter}
+          filterLabel={t(config.translations.filterLabel)}
+          onFilterPress={() => {
+            if (__DEV__) {
+              // eslint-disable-next-line no-console
+              console.log('[CreationsGallery] Filter button pressed');
+            }
+            filterSheetRef.current?.present();
+          }}
+        />
+      </View>
+    );
+  }, [creations, isLoading, filtered.length, isFiltered, showFilter, t, config, styles.header]);
+
+  const renderEmpty = useMemo(() => (
     <GalleryEmptyStates
       isLoading={isLoading}
       creations={creations}
@@ -166,63 +201,37 @@ function CreationsGalleryScreenContent({
   }
 
   return (
-    <>
-      <ScreenLayout
-        scrollable={false}
-        edges={["top"]}
-        backgroundColor={tokens.colors.background}
-        header={
-          (!creations || creations?.length === 0) && !isLoading ? null : (
-            <GalleryHeader
-              title={t(config.translations.title)}
-              count={filtered.length}
-              countLabel={t(config.translations.photoCount)}
-              isFiltered={isFiltered}
-              showFilter={showFilter}
-              filterLabel={t(config.translations.filterLabel)}
-              onFilterPress={() => {
-                if (__DEV__) {
-                  // eslint-disable-next-line no-console
-                  console.log('[CreationsGallery] Filter button pressed');
-                  // eslint-disable-next-line no-console
-                  console.log('[CreationsGallery] filterSheetRef.current:', filterSheetRef.current);
-                  // eslint-disable-next-line no-console
-                  console.log('[CreationsGallery] allCategories:', allCategories);
-                }
-                filterSheetRef.current?.present();
-              }}
-            />
-          )
+    <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
+      <FlatList
+        data={filtered}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        ListHeaderComponent={renderHeader}
+        ListEmptyComponent={renderEmpty}
+        contentContainerStyle={[
+          styles.listContent,
+          (!filtered || filtered.length === 0) && styles.emptyContent,
+        ]}
+        showsVerticalScrollIndicator={false}
+        refreshControl={
+          <RefreshControl
+            refreshing={isLoading}
+            onRefresh={() => void refetch()}
+            tintColor={tokens.colors.primary}
+          />
         }
-      >
-        {/* Main Content Grid - handles empty/loading via ListEmptyComponent */}
-        <CreationsGrid
-          creations={filtered}
-          isLoading={isLoading}
-          onRefresh={() => void refetch()}
-          onPress={(creation) => handleView(creation as Creation)}
-          onShare={async (creation) => handleShare(creation as Creation)}
-          onDelete={(creation) => handleDelete(creation as Creation)}
-          onFavorite={(creation) => {
-            const c = creation as Creation;
-            handleFavorite(c, !c.isFavorite);
-          }}
-          contentContainerStyle={{ paddingBottom: tokens.spacing.xl }}
-          ListEmptyComponent={renderEmptyComponent}
-        />
+      />
 
-        <CreationImageViewer
-          creations={filtered}
-          visible={viewerVisible}
-          index={viewerIndex}
-          onDismiss={() => setViewerVisible(false)}
-          onIndexChange={setViewerIndex}
-          enableEditing={enableEditing}
-          onImageEdit={onImageEdit}
-        />
-      </ScreenLayout>
+      <CreationImageViewer
+        creations={filtered}
+        visible={viewerVisible}
+        index={viewerIndex}
+        onDismiss={() => setViewerVisible(false)}
+        onIndexChange={setViewerIndex}
+        enableEditing={enableEditing}
+        onImageEdit={onImageEdit}
+      />
 
-      {/* FilterBottomSheet must be outside ScreenLayout for proper portal rendering */}
       <FilterBottomSheet
         ref={filterSheetRef}
         categories={allCategories}
@@ -234,7 +243,27 @@ function CreationsGalleryScreenContent({
         onClearFilters={clearFilters}
         title={t(config.translations.filterTitle)}
       />
-    </>
+    </View>
   );
 }
 
+const useStyles = (tokens: DesignTokens, insets: { top: number; bottom: number }) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    header: {
+      paddingTop: insets.top + tokens.spacing.md,
+      backgroundColor: tokens.colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: tokens.colors.border,
+    },
+    listContent: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingTop: tokens.spacing.md,
+      paddingBottom: insets.bottom + 100,
+    },
+    emptyContent: {
+      flexGrow: 1,
+    },
+  });