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

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

@@ -1,77 +0,0 @@
-import React, { useMemo } from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { EmptyState } from "./EmptyState";
-import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
-
-interface CreationsGalleryEmptyStateProps {
-    readonly isLoading: boolean;
-    readonly hasCreations: boolean;
-    readonly config: CreationsConfig;
-    readonly t: (key: string) => string;
-    readonly emptyActionLabel?: string;
-    readonly onEmptyAction?: () => void;
-    readonly clearFilters: () => void;
-}
-
-export const CreationsGalleryEmptyState: React.FC<CreationsGalleryEmptyStateProps> = ({
-    isLoading,
-    hasCreations,
-    config,
-    t,
-    emptyActionLabel,
-    onEmptyAction,
-    clearFilters,
-}) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    return useMemo(() => {
-        // 1. Loading State
-        if (isLoading && !hasCreations) {
-            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 'hasCreations' which represents the full list presence
-        if (!hasCreations) {
-            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)
-        // This component is rendered when the list is empty, but hasCreations is true.
-        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, hasCreations, config, t, emptyActionLabel, onEmptyAction, clearFilters, styles.centerContainer, tokens.colors.primary]);
-};
-
-const useStyles = (tokens: any) => StyleSheet.create({
-    centerContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: 400,
-        paddingHorizontal: tokens.spacing.xl
-    },
-});

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

@@ -1,87 +0,0 @@
-import React from 'react';
-import { FlatList, RefreshControl, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { Creation } from "../../domain/entities/Creation";
-import type { CreationType } from "../../domain/value-objects/CreationsConfig";
-import { CreationCard } from "./CreationCard";
-
-interface CreationsGridProps {
-    readonly creations: Creation[];
-    readonly types: readonly CreationType[];
-    readonly isLoading: boolean;
-    readonly onRefresh: () => void;
-    readonly onView: (creation: Creation) => void;
-    readonly onShare: (creation: Creation) => void;
-    readonly onDelete: (creation: Creation) => void;
-    readonly onToggleFavorite?: (creation: Creation) => void;
-    readonly selectedIds?: string[];
-    readonly onSelect?: (creation: Creation) => void;
-    readonly isSelectionMode?: boolean;
-    readonly contentContainerStyle?: any;
-    readonly ListEmptyComponent?: React.ReactElement | null;
-    readonly ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null;
-}
-
-export const CreationsGrid: React.FC<CreationsGridProps> = ({
-    creations,
-    types,
-    isLoading,
-    onRefresh,
-    onView,
-    onShare,
-    onDelete,
-    onToggleFavorite,
-    selectedIds = [],
-    onSelect,
-    isSelectionMode = false,
-    contentContainerStyle,
-    ListEmptyComponent,
-    ListHeaderComponent,
-}) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    const renderItem = ({ item }: { item: Creation }) => (
-        <CreationCard
-            creation={item}
-            types={types as CreationType[]}
-            onView={() => onView(item)}
-            onShare={() => onShare(item)}
-            onDelete={() => onDelete(item)}
-            onToggleFavorite={onToggleFavorite}
-            isSelected={selectedIds.includes(item.id)}
-            onSelect={onSelect}
-            isSelectionMode={isSelectionMode}
-        />
-    );
-
-    return (
-        <FlatList
-            data={creations}
-            renderItem={renderItem}
-            keyExtractor={(item) => item.id}
-            ListHeaderComponent={ListHeaderComponent}
-            ListEmptyComponent={ListEmptyComponent}
-            contentContainerStyle={[
-                styles.list,
-                contentContainerStyle,
-                (!creations || creations.length === 0) && { flexGrow: 1 }
-            ]}
-            showsVerticalScrollIndicator={false}
-            refreshControl={
-                <RefreshControl
-                    refreshing={isLoading}
-                    onRefresh={onRefresh}
-                    tintColor={tokens.colors.primary}
-                />
-            }
-        />
-    );
-};
-
-const useStyles = (tokens: any) => StyleSheet.create({
-    list: {
-        padding: tokens.spacing.md,
-        paddingBottom: 100, // Space for fab or bottom tab
-    },
-});

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

@@ -1,176 +0,0 @@
-/**
- * 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/domains/creations/presentation/components/EmptyState.tsx

@@ -1,75 +0,0 @@
-/**
- * EmptyState Component
- * Displays when no creations exist
- */
-
-import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import { AtomicText, AtomicButton, 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.headingSmall,
-          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,
-        },
-      }),
-    [tokens, onAction],
-  );
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.iconContainer}>
-        <AtomicIcon name={iconName} size={64} color="secondary" />
-      </View>
-      <AtomicText style={styles.title}>{title}</AtomicText>
-      <AtomicText style={styles.description}>{description}</AtomicText>
-      {onAction && actionLabel && (
-        <AtomicButton
-          title={actionLabel}
-          onPress={onAction}
-          variant="primary"
-          style={styles.button}
-        />
-      )}
-    </View>
-  );
-}

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