@umituz/react-native-firebase 2.1.1 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-firebase",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "Unified Firebase package for React Native apps - Auth and Firestore services using Firebase JS SDK (no native modules).",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/account-deletion/index.ts

@@ -27,8 +27,8 @@ export {
   getAppleReauthCredential,
 } from './infrastructure/services/reauthentication.service';
 
-export { PasswordPromptModal } from './presentation/components/PasswordPromptModal';
-export type { PasswordPromptModalProps } from './presentation/components/PasswordPromptModal';
+export { PasswordPromptScreen } from './presentation/components/PasswordPromptScreen';
+export type { PasswordPromptScreenProps } from './presentation/components/PasswordPromptScreen';
 
 export { usePasswordPrompt } from './presentation/hooks/usePasswordPrompt';
 export type { UsePasswordPromptOptions, UsePasswordPromptReturn } from './presentation/hooks/usePasswordPrompt';

package/src/domains/account-deletion/presentation/components/PasswordPromptScreen.tsx

@@ -0,0 +1,145 @@
+/**
+ * Password Prompt Screen
+ * Full-screen modal for password input during account deletion reauthentication
+ */
+
+import React, { useState } from 'react';
+import { View, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native';
+import {
+  BaseModal,
+  AtomicInput,
+  AtomicButton,
+  AtomicText,
+  useAppDesignTokens
+} from '@umituz/react-native-design-system';
+
+export interface PasswordPromptScreenProps {
+  visible: boolean;
+  onConfirm: (password: string) => void;
+  onCancel: () => void;
+  title?: string;
+  message?: string;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export const PasswordPromptScreen: React.FC<PasswordPromptScreenProps> = ({
+  visible,
+  onConfirm,
+  onCancel,
+  title = 'Password Required',
+  message = 'Enter your password to continue',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+}) => {
+  const tokens = useAppDesignTokens();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleConfirm = () => {
+    if (!password.trim()) {
+      setError('Password is required');
+      return;
+    }
+    onConfirm(password);
+    setPassword('');
+    setError('');
+  };
+
+  const handleCancel = () => {
+    setPassword('');
+    setError('');
+    onCancel();
+  };
+
+  return (
+    <BaseModal
+      visible={visible}
+      onClose={handleCancel}
+      dismissOnBackdrop={false}
+      presentationStyle="fullScreen"
+    >
+      <SafeAreaView style={[styles.safeArea, { backgroundColor: tokens.colors.background }]}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.keyboardView}
+        >
+          <View style={[styles.container, { padding: tokens.spacing.xl }]}>
+            <View style={styles.header}>
+              <AtomicText variant="h2" weight="bold" color="textPrimary" style={styles.title}>
+                {title}
+              </AtomicText>
+              <AtomicText variant="body" color="textSecondary" style={styles.message}>
+                {message}
+              </AtomicText>
+            </View>
+
+            <View style={styles.content}>
+              <AtomicInput
+                value={password}
+                onChangeText={(text: string) => {
+                  setPassword(text);
+                  setError('');
+                }}
+                placeholder="Password"
+                secureTextEntry
+                autoFocus
+                state={error ? 'error' : 'default'}
+                helperText={error}
+                style={{ marginBottom: tokens.spacing.md }}
+              />
+            </View>
+
+            <View style={[styles.buttons, { gap: tokens.spacing.sm }]}>
+              <AtomicButton
+                title={cancelText}
+                onPress={handleCancel}
+                variant="secondary"
+                style={styles.button}
+              />
+              <AtomicButton
+                title={confirmText}
+                onPress={handleConfirm}
+                variant="primary"
+                style={styles.button}
+              />
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </SafeAreaView>
+    </BaseModal>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  keyboardView: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  header: {
+    marginBottom: 32,
+  },
+  title: {
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  message: {
+    textAlign: 'center',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  buttons: {
+    flexDirection: 'row',
+  },
+  button: {
+    flex: 1,
+  },
+});

package/src/domains/account-deletion/presentation/hooks/usePasswordPrompt.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useCallback, useMemo } from 'react';
-import { PasswordPromptModal } from '../components/PasswordPromptModal';
+import { PasswordPromptScreen } from '../components/PasswordPromptScreen';
 
 export interface UsePasswordPromptOptions {
   title?: string;
@@ -46,7 +46,7 @@ export const usePasswordPrompt = (options: UsePasswordPromptOptions = {}): UsePa
   }, [resolvePromise]);
 
   const PasswordPromptComponent = useMemo(() => (
-    <PasswordPromptModal
+    <PasswordPromptScreen
       visible={isVisible}
       onConfirm={handleConfirm}
       onCancel={handleCancel}

package/src/domains/account-deletion/presentation/components/PasswordPromptModal.tsx

@@ -1,106 +0,0 @@
-/**
- * Password Prompt Modal
- * Modal for password input during account deletion reauthentication
- */
-
-import React, { useState } from 'react';
-import { View, StyleSheet } from 'react-native';
-import {
-  BaseModal,
-  AtomicInput,
-  AtomicButton,
-  useAppDesignTokens
-} from '@umituz/react-native-design-system';
-
-export interface PasswordPromptModalProps {
-  visible: boolean;
-  onConfirm: (password: string) => void;
-  onCancel: () => void;
-  title?: string;
-  message?: string;
-  confirmText?: string;
-  cancelText?: string;
-}
-
-export const PasswordPromptModal: React.FC<PasswordPromptModalProps> = ({
-  visible,
-  onConfirm,
-  onCancel,
-  title = 'Password Required',
-  message = 'Enter your password to continue',
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
-}) => {
-  const tokens = useAppDesignTokens();
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-
-  const handleConfirm = () => {
-    if (!password.trim()) {
-      setError('Password is required');
-      return;
-    }
-    onConfirm(password);
-    setPassword('');
-    setError('');
-  };
-
-  const handleCancel = () => {
-    setPassword('');
-    setError('');
-    onCancel();
-  };
-
-  return (
-    <BaseModal
-      visible={visible}
-      onClose={handleCancel}
-      title={title}
-      subtitle={message}
-      dismissOnBackdrop={false}
-    >
-      <View style={[styles.container, { padding: tokens.spacing.md }]}>
-        <AtomicInput
-          value={password}
-          onChangeText={(text: string) => {
-            setPassword(text);
-            setError('');
-          }}
-          placeholder="Password"
-          secureTextEntry
-          autoFocus
-          state={error ? 'error' : 'default'}
-          helperText={error}
-          style={{ marginBottom: tokens.spacing.md }}
-        />
-
-        <View style={[styles.buttons, { gap: tokens.spacing.sm }]}>
-          <AtomicButton
-            title={cancelText}
-            onPress={handleCancel}
-            variant="secondary"
-            style={styles.button}
-          />
-          <AtomicButton
-            title={confirmText}
-            onPress={handleConfirm}
-            variant="primary"
-            style={styles.button}
-          />
-        </View>
-      </View>
-    </BaseModal>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  buttons: {
-    flexDirection: 'row',
-  },
-  button: {
-    flex: 1,
-  },
-});