@umituz/react-native-bottom-sheet 1.3.5 → 1.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.3.5",
-  "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
+  "version": "1.4.0",
+  "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, smooth animations, and advanced filtering capabilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
@@ -16,7 +16,9 @@
     "bottom-sheet",
     "modal",
     "sheet",
-    "overlay"
+    "overlay",
+    "filter",
+    "filtering"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -27,10 +29,12 @@
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4.6.0",
     "@umituz/react-native-design-system": "2.0.16",
+    "@umituz/react-native-localization": "latest",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0"
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
@@ -38,6 +42,8 @@
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
     "@umituz/react-native-design-system": "2.0.16",
+    "@umituz/react-native-localization": "^3.5.25",
+    "@umituz/react-native-storage": "^2.4.5",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-native": "^5.0.0",
@@ -45,6 +51,7 @@
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.0.0",
     "react-native-reanimated": "^3.0.0",
+    "react-native-safe-area-context": "^5.6.2",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/domain/entities/Filter.ts

@@ -0,0 +1,48 @@
+/**
+ * Domain - Filter Entities
+ */
+
+export interface FilterOption {
+    id: string;
+    label: string;
+    icon?: string;
+    type?: string;
+    count?: number;
+}
+
+export interface FilterCategory {
+    id: string;
+    title: string;
+    options: FilterOption[];
+    multiSelect?: boolean;
+}
+
+export class FilterUtils {
+    static hasActiveFilter(selectedIds: string[], defaultId: string = "all"): boolean {
+        if (selectedIds.length === 0) return false;
+        if (selectedIds.length === 1 && selectedIds[0] === defaultId) return false;
+        return true;
+    }
+
+    static toggleFilter(
+        selectedIds: string[],
+        filterId: string,
+        multiSelect: boolean = false,
+        defaultId: string = "all"
+    ): string[] {
+        if (filterId === defaultId) {
+            return [defaultId];
+        }
+
+        if (multiSelect) {
+            const newIds = selectedIds.filter((id) => id !== defaultId);
+            if (newIds.includes(filterId)) {
+                const filtered = newIds.filter((id) => id !== filterId);
+                return filtered.length === 0 ? [defaultId] : filtered;
+            }
+            return [...newIds, filterId];
+        }
+
+        return [filterId];
+    }
+}

package/src/index.ts

@@ -4,3 +4,9 @@ export * from './presentation/components/SafeBottomSheetModalProvider';
 export * from './presentation/hooks/useBottomSheet';
 export * from './presentation/hooks/useBottomSheetModal';
 export * from './domain/entities/BottomSheet';
+
+// Filter exports
+export * from './domain/entities/Filter';
+export * from './presentation/components/filter/FilterSheet';
+export * from './presentation/components/filter/FilterBottomSheet';
+export * from './presentation/hooks/useListFilters';

package/src/presentation/components/filter/FilterBottomSheet.tsx

@@ -0,0 +1,166 @@
+/**
+ * Presentation - Filter Bottom Sheet component
+ * 
+ * Advanced filtering UI using @umituz/react-native-bottom-sheet
+ */
+
+import React, { forwardRef, useCallback } from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { BottomSheetModal } from '../BottomSheetModal';
+import type { BottomSheetModalRef } from '../../../domain/entities/BottomSheet';
+import { AtomicText, AtomicIcon, AtomicButton } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { useLocalization } from '@umituz/react-native-localization';
+import type { FilterOption, FilterCategory } from '../../../domain/entities/Filter';
+import { FilterUtils } from '../../../domain/entities/Filter';
+
+export interface FilterBottomSheetProps {
+    readonly categories: FilterCategory[];
+    readonly selectedIds: string[];
+    readonly onFilterPress: (id: string, categoryId: string) => void;
+    readonly onClearFilters: () => void;
+    readonly onDismiss?: () => void;
+    readonly title?: string;
+    readonly defaultId?: string;
+}
+
+export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomSheetProps>(({
+    categories,
+    selectedIds,
+    onFilterPress,
+    onClearFilters,
+    onDismiss,
+    title,
+    defaultId = 'all'
+}, ref) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+
+    const styles = React.useMemo(() => StyleSheet.create({
+        container: {
+            flex: 1,
+            padding: 16,
+        },
+        header: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 20,
+        },
+        category: {
+            marginBottom: 24,
+        },
+        categoryTitle: {
+            marginBottom: 12,
+            opacity: 0.7,
+        },
+        optionsGrid: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 8,
+        },
+        option: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+            borderRadius: 20,
+            backgroundColor: tokens.colors.surfaceVariant,
+            gap: 6,
+            borderWidth: 1,
+            borderColor: 'transparent',
+        },
+        optionLeft: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+        },
+        footer: {
+            marginTop: 16,
+            paddingBottom: 8,
+        }
+    }), [tokens]);
+
+    const renderOption = useCallback((option: FilterOption, categoryId: string) => {
+        const isSelected = selectedIds.includes(option.id);
+
+        return (
+            <TouchableOpacity
+                key={option.id}
+                style={[
+                    styles.option,
+                    isSelected && { backgroundColor: tokens.colors.primary + '15' }
+                ]}
+                onPress={() => onFilterPress(option.id, categoryId)}
+            >
+                <View style={styles.optionLeft}>
+                    {option.icon && (
+                        <AtomicIcon
+                            name={option.icon as any}
+                            size="sm"
+                            color={isSelected ? 'primary' : 'secondary'}
+                        />
+                    )}
+                    <AtomicText
+                        type="bodyMedium"
+                        style={[isSelected && { color: tokens.colors.primary, fontWeight: '600' }]}
+                    >
+                        {option.label}
+                    </AtomicText>
+                </View>
+                {isSelected && (
+                    <AtomicIcon name="checkmark" size="sm" color="primary" />
+                )}
+            </TouchableOpacity>
+        );
+    }, [selectedIds, tokens, onFilterPress]);
+
+    const renderCategory = useCallback((category: FilterCategory) => (
+        <View key={category.id} style={styles.category}>
+            <AtomicText type="labelLarge" style={styles.categoryTitle}>
+                {category.title}
+            </AtomicText>
+            <View style={styles.optionsGrid}>
+                {category.options.map(option => renderOption(option, category.id))}
+            </View>
+        </View>
+    ), [renderOption, styles]);
+
+
+    const hasActiveFilters = FilterUtils.hasActiveFilter(selectedIds, defaultId);
+
+    return (
+        <BottomSheetModal
+            ref={ref}
+            preset="medium"
+            onDismiss={onDismiss}
+            backgroundColor={tokens.colors.surface}
+        >
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <AtomicText type="headlineSmall">{title || t('common.filter')}</AtomicText>
+                    {hasActiveFilters && (
+                        <TouchableOpacity onPress={onClearFilters}>
+                            <AtomicText type="labelLarge" color="error">{t('common.clear')}</AtomicText>
+                        </TouchableOpacity>
+                    )}
+                </View>
+
+                <ScrollView showsVerticalScrollIndicator={false}>
+                    {categories.map(renderCategory)}
+                </ScrollView>
+
+                <View style={styles.footer}>
+                    <AtomicButton
+                        onPress={() => (ref as any).current?.dismiss()}
+                        fullWidth
+                    >
+                        {t('common.apply')}
+                    </AtomicButton>
+                </View>
+            </View>
+        </BottomSheetModal>
+    );
+});
+
+FilterBottomSheet.displayName = 'FilterBottomSheet';

package/src/presentation/components/filter/FilterSheet.tsx

@@ -0,0 +1,115 @@
+import React, { useCallback } from "react";
+import { View, StyleSheet, ScrollView, Modal, Pressable } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AtomicButton, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { FilterOption } from "../../../domain/entities/Filter";
+import { FilterUtils } from "../../../domain/entities/Filter";
+import { FilterSheetHeader } from "./FilterSheetComponents/FilterSheetHeader";
+import { FilterSheetOption } from "./FilterSheetComponents/FilterSheetOption";
+
+export interface FilterSheetProps {
+  visible: boolean;
+  options: FilterOption[];
+  selectedIds: string[];
+  onFilterPress: (filterId: string) => void;
+  onClearFilters: () => void;
+  onClose?: () => void;
+  defaultFilterId?: string;
+  title?: string;
+}
+
+export const FilterSheet: React.FC<FilterSheetProps> = ({
+  visible,
+  options,
+  selectedIds,
+  onFilterPress,
+  onClearFilters,
+  onClose,
+  defaultFilterId = "all",
+  title,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+  const insets = useSafeAreaInsets();
+
+  const hasActiveFilter = FilterUtils.hasActiveFilter(selectedIds, defaultFilterId);
+
+  const handleFilterPressWithClose = useCallback((id: string) => {
+    onFilterPress(id);
+    onClose?.();
+  }, [onFilterPress, onClose]);
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <Pressable style={styles.backdrop} onPress={onClose}>
+        <Pressable
+          style={[styles.sheet, { backgroundColor: tokens.colors.surface, paddingBottom: insets.bottom }]}
+          onPress={(e) => e.stopPropagation()}
+        >
+          <View style={[styles.handle, { backgroundColor: tokens.colors.border }]} />
+
+          <FilterSheetHeader
+            title={title || t("general.filter")}
+            onClose={() => onClose?.()}
+            tokens={tokens}
+          />
+
+          <ScrollView style={styles.optionsList} showsVerticalScrollIndicator={false}>
+            {options.map((option) => (
+              <FilterSheetOption
+                key={option.id}
+                option={option}
+                isSelected={selectedIds.includes(option.id)}
+                onPress={handleFilterPressWithClose}
+                tokens={tokens}
+              />
+            ))}
+          </ScrollView>
+
+          {hasActiveFilter && (
+            <View style={[styles.footer, { borderTopColor: tokens.colors.border, borderTopWidth: tokens.borders.width.thin }]}>
+              <AtomicButton variant="outline" onPress={onClearFilters} fullWidth>
+                {t("general.clear")}
+              </AtomicButton>
+            </View>
+          )}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+FilterSheet.displayName = "FilterSheet";
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "flex-end",
+  },
+  sheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    maxHeight: "80%",
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    alignSelf: "center",
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  optionsList: {
+    maxHeight: 400,
+    paddingVertical: 8,
+  },
+  footer: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+});
+
+

package/src/presentation/components/filter/FilterSheetComponents/FilterSheetHeader.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import type { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+interface FilterSheetHeaderProps {
+    title: string;
+    onClose: () => void;
+    tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+export const FilterSheetHeader = ({ title, onClose, tokens }: FilterSheetHeaderProps) => (
+    <View style={[styles.header, { borderBottomColor: tokens.colors.border, borderBottomWidth: tokens.borders.width.thin }]}>
+        <AtomicText type="headlineMedium" style={styles.title}>{title}</AtomicText>
+        <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <AtomicIcon name="close" size="md" color="primary" />
+        </TouchableOpacity>
+    </View>
+);
+
+const styles = StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 20,
+        paddingBottom: 16,
+        paddingTop: 8,
+    },
+    title: {
+        fontWeight: '600',
+    },
+});

package/src/presentation/components/filter/FilterSheetComponents/FilterSheetOption.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import type { useAppDesignTokens } from '@umituz/react-native-design-system';
+import type { FilterOption } from '../../../../domain/entities/Filter';
+
+interface FilterSheetOptionProps {
+    option: FilterOption;
+    isSelected: boolean;
+    onPress: (id: string) => void;
+    tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+export const FilterSheetOption = ({ option, isSelected, onPress, tokens }: FilterSheetOptionProps) => (
+    <TouchableOpacity
+        onPress={() => onPress(option.id)}
+        style={[
+            styles.option,
+            { borderBottomColor: tokens.colors.borderLight, borderBottomWidth: tokens.borders.width.thin },
+            isSelected && { backgroundColor: tokens.colors.primary + '15' }
+        ]}
+    >
+        <View style={styles.optionContent}>
+            {option.icon && (
+                <AtomicIcon
+                    name={option.icon as any}
+                    size="md"
+                    color={isSelected ? 'primary' : 'secondary'}
+                />
+            )}
+            <AtomicText
+                type="bodyLarge"
+                style={[styles.optionLabel, isSelected && { color: tokens.colors.primary, fontWeight: '600' }]}
+            >
+                {option.label}
+            </AtomicText>
+        </View>
+        {isSelected && <AtomicIcon name="checkmark-circle" size="md" color="primary" />}
+    </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+    option: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+    },
+    optionContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        flex: 1,
+    },
+    optionLabel: {
+        flex: 1,
+    },
+});

package/src/presentation/hooks/useListFilters.ts

@@ -0,0 +1,95 @@
+/**
+ * useListFilters Hook
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import { FilterOption } from '../../domain/entities/Filter';
+
+export interface FilterItem extends FilterOption {
+    active?: boolean;
+}
+
+export interface UseListFiltersReturn<T> {
+    filters: FilterItem[];
+    setFilters: (filters: FilterItem[]) => void;
+    activeFilters: FilterItem[];
+    selectedIds: string[];
+    applyFilters: (items: T[]) => T[];
+    toggleFilter: (id: string) => void;
+    handleFilterPress: (id: string) => void;
+    clearFilters: () => void;
+    handleClearFilters: () => void;
+}
+
+export interface UseListFiltersConfig<T> {
+    options: FilterOption[];
+    defaultFilterId?: string;
+    singleSelect?: boolean;
+    filterFn?: (item: T, activeFilters: FilterItem[]) => boolean;
+}
+
+// Overload 1: When config object is passed
+export function useListFilters<T>(config: UseListFiltersConfig<T>): UseListFiltersReturn<T>;
+// Overload 2: When initial filters array and optional filterFn are passed
+export function useListFilters<T>(initialFilters: FilterItem[], filterFn?: (item: T, activeFilters: FilterItem[]) => boolean): UseListFiltersReturn<T>;
+// Unified implementation
+export function useListFilters<T>(
+    configOrFilters: FilterItem[] | UseListFiltersConfig<T>,
+    filterFnParam?: (item: T, activeFilters: FilterItem[]) => boolean
+): UseListFiltersReturn<T> {
+    const isConfig = !Array.isArray(configOrFilters);
+
+    // Normalize initial state
+    const initialFilters = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).options.map(opt => ({
+            ...opt,
+            active: (configOrFilters as UseListFiltersConfig<T>).defaultFilterId
+                ? opt.id === (configOrFilters as UseListFiltersConfig<T>).defaultFilterId
+                : false
+        }))
+        : (configOrFilters as FilterItem[]);
+
+    const filterFn = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).filterFn
+        : filterFnParam;
+
+    const singleSelect = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).singleSelect
+        : false;
+
+    const [filters, setFilters] = useState<FilterItem[]>(initialFilters);
+
+    const activeFilters = useMemo(() => filters.filter((f) => f.active), [filters]);
+
+    const toggleFilter = useCallback((id: string) => {
+        setFilters((current) => {
+            if (singleSelect) {
+                return current.map((f) => ({ ...f, active: f.id === id }));
+            }
+            return current.map((f) => (f.id === id ? { ...f, active: !f.active } : f));
+        });
+    }, [singleSelect]);
+
+    const clearFilters = useCallback(() => {
+        setFilters((current) => current.map((f) => ({ ...f, active: false })));
+    }, []);
+
+    const applyFilters = useCallback((items: T[]) => {
+        if (activeFilters.length === 0 || !filterFn) return items;
+        return items.filter((item) => filterFn(item, activeFilters));
+    }, [activeFilters, filterFn]);
+
+    const selectedIds = useMemo(() => activeFilters.map((f) => f.id), [activeFilters]);
+
+    return {
+        filters,
+        setFilters,
+        activeFilters,
+        selectedIds,
+        applyFilters,
+        toggleFilter,
+        handleFilterPress: toggleFilter,
+        clearFilters,
+        handleClearFilters: clearFilters,
+    };
+}