@umituz/react-native-settings 4.19.6 → 4.20.1

package/src/domains/legal/presentation/screens/LegalScreen.tsx

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { ScreenLayout } from "@umituz/react-native-design-system";
 import { LegalItem } from "../components/LegalItem";
@@ -93,7 +93,7 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo(({
   eulaUrl,
   testID = "legal-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Memoize styles to prevent recreation on every render
   const styles = React.useMemo(() => {
@@ -220,18 +220,18 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo(({
 const createLegalScreenStyles = (tokens: DesignTokens) => {
   return StyleSheet.create({
     header: {
-      paddingBottom: tokens.spacing.lg,
-      paddingTop: tokens.spacing.md,
+      paddingBottom: tokens.spacing.lg * tokens.spacingMultiplier,
+      paddingTop: tokens.spacing.md * tokens.spacingMultiplier,
     },
     headerSubtitle: {
-      marginTop: tokens.spacing.xs,
+      marginTop: tokens.spacing.xs * tokens.spacingMultiplier,
     },
     section: {
-      marginTop: tokens.spacing.md,
+      marginTop: tokens.spacing.md * tokens.spacingMultiplier,
     },
     sectionHeader: {
-      marginBottom: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
+      marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
+      paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
     },
   });
 };

package/src/domains/legal/presentation/screens/PrivacyPolicyScreen.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
@@ -54,7 +54,7 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   onUrlPress,
   testID = "privacy-policy-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   
   // Validate required props
@@ -71,12 +71,13 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   
   // Use cached styles
   const styles = React.useMemo(() => {
+    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
     return StyleCacheService.getCachedStyles(
       'PrivacyPolicyScreen',
-      'privacy-policy-styles',
-      createPrivacyPolicyStyles
+      cacheKey,
+      () => createPrivacyPolicyStyles(tokens)
     );
-  }, []);
+  }, [tokens]);
 
   // Memoize URL press handler to prevent child re-renders
   const handleUrlPress = React.useCallback(async () => {
@@ -170,34 +171,36 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   );
 });
 
-const createPrivacyPolicyStyles = () => {
+const createPrivacyPolicyStyles = (tokens: any) => {
   return StyleSheet.create({
     container: {
       flex: 1,
     },
     scrollContent: {
       flexGrow: 1,
-      padding: 20,
+      padding: 20 * tokens.spacingMultiplier,
     },
     content: {
       flex: 1,
     },
     title: {
-      marginBottom: 24,
+      marginBottom: 24 * tokens.spacingMultiplier,
     },
     text: {
-      lineHeight: 24,
+      lineHeight: 24 * tokens.spacingMultiplier,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlContainer: {
-      marginTop: 32,
+      marginTop: 32 * tokens.spacingMultiplier,
       alignItems: "center",
     },
     urlText: {
-      marginBottom: 16,
+      marginBottom: 16 * tokens.spacingMultiplier,
       textAlign: "center",
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlButton: {
-      marginTop: 8,
+      marginTop: 8 * tokens.spacingMultiplier,
     },
   });
 };

package/src/domains/legal/presentation/screens/TermsOfServiceScreen.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
@@ -54,7 +54,7 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   onUrlPress,
   testID = "terms-of-service-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   
   // Validate required props
@@ -71,12 +71,13 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   
   // Use cached styles
   const styles = React.useMemo(() => {
+    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
     return StyleCacheService.getCachedStyles(
       'TermsOfServiceScreen',
-      'terms-of-service-styles',
-      createTermsOfServiceStyles
+      cacheKey,
+      () => createTermsOfServiceStyles(tokens)
     );
-  }, []);
+  }, [tokens]);
 
   // Memoize URL press handler to prevent child re-renders
   const handleUrlPress = React.useCallback(async () => {
@@ -170,34 +171,36 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   );
 });
 
-const createTermsOfServiceStyles = () => {
+const createTermsOfServiceStyles = (tokens: any) => {
   return StyleSheet.create({
     container: {
       flex: 1,
     },
     scrollContent: {
       flexGrow: 1,
-      padding: 20,
+      padding: 20 * tokens.spacingMultiplier,
     },
     content: {
       flex: 1,
     },
     title: {
-      marginBottom: 24,
+      marginBottom: 24 * tokens.spacingMultiplier,
     },
     text: {
-      lineHeight: 24,
+      lineHeight: 24 * tokens.spacingMultiplier,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlContainer: {
-      marginTop: 32,
+      marginTop: 32 * tokens.spacingMultiplier,
       alignItems: "center",
     },
     urlText: {
-      marginBottom: 16,
+      marginBottom: 16 * tokens.spacingMultiplier,
       textAlign: "center",
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlButton: {
-      marginTop: 8,
+      marginTop: 8 * tokens.spacingMultiplier,
     },
   });
 };

package/src/domains/rating/presentation/components/StarRating.tsx

@@ -24,10 +24,14 @@ export const StarRating: React.FC<StarRatingProps> = ({
     style,
 }) => {
     const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
     const [internalRating, setInternalRating] = useState(rating);
 
     const filledColor = activeColor || tokens.colors.warning || "#FFD700";
     const emptyColor = inactiveColor || tokens.colors.border || "#E0E0E0";
+    
+    // Scale the size
+    const responsiveSize = size * tokens.spacingMultiplier;
 
     const handlePress = (index: number) => {
         if (disabled) return;
@@ -48,7 +52,7 @@ export const StarRating: React.FC<StarRatingProps> = ({
                 >
                     <AtomicIcon
                         name={index < (onRatingChange ? internalRating : rating) ? "star" : "star-outline"}
-                        customSize={size}
+                        customSize={responsiveSize}
                         customColor={index < (onRatingChange ? internalRating : rating) ? filledColor : emptyColor}
                     />
                 </TouchableOpacity>
@@ -57,13 +61,14 @@ export const StarRating: React.FC<StarRatingProps> = ({
     );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
     container: {
         flexDirection: "row",
         alignItems: "center",
-        gap: 4,
+        gap: 4 * tokens.spacingMultiplier,
     },
     starContainer: {
-        padding: 4,
+        padding: 4 * tokens.spacingMultiplier,
     },
 });

package/src/domains/video-tutorials/index.ts

@@ -4,5 +4,6 @@
 
 export * from "./types";
 export * from "./presentation/screens/VideoTutorialsScreen";
+export * from "./presentation/components/VideoTutorialCard";
 export * from "./presentation/hooks";
 export * from "./infrastructure/services/video-tutorial.service";

package/src/domains/video-tutorials/infrastructure/services/video-tutorial.service.ts

@@ -11,7 +11,7 @@ import {
   where,
   limit,
 } from "firebase/firestore";
-import type { Firestore } from "firebase/firestore";
+import type { Firestore, QueryConstraint } from "firebase/firestore";
 import type {
   VideoTutorial,
   VideoTutorialCategory,
@@ -46,7 +46,7 @@ class VideoTutorialService {
   async getAllTutorials(
     filters?: VideoTutorialFilters,
   ): Promise<VideoTutorial[]> {
-    const constraints = [];
+    const constraints: QueryConstraint[] = [];
 
     if (filters?.category) {
       constraints.push(where("category", "==", filters.category));

package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx

@@ -20,6 +20,7 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
   horizontal = false,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
 
   const formatDuration = (seconds: number): string => {
     const minutes = Math.floor(seconds / 60);
@@ -107,16 +108,17 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
   container: {
-    borderRadius: 12,
+    borderRadius: 12 * tokens.spacingMultiplier,
     borderWidth: 1,
-    marginBottom: 12,
+    marginBottom: 12 * tokens.spacingMultiplier,
     overflow: "hidden",
   },
   horizontalContainer: {
-    width: 280,
-    marginRight: 12,
+    width: 280 * tokens.spacingMultiplier,
+    marginRight: 12 * tokens.spacingMultiplier,
     marginBottom: 0,
   },
   imageContainer: {
@@ -124,56 +126,56 @@ const styles = StyleSheet.create({
   },
   thumbnail: {
     width: "100%",
-    height: 180,
+    height: 180 * tokens.spacingMultiplier,
   },
   horizontalThumbnail: {
-    height: 140,
+    height: 140 * tokens.spacingMultiplier,
   },
   durationBadge: {
     position: "absolute",
-    bottom: 8,
-    right: 8,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4,
+    bottom: 8 * tokens.spacingMultiplier,
+    right: 8 * tokens.spacingMultiplier,
+    paddingHorizontal: 6 * tokens.spacingMultiplier,
+    paddingVertical: 2 * tokens.spacingMultiplier,
+    borderRadius: 4 * tokens.spacingMultiplier,
   },
   durationText: {
     color: "white",
-    fontSize: 12,
+    fontSize: 12 * tokens.spacingMultiplier,
     fontWeight: "500",
   },
   featuredBadge: {
     position: "absolute",
-    top: 8,
-    left: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
+    top: 8 * tokens.spacingMultiplier,
+    left: 8 * tokens.spacingMultiplier,
+    paddingHorizontal: 8 * tokens.spacingMultiplier,
+    paddingVertical: 4 * tokens.spacingMultiplier,
+    borderRadius: 4 * tokens.spacingMultiplier,
   },
   featuredText: {
-    fontSize: 11,
+    fontSize: 11 * tokens.spacingMultiplier,
     fontWeight: "600",
   },
   content: {
-    padding: 12,
+    padding: 12 * tokens.spacingMultiplier,
   },
   title: {
-    fontSize: 16,
+    fontSize: tokens.typography.titleMedium.responsiveFontSize,
     fontWeight: "600",
-    marginBottom: 6,
+    marginBottom: 6 * tokens.spacingMultiplier,
   },
   horizontalTitle: {
-    fontSize: 14,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20,
-    marginBottom: 8,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+    lineHeight: 20 * tokens.spacingMultiplier,
+    marginBottom: 8 * tokens.spacingMultiplier,
   },
   horizontalDescription: {
-    fontSize: 12,
-    lineHeight: 16,
-    marginBottom: 6,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
+    lineHeight: 16 * tokens.spacingMultiplier,
+    marginBottom: 6 * tokens.spacingMultiplier,
   },
   metadata: {
     flexDirection: "row",
@@ -181,11 +183,13 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   category: {
-    fontSize: 12,
+    fontSize: 12 * tokens.spacingMultiplier,
     textTransform: "capitalize",
+    fontWeight: "500",
   },
   difficulty: {
-    fontSize: 12,
+    fontSize: 12 * tokens.spacingMultiplier,
     textTransform: "capitalize",
+    fontWeight: "500",
   },
 });

package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx

@@ -68,6 +68,7 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
       customFeaturedTutorials,
     }) => {
       const tokens = useAppDesignTokens();
+      const styles = getStyles(tokens);
 
       const featuredQuery = useFeaturedTutorials(maxFeaturedCount);
       const allQuery = useVideoTutorials();
@@ -169,30 +170,31 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
     },
   );
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
   title: {
-    fontSize: 24,
+    fontSize: tokens.typography.headlineLarge.responsiveFontSize,
     fontWeight: "600",
-    marginBottom: 24,
+    marginBottom: 24 * tokens.spacingMultiplier,
   },
   section: {
-    marginBottom: 24,
+    marginBottom: 24 * tokens.spacingMultiplier,
   },
   sectionTitle: {
-    fontSize: 18,
+    fontSize: tokens.typography.titleLarge.responsiveFontSize,
     fontWeight: "500",
-    marginBottom: 12,
+    marginBottom: 12 * tokens.spacingMultiplier,
   },
   horizontalList: {
-    paddingRight: 16,
+    paddingRight: 16 * tokens.spacingMultiplier,
   },
   verticalList: {
-    paddingBottom: 16,
+    paddingBottom: 16 * tokens.spacingMultiplier,
   },
   errorContainer: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    padding: 20,
+    padding: 20 * tokens.spacingMultiplier,
   },
 });

package/src/presentation/components/DevSettingsSection.tsx

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { Alert } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { storageRepository } from "@umituz/react-native-storage";
 import { SettingsSection } from "./SettingsSection";
 import { SettingItem } from "./SettingItem";
@@ -46,7 +46,7 @@ export const DevSettingsSection: React.FC<DevSettingsProps> = ({
   texts = {},
   customDevComponents = [],
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Merge custom texts with defaults
   const t = { ...DEFAULT_TEXTS, ...texts };

package/src/presentation/components/SettingItem.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, Switch } from "react-native";
 import {
   AtomicIcon,
   AtomicText,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "./SettingsItemCard";
 
@@ -40,7 +40,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
   testID,
   disabled = false,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // For switch items, we need custom rendering
   if (showSwitch) {

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -5,7 +5,7 @@
 
 import React, { Component, ReactNode } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useLocalization } from '@umituz/react-native-localization';
 
@@ -67,7 +67,7 @@ const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({
   fallbackTitle,
   fallbackMessage
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { t } = useLocalization();
 
   const title = __DEV__ && error?.message

package/src/presentation/components/SettingsFooter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsFooterProps {
   versionText?: string;
@@ -13,7 +13,7 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   appVersion,
   versionLabel,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   const displayText = versionText || (appVersion && versionLabel

package/src/presentation/components/SettingsItemCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Pressable, StyleSheet, ViewStyle } from "react-native";
 import {
-    useResponsiveDesignTokens,
+    useAppDesignTokens,
     AtomicIcon,
     AtomicText,
     type IconName,
@@ -45,7 +45,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     iconBgColor,
     iconColor,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
     const colors = tokens.colors;
 
     const defaultIconBg = iconBgColor || `${colors.primary}15`;

package/src/presentation/components/SettingsSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsSectionProps {
   title: string;
@@ -11,7 +11,7 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
   title,
   children,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   return (

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { SettingsScreen } from "../screens/SettingsScreen";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
@@ -83,7 +83,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     devSettings,
     customSections = [],
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const screenOptions = {
         headerStyle: {

package/src/presentation/screens/SettingsScreen.tsx

@@ -8,7 +8,7 @@ import { View, StatusBar, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {
   useDesignSystemTheme,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
@@ -68,7 +68,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 }) => {
   const navigation = useNavigation();
   const { themeMode } = useDesignSystemTheme();
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   const isDark = themeMode === "dark";
   const colors = tokens.colors;

package/src/presentation/screens/components/SettingsContent.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { SettingsSection } from "../../components/SettingsSection";
@@ -53,7 +53,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   showCloseButton = false,
   devSettings,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
 

package/src/presentation/screens/components/SettingsHeader.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNavigation } from "@react-navigation/native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicIcon } from "@umituz/react-native-design-system";
 
 interface SettingsHeaderProps {
@@ -20,7 +20,7 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
   onClose,
 }) => {
   const navigation = useNavigation();
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
   const handleClose = () => {