@umituz/react-native-ai-generation-content 1.12.21 → 1.12.24

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

@@ -1,157 +0,0 @@
-import React from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { AtomicText, AtomicIcon, useAppDesignTokens } 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?: any;
-    readonly onFavoritesPress?: () => void;
-    readonly showOnlyFavorites?: boolean;
-    readonly style?: any;
-    readonly subtitle?: string;
-    readonly isFilterEnabled?: boolean;
-    readonly showCount?: boolean;
-}
-
-export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
-    title,
-    count,
-    countLabel,
-    isFiltered,
-    onFilterPress,
-    filterLabel = 'Filter',
-    filterIcon = 'filter-outline',
-    onFavoritesPress,
-    showOnlyFavorites = false,
-    subtitle,
-    isFilterEnabled = true,
-    showCount = true,
-    style,
-}) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    return (
-        <View style={[styles.headerArea, style]}>
-            <View style={styles.titleArea}>
-                {!!title && <AtomicText style={styles.title}>{title}</AtomicText>}
-                <AtomicText style={styles.subtitle}>
-                    {subtitle || (showCount ? `${count} ${countLabel}` : '')}
-                </AtomicText>
-            </View>
-            <View style={styles.actions}>
-                {onFavoritesPress && (
-                    <TouchableOpacity
-                        onPress={onFavoritesPress}
-                        style={[styles.actionButton, showOnlyFavorites && styles.actionButtonActive]}
-                        activeOpacity={0.7}
-                    >
-                        <AtomicIcon
-                            name={showOnlyFavorites ? "heart" : "heart-outline"}
-                            size="sm"
-                            color={showOnlyFavorites ? "error" : "secondary"}
-                        />
-                    </TouchableOpacity>
-                )}
-                {isFilterEnabled && (
-                    <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>
-        </View>
-    );
-};
-
-const useStyles = (tokens: any) => StyleSheet.create({
-    headerArea: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: 'space-between',
-        paddingHorizontal: tokens.spacing.md,
-        paddingVertical: tokens.spacing.sm,
-        marginBottom: tokens.spacing.sm,
-    },
-    titleArea: {
-        flex: 1,
-        marginRight: tokens.spacing.md,
-    },
-    title: {
-        fontSize: 20,
-        fontWeight: "700",
-        color: tokens.colors.textPrimary,
-        marginBottom: 4,
-    },
-    subtitle: {
-        fontSize: 14,
-        color: tokens.colors.textSecondary,
-        opacity: 0.6
-    },
-    actions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: tokens.spacing.sm,
-    },
-    actionButton: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: tokens.colors.surfaceVariant,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderWidth: 1,
-        borderColor: 'transparent',
-    },
-    actionButtonActive: {
-        backgroundColor: tokens.colors.primary + "15",
-        borderColor: tokens.colors.primary + "30",
-    },
-    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',
-        height: 40,
-    },
-    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

@@ -1,20 +0,0 @@
-/**
- * Presentation Components
- */
-
-export { GalleryHeader } from "./GalleryHeader";
-export { EmptyState } from "./EmptyState";
-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 { CreationsGalleryEmptyState } from "./CreationsGalleryEmptyState";
-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

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

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

@@ -1,33 +0,0 @@
-/**
- * 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: () => repository.getAll(userId!),
-    enabled: !!userId && enabled,
-    staleTime: CACHE_CONFIG.staleTime,
-    gcTime: CACHE_CONFIG.gcTime,
-  });
-}

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

@@ -1,90 +0,0 @@
-/**
- * useCreationsFilter Hook
- * Handles filtering of creations by type, search, and favorites
- */
-
-import { useState, useMemo, useCallback } from "react";
-import type { Creation } from "../../domain/entities/Creation";
-
-interface UseCreationsFilterProps {
-  readonly creations: Creation[] | undefined;
-  readonly defaultFilterId?: string;
-}
-
-export function useCreationsFilter({
-  creations,
-  defaultFilterId = "all"
-}: UseCreationsFilterProps) {
-  const [selectedIds, setSelectedIds] = useState<string[]>([defaultFilterId]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [showOnlyFavorites, setShowOnlyFavorites] = useState(false);
-
-  const filtered = useMemo(() => {
-    if (!creations) return [];
-
-    let result = creations;
-
-    // 1. Filter by Favorites
-    if (showOnlyFavorites) {
-      result = result.filter(c => c.isFavorite);
-    }
-
-    // 2. Filter by Category/Type
-    if (!selectedIds.includes(defaultFilterId)) {
-      result = result.filter((c) =>
-        selectedIds.includes(c.type) ||
-        selectedIds.some(id => (c as any).metadata?.tags?.includes(id))
-      );
-    }
-
-    // 3. Filter by Search Query
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      result = result.filter(c =>
-        c.prompt?.toLowerCase().includes(query) ||
-        c.type.toLowerCase().includes(query)
-      );
-    }
-
-    return result;
-  }, [creations, selectedIds, defaultFilterId, searchQuery, showOnlyFavorites]);
-
-  const toggleFilter = useCallback((filterId: string, multiSelect: boolean = false) => {
-    setSelectedIds(prev => {
-      if (filterId === defaultFilterId) return [defaultFilterId];
-
-      let newIds: string[];
-      if (!multiSelect) {
-        if (prev.includes(filterId) && prev.length === 1) return prev;
-        newIds = [filterId];
-      } else {
-        if (prev.includes(filterId)) {
-          newIds = prev.filter(id => id !== filterId);
-        } else {
-          newIds = [...prev.filter(id => id !== defaultFilterId), filterId];
-        }
-      }
-
-      if (newIds.length === 0) return [defaultFilterId];
-      return newIds;
-    });
-  }, [defaultFilterId]);
-
-  const clearFilters = useCallback(() => {
-    setSelectedIds([defaultFilterId]);
-    setSearchQuery("");
-    setShowOnlyFavorites(false);
-  }, [defaultFilterId]);
-
-  return {
-    filtered,
-    selectedIds,
-    searchQuery,
-    setSearchQuery,
-    showOnlyFavorites,
-    setShowOnlyFavorites,
-    toggleFilter,
-    clearFilters,
-    isFiltered: !selectedIds.includes(defaultFilterId) || !!searchQuery || showOnlyFavorites,
-  };
-}

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

@@ -1,51 +0,0 @@
-/**
- * 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/hooks/useDeleteMultipleCreations.ts

@@ -1,57 +0,0 @@
-/**
- * useDeleteMultipleCreations Hook
- * Handles batch 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 UseDeleteMultipleCreationsProps {
-    readonly userId: string | null;
-    readonly repository: ICreationsRepository;
-}
-
-export function useDeleteMultipleCreations({
-    userId,
-    repository,
-}: UseDeleteMultipleCreationsProps) {
-    const queryClient = useQueryClient();
-
-    return useMutation({
-        mutationFn: async (creationIds: string[]) => {
-            if (!userId) return false;
-            return repository.deleteMultiple(userId, creationIds);
-        },
-        onMutate: async (creationIds) => {
-            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) => !creationIds.includes(c.id)) ?? [],
-            );
-
-            return { previous };
-        },
-        onError: (_err, _ids, rollback) => {
-            if (userId && rollback?.previous) {
-                queryClient.setQueryData(["creations", userId], rollback.previous);
-            }
-        },
-        onSettled: () => {
-            if (userId) {
-                queryClient.invalidateQueries({ queryKey: ["creations", userId] });
-            }
-        },
-    });
-}

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

@@ -1,59 +0,0 @@
-/**
- * useToggleFavorite Hook
- * Handles favoriting/unfavoriting 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 UseToggleFavoriteProps {
-    readonly userId: string | null;
-    readonly repository: ICreationsRepository;
-}
-
-export function useToggleFavorite({
-    userId,
-    repository,
-}: UseToggleFavoriteProps) {
-    const queryClient = useQueryClient();
-
-    return useMutation({
-        mutationFn: async (creationId: string) => {
-            if (!userId) return false;
-            return repository.toggleFavorite(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?.map((c) =>
-                        c.id === creationId ? { ...c, isFavorite: !c.isFavorite } : c,
-                    ) ?? [],
-            );
-
-            return { previous };
-        },
-        onError: (_err, _id, rollback) => {
-            if (userId && rollback?.previous) {
-                queryClient.setQueryData(["creations", userId], rollback.previous);
-            }
-        },
-        onSettled: () => {
-            if (userId) {
-                queryClient.invalidateQueries({ queryKey: ["creations", userId] });
-            }
-        },
-    });
-}

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

@@ -1,71 +0,0 @@
-
-import React from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
-import { useAppDesignTokens } 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;
-}
-
-export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
-    creation,
-    onClose,
-    onShare,
-    onDelete,
-    t
-}) => {
-    const tokens = useAppDesignTokens();
-
-    // Extract data
-    const metadata = (creation as any).metadata || {};
-    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: any) => StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: tokens.colors.backgroundPrimary,
-    },
-    scrollContent: {
-        paddingBottom: tokens.spacing.xxl,
-    },
-});