@umituz/react-native-design-system 2.3.8 → 2.3.10

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef, useCallback, useMemo, useImperativeHandle, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import GorhomBottomSheet, {
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { useAppDesignTokens } from '../../../theme';
+import type {
+  BottomSheetConfig,
+  BottomSheetRef,
+  BottomSheetProps,
+} from '../types/BottomSheet';
+import { BottomSheetUtils } from '../types/BottomSheet';
+
+export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props, ref) => {
+  const {
+    children,
+    preset = 'medium',
+    snapPoints: customSnapPoints,
+    initialIndex,
+    enableBackdrop = true,
+    backdropAppearsOnIndex,
+    backdropDisappearsOnIndex,
+    keyboardBehavior = 'interactive',
+    enableHandleIndicator = true,
+    enablePanDownToClose = true,
+    enableDynamicSizing = false,
+    onChange,
+    onClose,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const sheetRef = useRef<GorhomBottomSheet>(null);
+
+  const config: BottomSheetConfig = useMemo(() => {
+    if (customSnapPoints) {
+      return BottomSheetUtils.createConfig({
+        snapPoints: customSnapPoints,
+        initialIndex,
+        enableBackdrop,
+        backdropAppearsOnIndex,
+        backdropDisappearsOnIndex,
+        keyboardBehavior,
+        enableHandleIndicator,
+        enablePanDownToClose,
+        enableDynamicSizing,
+      });
+    }
+    return BottomSheetUtils.getPreset(preset);
+  }, [preset, customSnapPoints, initialIndex, enableBackdrop, backdropAppearsOnIndex, backdropDisappearsOnIndex, keyboardBehavior, enableHandleIndicator, enablePanDownToClose, enableDynamicSizing]);
+
+  const renderBackdrop = useCallback(
+    (backdropProps: BottomSheetBackdropProps) =>
+      enableBackdrop ? (
+        <BottomSheetBackdrop
+          {...backdropProps}
+          appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
+          disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
+          opacity={0.5}
+          pressBehavior="close"
+        />
+      ) : null,
+    [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
+  );
+
+  const handleSheetChange = useCallback(
+    (index: number) => {
+      onChange?.(index);
+      if (index === -1) onClose?.();
+    },
+    [onChange, onClose]
+  );
+
+  useImperativeHandle(ref, () => ({
+    snapToIndex: (index: number) => sheetRef.current?.snapToIndex(index),
+    snapToPosition: (pos: string | number) => sheetRef.current?.snapToPosition(pos),
+    expand: () => sheetRef.current?.expand(),
+    collapse: () => sheetRef.current?.collapse(),
+    close: () => sheetRef.current?.close(),
+  }));
+
+  if (!config.snapPoints || config.snapPoints.length === 0) return null;
+
+  return (
+    <GorhomBottomSheet
+      ref={sheetRef}
+      index={-1}
+      snapPoints={config.snapPoints}
+      enableDynamicSizing={config.enableDynamicSizing}
+      backdropComponent={renderBackdrop}
+      keyboardBehavior={config.keyboardBehavior}
+      enableHandlePanningGesture={config.enableHandleIndicator}
+      enablePanDownToClose={config.enablePanDownToClose}
+      onChange={handleSheetChange}
+      backgroundStyle={[styles.background, { backgroundColor: tokens.colors.surface }]}
+      handleIndicatorStyle={[styles.handleIndicator, { backgroundColor: tokens.colors.border }]}
+    >
+      <BottomSheetView style={styles.contentContainer}>
+        {children}
+      </BottomSheetView>
+    </GorhomBottomSheet>
+  );
+});
+
+BottomSheet.displayName = 'BottomSheet';
+
+const styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  handleIndicator: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+});
+

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, useCallback, useMemo, useImperativeHandle, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  BottomSheetModal as GorhomBottomSheetModal,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { useAppDesignTokens } from '../../../theme';
+import type {
+  BottomSheetConfig,
+  BottomSheetModalRef,
+  BottomSheetModalProps,
+} from '../types/BottomSheet';
+import { BottomSheetUtils } from '../types/BottomSheet';
+
+export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModalProps>((props, ref) => {
+  const {
+    children,
+    preset = 'medium',
+    snapPoints: customSnapPoints,
+    initialIndex,
+    enableBackdrop = true,
+    backdropAppearsOnIndex,
+    backdropDisappearsOnIndex,
+    keyboardBehavior = 'interactive',
+    enableHandleIndicator = true,
+    enablePanDownToClose = true,
+    enableDynamicSizing = false,
+    onChange,
+    onDismiss,
+    backgroundColor,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const modalRef = useRef<GorhomBottomSheetModal>(null);
+
+  const config: BottomSheetConfig = useMemo(() => {
+    if (customSnapPoints) {
+      return BottomSheetUtils.createConfig({
+        snapPoints: customSnapPoints,
+        initialIndex,
+        enableBackdrop,
+        backdropAppearsOnIndex,
+        backdropDisappearsOnIndex,
+        keyboardBehavior,
+        enableHandleIndicator,
+        enablePanDownToClose,
+        enableDynamicSizing,
+      });
+    }
+    return BottomSheetUtils.getPreset(preset);
+  }, [preset, customSnapPoints, initialIndex, enableBackdrop, backdropAppearsOnIndex, backdropDisappearsOnIndex, keyboardBehavior, enableHandleIndicator, enablePanDownToClose, enableDynamicSizing]);
+
+  const renderBackdrop = useCallback(
+    (backdropProps: BottomSheetBackdropProps) =>
+      enableBackdrop ? (
+        <BottomSheetBackdrop
+          {...backdropProps}
+          appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
+          disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
+          opacity={0.5}
+          pressBehavior="close"
+        />
+      ) : null,
+    [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
+  );
+
+  const handleSheetChange = useCallback(
+    (index: number) => {
+      onChange?.(index);
+      if (index === -1) onDismiss?.();
+    },
+    [onChange, onDismiss]
+  );
+
+  useImperativeHandle(ref, () => ({
+    present: () => modalRef.current?.present(),
+    dismiss: () => modalRef.current?.dismiss(),
+    snapToIndex: (index: number) => modalRef.current?.snapToIndex(index),
+    snapToPosition: (pos: string | number) => modalRef.current?.snapToPosition(pos),
+    expand: () => modalRef.current?.expand(),
+    collapse: () => modalRef.current?.collapse(),
+  }));
+
+  return (
+    <GorhomBottomSheetModal
+      ref={modalRef}
+      index={-1}
+      snapPoints={config.snapPoints}
+      enableDynamicSizing={config.enableDynamicSizing}
+      backdropComponent={renderBackdrop}
+      keyboardBehavior={config.keyboardBehavior}
+      enableHandlePanningGesture={config.enableHandleIndicator}
+      enablePanDownToClose={config.enablePanDownToClose}
+      onChange={handleSheetChange}
+      onDismiss={onDismiss}
+      backgroundStyle={[styles.background, { backgroundColor: backgroundColor || tokens.colors.surface }]}
+      handleIndicatorStyle={[styles.handleIndicator, { backgroundColor: tokens.colors.border }]}
+    >
+      <BottomSheetView style={styles.contentContainer}>
+        {children}
+      </BottomSheetView>
+    </GorhomBottomSheetModal>
+  );
+});
+
+BottomSheetModal.displayName = 'BottomSheetModal';
+
+const styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  handleIndicator: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+});
+

package/src/molecules/bottom-sheet/components/SafeBottomSheetModalProvider.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+interface SafeBottomSheetModalProviderProps {
+  children: ReactNode;
+}
+
+export const SafeBottomSheetModalProvider = ({ children }: SafeBottomSheetModalProviderProps) => (
+  <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+);
+

package/src/molecules/bottom-sheet/components/filter/FilterBottomSheet.tsx

@@ -0,0 +1,168 @@
+/**
+ * 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 '../../types/BottomSheet';
+import { AtomicText, AtomicIcon, AtomicButton } from '../../../atoms';
+import { useAppDesignTokens } from '../../../../theme';
+import type { FilterOption, FilterCategory } from '../../types/Filter';
+import { FilterUtils } from '../../types/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 clearLabel?: string;
+    readonly applyLabel?: string;
+    readonly defaultId?: string;
+}
+
+export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomSheetProps>(({
+    categories,
+    selectedIds,
+    onFilterPress,
+    onClearFilters,
+    onDismiss,
+    title,
+    clearLabel = 'Clear',
+    applyLabel = 'Apply',
+    defaultId = 'all'
+}, ref) => {
+    const tokens = useAppDesignTokens();
+
+    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 || 'Filter'}</AtomicText>
+                    {hasActiveFilters && (
+                        <TouchableOpacity onPress={onClearFilters}>
+                            <AtomicText type="labelLarge" color="error">{clearLabel}</AtomicText>
+                        </TouchableOpacity>
+                    )}
+                </View>
+
+                <ScrollView showsVerticalScrollIndicator={false}>
+                    {categories.map(renderCategory)}
+                </ScrollView>
+
+                <View style={styles.footer}>
+                    <AtomicButton
+                        onPress={() => (ref as any).current?.dismiss()}
+                        fullWidth
+                    >
+                        {applyLabel}
+                    </AtomicButton>
+                </View>
+            </View>
+        </BottomSheetModal>
+    );
+});
+
+FilterBottomSheet.displayName = 'FilterBottomSheet';

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -0,0 +1,116 @@
+import React, { useCallback } from "react";
+import { View, StyleSheet, ScrollView, Modal, Pressable } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AtomicButton } from "../../../atoms";
+import { useAppDesignTokens } from "../../../../theme";
+import type { FilterOption } from "../../types/Filter";
+import { FilterUtils } from "../../types/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;
+  clearLabel?: string;
+}
+
+export const FilterSheet: React.FC<FilterSheetProps> = ({
+  visible,
+  options,
+  selectedIds,
+  onFilterPress,
+  onClearFilters,
+  onClose,
+  defaultFilterId = "all",
+  title,
+  clearLabel = "Clear"
+}) => {
+  const tokens = useAppDesignTokens();
+  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 || "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>
+                {clearLabel}
+              </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/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetHeader.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '../../../../../atoms';
+import type { useAppDesignTokens } from '../../../../../theme';
+
+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/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetOption.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '../../../../../atoms';
+import type { useAppDesignTokens } from '../../../../../theme';
+import type { FilterOption } from '../../../types/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/molecules/bottom-sheet/hooks/useBottomSheet.ts

@@ -0,0 +1,16 @@
+import { useRef, useCallback } from 'react';
+import type { BottomSheetRef, UseBottomSheetReturn } from '../types/BottomSheet';
+
+export const useBottomSheet = (): UseBottomSheetReturn => {
+  const sheetRef = useRef<BottomSheetRef>(null);
+
+  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), []);
+
+  return { sheetRef, open, close, expand, collapse, snapToIndex, snapToPosition };
+};
+

package/src/molecules/bottom-sheet/hooks/useBottomSheetModal.ts

@@ -0,0 +1,17 @@
+import { useRef, useCallback } from 'react';
+import type { BottomSheetModalRef, UseBottomSheetModalReturn } from '../types/BottomSheet';
+
+export const useBottomSheetModal = (): UseBottomSheetModalReturn => {
+  const modalRef = useRef<BottomSheetModalRef>(null);
+
+  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), []);
+
+  return { modalRef, present, dismiss, expand, collapse, snapToIndex, snapToPosition };
+};
+
+