@umituz/react-native-ai-creations 1.3.2 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -68,4 +68,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

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

@@ -33,11 +33,6 @@ const useStyles = (tokens: any) => StyleSheet.create({
         borderRadius: 24,
         overflow: 'hidden',
         backgroundColor: tokens.colors.surface,
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.2,
-        shadowRadius: 16,
-        elevation: 8,
     },
     image: {
         width: '100%',

package/src/presentation/components/FilterBottomSheet.tsx

@@ -0,0 +1,157 @@
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { BottomSheetModal, BottomSheetModalRef } from '@umituz/react-native-bottom-sheet';
+import { 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;
+}
+
+export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomSheetProps>((props, ref) => {
+    const { categories, selectedIds, onFilterPress, onClearFilters, title } = props;
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    const snapPoints = useMemo(() => ['50%', '75%'], []);
+
+    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" : "text"}
+                            />
+                        </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/presentation/components/index.ts

@@ -9,6 +9,7 @@ export { CreationsHomeCard } from "./CreationsHomeCard";
 export { CreationCard } from "./CreationCard";
 export { CreationThumbnail } from "./CreationThumbnail";
 export { CreationsGrid } from "./CreationsGrid";
+export { FilterBottomSheet, type FilterCategory, type FilterOption } from "./FilterBottomSheet";
 
 // Detail Components
 export { DetailHeader } from "./CreationDetail/DetailHeader";

package/src/presentation/hooks/useCreationsFilter.ts

@@ -6,10 +6,6 @@
 import { useState, useMemo, useCallback } from "react";
 import type { Creation } from "../../domain/entities/Creation";
 
-const ALL_FILTER = "all";
-
-import { FilterUtils } from "@umituz/react-native-bottom-sheet";
-
 interface UseCreationsFilterProps {
   readonly creations: Creation[] | undefined;
   readonly defaultFilterId?: string;
@@ -32,7 +28,32 @@ export function useCreationsFilter({
   }, [creations, selectedIds, defaultFilterId]);
 
   const toggleFilter = useCallback((filterId: string, multiSelect: boolean = false) => {
-    setSelectedIds(prev => FilterUtils.toggleFilter(prev, filterId, multiSelect, defaultFilterId));
+    setSelectedIds(prev => {
+      // If selecting 'all', clear everything else
+      if (filterId === defaultFilterId) return [defaultFilterId];
+
+      let newIds: string[];
+      if (!multiSelect) {
+        // Single select
+        // If we tap the already selected item in single mode, should we Deselect it? 
+        // Typically in radio-button style filters, no. But let's assume valid toggling behavior suitable for the UI.
+        // If single select, simply switch to the new one.
+        if (prev.includes(filterId) && prev.length === 1) return prev;
+        newIds = [filterId];
+      } else {
+        // Multi select
+        if (prev.includes(filterId)) {
+          newIds = prev.filter(id => id !== filterId);
+        } else {
+          // Remove 'all' if present
+          newIds = [...prev.filter(id => id !== defaultFilterId), filterId];
+        }
+      }
+
+      // If nothing selected, revert to 'all'
+      if (newIds.length === 0) return [defaultFilterId];
+      return newIds;
+    });
   }, [defaultFilterId]);
 
   const clearFilters = useCallback(() => {

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -9,9 +9,8 @@ import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
 import { useAlert } from "@umituz/react-native-alert";
-import { FilterBottomSheet, type FilterCategory } from "@umituz/react-native-bottom-sheet";
 import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
-import { GalleryHeader, EmptyState, CreationsGrid } from "../components";
+import { GalleryHeader, EmptyState, CreationsGrid, FilterBottomSheet, type FilterCategory } from "../components";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
@@ -59,30 +58,27 @@ export function CreationsGalleryScreen({
     }, [refetch])
   );
 
-  // Translate types for Grid display
+  // Translate types for Grid display & Filter
   const translatedTypes = useMemo(() => {
     return config.types.map(type => ({
       ...type,
-      labelKey: t(type.labelKey) // Pre-translate for CreationCard which just displays labelKey
+      labelKey: t(type.labelKey)
     }));
   }, [config.types, t]);
 
-  const categories: FilterCategory[] = useMemo(() => {
-    const cats: FilterCategory[] = [];
+  const allCategories = useMemo(() => {
+    const categories: FilterCategory[] = [];
     if (config.types.length > 0) {
-      cats.push({
+      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' }))
       });
     }
-    return cats;
-  }, [config.types, config.translations.filterTitle, t]);
-
-  // For now, allCategories is just the 'categories' derived from config.types
-  // In the future, other filter categories could be added here.
-  const allCategories = useMemo(() => categories, [categories]);
+    if (config.filterCategories) categories.push(...config.filterCategories);
+    return categories;
+  }, [config.types, config.filterCategories, t, config.translations.filterTitle]);
 
   const handleShare = useCallback(async (creation: Creation) => {
     share(creation.uri, { dialogTitle: t("common.share") });
@@ -105,8 +101,6 @@ export function CreationsGalleryScreen({
     });
   }, [alert, config, deleteMutation, t]);
 
-  const styles = useStyles(tokens);
-
   if (selectedCreation) {
     return (
       <CreationDetailScreen
@@ -119,6 +113,8 @@ export function CreationsGalleryScreen({
     );
   }
 
+  const styles = useStyles(tokens);
+
   if (!isLoading && (!creations || creations.length === 0)) {
     return (
       <View style={styles.container}>
@@ -178,19 +174,7 @@ export function CreationsGalleryScreen({
   );
 }
 
-}
-    />
-  < FilterBottomSheet
-ref = { filterSheetRef }
-categories = { allCategories }
-selectedIds = { selectedIds }
-onFilterPress = {(id, catId) => toggleFilter(id, allCategories.find(c => c.id === catId)?.multiSelect)}
-onClearFilters = { clearFilters }
-title = { t(config.translations.filterTitle) || t("common.filter")}
-    />
-  </View >
-);
-}
+
 
 const useStyles = (tokens: any) => StyleSheet.create({
   container: { flex: 1, backgroundColor: tokens.colors.background },