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

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet, type ViewStyle } from 'react-native';
+import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+
+interface GalleryHeaderProps {
+    readonly title: string;
+    readonly count: number;
+    readonly countLabel: string;
+    readonly isFiltered: boolean;
+    readonly onFilterPress: () => void;
+    readonly filterLabel?: string;
+    readonly filterIcon?: string;
+    readonly style?: ViewStyle;
+}
+
+export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
+    title,
+    count,
+    countLabel,
+    isFiltered,
+    onFilterPress,
+    filterLabel = 'Filter',
+    filterIcon = 'filter-outline',
+    style,
+}) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    return (
+        <View style={[styles.headerArea, style]}>
+            <View>
+                <AtomicText style={styles.title}>{title}</AtomicText>
+                <AtomicText style={styles.subtitle}>
+                    {count} {countLabel}
+                </AtomicText>
+            </View>
+            <TouchableOpacity
+                onPress={onFilterPress}
+                style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
+                activeOpacity={0.7}
+            >
+                <AtomicIcon
+                    name={filterIcon}
+                    size="sm"
+                    color={isFiltered ? "primary" : "secondary"}
+                />
+                <AtomicText style={[styles.filterText, { color: isFiltered ? tokens.colors.primary : tokens.colors.textSecondary }]}>
+                    {filterLabel}
+                </AtomicText>
+                {isFiltered && (
+                    <View style={styles.badge} />
+                )}
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const useStyles = (tokens: DesignTokens) => StyleSheet.create({
+    headerArea: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: 'space-between',
+        paddingHorizontal: tokens.spacing.md,
+        paddingVertical: tokens.spacing.sm,
+        marginBottom: tokens.spacing.sm,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: "700",
+        color: tokens.colors.textPrimary,
+        marginBottom: 4,
+    },
+    subtitle: {
+        fontSize: 14,
+        color: tokens.colors.textSecondary,
+        opacity: 0.6
+    },
+    filterButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: tokens.spacing.xs,
+        paddingVertical: tokens.spacing.xs,
+        paddingHorizontal: tokens.spacing.md,
+        borderRadius: 999,
+        backgroundColor: tokens.colors.surfaceVariant,
+        borderWidth: 1,
+        borderColor: 'transparent',
+    },
+    filterButtonActive: {
+        backgroundColor: tokens.colors.primary + "15",
+        borderColor: tokens.colors.primary + "30",
+    },
+    filterText: {
+        fontSize: 14,
+        fontWeight: "500",
+    },
+    badge: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: tokens.colors.primary,
+        position: 'absolute',
+        top: 6,
+        right: 6,
+    },
+});

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

@@ -0,0 +1,20 @@
+/**
+ * Presentation Components
+ */
+
+export { GalleryHeader } from "./GalleryHeader";
+export { EmptyState } from "./EmptyState";
+export { GalleryEmptyStates } from "./GalleryEmptyStates";
+export { FilterChips } from "./FilterChips";
+export { CreationsHomeCard } from "./CreationsHomeCard";
+export { CreationCard } from "./CreationCard";
+export { CreationThumbnail } from "./CreationThumbnail";
+export { CreationImageViewer } from "./CreationImageViewer";
+export { CreationsGrid } from "./CreationsGrid";
+export { FilterBottomSheet, type FilterCategory, type FilterOption } from "./FilterBottomSheet";
+
+// Detail Components
+export { DetailHeader } from "./CreationDetail/DetailHeader";
+export { DetailImage } from "./CreationDetail/DetailImage";
+export { DetailStory } from "./CreationDetail/DetailStory";
+export { DetailActions } from "./CreationDetail/DetailActions";

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

@@ -0,0 +1,7 @@
+/**
+ * Presentation Hooks
+ */
+
+export { useCreations } from "./useCreations";
+export { useDeleteCreation } from "./useDeleteCreation";
+export { useCreationsFilter } from "./useCreationsFilter";

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

@@ -0,0 +1,38 @@
+/**
+ * useCreations Hook
+ * Fetches user's creations from repository
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+import type { Creation } from "../../domain/entities/Creation";
+
+const CACHE_CONFIG = {
+  staleTime: 5 * 60 * 1000, // 5 minutes - use cache invalidation on mutations
+  gcTime: 30 * 60 * 1000,
+};
+
+interface UseCreationsProps {
+  readonly userId: string | null;
+  readonly repository: ICreationsRepository;
+  readonly enabled?: boolean;
+}
+
+export function useCreations({
+  userId,
+  repository,
+  enabled = true,
+}: UseCreationsProps) {
+  return useQuery<Creation[]>({
+    queryKey: ["creations", userId ?? ""],
+    queryFn: async () => {
+      if (!userId) {
+        return [];
+      }
+      return repository.getAll(userId);
+    },
+    enabled: !!userId && enabled,
+    staleTime: CACHE_CONFIG.staleTime,
+    gcTime: CACHE_CONFIG.gcTime,
+  });
+}

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,194 @@
+import React, { useMemo, useCallback, useState } from "react";
+import { View, StyleSheet, 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, CreationsGrid, FilterBottomSheet, CreationImageViewer, GalleryEmptyStates } 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);
+
+  const renderEmptyComponent = useMemo(() => (
+    <GalleryEmptyStates
+      isLoading={isLoading}
+      creations={creations}
+      isFiltered={isFiltered}
+      tokens={tokens}
+      t={t}
+      emptyTitle={t(config.translations.empty)}
+      emptyDescription={t(config.translations.emptyDescription)}
+      emptyActionLabel={emptyActionLabel}
+      onEmptyAction={onEmptyAction}
+      onClearFilters={clearFilters}
+    />
+  ), [isLoading, creations, isFiltered, tokens, t, config, emptyActionLabel, onEmptyAction, clearFilters]);
+
+  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";