@umituz/react-native-design-system 2.5.6 → 2.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.6",
+  "version": "2.5.8",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicIcon.tsx

@@ -110,9 +110,10 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
 
   // Calculate size
   const baseSize = customSize ?? size;
-  const sizeInPixels = typeof baseSize === 'number'
+  const iconSizesMap = tokens.iconSizes as Record<string, number>;
+  const sizeInPixels: number = typeof baseSize === 'number'
     ? baseSize * tokens.spacingMultiplier
-    : (tokens.iconSizes as Record<string, number>)[baseSize] || (tokens.iconSizes as Record<string, number>).md;
+    : iconSizesMap[baseSize] ?? iconSizesMap['md'] ?? 24;
 
   // Calculate color
   const iconColor = customColor

package/src/molecules/alerts/AlertBanner.tsx

@@ -18,7 +18,7 @@ interface AlertBannerProps {
 }
 
 export function AlertBanner({ alert }: AlertBannerProps) {
-    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
 

package/src/molecules/alerts/AlertContainer.tsx

@@ -10,22 +10,22 @@ import { useAlertStore } from './AlertStore';
 import { AlertToast } from './AlertToast';
 import { AlertBanner } from './AlertBanner';
 import { AlertModal } from './AlertModal';
-import { AlertMode } from './AlertTypes';
+import { Alert, AlertMode } from './AlertTypes';
 
 export const AlertContainer: React.FC = () => {
-    const alerts = useAlertStore((state) => state.alerts);
+    const alerts = useAlertStore((state: { alerts: Alert[] }) => state.alerts);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
 
-    const toasts = alerts.filter((a) => a.mode === AlertMode.TOAST);
-    const banners = alerts.filter((a) => a.mode === AlertMode.BANNER);
-    const modals = alerts.filter((a) => a.mode === AlertMode.MODAL);
+    const toasts = alerts.filter((a: Alert) => a.mode === AlertMode.TOAST);
+    const banners = alerts.filter((a: Alert) => a.mode === AlertMode.BANNER);
+    const modals = alerts.filter((a: Alert) => a.mode === AlertMode.MODAL);
 
     return (
         <View style={styles.container} pointerEvents="box-none">
             {/* Banners at top */}
             <View style={[styles.bannerContainer, { paddingTop: insets.top }]}>
-                {banners.map((alert) => (
+                {banners.map((alert: Alert) => (
                     <AlertBanner key={alert.id} alert={alert} />
                 ))}
             </View>
@@ -38,7 +38,7 @@ export const AlertContainer: React.FC = () => {
                     paddingHorizontal: tokens.spacing.md,
                 }
             ]}>
-                {toasts.map((alert) => (
+                {toasts.map((alert: Alert) => (
                     <View key={alert.id} style={{ marginBottom: tokens.spacing.sm, width: '100%' }}>
                         <AlertToast alert={alert} />
                     </View>
@@ -46,7 +46,7 @@ export const AlertContainer: React.FC = () => {
             </View>
 
             {/* Modals on top of everything */}
-            {modals.map((alert) => (
+            {modals.map((alert: Alert) => (
                 <AlertModal key={alert.id} alert={alert} />
             ))}
         </View>

package/src/molecules/alerts/AlertModal.tsx

@@ -14,7 +14,7 @@ interface AlertModalProps {
 }
 
 export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
-    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const tokens = useAppDesignTokens();
 
     const handleClose = () => {

package/src/molecules/alerts/AlertStore.ts

@@ -2,21 +2,27 @@
  * Alert Store
  */
 
-import { create } from 'zustand';
+import { create, type StoreApi } from 'zustand';
 import { Alert } from './AlertTypes';
 
 interface AlertState {
     alerts: Alert[];
+}
+
+interface AlertActions {
     addAlert: (alert: Alert) => void;
     dismissAlert: (id: string) => void;
     clearAlerts: () => void;
 }
 
-export const useAlertStore = create<AlertState>((set) => ({
+type AlertStore = AlertState & AlertActions;
+type SetState = StoreApi<AlertStore>['setState'];
+
+export const useAlertStore = create<AlertStore>((set: SetState) => ({
     alerts: [],
-    addAlert: (alert) => set((state) => ({ alerts: [...state.alerts, alert] })),
-    dismissAlert: (id) => set((state) => ({
-        alerts: state.alerts.filter((a) => a.id !== id)
+    addAlert: (alert: Alert) => set((state: AlertStore) => ({ alerts: [...state.alerts, alert] })),
+    dismissAlert: (id: string) => set((state: AlertStore) => ({
+        alerts: state.alerts.filter((a: Alert) => a.id !== id)
     })),
     clearAlerts: () => set({ alerts: [] }),
 }));

package/src/molecules/alerts/AlertToast.tsx

@@ -17,7 +17,7 @@ interface AlertToastProps {
 }
 
 export function AlertToast({ alert }: AlertToastProps) {
-    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const tokens = useAppDesignTokens();
 
     const handleDismiss = () => {

package/src/molecules/animation/presentation/hooks/useFireworks.ts

@@ -104,7 +104,8 @@ export const useFireworks = (config: FireworksConfig) => {
 
     const newParticles: ParticleConfig[] = [];
     for (let i = 0; i < particleCount; i++) {
-      const color = colors[Math.floor(Math.random() * colors.length)];
+      const colorIndex = Math.floor(Math.random() * colors.length);
+      const color = colors[colorIndex] ?? colors[0] ?? '#FFFFFF';
       newParticles.push(createParticle(centerX, centerY, color));
     }
 

package/src/molecules/avatar/Avatar.utils.ts

@@ -165,9 +165,11 @@ export class AvatarUtils {
 
     if (words.length >= 2) {
       // Full name: First letter of first + first letter of last
-      const first = words[0][0];
-      const last = words[words.length - 1][0];
-      return (first + last).toLocaleUpperCase('tr-TR');
+      const firstWord = words[0] ?? '';
+      const lastWord = words[words.length - 1] ?? '';
+      const first = firstWord[0] ?? '';
+      const last = lastWord[0] ?? '';
+      return (first + last).toLocaleUpperCase('tr-TR') || '?';
     } else {
       // Single word: First 2 letters
       return trimmed.slice(0, 2).toLocaleUpperCase('tr-TR');

package/src/molecules/calendar/infrastructure/storage/CalendarStore.ts

@@ -11,8 +11,8 @@
  * - Timezone-aware via CalendarService
  */
 
-import { create } from 'zustand';
-import { persist, createJSONStorage } from 'zustand/middleware';
+import { create, type StateCreator } from 'zustand';
+import { persist, createJSONStorage, type PersistOptions } from 'zustand/middleware';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import type { CalendarEvent, CreateCalendarEventRequest, UpdateCalendarEventRequest } from '../../domain/entities/CalendarEvent.entity';
 import { CalendarService } from '../services/CalendarService';

package/src/molecules/calendar/infrastructure/utils/DateUtilities.ts

@@ -14,7 +14,8 @@ export class DateUtilities {
    * Format date to string (YYYY-MM-DD)
    */
   static formatDateToString(date: Date): string {
-    return date.toISOString().split('T')[0];
+    const parts = date.toISOString().split('T');
+    return parts[0] ?? '';
   }
 
   /**
@@ -91,7 +92,10 @@ export class DateUtilities {
    * Parse date from string (YYYY-MM-DD)
    */
   static parseDate(dateString: string): Date {
-    const [year, month, day] = dateString.split('-').map(Number);
+    const parts = dateString.split('-').map(Number);
+    const year = parts[0] ?? 0;
+    const month = parts[1] ?? 1;
+    const day = parts[2] ?? 1;
     return new Date(year, month - 1, day);
   }
 

package/src/molecules/calendar/presentation/hooks/useCalendar.ts

@@ -84,7 +84,7 @@ export const useCalendar = (): UseCalendarReturn => {
     isLoading,
     error,
     actions,
-  } = useCalendarStore((state) => state);
+  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
 
   // Load events on mount
   useEffect(() => {
@@ -133,7 +133,7 @@ export const useCalendarNavigation = () => {
     selectedDate,
     currentMonth,
     actions: { setSelectedDate, navigateMonth, goToToday, setCurrentMonth },
-  } = useCalendarStore((state) => state);
+  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
 
   return {
     selectedDate,
@@ -163,7 +163,7 @@ export const useCalendarEvents = () => {
       uncompleteEvent,
       clearError,
     },
-  } = useCalendarStore((state) => state);
+  } = useCalendarStore((state: ReturnType<typeof useCalendarStore.getState>) => state);
 
   return {
     events,