@umituz/react-native-ai-creations 1.0.0

package/src/presentation/components/CreationsHomeCard.tsx

@@ -0,0 +1,176 @@
+/**
+ * CreationsHomeCard Component
+ * Shows user's creations preview on home screen
+ */
+
+declare const __DEV__: boolean;
+
+import React, { useMemo, useCallback } from "react";
+import { View, TouchableOpacity, FlatList, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { Creation } from "../../domain/entities/Creation";
+import { CreationThumbnail } from "./CreationThumbnail";
+
+interface CreationsHomeCardProps {
+  readonly creations: Creation[] | undefined;
+  readonly isLoading: boolean;
+  readonly title: string;
+  readonly countLabel: string;
+  readonly loadingLabel: string;
+  readonly maxThumbnails?: number;
+  readonly onPress: () => void;
+}
+
+export function CreationsHomeCard({
+  creations,
+  isLoading,
+  title,
+  countLabel,
+  loadingLabel,
+  maxThumbnails = 4,
+  onPress,
+}: CreationsHomeCardProps) {
+  const tokens = useAppDesignTokens();
+
+  if (__DEV__) {
+    console.log("[CreationsHomeCard] Render:", {
+      isLoading,
+      count: creations?.length ?? 0,
+    });
+  }
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          backgroundColor: tokens.colors.surface,
+          borderRadius: tokens.spacing.md,
+          padding: tokens.spacing.md,
+        },
+        header: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: tokens.spacing.md,
+        },
+        headerLeft: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tokens.spacing.sm,
+        },
+        icon: {
+          fontSize: 20,
+        },
+        title: {
+          ...tokens.typography.bodyLarge,
+          fontWeight: "600",
+          color: tokens.colors.textPrimary,
+        },
+        viewAll: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tokens.spacing.xs,
+        },
+        count: {
+          ...tokens.typography.bodySmall,
+          color: tokens.colors.textSecondary,
+        },
+        thumbnailList: {
+          gap: tokens.spacing.sm,
+        },
+        loadingText: {
+          ...tokens.typography.bodySmall,
+          color: tokens.colors.textSecondary,
+          textAlign: "center",
+          padding: tokens.spacing.md,
+        },
+        moreBadge: {
+          width: 72,
+          height: 72,
+          borderRadius: tokens.spacing.sm,
+          backgroundColor: tokens.colors.backgroundSecondary,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        moreText: {
+          ...tokens.typography.bodySmall,
+          fontWeight: "600",
+          color: tokens.colors.primary,
+        },
+      }),
+    [tokens],
+  );
+
+  const displayItems = useMemo(() => {
+    if (!creations) return [];
+    return creations.slice(0, maxThumbnails);
+  }, [creations, maxThumbnails]);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: Creation; index: number }) => {
+      const isLast = index === maxThumbnails - 1;
+      const hasMore = creations && creations.length > maxThumbnails;
+
+      if (isLast && hasMore) {
+        return (
+          <TouchableOpacity style={styles.moreBadge} onPress={onPress}>
+            <AtomicText style={styles.moreText}>
+              +{creations.length - maxThumbnails + 1}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      }
+
+      return <CreationThumbnail uri={item.uri} onPress={onPress} />;
+    },
+    [styles, creations, maxThumbnails, onPress],
+  );
+
+  if (isLoading) {
+    return (
+      <View style={styles.container}>
+        <AtomicText style={styles.loadingText}>{loadingLabel}</AtomicText>
+      </View>
+    );
+  }
+
+  if (!creations || creations.length === 0) {
+    return null;
+  }
+
+  const count = creations.length;
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      <View style={styles.header}>
+        <View style={styles.headerLeft}>
+          <AtomicText style={styles.icon}>🎨</AtomicText>
+          <AtomicText style={styles.title}>{title}</AtomicText>
+        </View>
+        <TouchableOpacity style={styles.viewAll} onPress={onPress}>
+          <AtomicText style={styles.count}>
+            {countLabel.replace("{{count}}", String(count))}
+          </AtomicText>
+          <AtomicIcon name="chevron-forward" size="sm" color="primary" />
+        </TouchableOpacity>
+      </View>
+      <FlatList
+        data={displayItems}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.thumbnailList}
+        scrollEnabled={false}
+      />
+    </TouchableOpacity>
+  );
+}

package/src/presentation/components/EmptyState.tsx

@@ -0,0 +1,58 @@
+/**
+ * EmptyState Component
+ * Displays when no creations exist
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface EmptyStateProps {
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: string;
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon = "🎨",
+}: EmptyStateProps) {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          padding: tokens.spacing.xl,
+        },
+        icon: {
+          fontSize: 48,
+          marginBottom: tokens.spacing.md,
+        },
+        title: {
+          ...tokens.typography.headingSmall,
+          color: tokens.colors.textPrimary,
+          textAlign: "center",
+          marginBottom: tokens.spacing.sm,
+        },
+        description: {
+          ...tokens.typography.bodyMedium,
+          color: tokens.colors.textSecondary,
+          textAlign: "center",
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      <AtomicText style={styles.icon}>{icon}</AtomicText>
+      <AtomicText style={styles.title}>{title}</AtomicText>
+      <AtomicText style={styles.description}>{description}</AtomicText>
+    </View>
+  );
+}

package/src/presentation/components/FilterChips.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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;
+}
+
+export function FilterChips({
+  types,
+  availableTypes,
+  selectedType,
+  allLabel,
+  onSelect,
+}: 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}>
+      <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/presentation/components/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Presentation Components
+ */
+
+export { CreationThumbnail } from "./CreationThumbnail";
+export { CreationCard } from "./CreationCard";
+export { CreationsHomeCard } from "./CreationsHomeCard";
+export { FilterChips } from "./FilterChips";
+export { EmptyState } from "./EmptyState";

package/src/presentation/hooks/index.ts

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

package/src/presentation/hooks/useCreations.ts

@@ -0,0 +1,44 @@
+/**
+ * useCreations Hook
+ * Fetches user's creations from repository
+ */
+
+declare const __DEV__: boolean;
+
+import { useQuery } from "@tanstack/react-query";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+
+const CACHE_CONFIG = {
+  staleTime: 5 * 60 * 1000,
+  gcTime: 30 * 60 * 1000,
+};
+
+interface UseCreationsProps {
+  readonly userId: string | null;
+  readonly repository: ICreationsRepository;
+  readonly enabled?: boolean;
+}
+
+export function useCreations({
+  userId,
+  repository,
+  enabled = true,
+}: UseCreationsProps) {
+  const result = useQuery({
+    queryKey: ["creations", userId ?? ""],
+    queryFn: () => repository.getAll(userId!),
+    enabled: !!userId && enabled,
+    staleTime: CACHE_CONFIG.staleTime,
+    gcTime: CACHE_CONFIG.gcTime,
+  });
+
+  if (__DEV__) {
+    console.log("[useCreations] State:", {
+      isLoading: result.isLoading,
+      count: result.data?.length ?? 0,
+      enabled: !!userId && enabled,
+    });
+  }
+
+  return result;
+}

package/src/presentation/hooks/useCreationsFilter.ts

@@ -0,0 +1,46 @@
+/**
+ * useCreationsFilter Hook
+ * Handles filtering of creations by type
+ */
+
+import { useState, useMemo, useCallback } from "react";
+import type { Creation } from "../../domain/entities/Creation";
+
+const ALL_FILTER = "all";
+
+interface UseCreationsFilterProps {
+  readonly creations: Creation[] | undefined;
+}
+
+export function useCreationsFilter({ creations }: UseCreationsFilterProps) {
+  const [selectedType, setSelectedType] = useState<string>(ALL_FILTER);
+
+  const availableTypes = useMemo(() => {
+    if (!creations) return [];
+    const types = new Set(creations.map((c) => c.type));
+    return Array.from(types);
+  }, [creations]);
+
+  const filtered = useMemo(() => {
+    if (!creations) return [];
+    if (selectedType === ALL_FILTER) return creations;
+    return creations.filter((c) => c.type === selectedType);
+  }, [creations, selectedType]);
+
+  const selectType = useCallback((type: string) => {
+    setSelectedType(type);
+  }, []);
+
+  const resetFilter = useCallback(() => {
+    setSelectedType(ALL_FILTER);
+  }, []);
+
+  return {
+    filtered,
+    selectedType,
+    availableTypes,
+    selectType,
+    resetFilter,
+    isFiltered: selectedType !== ALL_FILTER,
+  };
+}

package/src/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/presentation/screens/CreationsGalleryScreen.tsx

@@ -0,0 +1,154 @@
+/**
+ * CreationsGalleryScreen
+ * Full gallery view with filtering
+ */
+
+declare const __DEV__: boolean;
+
+import React, { useMemo, useCallback } from "react";
+import { View, FlatList, StyleSheet, RefreshControl, Alert } 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 type { Creation } from "../../domain/entities/Creation";
+import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+import { useCreations } from "../hooks/useCreations";
+import { useDeleteCreation } from "../hooks/useDeleteCreation";
+import { useCreationsFilter } from "../hooks/useCreationsFilter";
+import { CreationCard } from "../components/CreationCard";
+import { FilterChips } from "../components/FilterChips";
+import { EmptyState } from "../components/EmptyState";
+
+interface CreationsGalleryScreenProps {
+  readonly userId: string | null;
+  readonly repository: ICreationsRepository;
+  readonly config: CreationsConfig;
+  readonly t: (key: string) => string;
+}
+
+export function CreationsGalleryScreen({
+  userId,
+  repository,
+  config,
+  t,
+}: CreationsGalleryScreenProps) {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+  const { share } = useSharing();
+
+  const { data: creations, isLoading, refetch } = useCreations({
+    userId,
+    repository,
+  });
+
+  const deleteMutation = useDeleteCreation({ userId, repository });
+  const { filtered, selectedType, availableTypes, selectType } =
+    useCreationsFilter({ creations });
+
+  if (__DEV__) {
+    console.log("[CreationsGalleryScreen] Render:", {
+      count: creations?.length ?? 0,
+      filtered: filtered.length,
+      selectedType,
+    });
+  }
+
+  const handleShare = useCallback(
+    async (creation: Creation) => {
+      try {
+        await share(creation.uri, {
+          dialogTitle: t(config.translations.title),
+          mimeType: "image/jpeg",
+        });
+      } catch {
+        // Silent fail
+      }
+    },
+    [share, t, config.translations.title],
+  );
+
+  const handleDelete = useCallback(
+    (creation: Creation) => {
+      Alert.alert(
+        t(config.translations.deleteTitle),
+        t(config.translations.deleteMessage),
+        [
+          { text: t("common.cancel"), style: "cancel" },
+          {
+            text: t("common.delete"),
+            style: "destructive",
+            onPress: () => deleteMutation.mutate(creation.id),
+          },
+        ],
+      );
+    },
+    [t, config.translations, deleteMutation],
+  );
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          backgroundColor: tokens.colors.backgroundPrimary,
+        },
+        list: {
+          padding: tokens.spacing.md,
+          paddingBottom: insets.bottom + tokens.spacing.xl,
+          gap: tokens.spacing.md,
+        },
+      }),
+    [tokens, insets.bottom],
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: Creation }) => (
+      <CreationCard
+        creation={item}
+        types={config.types}
+        onShare={handleShare}
+        onDelete={handleDelete}
+      />
+    ),
+    [config.types, handleShare, handleDelete],
+  );
+
+  if (!isLoading && (!creations || creations.length === 0)) {
+    return (
+      <View style={styles.container}>
+        <EmptyState
+          title={t(config.translations.empty)}
+          description={t(config.translations.emptyDescription)}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {config.types.length > 0 && availableTypes.length > 1 && (
+        <FilterChips
+          types={config.types}
+          availableTypes={availableTypes}
+          selectedType={selectedType}
+          allLabel={t(config.translations.filterAll)}
+          onSelect={selectType}
+        />
+      )}
+      <FlatList
+        data={filtered}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={styles.list}
+        refreshControl={
+          <RefreshControl
+            refreshing={isLoading}
+            onRefresh={refetch}
+            tintColor={tokens.colors.primary}
+          />
+        }
+      />
+    </View>
+  );
+}

package/src/presentation/screens/index.ts

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