@umituz/react-native-design-system 2.3.0 → 2.3.2

package/src/device/infrastructure/utils/nativeModuleUtils.ts

@@ -0,0 +1,69 @@
+/**
+ * Native Module Utilities
+ *
+ * Safe wrappers for native module access with timeout and error handling
+ * Prevents crashes when native modules are not ready
+ */
+
+/**
+ * Execute a native module call with timeout
+ * @param operation - Async operation to execute
+ * @param timeoutMs - Timeout in milliseconds (default: 1000)
+ * @returns Result of operation or null if timeout/error
+ */
+export async function withTimeout<T>(
+  operation: () => Promise<T>,
+  timeoutMs: number = 1000,
+): Promise<T | null> {
+  try {
+    const timeoutPromise = new Promise<never>((_, reject) => {
+      setTimeout(() => reject(new Error('Operation timeout')), timeoutMs);
+    });
+
+    return await Promise.race([operation(), timeoutPromise]);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Safely access a native module property
+ * @param accessor - Function that accesses the property
+ * @param fallback - Fallback value if access fails
+ * @returns Property value or fallback
+ */
+export function safeAccess<T>(accessor: () => T, fallback: T): T {
+  try {
+    const value = accessor();
+    return value ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Execute multiple native module operations with timeout
+ * @param operations - Array of async operations
+ * @param timeoutMs - Timeout in milliseconds (default: 2000)
+ * @returns Array of results (null for failed operations)
+ */
+export async function withTimeoutAll<T>(
+  operations: Array<() => Promise<T>>,
+  timeoutMs: number = 2000,
+): Promise<Array<T | null>> {
+  try {
+    const timeoutPromise = new Promise<never>((_, reject) => {
+      setTimeout(() => reject(new Error('Operations timeout')), timeoutMs);
+    });
+
+    const results = await Promise.race([
+      Promise.all(operations.map((op) => op().catch(() => null))),
+      timeoutPromise,
+    ]).catch(() => operations.map(() => null));
+
+    return results as Array<T | null>;
+  } catch {
+    return operations.map(() => null);
+  }
+}
+

package/src/device/infrastructure/utils/stringUtils.ts

@@ -0,0 +1,59 @@
+/**
+ * String Utilities
+ *
+ * Pure utility functions for string manipulation
+ * No dependencies, no side effects
+ */
+
+/**
+ * Clean model name by removing special characters
+ * @param model - Device model name
+ * @returns Cleaned model name with only alphanumeric characters
+ */
+export function cleanModelName(model: string | null | undefined): string {
+  if (!model) {
+    return 'Device';
+  }
+  const cleaned = model.replace(/[^a-zA-Z0-9]/g, '');
+  return cleaned || 'Device';
+}
+
+/**
+ * Extract ID part from device ID
+ * @param deviceId - Full device ID
+ * @param length - Length of ID part to extract (default: 6)
+ * @returns Last N characters of device ID in uppercase
+ */
+export function extractIdPart(deviceId: string | null, length: number = 6): string {
+  if (!deviceId) {
+    return generateRandomId(length);
+  }
+  const start = Math.max(0, deviceId.length - length);
+  return deviceId.substring(start).toUpperCase();
+}
+
+/**
+ * Generate random alphanumeric ID
+ * @param length - Length of ID to generate (default: 6)
+ * @returns Random ID in uppercase
+ */
+export function generateRandomId(length: number = 6): string {
+  return Math.random().toString(36).substring(2, 2 + length).toUpperCase();
+}
+
+/**
+ * Get platform prefix for device ID
+ * @param platform - Platform OS
+ * @returns Platform prefix string
+ */
+export function getPlatformPrefix(platform: string): string {
+  switch (platform) {
+    case 'ios':
+      return 'iOS';
+    case 'android':
+      return 'Android';
+    default:
+      return 'Device';
+  }
+}
+

package/src/device/presentation/hooks/useAnonymousUser.ts

@@ -0,0 +1,117 @@
+/**
+ * Anonymous User Hook
+ *
+ * Provides persistent device-based user ID for anonymous users.
+ * The ID is stable across app restarts and sessions.
+ * Compatible with subscription services and Firebase Anonymous Auth.
+ *
+ * @domain device
+ * @layer presentation/hooks
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { PersistentDeviceIdService } from '../../infrastructure/services/PersistentDeviceIdService';
+import { DeviceService } from '../../infrastructure/services/DeviceService';
+
+/**
+ * Anonymous user data
+ */
+export interface AnonymousUser {
+  /** Persistent device-based user ID (stable across sessions) */
+  userId: string;
+  /** User-friendly device name (e.g., "iPhone13-A8F2") */
+  deviceName: string;
+  /** Display name for the anonymous user */
+  displayName: string;
+  /** Always true for anonymous users */
+  isAnonymous: boolean;
+}
+
+/**
+ * useAnonymousUser hook options
+ */
+export interface UseAnonymousUserOptions {
+  /** Custom display name for anonymous user */
+  anonymousDisplayName?: string;
+  /** Fallback user ID if device ID generation fails */
+  fallbackUserId?: string;
+}
+
+/**
+ * useAnonymousUser hook for persistent device-based user identification
+ *
+ * USAGE:
+ * ```typescript
+ * import { useAnonymousUser } from '@umituz/react-native-device';
+ *
+ * const { anonymousUser, isLoading } = useAnonymousUser();
+ *
+ * // Use for subscription services
+ * await subscriptionService.initialize(anonymousUser?.userId);
+ *
+ * // Use in SettingsScreen
+ * <UserProfileHeader
+ *   userId={anonymousUser?.userId}
+ *   displayName={anonymousUser?.displayName}
+ *   isAnonymous={anonymousUser?.isAnonymous}
+ * />
+ * ```
+ */
+export const useAnonymousUser = (options?: UseAnonymousUserOptions) => {
+  const [anonymousUser, setAnonymousUser] = useState<AnonymousUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    anonymousDisplayName = 'Anonymous',
+    fallbackUserId = 'anonymous_fallback',
+  } = options || {};
+
+  const loadAnonymousUser = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const [userId, deviceName] = await Promise.all([
+        PersistentDeviceIdService.getDeviceId(),
+        DeviceService.getUserFriendlyId(),
+      ]);
+
+      setAnonymousUser({
+        userId: userId || fallbackUserId,
+        deviceName: deviceName || 'Unknown Device',
+        displayName: anonymousDisplayName,
+        isAnonymous: true,
+      });
+    } catch {
+      setAnonymousUser({
+        userId: fallbackUserId,
+        deviceName: 'Unknown Device',
+        displayName: anonymousDisplayName,
+        isAnonymous: true,
+      });
+      setError('Failed to generate device ID');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [anonymousDisplayName, fallbackUserId]);
+
+  const refresh = useCallback(async () => {
+    await loadAnonymousUser();
+  }, [loadAnonymousUser]);
+
+  useEffect(() => {
+    loadAnonymousUser();
+  }, [loadAnonymousUser]);
+
+  return {
+    /** Anonymous user data with persistent device-based ID */
+    anonymousUser,
+    /** Loading state */
+    isLoading,
+    /** Error message if ID generation failed */
+    error,
+    /** Refresh function to reload user data */
+    refresh,
+  };
+};

package/src/device/presentation/hooks/useDeviceInfo.ts

@@ -0,0 +1,222 @@
+/**
+ * Device Domain - useDeviceInfo Hook
+ *
+ * React hook for device and application information.
+ * Provides device details with state management.
+ *
+ * @domain device
+ * @layer presentation/hooks
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { DeviceService } from '../../infrastructure/services/DeviceService';
+import type { DeviceInfo, ApplicationInfo, SystemInfo } from '../../domain/entities/Device';
+
+/**
+ * useDeviceInfo hook for device and application information
+ *
+ * USAGE:
+ * ```typescript
+ * const { deviceInfo, appInfo, systemInfo, isLoading, refresh } = useDeviceInfo();
+ *
+ * // Display device info
+ * <Text>Device: {deviceInfo?.modelName}</Text>
+ * <Text>OS: {deviceInfo?.osName} {deviceInfo?.osVersion}</Text>
+ *
+ * // Display app info
+ * <Text>App: {appInfo?.applicationName}</Text>
+ * <Text>Version: {appInfo?.nativeApplicationVersion}</Text>
+ *
+ * // Refresh info
+ * <AtomicButton onPress={refresh}>Refresh</AtomicButton>
+ * ```
+ */
+export const useDeviceInfo = () => {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo | null>(null);
+  const [appInfo, setAppInfo] = useState<ApplicationInfo | null>(null);
+  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Load all device and app information
+   */
+  const loadInfo = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const system = await DeviceService.getSystemInfo();
+      setSystemInfo(system);
+      setDeviceInfo(system.device);
+      setAppInfo(system.application);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load device info';
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Load device info only
+   */
+  const loadDeviceInfo = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const info = await DeviceService.getDeviceInfo();
+      setDeviceInfo(info);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load device info';
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Load app info only
+   */
+  const loadAppInfo = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const info = await DeviceService.getApplicationInfo();
+      setAppInfo(info);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load app info';
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Refresh all info
+   */
+  const refresh = useCallback(async () => {
+    await loadInfo();
+  }, [loadInfo]);
+
+  /**
+   * Load info on mount
+   */
+  useEffect(() => {
+    loadInfo();
+  }, [loadInfo]);
+
+  return {
+    // Data
+    deviceInfo,
+    appInfo,
+    systemInfo,
+
+    // State
+    isLoading,
+    error,
+
+    // Functions
+    refresh,
+    loadDeviceInfo,
+    loadAppInfo,
+  };
+};
+
+/**
+ * useDeviceCapabilities hook for device feature detection
+ *
+ * USAGE:
+ * ```typescript
+ * const { isDevice, isTablet, hasNotch, totalMemoryGB } = useDeviceCapabilities();
+ *
+ * // Conditional rendering
+ * {isTablet && <TabletLayout />}
+ * {hasNotch && <NotchSpacer />}
+ *
+ * // Performance optimization
+ * {totalMemoryGB && totalMemoryGB < 2 && <LowMemoryWarning />}
+ * ```
+ */
+export const useDeviceCapabilities = () => {
+  const [isDevice, setIsDevice] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
+  const [hasNotch, setHasNotch] = useState(false);
+  const [totalMemoryGB, setTotalMemoryGB] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadCapabilities = async () => {
+      setIsLoading(true);
+
+      try {
+        const capabilities = await DeviceService.getDeviceCapabilities();
+        setIsDevice(capabilities.isDevice);
+        setIsTablet(capabilities.isTablet);
+        setHasNotch(capabilities.hasNotch);
+        setTotalMemoryGB(capabilities.totalMemoryGB);
+      } catch {
+        setIsDevice(false);
+        setIsTablet(false);
+        setHasNotch(false);
+        setTotalMemoryGB(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadCapabilities();
+  }, []);
+
+  return {
+    isDevice,
+    isTablet,
+    hasNotch,
+    totalMemoryGB,
+    isLoading,
+  };
+};
+
+/**
+ * useDeviceId hook for device unique identifier
+ *
+ * WARNING: Use with caution - user privacy considerations!
+ *
+ * USAGE:
+ * ```typescript
+ * const { deviceId, isLoading } = useDeviceId();
+ *
+ * // Analytics, crash reporting (with user consent)
+ * if (deviceId) {
+ *   analytics.setUserId(deviceId);
+ * }
+ * ```
+ */
+export const useDeviceId = () => {
+  const [deviceId, setDeviceId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadDeviceId = async () => {
+      setIsLoading(true);
+
+      try {
+        const id = await DeviceService.getDeviceId();
+        setDeviceId(id);
+      } catch {
+        setDeviceId(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadDeviceId();
+  }, []);
+
+  return {
+    deviceId,
+    isLoading,
+  };
+};

package/src/index.ts

@@ -143,6 +143,7 @@ export {
   AtomicPicker,
   AtomicDatePicker,
   AtomicSkeleton,
+  AtomicBadge,
   type IconName,
   type IconSize,
   type IconColor,
@@ -172,6 +173,9 @@ export {
   type SkeletonPattern,
   type SkeletonConfig,
   SKELETON_PATTERNS,
+  type AtomicBadgeProps,
+  type BadgeVariant,
+  type BadgeSize,
 } from './atoms';
 
 // =============================================================================

package/src/molecules/ConfirmationModalContent.tsx

@@ -52,13 +52,13 @@ export const ConfirmationModalContent: React.FC<{
   style?: StyleProp<ViewStyle>;
   testID: string;
 }> = ({ tokens, variant, title, message, confirmText, cancelText, icon, onConfirm, onCancel, style, testID }) => {
-  const variantConfig = getVariantConfig(variant as 'default' | 'destructive' | 'warning' | 'success', tokens);
+  const variantConfig = getVariantConfig(variant as 'default' | 'destructive' | 'warning' | 'success');
   const finalIcon = icon || variantConfig.icon;
   const getConfirmButtonStyle = useConfirmButtonStyle(variant, tokens);
 
   return (
     <View style={[getModalContainerStyle(tokens), style]}>
-      <View style={getIconContainerStyle(tokens)}>
+      <View style={getIconContainerStyle()}>
         <ConfirmationModalIcon
           icon={finalIcon}
           iconColor={variantConfig.iconColor}
@@ -66,11 +66,11 @@ export const ConfirmationModalContent: React.FC<{
         />
       </View>
 
-      <View style={getTitleContainerStyle(tokens)}>
+      <View style={getTitleContainerStyle()}>
         <ConfirmationModalTitle title={title} tokens={tokens} testID={testID} />
       </View>
 
-      <View style={getMessageContainerStyle(tokens)}>
+      <View style={getMessageContainerStyle()}>
         <ConfirmationModalMessage message={message} tokens={tokens} testID={testID} />
       </View>
 

package/src/molecules/ConfirmationModalMain.tsx

@@ -65,7 +65,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
       statusBarTranslucent
       testID={testID}
     >
-      <View style={getModalOverlayStyle(tokens)}>
+      <View style={getModalOverlayStyle()}>
         <ConfirmationModalBackdrop
           showBackdrop={showBackdrop}
           onBackdropPress={handleBackdropPress}

package/src/molecules/ScreenHeader.tsx

@@ -74,8 +74,8 @@ const ScreenHeaderBackButton: React.FC<{
   const handleBackPress = React.useCallback(() => {
     if (onBackPress) {
       onBackPress();
-    } else {
-      __DEV__ && console.warn('ScreenHeader: onBackPress is required when back button is visible');
+    } else if (__DEV__) {
+      console.warn('ScreenHeader: onBackPress is required when back button is visible');
     }
   }, [onBackPress]);
 

package/src/molecules/confirmation-modal/components.tsx

@@ -70,7 +70,7 @@ export const ConfirmationModalButtons: React.FC<{
   confirmButtonStyle: StyleProp<ViewStyle>;
   testID: string;
 }> = ({ confirmText, cancelText, onConfirm, onCancel, confirmButtonStyle, testID }) => (
-  <View style={getButtonContainerStyle({} as DesignTokens)}>
+  <View style={getButtonContainerStyle()}>
     <AtomicButton
       variant="outline"
       size="md"

package/src/molecules/confirmation-modal/styles/confirmationModalStyles.ts

@@ -13,8 +13,7 @@ import type { DesignTokens } from '../../../theme';
  * Note: Confirm text is handled in component with translations
  */
 export const getVariantConfig = (
-  variant: ConfirmationModalVariant,
-  _tokens: DesignTokens
+  variant: ConfirmationModalVariant
 ): Omit<ConfirmationModalVariantConfig, 'confirmText'> => {
   switch (variant) {
     case 'destructive':
@@ -44,7 +43,7 @@ export const getVariantConfig = (
 /**
  * Get modal overlay style
  */
-export const getModalOverlayStyle = (_tokens: DesignTokens): ViewStyle => ({
+export const getModalOverlayStyle = (): ViewStyle => ({
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
@@ -79,28 +78,28 @@ export const getModalContainerStyle = (tokens: DesignTokens): ViewStyle => ({
 /**
  * Get icon container style
  */
-export const getIconContainerStyle = (_tokens: DesignTokens): ViewStyle => ({
+export const getIconContainerStyle = (): ViewStyle => ({
   marginBottom: 16,
 });
 
 /**
  * Get title container style
  */
-export const getTitleContainerStyle = (_tokens: DesignTokens): ViewStyle => ({
+export const getTitleContainerStyle = (): ViewStyle => ({
   marginBottom: 8,
 });
 
 /**
  * Get message container style
  */
-export const getMessageContainerStyle = (_tokens: DesignTokens): ViewStyle => ({
+export const getMessageContainerStyle = (): ViewStyle => ({
   marginBottom: 24,
 });
 
 /**
  * Get button container style
  */
-export const getButtonContainerStyle = (_tokens: DesignTokens): ViewStyle => ({
+export const getButtonContainerStyle = (): ViewStyle => ({
   flexDirection: 'row',
   gap: 12,
   width: '100%',

package/src/presentation/utils/variants/__tests__/core.test.ts

@@ -1,5 +1,4 @@
 import { describe, it, expect } from '@jest/globals';
-import { View, Text } from 'react-native';
 import { createVariants, type VariantConfig } from '../core';
 
 describe('createVariants', () => {

package/src/responsive/deviceDetection.ts

@@ -17,13 +17,13 @@ import { validateScreenDimensions } from './validation';
  * @returns Operation result or fallback
  */
 const withDeviceDetectionFallback = <T>(
-  operation: () => T, 
-  fallback: T, 
+  operation: () => T,
+  fallback: T,
   warningMessage: string
 ): T => {
   try {
     return operation();
-  } catch (error) {
+  } catch {
     if (__DEV__) {
       console.warn(`[DeviceDetection] ${warningMessage}`);
     }
@@ -48,11 +48,11 @@ export enum DeviceType {
  */
 export const getScreenDimensions = () => {
   const { width, height } = Dimensions.get('window');
-  
+
   try {
     validateScreenDimensions(width, height);
     return { width, height };
-  } catch (error) {
+  } catch {
     if (__DEV__) {
       console.warn('[getScreenDimensions] Invalid screen dimensions detected, using fallback values');
     }

package/src/responsive/iPadBreakpoints.ts

@@ -0,0 +1,55 @@
+/**
+ * iPad Breakpoints and Constants
+ * Apple HIG compliant values for iPad responsive design
+ */
+
+/**
+ * iPad specific breakpoints following Apple HIG
+ */
+export const IPAD_BREAKPOINTS = {
+    IPAD_MINI: 744,
+    IPAD_10_2: 810,
+    IPAD_AIR: 820,
+    IPAD_11_PRO: 834,
+    IPAD_12_9_PRO: 1024,
+    IPAD_LANDSCAPE_MINI: 1133,
+    IPAD_LANDSCAPE_AIR: 1180,
+    IPAD_LANDSCAPE_PRO: 1366,
+} as const;
+
+/**
+ * Apple HIG Touch Target Guidelines
+ */
+export const TOUCH_TARGETS = {
+    MINIMUM: 44,
+    RECOMMENDED: 48,
+    IPAD_RECOMMENDED: 50,
+} as const;
+
+/**
+ * Content width constraints for iPad
+ */
+export const CONTENT_WIDTH_CONSTRAINTS = {
+    READABLE_MAX: 672,
+    FORM_MAX: 580,
+    CARD_MAX: 400,
+    MODAL_MAX: 600,
+    PAYWALL_MAX: 540,
+} as const;
+
+/**
+ * iPad Layout Configuration
+ */
+export const IPAD_LAYOUT_CONFIG = {
+    SCREEN_PADDING: 24,
+    SECTION_SPACING: 32,
+    CARD_SPACING: 20,
+    GRID_COLUMNS_PORTRAIT: 2,
+    GRID_COLUMNS_LANDSCAPE: 3,
+    GRID_GAP: 20,
+    MODAL_CORNER_RADIUS: 16,
+    SHEET_CORNER_RADIUS: 20,
+    MODAL_HORIZONTAL_MARGIN: 48,
+    FONT_SCALE: 1.1,
+    HEADING_SCALE: 1.15,
+} as const;