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

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/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;

package/src/responsive/iPadDetection.ts

@@ -0,0 +1,48 @@
+/**
+ * iPad Device Detection Utilities
+ */
+
+import { Dimensions, Platform } from 'react-native';
+import { DEVICE_BREAKPOINTS } from './config';
+import { IPAD_BREAKPOINTS } from './iPadBreakpoints';
+
+/**
+ * Detect if the current device is an iPad
+ */
+export function isIPad(): boolean {
+    if (Platform.OS !== 'ios') return false;
+
+    const { width, height } = Dimensions.get('window');
+    const minDimension = Math.min(width, height);
+    return minDimension >= DEVICE_BREAKPOINTS.SMALL_TABLET;
+}
+
+/**
+ * Detect if the current device is an iPad mini
+ */
+export function isIPadMini(): boolean {
+    if (!isIPad()) return false;
+
+    const { width, height } = Dimensions.get('window');
+    const minWidth = Math.min(width, height);
+    return minWidth < IPAD_BREAKPOINTS.IPAD_AIR;
+}
+
+/**
+ * Detect if the current device is an iPad Pro (12.9")
+ */
+export function isIPadPro(): boolean {
+    if (!isIPad()) return false;
+
+    const { width, height } = Dimensions.get('window');
+    const minWidth = Math.min(width, height);
+    return minWidth >= IPAD_BREAKPOINTS.IPAD_11_PRO;
+}
+
+/**
+ * Check if device is in landscape orientation
+ */
+export function isIPadLandscape(): boolean {
+    const { width, height } = Dimensions.get('window');
+    return width > height;
+}

package/src/responsive/iPadLayoutUtils.ts

@@ -0,0 +1,95 @@
+/**
+ * iPad Layout Utilities
+ */
+
+import { Dimensions } from 'react-native';
+import { DEVICE_BREAKPOINTS } from './config';
+import {
+    IPAD_BREAKPOINTS,
+    TOUCH_TARGETS,
+    CONTENT_WIDTH_CONSTRAINTS,
+    IPAD_LAYOUT_CONFIG,
+} from './iPadBreakpoints';
+import { isIPad, isIPadPro } from './iPadDetection';
+
+/**
+ * Get optimal content max width based on screen size
+ */
+export function getContentMaxWidth(screenWidth: number): number {
+    if (screenWidth >= IPAD_BREAKPOINTS.IPAD_12_9_PRO) {
+        return CONTENT_WIDTH_CONSTRAINTS.READABLE_MAX;
+    }
+    if (screenWidth >= IPAD_BREAKPOINTS.IPAD_AIR) {
+        return Math.min(screenWidth * 0.85, CONTENT_WIDTH_CONSTRAINTS.READABLE_MAX);
+    }
+    if (screenWidth >= DEVICE_BREAKPOINTS.SMALL_TABLET) {
+        return Math.min(screenWidth * 0.90, CONTENT_WIDTH_CONSTRAINTS.FORM_MAX);
+    }
+    return screenWidth;
+}
+
+/**
+ * Get grid columns based on screen width
+ */
+export function getIPadGridColumns(screenWidth: number): number {
+    if (screenWidth >= IPAD_BREAKPOINTS.IPAD_LANDSCAPE_AIR) return 4;
+    if (screenWidth >= IPAD_BREAKPOINTS.IPAD_12_9_PRO) return 3;
+    if (screenWidth >= DEVICE_BREAKPOINTS.SMALL_TABLET) return 2;
+    return 1;
+}
+
+/**
+ * Get touch target size based on device
+ */
+export function getTouchTargetSize(): number {
+    return isIPad() ? TOUCH_TARGETS.IPAD_RECOMMENDED : TOUCH_TARGETS.RECOMMENDED;
+}
+
+/**
+ * Get screen padding based on device type
+ */
+export function getIPadScreenPadding(): number {
+    if (isIPadPro()) return 32;
+    if (isIPad()) return IPAD_LAYOUT_CONFIG.SCREEN_PADDING;
+    return 16;
+}
+
+/**
+ * Get font scale for iPad
+ */
+export function getIPadFontScale(): number {
+    if (isIPadPro()) return 1.15;
+    if (isIPad()) return IPAD_LAYOUT_CONFIG.FONT_SCALE;
+    return 1.0;
+}
+
+export interface IPadLayoutInfo {
+    isIPad: boolean;
+    isLandscape: boolean;
+    screenWidth: number;
+    screenHeight: number;
+    contentMaxWidth: number;
+    gridColumns: number;
+    touchTargetSize: number;
+    screenPadding: number;
+    fontScale: number;
+}
+
+/**
+ * Get complete iPad layout information
+ */
+export function getIPadLayoutInfo(): IPadLayoutInfo {
+    const { width, height } = Dimensions.get('window');
+
+    return {
+        isIPad: isIPad(),
+        isLandscape: width > height,
+        screenWidth: width,
+        screenHeight: height,
+        contentMaxWidth: getContentMaxWidth(width),
+        gridColumns: getIPadGridColumns(width),
+        touchTargetSize: getTouchTargetSize(),
+        screenPadding: getIPadScreenPadding(),
+        fontScale: getIPadFontScale(),
+    };
+}