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

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

@@ -1,157 +0,0 @@
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
-import { BottomSheetModal, type BottomSheetModalRef, useAppDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
-
-export interface FilterOption {
-    id: string;
-    label: string;
-    icon?: string;
-}
-
-export interface FilterCategory {
-    id: string;
-    title: string;
-    multiSelect?: boolean;
-    options: FilterOption[];
-}
-
-interface FilterBottomSheetProps {
-    categories: FilterCategory[];
-    selectedIds: string[];
-    onFilterPress: (id: string, categoryId: string) => void;
-    onClearFilters: () => void;
-    title: string;
-    snapPoints?: string[];
-}
-
-export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomSheetProps>((props, ref) => {
-    const { categories, selectedIds, onFilterPress, onClearFilters, title, snapPoints: propSnapPoints } = props;
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    const snapPoints = useMemo(() => propSnapPoints || ['50%', '75%'], [propSnapPoints]);
-
-    const renderOption = useCallback((option: FilterOption, category: FilterCategory) => {
-        const isSelected = selectedIds.includes(option.id);
-
-        return (
-            <TouchableOpacity
-                key={option.id}
-                style={[styles.option, isSelected && styles.optionSelected]}
-                onPress={() => onFilterPress(option.id, category.id)}
-            >
-                <View style={styles.optionContent}>
-                    {option.icon && (
-                        <View style={styles.optionIcon}>
-                            <AtomicIcon
-                                name={option.icon as any}
-                                size="sm"
-                                color={isSelected ? "primary" : "onSurface"}
-                            />
-                        </View>
-                    )}
-                    <AtomicText
-                        style={[styles.optionLabel, isSelected && styles.optionLabelSelected]}
-                    >
-                        {option.label}
-                    </AtomicText>
-                </View>
-                {isSelected && (
-                    <AtomicIcon name="check" size="sm" color="primary" />
-                )}
-            </TouchableOpacity>
-        );
-    }, [onFilterPress, selectedIds, styles]);
-
-    return (
-        <BottomSheetModal
-            ref={ref}
-            snapPoints={snapPoints}
-        >
-            <View style={styles.header}>
-                <AtomicText style={styles.headerTitle}>{title}</AtomicText>
-                <TouchableOpacity onPress={onClearFilters}>
-                    <AtomicText style={styles.clearButton}>Clear</AtomicText>
-                </TouchableOpacity>
-            </View>
-
-            <ScrollView contentContainerStyle={styles.content}>
-                {categories.map(category => (
-                    <View key={category.id} style={styles.categoryContainer}>
-                        <AtomicText style={styles.categoryTitle}>{category.title}</AtomicText>
-                        <View style={styles.optionsContainer}>
-                            {category.options.map(option => renderOption(option, category))}
-                        </View>
-                    </View>
-                ))}
-            </ScrollView>
-        </BottomSheetModal>
-    );
-});
-
-const useStyles = (tokens: any) => StyleSheet.create({
-    content: {
-        padding: tokens.spacing.md,
-        paddingBottom: tokens.spacing.xl,
-    },
-    header: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingHorizontal: tokens.spacing.md,
-        paddingBottom: tokens.spacing.sm,
-        borderBottomWidth: 1,
-        borderBottomColor: tokens.colors.outline,
-    },
-    headerTitle: {
-        fontSize: 20,
-        fontWeight: '700',
-        color: tokens.colors.textPrimary,
-    },
-    clearButton: {
-        color: tokens.colors.primary,
-        fontSize: 14,
-        fontWeight: '600',
-    },
-    categoryContainer: {
-        marginTop: tokens.spacing.md,
-    },
-    categoryTitle: {
-        marginBottom: tokens.spacing.xs,
-        color: tokens.colors.textSecondary,
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    optionsContainer: {
-        backgroundColor: tokens.colors.background,
-        borderRadius: tokens.borderRadius.md,
-        overflow: 'hidden',
-    },
-    option: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: tokens.spacing.md,
-        backgroundColor: tokens.colors.background,
-        borderBottomWidth: 1,
-        borderBottomColor: tokens.colors.surface,
-    },
-    optionSelected: {
-        backgroundColor: tokens.colors.surface,
-    },
-    optionContent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    optionIcon: {
-        marginRight: tokens.spacing.sm,
-    },
-    optionLabel: {
-        color: tokens.colors.text,
-        fontSize: 14,
-    },
-    optionLabelSelected: {
-        color: tokens.colors.primary,
-        fontWeight: 'bold',
-    },
-});

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

@@ -1,105 +0,0 @@
-/**
- * FilterChips Component
- * Displays filter chips for creation types
- */
-
-import React, { useMemo } from "react";
-import { View, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { CreationType } from "../../domain/value-objects/CreationsConfig";
-
-interface FilterChipsProps {
-  readonly types: readonly CreationType[];
-  readonly availableTypes: string[];
-  readonly selectedType: string;
-  readonly allLabel: string;
-  readonly onSelect: (type: string) => void;
-  readonly style?: any;
-}
-
-export function FilterChips({
-  types,
-  availableTypes,
-  selectedType,
-  allLabel,
-  onSelect,
-  style,
-}: FilterChipsProps) {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          marginBottom: tokens.spacing.md,
-        },
-        scrollContent: {
-          paddingHorizontal: tokens.spacing.md,
-          gap: tokens.spacing.sm,
-          flexDirection: "row",
-        },
-        chip: {
-          paddingHorizontal: tokens.spacing.md,
-          paddingVertical: tokens.spacing.sm,
-          borderRadius: tokens.spacing.lg,
-          backgroundColor: tokens.colors.backgroundSecondary,
-        },
-        chipSelected: {
-          backgroundColor: tokens.colors.primary,
-        },
-        chipText: {
-          ...tokens.typography.bodySmall,
-          color: tokens.colors.textSecondary,
-        },
-        chipTextSelected: {
-          color: tokens.colors.textInverse,
-        },
-      }),
-    [tokens],
-  );
-
-  const visibleTypes = types.filter((t) => availableTypes.includes(t.id));
-
-  return (
-    <View style={[styles.container, style]}>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.scrollContent}
-      >
-        <TouchableOpacity
-          style={[styles.chip, selectedType === "all" && styles.chipSelected]}
-          onPress={() => onSelect("all")}
-        >
-          <AtomicText
-            style={[
-              styles.chipText,
-              selectedType === "all" && styles.chipTextSelected,
-            ]}
-          >
-            {allLabel}
-          </AtomicText>
-        </TouchableOpacity>
-        {visibleTypes.map((type) => (
-          <TouchableOpacity
-            key={type.id}
-            style={[
-              styles.chip,
-              selectedType === type.id && styles.chipSelected,
-            ]}
-            onPress={() => onSelect(type.id)}
-          >
-            <AtomicText
-              style={[
-                styles.chipText,
-                selectedType === type.id && styles.chipTextSelected,
-              ]}
-            >
-              {type.icon} {type.labelKey}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
-  );
-}

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] });
-            }
-        },
-    });
-}