@fadyshawky/react-native-magic 1.0.8 → 2.0.0

package/template/src/common/validations/examples/TextInputWithValidation.tsx

@@ -0,0 +1,229 @@
+import React, {useState} from 'react';
+import {View, TextInput, Text, StyleSheet} from 'react-native';
+import {
+  regexValidation,
+  patterns,
+  ValidationResult,
+  requiredValidation,
+  runValidations,
+} from '../regexValidator';
+
+interface TextInputWithValidationProps {
+  label: string;
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  secureTextEntry?: boolean;
+  validationType?:
+    | 'email'
+    | 'password'
+    | 'phone'
+    | 'name'
+    | 'username'
+    | 'numeric'
+    | 'price'
+    | 'custom';
+  customRegex?: RegExp;
+  customErrorMessage?: string;
+  required?: boolean;
+  minLength?: number;
+}
+
+/**
+ * A reusable text input component with built-in validation
+ */
+const TextInputWithValidation: React.FC<TextInputWithValidationProps> = ({
+  label,
+  placeholder,
+  value,
+  onChangeText,
+  secureTextEntry = false,
+  validationType = 'custom',
+  customRegex,
+  customErrorMessage,
+  required = false,
+  minLength,
+}) => {
+  const [touched, setTouched] = useState(false);
+  const [validationResult, setValidationResult] = useState<ValidationResult>({
+    isValid: true,
+    message: '',
+  });
+
+  // Get the appropriate regex based on validation type
+  const getRegexForType = (): RegExp => {
+    switch (validationType) {
+      case 'email':
+        return patterns.EMAIL;
+      case 'password':
+        return patterns.PASSWORD;
+      case 'phone':
+        return patterns.PHONE;
+      case 'name':
+        return patterns.NAME;
+      case 'username':
+        return patterns.USERNAME;
+      case 'numeric':
+        return patterns.NUMERIC;
+      case 'price':
+        return patterns.PRICE;
+      case 'custom':
+        return customRegex || /^.*$/; // Allow anything if no custom regex
+      default:
+        return /^.*$/;
+    }
+  };
+
+  // Get the default error message based on validation type
+  const getDefaultErrorMessage = (): string => {
+    switch (validationType) {
+      case 'email':
+        return 'Please enter a valid email address';
+      case 'password':
+        return 'Password must be at least 8 characters with uppercase, lowercase, and number';
+      case 'phone':
+        return 'Please enter a valid phone number';
+      case 'name':
+        return 'Please enter a valid name';
+      case 'username':
+        return 'Username must be 3-20 characters (letters, numbers, underscores)';
+      case 'numeric':
+        return 'Please enter numbers only';
+      case 'price':
+        return 'Please enter a valid price (e.g., 10.99)';
+      default:
+        return customErrorMessage || 'Invalid input';
+    }
+  };
+
+  // Validate the input when it loses focus
+  const handleBlur = () => {
+    setTouched(true);
+
+    // Build validations array
+    const validations = [];
+
+    // Add required validation if needed
+    if (required) {
+      validations.push((val: string) =>
+        requiredValidation(val, 'This field is required'),
+      );
+    }
+
+    // Add pattern validation if it's not empty
+    validations.push((val: string) => {
+      // Skip empty validation if not required
+      if (!required && (!val || val.trim() === '')) {
+        return {isValid: true, message: ''};
+      }
+      return regexValidation(val, getRegexForType(), getDefaultErrorMessage());
+    });
+
+    // Run all validations
+    const result = runValidations(value, validations);
+    setValidationResult(result);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      <TextInput
+        style={[
+          styles.input,
+          touched && !validationResult.isValid && styles.inputError,
+        ]}
+        placeholder={placeholder}
+        value={value}
+        onChangeText={onChangeText}
+        onBlur={handleBlur}
+        secureTextEntry={secureTextEntry}
+      />
+      {touched && !validationResult.isValid && (
+        <Text style={styles.errorText}>{validationResult.message}</Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 8,
+    fontWeight: '500',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 16,
+  },
+  inputError: {
+    borderColor: '#ff3b30',
+  },
+  errorText: {
+    color: '#ff3b30',
+    fontSize: 14,
+    marginTop: 4,
+  },
+});
+
+export default TextInputWithValidation;
+
+// Usage Example:
+/*
+import { TextInputWithValidation } from 'src/common/validations/examples';
+
+const MyForm = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [phone, setPhone] = useState('');
+  const [customField, setCustomField] = useState('');
+
+  return (
+    <View>
+      <TextInputWithValidation
+        label="Email"
+        placeholder="Enter your email"
+        value={email}
+        onChangeText={setEmail}
+        validationType="email"
+        required
+      />
+      
+      <TextInputWithValidation
+        label="Password"
+        placeholder="Enter your password"
+        value={password}
+        onChangeText={setPassword}
+        validationType="password"
+        required
+        secureTextEntry
+      />
+      
+      <TextInputWithValidation
+        label="Phone Number"
+        placeholder="Enter your phone number"
+        value={phone}
+        onChangeText={setPhone}
+        validationType="phone"
+      />
+      
+      <TextInputWithValidation
+        label="Product ID"
+        placeholder="Enter product ID"
+        value={customField}
+        onChangeText={setCustomField}
+        validationType="custom"
+        customRegex={/^PRD-[0-9]{6}$/}
+        customErrorMessage="Product ID must be in format PRD-123456"
+        required
+      />
+    </View>
+  );
+};
+*/

package/template/src/common/validations/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Validations Module
+ *
+ * Central export point for all validation utilities
+ */
+
+export * from './regexValidator';
+
+// Additional regex patterns for specific use cases
+export const REGEX_PATTERNS = {
+  // Standard patterns (exported also from regexValidator)
+  ...require('./regexValidator').patterns,
+
+  // Additional patterns
+  STRONG_PASSWORD:
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
+  TIME_24H: /^([01]\d|2[0-3]):([0-5]\d)$/,
+  TIME_12H: /^(0?[1-9]|1[0-2]):([0-5]\d)\s?(AM|PM|am|pm)$/,
+  HEX_COLOR: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+  POSTAL_CODE: /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$|^\d{5}(-\d{4})?$/,
+  CURRENCY: /^[$€£¥]?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(\.[0-9]{1,2})?$/,
+  MAC_ADDRESS: /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
+
+  // Form input validation
+  PRODUCT_SKU: /^[A-Za-z0-9-]{6,20}$/,
+  QUANTITY: /^[1-9]\d*$/,
+  DISCOUNT_PERCENTAGE: /^([0-9]|[1-9][0-9]|100)$/,
+};

package/template/src/common/validations/regex.js

@@ -0,0 +1,83 @@
+/**
+ * Regex Validation Constants
+ *
+ * A collection of regex patterns for common input validations.
+ */
+
+// Email validation regex
+export const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+// Phone number validation regex (international format)
+export const PHONE_REGEX =
+  /^(\+\d{1,3}[-\s]?)?\(?(\d{3})\)?[-.\s]?(\d{3})[-.\s]?(\d{4})$/;
+
+// Password validation regex (min 8 chars, one uppercase, one lowercase, one number)
+export const PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
+
+// Username validation regex (alphanumeric, 3-20 chars, underscores allowed)
+export const USERNAME_REGEX = /^[a-zA-Z0-9_]{3,20}$/;
+
+// Name validation regex (letters, spaces, apostrophes, hyphens)
+export const NAME_REGEX = /^[a-zA-Z\s'-]{2,50}$/;
+
+// URL validation regex
+export const URL_REGEX =
+  /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/;
+
+// Postal/ZIP code validation regex (US and Canada)
+export const POSTAL_CODE_REGEX =
+  /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$|^\d{5}(-\d{4})?$/;
+
+// Credit card validation regex (major card types)
+export const CREDIT_CARD_REGEX =
+  /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|6(?:011|5[0-9][0-9])[0-9]{12})$/;
+
+// Date validation regex (YYYY-MM-DD format)
+export const DATE_REGEX = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
+
+// IP Address validation regex
+export const IP_ADDRESS_REGEX =
+  /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+
+// Numeric value validation regex (integers only)
+export const NUMERIC_REGEX = /^[0-9]+$/;
+
+// Decimal value validation regex (positive or negative)
+export const DECIMAL_REGEX = /^-?\d+(\.\d+)?$/;
+
+// Price validation regex (positive decimal with up to 2 decimal places)
+export const PRICE_REGEX = /^\d+(\.\d{1,2})?$/;
+
+// Alphanumeric validation regex (letters and numbers only)
+export const ALPHANUMERIC_REGEX = /^[a-zA-Z0-9]+$/;
+
+// Letters only validation regex
+export const LETTERS_ONLY_REGEX = /^[a-zA-Z]+$/;
+
+// Strong password validation (8+ chars, upper, lower, number, special char)
+export const STRONG_PASSWORD_REGEX =
+  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+
+// Time validation regex (HH:MM format, 24-hour)
+export const TIME_24H_REGEX = /^([01]\d|2[0-3]):([0-5]\d)$/;
+
+// Time validation regex (HH:MM format, 12-hour with AM/PM)
+export const TIME_12H_REGEX = /^(0?[1-9]|1[0-2]):([0-5]\d)\s?(AM|PM|am|pm)$/;
+
+// Hex color code validation regex
+export const HEX_COLOR_REGEX = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+
+// Social security number validation regex (US format)
+export const SSN_REGEX =
+  /^(?!000|666|9\d{2})([0-8]\d{2})(?!00)(\d{2})(?!0000)(\d{4})$/;
+
+// ISBN validation regex (ISBN-10 or ISBN-13)
+export const ISBN_REGEX =
+  /^(?:ISBN(?:-1[03])?:?\s)?(?=[0-9X]{10}$|(?=(?:[0-9]+[-\s]){3})[-\s0-9X]{13}$|97[89][0-9]{10}$|(?=(?:[0-9]+[-\s]){4})[-\s0-9]{17}$)(?:97[89][-\s]?)?[0-9]{1,5}[-\s]?[0-9]+[-\s]?[0-9]+[-\s]?[0-9X]$/;
+
+// Currency validation regex (with symbol and thousands separators)
+export const CURRENCY_REGEX =
+  /^[$€£¥]?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(\.[0-9]{1,2})?$/;
+
+// MAC Address validation regex
+export const MAC_ADDRESS_REGEX = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;

package/template/src/common/validations/regexValidator.ts

@@ -0,0 +1,240 @@
+/**
+ * Regex Validation Utility
+ *
+ * TypeScript utility for regex-based validation with custom error messages.
+ */
+
+// Types for validation result
+export interface ValidationResult {
+  isValid: boolean;
+  message: string;
+}
+
+/**
+ * Generic regex validation function
+ * @param value - The string value to validate
+ * @param regex - The regex pattern to validate against
+ * @param errorMessage - Optional custom error message
+ * @returns ValidationResult with isValid flag and message
+ */
+export const regexValidation = (
+  value: string,
+  regex: RegExp,
+  errorMessage: string = 'Invalid format',
+): ValidationResult => {
+  const isValid = regex?.test(value);
+  return {
+    isValid,
+    message: isValid ? '' : errorMessage,
+  };
+};
+
+/**
+ * Validate if a field is empty
+ * @param value - The string value to check
+ * @param errorMessage - Optional custom error message
+ * @returns ValidationResult
+ */
+export const requiredValidation = (
+  value: string,
+  errorMessage: string = 'This field is required',
+): ValidationResult => {
+  const isValid = value !== undefined && value !== null && value.trim() !== '';
+  return {
+    isValid,
+    message: isValid ? '' : errorMessage,
+  };
+};
+
+/**
+ * Validate minimum length
+ * @param value - The string value to check
+ * @param minLength - Minimum required length
+ * @param errorMessage - Optional custom error message
+ * @returns ValidationResult
+ */
+export const minLengthValidation = (
+  value: string,
+  minLength: number,
+  errorMessage?: string,
+): ValidationResult => {
+  const isValid =
+    value !== undefined && value !== null && value.length >= minLength;
+  return {
+    isValid,
+    message: isValid
+      ? ''
+      : errorMessage || `Input must be at least ${minLength} characters`,
+  };
+};
+
+/**
+ * Validate maximum length
+ * @param value - The string value to check
+ * @param maxLength - Maximum allowed length
+ * @param errorMessage - Optional custom error message
+ * @returns ValidationResult
+ */
+export const maxLengthValidation = (
+  value: string,
+  maxLength: number,
+  errorMessage?: string,
+): ValidationResult => {
+  const isValid = !value || value.length <= maxLength;
+  return {
+    isValid,
+    message: isValid
+      ? ''
+      : errorMessage || `Input cannot exceed ${maxLength} characters`,
+  };
+};
+
+/**
+ * Run multiple validations in sequence
+ * @param value - The string value to validate
+ * @param validations - Array of validation functions to run
+ * @returns First failed ValidationResult or success result
+ */
+export const runValidations = (
+  value: string,
+  validations: ((value: string) => ValidationResult)[],
+): ValidationResult => {
+  for (const validationFn of validations) {
+    const result = validationFn(value);
+    if (!result.isValid) {
+      return result;
+    }
+  }
+  return {isValid: true, message: ''};
+};
+
+/**
+ * Common validation patterns for easy access
+ */
+export const patterns = {
+  // Email validation regex
+  EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+
+  // Phone number validation regex (international format)
+  PHONE: /^(\+\d{1,3}[-\s]?)?\(?(\d{3})\)?[-.\s]?(\d{3})[-.\s]?(\d{4})$/,
+
+  // Password validation regex (min 8 chars, one uppercase, one lowercase, one number)
+  PASSWORD: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/,
+
+  // Username validation regex (alphanumeric, 3-20 chars, underscores allowed)
+  USERNAME: /^[a-zA-Z0-9_]{3,20}$/,
+
+  // Name validation regex (letters, spaces, apostrophes, hyphens)
+  NAME: /^[a-zA-Z\s'-]{2,50}$/,
+
+  // URL validation regex
+  URL: /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/,
+
+  // Numeric value validation regex (integers only)
+  NUMERIC: /^[0-9]+$/,
+
+  // Decimal value validation regex (positive or negative)
+  DECIMAL: /^-?\d+(\.\d+)?$/,
+
+  // Price validation regex (positive decimal with up to 2 decimal places)
+  PRICE: /^\d+(\.\d{1,2})?$/,
+
+  // Alphanumeric validation regex (letters and numbers only)
+  ALPHANUMERIC: /^[a-zA-Z0-9]+$/,
+
+  // Letters only validation regex
+  LETTERS_ONLY: /^[a-zA-Z]+$/,
+};
+
+// Export convenience validation functions
+export const validateEmail = (
+  email: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    email,
+    patterns.EMAIL,
+    errorMessage || 'Please enter a valid email address',
+  );
+
+export const validatePhone = (
+  phone: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    phone,
+    patterns.PHONE,
+    errorMessage || 'Please enter a valid phone number',
+  );
+
+export const validatePassword = (
+  password: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    password,
+    patterns.PASSWORD,
+    errorMessage ||
+      'Password must be at least 8 characters with uppercase, lowercase, and number',
+  );
+
+export const validateUsername = (
+  username: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    username,
+    patterns.USERNAME,
+    errorMessage ||
+      'Username must be 3-20 characters (letters, numbers, underscores)',
+  );
+
+export const validateName = (
+  name: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    name,
+    patterns.NAME,
+    errorMessage || 'Please enter a valid name',
+  );
+
+export const validateUrl = (
+  url: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    url,
+    patterns.URL,
+    errorMessage || 'Please enter a valid URL',
+  );
+
+export const validateNumeric = (
+  value: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    value,
+    patterns.NUMERIC,
+    errorMessage || 'Please enter numbers only',
+  );
+
+export const validateDecimal = (
+  value: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    value,
+    patterns.DECIMAL,
+    errorMessage || 'Please enter a valid decimal number',
+  );
+
+export const validatePrice = (
+  price: string,
+  errorMessage?: string,
+): ValidationResult =>
+  regexValidation(
+    price,
+    patterns.PRICE,
+    errorMessage || 'Please enter a valid price (e.g., 10.99)',
+  );

package/template/src/common/validations/validationConstants.ts

@@ -1,7 +1,7 @@
 export const validationConstants = {
   phone: {
-    minLength: 8,
-    maxLength: 18,
+    minLength: 11,
+    maxLength: 11,
   },
   fullName: {
     minLength: 3,

package/template/src/core/api/errorHandler.ts

@@ -0,0 +1,39 @@
+/**
+ * Extracts meaningful error information from Axios error responses
+ * and ensures the message is always a string
+ * @param error The error caught from an API request
+ * @returns A structured error object with message (as string) and details
+ */
+import {ensureString} from '../utils/stringUtils';
+
+export const extractServerError = (error: any) => {
+  let errorObj = {
+    message: 'Unknown error occurred',
+    status: 500,
+    originalError: error,
+  };
+
+  try {
+    // Extract error information from Axios response
+    if (error?.response?.data) {
+      const data = error.response.data;
+
+      // Handle different error formats
+      if (data.error) {
+        errorObj.message = ensureString(data.error);
+      } else {
+        errorObj.message = ensureString(data);
+      }
+
+      errorObj.status = error.response.status;
+      errorObj.originalError = data;
+    } else if (error?.message) {
+      errorObj.message = ensureString(error.message);
+    }
+  } catch (e) {}
+
+  // Final safety check
+  errorObj.message = ensureString(errorObj.message);
+
+  return errorObj;
+};

package/template/src/core/api/responseHandlers.ts

@@ -1,35 +1,12 @@
 import {AxiosResponse} from 'axios';
 import Snackbar from 'react-native-snackbar';
-import {Colors} from '../theme/colors';
 import {setLogout} from '../store/user/userSlice';
 import {store} from '../store/store';
 
-export const handleFetchJsonResponse = async (
+export const handleFetchJsonResponse = (
   response: AxiosResponse,
   showSuccessMessage?: boolean,
 ) => {
-  if (response.status === 401) {
-    store.dispatch(setLogout());
-  } else if (
-    !response.status ||
-    response.status < 200 ||
-    (response.status >= 300 && response.status !== 401)
-  ) {
-    return Snackbar.show({
-      text: response?.data?.message,
-      duration: Snackbar.LENGTH_SHORT,
-      textColor: Colors.white,
-      backgroundColor: Colors.red,
-    });
-  } else if (showSuccessMessage) {
-    Snackbar.show({
-      text: 'Success',
-      duration: Snackbar.LENGTH_SHORT,
-      textColor: Colors.white,
-      backgroundColor: Colors.green,
-    });
-  }
-
   return response.data;
 };
 
@@ -37,7 +14,5 @@ export const handleErrorResponse = async (message: string) => {
   return Snackbar.show({
     text: message,
     duration: Snackbar.LENGTH_SHORT,
-    textColor: Colors.white,
-    backgroundColor: Colors.red,
   });
 };