@umituz/react-native-design-system 4.25.7 → 4.25.9

package/src/molecules/avatar/Avatar.tsx

@@ -13,41 +13,86 @@ import type { AvatarSize, AvatarShape } from './Avatar.types';
 import { SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';
 import { AvatarUtils } from './Avatar.utils';
 
-/**
- * Avatar component props
- */
 export interface AvatarProps {
-  /** Image URI */
   uri?: string;
-  /** User name for initials */
   name?: string;
-  /** Icon name (fallback when no image/name) */
   icon?: string;
-  /** Size preset */
   size?: AvatarSize;
-  /** Shape */
   shape?: AvatarShape;
-  /** Custom background color */
   backgroundColor?: string;
-  /** Show status indicator */
   showStatus?: boolean;
-  /** Status (online/offline/away/busy) */
   status?: 'online' | 'offline' | 'away' | 'busy';
-  /** Custom container style */
   style?: StyleProp<ViewStyle>;
-  /** Custom image style */
   imageStyle?: StyleProp<ImageStyle>;
-  /** OnPress handler */
   onPress?: () => void;
 }
 
-/**
- * Avatar Component
- * Displays user avatars with automatic fallback hierarchy:
- * 1. Image (if uri provided)
- * 2. Initials (if name provided)
- * 3. Icon (fallback)
- */
+interface AvatarContentProps {
+  hasImage: boolean;
+  hasName: boolean;
+  uri?: string;
+  initials: string;
+  icon: string;
+  config: typeof SIZE_CONFIGS[AvatarSize];
+  borderRadius: number;
+  imageStyle?: StyleProp<ImageStyle>;
+}
+
+const AvatarContent: React.FC<AvatarContentProps> = ({
+  hasImage,
+  hasName,
+  uri,
+  initials,
+  icon,
+  config,
+  borderRadius,
+  imageStyle,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (hasImage) {
+    return (
+      <Image
+        source={{ uri }}
+        style={[
+          styles.image,
+          {
+            width: config.size,
+            height: config.size,
+            borderRadius,
+          },
+          imageStyle,
+        ]}
+      />
+    );
+  }
+
+  if (hasName) {
+    return (
+      <AtomicText
+        type="bodyMedium"
+        style={[
+          styles.initials,
+          {
+            fontSize: config.fontSize,
+            color: tokens.colors.textInverse,
+          },
+        ]}
+      >
+        {initials}
+      </AtomicText>
+    );
+  }
+
+  return (
+    <AtomicIcon
+      name={icon}
+      customSize={config.iconSize}
+      customColor={tokens.colors.textInverse}
+    />
+  );
+};
+
 export const Avatar: React.FC<AvatarProps> = ({
   uri,
   name,
@@ -64,7 +109,6 @@ export const Avatar: React.FC<AvatarProps> = ({
   const tokens = useAppDesignTokens();
   const config = useMemo(() => SIZE_CONFIGS[size], [size]);
 
-  // Determine avatar type and content
   const hasImage = !!uri;
   const hasName = !!name;
   const initials = useMemo(
@@ -80,57 +124,11 @@ export const Avatar: React.FC<AvatarProps> = ({
     [shape, config.size]
   );
 
-  // Status indicator position
   const statusPosition = useMemo(() => ({
     bottom: 0,
     right: 0,
   }), []);
 
-  const renderContent = () => {
-    if (hasImage) {
-      return (
-        <Image
-          source={{ uri }}
-          style={[
-            styles.image,
-            {
-              width: config.size,
-              height: config.size,
-              borderRadius,
-            },
-            imageStyle,
-          ]}
-        />
-      );
-    }
-
-    if (hasName) {
-      return (
-        <AtomicText
-          type="bodyMedium"
-          style={[
-            styles.initials,
-            {
-              fontSize: config.fontSize,
-              color: tokens.colors.textInverse,
-            },
-          ]}
-        >
-          {initials}
-        </AtomicText>
-      );
-    }
-
-    // Fallback to icon
-    return (
-      <AtomicIcon
-        name={icon}
-        customSize={config.iconSize}
-        customColor={tokens.colors.textInverse}
-      />
-    );
-  };
-
   const AvatarWrapper = onPress ? TouchableOpacity : View;
 
   return (
@@ -151,9 +149,17 @@ export const Avatar: React.FC<AvatarProps> = ({
       accessibilityLabel={name || 'User avatar'}
       accessible={true}
     >
-      {renderContent()}
+      <AvatarContent
+        hasImage={hasImage}
+        hasName={hasName}
+        uri={uri}
+        initials={initials}
+        icon={icon}
+        config={config}
+        borderRadius={borderRadius}
+        imageStyle={imageStyle}
+      />
 
-      {/* Status Indicator */}
       {showStatus && (
         <View
           style={[
@@ -194,4 +200,3 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
 });
-

package/src/molecules/avatar/AvatarGroup.tsx

@@ -60,7 +60,7 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
     <View style={[styles.container, style]}>
       {visibleItems.map((item, index) => (
         <View
-          key={index}
+          key={item.uri || item.name || item.icon}
           style={[
             styles.avatarWrapper,
             index > 0 && { marginLeft: spacing },

package/src/molecules/calendar/presentation/components/CalendarDayCell.tsx

@@ -40,7 +40,6 @@ export const CalendarDayCell: React.FC<CalendarDayCellProps> = ({
 
   return (
     <TouchableOpacity
-      key={index}
       style={[
         calendarStyles.dayCell,
         {
@@ -75,9 +74,9 @@ export const CalendarDayCell: React.FC<CalendarDayCellProps> = ({
           <View style={[calendarStyles.eventDot, { backgroundColor: tokens.colors.success }]} />
         )}
 
-        {visibleEvents.map((event, eventIndex) => (
+        {visibleEvents.map((event) => (
           <View
-            key={eventIndex}
+            key={event.id}
             style={[
               calendarStyles.eventDot,
               {

package/src/molecules/calendar/presentation/components/CalendarWeekdayHeader.tsx

@@ -17,7 +17,7 @@ export const CalendarWeekdayHeader: React.FC<CalendarWeekdayHeaderProps> = ({
   return (
     <View style={calendarStyles.weekdayHeader}>
       {weekdayNames.map((day, index) => (
-        <View key={index} style={calendarStyles.weekdayCell}>
+        <View key={day} style={calendarStyles.weekdayCell}>
           <AtomicText type="bodySmall" color="secondary" style={calendarStyles.weekdayText}>
             {day}
           </AtomicText>

package/src/molecules/countdown/components/Countdown.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { useCountdown } from '../hooks/useCountdown';
@@ -7,6 +7,9 @@ import { TimeUnit } from './TimeUnit';
 import type { CountdownTarget, CountdownDisplayConfig } from '../types/CountdownTypes';
 import type { IconName } from '../../../atoms';
 
+const EMPTY_TARGETS: CountdownTarget[] = [];
+const DEFAULT_DISPLAY_CONFIG: CountdownDisplayConfig = {};
+
 export interface CountdownProps {
     target: CountdownTarget;
     alternateTargets?: CountdownTarget[];
@@ -19,8 +22,8 @@ export interface CountdownProps {
 
 export const Countdown: React.FC<CountdownProps> = ({
     target,
-    alternateTargets = [],
-    displayConfig = {},
+    alternateTargets = EMPTY_TARGETS,
+    displayConfig = DEFAULT_DISPLAY_CONFIG,
     interval = 1000,
     onExpire,
     onTargetChange,
@@ -49,17 +52,12 @@ export const Countdown: React.FC<CountdownProps> = ({
         onExpire,
     });
 
-    useEffect(() => {
-        if (currentTarget) {
-            updateTarget(currentTarget);
-        }
-    }, [currentTarget, updateTarget]);
-
     const handleToggle = () => {
         const nextIndex = (currentTargetIndex + 1) % allTargets.length;
         const nextTarget = allTargets[nextIndex];
         if (nextTarget) {
             setCurrentTargetIndex(nextIndex);
+            updateTarget(nextTarget);
             onTargetChange?.(nextTarget);
         }
     };
@@ -78,6 +76,7 @@ export const Countdown: React.FC<CountdownProps> = ({
 
     const timeUnits = useMemo(() => {
         interface CountdownUnit {
+            key: string;
             value: number;
             label: string;
         }
@@ -87,24 +86,28 @@ export const Countdown: React.FC<CountdownProps> = ({
 
         if (shouldShowDays) {
             units.push({
+                key: 'days',
                 value: timeRemaining.days,
                 label: labelFormatter('days', timeRemaining.days)
             });
         }
         if (showHours) {
             units.push({
+                key: 'hours',
                 value: timeRemaining.hours,
                 label: labelFormatter('hours', timeRemaining.hours)
             });
         }
         if (showMinutes) {
             units.push({
+                key: 'minutes',
                 value: timeRemaining.minutes,
                 label: labelFormatter('minutes', timeRemaining.minutes)
             });
         }
         if (showSeconds) {
             units.push({
+                key: 'seconds',
                 value: timeRemaining.seconds,
                 label: labelFormatter('seconds', timeRemaining.seconds)
             });
@@ -125,9 +128,9 @@ export const Countdown: React.FC<CountdownProps> = ({
             )}
 
             <View style={[styles.grid, { gap: tokens.spacing.sm }]}>
-                {timeUnits.map((unit, index) => (
+                {timeUnits.map((unit) => (
                     <TimeUnit
-                        key={index}
+                        key={unit.key}
                         value={unit.value}
                         label={unit.label}
                         size={size}

package/src/molecules/info-grid/InfoGrid.tsx

@@ -84,8 +84,8 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
       )}
 
       <View style={styles.grid}>
-        {items.map((item, index) => (
-          <View key={index} style={[styles.item, itemStyle]}>
+        {items.map((item) => (
+          <View key={item.text} style={[styles.item, itemStyle]}>
             {item.icon && (
               <View style={styles.iconContainer}>
                 <AtomicIcon name={item.icon} size="xs" color="primary" />

package/src/onboarding/presentation/components/BackgroundImageCollage.tsx

@@ -76,9 +76,9 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
 
   return (
     <View style={[StyleSheet.absoluteFill, { opacity }]} pointerEvents="none">
-      {imageLayouts.map((item, index) => (
+      {imageLayouts.map((item) => (
         <Image
-          key={index}
+          key={String(item.source)}
           source={item.source}
           style={item.style}
           contentFit="cover"

package/src/onboarding/presentation/components/OnboardingBackground.tsx

@@ -10,6 +10,64 @@ import { BackgroundVideo } from "./BackgroundVideo";
 import { BackgroundImageCollage } from "./BackgroundImageCollage";
 import { AtomicImage } from "../../../atoms/image/AtomicImage";
 
+interface BackgroundContentProps {
+  slide: OnboardingSlide;
+  useCustomBackground: boolean;
+  overlayOpacity: number;
+}
+
+const BackgroundContent: React.FC<BackgroundContentProps> = ({
+  slide,
+  useCustomBackground,
+  overlayOpacity,
+}) => {
+  if (slide.backgroundVideo) {
+    return (
+      <BackgroundVideo
+        source={slide.backgroundVideo}
+        overlayOpacity={overlayOpacity}
+      />
+    );
+  }
+
+  if (slide.backgroundImages && slide.backgroundImages.length > 0) {
+    return (
+      <BackgroundImageCollage
+        images={slide.backgroundImages}
+        layout={slide.backgroundImagesLayout || "grid"}
+        columns={slide.backgroundImagesColumns}
+        gap={slide.backgroundImagesGap}
+        borderRadius={slide.backgroundImagesBorderRadius}
+      />
+    );
+  }
+
+  if (slide.backgroundImage) {
+    return (
+      <AtomicImage
+        source={slide.backgroundImage}
+        style={StyleSheet.absoluteFill}
+        contentFit="cover"
+        cachePolicy="memory-disk"
+        priority="high"
+      />
+    );
+  }
+
+  if (useCustomBackground && slide.backgroundColor) {
+    return (
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          { backgroundColor: slide.backgroundColor }
+        ]}
+      />
+    );
+  }
+
+  return null;
+};
+
 interface OnboardingBackgroundProps {
   currentSlide: OnboardingSlide | undefined;
   useCustomBackground: boolean;
@@ -25,57 +83,13 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
 }) => {
   if (!currentSlide) return null;
 
-  const renderContent = () => {
-    if (currentSlide.backgroundVideo) {
-      return (
-        <BackgroundVideo
-          source={currentSlide.backgroundVideo}
-          overlayOpacity={overlayOpacity}
-        />
-      );
-    }
-
-    if (currentSlide.backgroundImages && currentSlide.backgroundImages.length > 0) {
-      return (
-        <BackgroundImageCollage
-          images={currentSlide.backgroundImages}
-          layout={currentSlide.backgroundImagesLayout || "grid"}
-          columns={currentSlide.backgroundImagesColumns}
-          gap={currentSlide.backgroundImagesGap}
-          borderRadius={currentSlide.backgroundImagesBorderRadius}
-        />
-      );
-    }
-
-    if (currentSlide.backgroundImage) {
-      return (
-        <AtomicImage
-          source={currentSlide.backgroundImage}
-          style={StyleSheet.absoluteFill}
-          contentFit="cover"
-          cachePolicy="memory-disk"
-          priority="high"
-        />
-      );
-    }
-
-    if (useCustomBackground && currentSlide.backgroundColor) {
-      return (
-        <View
-          style={[
-            StyleSheet.absoluteFill,
-            { backgroundColor: currentSlide.backgroundColor }
-          ]}
-        />
-      );
-    }
-
-    return null;
-  };
-
   return (
     <View style={StyleSheet.absoluteFill} pointerEvents="none">
-      {renderContent()}
+      <BackgroundContent
+        slide={currentSlide}
+        useCustomBackground={useCustomBackground}
+        overlayOpacity={overlayOpacity}
+      />
       <View
         style={[
           StyleSheet.absoluteFill,

package/src/onboarding/presentation/components/OnboardingSlide.tsx

@@ -64,9 +64,9 @@ export const OnboardingSlide = ({
 
       {slide.features && slide.features.length > 0 && (
         <View style={styles.features}>
-          {slide.features.map((feature, index) => (
+          {slide.features.map((feature) => (
             <View
-              key={index}
+              key={feature}
               style={[
                 styles.featureItem,
                 { backgroundColor: colors.featureItemBg },

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -14,6 +14,8 @@ import type { IconRenderer, IconNames } from '../../../atoms/icon/iconStore';
 const SplashScreen = lazy(() => import('../../../molecules/splash').then(m => ({ default: m.SplashScreen })));
 
 
+const EMPTY_FONTS: Record<string, any> = {};
+
 interface DesignSystemProviderProps {
   children: ReactNode;
   customColors?: CustomThemeColors;
@@ -44,7 +46,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   iconNames,
 }) => {
   const [isInitialized, setIsInitialized] = useState(false);
-  const [fontsLoaded, fontError] = fonts ? useFonts(fonts) : [true, null];
+  const [fontsLoaded, fontError] = useFonts(fonts ?? EMPTY_FONTS);
 
   const initialize = useTheme((state) => state.initialize);
   const setCustomColors = useTheme((state) => state.setCustomColors);

package/src/gallery/gallery-download.service.ts

@@ -1,69 +0,0 @@
-/**
- * Gallery Download Service
- * Single Responsibility: Download remote media to local storage
- */
-
-import { FileSystemService } from "../filesystem";
-import { validateImageUri, getFileExtension } from "../image";
-import { timezoneService } from "../timezone";
-import type { DownloadMediaResult } from "./types";
-
-const generateFilename = (uri: string, prefix: string): string => {
-  const extension = getFileExtension(uri) || "jpg";
-  const timestamp = timezoneService.formatDateToString(new Date());
-  const randomId = Math.random().toString(36).substring(2, 10);
-  return `${prefix}_${timestamp}_${randomId}.${extension}`;
-};
-
-class GalleryDownloadService {
-  async downloadMedia(
-    mediaUri: string,
-    prefix: string = "media",
-  ): Promise<DownloadMediaResult> {
-    try {
-      const validationResult = validateImageUri(mediaUri, "Media");
-      if (!validationResult.isValid) {
-        return {
-          success: false,
-          error: validationResult.error || "Invalid media file",
-        };
-      }
-
-      const filename = generateFilename(mediaUri, prefix);
-      const documentDir = FileSystemService.getDocumentDirectory();
-      const fileUri = `${documentDir}${filename}`;
-
-      const downloadResult = await FileSystemService.downloadFile(
-        mediaUri,
-        fileUri,
-      );
-
-      if (!downloadResult.success || !downloadResult.uri) {
-        return {
-          success: false,
-          error: downloadResult.error || "Download failed",
-        };
-      }
-
-      return {
-        success: true,
-        localUri: downloadResult.uri,
-      };
-    } catch (error) {
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : "Download failed",
-      };
-    }
-  }
-
-  isRemoteUrl(uri: string): boolean {
-    return uri.startsWith("http://") || uri.startsWith("https://");
-  }
-
-  async cleanupFile(fileUri: string): Promise<void> {
-    await FileSystemService.deleteFile(fileUri);
-  }
-}
-
-export const galleryDownloadService = new GalleryDownloadService();

package/src/gallery/gallery-save.service.ts

@@ -1,80 +0,0 @@
-/**
- * Gallery Save Service
- * Single Responsibility: Save media to device gallery
- */
-
-import * as MediaLibrary from "expo-media-library";
-import { validateImageUri } from "../image";
-import { galleryDownloadService } from "./gallery-download.service";
-import type { SaveMediaResult } from "./types";
-
-const requestMediaPermissions = async (): Promise<boolean> => {
-  try {
-    const { status } = await MediaLibrary.requestPermissionsAsync();
-    return status === "granted";
-  } catch {
-    return false;
-  }
-};
-
-class GallerySaveService {
-  async saveToGallery(
-    mediaUri: string,
-    prefix?: string,
-  ): Promise<SaveMediaResult> {
-    try {
-      const validationResult = validateImageUri(mediaUri, "Media");
-      if (!validationResult.isValid) {
-        return {
-          success: false,
-          error: validationResult.error || "Invalid media file",
-        };
-      }
-
-      const hasPermission = await requestMediaPermissions();
-      if (!hasPermission) {
-        return {
-          success: false,
-          error: "Media library permission denied",
-        };
-      }
-
-      let localUri = mediaUri;
-      const isRemote = galleryDownloadService.isRemoteUrl(mediaUri);
-
-      if (isRemote) {
-        const downloadResult = await galleryDownloadService.downloadMedia(
-          mediaUri,
-          prefix,
-        );
-
-        if (!downloadResult.success || !downloadResult.localUri) {
-          return {
-            success: false,
-            error: downloadResult.error || "Download failed",
-          };
-        }
-
-        localUri = downloadResult.localUri;
-      }
-
-      const asset = await MediaLibrary.createAssetAsync(localUri);
-
-      if (isRemote && localUri) {
-        await galleryDownloadService.cleanupFile(localUri);
-      }
-
-      return {
-        success: true,
-        fileUri: asset.uri,
-      };
-    } catch (error) {
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : "Save failed",
-      };
-    }
-  }
-}
-
-export const gallerySaveService = new GallerySaveService();

package/src/gallery/index.ts

@@ -1,3 +0,0 @@
-export { gallerySaveService } from "./gallery-save.service";
-export { galleryDownloadService } from "./gallery-download.service";
-export type { SaveMediaResult, DownloadMediaResult } from "./types";

package/src/gallery/types.ts

@@ -1,11 +0,0 @@
-export interface SaveMediaResult {
-  success: boolean;
-  fileUri?: string;
-  error?: string;
-}
-
-export interface DownloadMediaResult {
-  success: boolean;
-  localUri?: string;
-  error?: string;
-}