@umituz/react-native-ai-generation-content 1.12.7 → 1.12.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.12.7",
+  "version": "1.12.9",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -16,8 +16,8 @@
     "src"
   ],
   "scripts": {
-    "typecheck": "echo 'TypeScript validation passed'",
-    "lint": "echo 'Lint passed'",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx --max-warnings 0",
     "lint:fix": "eslint src --ext .ts,.tsx --fix"
   },
   "keywords": [
@@ -40,7 +40,6 @@
   "peerDependencies": {
     "@react-navigation/native": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
-    "@umituz/react-native-alert": "latest",
     "@umituz/react-native-animation": "latest",
     "@umituz/react-native-bottom-sheet": "latest",
     "@umituz/react-native-design-system": "latest",
@@ -62,7 +61,6 @@
     "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "@umituz/react-native-alert": "latest",
     "@umituz/react-native-animation": "latest",
     "@umituz/react-native-bottom-sheet": "latest",
     "@umituz/react-native-design-system": "latest",
@@ -75,11 +73,11 @@
     "firebase": "^11.1.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-safe-area-context": "^4.0.0",
+    "react-native-safe-area-context": "^5.6.2",
     "typescript": "^5.3.0",
     "zustand": "^5.0.2"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/debug-props.ts

@@ -0,0 +1,10 @@
+
+import { AtomicTextProps, AtomicIconProps } from "@umituz/react-native-design-system";
+
+const textProps: AtomicTextProps = {
+    // This helps us see what is required/optional in IDE or tsc output
+};
+
+const iconProps: AtomicIconProps = {
+    name: 'check',
+};

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

@@ -0,0 +1,77 @@
+import React, { useMemo } from "react";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { EmptyState } from "./EmptyState";
+import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
+
+interface CreationsGalleryEmptyStateProps {
+    readonly isLoading: boolean;
+    readonly hasCreations: boolean;
+    readonly config: CreationsConfig;
+    readonly t: (key: string) => string;
+    readonly emptyActionLabel?: string;
+    readonly onEmptyAction?: () => void;
+    readonly clearFilters: () => void;
+}
+
+export const CreationsGalleryEmptyState: React.FC<CreationsGalleryEmptyStateProps> = ({
+    isLoading,
+    hasCreations,
+    config,
+    t,
+    emptyActionLabel,
+    onEmptyAction,
+    clearFilters,
+}) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    return useMemo(() => {
+        // 1. Loading State
+        if (isLoading && !hasCreations) {
+            return (
+                <View style={styles.centerContainer}>
+                    <ActivityIndicator size="large" color={tokens.colors.primary} />
+                </View>
+            );
+        }
+
+        // 2. System Empty State (User has NO creations at all)
+        // We check 'hasCreations' which represents the full list presence
+        if (!hasCreations) {
+            return (
+                <View style={styles.centerContainer}>
+                    <EmptyState
+                        title={t(config.translations.empty)}
+                        description={t(config.translations.emptyDescription)}
+                        actionLabel={emptyActionLabel}
+                        onAction={onEmptyAction}
+                    />
+                </View>
+            );
+        }
+
+        // 3. Filter Empty State (User has creations, but filter returns none)
+        // This component is rendered when the list is empty, but hasCreations is true.
+        return (
+            <View style={styles.centerContainer}>
+                <EmptyState
+                    title={t("common.no_results") || "No results"}
+                    description={t("common.no_results_description") || "Try changing your filters"}
+                    actionLabel={t("common.clear_all") || "Clear All"}
+                    onAction={clearFilters}
+                />
+            </View>
+        );
+    }, [isLoading, hasCreations, config, t, emptyActionLabel, onEmptyAction, clearFilters, styles.centerContainer, tokens.colors.primary]);
+};
+
+const useStyles = (tokens: any) => StyleSheet.create({
+    centerContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: 400,
+        paddingHorizontal: tokens.spacing.xl
+    },
+});

package/src/domains/creations/presentation/components/index.ts

@@ -10,6 +10,7 @@ export { CreationCard } from "./CreationCard";
 export { CreationThumbnail } from "./CreationThumbnail";
 export { CreationImageViewer } from "./CreationImageViewer";
 export { CreationsGrid } from "./CreationsGrid";
+export { CreationsGalleryEmptyState } from "./CreationsGalleryEmptyState";
 export { FilterBottomSheet, type FilterCategory, type FilterOption } from "./FilterBottomSheet";
 
 // Detail Components

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

@@ -7,9 +7,9 @@ import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
-import { useAlert } from "@umituz/react-native-alert";
+import { useAlert, AlertMode } from "@umituz/react-native-design-system";
 import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
-import { GalleryHeader, EmptyState, CreationsGrid, FilterBottomSheet, CreationImageViewer, type FilterCategory } from "../components";
+import { GalleryHeader, CreationsGrid, FilterBottomSheet, CreationImageViewer, type FilterCategory, CreationsGalleryEmptyState } from "../components";
 import { getTranslatedTypes, getFilterCategoriesFromConfig } from "../utils/filterUtils";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
@@ -68,20 +68,22 @@ export function CreationsGalleryScreen({
   }, [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.showWarning(
+      t(config.translations.deleteTitle),
+      t(config.translations.deleteMessage),
+      {
+        mode: AlertMode.MODAL,
+        actions: [
+          { id: 'cancel', label: t("common.cancel"), onPress: () => { } },
+          {
+            id: 'delete', label: t("common.delete"), style: 'destructive', onPress: async () => {
+              const success = await deleteMutation.mutateAsync(creation.id);
+              if (success) setSelectedCreation(null);
+            }
           }
-        }
-      ]
-    });
+        ]
+      }
+    );
   }, [alert, config, deleteMutation, t]);
 
   // Handle viewing a creation - shows detail screen
@@ -89,59 +91,8 @@ export function CreationsGalleryScreen({
     setSelectedCreation(creation);
   }, []);
 
-  const styles = useStyles(tokens);
-
-  // Define empty state content based on state
-  const renderEmptyComponent = useMemo(() => {
-    // 1. Loading State
-    if (isLoading && (!creations || creations?.length === 0)) {
-      return (
-        <View style={styles.centerContainer}>
-          <ActivityIndicator size="large" color={tokens.colors.primary} />
-        </View>
-      );
-    }
-
-    // 2. System Empty State (User has NO creations at all)
-    // We check 'creations' (the full list)
-    if (!creations || creations?.length === 0) {
-      return (
-        <View style={styles.centerContainer}>
-          <EmptyState
-            title={t(config.translations.empty)}
-            description={t(config.translations.emptyDescription)}
-            actionLabel={emptyActionLabel}
-            onAction={onEmptyAction}
-          />
-        </View>
-      );
-    }
-
-    // 3. Filter Empty State (User has creations, but filter returns none)
-    // We check 'filtered' (the displayed list)
-    return (
-      <View style={styles.centerContainer}>
-        <EmptyState
-          title={t("common.no_results") || "No results"}
-          description={t("common.no_results_description") || "Try changing your filters"}
-          actionLabel={t("common.clear_all") || "Clear All"}
-          onAction={clearFilters}
-        />
-      </View>
-    );
-  }, [isLoading, creations, config, t, emptyActionLabel, onEmptyAction, clearFilters, styles.centerContainer, tokens.colors.primary]);
 
-  if (selectedCreation) {
-    return (
-      <CreationDetailScreen
-        creation={selectedCreation}
-        onClose={() => setSelectedCreation(null)}
-        onShare={handleShare}
-        onDelete={handleDelete}
-        t={t}
-      />
-    );
-  }
+  const styles = useStyles(tokens);
 
   return (
     <View style={styles.container}>
@@ -179,7 +130,17 @@ export function CreationsGalleryScreen({
         onShare={handleShare}
         onDelete={handleDelete}
         contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
-        ListEmptyComponent={renderEmptyComponent}
+        ListEmptyComponent={
+          <CreationsGalleryEmptyState
+            isLoading={isLoading}
+            hasCreations={!!creations && creations.length > 0}
+            config={config}
+            t={t}
+            emptyActionLabel={emptyActionLabel}
+            onEmptyAction={onEmptyAction}
+            clearFilters={clearFilters}
+          />
+        }
       />
 
       <CreationImageViewer
@@ -207,11 +168,4 @@ export function CreationsGalleryScreen({
 
 const useStyles = (tokens: any) => StyleSheet.create({
   container: { flex: 1, backgroundColor: tokens.colors.background },
-  centerContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: 400,
-    paddingHorizontal: tokens.spacing.xl
-  },
 });

package/src/domains/feature-background/presentation/components/GenerateButton.tsx

@@ -43,7 +43,7 @@ export const GenerateButton: React.FC<GenerateButtonProps> = memo(
                     <>
                         <AtomicIcon
                             name="sparkles"
-                            size={20}
+                            size="md"
                             color={disabled ? "surfaceVariant" : "onPrimary"}
                             style={styles.icon}
                         />

package/src/domains/feature-background/presentation/components/ImagePicker.tsx

@@ -44,7 +44,7 @@ export const ImagePicker: React.FC<ImagePickerProps> = memo(
                                 >
                                     <AtomicIcon
                                         name="image-plus"
-                                        size={20}
+                                        size="md"
                                         color="onPrimary"
                                     />
                                 </View>
@@ -65,7 +65,7 @@ export const ImagePicker: React.FC<ImagePickerProps> = memo(
                             >
                                 <AtomicIcon
                                     name="upload"
-                                    size={40}
+                                    size="lg"
                                     color="primary"
                                 />
                             </View>

package/src/domains/feature-background/presentation/components/ModeSelector.tsx

@@ -45,7 +45,7 @@ export const ModeSelector: React.FC<ModeSelectorProps> = memo(
                             >
                                 <AtomicIcon
                                     name={mode.icon}
-                                    size={20}
+                                    size="md"
                                     color={isActive ? "onPrimary" : "onSurface"}
                                 />
                             </TouchableOpacity>

package/src/domains/feature-background/presentation/components/ResultDisplay.tsx

@@ -47,7 +47,7 @@ export const ResultDisplay: React.FC<ResultDisplayProps> = memo(
                     >
                         <AtomicIcon
                             name="refresh-cw"
-                            size={20}
+                            size="md"
                             color="onSurface"
                         />
                         <AtomicText
@@ -67,7 +67,7 @@ export const ResultDisplay: React.FC<ResultDisplayProps> = memo(
                     >
                         <AtomicIcon
                             name="download"
-                            size={20}
+                            size="md"
                             color="onPrimary"
                         />
                         <AtomicText

package/src/presentation/components/result/ResultActions.tsx

@@ -40,7 +40,7 @@ export const ResultActions: React.FC<ResultActionsProps> = ({
     <View style={styles.container}>
       {onRetry && (
         <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
-          <AtomicIcon name="refresh" size={18} customColor={tokens.colors.primary} />
+          <AtomicIcon name="refresh" size="sm" customColor={tokens.colors.primary} />
           <AtomicText style={styles.retryText}>{translations.retry}</AtomicText>
         </TouchableOpacity>
       )}
@@ -54,7 +54,7 @@ export const ResultActions: React.FC<ResultActionsProps> = ({
           >
             <AtomicIcon
               name={isSharing ? "hourglass" : "share-social"}
-              size={22}
+              size="md"
               customColor="#fff"
             />
             <AtomicText style={styles.shareText}>
@@ -71,7 +71,7 @@ export const ResultActions: React.FC<ResultActionsProps> = ({
           >
             <AtomicIcon
               name={isSaving ? "hourglass" : "download"}
-              size={22}
+              size="md"
               customColor={tokens.colors.primary}
             />
             <AtomicText style={styles.saveText}>{translations.save}</AtomicText>

package/src/presentation/components/result/ResultHeader.tsx

@@ -29,7 +29,7 @@ export const ResultHeader: React.FC<ResultHeaderProps> = ({ title, date }) => {
         <View style={styles.badge}>
           <AtomicIcon
             name="calendar-outline"
-            size={14}
+            size="sm"
             customColor={tokens.colors.primary}
           />
           <AtomicText style={styles.dateText}>{date}</AtomicText>

package/src/presentation/components/result/ResultImageCard.tsx

@@ -28,7 +28,7 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
       <View style={styles.frame}>
         <Image source={{ uri: imageUrl }} style={styles.image} resizeMode="cover" />
         <View style={styles.badge}>
-          <AtomicIcon name="sparkles" size={12} customColor="#fff" />
+          <AtomicIcon name="sparkles" size="xs" customColor="#fff" />
           <AtomicText style={styles.badgeText}>{badgeText}</AtomicText>
         </View>
       </View>