@umituz/react-native-ai-creations 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -34,18 +34,24 @@
     "@umituz/react-native-image": "latest",
     "@umituz/react-native-sharing": "latest",
     "firebase": ">=11.0.0",
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react": ">=19.1.0",
+    "react-native": ">=0.81.5",
+    "react-native-safe-area-context": ">=5.0.0",
+    "@umituz/react-native-filter": "^1.4.2",
+    "@umituz/react-native-bottom-sheet": "latest",
+    "@umituz/react-native-design-system-atoms": "latest"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.62.16",
     "@types/react": "^19.0.0",
     "@umituz/react-native-image": "^1.1.1",
     "firebase": "^11.0.0",
-    "react": "^19.0.0",
-    "react-native": "^0.76.0",
-    "react-native-safe-area-context": "^4.14.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-safe-area-context": "^5.6.0",
+    "@umituz/react-native-filter": "^1.4.2",
+    "@umituz/react-native-bottom-sheet": "latest",
+    "@umituz/react-native-design-system-atoms": "latest",
     "typescript": "^5.3.3"
   },
   "publishConfig": {

package/src/domain/value-objects/CreationsConfig.ts

@@ -39,9 +39,12 @@ export type PathBuilder = (userId: string) => string[];
  */
 export type DocumentMapper = (id: string, data: CreationDocument) => Creation;
 
+import type { FilterCategory } from "@umituz/react-native-filter";
+
 export interface CreationsConfig {
   readonly collectionName: string;
   readonly types: readonly CreationType[];
+  readonly filterCategories?: readonly FilterCategory[];
   readonly translations: CreationsTranslations;
   readonly maxThumbnails?: number;
   readonly gridColumns?: number;

package/src/presentation/components/FilterChips.tsx

@@ -14,6 +14,7 @@ interface FilterChipsProps {
   readonly selectedType: string;
   readonly allLabel: string;
   readonly onSelect: (type: string) => void;
+  readonly style?: any;
 }
 
 export function FilterChips({
@@ -22,6 +23,7 @@ export function FilterChips({
   selectedType,
   allLabel,
   onSelect,
+  style,
 }: FilterChipsProps) {
   const tokens = useAppDesignTokens();
 
@@ -59,7 +61,7 @@ export function FilterChips({
   const visibleTypes = types.filter((t) => availableTypes.includes(t.id));
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, style]}>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}

package/src/presentation/hooks/useCreationsFilter.ts

@@ -12,35 +12,42 @@ interface UseCreationsFilterProps {
   readonly creations: Creation[] | undefined;
 }
 
-export function useCreationsFilter({ creations }: UseCreationsFilterProps) {
-  const [selectedType, setSelectedType] = useState<string>(ALL_FILTER);
+import { FilterUtils } from "@umituz/react-native-filter";
 
-  const availableTypes = useMemo(() => {
-    if (!creations) return [];
-    const types = new Set(creations.map((c) => c.type));
-    return Array.from(types);
-  }, [creations]);
+interface UseCreationsFilterProps {
+  readonly creations: Creation[] | undefined;
+  readonly defaultFilterId?: string;
+}
+
+export function useCreationsFilter({
+  creations,
+  defaultFilterId = "all"
+}: UseCreationsFilterProps) {
+  const [selectedIds, setSelectedIds] = useState<string[]>([defaultFilterId]);
 
   const filtered = useMemo(() => {
     if (!creations) return [];
-    if (selectedType === ALL_FILTER) return creations;
-    return creations.filter((c) => c.type === selectedType);
-  }, [creations, selectedType]);
+    if (selectedIds.includes(defaultFilterId)) return creations;
+
+    return creations.filter((c) =>
+      selectedIds.includes(c.type) ||
+      selectedIds.some(id => (c as any).metadata?.tags?.includes(id))
+    );
+  }, [creations, selectedIds, defaultFilterId]);
 
-  const selectType = useCallback((type: string) => {
-    setSelectedType(type);
-  }, []);
+  const toggleFilter = useCallback((filterId: string, multiSelect: boolean = false) => {
+    setSelectedIds(prev => FilterUtils.toggleFilter(prev, filterId, multiSelect, defaultFilterId));
+  }, [defaultFilterId]);
 
-  const resetFilter = useCallback(() => {
-    setSelectedType(ALL_FILTER);
-  }, []);
+  const clearFilters = useCallback(() => {
+    setSelectedIds([defaultFilterId]);
+  }, [defaultFilterId]);
 
   return {
     filtered,
-    selectedType,
-    availableTypes,
-    selectType,
-    resetFilter,
-    isFiltered: selectedType !== ALL_FILTER,
+    selectedIds,
+    toggleFilter,
+    clearFilters,
+    isFiltered: !selectedIds.includes(defaultFilterId),
   };
 }

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useMemo, useCallback, useState } from "react";
-import { View, FlatList, StyleSheet, RefreshControl, Alert } from "react-native";
+import { View, FlatList, StyleSheet, RefreshControl, Alert, TouchableOpacity } 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";
@@ -18,6 +18,9 @@ import { useCreationsFilter } from "../hooks/useCreationsFilter";
 import { CreationCard } from "../components/CreationCard";
 import { FilterChips } from "../components/FilterChips";
 import { EmptyState } from "../components/EmptyState";
+import { FilterBottomSheet, type FilterCategory } from "@umituz/react-native-filter";
+import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system-atoms";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -41,6 +44,7 @@ export function CreationsGalleryScreen({
   const { share } = useSharing();
   const [viewerVisible, setViewerVisible] = useState(false);
   const [viewerIndex, setViewerIndex] = useState(0);
+  const filterSheetRef = React.useRef<BottomSheetModalRef>(null);
 
   const { data: creations, isLoading, refetch } = useCreations({
     userId,
@@ -48,9 +52,15 @@ export function CreationsGalleryScreen({
   });
 
   const deleteMutation = useDeleteCreation({ userId, repository });
-  const { filtered, selectedType, availableTypes, selectType } =
+  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } =
     useCreationsFilter({ creations });
 
+  const availableTypes = useMemo(() => {
+    if (!creations) return [];
+    const types = new Set(creations.map((c) => c.type));
+    return Array.from(types);
+  }, [creations]);
+
   const handleView = useCallback(
     (creation: Creation) => {
       const index = filtered.findIndex((c) => c.id === creation.id);
@@ -111,6 +121,20 @@ export function CreationsGalleryScreen({
           flex: 1,
           backgroundColor: tokens.colors.backgroundPrimary,
         },
+        headerArea: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingRight: tokens.spacing.md,
+        },
+        filterButton: {
+          padding: tokens.spacing.sm,
+          borderRadius: (tokens as any).borders?.radius?.full || 999,
+          backgroundColor: tokens.colors.surfaceVariant,
+          marginLeft: tokens.spacing.sm,
+        },
+        filterButtonActive: {
+          backgroundColor: tokens.colors.primary + "15",
+        },
         list: {
           padding: tokens.spacing.md,
           paddingBottom: insets.bottom + tokens.spacing.xl,
@@ -151,15 +175,26 @@ export function CreationsGalleryScreen({
 
   return (
     <View style={styles.container}>
-      {config.types.length > 0 && availableTypes.length > 1 && (
-        <FilterChips
-          types={config.types}
-          availableTypes={availableTypes}
-          selectedType={selectedType}
-          allLabel={t(config.translations.filterAll)}
-          onSelect={selectType}
-        />
-      )}
+      <View style={styles.headerArea}>
+        {config.types.length > 0 && availableTypes.length > 1 && (
+          <FilterChips
+            style={{ flex: 1 }}
+            types={config.types}
+            availableTypes={availableTypes}
+            selectedType={selectedIds[0] || "all"}
+            allLabel={t(config.translations.filterAll)}
+            onSelect={(type) => toggleFilter(type, false)}
+          />
+        )}
+        {(config.filterCategories?.length || 0) > 0 && (
+          <TouchableOpacity
+            onPress={() => filterSheetRef.current?.present()}
+            style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
+          >
+            <AtomicIcon name="ListFilter" size="md" color={isFiltered ? "primary" : "secondary"} />
+          </TouchableOpacity>
+        )}
+      </View>
       <FlatList
         data={filtered}
         renderItem={renderItem}
@@ -182,6 +217,20 @@ export function CreationsGalleryScreen({
         enableEditing={enableEditing}
         onImageChange={handleImageChange}
       />
+
+      {config.filterCategories && (
+        <FilterBottomSheet
+          ref={filterSheetRef}
+          categories={config.filterCategories as FilterCategory[]}
+          selectedIds={selectedIds}
+          onFilterPress={(id, catId) => {
+            const category = config.filterCategories?.find(c => c.id === catId);
+            toggleFilter(id, category?.multiSelect);
+          }}
+          onClearFilters={clearFilters}
+          title={t("common.filter")}
+        />
+      )}
     </View>
   );
 }