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

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/useBottomSheet.ts

@@ -1,133 +1,16 @@
-/**
- * useBottomSheet Hook
- *
- * React hook for managing bottom sheet state and interactions.
- * Provides a clean API for common bottom sheet operations.
- *
- * Features:
- * - Open/close bottom sheet
- * - Snap to specific index
- * - Expand to max height
- * - Collapse to min height
- * - Track current position
- * - Preset configurations
- *
- * Usage:
- * ```tsx
- * const { sheetRef, open, close, expand, collapse } = useBottomSheet();
- *
- * return (
- *   <>
- *     <Button onPress={open}>Open Sheet</Button>
- *     <BottomSheet ref={sheetRef} preset="medium">
- *       <Text>Content</Text>
- *     </BottomSheet>
- *   </>
- * );
- * ```
- */
-
 import { useRef, useCallback } from 'react';
-import type { BottomSheetRef } from '../components/BottomSheet';
-
-/**
- * Return type for useBottomSheet hook
- */
-export interface UseBottomSheetReturn {
-  /**
-   * Ref to attach to BottomSheet component
-   */
-  sheetRef: React.RefObject<BottomSheetRef | null>;
-
-  /**
-   * Open bottom sheet to initial index
-   */
-  open: () => void;
-
-  /**
-   * Close bottom sheet completely
-   */
-  close: () => void;
-
-  /**
-   * Expand to maximum height
-   */
-  expand: () => void;
-
-  /**
-   * Collapse to minimum height
-   */
-  collapse: () => void;
-
-  /**
-   * Snap to specific index
-   */
-  snapToIndex: (index: number) => void;
+import type { BottomSheetRef, UseBottomSheetReturn } from '../../domain/entities/BottomSheet';
 
-  /**
-   * Snap to specific position
-   */
-  snapToPosition: (position: string | number) => void;
-}
-
-/**
- * useBottomSheet Hook
- *
- * Hook for managing bottom sheet state and interactions.
- * Provides imperative methods for controlling the sheet.
- */
 export const useBottomSheet = (): UseBottomSheetReturn => {
   const sheetRef = useRef<BottomSheetRef>(null);
 
-  /**
-   * Open bottom sheet to first snap point
-   */
-  const open = useCallback(() => {
-    sheetRef.current?.snapToIndex(0);
-  }, []);
-
-  /**
-   * Close bottom sheet completely
-   */
-  const close = useCallback(() => {
-    sheetRef.current?.close();
-  }, []);
-
-  /**
-   * Expand to maximum height (last snap point)
-   */
-  const expand = useCallback(() => {
-    sheetRef.current?.expand();
-  }, []);
-
-  /**
-   * Collapse to minimum height (first snap point)
-   */
-  const collapse = useCallback(() => {
-    sheetRef.current?.collapse();
-  }, []);
+  const open = useCallback(() => sheetRef.current?.snapToIndex(0), []);
+  const close = useCallback(() => sheetRef.current?.close(), []);
+  const expand = useCallback(() => sheetRef.current?.expand(), []);
+  const collapse = useCallback(() => sheetRef.current?.collapse(), []);
+  const snapToIndex = useCallback((index: number) => sheetRef.current?.snapToIndex(index), []);
+  const snapToPosition = useCallback((pos: string | number) => sheetRef.current?.snapToPosition(pos), []);
 
-  /**
-   * Snap to specific index
-   */
-  const snapToIndex = useCallback((index: number) => {
-    sheetRef.current?.snapToIndex(index);
-  }, []);
-
-  /**
-   * Snap to specific position (percentage or fixed)
-   */
-  const snapToPosition = useCallback((position: string | number) => {
-    sheetRef.current?.snapToPosition(position);
-  }, []);
-
-  return {
-    sheetRef,
-    open,
-    close,
-    expand,
-    collapse,
-    snapToIndex,
-    snapToPosition,
-  };
+  return { sheetRef, open, close, expand, collapse, snapToIndex, snapToPosition };
 };
+

package/src/presentation/hooks/useBottomSheetModal.ts

@@ -1,134 +1,17 @@
-/**
- * useBottomSheetModal Hook
- *
- * React hook for managing bottom sheet modal state and interactions.
- * Provides a clean API for common bottom sheet modal operations.
- *
- * Features:
- * - Present/dismiss bottom sheet modal
- * - Snap to specific index
- * - Expand to max height
- * - Collapse to min height
- * - Track current position
- * - Preset configurations
- *
- * Usage:
- * ```tsx
- * const { modalRef, present, dismiss, expand, collapse } = useBottomSheetModal();
- *
- * return (
- *   <>
- *     <Button onPress={present}>Open Modal</Button>
- *     <BottomSheetModal ref={modalRef} preset="medium">
- *       <Text>Content</Text>
- *     </BottomSheetModal>
- *   </>
- * );
- * ```
- */
-
 import { useRef, useCallback } from 'react';
-import type { BottomSheetModalRef } from '../components/BottomSheetModal';
-
-/**
- * Return type for useBottomSheetModal hook
- */
-export interface UseBottomSheetModalReturn {
-  /**
-   * Ref to attach to BottomSheetModal component
-   */
-  modalRef: React.RefObject<BottomSheetModalRef | null>;
-
-  /**
-   * Present bottom sheet modal
-   */
-  present: () => void;
-
-  /**
-   * Dismiss bottom sheet modal
-   */
-  dismiss: () => void;
-
-  /**
-   * Expand to maximum height
-   */
-  expand: () => void;
-
-  /**
-   * Collapse to minimum height
-   */
-  collapse: () => void;
-
-  /**
-   * Snap to specific index
-   */
-  snapToIndex: (index: number) => void;
+import type { BottomSheetModalRef, UseBottomSheetModalReturn } from '../../domain/entities/BottomSheet';
 
-  /**
-   * Snap to specific position
-   */
-  snapToPosition: (position: string | number) => void;
-}
-
-/**
- * useBottomSheetModal Hook
- *
- * Hook for managing bottom sheet modal state and interactions.
- * Provides imperative methods for controlling the modal.
- */
 export const useBottomSheetModal = (): UseBottomSheetModalReturn => {
   const modalRef = useRef<BottomSheetModalRef>(null);
 
-  /**
-   * Present bottom sheet modal
-   */
-  const present = useCallback(() => {
-    modalRef.current?.present();
-  }, []);
-
-  /**
-   * Dismiss bottom sheet modal
-   */
-  const dismiss = useCallback(() => {
-    modalRef.current?.dismiss();
-  }, []);
-
-  /**
-   * Expand to maximum height (last snap point)
-   */
-  const expand = useCallback(() => {
-    modalRef.current?.expand();
-  }, []);
-
-  /**
-   * Collapse to minimum height (first snap point)
-   */
-  const collapse = useCallback(() => {
-    modalRef.current?.collapse();
-  }, []);
+  const present = useCallback(() => modalRef.current?.present(), []);
+  const dismiss = useCallback(() => modalRef.current?.dismiss(), []);
+  const expand = useCallback(() => modalRef.current?.expand(), []);
+  const collapse = useCallback(() => modalRef.current?.collapse(), []);
+  const snapToIndex = useCallback((index: number) => modalRef.current?.snapToIndex(index), []);
+  const snapToPosition = useCallback((pos: string | number) => modalRef.current?.snapToPosition(pos), []);
 
-  /**
-   * Snap to specific index
-   */
-  const snapToIndex = useCallback((index: number) => {
-    modalRef.current?.snapToIndex(index);
-  }, []);
-
-  /**
-   * Snap to specific position (percentage or fixed)
-   */
-  const snapToPosition = useCallback((position: string | number) => {
-    modalRef.current?.snapToPosition(position);
-  }, []);
-
-  return {
-    modalRef,
-    present,
-    dismiss,
-    expand,
-    collapse,
-    snapToIndex,
-    snapToPosition,
-  };
+  return { modalRef, present, dismiss, expand, collapse, snapToIndex, snapToPosition };
 };
 
+