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

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(),
+    };
+}

package/src/responsive/iPadModalUtils.ts

@@ -0,0 +1,98 @@
+/**
+ * iPad Modal Utilities
+ * Modal dimensions optimized for iPad following Apple HIG
+ */
+
+import { Dimensions } from 'react-native';
+import { CONTENT_WIDTH_CONSTRAINTS, IPAD_LAYOUT_CONFIG } from './iPadBreakpoints';
+import { isIPad, isIPadPro } from './iPadDetection';
+
+export interface ModalDimensions {
+    width: number | string;
+    maxWidth: number;
+    maxHeight: string | number;
+    horizontalMargin: number;
+    borderRadius: number;
+}
+
+/**
+ * Get modal dimensions optimized for iPad
+ */
+export function getIPadModalDimensions(): ModalDimensions {
+    const { width } = Dimensions.get('window');
+
+    if (isIPadPro()) {
+        return {
+            width: CONTENT_WIDTH_CONSTRAINTS.MODAL_MAX,
+            maxWidth: CONTENT_WIDTH_CONSTRAINTS.MODAL_MAX,
+            maxHeight: '75%',
+            horizontalMargin: 64,
+            borderRadius: 20,
+        };
+    }
+
+    if (isIPad()) {
+        return {
+            width: Math.min(width * 0.8, CONTENT_WIDTH_CONSTRAINTS.MODAL_MAX),
+            maxWidth: CONTENT_WIDTH_CONSTRAINTS.MODAL_MAX,
+            maxHeight: '80%',
+            horizontalMargin: IPAD_LAYOUT_CONFIG.MODAL_HORIZONTAL_MARGIN,
+            borderRadius: IPAD_LAYOUT_CONFIG.MODAL_CORNER_RADIUS,
+        };
+    }
+
+    return {
+        width: '92%',
+        maxWidth: 480,
+        maxHeight: '90%',
+        horizontalMargin: 16,
+        borderRadius: 24,
+    };
+}
+
+export interface PaywallDimensions {
+    width: number | string;
+    maxWidth: number;
+    maxHeight: string | number;
+    padding: number;
+    buttonHeight: number;
+    priceTextScale: number;
+}
+
+/**
+ * Get paywall modal dimensions - Apple HIG compliant
+ */
+export function getPaywallDimensions(): PaywallDimensions {
+    const { width } = Dimensions.get('window');
+
+    if (isIPadPro()) {
+        return {
+            width: CONTENT_WIDTH_CONSTRAINTS.PAYWALL_MAX,
+            maxWidth: CONTENT_WIDTH_CONSTRAINTS.PAYWALL_MAX,
+            maxHeight: '80%',
+            padding: 32,
+            buttonHeight: 56,
+            priceTextScale: 1.2,
+        };
+    }
+
+    if (isIPad()) {
+        return {
+            width: Math.min(width * 0.75, CONTENT_WIDTH_CONSTRAINTS.PAYWALL_MAX),
+            maxWidth: CONTENT_WIDTH_CONSTRAINTS.PAYWALL_MAX,
+            maxHeight: '85%',
+            padding: 28,
+            buttonHeight: 52,
+            priceTextScale: 1.1,
+        };
+    }
+
+    return {
+        width: '100%',
+        maxWidth: 480,
+        maxHeight: '95%',
+        padding: 20,
+        buttonHeight: 50,
+        priceTextScale: 1.0,
+    };
+}

package/src/responsive/index.ts

@@ -62,3 +62,34 @@ export {
   getMinTouchTarget,
 } from './platformConstants';
 
+// iPad-specific exports
+export {
+  IPAD_BREAKPOINTS,
+  TOUCH_TARGETS,
+  CONTENT_WIDTH_CONSTRAINTS,
+  IPAD_LAYOUT_CONFIG,
+} from './iPadBreakpoints';
+
+export {
+  isIPad,
+  isIPadMini,
+  isIPadPro,
+  isIPadLandscape,
+} from './iPadDetection';
+
+export {
+  getContentMaxWidth,
+  getIPadGridColumns,
+  getTouchTargetSize,
+  getIPadScreenPadding,
+  getIPadFontScale,
+  getIPadLayoutInfo,
+  type IPadLayoutInfo,
+} from './iPadLayoutUtils';
+
+export {
+  getIPadModalDimensions,
+  getPaywallDimensions,
+  type ModalDimensions,
+  type PaywallDimensions,
+} from './iPadModalUtils';

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');
   });
 });

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

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

package/src/safe-area/__tests__/integration/completeFlow.test.tsx

@@ -1,25 +1,26 @@
 /**
  * Integration tests for complete flow
  */
+import { describe, it, expect } from '@jest/globals';
+import { useSafeAreaInsets } from '../../hooks/useSafeAreaInsets';
+import { useStatusBarSafeAreaPadding } from '../../hooks/useStatusBarSafeAreaPadding';
+import { useHeaderSafeAreaPadding } from '../../hooks/useHeaderSafeAreaPadding';
+import { useContentSafeAreaPadding } from '../../hooks/useContentSafeAreaPadding';
 
 describe('Integration Tests', () => {
   it('should import useSafeAreaInsets', () => {
-    const { useSafeAreaInsets } = require('../../hooks/useSafeAreaInsets');
     expect(useSafeAreaInsets).toBeDefined();
   });
 
   it('should import useStatusBarSafeAreaPadding', () => {
-    const { useStatusBarSafeAreaPadding } = require('../../hooks/useStatusBarSafeAreaPadding');
     expect(useStatusBarSafeAreaPadding).toBeDefined();
   });
 
   it('should import useHeaderSafeAreaPadding', () => {
-    const { useHeaderSafeAreaPadding } = require('../../hooks/useHeaderSafeAreaPadding');
     expect(useHeaderSafeAreaPadding).toBeDefined();
   });
 
   it('should import useContentSafeAreaPadding', () => {
-    const { useContentSafeAreaPadding } = require('../../hooks/useContentSafeAreaPadding');
     expect(useContentSafeAreaPadding).toBeDefined();
   });
 });

package/src/safe-area/__tests__/utils/testUtils.tsx

@@ -1,6 +1,7 @@
 /**
  * Simple test utilities for safe area package
  */
+import { describe, it, expect, jest } from '@jest/globals';
 
 export const mockSafeAreaInsets = {
   top: 44,
@@ -9,7 +10,7 @@ export const mockSafeAreaInsets = {
   right: 0,
 };
 
-export const createWrapper = (insets = mockSafeAreaInsets) => {
+export const createWrapper = () => {
   return ({ children }: { children: any }) => children;
 };
 
@@ -21,11 +22,11 @@ export const renderHookWithSafeArea = <T, P>(
     insets?: typeof mockSafeAreaInsets;
   },
 ) => {
-  const wrapper = options?.wrapper || createWrapper(options?.insets);
-  
+  // wrapper not used in this stub implementation
+
   return {
     result: { current: hook(options?.initialProps as P) },
-    rerender: () => {},
+    rerender: () => { },
   };
 };
 

package/src/theme/infrastructure/stores/themeStore.ts

@@ -66,7 +66,6 @@ export const useTheme = create<ThemeState>()((set: any, get: any) => ({
         useDesignSystemTheme.getState().setThemeMode('dark');
       }
     } catch (error) {
-      /* eslint-disable-next-line no-console */
       if (__DEV__) console.error('[ThemeStore] Initialization error:', error);
       // Silent failure - still mark as initialized to prevent blocking
       set({ isInitialized: true });
@@ -90,7 +89,6 @@ export const useTheme = create<ThemeState>()((set: any, get: any) => ({
       // Sync with design system global theme
       useDesignSystemTheme.getState().setThemeMode(mode);
     } catch (error) {
-      /* eslint-disable-next-line no-console */
       if (__DEV__) console.error('[ThemeStore] Error setting theme mode:', error);
     }
   },

package/src/typography/presentation/utils/textColorUtils.ts

@@ -124,7 +124,6 @@ class MaterialColorMapper implements ColorMapper {
 
       default:
         if (__DEV__) {
-          // eslint-disable-next-line no-console
           console.warn(`Unknown color variant: ${color}`);
         }
         return tokens.colors.textPrimary;