@umituz/react-native-design-system 2.0.9 → 2.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/molecules/BaseModal.tsx

@@ -0,0 +1,98 @@
+/**
+ * BaseModal Component
+ * Generic fullscreen modal with responsive design
+ * Used across all modals in the app for consistency
+ */
+
+import React from 'react';
+import { View, Modal, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { useResponsive } from '../responsive';
+
+export interface BaseModalProps {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  dismissOnBackdrop?: boolean;
+  contentStyle?: ViewStyle;
+  testID?: string;
+}
+
+export const BaseModal: React.FC<BaseModalProps> = ({
+  visible,
+  onClose,
+  children,
+  dismissOnBackdrop = true,
+  contentStyle,
+  testID = 'base-modal',
+}) => {
+  const tokens = useAppDesignTokens();
+  const { modalLayout } = useResponsive();
+
+  const handleBackdropPress = React.useCallback(() => {
+    if (dismissOnBackdrop) {
+      onClose();
+    }
+  }, [dismissOnBackdrop, onClose]);
+
+  if (!visible) return null;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+      testID={testID}
+    >
+      <View style={styles.overlay}>
+        <TouchableOpacity
+          style={[
+            styles.backdrop,
+            { backgroundColor: `rgba(0, 0, 0, ${modalLayout.backdropOpacity})` }
+          ]}
+          activeOpacity={1}
+          onPress={handleBackdropPress}
+          testID={`${testID}-backdrop`}
+        />
+
+        <View
+          style={[
+            styles.content,
+            {
+              width: modalLayout.width,
+              height: modalLayout.height,
+              borderRadius: modalLayout.borderRadius,
+              backgroundColor: tokens.colors.backgroundPrimary,
+              borderColor: tokens.colors.border,
+            },
+            contentStyle,
+          ]}
+          testID={`${testID}-content`}
+        >
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  content: {
+    overflow: 'hidden',
+    borderWidth: 1,
+  },
+});

package/src/molecules/index.ts

@@ -9,6 +9,7 @@ export { ListItem, type ListItemProps } from './ListItem';
 export { SearchBar, type SearchBarProps } from './SearchBar';
 export { IconContainer } from './IconContainer';
 export { ScreenHeader, type ScreenHeaderProps } from './ScreenHeader';
+export { BaseModal, type BaseModalProps } from './BaseModal';
 export { ConfirmationModal } from './ConfirmationModalMain';
 export { useConfirmationModal } from './confirmation-modal/useConfirmationModal';
 

package/src/responsive/config.ts

@@ -54,29 +54,64 @@ export const SIZE_CONSTRAINTS = {
   LOGO_MAX_SMALL: 120,          // Maximum logo size for small phones
   LOGO_MIN_TABLET: 140,         // Minimum logo size for tablets
   LOGO_MAX_TABLET: 200,         // Maximum logo size for tablets
-  
+
   // Input height constraints
   INPUT_MAX_SMALL: 120,         // Maximum input height for small devices
   INPUT_MAX_MEDIUM: 150,        // Maximum input height for medium devices
   INPUT_MAX_LARGE: 200,          // Maximum input height for large devices
-  
+
   // Icon container constraints
   ICON_MAX_SMALL: 120,           // Maximum icon container for small phones
   ICON_MAX_TABLET: 180,          // Maximum icon container for tablets
-  
+
   // Content width constraints
   CONTENT_MAX_TABLET: 600,       // Maximum content width for tablets
-  
+
   // Modal height constraints
   MODAL_MIN_SMALL: 250,         // Minimum modal height for small devices
   MODAL_MIN_STANDARD: 300,       // Minimum modal height for standard devices
   MODAL_MIN_TABLET: 350,        // Minimum modal height for tablets
   MODAL_MAX_TABLET: 500,        // Maximum modal height for tablets
-  
+
   // Font size constraints
   FONT_MIN_SIZE: 11,             // Minimum font size
 } as const;
 
+/**
+ * Modal layout configuration
+ * Responsive values for modal/overlay components
+ */
+export const MODAL_CONFIG = {
+  // Width percentages by device type
+  WIDTH_PERCENT_PHONE: 0.92,       // 92% of screen width for phones
+  WIDTH_PERCENT_TABLET: 0.75,      // 75% of screen width for tablets
+
+  // Height percentages by device type
+  HEIGHT_PERCENT_SMALL: 0.85,      // 85% of screen height for small devices
+  HEIGHT_PERCENT_STANDARD: 0.88,   // 88% of screen height for standard devices
+  HEIGHT_PERCENT_TABLET: 0.80,     // 80% of screen height for tablets
+
+  // Max width constraints
+  MAX_WIDTH_PHONE: 480,            // Maximum modal width for phones
+  MAX_WIDTH_TABLET: 600,           // Maximum modal width for tablets
+
+  // Border radius by device type
+  BORDER_RADIUS_PHONE: 32,         // Border radius for phones
+  BORDER_RADIUS_TABLET: 24,        // Border radius for tablets
+
+  // Backdrop opacity
+  BACKDROP_OPACITY_DEFAULT: 0.85,  // Default backdrop opacity
+
+  // Bottom sheet specific
+  BOTTOM_SHEET_MIN_HEIGHT: 400,    // Minimum height for bottom sheets
+  BOTTOM_SHEET_MAX_HEIGHT_PERCENT: 0.9, // Max height percentage for bottom sheets
+
+  // Dialog specific
+  DIALOG_WIDTH_PERCENT: 0.94,      // Dialog width percentage
+  DIALOG_MAX_WIDTH: 500,           // Maximum dialog width
+  DIALOG_MAX_HEIGHT_PERCENT: 0.85, // Dialog max height percentage
+} as const;
+
 /**
  * Layout spacing and positioning
  * These values control spacing, padding, and positioning

package/src/responsive/index.ts

@@ -26,6 +26,17 @@ export {
   getResponsiveFABPosition,
   getResponsiveModalMaxHeight,
   getResponsiveMinModalHeight,
+  getResponsiveModalWidth,
+  getResponsiveModalHeight,
+  getResponsiveModalBorderRadius,
+  getResponsiveModalMaxWidth,
+  getResponsiveBackdropOpacity,
+  getResponsiveModalLayout,
+  getResponsiveBottomSheetLayout,
+  getResponsiveDialogLayout,
+  type ResponsiveModalLayout,
+  type ResponsiveBottomSheetLayout,
+  type ResponsiveDialogLayout,
   getResponsiveIconContainerSize,
   getResponsiveGridColumns,
   getResponsiveGridCellSize,
@@ -35,6 +46,7 @@ export {
   isLandscape,
   getDeviceType,
   DeviceType,
+  MODAL_CONFIG,
 } from './responsive';
 
 // Device detection exports

package/src/responsive/responsive.ts

@@ -34,9 +34,24 @@ export {
   getResponsiveHorizontalPadding,
   getResponsiveBottomPosition,
   getResponsiveFABPosition,
+} from './responsiveLayout';
+
+// Responsive modal utilities
+export {
   getResponsiveModalMaxHeight,
   getResponsiveMinModalHeight,
-} from './responsiveLayout';
+  getResponsiveModalWidth,
+  getResponsiveModalHeight,
+  getResponsiveModalBorderRadius,
+  getResponsiveModalMaxWidth,
+  getResponsiveBackdropOpacity,
+  getResponsiveModalLayout,
+  getResponsiveBottomSheetLayout,
+  getResponsiveDialogLayout,
+  type ResponsiveModalLayout,
+  type ResponsiveBottomSheetLayout,
+  type ResponsiveDialogLayout,
+} from './responsiveModal';
 
 // Platform constants
 export {
@@ -55,6 +70,7 @@ export {
   HEIGHT_THRESHOLDS,
   GRID_CONFIG,
   VALIDATION_CONSTRAINTS,
+  MODAL_CONFIG,
 } from './config';
 
 

package/src/responsive/responsiveLayout.ts

@@ -4,18 +4,11 @@
  */
 
 import { getScreenDimensions } from './deviceDetection';
-import {
-  DEVICE_BREAKPOINTS,
-  LAYOUT_CONSTANTS,
-  HEIGHT_THRESHOLDS,
-  SIZE_CONSTRAINTS,
-} from './config';
+import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from './config';
 import { validateNumber, validateSafeAreaInsets } from './validation';
 
 /**
  * Responsive horizontal padding
- * @param basePadding - Base padding value (default: 16)
- * @param insets - Safe area insets object
  */
 export const getResponsiveHorizontalPadding = (
   basePadding: number = LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
@@ -49,8 +42,6 @@ export const getResponsiveHorizontalPadding = (
 
 /**
  * Responsive bottom positioning
- * @param basePosition - Base bottom position (default: 32)
- * @param insets - Safe area insets object
  */
 export const getResponsiveBottomPosition = (
   basePosition: number = LAYOUT_CONSTANTS.BOTTOM_POSITION_BASE,
@@ -69,7 +60,6 @@ export const getResponsiveBottomPosition = (
 
 /**
  * Responsive FAB position
- * @param insets - Safe area insets object
  */
 export const getResponsiveFABPosition = (
   insets: { bottom?: number; right?: number } = { bottom: 0, right: 0 }
@@ -81,57 +71,28 @@ export const getResponsiveFABPosition = (
 
     if (width >= DEVICE_BREAKPOINTS.TABLET) {
       return {
-        bottom: Math.max(LAYOUT_CONSTANTS.FAB_BOTTOM_TABLET, bottom + LAYOUT_CONSTANTS.TAB_BAR_OFFSET),
-        right: Math.max(LAYOUT_CONSTANTS.FAB_RIGHT_TABLET, right + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE),
+        bottom: Math.max(
+          LAYOUT_CONSTANTS.FAB_BOTTOM_TABLET,
+          bottom + LAYOUT_CONSTANTS.TAB_BAR_OFFSET
+        ),
+        right: Math.max(
+          LAYOUT_CONSTANTS.FAB_RIGHT_TABLET,
+          right + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE
+        ),
       };
     }
 
     return {
-      bottom: Math.max(LAYOUT_CONSTANTS.TAB_BAR_OFFSET, bottom + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET),
-      right: Math.max(LAYOUT_CONSTANTS.FAB_RIGHT_PHONE, right + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET),
+      bottom: Math.max(
+        LAYOUT_CONSTANTS.TAB_BAR_OFFSET,
+        bottom + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET
+      ),
+      right: Math.max(
+        LAYOUT_CONSTANTS.FAB_RIGHT_PHONE,
+        right + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET
+      ),
     };
   } catch {
     return { bottom: 90, right: 20 };
   }
 };
-
-/**
- * Responsive modal max height
- */
-export const getResponsiveModalMaxHeight = (): string => {
-  try {
-    const { height } = getScreenDimensions();
-
-    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
-      return LAYOUT_CONSTANTS.MODAL_HEIGHT_SMALL;
-    } else if (height >= HEIGHT_THRESHOLDS.LARGE_DEVICE) {
-      return LAYOUT_CONSTANTS.MODAL_HEIGHT_TABLET;
-    }
-
-    return LAYOUT_CONSTANTS.MODAL_HEIGHT_STANDARD;
-  } catch {
-    return '70%';
-  }
-};
-
-/**
- * Responsive modal min height
- */
-export const getResponsiveMinModalHeight = (): number => {
-  try {
-    const { height } = getScreenDimensions();
-
-    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
-      const calculatedHeight = height * 0.4;
-      return Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_SMALL);
-    } else if (height >= HEIGHT_THRESHOLDS.LARGE_DEVICE) {
-      const calculatedHeight = height * 0.35;
-      return Math.min(Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_TABLET), SIZE_CONSTRAINTS.MODAL_MAX_TABLET);
-    }
-
-    const calculatedHeight = height * 0.45;
-    return Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_STANDARD);
-  } catch {
-    return 300;
-  }
-};

package/src/responsive/responsiveModal.ts

@@ -0,0 +1,179 @@
+/**
+ * Responsive Modal Utilities
+ * Modal, bottom sheet, and dialog layout utilities.
+ */
+
+import { getScreenDimensions } from './deviceDetection';
+import {
+  DEVICE_BREAKPOINTS,
+  LAYOUT_CONSTANTS,
+  HEIGHT_THRESHOLDS,
+  SIZE_CONSTRAINTS,
+  MODAL_CONFIG,
+} from './config';
+
+export interface ResponsiveModalLayout {
+  width: number;
+  height: number;
+  maxWidth: number;
+  borderRadius: number;
+  backdropOpacity: number;
+  horizontalPadding: number;
+}
+
+export interface ResponsiveBottomSheetLayout {
+  minHeight: number;
+  maxHeight: number;
+  borderRadius: number;
+}
+
+export interface ResponsiveDialogLayout {
+  width: number;
+  maxHeight: number;
+  borderRadius: number;
+}
+
+export const getResponsiveModalMaxHeight = (): string => {
+  try {
+    const { height } = getScreenDimensions();
+
+    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
+      return LAYOUT_CONSTANTS.MODAL_HEIGHT_SMALL;
+    } else if (height >= HEIGHT_THRESHOLDS.LARGE_DEVICE) {
+      return LAYOUT_CONSTANTS.MODAL_HEIGHT_TABLET;
+    }
+
+    return LAYOUT_CONSTANTS.MODAL_HEIGHT_STANDARD;
+  } catch {
+    return '70%';
+  }
+};
+
+export const getResponsiveMinModalHeight = (): number => {
+  try {
+    const { height } = getScreenDimensions();
+
+    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
+      const calculatedHeight = height * 0.4;
+      return Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_SMALL);
+    } else if (height >= HEIGHT_THRESHOLDS.LARGE_DEVICE) {
+      const calculatedHeight = height * 0.35;
+      return Math.min(
+        Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_TABLET),
+        SIZE_CONSTRAINTS.MODAL_MAX_TABLET
+      );
+    }
+
+    const calculatedHeight = height * 0.45;
+    return Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_STANDARD);
+  } catch {
+    return 300;
+  }
+};
+
+export const getResponsiveModalWidth = (): number => {
+  try {
+    const { width } = getScreenDimensions();
+    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+
+    const widthPercent = isTabletDevice
+      ? MODAL_CONFIG.WIDTH_PERCENT_TABLET
+      : MODAL_CONFIG.WIDTH_PERCENT_PHONE;
+
+    const maxWidth = isTabletDevice
+      ? MODAL_CONFIG.MAX_WIDTH_TABLET
+      : MODAL_CONFIG.MAX_WIDTH_PHONE;
+
+    return Math.min(width * widthPercent, maxWidth);
+  } catch {
+    return 400;
+  }
+};
+
+export const getResponsiveModalHeight = (): number => {
+  try {
+    const { width, height } = getScreenDimensions();
+    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+
+    if (isTabletDevice) {
+      return height * MODAL_CONFIG.HEIGHT_PERCENT_TABLET;
+    }
+
+    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
+      return height * MODAL_CONFIG.HEIGHT_PERCENT_SMALL;
+    }
+
+    return height * MODAL_CONFIG.HEIGHT_PERCENT_STANDARD;
+  } catch {
+    return 600;
+  }
+};
+
+export const getResponsiveModalBorderRadius = (): number => {
+  try {
+    const { width } = getScreenDimensions();
+    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+
+    return isTabletDevice
+      ? MODAL_CONFIG.BORDER_RADIUS_TABLET
+      : MODAL_CONFIG.BORDER_RADIUS_PHONE;
+  } catch {
+    return 32;
+  }
+};
+
+export const getResponsiveModalMaxWidth = (): number => {
+  try {
+    const { width } = getScreenDimensions();
+    const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+
+    return isTabletDevice
+      ? MODAL_CONFIG.MAX_WIDTH_TABLET
+      : MODAL_CONFIG.MAX_WIDTH_PHONE;
+  } catch {
+    return 480;
+  }
+};
+
+export const getResponsiveBackdropOpacity = (): number => {
+  return MODAL_CONFIG.BACKDROP_OPACITY_DEFAULT;
+};
+
+export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
+  const { width } = getScreenDimensions();
+  const isTabletDevice = width >= DEVICE_BREAKPOINTS.TABLET;
+
+  return {
+    width: getResponsiveModalWidth(),
+    height: getResponsiveModalHeight(),
+    maxWidth: getResponsiveModalMaxWidth(),
+    borderRadius: getResponsiveModalBorderRadius(),
+    backdropOpacity: getResponsiveBackdropOpacity(),
+    horizontalPadding: isTabletDevice
+      ? LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE * 1.5
+      : LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
+  };
+};
+
+export const getResponsiveBottomSheetLayout = (): ResponsiveBottomSheetLayout => {
+  const { height } = getScreenDimensions();
+
+  return {
+    minHeight: MODAL_CONFIG.BOTTOM_SHEET_MIN_HEIGHT,
+    maxHeight: height * MODAL_CONFIG.BOTTOM_SHEET_MAX_HEIGHT_PERCENT,
+    borderRadius: getResponsiveModalBorderRadius(),
+  };
+};
+
+export const getResponsiveDialogLayout = (): ResponsiveDialogLayout => {
+  const { width, height } = getScreenDimensions();
+
+  return {
+    width: Math.min(
+      width * MODAL_CONFIG.DIALOG_WIDTH_PERCENT,
+      MODAL_CONFIG.DIALOG_MAX_WIDTH
+    ),
+    maxHeight: height * MODAL_CONFIG.DIALOG_MAX_HEIGHT_PERCENT,
+    borderRadius: getResponsiveModalBorderRadius(),
+  };
+};

package/src/responsive/useResponsive.ts

@@ -21,6 +21,9 @@ import {
   getResponsiveFABPosition,
   getResponsiveModalMaxHeight,
   getResponsiveMinModalHeight,
+  getResponsiveModalLayout,
+  getResponsiveBottomSheetLayout,
+  getResponsiveDialogLayout,
   getResponsiveIconContainerSize,
   getResponsiveGridColumns,
   getResponsiveMaxWidth,
@@ -31,6 +34,9 @@ import {
   getDeviceType,
   getMinTouchTarget,
   DeviceType,
+  type ResponsiveModalLayout,
+  type ResponsiveBottomSheetLayout,
+  type ResponsiveDialogLayout,
 } from './responsive';
 import { getSpacingMultiplier } from './deviceDetection';
 
@@ -69,6 +75,11 @@ export interface UseResponsiveReturn {
   gridColumns: number;
   spacingMultiplier: number;
 
+  // Modal layouts (complete configurations)
+  modalLayout: ResponsiveModalLayout;
+  bottomSheetLayout: ResponsiveBottomSheetLayout;
+  dialogLayout: ResponsiveDialogLayout;
+
   // Utility functions
   getLogoSize: (baseSize?: number) => number;
   getInputHeight: (baseHeight?: number) => number;
@@ -125,6 +136,11 @@ export const useResponsive = (): UseResponsiveReturn => {
     gridColumns: getResponsiveGridColumns(),
     spacingMultiplier: getSpacingMultiplier(),
 
+    // Modal layouts (complete configurations)
+    modalLayout: getResponsiveModalLayout(),
+    bottomSheetLayout: getResponsiveBottomSheetLayout(),
+    dialogLayout: getResponsiveDialogLayout(),
+
     // Utility functions (memoized)
     getLogoSize,
     getInputHeight,