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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.0.10",
+  "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';