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

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/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/onboarding/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -4,12 +4,13 @@
  */
 
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { View } from "react-native";
 import { AtomicText } from "../../../../atoms/AtomicText";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import { ensureArray } from "../../../infrastructure/utils/arrayUtils";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 import { QuestionOptionItem } from "./QuestionOptionItem";
+import { questionStyles } from "./questionStyles";
 
 export interface MultipleChoiceQuestionProps {
   question: OnboardingQuestion;
@@ -40,7 +41,7 @@ export const MultipleChoiceQuestion = ({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[questionStyles.container, { gap: 12 }]}>
       {question.options?.map((option) => (
         <QuestionOptionItem
           key={option.id}
@@ -53,7 +54,7 @@ export const MultipleChoiceQuestion = ({
       {question.validation?.maxSelections && (
         <AtomicText
           type="labelSmall"
-          style={[styles.hint, { color: colors.subTextColor }]}
+          style={[questionStyles.hint, { color: colors.subTextColor }]}
         >
           Select up to {question.validation.maxSelections} options
         </AtomicText>
@@ -61,14 +62,3 @@ export const MultipleChoiceQuestion = ({
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    gap: 12,
-  },
-  hint: {
-    textAlign: "center",
-    marginTop: 8,
-  },
-});

package/src/onboarding/presentation/components/questions/QuestionOptionItem.tsx

@@ -4,10 +4,11 @@
  */
 
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import type { QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 import type { OnboardingColors } from "../../types/OnboardingTheme";
+import { questionStyles, OPTION_ICON_SIZE, OPTION_EMOJI_SIZE } from "./questionStyles";
 
 export interface QuestionOptionItemProps {
   option: QuestionOption;
@@ -27,7 +28,7 @@ export const QuestionOptionItem = React.memo(({
   return (
     <TouchableOpacity
       style={[
-        styles.option,
+        questionStyles.option,
         {
           backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
           borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
@@ -42,15 +43,15 @@ export const QuestionOptionItem = React.memo(({
     >
       {option.icon && (
         <View style={[
-          styles.optionIcon,
+          questionStyles.optionIcon,
           { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
         ]}>
           {isEmoji ? (
-            <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+            <AtomicText style={{ fontSize: OPTION_EMOJI_SIZE }}>{option.icon}</AtomicText>
           ) : (
             <AtomicIcon
               name={option.icon}
-              customSize={20}
+              customSize={OPTION_ICON_SIZE}
               customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
             />
           )}
@@ -59,7 +60,7 @@ export const QuestionOptionItem = React.memo(({
       <AtomicText
         type="bodyLarge"
         style={[
-          styles.optionLabel,
+          questionStyles.optionLabel,
           {
             color: isSelected ? colors.textColor : colors.subTextColor,
             fontWeight: isSelected ? '700' : '500'
@@ -69,7 +70,7 @@ export const QuestionOptionItem = React.memo(({
         {option.label}
       </AtomicText>
       <View style={[
-        styles.checkbox,
+        questionStyles.checkbox,
         {
           borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
           backgroundColor: isSelected ? colors.iconColor : 'transparent',
@@ -87,32 +88,3 @@ export const QuestionOptionItem = React.memo(({
     </TouchableOpacity>
   );
 });
-
-const styles = StyleSheet.create({
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: 16,
-    marginBottom: 8,
-  },
-  optionIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  optionLabel: {
-    flex: 1,
-    fontSize: 16,
-  },
-  checkbox: {
-    width: 24,
-    height: 24,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/onboarding/presentation/components/questions/RatingQuestion.tsx

@@ -3,6 +3,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+import { createMappedArray } from "../../../../utils/arrayUtils";
 
 export interface RatingQuestionProps {
   question: OnboardingQuestion;
@@ -23,7 +24,7 @@ export const RatingQuestion = ({
   return (
     <View style={styles.container}>
       <View style={styles.stars}>
-        {Array.from({ length: max }).map((_, i) => {
+        {createMappedArray(max, (i) => {
           const isFilled = i < value;
           return (
             <TouchableOpacity

package/src/onboarding/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+import { questionStyles, OPTION_ICON_SIZE, OPTION_EMOJI_SIZE } from "./questionStyles";
 
 export interface SingleChoiceQuestionProps {
   question: OnboardingQuestion;
@@ -27,7 +28,7 @@ export const SingleChoiceQuestion = ({
       <TouchableOpacity
         key={option.id}
         style={[
-          styles.option,
+          questionStyles.option,
           {
             backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
             borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
@@ -39,29 +40,29 @@ export const SingleChoiceQuestion = ({
       >
         {option.icon && (
           <View style={[
-            styles.optionIcon,
+            questionStyles.optionIcon,
             { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
           ]}>
             {isEmoji ? (
-              <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+              <AtomicText style={{ fontSize: OPTION_EMOJI_SIZE }}>{option.icon}</AtomicText>
             ) : (
               <AtomicIcon
                 name={option.icon}
-                customSize={20}
+                customSize={OPTION_ICON_SIZE}
                 customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
               />
             )}
           </View>
         )}
-        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
+        <AtomicText type="bodyLarge" style={[questionStyles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
           {option.label}
         </AtomicText>
         <View style={[
-          styles.radioOuter,
+          questionStyles.radioOuter,
           { borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder }
         ]}>
           {isSelected && (
-            <View style={[styles.radioInner, { backgroundColor: colors.iconColor }]} />
+            <View style={[questionStyles.radioInner, { backgroundColor: colors.iconColor }]} />
           )}
         </View>
       </TouchableOpacity>
@@ -69,49 +70,8 @@ export const SingleChoiceQuestion = ({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[questionStyles.container, { gap: 12 }]}>
       {question.options?.map(renderOption)}
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    gap: 12,
-  },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: 16,
-    marginBottom: 8,
-  },
-  optionIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  optionLabel: {
-    flex: 1,
-    fontSize: 16,
-  },
-  radioOuter: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  radioInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-});
-
-