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

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

@@ -0,0 +1,176 @@
+/**
+ * CreationsHomeCard Component
+ * Shows user's creations preview on home screen
+ */
+
+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();
+
+  // eslint-disable-next-line no-console
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.log("[CreationsHomeCard] Render:", {
+      isLoading,
+      count: creations?.length ?? 0,
+    });
+  }
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          backgroundColor: tokens.colors.surface,
+          borderRadius: tokens.borders.radius.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.borders.radius.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/domains/creations/presentation/components/EmptyState.tsx

@@ -0,0 +1,82 @@
+/**
+ * EmptyState Component
+ * Displays when no creations exist
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface EmptyStateProps {
+  readonly title: string;
+  readonly description: string;
+  readonly iconName?: string;
+  readonly actionLabel?: string;
+  readonly onAction?: () => void;
+}
+
+export function EmptyState({
+  title,
+  description,
+  iconName = "images-outline",
+  actionLabel,
+  onAction,
+}: EmptyStateProps) {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          padding: tokens.spacing.xl,
+        },
+        iconContainer: {
+          marginBottom: tokens.spacing.lg,
+        },
+        title: {
+          ...tokens.typography.headlineSmall,
+          color: tokens.colors.textPrimary,
+          textAlign: "center",
+          marginBottom: tokens.spacing.sm,
+        },
+        description: {
+          ...tokens.typography.bodyMedium,
+          color: tokens.colors.textSecondary,
+          textAlign: "center",
+          marginBottom: onAction ? tokens.spacing.xl : 0,
+        },
+        button: {
+          minWidth: 160,
+          backgroundColor: tokens.colors.primary,
+          paddingVertical: tokens.spacing.md,
+          paddingHorizontal: tokens.spacing.lg,
+          borderRadius: tokens.borders.radius.md,
+          alignItems: "center",
+        },
+        buttonText: {
+          ...tokens.typography.labelMedium,
+          color: tokens.colors.textInverse,
+          fontWeight: "600",
+        },
+      }),
+    [tokens, onAction],
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.iconContainer}>
+        <AtomicIcon name={iconName} size="xl" color="secondary" />
+      </View>
+      <AtomicText style={styles.title}>{title}</AtomicText>
+      <AtomicText style={styles.description}>{description}</AtomicText>
+      {onAction && actionLabel && (
+        <TouchableOpacity onPress={onAction} style={styles.button}>
+          <AtomicText style={styles.buttonText}>{actionLabel}</AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,160 @@
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { useAppDesignTokens, AtomicText, AtomicIcon, type DesignTokens } from '@umituz/react-native-design-system';
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
+
+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<BottomSheetModal, 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}
+                                size="sm"
+                                color={isSelected ? "primary" : "onSurface"}
+                            />
+                        </View>
+                    )}
+                    <AtomicText
+                        style={[styles.optionLabel, isSelected && styles.optionLabelSelected]}
+                    >
+                        {option.label}
+                    </AtomicText>
+                </View>
+                {isSelected && (
+                    <AtomicIcon name="checkmark" 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>
+    );
+});
+
+FilterBottomSheet.displayName = 'FilterBottomSheet';
+
+const useStyles = (tokens: DesignTokens) => 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.borders.radius.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.textPrimary,
+        fontSize: 14,
+    },
+    optionLabelSelected: {
+        color: tokens.colors.primary,
+        fontWeight: 'bold',
+    },
+});

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

@@ -0,0 +1,105 @@
+/**
+ * FilterChips Component
+ * Displays filter chips for creation types
+ */
+
+import React, { useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet, ScrollView, type ViewStyle } 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?: ViewStyle;
+}
+
+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.borders.radius.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

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