@umituz/react-native-ai-generation-content 1.12.4 → 1.12.5

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

@@ -0,0 +1,106 @@
+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 style?: any;
+}
+
+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: any) => 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,19 @@
+/**
+ * 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 { 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,33 @@
+/**
+ * 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

@@ -0,0 +1,70 @@
+/**
+ * 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;
+}
+
+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) =>
+      selectedIds.includes(c.type) ||
+      selectedIds.some(id => (c as any).metadata?.tags?.includes(id))
+    );
+  }, [creations, selectedIds, defaultFilterId]);
+
+  const toggleFilter = useCallback((filterId: string, multiSelect: boolean = false) => {
+    setSelectedIds(prev => {
+      // If selecting 'all', clear everything else
+      if (filterId === defaultFilterId) return [defaultFilterId];
+
+      let newIds: string[];
+      if (!multiSelect) {
+        // Single select
+        // If we tap the already selected item in single mode, should we Deselect it? 
+        // Typically in radio-button style filters, no. But let's assume valid toggling behavior suitable for the UI.
+        // If single select, simply switch to the new one.
+        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,71 @@
+
+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,
+    },
+});

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

@@ -0,0 +1,217 @@
+import React, { useMemo, useCallback, useState } from "react";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useSharing } from "@umituz/react-native-sharing";
+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 { useAlert } from "@umituz/react-native-alert";
+import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
+import { GalleryHeader, EmptyState, CreationsGrid, FilterBottomSheet, CreationImageViewer, type FilterCategory } 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<BottomSheetModalRef>(null);
+
+  const { data: creationsData, isLoading, refetch } = useCreations({ userId, repository });
+  const creations = creationsData as Creation[] | undefined;
+  const deleteMutation = useDeleteCreation({ userId, repository });
+  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
+
+  // Refetch creations when screen comes into focus
+  useFocusEffect(
+    useCallback(() => {
+      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(async (creation: Creation) => {
+    share(creation.uri, { dialogTitle: t("common.share") });
+  }, [share, t]);
+
+  const handleDelete = useCallback(async (creation: Creation) => {
+    alert.show({
+      title: t(config.translations.deleteTitle),
+      message: t(config.translations.deleteMessage),
+      type: 'warning' as any,
+      actions: [
+        { id: 'cancel', label: t("common.cancel"), onPress: () => { } },
+        {
+          id: 'delete', label: t("common.delete"), variant: 'danger' as any, 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)
+    // 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}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Header is always shown unless we are in "System Empty" without data? 
+          User requested: "herhangi bir creations yoksa buradaki no creations gözükmeli" (if no creations, show no creations).
+          Currently we show header always, except logic below might hide it. 
+          Actually, let's keep header always visible IF we have creations. 
+          If !creations, we pass `renderEmptyComponent`, but Grid has header support. 
+          
+          However, to match previous request "filter gözükebilir" (filter can be visible), we'll keep header outside.
+          BUT, if NO creations, showing filter header is weird. 
+          
+          Let's conditonally render header: Only if we have creations OR loading. 
+          If loaded and 0 creations -> Hide header (Clean Empty State).
+      */}
+      {(!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={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 as Creation | null)?.id}
+      />
+
+      <FilterBottomSheet
+        ref={filterSheetRef}
+        categories={allCategories}
+        selectedIds={selectedIds}
+        onFilterPress={(id, catId) => toggleFilter(id, allCategories.find(c => c.id === catId)?.multiSelect)}
+        onClearFilters={clearFilters}
+        title={t(config.translations.filterTitle) || t("common.filter")}
+      />
+    </View>
+  );
+}
+
+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/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)
+    }));
+};