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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.12.8",
+  "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": [
@@ -73,7 +73,7 @@
     "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"
   },

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

@@ -9,7 +9,7 @@ import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
 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";
@@ -91,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}>
@@ -181,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
@@ -209,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>