@umituz/react-native-ai-creations 1.2.15 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/CreationDetail/index.ts

@@ -0,0 +1,4 @@
+export * from './DetailHeader';
+export * from './DetailImage';
+export * from './DetailStory';
+export * from './DetailActions';

package/src/presentation/components/CreationsGrid.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { FlatList, RefreshControl, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { Creation } from "../../domain/entities/Creation";
+import type { CreationType } from "../../domain/value-objects/CreationsConfig";
+import { CreationCard } from "./CreationCard";
+
+interface CreationsGridProps {
+    readonly creations: Creation[];
+    readonly types: readonly CreationType[];
+    readonly isLoading: boolean;
+    readonly onRefresh: () => void;
+    readonly onView: (creation: Creation) => void;
+    readonly onShare: (creation: Creation) => void;
+    readonly onDelete: (creation: Creation) => void;
+    readonly contentContainerStyle?: any;
+}
+
+export const CreationsGrid: React.FC<CreationsGridProps> = ({
+    creations,
+    types,
+    isLoading,
+    onRefresh,
+    onView,
+    onShare,
+    onDelete,
+    contentContainerStyle,
+}) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    const renderItem = ({ item }: { item: Creation }) => (
+        <CreationCard
+            creation={item}
+            types={types as CreationType[]}
+            onView={() => onView(item)}
+            onShare={() => onShare(item)}
+            onDelete={() => onDelete(item)}
+        />
+    );
+
+    return (
+        <FlatList
+            data={creations}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={[styles.list, contentContainerStyle]}
+            showsVerticalScrollIndicator={false}
+            refreshControl={
+                <RefreshControl
+                    refreshing={isLoading}
+                    onRefresh={onRefresh}
+                    tintColor={tokens.colors.primary}
+                />
+            }
+        />
+    );
+};
+
+const useStyles = (tokens: any) => StyleSheet.create({
+    list: {
+        padding: tokens.spacing.md,
+        paddingBottom: 100, // Space for fab or bottom tab
+    },
+});

package/src/presentation/components/index.ts

@@ -2,8 +2,16 @@
  * Presentation Components
  */
 
-export { CreationThumbnail } from "./CreationThumbnail";
-export { CreationCard } from "./CreationCard";
-export { CreationsHomeCard } from "./CreationsHomeCard";
-export { FilterChips } from "./FilterChips";
+export { GalleryHeader } from "./GalleryHeader";
 export { EmptyState } from "./EmptyState";
+export { FilterChips } from "./FilterChips";
+export { CreationsHomeCard } from "./CreationsHomeCard";
+export { CreationCard } from "./CreationCard";
+export { CreationThumbnail } from "./CreationThumbnail";
+export { CreationsGrid } from "./CreationsGrid";
+
+// Detail Components
+export { DetailHeader } from "./CreationDetail/DetailHeader";
+export { DetailImage } from "./CreationDetail/DetailImage";
+export { DetailStory } from "./CreationDetail/DetailStory";
+export { DetailActions } from "./CreationDetail/DetailActions";

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,28 +1,19 @@
-/**
- * CreationsGalleryScreen
- * Full gallery view with filtering and editing
- */
-
 import React, { useMemo, useCallback, useState } from "react";
-import { View, FlatList, StyleSheet, RefreshControl, Alert, TouchableOpacity } from "react-native";
+import { View, StyleSheet } 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";
-import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
-import { CreationCard } from "../components/CreationCard";
-import { EmptyState } from "../components/EmptyState";
+import { useAlert } from "@umituz/react-native-alert";
 import { FilterBottomSheet, type FilterCategory } from "@umituz/react-native-filter";
 import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
-import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
-import { GalleryHeader } from "../components/GalleryHeader";
-
-import { useAlert } from "@umituz/react-native-alert";
+import { GalleryHeader, EmptyState, CreationsGrid } from "../components";
+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";
 
 interface CreationsGalleryScreenProps {
@@ -51,146 +42,55 @@ export function CreationsGalleryScreen({
   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({
-    userId,
-    repository,
-  });
-
+  const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
   const deleteMutation = useDeleteCreation({ userId, repository });
-  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } =
-    useCreationsFilter({ creations });
+  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
 
   const allCategories = useMemo(() => {
     const categories: FilterCategory[] = [];
-
     if (config.types.length > 0) {
       categories.push({
         id: 'type',
-        title: t(config.translations.filterTitle) || t('creations.category') || 'Category',
+        title: t(config.translations.filterTitle),
         multiSelect: false,
-        options: config.types.map(type => ({
-          id: type.id,
-          label: t(type.labelKey),
-          icon: type.icon || 'Image',
-        }))
+        options: config.types.map(type => ({ id: type.id, label: t(type.labelKey), icon: type.icon || 'Image' }))
       });
     }
-
-    if (config.filterCategories) {
-      categories.push(...config.filterCategories);
-    }
-
+    if (config.filterCategories) categories.push(...config.filterCategories);
     return categories;
-  }, [config.types, config.filterCategories, t]);
-
-  const handleView = useCallback((creation: Creation) => {
-    setSelectedCreation(creation);
-  }, []);
-
-  const handleCloseDetail = useCallback(() => {
-    setSelectedCreation(null);
-  }, []);
-
-  const handleShare = useCallback(
-    async (creation: Creation) => {
-      try {
-        await share(creation.uri, {
-          dialogTitle: t(config.translations.title),
-          mimeType: "image/jpeg",
-        });
-      } catch {
-        // Silent fail
-      }
-    },
-    [share, t, config.translations.title],
-  );
-
-  const handleDelete = useCallback(
-    (creation: Creation) => {
-      alert.show({
-        title: t(config.translations.deleteTitle),
-        message: t(config.translations.deleteMessage),
-        type: 'warning' as any,
-        actions: [
-          {
-            id: 'cancel',
-            label: t("common.cancel"),
-            style: 'secondary',
-            onPress: () => { }
-          },
-          {
-            id: 'delete',
-            label: t("common.delete"),
-            style: 'destructive',
-            variant: 'danger',
-            onPress: () => {
-              deleteMutation.mutate(creation.id);
-              setSelectedCreation(null);
-            },
-          },
-        ]
-      });
-    },
-    [t, config.translations, deleteMutation, alert],
-  );
-
-  const handleImageChange = useCallback(
-    async (uri: string, index: number) => {
-      const creation = filtered[index];
-      if (creation && onImageEdit) {
-        await onImageEdit(uri, creation.id);
-      }
-    },
-    [filtered, onImageEdit],
-  );
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flex: 1,
-          backgroundColor: tokens.colors.backgroundPrimary,
-        },
-        list: {
-          paddingHorizontal: tokens.spacing.md,
-          paddingBottom: insets.bottom + tokens.spacing.xl,
-          gap: tokens.spacing.md,
-        },
-      }),
-    [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(item)}
-        onShare={handleShare}
-        onDelete={handleDelete}
-      />
-    ),
-    [config.types, handleView, handleShare, handleDelete],
-  );
+  }, [config.types, config.filterCategories, t, config.translations.filterTitle]);
+
+  const handleShare = useCallback(async (creation: Creation) => {
+    share(creation.uri, { dialogTitle: t("common.share") });
+  }, [share, t]);
+
+  const handleDelete = useCallback(async (creation: Creation) => {
+    alert.show({
+      title: t(config.translations.deleteTitle),
+      message: t(config.translations.deleteMessage),
+      type: 'warning' as any,
+      actions: [
+        { id: 'cancel', label: t("common.cancel"), onPress: () => { } },
+        {
+          id: 'delete', label: t("common.delete"), variant: 'danger' as any, onPress: async () => {
+            const success = await deleteMutation.mutateAsync(creation.id);
+            if (success) setSelectedCreation(null);
+          }
+        }
+      ]
+    });
+  }, [alert, config, deleteMutation, t]);
 
-  // If a creation is selected, show detail screen (simulating a stack push)
   if (selectedCreation) {
     return (
       <CreationDetailScreen
         creation={selectedCreation}
-        onClose={handleCloseDetail}
+        onClose={() => setSelectedCreation(null)}
         onShare={handleShare}
         onDelete={handleDelete}
         t={t}
@@ -198,6 +98,8 @@ export function CreationsGalleryScreen({
     );
   }
 
+  const styles = useStyles(tokens);
+
   if (!isLoading && (!creations || creations.length === 0)) {
     return (
       <View style={styles.container}>
@@ -222,43 +124,41 @@ export function CreationsGalleryScreen({
         onFilterPress={() => filterSheetRef.current?.present()}
         style={{ paddingTop: insets.top }}
       />
-
-      <FlatList
-        data={filtered}
-        renderItem={renderItem}
-        keyExtractor={(item) => item.id}
-        contentContainerStyle={styles.list}
-        refreshControl={
-          <RefreshControl
-            refreshing={isLoading}
-            onRefresh={refetch}
-            tintColor={tokens.colors.primary}
-          />
-        }
+      <CreationsGrid
+        creations={filtered}
+        types={config.types}
+        isLoading={isLoading}
+        onRefresh={refetch}
+        onView={setSelectedCreation}
+        onShare={handleShare}
+        onDelete={handleDelete}
+        contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
       />
-
-      {/* Optional: Keep ImageGallery for quick preview if needed, or rely on Detail Screen */}
       <ImageGallery
-        images={viewerImages}
+        images={filtered.map(c => ({ uri: c.uri }))}
         visible={viewerVisible}
         index={viewerIndex}
         onDismiss={() => setViewerVisible(false)}
         onIndexChange={setViewerIndex}
         {...(enableEditing && { enableEditing } as any)}
-        {...(onImageEdit && { onImageChange: handleImageChange } as any)}
+        {...(onImageEdit && {
+          onImageChange: async (uri: string) => {
+            if (selectedCreation) { await onImageEdit(uri, (selectedCreation as Creation).id); refetch(); }
+          }
+        } as any)}
       />
-
       <FilterBottomSheet
         ref={filterSheetRef}
-        categories={allCategories as FilterCategory[]}
+        categories={allCategories}
         selectedIds={selectedIds}
-        onFilterPress={(id, catId) => {
-          const category = allCategories.find(c => c.id === catId);
-          toggleFilter(id, category?.multiSelect);
-        }}
+        onFilterPress={(id, catId) => toggleFilter(id, allCategories.find(c => c.id === catId)?.multiSelect)}
         onClearFilters={clearFilters}
         title={t(config.translations.filterTitle) || t("common.filter")}
       />
     </View>
   );
 }
+
+const useStyles = (tokens: any) => StyleSheet.create({
+  container: { flex: 1, backgroundColor: tokens.colors.background },
+});