npm - @umituz/react-native-settings - Versions diffs - 4.23.128 → 4.23.130 - Mend

@umituz/react-native-settings 4.23.128 → 4.23.130

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.128",
+  "version": "4.23.130",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/gamification/components/AchievementCard.tsx CHANGED Viewed

@@ -5,7 +5,7 @@
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 export interface AchievementCardProps {
   title: string;
@@ -41,24 +41,44 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
+  const { getFontSize, getIconSize } = useResponsive();
   const finalUnlockedColor = unlockedColor || tokens.colors.success;
   const finalLockedColor = lockedColor || tokens.colors.textDisabled;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
   const accentColor = isUnlocked ? finalUnlockedColor : finalLockedColor;
+  const titleFontSize = getFontSize(16);
+  const descriptionFontSize = getFontSize(13);
+  const checkmarkFontSize = getFontSize(14);
+  const iconSize = getIconSize(48);
+  const checkmarkSize = getIconSize(24);
   return (
     <View
       style={[
         styles.container,
-        { backgroundColor: finalBackgroundColor, borderColor: withAlpha(accentColor, 0.4) },
+        {
+          backgroundColor: finalBackgroundColor,
+          borderColor: withAlpha(accentColor, 0.4),
+          padding: tokens.spacing.md,
+          borderRadius: tokens.borders.radius.md,
+          gap: tokens.spacing.md,
+        },
         containerStyle,
       ]}
     >
-      <View style={[styles.iconContainer, { backgroundColor: withAlpha(accentColor, 0.2) }]}>
+      <View style={[
+        styles.iconContainer,
+        {
+          backgroundColor: withAlpha(accentColor, 0.2),
+          width: iconSize,
+          height: iconSize,
+          borderRadius: iconSize / 2,
+        }
+      ]}>
         {icon}
       </View>
@@ -66,22 +86,45 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
         <AtomicText
           style={[
             styles.title,
-            { color: isUnlocked ? finalTextColor : finalSubtextColor },
+            {
+              color: isUnlocked ? finalTextColor : finalSubtextColor,
+              fontSize: titleFontSize,
+            },
             titleStyle,
           ]}
         >
           {title}
         </AtomicText>
-        <AtomicText style={[styles.description, { color: finalSubtextColor }, descriptionStyle]}>
+        <AtomicText style={[
+          styles.description,
+          {
+            color: finalSubtextColor,
+            fontSize: descriptionFontSize,
+            marginTop: tokens.spacing.xs,
+          },
+          descriptionStyle
+        ]}>
           {description}
         </AtomicText>
         {!isUnlocked && (
-          <View style={[styles.progressBar, { backgroundColor: withAlpha(finalLockedColor, 0.4) }, progressBarStyle]}>
+          <View style={[
+            styles.progressBar,
+            {
+              backgroundColor: withAlpha(finalLockedColor, 0.4),
+              marginTop: tokens.spacing.sm,
+              borderRadius: tokens.borders.radius.xs,
+            },
+            progressBarStyle
+          ]}>
             <View
               style={[
                 styles.progressFill,
-                { width: `${progress}%`, backgroundColor: accentColor },
+                {
+                  width: `${progress}%`,
+                  backgroundColor: accentColor,
+                  borderRadius: tokens.borders.radius.xs,
+                },
               ]}
             />
           </View>
@@ -89,8 +132,24 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
       </View>
       {isUnlocked && (
-        <View style={[styles.checkmark, { backgroundColor: finalUnlockedColor }]}>
-          <AtomicText style={[styles.checkmarkText, { color: tokens.colors.onPrimary }]}>✓</AtomicText>
+        <View style={[
+          styles.checkmark,
+          {
+            backgroundColor: finalUnlockedColor,
+            width: checkmarkSize,
+            height: checkmarkSize,
+            borderRadius: checkmarkSize / 2,
+          }
+        ]}>
+          <AtomicText style={[
+            styles.checkmarkText,
+            {
+              color: tokens.colors.onPrimary,
+              fontSize: checkmarkFontSize,
+            }
+          ]}>
+            ✓
+          </AtomicText>
         </View>
       )}
     </View>
@@ -101,15 +160,9 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
-    padding: 12,
-    borderRadius: 12,
     borderWidth: 1,
-    gap: 12,
   },
   iconContainer: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -117,32 +170,21 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   title: {
-    fontSize: 16,
     fontWeight: "600",
   },
-  description: {
-    fontSize: 13,
-    marginTop: 2,
-  },
+  description: {},
   progressBar: {
     height: 4,
-    borderRadius: 2,
-    marginTop: 8,
     overflow: "hidden",
   },
   progressFill: {
     height: "100%",
-    borderRadius: 2,
   },
   checkmark: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
     justifyContent: "center",
     alignItems: "center",
   },
   checkmarkText: {
-    fontSize: 14,
     fontWeight: "bold",
   },
 });

package/src/domains/gamification/components/LevelProgress.tsx CHANGED Viewed

@@ -5,7 +5,7 @@
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 export interface LevelProgressProps {
   level: number;
@@ -49,39 +49,99 @@ export const LevelProgress: React.FC<LevelProgressProps> = ({
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
+  const { getFontSize, getIconSize } = useResponsive();
   const finalPrimaryColor = primaryColor || tokens.colors.primary;
   const finalSecondaryColor = secondaryColor || tokens.colors.surfaceSecondary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
+  const titleFontSize = getFontSize(18);
+  const subtitleFontSize = getFontSize(14);
+  const badgeSize = getIconSize(52);
+  const badgeFontSize = getFontSize(20);
+  const progressBarHeight = getFontSize(10);
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
-      <View style={styles.header}>
+    <View style={[
+      styles.container,
+      {
+        backgroundColor: finalBackgroundColor,
+        borderRadius: tokens.borders.radius.lg,
+        padding: tokens.spacing.lg,
+      },
+      containerStyle
+    ]}>
+      <View style={[styles.header, { marginBottom: tokens.spacing.md }]}>
         <View style={styles.titleSection}>
-          <AtomicText style={[styles.levelTitle, { color: finalTextColor }, titleStyle]}>
+          <AtomicText style={[
+            styles.levelTitle,
+            {
+              color: finalTextColor,
+              fontSize: titleFontSize,
+            },
+            titleStyle
+          ]}>
             {levelTitle}
           </AtomicText>
           {showPoints && (
-            <AtomicText style={[styles.subtitle, { color: finalSubtextColor }, subtitleStyle]}>
+            <AtomicText style={[
+              styles.subtitle,
+              {
+                color: finalSubtextColor,
+                fontSize: subtitleFontSize,
+                marginTop: tokens.spacing.xs,
+              },
+              subtitleStyle
+            ]}>
               {points} / {points + pointsToNext}
             </AtomicText>
           )}
         </View>
-        <View style={[styles.badge, { backgroundColor: withAlpha(finalPrimaryColor, 0.2), borderColor: withAlpha(finalPrimaryColor, 0.4) }, badgeStyle]}>
-          <AtomicText style={[styles.badgeText, { color: finalPrimaryColor }, badgeTextStyle]}>
+        <View style={[
+          styles.badge,
+          {
+            backgroundColor: withAlpha(finalPrimaryColor, 0.2),
+            borderColor: withAlpha(finalPrimaryColor, 0.4),
+            width: badgeSize,
+            height: badgeSize,
+            borderRadius: badgeSize / 2,
+            borderWidth: 2,
+          },
+          badgeStyle
+        ]}>
+          <AtomicText style={[
+            styles.badgeText,
+            {
+              color: finalPrimaryColor,
+              fontSize: badgeFontSize,
+            },
+            badgeTextStyle
+          ]}>
             {level}
           </AtomicText>
         </View>
       </View>
-      <View style={[styles.progressBar, { backgroundColor: finalSecondaryColor }, progressBarStyle]}>
+      <View style={[
+        styles.progressBar,
+        {
+          backgroundColor: finalSecondaryColor,
+          height: progressBarHeight,
+          borderRadius: tokens.borders.radius.sm,
+        },
+        progressBarStyle
+      ]}>
         <View
           style={[
             styles.progressFill,
-            { width: `${Math.min(100, progress)}%`, backgroundColor: finalPrimaryColor },
+            {
+              width: `${Math.min(100, progress)}%`,
+              backgroundColor: finalPrimaryColor,
+              borderRadius: tokens.borders.radius.sm,
+            },
             progressFillStyle,
           ]}
         />
@@ -91,46 +151,30 @@ export const LevelProgress: React.FC<LevelProgressProps> = ({
 };
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 16,
-    padding: 16,
-  },
+  container: {},
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 12,
   },
   titleSection: {
     flex: 1,
   },
   levelTitle: {
-    fontSize: 18,
     fontWeight: "700",
   },
-  subtitle: {
-    fontSize: 14,
-    marginTop: 2,
-  },
+  subtitle: {},
   badge: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
     justifyContent: "center",
     alignItems: "center",
-    borderWidth: 2,
   },
   badgeText: {
-    fontSize: 18,
     fontWeight: "bold",
   },
   progressBar: {
-    height: 8,
-    borderRadius: 4,
     overflow: "hidden",
   },
   progressFill: {
     height: "100%",
-    borderRadius: 4,
   },
 });

package/src/domains/gamification/components/PointsBadge.tsx CHANGED Viewed

@@ -5,7 +5,7 @@
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 export interface PointsBadgeProps {
   points: number;
@@ -27,20 +27,28 @@ export const PointsBadge: React.FC<PointsBadgeProps> = ({
   borderColor,
 }) => {
   const tokens = useAppDesignTokens();
+  const { getFontSize } = useResponsive();
   const finalTextColor = textColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || withAlpha(finalTextColor, 0.1);
   const finalBorderColor = borderColor || withAlpha(finalTextColor, 0.2);
+  const fontSize = getFontSize(16);
   return (
     <View
       style={[
         styles.container,
-        { backgroundColor: finalBackgroundColor, borderColor: finalBorderColor },
+        {
+          backgroundColor: finalBackgroundColor,
+          borderColor: finalBorderColor,
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.xs,
+          borderRadius: tokens.borders.radius.full,
+        },
         containerStyle,
       ]}
     >
       {icon}
-      <AtomicText style={[styles.text, { color: finalTextColor }, textStyle]}>
+      <AtomicText style={[styles.text, { color: finalTextColor, fontSize }, textStyle]}>
         {points}
       </AtomicText>
     </View>
@@ -52,13 +60,9 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 20,
     borderWidth: 1,
   },
   text: {
-    fontSize: 16,
     fontWeight: "bold",
   },
 });

package/src/domains/gamification/components/StatsCard.tsx CHANGED Viewed

@@ -5,7 +5,7 @@
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 export interface StatsCardProps {
   value: number;
@@ -35,30 +35,77 @@ export const StatsCard: React.FC<StatsCardProps> = ({
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
+  const { getFontSize, getIconSize } = useResponsive();
   const finalAccentColor = accentColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
   const renderedIcon = typeof icon === 'string' ? (
-    <AtomicIcon name={icon} size="sm" customColor={finalAccentColor} />
+    <AtomicIcon name={icon} size="md" customColor={finalAccentColor} />
   ) : icon;
+  const valueFontSize = getFontSize(32);
+  const suffixFontSize = getFontSize(14);
+  const labelFontSize = getFontSize(13);
+  const iconSize = getIconSize(44);
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
-      <View style={[styles.iconContainer, { backgroundColor: withAlpha(finalAccentColor, 0.15) }]}>
+    <View style={[
+      styles.container,
+      {
+        backgroundColor: finalBackgroundColor,
+        borderRadius: tokens.borders.radius.lg,
+        padding: tokens.spacing.lg,
+      },
+      containerStyle
+    ]}>
+      <View style={[
+        styles.iconContainer,
+        {
+          backgroundColor: withAlpha(finalAccentColor, 0.15),
+          width: iconSize,
+          height: iconSize,
+          borderRadius: iconSize / 2,
+          marginBottom: tokens.spacing.md,
+        }
+      ]}>
         {renderedIcon}
       </View>
-      <View style={styles.valueRow}>
-        <AtomicText style={[styles.value, { color: finalTextColor }, valueStyle]}>
+      <View style={[styles.valueRow, { minHeight: valueFontSize + 4 }]}>
+        <AtomicText style={[
+          styles.value,
+          {
+            color: finalTextColor,
+            fontSize: valueFontSize,
+            lineHeight: valueFontSize + 4,
+          },
+          valueStyle
+        ]}>
           {value}
         </AtomicText>
         {suffix && (
-          <AtomicText style={[styles.suffix, { color: finalSubtextColor }]}>{suffix}</AtomicText>
+          <AtomicText style={[
+            styles.suffix,
+            {
+              color: finalSubtextColor,
+              fontSize: suffixFontSize,
+            }
+          ]}>
+            {suffix}
+          </AtomicText>
         )}
       </View>
-      <AtomicText style={[styles.label, { color: finalSubtextColor }, labelStyle]}>
+      <AtomicText style={[
+        styles.label,
+        {
+          color: finalSubtextColor,
+          fontSize: labelFontSize,
+          marginTop: tokens.spacing.xs,
+        },
+        labelStyle
+      ]}>
         {label}
       </AtomicText>
     </View>
@@ -69,16 +116,10 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     minWidth: "45%",
-    borderRadius: 12,
-    padding: 12,
   },
   iconContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
     alignItems: "center",
     justifyContent: "center",
-    marginBottom: 8,
   },
   valueRow: {
     flexDirection: "row",
@@ -86,14 +127,12 @@ const styles = StyleSheet.create({
     gap: 4,
   },
   value: {
-    fontSize: 24,
     fontWeight: "bold",
   },
   suffix: {
-    fontSize: 12,
+    fontWeight: "500",
   },
   label: {
-    fontSize: 12,
-    marginTop: 2,
+    fontWeight: "500",
   },
 });

package/src/domains/gamification/components/StreakDisplay.tsx CHANGED Viewed

@@ -5,7 +5,7 @@
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 export interface StreakDisplayProps {
   current: number;
@@ -39,38 +39,102 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
+  const { getFontSize, iconContainerSize } = useResponsive();
   const finalPrimaryColor = primaryColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
   const renderedIcon = typeof icon === 'string' ? (
-    <AtomicIcon name={icon} size="md" customColor={finalPrimaryColor} />
-  ) : icon || <AtomicIcon name="flame" size="md" customColor={finalPrimaryColor} />;
+    <AtomicIcon name={icon} size="lg" customColor={finalPrimaryColor} />
+  ) : icon || <AtomicIcon name="trending-up" size="lg" customColor={finalPrimaryColor} />;
+  const numberFontSize = getFontSize(36);
+  const labelFontSize = getFontSize(11);
+  const currentLabelFontSize = getFontSize(15);
+  const bestNumberFontSize = getFontSize(24);
+  const bestLabelFontSize = getFontSize(10);
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
+    <View style={[
+      styles.container,
+      {
+        backgroundColor: finalBackgroundColor,
+        borderRadius: tokens.borders.radius.lg,
+        padding: tokens.spacing.lg,
+      },
+      containerStyle
+    ]}>
       <View style={styles.mainStreak}>
-        <View style={styles.iconContainer}>{renderedIcon}</View>
-        <View style={styles.streakInfo}>
-          <AtomicText style={[styles.number, { color: finalPrimaryColor }, numberStyle]}>
+        <View style={[styles.iconContainer, { width: iconContainerSize, height: iconContainerSize }]}>
+          {renderedIcon}
+        </View>
+        <View style={[styles.streakInfo, { minWidth: iconContainerSize + 12 }]}>
+          <AtomicText style={[
+            styles.number,
+            {
+              color: finalPrimaryColor,
+              fontSize: numberFontSize,
+              lineHeight: numberFontSize + 4,
+              minHeight: numberFontSize + 4,
+            },
+            numberStyle
+          ]}>
             {current}
           </AtomicText>
-          <AtomicText style={[styles.label, { color: finalSubtextColor }, labelStyle]}>
+          <AtomicText style={[
+            styles.label,
+            {
+              color: finalSubtextColor,
+              fontSize: labelFontSize,
+              marginTop: tokens.spacing.xs,
+            },
+            labelStyle
+          ]}>
             {daysLabel}
           </AtomicText>
         </View>
-        <AtomicText style={[styles.currentLabel, { color: finalTextColor }]}>
+        <AtomicText style={[
+          styles.currentLabel,
+          {
+            color: finalTextColor,
+            fontSize: currentLabelFontSize,
+          }
+        ]}>
           {currentLabel}
         </AtomicText>
       </View>
-      <View style={[styles.bestStreak, { backgroundColor: withAlpha(finalPrimaryColor, 0.2) }]}>
-        <AtomicText style={[styles.bestLabel, { color: finalSubtextColor }]}>
+      <View style={[
+        styles.bestStreak,
+        {
+          backgroundColor: withAlpha(finalPrimaryColor, 0.2),
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.sm,
+          borderRadius: tokens.borders.radius.md,
+          minWidth: 80,
+        }
+      ]}>
+        <AtomicText style={[
+          styles.bestLabel,
+          {
+            color: finalSubtextColor,
+            fontSize: bestLabelFontSize,
+          }
+        ]}>
           {bestLabel}
         </AtomicText>
-        <AtomicText style={[styles.bestNumber, { color: finalPrimaryColor }]}>
+        <AtomicText style={[
+          styles.bestNumber,
+          {
+            color: finalPrimaryColor,
+            fontSize: bestNumberFontSize,
+            lineHeight: bestNumberFontSize + 4,
+            minHeight: bestNumberFontSize + 4,
+            marginTop: tokens.spacing.xs,
+          }
+        ]}>
           {longest}
         </AtomicText>
       </View>
@@ -80,8 +144,6 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 16,
-    padding: 16,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
@@ -90,10 +152,9 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
+    flex: 1,
   },
   iconContainer: {
-    width: 40,
-    height: 40,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -101,29 +162,22 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   number: {
-    fontSize: 32,
     fontWeight: "bold",
   },
   label: {
-    fontSize: 12,
     textTransform: "uppercase",
   },
   currentLabel: {
-    fontSize: 14,
-    fontWeight: "500",
+    fontWeight: "600",
   },
   bestStreak: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 12,
     alignItems: "center",
   },
   bestLabel: {
-    fontSize: 11,
     textTransform: "uppercase",
+    fontWeight: "600",
   },
   bestNumber: {
-    fontSize: 18,
     fontWeight: "bold",
   },
 });

package/src/domains/notifications/infrastructure/services/NotificationManager.ts CHANGED Viewed

@@ -29,6 +29,8 @@ export class NotificationManager {
         shouldShowAlert: true,
         shouldPlaySound: true,
         shouldSetBadge: true,
+        shouldShowBanner: true,
+        shouldShowList: true,
       }),
     });