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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.3.3",
+  "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";
@@ -175,8 +174,7 @@ export function CreationsGalleryScreen({
   );
 }
 
-);
-}
+
 
 const useStyles = (tokens: any) => StyleSheet.create({
   container: { flex: 1, backgroundColor: tokens.colors.background },