@umituz/react-native-design-system 4.28.5 → 4.28.7

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -1,8 +1,10 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View, StyleSheet, ScrollView, Modal, Pressable, GestureResponderEvent } from "react-native";
 import { useSafeAreaInsets } from "../../../../safe-area";
 import { AtomicButton } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme';
+import { calculateResponsiveSize } from '../../../../utils/responsiveUtils';
+import { BOTTOM_SHEET_HANDLE } from '../../../../constants';
 import type { FilterOption } from "../../types/Filter";
 import { FilterUtils } from "../../types/Filter";
 import { FilterSheetHeader } from "./FilterSheetComponents/FilterSheetHeader";
@@ -33,6 +35,37 @@ export const FilterSheet: React.FC<FilterSheetProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
+  const spacingMultiplier = tokens.spacingMultiplier;
+
+  const styles = useMemo(() => StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      justifyContent: "flex-end",
+    },
+    sheet: {
+      borderTopLeftRadius: tokens.borders.radius.xl,
+      borderTopRightRadius: tokens.borders.radius.xl,
+      maxHeight: "80%",
+    },
+    handle: {
+      width: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.width, spacingMultiplier),
+      height: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.height, spacingMultiplier),
+      borderRadius: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.borderRadius, spacingMultiplier),
+      alignSelf: "center",
+      marginTop: tokens.spacing.sm,
+      marginBottom: tokens.spacing.sm,
+    },
+    optionsList: {
+      maxHeight: 400,
+      paddingVertical: tokens.spacing.sm,
+    },
+    footer: {
+      paddingHorizontal: tokens.spacing.xl,
+      paddingTop: tokens.spacing.lg,
+      paddingBottom: tokens.spacing.sm,
+    },
+  }), [tokens, spacingMultiplier]);
 
   const safeSelectedIds = selectedIds ?? [];
   const hasActiveFilter = FilterUtils.hasActiveFilter(safeSelectedIds, defaultFilterId);
@@ -84,34 +117,4 @@ export const FilterSheet: React.FC<FilterSheetProps> = ({
 
 FilterSheet.displayName = "FilterSheet";
 
-const styles = StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end",
-  },
-  sheet: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    maxHeight: "80%",
-  },
-  handle: {
-    width: 40,
-    height: 4,
-    borderRadius: 2,
-    alignSelf: "center",
-    marginTop: 8,
-    marginBottom: 8,
-  },
-  optionsList: {
-    maxHeight: 400,
-    paddingVertical: 8,
-  },
-  footer: {
-    paddingHorizontal: 20,
-    paddingTop: 16,
-    paddingBottom: 8,
-  },
-});
-
 

package/src/molecules/circular-menu/CircularMenuItem.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { AtomicIcon } from "../../atoms";
 import { AtomicText } from "../../atoms";
 import { useAppDesignTokens } from "../../theme";
 import { LAYOUT } from "./constants";
+import { calculateResponsiveSize } from "../../utils/responsiveUtils";
 
 export interface CircularMenuItemProps {
   icon: string;
@@ -17,6 +18,24 @@ export const CircularMenuItem: React.FC<CircularMenuItemProps> = React.memo(({
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
+  const spacingMultiplier = tokens.spacingMultiplier;
+
+  const styles = useMemo(() => StyleSheet.create({
+    container: {
+      alignItems: "center",
+      gap: 6,
+      width: LAYOUT.ITEM_SIZE,
+    },
+    iconContainer: {
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    label: {
+      fontSize: calculateResponsiveSize(11, spacingMultiplier),
+      fontWeight: "500",
+      textAlign: "center",
+    },
+  }), [spacingMultiplier]);
 
   return (
     <TouchableOpacity
@@ -50,20 +69,3 @@ export const CircularMenuItem: React.FC<CircularMenuItemProps> = React.memo(({
     </TouchableOpacity>
   );
 });
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    gap: 6,
-    width: LAYOUT.ITEM_SIZE,
-  },
-  iconContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  label: {
-    fontSize: 11,
-    fontWeight: "500",
-    textAlign: "center",
-  },
-});

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

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText, AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import type { IconName } from '../../../atoms';
+import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { COUNTDOWN_TOGGLE } from '../../../constants';
 
 export interface CountdownHeaderProps {
     title: string;
@@ -21,6 +23,12 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
 }) => {
     const tokens = useAppDesignTokens();
     const swapIcon = useIconName('swap');
+    const spacingMultiplier = tokens.spacingMultiplier;
+
+    const toggleButtonSize = useMemo(
+        () => calculateResponsiveSize(COUNTDOWN_TOGGLE.size, spacingMultiplier),
+        [spacingMultiplier]
+    );
 
     return (
         <View style={[styles.container, { marginBottom: tokens.spacing.md }]}>
@@ -47,9 +55,9 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
                         styles.toggleButton,
                         {
                             backgroundColor: tokens.colors.surfaceSecondary,
-                            width: 36,
-                            height: 36,
-                            borderRadius: 18,
+                            width: toggleButtonSize,
+                            height: toggleButtonSize,
+                            borderRadius: toggleButtonSize / 2,
                         },
                     ]}
                     onPress={onToggle}

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

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { AtomicText } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
+import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { COUNTDOWN_SIZES } from '../../../constants';
 
 export interface TimeUnitProps {
     value: number;
@@ -15,11 +17,42 @@ export const TimeUnit: React.FC<TimeUnitProps> = ({
     size = 'medium',
 }) => {
     const tokens = useAppDesignTokens();
+    const spacingMultiplier = tokens.spacingMultiplier;
+
+    const styles = useMemo(() => StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        value: {
+            fontWeight: '700',
+            lineHeight: calculateResponsiveSize(38, spacingMultiplier),
+        },
+        label: {
+            fontWeight: '600',
+            marginTop: calculateResponsiveSize(2, spacingMultiplier),
+            letterSpacing: 1,
+            textTransform: 'uppercase',
+        },
+    }), [spacingMultiplier]);
 
     const sizeConfig = {
-        small: { fontSize: 24, padding: tokens.spacing.sm, minHeight: 70 },
-        medium: { fontSize: 32, padding: tokens.spacing.md, minHeight: 90 },
-        large: { fontSize: 40, padding: tokens.spacing.lg, minHeight: 110 },
+        small: {
+            fontSize: calculateResponsiveSize(COUNTDOWN_SIZES.small.fontSize, spacingMultiplier),
+            padding: tokens.spacing.sm,
+            minHeight: calculateResponsiveSize(COUNTDOWN_SIZES.small.minHeight, spacingMultiplier),
+        },
+        medium: {
+            fontSize: calculateResponsiveSize(COUNTDOWN_SIZES.medium.fontSize, spacingMultiplier),
+            padding: tokens.spacing.md,
+            minHeight: calculateResponsiveSize(COUNTDOWN_SIZES.medium.minHeight, spacingMultiplier),
+        },
+        large: {
+            fontSize: calculateResponsiveSize(COUNTDOWN_SIZES.large.fontSize, spacingMultiplier),
+            padding: tokens.spacing.lg,
+            minHeight: calculateResponsiveSize(COUNTDOWN_SIZES.large.minHeight, spacingMultiplier),
+        },
     };
 
     const config = sizeConfig[size];
@@ -68,21 +101,3 @@ export const TimeUnit: React.FC<TimeUnitProps> = ({
         </View>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    value: {
-        fontWeight: '700',
-        lineHeight: 38,
-    },
-    label: {
-        fontWeight: '600',
-        marginTop: 2,
-        letterSpacing: 1,
-        textTransform: 'uppercase',
-    },
-});

package/src/molecules/hero-section/HeroSection.tsx

@@ -3,6 +3,8 @@ import React, { useMemo } from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { HeroSectionProps } from './types';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { HERO_ICON } from '../../constants';
 
 export const HeroSection: React.FC<HeroSectionProps> = ({
   icon,
@@ -12,6 +14,7 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
   style,
 }) => {
   const tokens = useAppDesignTokens();
+  const spacingMultiplier = tokens.spacingMultiplier;
 
   const themedStyles = useMemo(
     () => ({
@@ -29,9 +32,9 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
         backgroundColor: tokens.colors.surfaceVariant,
       },
       iconWrapper: {
-        width: 120,
-        height: 120,
-        borderRadius: 60,
+        width: calculateResponsiveSize(HERO_ICON.width, spacingMultiplier),
+        height: calculateResponsiveSize(HERO_ICON.height, spacingMultiplier),
+        borderRadius: calculateResponsiveSize(HERO_ICON.borderRadius, spacingMultiplier),
         backgroundColor: tokens.colors.surfaceVariant,
         justifyContent: 'flex-start' as const,
         alignItems: 'flex-start' as const,
@@ -40,9 +43,30 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
         zIndex: 10,
       },
     }),
-    [tokens, height],
+    [tokens, height, spacingMultiplier],
   );
 
+  const styles = useMemo(() => StyleSheet.create({
+    image: {
+      ...StyleSheet.absoluteFillObject,
+      width: '100%',
+      height: '100%',
+    },
+    emoji: {
+      fontSize: calculateResponsiveSize(64, spacingMultiplier),
+      textAlign: 'left',
+      includeFontPadding: false,
+    },
+    fadeOverlay: {
+      position: 'absolute',
+      bottom: -1,
+      left: 0,
+      right: 0,
+      height: calculateResponsiveSize(120, spacingMultiplier),
+      backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+  }), [spacingMultiplier]);
+
   const source = imageUrl ? { uri: imageUrl } : imageSource;
 
   return (
@@ -68,24 +92,3 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  image: {
-    ...StyleSheet.absoluteFillObject,
-    width: '100%',
-    height: '100%',
-  },
-  emoji: {
-    fontSize: 64,
-    textAlign: 'left',
-    includeFontPadding: false,
-  },
-  fadeOverlay: {
-    position: 'absolute',
-    bottom: -1,
-    left: 0,
-    right: 0,
-    height: 100,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-  },
-});

package/src/molecules/icon-grid/IconGrid.tsx

@@ -21,6 +21,8 @@ import { AtomicIcon } from '../../atoms';
 import { AtomicText } from '../../atoms';
 import type { IconName } from '../../atoms';
 import { calculateGridItemWidth } from '../../utils/math';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { ICON_GRID } from '../../constants';
 
 export interface IconGridItem {
   /** Unique identifier */
@@ -53,25 +55,26 @@ const GridItem = React.memo<{
   cardBackground: string;
   borderLight: string;
   textPrimary: string;
-}>(({ item, itemWidth, cardBackground, borderLight, textPrimary }) => {
+  iconGridStyles: ReturnType<typeof createStyles>;
+}>(({ item, itemWidth, cardBackground, borderLight, textPrimary, iconGridStyles }) => {
   const { onPress: handlePress } = item;
 
   const cardStyle = useMemo(
-    () => [styles.card, { width: itemWidth }],
-    [itemWidth]
+    () => [iconGridStyles.card, { width: itemWidth }],
+    [itemWidth, iconGridStyles]
   );
 
   const iconBoxStyle = useMemo(
     () => [
-      styles.iconBox,
+      iconGridStyles.iconBox,
       { width: itemWidth, backgroundColor: cardBackground, borderColor: borderLight },
     ],
-    [itemWidth, cardBackground, borderLight]
+    [itemWidth, cardBackground, borderLight, iconGridStyles]
   );
 
   const labelStyle = useMemo(
-    () => [styles.label, { color: textPrimary }],
-    [textPrimary]
+    () => [iconGridStyles.label, { color: textPrimary }],
+    [textPrimary, iconGridStyles]
   );
 
   return (
@@ -112,8 +115,11 @@ export const IconGrid = React.memo<IconGridProps>(({
   style,
 }) => {
   const tokens = useAppDesignTokens();
+  const spacingMultiplier = tokens.spacingMultiplier;
   const [containerWidth, setContainerWidth] = useState(0);
 
+  const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
+
   const handleLayout = useCallback(
     (e: LayoutChangeEvent) => {
       const { width } = e.nativeEvent.layout;
@@ -133,7 +139,7 @@ export const IconGrid = React.memo<IconGridProps>(({
 
   const gridStyle = useMemo(
     () => [styles.grid, { columnGap: gap, rowGap: rowGap ?? gap }, style],
-    [gap, rowGap, style]
+    [gap, rowGap, style, styles]
   );
 
   // Memoize color props to prevent unnecessary GridItem re-renders
@@ -153,10 +159,11 @@ export const IconGrid = React.memo<IconGridProps>(({
       <GridItem
         item={item}
         itemWidth={itemWidth}
+        iconGridStyles={styles}
         {...colorProps}
       />
     );
-  }, [itemWidth, colorProps]);
+  }, [itemWidth, colorProps, styles]);
 
   const keyExtractor = useCallback((item: IconGridItem) => item.id, []);
 
@@ -191,7 +198,7 @@ export const IconGrid = React.memo<IconGridProps>(({
   );
 });
 
-const styles = StyleSheet.create({
+const createStyles = (spacingMultiplier: number) => StyleSheet.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -202,13 +209,13 @@ const styles = StyleSheet.create({
   },
   iconBox: {
     aspectRatio: 1,
-    borderRadius: 24,
+    borderRadius: calculateResponsiveSize(ICON_GRID.borderRadius, spacingMultiplier),
     alignItems: 'center',
     justifyContent: 'center',
     borderWidth: 1,
   },
   label: {
-    fontSize: 11,
+    fontSize: calculateResponsiveSize(ICON_GRID.fontSize, spacingMultiplier),
     fontWeight: '700',
     textAlign: 'center',
   },

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

@@ -5,6 +5,8 @@ import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { InfoGridProps } from './types';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { INFO_GRID_ICONS } from '../../constants';
 
 export const InfoGrid: React.FC<InfoGridProps> = ({
   title,
@@ -15,6 +17,7 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
   itemStyle,
 }) => {
   const tokens = useAppDesignTokens();
+  const spacingMultiplier = tokens.spacingMultiplier;
 
   const styles = useMemo(() => StyleSheet.create({
     container: {
@@ -26,8 +29,8 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
       gap: tokens.spacing.xs,
     },
     headerIcon: {
-      width: 28,
-      height: 28,
+      width: calculateResponsiveSize(INFO_GRID_ICONS.small, spacingMultiplier),
+      height: calculateResponsiveSize(INFO_GRID_ICONS.small, spacingMultiplier),
       borderRadius: tokens.borders.radius.sm,
       backgroundColor: `${tokens.colors.primary}20`,
       justifyContent: 'center',
@@ -55,8 +58,8 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
       borderColor: tokens.colors.outlineVariant,
     },
     iconContainer: {
-      width: 32,
-      height: 32,
+      width: calculateResponsiveSize(INFO_GRID_ICONS.large, spacingMultiplier),
+      height: calculateResponsiveSize(INFO_GRID_ICONS.large, spacingMultiplier),
       borderRadius: tokens.borders.radius.sm,
       backgroundColor: `${tokens.colors.primary}20`,
       justifyContent: 'center',
@@ -68,7 +71,7 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
       color: tokens.colors.textPrimary,
       fontWeight: '500',
     },
-  }), [tokens, columns]);
+  }), [tokens, columns, spacingMultiplier]);
 
   return (
     <View style={[styles.container, style]}>

package/src/molecules/listitem/styles/listItemStyles.ts

@@ -3,7 +3,6 @@
  */
 import type { ViewStyle, TextStyle } from 'react-native';
 import type { DesignTokens } from '../../../theme';
-import { isTablet } from '../../../device/detection';
 
 export interface ListItemStyles {
     container: ViewStyle;
@@ -14,8 +13,8 @@ export interface ListItemStyles {
 }
 
 export const getListItemStyles = (tokens: DesignTokens): ListItemStyles => {
-    // Responsive minHeight: 56px on phone, 64px on tablet for better ergonomics
-    const minHeight = isTablet() ? 64 : 56;
+    // Responsive minHeight: uses base height (56) multiplied by spacingMultiplier
+    const minHeight = Math.floor(56 * tokens.spacingMultiplier);
 
     return {
         container: {

package/src/molecules/navigation/TabsNavigator.tsx

@@ -6,6 +6,8 @@ import type { TabNavigatorConfig, TabScreen } from "./types";
 import { NavigationValidator } from "./utils/NavigationValidator";
 import { createTabScreen } from "./utils/ScreenFactory";
 import { useAppDesignTokens } from "../../theme";
+import { calculateResponsiveSize } from "../../utils/responsiveUtils";
+import { NAVIGATION } from "../../constants";
 
 // Create the navigator instance ONCE outside the component
 const Tab = createBottomTabNavigator();
@@ -52,7 +54,7 @@ export function TabsNavigator<T extends ParamListBase>({
             tabBarStyle: {
                 backgroundColor: tokens.colors.surface,
                 borderTopColor: tokens.colors.surfaceVariant,
-                height: 60,
+                height: calculateResponsiveSize(NAVIGATION.tabBar.height, tokens.spacingMultiplier),
                 paddingBottom: 8,
                 paddingTop: 8,
             },

package/src/molecules/navigation/components/NavigationHeader.tsx

@@ -4,6 +4,8 @@ import { AtomicText } from '../../../atoms';
 import { AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
+import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { NAVIGATION } from '../../../constants';
 
 export interface NavigationHeaderProps {
   title: string;
@@ -21,6 +23,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const arrowLeftIcon = useIconName('arrowLeft');
+  const spacingMultiplier = tokens.spacingMultiplier;
 
   const styles = useMemo(() => StyleSheet.create({
     container: {
@@ -36,8 +39,8 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
     },
     backButton: {
       marginRight: tokens.spacing.md,
-      width: 40,
-      height: 40,
+      width: calculateResponsiveSize(NAVIGATION.backButton.width, spacingMultiplier),
+      height: calculateResponsiveSize(NAVIGATION.backButton.height, spacingMultiplier),
       borderRadius: tokens.borders.radius.full,
       alignItems: 'center',
       justifyContent: 'center',
@@ -48,9 +51,9 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
       textAlign: centerTitle ? 'center' : 'left',
     },
     sideElement: {
-      width: centerTitle ? 40 : 'auto',
+      width: centerTitle ? calculateResponsiveSize(40, spacingMultiplier) : 'auto',
     }
-  }), [tokens, insets, centerTitle]);
+  }), [tokens, insets, centerTitle, spacingMultiplier]);
 
   return (
     <View style={styles.container}>

package/src/molecules/navigation/hooks/useAppFocusEffect.ts

@@ -22,21 +22,24 @@ import { useEffect } from "react";
  * ```
  */
 export function useAppFocusEffect(effect: () => void | (() => void)): void {
+  // Always run the effect - if navigation is ready, useFocusEffect will handle it
+  // Otherwise, useEffect will run it once
+  useEffect(() => {
+    const cleanup = effect();
+    return () => {
+      if (typeof cleanup === 'function') {
+        cleanup();
+      }
+    };
+  }, [effect]);
+
+  // Try to use React Navigation's useFocusEffect if available
   try {
-    // Try to use React Navigation's useFocusEffect
     useRNFocusEffect(effect);
-  } catch (error) {
-    // Navigation not ready - run effect once and cleanup
+  } catch (_error) {
+    // Navigation not ready - useEffect above handles it
     if (__DEV__) {
       console.warn('[useAppFocusEffect] Navigation not ready. Running effect once instead.');
     }
-    useEffect(() => {
-      const cleanup = effect();
-      return () => {
-        if (typeof cleanup === 'function') {
-          cleanup();
-        }
-      };
-    }, [effect]);
   }
 }

package/src/molecules/navigation/hooks/useAppIsFocused.ts

@@ -1,5 +1,4 @@
 import { useIsFocused as useRNIsFocused } from "@react-navigation/native";
-import { useMemo } from "react";
 
 /**
  * useAppIsFocused Hook
@@ -18,7 +17,7 @@ import { useMemo } from "react";
 export function useAppIsFocused(): boolean {
   try {
     return useRNIsFocused();
-  } catch (error) {
+  } catch (_error) {
     // Navigation not ready - return false
     if (__DEV__) {
       console.warn('[useAppIsFocused] Navigation not ready. Returning false.');