@umituz/react-native-ai-creations 1.2.11 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -28,10 +28,11 @@
     "url": "https://github.com/umituz/react-native-ai-creations"
   },
   "dependencies": {
+    "@umituz/react-native-alert": "latest",
+    "@umituz/react-native-bottom-sheet": "latest",
     "@umituz/react-native-filter": "latest",
     "@umituz/react-native-image": "latest",
-    "@umituz/react-native-bottom-sheet": "latest",
-    "@umituz/react-native-alert": "latest"
+    "expo-linear-gradient": "^15.0.8"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
@@ -47,8 +48,8 @@
     "@tanstack/react-query": "^5.62.16",
     "@types/react": "^19.0.0",
     "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-sharing": "latest",
     "@umituz/react-native-firestore": "latest",
+    "@umituz/react-native-sharing": "latest",
     "firebase": "^11.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",

package/src/presentation/components/CreationDetail/DetailActions.tsx

@@ -0,0 +1,74 @@
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface DetailActionsProps {
+    readonly onShare: () => void;
+    readonly onDelete: () => void;
+    readonly shareLabel: string;
+    readonly deleteLabel: string;
+}
+
+export const DetailActions: React.FC<DetailActionsProps> = ({
+    onShare,
+    onDelete,
+    shareLabel,
+    deleteLabel
+}) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity
+                style={[styles.button, styles.shareButton]}
+                onPress={onShare}
+            >
+                <AtomicIcon name="share-social" size="sm" color="#fff" />
+                <AtomicText style={styles.buttonText}>{shareLabel}</AtomicText>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+                style={[styles.button, styles.deleteButton]}
+                onPress={onDelete}
+            >
+                <AtomicIcon name="trash" size="sm" color={tokens.colors.error} />
+                <AtomicText style={[styles.buttonText, { color: tokens.colors.error }]}>
+                    {deleteLabel}
+                </AtomicText>
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const useStyles = (tokens: any) => StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: tokens.spacing.md,
+        paddingHorizontal: tokens.spacing.lg,
+        marginBottom: tokens.spacing.xxl,
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 16,
+        gap: 8,
+        minWidth: 120,
+    },
+    shareButton: {
+        backgroundColor: tokens.colors.primary,
+    },
+    deleteButton: {
+        backgroundColor: tokens.colors.error + '10',
+    },
+    buttonText: {
+        fontWeight: '700',
+        color: '#fff',
+        fontSize: 15,
+    },
+});

package/src/presentation/components/CreationDetail/DetailHeader.tsx

@@ -0,0 +1,81 @@
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface DetailHeaderProps {
+    readonly title: string;
+    readonly date: string;
+    readonly onClose: () => void;
+}
+
+export const DetailHeader: React.FC<DetailHeaderProps> = ({ title, date, onClose }) => {
+    const tokens = useAppDesignTokens();
+    const insets = useSafeAreaInsets();
+    const styles = useStyles(tokens, insets);
+
+    return (
+        <View style={styles.headerContainer}>
+            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                <AtomicIcon name="arrow-back" size={24} customColor={tokens.colors.textPrimary} />
+            </TouchableOpacity>
+
+            <View style={styles.titleContainer}>
+                <AtomicText style={styles.title} numberOfLines={1}>{title}</AtomicText>
+                <View style={styles.dateBadge}>
+                    <AtomicIcon name="calendar-outline" size={12} customColor={tokens.colors.primary} />
+                    <AtomicText style={styles.dateText}>{date}</AtomicText>
+                </View>
+            </View>
+
+            <View style={styles.placeholder} />
+        </View>
+    );
+};
+
+const useStyles = (tokens: any, insets: any) => StyleSheet.create({
+    headerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingTop: insets.top + tokens.spacing.sm,
+        paddingBottom: tokens.spacing.md,
+        paddingHorizontal: tokens.spacing.md,
+        backgroundColor: tokens.colors.backgroundPrimary,
+        borderBottomWidth: 1,
+        borderBottomColor: tokens.colors.border,
+        zIndex: 10,
+    },
+    closeButton: {
+        padding: tokens.spacing.xs,
+        marginRight: tokens.spacing.sm,
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: tokens.colors.textPrimary,
+        marginBottom: 4,
+        textAlign: 'center',
+    },
+    dateBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 12,
+        backgroundColor: tokens.colors.primary + '15',
+    },
+    dateText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: tokens.colors.primary,
+    },
+    placeholder: {
+        width: 40,
+    },
+});

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

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import { View, StyleSheet, Image, Dimensions } from 'react-native';
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface DetailImageProps {
+    readonly uri: string;
+}
+
+const { width } = Dimensions.get('window');
+
+export const DetailImage: React.FC<DetailImageProps> = ({ uri }) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.frame}>
+                <Image source={{ uri }} style={styles.image} resizeMode="cover" />
+            </View>
+        </View>
+    );
+};
+
+const useStyles = (tokens: any) => 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,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.2,
+        shadowRadius: 16,
+        elevation: 8,
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+});

package/src/presentation/components/CreationDetail/DetailStory.tsx

@@ -0,0 +1,67 @@
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { LinearGradient } from 'expo-linear-gradient';
+
+interface DetailStoryProps {
+    readonly story: string;
+}
+
+export const DetailStory: React.FC<DetailStoryProps> = ({ story }) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    if (!story) return null;
+
+    return (
+        <View style={styles.container}>
+            <LinearGradient
+                colors={[tokens.colors.primary + '15', tokens.colors.primary + '05']}
+                style={styles.gradient}
+            >
+                <AtomicText style={styles.quoteMark}>&quot;</AtomicText>
+                <AtomicText style={styles.text}>{story}</AtomicText>
+                <View style={styles.quoteEndRow}>
+                    <AtomicText style={[styles.quoteMark, styles.quoteEnd]}>&quot;</AtomicText>
+                </View>
+            </LinearGradient>
+        </View>
+    );
+};
+
+const useStyles = (tokens: any) => StyleSheet.create({
+    container: {
+        paddingHorizontal: tokens.spacing.lg,
+        marginBottom: tokens.spacing.lg,
+    },
+    gradient: {
+        padding: tokens.spacing.lg,
+        borderRadius: 20,
+        borderWidth: 1,
+        borderColor: tokens.colors.primary + '20',
+    },
+    quoteMark: {
+        fontSize: 48,
+        lineHeight: 48,
+        color: tokens.colors.primary,
+        opacity: 0.4,
+        marginBottom: -16,
+    },
+    quoteEndRow: {
+        alignItems: 'flex-end',
+        marginTop: -16,
+    },
+    quoteEnd: {
+        marginBottom: 0,
+    },
+    text: {
+        fontSize: 16,
+        lineHeight: 26,
+        textAlign: 'center',
+        fontStyle: 'italic',
+        fontWeight: '500',
+        color: tokens.colors.textPrimary,
+        paddingBottom: 4,
+    },
+});

package/src/presentation/components/GalleryHeader.tsx

@@ -8,6 +8,7 @@ interface GalleryHeaderProps {
     readonly countLabel: string;
     readonly isFiltered: boolean;
     readonly onFilterPress: () => void;
+    readonly style?: any;
 }
 
 export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
@@ -15,13 +16,14 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
     count,
     countLabel,
     isFiltered,
-    onFilterPress
+    onFilterPress,
+    style,
 }) => {
     const tokens = useAppDesignTokens();
     const styles = useStyles(tokens);
 
     return (
-        <View style={styles.headerArea}>
+        <View style={[styles.headerArea, style]}>
             <View>
                 <AtomicText style={styles.title}>{title}</AtomicText>
                 <AtomicText style={styles.subtitle}>

package/src/presentation/screens/CreationDetailScreen.tsx

@@ -0,0 +1,71 @@
+
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { Creation } from '../../domain/entities/Creation';
+import { DetailHeader } from '../components/CreationDetail/DetailHeader';
+import { DetailImage } from '../components/CreationDetail/DetailImage';
+import { DetailStory } from '../components/CreationDetail/DetailStory';
+import { DetailActions } from '../components/CreationDetail/DetailActions';
+
+interface CreationDetailScreenProps {
+    readonly creation: Creation;
+    readonly onClose: () => void;
+    readonly onShare: (creation: Creation) => void;
+    readonly onDelete: (creation: Creation) => void;
+    readonly t: (key: string) => string;
+}
+
+export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
+    creation,
+    onClose,
+    onShare,
+    onDelete,
+    t
+}) => {
+    const tokens = useAppDesignTokens();
+
+    // Extract data
+    const metadata = (creation as any).metadata || {};
+    const title = metadata.names || creation.type;
+    const story = metadata.story || metadata.description || "";
+    const date = metadata.date || new Date(creation.createdAt).toLocaleDateString();
+
+    const styles = useStyles(tokens);
+
+    return (
+        <View style={styles.container}>
+            <DetailHeader
+                title={title}
+                date={date}
+                onClose={onClose}
+            />
+
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+            >
+                <DetailImage uri={creation.uri} />
+
+                <DetailStory story={story} />
+
+                <DetailActions
+                    onShare={() => onShare(creation)}
+                    onDelete={() => onDelete(creation)}
+                    shareLabel={t("result.shareButton") || "Share"}
+                    deleteLabel={t("common.delete") || "Delete"}
+                />
+            </ScrollView>
+        </View>
+    );
+};
+
+const useStyles = (tokens: any) => StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    scrollContent: {
+        paddingBottom: tokens.spacing.xxl,
+    },
+});

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -23,6 +23,7 @@ import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import { GalleryHeader } from "../components/GalleryHeader";
 
 import { useAlert } from "@umituz/react-native-alert";
+import { CreationDetailScreen } from "./CreationDetailScreen";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -49,8 +50,12 @@ export function CreationsGalleryScreen({
   const insets = useSafeAreaInsets();
   const { share } = useSharing();
   const alert = useAlert();
+
+  // State
   const [viewerVisible, setViewerVisible] = useState(false);
   const [viewerIndex, setViewerIndex] = useState(0);
+  const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
+
   const filterSheetRef = React.useRef<BottomSheetModalRef>(null);
 
   const { data: creations, isLoading, refetch } = useCreations({
@@ -65,7 +70,6 @@ export function CreationsGalleryScreen({
   const allCategories = useMemo(() => {
     const categories: FilterCategory[] = [];
 
-    // Add dynamic types category if types exist
     if (config.types.length > 0) {
       categories.push({
         id: 'type',
@@ -86,16 +90,13 @@ export function CreationsGalleryScreen({
     return categories;
   }, [config.types, config.filterCategories, t]);
 
-  const handleView = useCallback(
-    (creation: Creation) => {
-      const index = filtered.findIndex((c) => c.id === creation.id);
-      if (index >= 0) {
-        setViewerIndex(index);
-        setViewerVisible(true);
-      }
-    },
-    [filtered],
-  );
+  const handleView = useCallback((creation: Creation) => {
+    setSelectedCreation(creation);
+  }, []);
+
+  const handleCloseDetail = useCallback(() => {
+    setSelectedCreation(null);
+  }, []);
 
   const handleShare = useCallback(
     async (creation: Creation) => {
@@ -129,7 +130,10 @@ export function CreationsGalleryScreen({
             label: t("common.delete"),
             style: 'destructive',
             variant: 'danger',
-            onPress: () => deleteMutation.mutate(creation.id),
+            onPress: () => {
+              deleteMutation.mutate(creation.id);
+              setSelectedCreation(null);
+            },
           },
         ]
       });
@@ -173,7 +177,7 @@ export function CreationsGalleryScreen({
       <CreationCard
         creation={item}
         types={config.types}
-        onView={handleView}
+        onView={() => handleView(item)}
         onShare={handleShare}
         onDelete={handleDelete}
       />
@@ -181,6 +185,19 @@ export function CreationsGalleryScreen({
     [config.types, handleView, handleShare, handleDelete],
   );
 
+  // If a creation is selected, show detail screen (simulating a stack push)
+  if (selectedCreation) {
+    return (
+      <CreationDetailScreen
+        creation={selectedCreation}
+        onClose={handleCloseDetail}
+        onShare={handleShare}
+        onDelete={handleDelete}
+        t={t}
+      />
+    );
+  }
+
   if (!isLoading && (!creations || creations.length === 0)) {
     return (
       <View style={styles.container}>
@@ -202,6 +219,7 @@ export function CreationsGalleryScreen({
         countLabel={t(config.translations.photoCount) || 'photos'}
         isFiltered={isFiltered}
         onFilterPress={() => filterSheetRef.current?.present()}
+        style={{ paddingTop: insets.top }}
       />
 
       <FlatList
@@ -217,6 +235,8 @@ export function CreationsGalleryScreen({
           />
         }
       />
+
+      {/* Optional: Keep ImageGallery for quick preview if needed, or rely on Detail Screen */}
       <ImageGallery
         images={viewerImages}
         visible={viewerVisible}