@umituz/react-native-design-system 4.28.11 → 4.28.12

package/src/device/infrastructure/services/DeviceInfoService.ts

@@ -25,7 +25,34 @@ const getDeviceModule = (): typeof import('expo-device') | null => {
 };
 
 export class DeviceInfoService {
+  // Static cache for device info (app-lifetime)
+  private static cachedDeviceInfo: DeviceInfo | null = null;
+  private static cachePromise: Promise<DeviceInfo> | null = null;
+
   static async getDeviceInfo(): Promise<DeviceInfo> {
+    // Return cached data if available
+    if (this.cachedDeviceInfo) {
+      return this.cachedDeviceInfo;
+    }
+
+    // Return existing promise if cache is being populated
+    if (this.cachePromise) {
+      return this.cachePromise;
+    }
+
+    // Populate cache
+    this.cachePromise = this.fetchDeviceInfo();
+
+    try {
+      const deviceInfo = await this.cachePromise;
+      this.cachedDeviceInfo = deviceInfo;
+      return deviceInfo;
+    } finally {
+      this.cachePromise = null;
+    }
+  }
+
+  private static async fetchDeviceInfo(): Promise<DeviceInfo> {
     try {
       const Device = getDeviceModule();
 
@@ -74,6 +101,12 @@ export class DeviceInfoService {
     }
   }
 
+  // Clear cache (useful for testing)
+  static clearCache(): void {
+    this.cachedDeviceInfo = null;
+    this.cachePromise = null;
+  }
+
   private static getMinimalDeviceInfo(): DeviceInfo {
     return {
       brand: null,

package/src/device/infrastructure/services/UserFriendlyIdService.ts

@@ -32,7 +32,8 @@ export class UserFriendlyIdService {
   static async getUserFriendlyId(): Promise<string> {
     // Web platform - no native modules needed
     if (Platform.OS === 'web') {
-      return `WebUser-${generateRandomId()}`;
+      const randomId = await generateRandomId();
+      return `WebUser-${randomId}`;
     }
 
     try {
@@ -44,25 +45,26 @@ export class UserFriendlyIdService {
       if (deviceInfo && (deviceInfo.modelName || deviceInfo.deviceName)) {
         const model = deviceInfo.modelName || deviceInfo.deviceName || 'Device';
         const cleanModel = cleanModelName(model);
-        const idPart = extractIdPart(deviceId, 6);
+        const idPart = await extractIdPart(deviceId, 6);
 
         return `${cleanModel}-${idPart}`;
       }
 
       // Fallback: Use platform + random ID
-      return this.generateFallbackId();
+      return await this.generateFallbackId();
     } catch {
       // Final fallback: Generate safe random ID
-      return this.generateFallbackId();
+      return await this.generateFallbackId();
     }
   }
 
   /**
    * Generate fallback ID when native modules are not available
    */
-  private static generateFallbackId(): string {
+  private static async generateFallbackId(): Promise<string> {
     const platformPrefix = getPlatformPrefix(Platform.OS);
-    return `${platformPrefix}-${generateRandomId()}`;
+    const randomId = await generateRandomId();
+    return `${platformPrefix}-${randomId}`;
   }
 }
 

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

@@ -2,7 +2,7 @@
  * String Utils Tests
  */
 
-import { cleanModelName, extractIdPart, generateRandomId, getPlatformPrefix } from '../stringUtils';
+import { cleanModelName, extractIdPart, generateRandomId, generateRandomIdSync, extractIdPartSync, getPlatformPrefix } from '../stringUtils';
 
 describe('String Utils', () => {
   describe('cleanModelName', () => {
@@ -33,60 +33,96 @@ describe('String Utils', () => {
   });
 
   describe('extractIdPart', () => {
-    it('should extract last N characters from device ID', () => {
+    it('should extract last N characters from device ID', async () => {
       const deviceId = '12345678-1234-1234-1234-123456789012';
-      const result = extractIdPart(deviceId, 6);
+      const result = await extractIdPart(deviceId, 6);
       expect(result).toBe('789012');
     });
 
-    it('should use default length of 6 when not specified', () => {
+    it('should use default length of 6 when not specified', async () => {
       const deviceId = '12345678-1234-1234-1234-123456789012';
-      const result = extractIdPart(deviceId);
+      const result = await extractIdPart(deviceId);
       expect(result).toBe('789012');
     });
 
-    it('should handle null device ID by generating random ID', () => {
-      const result = extractIdPart(null, 6);
+    it('should handle null device ID by generating random ID', async () => {
+      const result = await extractIdPart(null, 6);
       expect(result).toMatch(/^[A-Z0-9]{6}$/);
     });
 
-    it('should handle empty device ID by generating random ID', () => {
-      const result = extractIdPart('', 6);
+    it('should handle empty device ID by generating random ID', async () => {
+      const result = await extractIdPart('', 6);
       expect(result).toMatch(/^[A-Z0-9]{6}$/);
     });
 
-    it('should handle device ID shorter than requested length', () => {
+    it('should handle device ID shorter than requested length', async () => {
       const deviceId = 'ABC';
-      const result = extractIdPart(deviceId, 6);
+      const result = await extractIdPart(deviceId, 6);
       expect(result).toBe('ABC');
     });
 
+    it('should convert to uppercase', async () => {
+      const deviceId = 'abcdef';
+      const result = await extractIdPart(deviceId, 3);
+      expect(result).toBe('DEF');
+    });
+  });
+
+  describe('extractIdPartSync', () => {
+    it('should extract last N characters from device ID', () => {
+      const deviceId = '12345678-1234-1234-1234-123456789012';
+      const result = extractIdPartSync(deviceId, 6);
+      expect(result).toBe('789012');
+    });
+
+    it('should handle null device ID by generating random ID', () => {
+      const result = extractIdPartSync(null, 6);
+      expect(result).toMatch(/^[A-Z0-9]{6}$/);
+    });
+
     it('should convert to uppercase', () => {
       const deviceId = 'abcdef';
-      const result = extractIdPart(deviceId, 3);
+      const result = extractIdPartSync(deviceId, 3);
       expect(result).toBe('DEF');
     });
   });
 
   describe('generateRandomId', () => {
-    it('should generate random ID with default length', () => {
-      const result = generateRandomId();
+    it('should generate random ID with default length', async () => {
+      const result = await generateRandomId();
       expect(result).toMatch(/^[A-Z0-9]{6}$/);
     });
 
-    it('should generate random ID with specified length', () => {
-      const result = generateRandomId(10);
+    it('should generate random ID with specified length', async () => {
+      const result = await generateRandomId(10);
       expect(result).toMatch(/^[A-Z0-9]{10}$/);
     });
 
-    it('should generate different IDs on multiple calls', () => {
-      const id1 = generateRandomId(6);
-      const id2 = generateRandomId(6);
+    it('should generate different IDs on multiple calls', async () => {
+      const id1 = await generateRandomId(6);
+      const id2 = await generateRandomId(6);
       expect(id1).not.toBe(id2);
     });
 
+    it('should handle length of 1', async () => {
+      const result = await generateRandomId(1);
+      expect(result).toMatch(/^[A-Z0-9]{1}$/);
+    });
+  });
+
+  describe('generateRandomIdSync', () => {
+    it('should generate random ID with default length', () => {
+      const result = generateRandomIdSync();
+      expect(result).toMatch(/^[A-Z0-9]{6}$/);
+    });
+
+    it('should generate random ID with specified length', () => {
+      const result = generateRandomIdSync(10);
+      expect(result).toMatch(/^[A-Z0-9]{10}$/);
+    });
+
     it('should handle length of 1', () => {
-      const result = generateRandomId(1);
+      const result = generateRandomIdSync(1);
       expect(result).toMatch(/^[A-Z0-9]{1}$/);
     });
   });

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

@@ -15,14 +15,21 @@ export async function withTimeout<T>(
   operation: () => Promise<T>,
   timeoutMs: number = 1000,
 ): Promise<T | null> {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
   try {
     const timeoutPromise = new Promise<never>((_, reject) => {
-      setTimeout(() => reject(new Error('Operation timeout')), timeoutMs);
+      timeoutId = setTimeout(() => reject(new Error('Operation timeout')), timeoutMs);
     });
 
     return await Promise.race([operation(), timeoutPromise]);
   } catch {
     return null;
+  } finally {
+    // Always clear timeout to prevent memory leak
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+    }
   }
 }
 
@@ -51,9 +58,11 @@ export async function withTimeoutAll<T>(
   operations: Array<() => Promise<T>>,
   timeoutMs: number = 2000,
 ): Promise<Array<T | null>> {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
   try {
     const timeoutPromise = new Promise<never>((_, reject) => {
-      setTimeout(() => reject(new Error('Operations timeout')), timeoutMs);
+      timeoutId = setTimeout(() => reject(new Error('Operations timeout')), timeoutMs);
     });
 
     const results = await Promise.race([
@@ -64,6 +73,11 @@ export async function withTimeoutAll<T>(
     return results as Array<T | null>;
   } catch {
     return operations.map(() => null);
+  } finally {
+    // Always clear timeout to prevent memory leak
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+    }
   }
 }
 

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

@@ -24,21 +24,67 @@ export function cleanModelName(model: string | null | undefined): string {
  * @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 {
+export async function extractIdPart(deviceId: string | null, length: number = 6): Promise<string> {
   if (!deviceId) {
-    return generateRandomId(length);
+    return await generateRandomId(length);
   }
   const start = Math.max(0, deviceId.length - length);
   return deviceId.substring(start).toUpperCase();
 }
 
 /**
- * Generate random alphanumeric ID
+ * Synchronous version of extractIdPart (uses fallback for null deviceId)
+ * @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 extractIdPartSync(deviceId: string | null, length: number = 6): string {
+  if (!deviceId) {
+    return generateRandomIdSync(length);
+  }
+  const start = Math.max(0, deviceId.length - length);
+  return deviceId.substring(start).toUpperCase();
+}
+
+/**
+ * Generate random alphanumeric ID using cryptographically secure random bytes
+ * @param length - Length of ID to generate (default: 6)
+ * @returns Random ID in uppercase
+ */
+export async function generateRandomId(length: number = 6): Promise<string> {
+  try {
+    // Use expo-crypto for cryptographically secure random bytes
+    const { getRandomBytesAsync } = require('expo-crypto');
+    const bytes: Uint8Array = await getRandomBytesAsync(length);
+
+    return Array.from(bytes)
+      .map(byte => byte.toString(36))
+      .join('')
+      .substring(0, length)
+      .toUpperCase();
+  } catch {
+    // Fallback with __DEV__ warning for environments without expo-crypto
+    if (__DEV__) {
+      console.warn('[stringUtils] expo-crypto not available, using insecure fallback');
+    }
+    return Array.from({ length }, () =>
+      Math.floor(Math.random() * 36).toString(36)
+    ).join('').toUpperCase();
+  }
+}
+
+/**
+ * Synchronous version of generateRandomId (uses fallback)
  * @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();
+export function generateRandomIdSync(length: number = 6): string {
+  if (__DEV__) {
+    console.warn('[stringUtils] Using insecure fallback for random ID generation');
+  }
+  return Array.from({ length }, () =>
+    Math.floor(Math.random() * 36).toString(36)
+  ).join('').toUpperCase();
 }
 
 /**

package/src/filesystem/domain/utils/FileUtils.ts

@@ -59,7 +59,11 @@ export class FileUtils {
    */
   static getFileExtension(filename: string): string {
     const lastDot = filename.lastIndexOf('.');
-    return lastDot > 0 ? filename.substring(lastDot) : '';
+    // Check dot is not at position 0 (dotfile like .gitignore) and not at end
+    if (lastDot > 0 && lastDot < filename.length - 1) {
+      return filename.substring(lastDot);
+    }
+    return '';
   }
 
   /**

package/src/image/domain/utils/ImageUtils.ts

@@ -12,6 +12,12 @@ export class ImageUtils {
     }
 
     static getAspectRatio(width: number, height: number): number {
+        if (height === 0) {
+            if (__DEV__) {
+                console.warn('[ImageUtils] Cannot calculate aspect ratio when height is zero');
+            }
+            return 1; // Default to square aspect ratio
+        }
         return width / height;
     }
 

package/src/layouts/AppHeader/AppHeader.tsx

@@ -8,7 +8,7 @@
  * Composition: AtomicIcon + AtomicText + AtomicButton
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, type ViewStyle } from 'react-native';
 import { SafeAreaView } from '../../safe-area';
 import { useAppDesignTokens } from '../../theme';
@@ -51,13 +51,23 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
   onRightPress,
   backgroundColor,
   style,
+  accessibilityLabel,
+  accessibilityHint,
+  accessible,
 }) => {
   const tokens = useAppDesignTokens();
   const bgColor = backgroundColor || tokens.colors.surface;
-  const styles = createAppHeaderStyles(tokens);
+
+  const styles = useMemo(() => createAppHeaderStyles(tokens), [tokens]);
 
   return (
-    <SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }]}>
+    <SafeAreaView
+      style={[styles.safeArea, { backgroundColor: bgColor }]}
+      accessibilityLabel={accessibilityLabel || title}
+      accessibilityHint={accessibilityHint}
+      accessible={accessible !== false}
+      accessibilityRole="header"
+    >
       <View style={[styles.container, { backgroundColor: bgColor }, style]}>
         {/* Left Action */}
         <View style={styles.leftContainer}>

package/src/layouts/Container/Container.tsx

@@ -28,6 +28,15 @@ export interface ContainerProps {
 
   /** Test ID */
   testID?: string;
+
+  /** Accessibility label for the container */
+  accessibilityLabel?: string;
+
+  /** Accessibility role for the container */
+  accessibilityRole?: 'region' | 'section' | 'article';
+
+  /** Whether the container is accessible */
+  accessible?: boolean;
 }
 
 /**
@@ -47,6 +56,9 @@ export const Container: React.FC<ContainerProps> = ({
   center = true,
   style,
   testID,
+  accessibilityLabel,
+  accessibilityRole = 'region',
+  accessible,
 }) => {
   const { maxContentWidth } = useResponsive();
   const tokens = useAppDesignTokens();
@@ -69,7 +81,13 @@ export const Container: React.FC<ContainerProps> = ({
   );
 
   return (
-    <View style={[styles.container, style]} testID={testID}>
+    <View
+      style={[styles.container, style]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole as any}
+      accessible={accessible !== false}
+    >
       {children}
     </View>
   );

package/src/layouts/FormLayout/FormLayout.tsx

@@ -29,6 +29,15 @@ export interface FormLayoutProps {
 
   /** Test ID */
   testID?: string;
+
+  /** Accessibility label for the form */
+  accessibilityLabel?: string;
+
+  /** Accessibility hint for the form */
+  accessibilityHint?: string;
+
+  /** Whether the form is accessible */
+  accessible?: boolean;
 }
 
 /**
@@ -51,6 +60,9 @@ export const FormLayout: React.FC<FormLayoutProps> = ({
   disableKeyboardAvoid = false,
   disableScroll = false,
   testID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessible,
 }) => {
   const tokens = useAppDesignTokens();
   const { insets } = useResponsive();
@@ -83,7 +95,14 @@ export const FormLayout: React.FC<FormLayoutProps> = ({
   );
 
   const content = (
-    <View style={styles.formContent} testID={testID}>
+    <View
+      style={styles.formContent}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel || "Form"}
+      accessibilityHint={accessibilityHint}
+      accessible={accessible !== false}
+      accessibilityRole="form"
+    >
       {children}
     </View>
   );

package/src/layouts/Grid/Grid.tsx

@@ -5,7 +5,7 @@
  * Uses design system responsive utilities
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useId } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useResponsive } from '../../responsive';
 import { useAppDesignTokens } from '../../theme';
@@ -28,6 +28,12 @@ export interface GridProps {
 
   /** Test ID for testing */
   testID?: string;
+
+  /** Accessibility label for the grid */
+  accessibilityLabel?: string;
+
+  /** Whether the grid is accessible */
+  accessible?: boolean;
 }
 
 /**
@@ -49,9 +55,12 @@ export const Grid: React.FC<GridProps> = ({
   gap,
   style,
   testID,
+  accessibilityLabel,
+  accessible,
 }) => {
   const { gridColumns, spacingMultiplier } = useResponsive();
   const tokens = useAppDesignTokens();
+  const generatedIdPrefix = useId();
 
   // Calculate responsive columns
   const columns = gridColumns || (mobileColumns && tabletColumns
@@ -82,12 +91,33 @@ export const Grid: React.FC<GridProps> = ({
   const childArray = React.Children.toArray(children);
 
   return (
-    <View style={[styles.container, style]} testID={testID}>
+    <View
+      style={[styles.container, style]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={"grid" as any}
+      accessible={accessible !== false}
+    >
       {childArray.map((child, index) => {
-        const key = (child as React.ReactElement).key || `grid-item-${index}`;
+        const childKey = (child as React.ReactElement).key;
+
+        // Warn in development if child is missing key
+        if (__DEV__ && !childKey) {
+          console.warn(
+            `[Grid] Child at index ${index} is missing a "key" prop. ` +
+            `This may cause issues with React reconciliation. ` +
+            `Please ensure all grid children have unique keys.`
+          );
+        }
+
+        const key = childKey || `${generatedIdPrefix}-grid-item-${index}`;
 
         return (
-          <View key={key} style={itemStyle}>
+          <View
+            key={key}
+            style={itemStyle}
+            accessibilityRole={"gridcell" as any}
+          >
             {child}
           </View>
         );

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -86,6 +86,10 @@ const ScreenHeaderBackButton: React.FC<{
         onPress={handleBackPress}
         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         testID={`${testID}-back-button`}
+        accessibilityRole="button"
+        accessibilityLabel="Go back"
+        accessibilityState={{ disabled: !onBackPress }}
+        accessible
       >
         <AtomicIcon name={backIconName || 'arrow-back'} color={backIconColor} />
       </TouchableOpacity>

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -3,13 +3,34 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import { View, ScrollView, KeyboardAvoidingView, Platform, type StyleProp, type ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
 import { getScreenLayoutStyles } from './styles/screenLayoutStyles';
 import type { ScreenLayoutProps } from './types';
 
+export interface ScreenLayoutProps {
+  children: React.ReactNode;
+  scrollable?: boolean;
+  edges?: ('top' | 'bottom' | 'left' | 'right')[];
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  backgroundColor?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+  hideScrollIndicator?: boolean;
+  keyboardAvoiding?: boolean;
+  keyboardVerticalOffset?: number;
+  maxWidth?: number;
+  fullWidth?: boolean;
+  refreshControl?: React.ReactElement;
+  accessibilityLabel?: string;
+  accessibilityRole?: 'window' | 'region' | 'section';
+  accessible?: boolean;
+}
+
 // Lazy-load react-native-keyboard-controller (optional peer dep).
 // Falls back to React Native's built-in components when not installed.
 let KCKeyboardAvoidingView: React.ComponentType<any> | null = null;
@@ -40,6 +61,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
     maxWidth,
     fullWidth = false,
     refreshControl,
+    accessibilityLabel,
+    accessibilityRole = 'region',
+    accessible,
   } = props;
 
   const tokens = useAppDesignTokens();
@@ -80,6 +104,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
           paddingRight,
         },
       ]}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessible={accessible !== false}
     >
       {header}
       {scrollable ? (
@@ -109,7 +136,13 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
   if (keyboardAvoiding) {
     const KAV = KCKeyboardAvoidingView ?? KeyboardAvoidingView;
     return (
-      <View style={[styles.container, { backgroundColor: bgColor }, containerStyle]} testID={testID}>
+      <View
+        style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole={accessibilityRole}
+        accessible={accessible !== false}
+      >
         <KAV
           style={styles.keyboardAvoidingView}
           behavior={Platform.OS === 'ios' ? 'padding' : undefined}
@@ -122,7 +155,13 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: bgColor }, containerStyle]} testID={testID}>
+    <View
+      style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessible={accessible !== false}
+    >
       <View style={styles.keyboardAvoidingView}>{content}</View>
     </View>
   );