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

package/src/domains/creations/infrastructure/repositories/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Infrastructure Repositories
+ */
+
+export {
+  CreationsRepository,
+  type RepositoryOptions,
+} from "./CreationsRepository";

package/src/domains/creations/infrastructure/services/CreationsStorageService.ts

@@ -0,0 +1,49 @@
+import {
+    uploadFile,
+    uploadBase64Image,
+} from "@umituz/react-native-firebase";
+import type { ICreationsStorageService } from "../../domain/services/ICreationsStorageService";
+
+declare const __DEV__: boolean;
+
+export class CreationsStorageService implements ICreationsStorageService {
+    constructor(private readonly storagePathPrefix: string = "creations") { }
+
+    private getPath(userId: string, creationId: string): string {
+        return `${this.storagePathPrefix}/${userId}/${creationId}.jpg`;
+    }
+
+    async uploadCreationImage(
+        userId: string,
+        creationId: string,
+        imageUri: string,
+        mimeType = "image/jpeg"
+    ): Promise<string> {
+        const path = this.getPath(userId, creationId);
+
+        try {
+            if (imageUri.startsWith("data:")) {
+                const result = await uploadBase64Image(imageUri, path, { mimeType });
+                return result.downloadUrl;
+            }
+            const result = await uploadFile(imageUri, path, { mimeType });
+            return result.downloadUrl;
+        } catch (error) {
+            if (__DEV__) {
+                // eslint-disable-next-line no-console
+                console.error("[CreationsStorageService] upload failed", error);
+            }
+            throw error;
+        }
+    }
+
+    async deleteCreationImage(
+        _userId: string,
+        _creationId: string
+    ): Promise<boolean> {
+        // Delete logic not strictly required for saving loop, but good to have
+        // Needs storage reference delete implementation in rn-firebase first
+        // For now we skip implementing delete in this iteration as priority is saving
+        return Promise.resolve(true);
+    }
+}

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

@@ -0,0 +1,136 @@
+/**
+ * CreationCard Component
+ * Displays a creation item with actions
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, Image, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { Creation } from "../../domain/entities/Creation";
+import type { CreationType } from "../../domain/value-objects/CreationsConfig";
+
+interface CreationCardProps {
+  readonly creation: Creation;
+  readonly types: readonly CreationType[];
+  readonly onView?: (creation: Creation) => void;
+  readonly onShare: (creation: Creation) => void;
+  readonly onDelete: (creation: Creation) => void;
+}
+
+export function CreationCard({
+  creation,
+  types,
+  onView,
+  onShare,
+  onDelete,
+}: CreationCardProps) {
+  const tokens = useAppDesignTokens();
+
+  const typeConfig = types.find((t) => t.id === creation.type);
+  const icon = typeConfig?.icon || "🎨";
+  const label = typeConfig?.labelKey || creation.type;
+
+  const handleView = useCallback(() => onView?.(creation), [creation, onView]);
+  const handleShare = useCallback(() => onShare(creation), [creation, onShare]);
+  const handleDelete = useCallback(
+    () => onDelete(creation),
+    [creation, onDelete],
+  );
+
+  const formattedDate = useMemo(() => {
+    const date =
+      creation.createdAt instanceof Date
+        ? creation.createdAt
+        : new Date(creation.createdAt);
+    return date.toLocaleDateString(undefined, {
+      day: "numeric",
+      month: "short",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }, [creation.createdAt]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flexDirection: "row",
+          backgroundColor: tokens.colors.surface,
+          borderRadius: tokens.spacing.md,
+          overflow: "hidden",
+          marginBottom: tokens.spacing.md,
+        },
+        thumbnail: {
+          width: 100,
+          height: 100,
+        },
+        content: {
+          flex: 1,
+          padding: tokens.spacing.md,
+          justifyContent: "space-between",
+        },
+        typeRow: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tokens.spacing.sm,
+        },
+        icon: {
+          fontSize: 20,
+        },
+        typeText: {
+          ...tokens.typography.bodyMedium,
+          fontWeight: "600",
+          color: tokens.colors.textPrimary,
+        },
+        dateText: {
+          ...tokens.typography.bodySmall,
+          color: tokens.colors.textSecondary,
+        },
+        actions: {
+          flexDirection: "row",
+          gap: tokens.spacing.sm,
+        },
+        actionBtn: {
+          width: 36,
+          height: 36,
+          borderRadius: 18,
+          backgroundColor: tokens.colors.backgroundSecondary,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      <Image source={{ uri: creation.uri }} style={styles.thumbnail} />
+      <View style={styles.content}>
+        <View>
+          <View style={styles.typeRow}>
+            <AtomicText style={styles.icon}>{icon}</AtomicText>
+            <AtomicText style={styles.typeText}>{label}</AtomicText>
+          </View>
+          <AtomicText style={styles.dateText}>{formattedDate}</AtomicText>
+        </View>
+        <View style={styles.actions}>
+          {onView && (
+            <TouchableOpacity style={styles.actionBtn} onPress={handleView}>
+              <AtomicIcon name="eye" size="sm" color="primary" />
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity style={styles.actionBtn} onPress={handleShare}>
+            <AtomicIcon name="share-social" size="sm" color="primary" />
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.actionBtn} onPress={handleDelete}>
+            <AtomicIcon name="trash" size="sm" color="error" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,76 @@
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+
+interface DetailActionsProps {
+    readonly onShare: () => void;
+    readonly onDelete: () => void;
+    readonly shareLabel: string;
+    readonly deleteLabel: string;
+}
+
+export const DetailActions: React.FC<DetailActionsProps> = ({
+    onShare,
+    onDelete,
+    shareLabel,
+    deleteLabel
+}) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity
+                style={[styles.button, styles.shareButton]}
+                onPress={onShare}
+                activeOpacity={0.7}
+            >
+                <AtomicIcon name="share-social-outline" size="sm" color="onPrimary" />
+                <AtomicText style={styles.buttonText}>{shareLabel}</AtomicText>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+                style={[styles.button, styles.deleteButton]}
+                onPress={onDelete}
+                activeOpacity={0.7}
+            >
+                <AtomicIcon name="trash-outline" size="sm" color="error" />
+                <AtomicText style={[styles.buttonText, { color: tokens.colors.error }]}>
+                    {deleteLabel}
+                </AtomicText>
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const useStyles = (tokens: DesignTokens) => StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: tokens.spacing.md,
+        paddingHorizontal: tokens.spacing.lg,
+        marginBottom: tokens.spacing.xxl,
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 16,
+        gap: 8,
+        minWidth: 120,
+    },
+    shareButton: {
+        backgroundColor: tokens.colors.primary,
+    },
+    deleteButton: {
+        backgroundColor: tokens.colors.error + '10',
+    },
+    buttonText: {
+        fontWeight: '700',
+        color: tokens.colors.textInverse,
+        fontSize: 15,
+    },
+});

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

@@ -0,0 +1,81 @@
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { type EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface DetailHeaderProps {
+    readonly title: string;
+    readonly date: string;
+    readonly onClose: () => void;
+}
+
+export const DetailHeader: React.FC<DetailHeaderProps> = ({ title, date, onClose }) => {
+    const tokens = useAppDesignTokens();
+    const insets = useSafeAreaInsets();
+    const styles = useStyles(tokens, insets);
+
+    return (
+        <View style={styles.headerContainer}>
+            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                <AtomicIcon name="arrow-back" size="md" color="onSurface" />
+            </TouchableOpacity>
+
+            <View style={styles.titleContainer}>
+                <AtomicText style={styles.title}>{title}</AtomicText>
+                <View style={styles.dateBadge}>
+                    <AtomicIcon name="calendar-outline" size="md" color="primary" />
+                    <AtomicText style={styles.dateText}>{date}</AtomicText>
+                </View>
+            </View>
+
+            <View style={styles.placeholder} />
+        </View>
+    );
+};
+
+const useStyles = (tokens: DesignTokens, insets: EdgeInsets) => StyleSheet.create({
+    headerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingTop: insets.top + tokens.spacing.sm,
+        paddingBottom: tokens.spacing.md,
+        paddingHorizontal: tokens.spacing.md,
+        backgroundColor: tokens.colors.background,
+        borderBottomWidth: 1,
+        borderBottomColor: tokens.colors.border,
+        zIndex: 10,
+    },
+    closeButton: {
+        padding: tokens.spacing.xs,
+        marginRight: tokens.spacing.sm,
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: tokens.colors.textPrimary,
+        marginBottom: 4,
+        textAlign: 'center',
+    },
+    dateBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 12,
+        backgroundColor: tokens.colors.primary + '15',
+    },
+    dateText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: tokens.colors.primary,
+    },
+    placeholder: {
+        width: 40,
+    },
+});

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

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import { View, StyleSheet, Image, Dimensions } from 'react-native';
+import { useAppDesignTokens, type DesignTokens } 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: DesignTokens) => 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

@@ -0,0 +1,67 @@
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText, useAppDesignTokens, type DesignTokens } 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: DesignTokens) => 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

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

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

@@ -0,0 +1,43 @@
+import React, { useCallback } from "react";
+import { ImageGallery } from "@umituz/react-native-image";
+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,
+}) => {
+    const handleImageChange = useCallback(async (uri: string, idx: number) => {
+        const creation = creations[idx];
+        if (creation && onImageEdit) {
+            await onImageEdit(uri, creation.id);
+        }
+    }, [creations, onImageEdit]);
+
+    return (
+        <ImageGallery
+            images={creations.map((c) => ({ uri: c.uri }))}
+            visible={visible}
+            index={index}
+            onDismiss={onDismiss}
+            onIndexChange={onIndexChange}
+            enableEditing={enableEditing}
+            onImageChange={onImageEdit ? handleImageChange : undefined}
+        />
+    );
+};

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

@@ -0,0 +1,63 @@
+/**
+ * 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/CreationsGrid.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { FlatList, RefreshControl, StyleSheet, type ViewStyle } from 'react-native';
+import { useAppDesignTokens, type DesignTokens } 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 contentContainerStyle?: ViewStyle;
+    readonly ListEmptyComponent?: React.ReactElement | null;
+    readonly ListHeaderComponent?: React.ComponentType<unknown> | React.ReactElement | null;
+}
+
+export const CreationsGrid: React.FC<CreationsGridProps> = ({
+    creations,
+    types,
+    isLoading,
+    onRefresh,
+    onView,
+    onShare,
+    onDelete,
+    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)}
+        />
+    );
+
+    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: DesignTokens) => StyleSheet.create({
+    list: {
+        padding: tokens.spacing.md,
+        paddingBottom: 100, // Space for fab or bottom tab
+    },
+});