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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "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";
@@ -16,8 +16,10 @@ import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 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, AtomicButton } from "@umituz/react-native-design-system-atoms";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -41,6 +43,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 +51,33 @@ export function CreationsGalleryScreen({
   });
 
   const deleteMutation = useDeleteCreation({ userId, repository });
-  const { filtered, selectedType, availableTypes, selectType } =
+  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } =
     useCreationsFilter({ creations });
 
+  const allCategories = useMemo(() => {
+    const categories: FilterCategory[] = [];
+
+    // Add dynamic types category if types exist
+    if (config.types.length > 0) {
+      categories.push({
+        id: 'type', // This ID matches logic in useFilter? No, filter logic is flat ID based. 'type' is category ID.
+        title: t('creations.category') || 'Category',
+        multiSelect: false,
+        options: config.types.map(t => ({
+          id: t.id,
+          label: t.labelKey, // In a real app we'd translate this, but for now passing key or mocked
+          icon: 'Image', // Default icon since types have emojis which might not work with AtomicIcon
+        }))
+      });
+    }
+
+    if (config.filterCategories) {
+      categories.push(...config.filterCategories);
+    }
+
+    return categories;
+  }, [config.types, config.filterCategories, t]);
+
   const handleView = useCallback(
     (creation: Creation) => {
       const index = filtered.findIndex((c) => c.id === creation.id);
@@ -111,8 +138,40 @@ export function CreationsGalleryScreen({
           flex: 1,
           backgroundColor: tokens.colors.backgroundPrimary,
         },
+        headerArea: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: 'space-between',
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.sm,
+          marginBottom: tokens.spacing.sm,
+        },
+        filterButton: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: tokens.spacing.xs,
+          paddingVertical: tokens.spacing.xs,
+          paddingHorizontal: tokens.spacing.md,
+          borderRadius: (tokens as any).borders?.radius?.full || 999,
+          backgroundColor: tokens.colors.surfaceVariant,
+          borderWidth: 1,
+          borderColor: 'transparent',
+        },
+        filterButtonActive: {
+          backgroundColor: tokens.colors.primary + "15",
+          borderColor: tokens.colors.primary + "30",
+        },
+        badge: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: tokens.colors.primary,
+          position: 'absolute',
+          top: 6,
+          right: 6,
+        },
         list: {
-          padding: tokens.spacing.md,
+          paddingHorizontal: tokens.spacing.md,
           paddingBottom: insets.bottom + tokens.spacing.xl,
           gap: tokens.spacing.md,
         },
@@ -151,15 +210,22 @@ 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}>
+        <View>
+          <AtomicText type="headlineSmall">{t(config.translations.title) || 'My Creations'}</AtomicText>
+          <AtomicText type="bodySmall" style={{ opacity: 0.6 }}>{filtered.length} {t(config.translations.photoCount) || 'photos'}</AtomicText>
+        </View>
+        <TouchableOpacity
+          onPress={() => filterSheetRef.current?.present()}
+          style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
+        >
+          <AtomicIcon name="ListFilter" size="sm" color={isFiltered ? "primary" : "secondary"} />
+          <AtomicText type="labelMedium" color={isFiltered ? "primary" : "secondary"}>Filter</AtomicText>
+          {isFiltered && (
+            <View style={styles.badge} />
+          )}
+        </TouchableOpacity>
+      </View>
       <FlatList
         data={filtered}
         renderItem={renderItem}
@@ -182,6 +248,18 @@ export function CreationsGalleryScreen({
         enableEditing={enableEditing}
         onImageChange={handleImageChange}
       />
+
+      <FilterBottomSheet
+        ref={filterSheetRef}
+        categories={allCategories as FilterCategory[]}
+        selectedIds={selectedIds}
+        onFilterPress={(id, catId) => {
+          const category = allCategories.find(c => c.id === catId);
+          toggleFilter(id, category?.multiSelect);
+        }}
+        onClearFilters={clearFilters}
+        title={t("common.filter")}
+      />
     </View>
   );
 }