@umituz/react-native-ai-generation-content 1.12.38 → 1.12.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.12.38",
+  "version": "1.12.40",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

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

@@ -4,7 +4,7 @@
  */
 
 import type { Creation, CreationDocument } from "../entities/Creation";
-import type { FilterCategory } from "../../presentation/components/FilterBottomSheet";
+import type { FilterCategory } from "@umituz/react-native-design-system";
 
 export interface CreationType {
   readonly id: string;

package/src/domains/creations/presentation/components/index.ts

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

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,13 +1,23 @@
+declare const __DEV__: boolean;
+
 import React, { useMemo, useCallback, useState } from "react";
 import { View, StyleSheet, type LayoutChangeEvent } from "react-native";
-import { useAppDesignTokens, useAlert, AlertType, AlertMode, useSharing, type DesignTokens } from "@umituz/react-native-design-system";
-import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import {
+  useAppDesignTokens,
+  useAlert,
+  AlertType,
+  AlertMode,
+  useSharing,
+  FilterBottomSheet,
+  type DesignTokens,
+  type BottomSheetModalRef
+} from "@umituz/react-native-design-system";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
-import { GalleryHeader, CreationsGrid, FilterBottomSheet, CreationImageViewer, GalleryEmptyStates } from "../components";
+import { GalleryHeader, CreationsGrid, CreationImageViewer, GalleryEmptyStates } from "../components";
 import { getTranslatedTypes, getFilterCategoriesFromConfig } from "../utils/filterUtils";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
@@ -45,7 +55,7 @@ export function CreationsGalleryScreen({
   const [viewerVisible, setViewerVisible] = useState(false);
   const [viewerIndex, setViewerIndex] = useState(0);
   const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
-  const filterSheetRef = React.useRef<BottomSheetModal>(null);
+  const filterSheetRef = React.useRef<BottomSheetModalRef>(null);
 
   const { data: creationsData, isLoading, refetch } = useCreations({ userId, repository });
   const creations = creationsData;
@@ -151,7 +161,17 @@ export function CreationsGalleryScreen({
           countLabel={t(config.translations.photoCount) || 'photos'}
           isFiltered={isFiltered}
           filterLabel={t(config.translations.filterLabel) || 'Filter'}
-          onFilterPress={() => filterSheetRef.current?.present()}
+          onFilterPress={() => {
+            if (__DEV__) {
+              // eslint-disable-next-line no-console
+              console.log('[CreationsGallery] Filter button pressed');
+              // eslint-disable-next-line no-console
+              console.log('[CreationsGallery] filterSheetRef.current:', filterSheetRef.current);
+              // eslint-disable-next-line no-console
+              console.log('[CreationsGallery] allCategories:', allCategories);
+            }
+            filterSheetRef.current?.present();
+          }}
           style={{ paddingTop: insets.top + tokens.spacing.md }}
         />
       )}

package/src/domains/creations/presentation/utils/filterUtils.ts

@@ -1,5 +1,5 @@
-import { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
-import { FilterCategory } from "../components/FilterBottomSheet";
+import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
+import type { FilterCategory } from "@umituz/react-native-design-system";
 
 /**
  * Transforms the creations configuration into filter categories for the UI.

package/src/domains/creations/presentation/components/FilterBottomSheet.tsx

@@ -1,171 +0,0 @@
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
-import { useAppDesignTokens, AtomicText, AtomicIcon, type DesignTokens } from '@umituz/react-native-design-system';
-import { BottomSheetModal } from '@gorhom/bottom-sheet';
-
-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;
-    snapPoints?: string[];
-}
-
-export const FilterBottomSheet = forwardRef<BottomSheetModal, FilterBottomSheetProps>((props, ref) => {
-    const { categories, selectedIds, onFilterPress, onClearFilters, title, snapPoints: propSnapPoints } = props;
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    const snapPoints = useMemo(() => propSnapPoints || ['50%', '75%'], [propSnapPoints]);
-
-    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}
-                                size="sm"
-                                color={isSelected ? "primary" : "onSurface"}
-                            />
-                        </View>
-                    )}
-                    <AtomicText
-                        style={[styles.optionLabel, isSelected && styles.optionLabelSelected]}
-                    >
-                        {option.label}
-                    </AtomicText>
-                </View>
-                {isSelected && (
-                    <AtomicIcon name="checkmark" size="sm" color="primary" />
-                )}
-            </TouchableOpacity>
-        );
-    }, [onFilterPress, selectedIds, styles]);
-
-    const backgroundStyle = useMemo(() => ({
-        backgroundColor: tokens.colors.surface,
-    }), [tokens.colors.surface]);
-
-    const handleIndicatorStyle = useMemo(() => ({
-        backgroundColor: tokens.colors.outline,
-    }), [tokens.colors.outline]);
-
-    return (
-        <BottomSheetModal
-            ref={ref}
-            snapPoints={snapPoints}
-            backgroundStyle={backgroundStyle}
-            handleIndicatorStyle={handleIndicatorStyle}
-            enablePanDownToClose
-        >
-            <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>
-    );
-});
-
-FilterBottomSheet.displayName = 'FilterBottomSheet';
-
-const useStyles = (tokens: DesignTokens) => 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.borders.radius.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.textPrimary,
-        fontSize: 14,
-    },
-    optionLabelSelected: {
-        color: tokens.colors.primary,
-        fontWeight: 'bold',
-    },
-});