@umituz/react-native-ai-generation-content 1.17.242 → 1.17.243

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.242",
+  "version": "1.17.243",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -38,7 +38,6 @@
   },
   "dependencies": {
     "@umituz/react-native-auth": "latest",
-    "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-filesystem": "latest",
     "@umituz/react-native-firebase": "latest",
     "@umituz/react-native-tanstack": "latest"
@@ -63,7 +62,7 @@
     "@types/react": "~19.1.10",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-design-system": "^2.6.126",
     "@umituz/react-native-filesystem": "latest",
     "@umituz/react-native-firebase": "latest",
     "@umituz/react-native-haptics": "latest",
@@ -80,6 +79,7 @@
     "expo-haptics": "^15.0.8",
     "expo-image": "^3.0.11",
     "expo-localization": "^17.0.8",
+    "expo-media-library": "^18.2.1",
     "expo-network": "^8.0.8",
     "expo-sharing": "^14.0.8",
     "expo-video": "^3.0.15",

package/src/domains/result-preview/presentation/components/RecentCreationsSection.tsx

@@ -0,0 +1,180 @@
+/**
+ * Recent Creations Section Component
+ * Displays recent creations in a grid layout
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { StyleSheet, View, TouchableOpacity, FlatList } from "react-native";
+import {
+  AtomicText,
+  AtomicImage,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { RecentCreation } from "../types/result-preview.types";
+
+interface RecentCreationsSectionProps {
+  readonly recentCreations: readonly RecentCreation[];
+  readonly onViewAll?: () => void;
+  readonly onCreationPress?: (creation: RecentCreation) => void;
+  readonly title: string;
+  readonly viewAllLabel: string;
+}
+
+export const RecentCreationsSection: React.FC<RecentCreationsSectionProps> = ({
+  recentCreations,
+  onViewAll,
+  onCreationPress,
+  title,
+  viewAllLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginTop: tokens.spacing.xl,
+          paddingHorizontal: tokens.spacing.md,
+        },
+        header: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: tokens.spacing.md,
+        },
+        title: {
+          fontSize: 20,
+          fontWeight: "700",
+          color: tokens.colors.textPrimary,
+        },
+        viewAllButton: {
+          paddingHorizontal: tokens.spacing.sm,
+          paddingVertical: tokens.spacing.xs,
+        },
+        viewAllText: {
+          fontSize: 12,
+          fontWeight: "700",
+          color: tokens.colors.primary,
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+        },
+        grid: {
+          gap: tokens.spacing.md,
+        },
+        creationItem: {
+          flex: 1,
+          marginHorizontal: tokens.spacing.xs,
+        },
+        imageContainer: {
+          width: "100%",
+          aspectRatio: 4 / 5,
+          borderRadius: tokens.borders.radius.md,
+          overflow: "hidden",
+          backgroundColor: tokens.colors.backgroundSecondary,
+          position: "relative",
+        },
+        image: {
+          width: "100%",
+          height: "100%",
+        },
+        favoriteIcon: {
+          position: "absolute",
+          bottom: 8,
+          right: 8,
+          backgroundColor: "rgba(0, 0, 0, 0.6)",
+          borderRadius: tokens.borders.radius.full,
+          padding: 6,
+        },
+        creationInfo: {
+          marginTop: tokens.spacing.xs,
+        },
+        creationTitle: {
+          fontSize: 14,
+          fontWeight: "700",
+          color: tokens.colors.textPrimary,
+          marginBottom: 2,
+        },
+        creationDate: {
+          fontSize: 12,
+          color: tokens.colors.textSecondary,
+        },
+        divider: {
+          height: 1,
+          backgroundColor: tokens.colors.border,
+          marginBottom: tokens.spacing.lg,
+          marginHorizontal: tokens.spacing.lg,
+        },
+        columnWrapper: {
+          justifyContent: "space-between",
+        },
+      }),
+    [tokens],
+  );
+
+  const handleCreationPress = useCallback((creation: RecentCreation) => {
+    onCreationPress?.(creation);
+  }, [onCreationPress]);
+
+  const renderItem = useCallback(({ item }: { item: RecentCreation }) => (
+    <TouchableOpacity
+      style={styles.creationItem}
+      onPress={() => handleCreationPress(item)}
+      activeOpacity={0.7}
+    >
+      <View style={styles.imageContainer}>
+        <AtomicImage
+          source={{ uri: item.imageUrl }}
+          style={styles.image}
+          rounded
+        />
+        {item.isFavorite && (
+          <View style={styles.favoriteIcon}>
+            <AtomicIcon name="heart" size="xs" color="error" />
+          </View>
+        )}
+      </View>
+      <View style={styles.creationInfo}>
+        <AtomicText style={styles.creationTitle} numberOfLines={1}>
+          {item.title}
+        </AtomicText>
+        <AtomicText style={styles.creationDate}>
+          {item.date}
+        </AtomicText>
+      </View>
+    </TouchableOpacity>
+  ), [styles, handleCreationPress]);
+
+  if (!recentCreations || recentCreations.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <View style={styles.divider} />
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <AtomicText style={styles.title}>{title}</AtomicText>
+          {onViewAll && (
+            <TouchableOpacity
+              style={styles.viewAllButton}
+              onPress={onViewAll}
+              activeOpacity={0.7}
+            >
+              <AtomicText style={styles.viewAllText}>{viewAllLabel}</AtomicText>
+            </TouchableOpacity>
+          )}
+        </View>
+        <FlatList
+          data={recentCreations}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          numColumns={2}
+          columnWrapperStyle={styles.columnWrapper}
+          scrollEnabled={false}
+          showsVerticalScrollIndicator={false}
+        />
+      </View>
+    </>
+  );
+};

package/src/domains/result-preview/presentation/components/ResultImageCard.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useMemo } from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { AtomicImage, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { ResultImageCardProps } from "../types/result-preview.types";
 
@@ -20,8 +20,8 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
       StyleSheet.create({
         container: {
           width: "100%",
-          aspectRatio: 1,
-          borderRadius: rounded ? tokens.borders.radius.md : 0,
+          aspectRatio: 3 / 4,
+          borderRadius: rounded ? tokens.borders.radius.xl : 0,
           overflow: "hidden",
           backgroundColor: tokens.colors.backgroundSecondary,
         },

package/src/domains/result-preview/presentation/components/ResultPreviewScreen.tsx

@@ -13,6 +13,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { ResultImageCard } from "./ResultImageCard";
 import { ResultActionBar } from "./ResultActionBar";
+import { RecentCreationsSection } from "./RecentCreationsSection";
 import type { ResultPreviewScreenProps } from "../types/result-preview.types";
 
 export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
@@ -24,6 +25,9 @@ export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
   onTryAgain,
   onNavigateBack,
   onRate,
+  recentCreations,
+  onViewAll,
+  onCreationPress,
   translations,
   style,
 }) => {
@@ -98,6 +102,15 @@ export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
             rateButtonText={translations.rateButton}
           />
         </View>
+        {recentCreations && recentCreations.length > 0 && translations.recentCreations && translations.viewAll && (
+          <RecentCreationsSection
+            recentCreations={recentCreations}
+            onViewAll={onViewAll}
+            onCreationPress={onCreationPress}
+            title={translations.recentCreations}
+            viewAllLabel={translations.viewAll}
+          />
+        )}
       </View>
     </ScreenLayout>
   );

package/src/domains/result-preview/presentation/components/index.ts

@@ -5,3 +5,4 @@
 export { ResultPreviewScreen } from "./ResultPreviewScreen";
 export { ResultImageCard } from "./ResultImageCard";
 export { ResultActionBar } from "./ResultActionBar";
+export { RecentCreationsSection } from "./RecentCreationsSection";

package/src/domains/result-preview/presentation/types/result-preview.types.ts

@@ -79,6 +79,17 @@ export interface ResultActionBarProps {
   rateButtonText?: string;
 }
 
+/**
+ * Recent creation item
+ */
+export interface RecentCreation {
+  readonly id: string;
+  readonly imageUrl: string;
+  readonly title: string;
+  readonly date: string;
+  readonly isFavorite?: boolean;
+}
+
 /**
  * Result preview screen props
  */
@@ -94,6 +105,12 @@ export interface ResultPreviewScreenProps {
   onTryAgain: () => void;
   onNavigateBack: () => void;
   onRate?: () => void;
+  /** Recent creations to display */
+  recentCreations?: readonly RecentCreation[];
+  /** Navigate to all creations */
+  onViewAll?: () => void;
+  /** View a specific creation */
+  onCreationPress?: (creation: RecentCreation) => void;
   /** Translations */
   translations: ResultPreviewTranslations;
   /** Optional custom style */
@@ -118,8 +135,12 @@ export interface ResultPreviewTranslations {
   sharing: string;
   /** Try again button */
   tryAnother: string;
-  /** Rate button (optional) */
+  /** Rate button */
   rateButton?: string;
+  /** Recent creations section title */
+  recentCreations?: string;
+  /** View all button */
+  viewAll?: string;
 }
 
 /**