@umituz/react-native-ai-creations 1.3.11 → 1.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/CreationImageViewer.tsx

@@ -0,0 +1,43 @@
+import React 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,
+    selectedCreationId,
+}) => {
+    const handleImageChange = async (uri: string) => {
+        if (selectedCreationId && onImageEdit) {
+            await onImageEdit(uri, selectedCreationId);
+        }
+    };
+
+    return (
+        <ImageGallery
+            images={creations.map((c) => ({ uri: c.uri }))}
+            visible={visible}
+            index={index}
+            onDismiss={onDismiss}
+            onIndexChange={onIndexChange}
+            {...(enableEditing && { enableEditing } as any)}
+            {...(onImageEdit && { onImageChange: handleImageChange } as any)}
+        />
+    );
+};

package/src/presentation/components/index.ts

@@ -8,6 +8,7 @@ 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";
 

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -2,7 +2,6 @@ import React, { useMemo, useCallback, useState } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useSharing } from "@umituz/react-native-sharing";
-import { ImageGallery } from "@umituz/react-native-image";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
@@ -10,7 +9,8 @@ import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
 import { useAlert } from "@umituz/react-native-alert";
 import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
-import { GalleryHeader, EmptyState, CreationsGrid, FilterBottomSheet, type FilterCategory } from "../components";
+import { GalleryHeader, EmptyState, CreationsGrid, FilterBottomSheet, CreationImageViewer, type FilterCategory } from "../components";
+import { getTranslatedTypes, getFilterCategoriesFromConfig } from "../utils/filterUtils";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";

package/src/presentation/utils/filterUtils.ts

@@ -0,0 +1,52 @@
+import { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
+import { FilterCategory } from "../components/FilterBottomSheet";
+
+/**
+ * Transforms the creations configuration into filter categories for the UI.
+ * 
+ * @param config The creations configuration object
+ * @param t Translation function
+ * @returns Array of FilterCategory
+ */
+export const getFilterCategoriesFromConfig = (
+    config: CreationsConfig,
+    t: (key: string) => string
+): FilterCategory[] => {
+    const categories: FilterCategory[] = [];
+
+    if (config.types.length > 0) {
+        categories.push({
+            id: 'type',
+            title: t(config.translations.filterTitle),
+            multiSelect: false,
+            options: config.types.map(type => ({
+                id: type.id,
+                label: t(type.labelKey),
+                icon: type.icon || 'image'
+            }))
+        });
+    }
+
+    if (config.filterCategories) {
+        categories.push(...config.filterCategories);
+    }
+
+    return categories;
+};
+
+/**
+ * Translates the creation types for display.
+ * 
+ * @param config The creations configuration object
+ * @param t Translation function
+ * @returns Array of types with translated labels
+ */
+export const getTranslatedTypes = (
+    config: CreationsConfig,
+    t: (key: string) => string
+) => {
+    return config.types.map(type => ({
+        ...type,
+        labelKey: t(type.labelKey)
+    }));
+};