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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -30,7 +30,8 @@
   "dependencies": {
     "@umituz/react-native-filter": "latest",
     "@umituz/react-native-image": "latest",
-    "@umituz/react-native-bottom-sheet": "latest"
+    "@umituz/react-native-bottom-sheet": "latest",
+    "@umituz/react-native-alert": "latest"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",

package/src/presentation/components/EmptyState.tsx

@@ -5,18 +5,22 @@
 
 import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicButton, useAppDesignTokens } from "@umituz/react-native-design-system";
 
 interface EmptyStateProps {
   readonly title: string;
   readonly description: string;
   readonly icon?: string;
+  readonly actionLabel?: string;
+  readonly onAction?: () => void;
 }
 
 export function EmptyState({
   title,
   description,
   icon = "🎨",
+  actionLabel,
+  onAction,
 }: EmptyStateProps) {
   const tokens = useAppDesignTokens();
 
@@ -43,9 +47,13 @@ export function EmptyState({
           ...tokens.typography.bodyMedium,
           color: tokens.colors.textSecondary,
           textAlign: "center",
+          marginBottom: onAction ? tokens.spacing.xl : 0,
+        },
+        button: {
+          minWidth: 160,
         },
       }),
-    [tokens],
+    [tokens, onAction],
   );
 
   return (
@@ -53,6 +61,14 @@ export function EmptyState({
       <AtomicText style={styles.icon}>{icon}</AtomicText>
       <AtomicText style={styles.title}>{title}</AtomicText>
       <AtomicText style={styles.description}>{description}</AtomicText>
+      {onAction && actionLabel && (
+        <AtomicButton
+          title={actionLabel}
+          onPress={onAction}
+          variant="primary"
+          style={styles.button}
+        />
+      )}
     </View>
   );
 }

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -22,6 +22,8 @@ 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";
+
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
   readonly repository: ICreationsRepository;
@@ -29,6 +31,8 @@ interface CreationsGalleryScreenProps {
   readonly t: (key: string) => string;
   readonly enableEditing?: boolean;
   readonly onImageEdit?: (uri: string, creationId: string) => void | Promise<void>;
+  readonly onEmptyAction?: () => void;
+  readonly emptyActionLabel?: string;
 }
 
 export function CreationsGalleryScreen({
@@ -38,10 +42,13 @@ export function CreationsGalleryScreen({
   t,
   enableEditing = false,
   onImageEdit,
+  onEmptyAction,
+  emptyActionLabel,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { share } = useSharing();
+  const alert = useAlert();
   const [viewerVisible, setViewerVisible] = useState(false);
   const [viewerIndex, setViewerIndex] = useState(0);
   const filterSheetRef = React.useRef<BottomSheetModalRef>(null);
@@ -106,20 +113,28 @@ export function CreationsGalleryScreen({
 
   const handleDelete = useCallback(
     (creation: Creation) => {
-      Alert.alert(
-        t(config.translations.deleteTitle),
-        t(config.translations.deleteMessage),
-        [
-          { text: t("common.cancel"), style: "cancel" },
+      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: () => { }
+          },
           {
-            text: t("common.delete"),
-            style: "destructive",
+            id: 'delete',
+            label: t("common.delete"),
+            style: 'destructive',
+            variant: 'danger',
             onPress: () => deleteMutation.mutate(creation.id),
           },
-        ],
-      );
+        ]
+      });
     },
-    [t, config.translations, deleteMutation],
+    [t, config.translations, deleteMutation, alert],
   );
 
   const handleImageChange = useCallback(
@@ -172,6 +187,8 @@ export function CreationsGalleryScreen({
         <EmptyState
           title={t(config.translations.empty)}
           description={t(config.translations.emptyDescription)}
+          actionLabel={emptyActionLabel}
+          onAction={onEmptyAction}
         />
       </View>
     );