@umituz/react-native-ai-generation-content 1.12.25 → 1.12.26

package/src/domains/creations/presentation/hooks/useCreationsFilter.ts

@@ -0,0 +1,77 @@
+/**
+ * useCreationsFilter Hook
+ * Handles filtering of creations by type
+ */
+
+import { useState, useMemo, useCallback } from "react";
+import type { Creation } from "../../domain/entities/Creation";
+
+interface UseCreationsFilterProps {
+  readonly creations: Creation[] | undefined;
+  readonly defaultFilterId?: string;
+}
+
+interface CreationWithTags extends Creation {
+  readonly metadata?: {
+    readonly tags?: string[];
+    readonly [key: string]: unknown;
+  };
+}
+
+export function useCreationsFilter({
+  creations,
+  defaultFilterId = "all"
+}: UseCreationsFilterProps) {
+  const [selectedIds, setSelectedIds] = useState<string[]>([defaultFilterId]);
+
+  const filtered = useMemo(() => {
+    if (!creations) return [];
+    if (selectedIds.includes(defaultFilterId)) return creations;
+
+    return creations.filter((c) => {
+      const creation = c as CreationWithTags;
+      return (
+        selectedIds.includes(creation.type) ||
+        selectedIds.some(id => creation.metadata?.tags?.includes(id))
+      );
+    });
+  }, [creations, selectedIds, defaultFilterId]);
+
+  const toggleFilter = useCallback((filterId: string, multiSelect = false) => {
+    setSelectedIds(prev => {
+      // If selecting 'all', clear everything else
+      if (filterId === defaultFilterId) return [defaultFilterId];
+
+      let newIds: string[];
+      if (!multiSelect) {
+        // Single select
+        if (prev.includes(filterId) && prev.length === 1) return prev;
+        newIds = [filterId];
+      } else {
+        // Multi select
+        if (prev.includes(filterId)) {
+          newIds = prev.filter(id => id !== filterId);
+        } else {
+          // Remove 'all' if present
+          newIds = [...prev.filter(id => id !== defaultFilterId), filterId];
+        }
+      }
+
+      // If nothing selected, revert to 'all'
+      if (newIds.length === 0) return [defaultFilterId];
+      return newIds;
+    });
+  }, [defaultFilterId]);
+
+  const clearFilters = useCallback(() => {
+    setSelectedIds([defaultFilterId]);
+  }, [defaultFilterId]);
+
+  return {
+    filtered,
+    selectedIds,
+    toggleFilter,
+    clearFilters,
+    isFiltered: !selectedIds.includes(defaultFilterId),
+  };
+}

package/src/domains/creations/presentation/hooks/useDeleteCreation.ts

@@ -0,0 +1,51 @@
+/**
+ * useDeleteCreation Hook
+ * Handles deletion of user creations with optimistic update
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+import type { Creation } from "../../domain/entities/Creation";
+
+interface UseDeleteCreationProps {
+  readonly userId: string | null;
+  readonly repository: ICreationsRepository;
+}
+
+export function useDeleteCreation({
+  userId,
+  repository,
+}: UseDeleteCreationProps) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (creationId: string) => {
+      if (!userId) return false;
+      return repository.delete(userId, creationId);
+    },
+    onMutate: async (creationId) => {
+      if (!userId) return;
+
+      await queryClient.cancelQueries({
+        queryKey: ["creations", userId],
+      });
+
+      const previous = queryClient.getQueryData<Creation[]>([
+        "creations",
+        userId,
+      ]);
+
+      queryClient.setQueryData<Creation[]>(
+        ["creations", userId],
+        (old) => old?.filter((c) => c.id !== creationId) ?? [],
+      );
+
+      return { previous };
+    },
+    onError: (_err, _id, rollback) => {
+      if (userId && rollback?.previous) {
+        queryClient.setQueryData(["creations", userId], rollback.previous);
+      }
+    },
+  });
+}

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

@@ -0,0 +1,78 @@
+
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { useAppDesignTokens, type DesignTokens } 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;
+}
+
+interface CreationMetadata {
+    readonly names?: string;
+    readonly story?: string;
+    readonly description?: string;
+    readonly date?: string;
+}
+
+export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
+    creation,
+    onClose,
+    onShare,
+    onDelete,
+    t
+}) => {
+    const tokens = useAppDesignTokens();
+
+    // Extract data safely
+    const metadata = (creation.metadata || {}) as CreationMetadata;
+    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: DesignTokens) => StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: tokens.colors.background,
+    },
+    scrollContent: {
+        paddingBottom: tokens.spacing.xxl,
+    },
+});

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

@@ -0,0 +1,217 @@
+import React, { useMemo, useCallback, useState } from "react";
+import { View, StyleSheet, ActivityIndicator, type LayoutChangeEvent } from "react-native";
+import { useAppDesignTokens, useAlert, AlertType, AlertMode, useSharing, type DesignTokens } from "@umituz/react-native-design-system";
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useFocusEffect } from "@react-navigation/native";
+import { useCreations } from "../hooks/useCreations";
+import { useDeleteCreation } from "../hooks/useDeleteCreation";
+import { useCreationsFilter } from "../hooks/useCreationsFilter";
+import { GalleryHeader, EmptyState, CreationsGrid, FilterBottomSheet, CreationImageViewer } from "../components";
+import { getTranslatedTypes, getFilterCategoriesFromConfig } from "../utils/filterUtils";
+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 {
+  readonly userId: string | null;
+  readonly repository: ICreationsRepository;
+  readonly config: CreationsConfig;
+  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({
+  userId,
+  repository,
+  config,
+  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 [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
+  const filterSheetRef = React.useRef<BottomSheetModal>(null);
+
+  const { data: creationsData, isLoading, refetch } = useCreations({ userId, repository });
+  const creations = creationsData;
+  const deleteMutation = useDeleteCreation({ userId, repository });
+  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
+
+  // Refetch creations when screen comes into focus
+  useFocusEffect(
+    useCallback(() => {
+      void refetch();
+    }, [refetch])
+  );
+
+  // Prepare data for UI using utils
+  const translatedTypes = useMemo(() => getTranslatedTypes(config, t), [config, t]);
+  const allCategories = useMemo(() => getFilterCategoriesFromConfig(config, t), [config, t]);
+
+  const handleShare = useCallback((creation: Creation) => {
+    void share(creation.uri, { dialogTitle: t("common.share") });
+  }, [share, t]);
+
+  const handleDelete = useCallback((creation: Creation) => {
+    alert.show(
+      AlertType.WARNING,
+      AlertMode.MODAL,
+      t(config.translations.deleteTitle),
+      t(config.translations.deleteMessage),
+      {
+        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
+  const handleView = useCallback((creation: Creation) => {
+    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)
+    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)
+    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 handleLayout = (event: LayoutChangeEvent) => {
+    // Keep internal logic if needed, currently empty but handles the event correctly
+    void event;
+  };
+
+  return (
+    <View style={styles.container} onLayout={handleLayout}>
+      {(!creations || creations?.length === 0) && !isLoading ? null : (
+        <GalleryHeader
+          title={t(config.translations.title) || 'My Creations'}
+          count={filtered.length}
+          countLabel={t(config.translations.photoCount) || 'photos'}
+          isFiltered={isFiltered}
+          filterLabel={t(config.translations.filterLabel) || 'Filter'}
+          onFilterPress={() => filterSheetRef.current?.present()}
+          style={{ paddingTop: insets.top + tokens.spacing.md }}
+        />
+      )}
+
+      {/* Main Content Grid - handles empty/loading via ListEmptyComponent */}
+      <CreationsGrid
+        creations={filtered}
+        types={translatedTypes}
+        isLoading={isLoading}
+        onRefresh={() => void refetch()}
+        onView={handleView}
+        onShare={handleShare}
+        onDelete={handleDelete}
+        contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
+        ListEmptyComponent={renderEmptyComponent}
+      />
+
+      <CreationImageViewer
+        creations={filtered}
+        visible={viewerVisible}
+        index={viewerIndex}
+        onDismiss={() => setViewerVisible(false)}
+        onIndexChange={setViewerIndex}
+        enableEditing={enableEditing}
+        onImageEdit={onImageEdit}
+        selectedCreationId={selectedCreation?.id}
+      />
+
+      <FilterBottomSheet
+        ref={filterSheetRef}
+        categories={allCategories}
+        selectedIds={selectedIds}
+        onFilterPress={(id, catId) => {
+          const category = allCategories.find(c => c.id === catId);
+          toggleFilter(id, category?.multiSelect);
+        }}
+        onClearFilters={clearFilters}
+        title={t(config.translations.filterTitle) || t("common.filter")}
+      />
+    </View>
+  );
+}
+
+const useStyles = (tokens: DesignTokens) => 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/creations/presentation/screens/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Presentation Screens
+ */
+
+export { CreationsGalleryScreen } from "./CreationsGalleryScreen";

package/src/domains/creations/presentation/utils/filterUtils.ts

@@ -0,0 +1,52 @@
+import { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
+import { FilterCategory } from "../components/FilterBottomSheet";
+
+/**
+ * Transforms the creations configuration into filter categories for the UI.
+ * 
+ * @param config The creations configuration object
+ * @param t Translation function
+ * @returns Array of FilterCategory
+ */
+export const getFilterCategoriesFromConfig = (
+    config: CreationsConfig,
+    t: (key: string) => string
+): FilterCategory[] => {
+    const categories: FilterCategory[] = [];
+
+    if (config.types.length > 0) {
+        categories.push({
+            id: 'type',
+            title: t(config.translations.filterTitle),
+            multiSelect: false,
+            options: config.types.map(type => ({
+                id: type.id,
+                label: t(type.labelKey),
+                icon: type.icon || 'image'
+            }))
+        });
+    }
+
+    if (config.filterCategories) {
+        categories.push(...config.filterCategories);
+    }
+
+    return categories;
+};
+
+/**
+ * Translates the creation types for display.
+ * 
+ * @param config The creations configuration object
+ * @param t Translation function
+ * @returns Array of types with translated labels
+ */
+export const getTranslatedTypes = (
+    config: CreationsConfig,
+    t: (key: string) => string
+) => {
+    return config.types.map(type => ({
+        ...type,
+        labelKey: t(type.labelKey)
+    }));
+};

package/src/domains/creations/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Type declarations for external modules
+ */
+
+declare module "@umituz/react-native-firestore" {
+  import type { Firestore } from "firebase/firestore";
+
+  export class BaseRepository {
+    protected getDb(): Firestore | null;
+    protected getDbOrThrow(): Firestore;
+    protected isDbInitialized(): boolean;
+    protected isQuotaError(error: unknown): boolean;
+    protected handleQuotaError(error: unknown): never;
+    protected executeWithQuotaHandling<T>(
+      operation: () => Promise<T>,
+    ): Promise<T>;
+    protected trackRead(
+      collection: string,
+      count: number,
+      cached: boolean,
+    ): void;
+    protected trackWrite(
+      collection: string,
+      docId: string,
+      count: number,
+    ): void;
+    protected trackDelete(
+      collection: string,
+      docId: string,
+      count: number,
+    ): void;
+    destroy(): void;
+  }
+
+  export function getFirestore(): Firestore | null;
+  export function initializeFirestore(app: unknown): void;
+  export function isFirestoreInitialized(): boolean;
+}
+
+declare module "@umituz/react-native-sentry";
+declare module "expo-apple-authentication";
+declare module "@umituz/react-native-filesystem";

package/src/features/background/presentation/components/ComparisonSlider.tsx

@@ -129,7 +129,7 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
                         <View style={[styles.label, styles.labelLeft, themedStyles.labelLeft]}>
                             <AtomicText
                                 
-                                color="textPrimary"
+                               
                             >
                                 {beforeLabel}
                             </AtomicText>
@@ -140,7 +140,7 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
                         <View style={[styles.label, styles.labelRight, themedStyles.labelRight]}>
                             <AtomicText
                                 
-                                color="backgroundPrimary"
+                               
                             >
                                 {afterLabel}
                             </AtomicText>

package/src/features/background/presentation/components/ErrorDisplay.tsx

@@ -31,11 +31,11 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = memo(
                 <AtomicIcon
                     name="alert-circle"
                     size="sm"
-                    color="error"
+                   
                 />
                 <AtomicText
                     
-                    color="error"
+                   
                     style={styles.errorText}
                 >
                     {error}

package/src/features/background/presentation/components/GenerateButton.tsx

@@ -45,10 +45,8 @@ export const GenerateButton: React.FC<GenerateButtonProps> = memo(
                             name="sparkles"
                             size="md"
                             color={disabled ? "surfaceVariant" : "onPrimary"}
-                            style={styles.icon}
                         />
                         <AtomicText
-                            
                             style={[
                                 styles.text,
                                 {

package/src/features/background/presentation/components/ImagePicker.tsx

@@ -45,7 +45,7 @@ export const ImagePicker: React.FC<ImagePickerProps> = memo(
                                     <AtomicIcon
                                         name="image-plus"
                                         size="md"
-                                        color="onPrimary"
+                                       
                                     />
                                 </View>
                             </View>
@@ -66,7 +66,7 @@ export const ImagePicker: React.FC<ImagePickerProps> = memo(
                                 <AtomicIcon
                                     name="upload"
                                     size="lg"
-                                    color="primary"
+                                   
                                 />
                             </View>
                             <AtomicText

package/src/features/background/presentation/components/ResultDisplay.tsx

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

package/src/index.ts

@@ -234,6 +234,12 @@ export * from "./domains/prompts";
 
 export * from "./domains/content-moderation";
 
+// =============================================================================
+// DOMAINS - Creations
+// =============================================================================
+
+export * from "./domains/creations";
+
 // =============================================================================
 // DOMAINS - Face Detection
 // =============================================================================

package/src/presentation/components/GenerationProgressContent.tsx

@@ -45,11 +45,11 @@ export const GenerationProgressContent: React.FC<
         return (
             <View style={[styles.modal, { backgroundColor: activeBgColor }]}>
                 {title && (
-                    <AtomicText type="bodyMedium" style={[styles.title, { color: activeTextColor }]}>{title}</AtomicText>
+                    <AtomicText style={[styles.title, { color: activeTextColor }]}>{title}</AtomicText>
                 )}
 
                 {message && (
-                    <AtomicText type="bodyMedium" style={[styles.message, { color: activeTextColor }]}>
+                    <AtomicText style={[styles.message, { color: activeTextColor }]}>
                         {message}
                     </AtomicText>
                 )}
@@ -62,7 +62,7 @@ export const GenerationProgressContent: React.FC<
                 />
 
                 {hint && (
-                    <AtomicText type="bodyMedium" style={[styles.hint, { color: activeTextColor }]}>{hint}</AtomicText>
+                    <AtomicText style={[styles.hint, { color: activeTextColor }]}>{hint}</AtomicText>
                 )}
 
                 {onDismiss && (
@@ -73,7 +73,7 @@ export const GenerationProgressContent: React.FC<
                         ]}
                         onPress={onDismiss}
                     >
-                        <AtomicText type="bodyMedium" style={styles.dismissText}>{dismissLabel || "OK"}</AtomicText>
+                        <AtomicText style={styles.dismissText}>{dismissLabel || "OK"}</AtomicText>
                     </TouchableOpacity>
                 )}
             </View>

package/src/presentation/components/PendingJobCard.tsx

@@ -106,8 +106,8 @@ export function PendingJobCard<TInput = unknown, TResult = unknown>({
       )}
       <View style={styles.content}>
         <View>
-          {typeLabel && <AtomicText type="bodyMedium" style={styles.typeText}>{typeLabel}</AtomicText>}
-          <AtomicText type="bodyMedium" style={styles.statusText} numberOfLines={1}>
+          {typeLabel && <AtomicText style={styles.typeText}>{typeLabel}</AtomicText>}
+          <AtomicText style={styles.statusText}>
             {statusText}
           </AtomicText>
           {!isFailed && <PendingJobProgressBar progress={job.progress} />}