@umituz/react-native-design-system 2.3.1 → 2.3.3

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/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/gridUtils.ts

@@ -3,7 +3,7 @@
  * Responsive grid sizing and column calculations
  */
 
-import { getScreenDimensions } from './deviceDetection';
+import { getScreenDimensions } from '../device/detection';
 import { DEVICE_BREAKPOINTS, GRID_CONFIG } from './config';
 import { validateNumber } from './validation';
 

package/src/responsive/index.ts

@@ -1,24 +1,16 @@
 /**
- * @umituz/react-native-design-system-responsive - Public API
+ * @umituz/react-native-design-system/responsive - Public API
  *
- * Responsive design utilities for React Native - Screen dimensions, device detection,
- * and responsive sizing utilities following Material Design 3 and iOS HIG principles.
- *
- * Usage:
- * ```typescript
- * import { useResponsive, isTablet, getResponsiveLogoSize } from '@umituz/react-native-design-system-responsive';
- * ```
+ * Responsive sizing and layout utilities for React Native.
+ * For device detection, use '@umituz/react-native-design-system/device'.
  */
 
 // Hook exports
 export { useResponsive } from './useResponsive';
 export type { UseResponsiveReturn } from './useResponsive';
 
-// Utility function exports
+// Responsive sizing utilities
 export {
-  getScreenDimensions,
-  isSmallPhone,
-  isTablet,
   getResponsiveLogoSize,
   getResponsiveInputHeight,
   getResponsiveHorizontalPadding,
@@ -43,18 +35,40 @@ export {
   type GridCellSizeConfig,
   getResponsiveMaxWidth,
   getResponsiveFontSize,
-  isLandscape,
-  getDeviceType,
-  DeviceType,
   MODAL_CONFIG,
 } from './responsive';
 
-// Device detection exports
-export { getSpacingMultiplier } from './deviceDetection';
-
-
+// Re-export from device for backward compatibility
+export {
+  DeviceType,
+  getScreenDimensions,
+  isSmallPhone,
+  isTablet,
+  isLandscape,
+  getDeviceType,
+  getSpacingMultiplier,
+  isIPad,
+  isIPadMini,
+  isIPadPro,
+  isIPadLandscape,
+  IPAD_BREAKPOINTS,
+  TOUCH_TARGETS,
+  CONTENT_WIDTH_CONSTRAINTS,
+  IPAD_LAYOUT_CONFIG,
+  getContentMaxWidth,
+  getIPadGridColumns,
+  getTouchTargetSize,
+  getIPadScreenPadding,
+  getIPadFontScale,
+  getIPadLayoutInfo,
+  type IPadLayoutInfo,
+  getIPadModalDimensions,
+  getPaywallDimensions,
+  type ModalDimensions,
+  type PaywallDimensions,
+} from '../device/detection';
 
-// Platform constants exports
+// Platform constants
 export {
   IOS_HIG,
   PLATFORM_CONSTANTS,
@@ -62,3 +76,5 @@ export {
   getMinTouchTarget,
 } from './platformConstants';
 
+// Config exports
+export { DEVICE_BREAKPOINTS } from './config';

package/src/responsive/responsive.ts

@@ -7,7 +7,7 @@
  * This is the main export file that imports from specialized modules.
  */
 
-// Device detection
+// Device detection (re-exported from device module)
 export {
   getScreenDimensions,
   isSmallPhone,
@@ -15,7 +15,7 @@ export {
   isLandscape,
   getDeviceType,
   DeviceType,
-} from './deviceDetection';
+} from '../device/detection';
 
 // Responsive sizing
 export {

package/src/responsive/responsiveLayout.ts

@@ -3,7 +3,7 @@
  * Layout utilities for positioning and spacing.
  */
 
-import { getScreenDimensions } from './deviceDetection';
+import { getScreenDimensions } from '../device/detection';
 import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from './config';
 import { validateNumber, validateSafeAreaInsets } from './validation';
 

package/src/responsive/responsiveModal.ts

@@ -3,7 +3,7 @@
  * Modal, bottom sheet, and dialog layout utilities.
  */
 
-import { getScreenDimensions } from './deviceDetection';
+import { getScreenDimensions } from '../device/detection';
 import {
   DEVICE_BREAKPOINTS,
   LAYOUT_CONSTANTS,

package/src/responsive/responsiveSizing.ts

@@ -3,7 +3,7 @@
  * Responsive sizing utilities for UI components.
  */
 
-import { getScreenDimensions } from './deviceDetection';
+import { getScreenDimensions } from '../device/detection';
 import {
   DEVICE_BREAKPOINTS,
   RESPONSIVE_PERCENTAGES,

package/src/responsive/useResponsive.ts

@@ -38,7 +38,7 @@ import {
   type ResponsiveBottomSheetLayout,
   type ResponsiveDialogLayout,
 } from './responsive';
-import { getSpacingMultiplier } from './deviceDetection';
+import { getSpacingMultiplier } from '../device/detection';
 
 export interface UseResponsiveReturn {
   // Device info

package/src/safe-area/__tests__/components/SafeAreaProvider.test.tsx

@@ -1,15 +1,15 @@
 /**
  * Tests for SafeAreaProvider component
  */
+import { describe, it, expect } from '@jest/globals';
+import { SafeAreaProvider, useSafeAreaConfig } from '../../components/SafeAreaProvider';
 
 describe('SafeAreaProvider', () => {
   it('should be defined', () => {
-    const { SafeAreaProvider } = require('../../components/SafeAreaProvider');
     expect(SafeAreaProvider).toBeDefined();
   });
 
   it('should have useSafeAreaConfig export', () => {
-    const { useSafeAreaConfig } = require('../../components/SafeAreaProvider');
     expect(useSafeAreaConfig).toBeDefined();
   });
 });

package/src/safe-area/__tests__/hooks/useContentSafeAreaPadding.test.tsx

@@ -1,15 +1,15 @@
 /**
  * Tests for useContentSafeAreaPadding hook
  */
+import { describe, it, expect } from '@jest/globals';
+import { useContentSafeAreaPadding } from '../../hooks/useContentSafeAreaPadding';
 
 describe('useContentSafeAreaPadding', () => {
   it('should be defined', () => {
-    const { useContentSafeAreaPadding } = require('../../hooks/useContentSafeAreaPadding');
     expect(useContentSafeAreaPadding).toBeDefined();
   });
 
   it('should return function', () => {
-    const { useContentSafeAreaPadding } = require('../../hooks/useContentSafeAreaPadding');
     expect(typeof useContentSafeAreaPadding).toBe('function');
   });
 });

package/src/safe-area/__tests__/hooks/useHeaderSafeAreaPadding.test.tsx

@@ -1,15 +1,15 @@
 /**
  * Tests for useHeaderSafeAreaPadding hook
  */
+import { describe, it, expect } from '@jest/globals';
+import { useHeaderSafeAreaPadding } from '../../hooks/useHeaderSafeAreaPadding';
 
 describe('useHeaderSafeAreaPadding', () => {
   it('should be defined', () => {
-    const { useHeaderSafeAreaPadding } = require('../../hooks/useHeaderSafeAreaPadding');
     expect(useHeaderSafeAreaPadding).toBeDefined();
   });
 
   it('should return function', () => {
-    const { useHeaderSafeAreaPadding } = require('../../hooks/useHeaderSafeAreaPadding');
     expect(typeof useHeaderSafeAreaPadding).toBe('function');
   });
 });

package/src/safe-area/__tests__/hooks/useSafeAreaInsets.test.tsx

@@ -1,15 +1,15 @@
 /**
  * Tests for useSafeAreaInsets hook
  */
+import { describe, it, expect } from '@jest/globals';
+import { useSafeAreaInsets } from '../../hooks/useSafeAreaInsets';
 
 describe('useSafeAreaInsets', () => {
   it('should be defined', () => {
-    const { useSafeAreaInsets } = require('../../hooks/useSafeAreaInsets');
     expect(useSafeAreaInsets).toBeDefined();
   });
 
   it('should return function', () => {
-    const { useSafeAreaInsets } = require('../../hooks/useSafeAreaInsets');
     expect(typeof useSafeAreaInsets).toBe('function');
   });
 });