@umituz/react-native-design-system 4.23.65 → 4.23.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.65",
+  "version": "4.23.67",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/index.ts

@@ -6,10 +6,12 @@
 // Button
 export {
     AtomicButton,
-    type AtomicButtonProps,
-    type ButtonVariant,
-    type ButtonSize,
-} from './button';
+} from './button/AtomicButton';
+export type {
+    AtomicButtonProps,
+    ButtonVariant,
+    ButtonSize,
+} from './button/types';
 
 // Text
 export { AtomicText, type AtomicTextProps } from './AtomicText';
@@ -17,10 +19,12 @@ export { AtomicText, type AtomicTextProps } from './AtomicText';
 // Card
 export {
     AtomicCard,
-    type AtomicCardProps,
-    type CardVariant as AtomicCardVariant,
-    type CardPadding as AtomicCardPadding,
-} from './card';
+} from './card/AtomicCard';
+export type {
+    AtomicCardProps,
+    CardVariant as AtomicCardVariant,
+    CardPadding as AtomicCardPadding,
+} from './card/types';
 
 // Input
 export {
@@ -54,14 +58,22 @@ export {
     ICON_SIZES,
     getIconSize,
     isIconSizePreset,
-} from './icon';
+} from './icon/index';
 
 
 // Avatar
 export { AtomicAvatar, type AtomicAvatarProps } from './AtomicAvatar';
 
 // Chip
-export { AtomicChip, type AtomicChipProps } from './chip';
+export {
+    AtomicChip,
+} from './chip/AtomicChip';
+export type {
+    AtomicChipProps,
+    ChipVariant,
+    ChipSize,
+    ChipColor,
+} from './chip/types';
 
 // Progress
 export { AtomicProgress, type AtomicProgressProps } from './AtomicProgress';
@@ -90,10 +102,12 @@ export { AtomicDatePicker, type AtomicDatePickerProps } from './AtomicDatePicker
 export {
     AtomicSkeleton,
     type AtomicSkeletonProps,
-    type SkeletonPattern,
-    type SkeletonConfig,
-    SKELETON_PATTERNS,
-} from './skeleton';
+} from './skeleton/AtomicSkeleton';
+export type {
+    SkeletonPattern,
+    SkeletonConfig,
+} from './skeleton/AtomicSkeleton.types';
+export { SKELETON_PATTERNS } from './skeleton/AtomicSkeleton.types';
 
 // Badge
 export {
@@ -101,7 +115,7 @@ export {
     type AtomicBadgeProps,
     type BadgeVariant,
     type BadgeSize,
-} from './badge';
+} from './badge/AtomicBadge';
 
 // Spinner
 export {
@@ -124,13 +138,13 @@ export { AtomicSwitch, type AtomicSwitchProps } from './AtomicSwitch';
 export { AtomicTouchable, type AtomicTouchableProps } from './AtomicTouchable';
 
 // StatusBar
-export { AtomicStatusBar, type AtomicStatusBarProps } from './status-bar';
+export { AtomicStatusBar, type AtomicStatusBarProps } from './status-bar/AtomicStatusBar';
 
 // Keyboard Avoiding
 export { AtomicKeyboardAvoidingView, type AtomicKeyboardAvoidingViewProps } from './AtomicKeyboardAvoidingView';
 
 // GlassView
-export { GlassView, type GlassViewProps } from './GlassView';
+export { GlassView, type GlassViewProps } from './GlassView/GlassView';
 
 // Image
 export { AtomicImage, type AtomicImageProps } from './image/AtomicImage';

package/src/atoms/picker/{types/index.ts → types.ts}

@@ -1,5 +1,5 @@
 import { ViewStyle, TextStyle } from 'react-native';
-import { IconColor } from '../../icon';
+import { IconColor } from '../icon';
 
 /**
  * Picker option item

package/src/device/index.ts

@@ -89,7 +89,6 @@ export { DeviceFeatureService } from './infrastructure/services/DeviceFeatureSer
 export { collectDeviceExtras } from './infrastructure/services/DeviceExtrasCollector';
 export type { DeviceExtras } from './infrastructure/services/DeviceExtrasCollector';
 export { SecureDeviceIdRepository } from './infrastructure/repositories/SecureDeviceIdRepository';
-export { LegacyDeviceIdRepository } from './infrastructure/repositories/LegacyDeviceIdRepository';
 
 // ============================================================================
 // PRESENTATION - Device hooks

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

@@ -1,6 +1,5 @@
 import { generateUUID } from '../../../uuid';
 import { SecureDeviceIdRepository } from '../repositories/SecureDeviceIdRepository';
-import { LegacyDeviceIdRepository } from '../repositories/LegacyDeviceIdRepository';
 import { DeviceIdService } from './DeviceIdService';
 
 let cachedDeviceId: string | null = null;
@@ -17,7 +16,6 @@ let initializationPromise: Promise<string> | null = null;
  */
 export class PersistentDeviceIdService {
   private static secureRepo = new SecureDeviceIdRepository();
-  private static legacyRepo = new LegacyDeviceIdRepository();
 
   /**
    * Get device ID with caching and concurrent request handling
@@ -51,24 +49,9 @@ export class PersistentDeviceIdService {
         return secureId;
       }
 
-      // 2. Try migration from legacy storage
-      const migrated = await this.migrateFromLegacy();
-      if (migrated) {
-        if (__DEV__) {
-          console.log('[PersistentDeviceIdService] Migrated ID from legacy storage:', migrated);
-        }
-        cachedDeviceId = migrated;
-        return migrated;
-      }
-
-      // 3. Create brand new ID
+      // 2. Create brand new ID
       const newId = await this.createNewDeviceId();
-      
-      // Save to both for safety during transition
-      await Promise.all([
-        this.secureRepo.set(newId),
-        this.legacyRepo.set(newId),
-      ]);
+      await this.secureRepo.set(newId);
 
       if (__DEV__) {
         console.log('[PersistentDeviceIdService] Created new persistent ID:', newId);
@@ -86,32 +69,6 @@ export class PersistentDeviceIdService {
     }
   }
 
-  /**
-   * Handles migration while ensuring it only happens once
-   */
-  private static async migrateFromLegacy(): Promise<string | null> {
-    try {
-      const hasMigrated = await this.secureRepo.hasMigrated();
-      if (hasMigrated) {
-        return null;
-      }
-
-      const legacyId = await this.legacyRepo.get();
-      if (!legacyId) {
-        await this.secureRepo.setMigrated();
-        return null;
-      }
-
-      // Upgrade legacy to secure storage
-      await this.secureRepo.set(legacyId);
-      await this.secureRepo.setMigrated();
-
-      return legacyId;
-    } catch {
-      return null;
-    }
-  }
-
   /**
    * Generates a new ID based on platform info if possible
    */
@@ -142,10 +99,7 @@ export class PersistentDeviceIdService {
    */
   static async clearStoredId(): Promise<void> {
     try {
-      await Promise.all([
-        this.secureRepo.remove(),
-        this.legacyRepo.remove(),
-      ]);
+      await this.secureRepo.remove();
       cachedDeviceId = null;
       initializationPromise = null;
       if (__DEV__) {

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

@@ -8,7 +8,7 @@
  * @layer presentation/hooks
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { DeviceService } from '../../infrastructure/services/DeviceService';
 import { PersistentDeviceIdService } from '../../infrastructure/services/PersistentDeviceIdService';
 import type { DeviceInfo, ApplicationInfo, SystemInfo } from '../../domain/entities/Device';
@@ -24,23 +24,34 @@ export const useDeviceInfo = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const isMountedRef = useRef(true);
+
   /**
    * Load all device and app information
    */
   const loadInfo = useCallback(async () => {
+    if (!isMountedRef.current) return;
+
     setIsLoading(true);
     setError(null);
 
     try {
       const system = await DeviceService.getSystemInfo();
-      setSystemInfo(system);
-      setDeviceInfo(system.device);
-      setAppInfo(system.application);
+
+      if (isMountedRef.current) {
+        setSystemInfo(system);
+        setDeviceInfo(system.device);
+        setAppInfo(system.application);
+      }
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to load device info';
-      setError(errorMessage);
+      if (isMountedRef.current) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load device info';
+        setError(errorMessage);
+      }
     } finally {
-      setIsLoading(false);
+      if (isMountedRef.current) {
+        setIsLoading(false);
+      }
     }
   }, []);
 
@@ -48,17 +59,26 @@ export const useDeviceInfo = () => {
    * Load device info only
    */
   const loadDeviceInfo = useCallback(async () => {
+    if (!isMountedRef.current) return;
+
     setIsLoading(true);
     setError(null);
 
     try {
       const info = await DeviceService.getDeviceInfo();
-      setDeviceInfo(info);
+
+      if (isMountedRef.current) {
+        setDeviceInfo(info);
+      }
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to load device info';
-      setError(errorMessage);
+      if (isMountedRef.current) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load device info';
+        setError(errorMessage);
+      }
     } finally {
-      setIsLoading(false);
+      if (isMountedRef.current) {
+        setIsLoading(false);
+      }
     }
   }, []);
 
@@ -66,17 +86,26 @@ export const useDeviceInfo = () => {
    * Load app info only
    */
   const loadAppInfo = useCallback(async () => {
+    if (!isMountedRef.current) return;
+
     setIsLoading(true);
     setError(null);
 
     try {
       const info = await DeviceService.getApplicationInfo();
-      setAppInfo(info);
+
+      if (isMountedRef.current) {
+        setAppInfo(info);
+      }
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to load app info';
-      setError(errorMessage);
+      if (isMountedRef.current) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load app info';
+        setError(errorMessage);
+      }
     } finally {
-      setIsLoading(false);
+      if (isMountedRef.current) {
+        setIsLoading(false);
+      }
     }
   }, []);
 
@@ -91,7 +120,12 @@ export const useDeviceInfo = () => {
    * Load info on mount
    */
   useEffect(() => {
+    isMountedRef.current = true;
     loadInfo();
+
+    return () => {
+      isMountedRef.current = false;
+    };
   }, [loadInfo]);
 
   return {

package/src/exception/presentation/components/ErrorBoundary.tsx

@@ -36,7 +36,7 @@ export class ErrorBoundary extends Component<Props, State> {
     };
   }
 
-  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
     // Log error to exception service
     exceptionService.handleFatalError(error, {
       componentStack: errorInfo.componentStack ?? undefined,
@@ -56,7 +56,7 @@ export class ErrorBoundary extends Component<Props, State> {
     });
   };
 
-  override render(): ReactNode {
+  render(): ReactNode {
     if (this.state.hasError) {
       if (this.props.fallback) {
         return this.props.fallback;

package/src/image/index.ts

@@ -81,7 +81,6 @@ export { ImageGallery, type ImageGalleryProps } from './presentation/components/
 export { TextEditorSheet, type TextEditorSheetProps } from './presentation/components/editor/TextEditorSheet';
 export { StickerPickerSheet, type StickerPickerSheetProps } from './presentation/components/editor/StickerPickerSheet';
 export { FilterPickerSheet, type FilterPickerSheetProps } from './presentation/components/editor/FilterPickerSheet';
-export { AtomicImage, type AtomicImageProps } from './presentation/components/image/AtomicImage';
 
 export { useImage } from './presentation/hooks/useImage';
 export { useImageTransform } from './presentation/hooks/useImageTransform';

package/src/image/infrastructure/utils/LayerManager.ts

@@ -7,7 +7,6 @@
 import type { EditorLayer } from '../../domain/entities/EditorTypes';
 import { ImageEditorService } from '../services/ImageEditorService';
 
-type LayerElement = EditorLayer['elements'][number];
 export type LayerOperation = 'add' | 'remove' | 'move' | 'merge' | 'duplicate';
 
 export interface LayerComposition {

package/src/image/presentation/components/ImageGallery.tsx

@@ -5,15 +5,13 @@
  * Replaces slow standard image components for instant loading.
  */
 
-import React, { useCallback, useState, useEffect } from 'react';
-import { Modal, View, StyleSheet, FlatList, Dimensions, type NativeSyntheticEvent, type NativeScrollEvent } from 'react-native';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { Modal, View, StyleSheet, FlatList, useWindowDimensions, type NativeSyntheticEvent, type NativeScrollEvent } from 'react-native';
 import { Image } from 'expo-image';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { ImageViewerItem, ImageGalleryOptions } from '../../domain/entities/ImageTypes';
 import { GalleryHeader } from './GalleryHeader';
 
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
-
 export interface ImageGalleryProps extends ImageGalleryOptions {
     images: ImageViewerItem[];
     visible: boolean;
@@ -36,8 +34,35 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     title,
 }) => {
     const insets = useSafeAreaInsets();
+    const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions();
     const [currentIndex, setCurrentIndex] = useState(index);
 
+    const styles = useMemo(() => StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        list: {
+            flex: 1,
+        },
+        imageWrapper: {
+            width: SCREEN_WIDTH,
+            height: SCREEN_HEIGHT,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        fullImage: {
+            width: '100%',
+            height: '100%',
+        },
+        footer: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            alignItems: 'center',
+        }
+    }), [SCREEN_WIDTH, SCREEN_HEIGHT]);
+
     useEffect(() => {
         if (visible) setCurrentIndex(index);
     }, [visible, index]);
@@ -54,7 +79,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
             setCurrentIndex(nextIndex);
             onIndexChange?.(nextIndex);
         }
-    }, [currentIndex, onIndexChange]);
+    }, [currentIndex, onIndexChange, SCREEN_WIDTH]);
 
     const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
         <View style={styles.imageWrapper}>
@@ -65,7 +90,13 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
                 cachePolicy="memory-disk"
             />
         </View>
-    ), []);
+    ), [styles]);
+
+    const getItemLayout = useCallback((_: unknown, i: number) => ({
+        length: SCREEN_WIDTH,
+        offset: SCREEN_WIDTH * i,
+        index: i,
+    }), [SCREEN_WIDTH]);
 
     if (!visible && !currentIndex) return null;
 
@@ -91,11 +122,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
                     pagingEnabled
                     showsHorizontalScrollIndicator={false}
                     initialScrollIndex={index}
-                    getItemLayout={(_, i) => ({
-                        length: SCREEN_WIDTH,
-                        offset: SCREEN_WIDTH * i,
-                        index: i,
-                    })}
+                    getItemLayout={getItemLayout}
                     onScroll={handleScroll}
                     scrollEventThrottle={16}
                     keyExtractor={(item, i) => `${item.uri}-${i}`}
@@ -109,29 +136,3 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
         </Modal>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    list: {
-        flex: 1,
-    },
-    imageWrapper: {
-        width: SCREEN_WIDTH,
-        height: SCREEN_HEIGHT,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    fullImage: {
-        width: '100%',
-        height: '100%',
-    },
-    footer: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        alignItems: 'center',
-    }
-});

package/src/image/presentation/components/editor/StickerPickerSheet.tsx

@@ -2,15 +2,13 @@
  * Presentation - Sticker Picker Sheet
  */
 
-import React, { forwardRef } from 'react';
-import { View, TouchableOpacity, ScrollView, Image, Dimensions } from 'react-native';
+import React, { forwardRef, useMemo } from 'react';
+import { View, TouchableOpacity, ScrollView, Image, useWindowDimensions } from 'react-native';
 import { BottomSheetModal } from '../../../../molecules/bottom-sheet/components/BottomSheetModal';
 import type { BottomSheetModalRef } from '../../../../molecules/bottom-sheet/types/BottomSheet';
 import { AtomicText } from '../../../../atoms/AtomicText';
 import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
 
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
-
 export interface StickerPickerSheetProps {
   stickers: string[];
   onSelectSticker: (uri: string) => void;
@@ -22,6 +20,12 @@ export interface StickerPickerSheetProps {
 export const StickerPickerSheet = forwardRef<BottomSheetModalRef, StickerPickerSheetProps>(
   ({ stickers, onSelectSticker, onDismiss, title = 'Select Sticker', snapPoints = ['60%'] }, ref) => {
     const tokens = useAppDesignTokens();
+    const { width: SCREEN_WIDTH } = useWindowDimensions();
+
+    const stickerSize = useMemo(
+      () => (SCREEN_WIDTH - 64) / 3,
+      [SCREEN_WIDTH]
+    );
 
     return (
       <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
@@ -37,7 +41,7 @@ export const StickerPickerSheet = forwardRef<BottomSheetModalRef, StickerPickerS
                   key={index}
                   onPress={() => onSelectSticker(uri)}
                   style={{
-                    width: (SCREEN_WIDTH - 64) / 3,
+                    width: stickerSize,
                     aspectRatio: 1,
                     backgroundColor: tokens.colors.surfaceVariant,
                     borderRadius: tokens.radius.md,