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

package/src/domains/creations/presentation/components/CreationDetail/DetailImage.tsx

@@ -1,41 +0,0 @@
-
-import React from 'react';
-import { View, StyleSheet, Image, Dimensions } from 'react-native';
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-interface DetailImageProps {
-    readonly uri: string;
-}
-
-const { width } = Dimensions.get('window');
-
-export const DetailImage: React.FC<DetailImageProps> = ({ uri }) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    return (
-        <View style={styles.container}>
-            <View style={styles.frame}>
-                <Image source={{ uri }} style={styles.image} resizeMode="cover" />
-            </View>
-        </View>
-    );
-};
-
-const useStyles = (tokens: any) => StyleSheet.create({
-    container: {
-        paddingHorizontal: tokens.spacing.lg,
-        marginVertical: tokens.spacing.lg,
-    },
-    frame: {
-        width: width - (tokens.spacing.lg * 2),
-        height: width - (tokens.spacing.lg * 2),
-        borderRadius: 24,
-        overflow: 'hidden',
-        backgroundColor: tokens.colors.surface,
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-});

package/src/domains/creations/presentation/components/CreationDetail/DetailStory.tsx

@@ -1,67 +0,0 @@
-
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
-import { LinearGradient } from 'expo-linear-gradient';
-
-interface DetailStoryProps {
-    readonly story: string;
-}
-
-export const DetailStory: React.FC<DetailStoryProps> = ({ story }) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    if (!story) return null;
-
-    return (
-        <View style={styles.container}>
-            <LinearGradient
-                colors={[tokens.colors.primary + '15', tokens.colors.primary + '05']}
-                style={styles.gradient}
-            >
-                <AtomicText style={styles.quoteMark}>&quot;</AtomicText>
-                <AtomicText style={styles.text}>{story}</AtomicText>
-                <View style={styles.quoteEndRow}>
-                    <AtomicText style={[styles.quoteMark, styles.quoteEnd]}>&quot;</AtomicText>
-                </View>
-            </LinearGradient>
-        </View>
-    );
-};
-
-const useStyles = (tokens: any) => StyleSheet.create({
-    container: {
-        paddingHorizontal: tokens.spacing.lg,
-        marginBottom: tokens.spacing.lg,
-    },
-    gradient: {
-        padding: tokens.spacing.lg,
-        borderRadius: 20,
-        borderWidth: 1,
-        borderColor: tokens.colors.primary + '20',
-    },
-    quoteMark: {
-        fontSize: 48,
-        lineHeight: 48,
-        color: tokens.colors.primary,
-        opacity: 0.4,
-        marginBottom: -16,
-    },
-    quoteEndRow: {
-        alignItems: 'flex-end',
-        marginTop: -16,
-    },
-    quoteEnd: {
-        marginBottom: 0,
-    },
-    text: {
-        fontSize: 16,
-        lineHeight: 26,
-        textAlign: 'center',
-        fontStyle: 'italic',
-        fontWeight: '500',
-        color: tokens.colors.textPrimary,
-        paddingBottom: 4,
-    },
-});

package/src/domains/creations/presentation/components/CreationDetail/index.ts

@@ -1,4 +0,0 @@
-export * from './DetailHeader';
-export * from './DetailImage';
-export * from './DetailStory';
-export * from './DetailActions';

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

@@ -1,101 +0,0 @@
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ImageGallery } from "@umituz/react-native-image";
-import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { Creation } from "../../domain/entities/Creation";
-
-interface CreationImageViewerProps {
-    readonly creations: Creation[];
-    readonly visible: boolean;
-    readonly index: number;
-    readonly enableEditing?: boolean;
-    readonly onDismiss: () => void;
-    readonly onIndexChange: (index: number) => void;
-    readonly onImageEdit?: (uri: string, creationId: string) => void | Promise<void>;
-    readonly selectedCreationId?: string;
-}
-
-export const CreationImageViewer: React.FC<CreationImageViewerProps> = ({
-    creations,
-    visible,
-    index,
-    enableEditing = false,
-    onDismiss,
-    onIndexChange,
-    onImageEdit,
-    selectedCreationId,
-}) => {
-    const tokens = useAppDesignTokens();
-    const insets = useSafeAreaInsets();
-
-    const handleImageChange = async (uri: string) => {
-        if (selectedCreationId && onImageEdit) {
-            await onImageEdit(uri, selectedCreationId);
-        }
-    };
-
-    const HeaderComponent = ({ imageIndex }: { imageIndex: number }) => (
-        <View style={[styles.header, { paddingTop: Math.max(insets.top, tokens.spacing.sm) }]} pointerEvents="box-none">
-            <View style={styles.counter}>
-                <AtomicText style={styles.counterText}>
-                    {imageIndex + 1} / {creations.length}
-                </AtomicText>
-            </View>
-            <TouchableOpacity
-                onPress={onDismiss}
-                style={styles.closeButton}
-                activeOpacity={0.7}
-                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-                <AtomicIcon name="close" size="lg" color="onPrimary" />
-            </TouchableOpacity>
-        </View>
-    );
-
-    const styles = StyleSheet.create({
-        header: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            paddingHorizontal: tokens.spacing.lg,
-            zIndex: 999,
-        },
-        counter: {
-            backgroundColor: 'rgba(0,0,0,0.5)',
-            paddingHorizontal: tokens.spacing.md,
-            paddingVertical: tokens.spacing.xs,
-            borderRadius: 999,
-            justifyContent: 'center',
-        },
-        counterText: {
-            ...tokens.typography.bodyMedium,
-            color: '#FFFFFF',
-            fontWeight: '600',
-        },
-        closeButton: {
-            width: 40,
-            height: 40,
-            borderRadius: 20,
-            backgroundColor: 'rgba(0,0,0,0.5)',
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-    });
-
-    return (
-        <ImageGallery
-            images={creations.map((c) => ({ uri: c.uri }))}
-            visible={visible}
-            index={index}
-            onDismiss={onDismiss}
-            onIndexChange={onIndexChange}
-            HeaderComponent={HeaderComponent}
-            {...(enableEditing && { enableEditing } as any)}
-            {...(onImageEdit && { onImageChange: handleImageChange } as any)}
-        />
-    );
-};

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

@@ -1,63 +0,0 @@
-/**
- * CreationThumbnail Component
- * Displays a single creation thumbnail
- */
-
-import React, { useMemo, useState } from "react";
-import { Image, TouchableOpacity, StyleSheet, View } from "react-native";
-import {
-  useAppDesignTokens,
-  AtomicIcon,
-} from "@umituz/react-native-design-system";
-
-interface CreationThumbnailProps {
-  readonly uri: string;
-  readonly size?: number;
-  readonly onPress?: () => void;
-}
-
-export function CreationThumbnail({
-  uri,
-  size = 72,
-  onPress,
-}: CreationThumbnailProps) {
-  const tokens = useAppDesignTokens();
-  const [isPressed, setIsPressed] = useState(false);
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        thumbnail: {
-          width: size,
-          height: size,
-          borderRadius: tokens.spacing.sm,
-          backgroundColor: tokens.colors.backgroundSecondary,
-        },
-        overlay: {
-          ...StyleSheet.absoluteFillObject,
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
-          borderRadius: tokens.spacing.sm,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-      }),
-    [tokens, size]
-  );
-
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      disabled={!onPress}
-      onPressIn={() => setIsPressed(true)}
-      onPressOut={() => setIsPressed(false)}
-      activeOpacity={1}
-    >
-      <Image source={{ uri }} style={styles.thumbnail} />
-      {isPressed && onPress && (
-        <View style={styles.overlay}>
-          <AtomicIcon name="eye" size="lg" color="textInverse" />
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-}

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