@umituz/react-native-settings 4.23.130 → 4.23.132

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/domains/gamification/components/GamificationScreen/GamificationScreenWithConfig.tsx +2 -3
  3. package/src/domains/gamification/components/StatsCard.tsx +58 -36
  4. package/src/domains/gamification/components/StreakDisplay.tsx +88 -79
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "4.23.130",
3
+ "version": "4.23.132",
4
4
  "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/domains/gamification/components/GamificationScreen/GamificationScreenWithConfig.tsx CHANGED
@@ -54,7 +54,6 @@ export const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = (
54
54
  streakProps: {
55
55
  current: streak.current,
56
56
  longest: streak.longest,
57
- currentLabel: config.translations.currentStreak,
58
57
  bestLabel: config.translations.bestStreak,
59
58
  daysLabel: config.translations.days,
60
59
  },
@@ -62,12 +61,12 @@ export const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = (
62
61
  {
63
62
  label: config.translations.pointsLabel,
64
63
  value: points,
65
- icon: "star",
64
+ icon: "⭐",
66
65
  },
67
66
  {
68
67
  label: config.translations.totalCompletedLabel,
69
68
  value: totalTasksCompleted,
70
- icon: "checkmark-circle",
69
+ icon: "✅",
71
70
  },
72
71
  ],
73
72
  achievements: achievementItems,
package/src/domains/gamification/components/StatsCard.tsx CHANGED
@@ -1,16 +1,16 @@
1
1
  /**
2
- * StatsCard Component
3
- * Displays a stat with icon - all text via props
2
+ * StatsCard Component - Modern Design
3
+ * Clean card-based stat display with large emoji icons
4
4
  */
5
5
 
6
6
  import React from "react";
7
7
  import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
8
- import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha, useResponsive } from "@umituz/react-native-design-system";
8
+ import { useAppDesignTokens, AtomicText, useResponsive, withAlpha } from "@umituz/react-native-design-system";
9
9
 
10
10
  export interface StatsCardProps {
11
11
  value: number;
12
12
  label: string;
13
- icon: React.ReactNode | string;
13
+ icon?: React.ReactNode | string;
14
14
  suffix?: string;
15
15
  containerStyle?: ViewStyle;
16
16
  valueStyle?: TextStyle;
@@ -31,7 +31,7 @@ export const StatsCard: React.FC<StatsCardProps> = ({
31
31
  labelStyle,
32
32
  accentColor,
33
33
  backgroundColor,
34
- textColor,
34
+ textColor: _textColor,
35
35
  subtextColor,
36
36
  }) => {
37
37
  const tokens = useAppDesignTokens();
@@ -39,47 +39,59 @@ export const StatsCard: React.FC<StatsCardProps> = ({
39
39
 
40
40
  const finalAccentColor = accentColor || tokens.colors.primary;
41
41
  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
42
- const finalTextColor = textColor || tokens.colors.textPrimary;
43
42
  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
44
43
 
45
- const renderedIcon = typeof icon === 'string' ? (
46
- <AtomicIcon name={icon} size="md" customColor={finalAccentColor} />
47
- ) : icon;
48
-
49
- const valueFontSize = getFontSize(32);
50
- const suffixFontSize = getFontSize(14);
51
- const labelFontSize = getFontSize(13);
52
- const iconSize = getIconSize(44);
44
+ const valueFontSize = getFontSize(48);
45
+ const suffixFontSize = getFontSize(16);
46
+ const labelFontSize = getFontSize(12);
47
+ const iconSize = getIconSize(56);
53
48
 
54
49
  return (
55
50
  <View style={[
56
51
  styles.container,
57
52
  {
58
53
  backgroundColor: finalBackgroundColor,
59
- borderRadius: tokens.borders.radius.lg,
60
- padding: tokens.spacing.lg,
54
+ borderRadius: tokens.borders.radius.xl,
55
+ padding: tokens.spacing.xl,
56
+ shadowColor: "#000",
57
+ shadowOffset: { width: 0, height: 2 },
58
+ shadowOpacity: 0.1,
59
+ shadowRadius: 8,
60
+ elevation: 3,
61
61
  },
62
62
  containerStyle
63
63
  ]}>
64
- <View style={[
65
- styles.iconContainer,
66
- {
67
- backgroundColor: withAlpha(finalAccentColor, 0.15),
68
- width: iconSize,
69
- height: iconSize,
70
- borderRadius: iconSize / 2,
71
- marginBottom: tokens.spacing.md,
72
- }
73
- ]}>
74
- {renderedIcon}
75
- </View>
76
- <View style={[styles.valueRow, { minHeight: valueFontSize + 4 }]}>
64
+ {/* Emoji Icon in Circle */}
65
+ {icon && (
66
+ <View style={[
67
+ styles.iconContainer,
68
+ {
69
+ width: iconSize,
70
+ height: iconSize,
71
+ backgroundColor: withAlpha(finalAccentColor, 0.15),
72
+ borderRadius: iconSize / 2,
73
+ marginBottom: tokens.spacing.md,
74
+ }
75
+ ]}>
76
+ <AtomicText style={[
77
+ styles.emoji,
78
+ {
79
+ fontSize: iconSize * 0.55,
80
+ }
81
+ ]}>
82
+ {icon}
83
+ </AtomicText>
84
+ </View>
85
+ )}
86
+
87
+ {/* Large Value in Center */}
88
+ <View style={styles.valueRow}>
77
89
  <AtomicText style={[
78
90
  styles.value,
79
91
  {
80
- color: finalTextColor,
92
+ color: finalAccentColor,
81
93
  fontSize: valueFontSize,
82
- lineHeight: valueFontSize + 4,
94
+ lineHeight: valueFontSize + 8,
83
95
  },
84
96
  valueStyle
85
97
  ]}>
@@ -97,6 +109,8 @@ export const StatsCard: React.FC<StatsCardProps> = ({
97
109
  </AtomicText>
98
110
  )}
99
111
  </View>
112
+
113
+ {/* Small Label Below */}
100
114
  <AtomicText style={[
101
115
  styles.label,
102
116
  {
@@ -106,7 +120,7 @@ export const StatsCard: React.FC<StatsCardProps> = ({
106
120
  },
107
121
  labelStyle
108
122
  ]}>
109
- {label}
123
+ {label.toUpperCase()}
110
124
  </AtomicText>
111
125
  </View>
112
126
  );
@@ -116,10 +130,14 @@ const styles = StyleSheet.create({
116
130
  container: {
117
131
  flex: 1,
118
132
  minWidth: "45%",
133
+ alignItems: "center",
119
134
  },
120
135
  iconContainer: {
121
- alignItems: "center",
122
136
  justifyContent: "center",
137
+ alignItems: "center",
138
+ },
139
+ emoji: {
140
+ textAlign: "center",
123
141
  },
124
142
  valueRow: {
125
143
  flexDirection: "row",
@@ -127,12 +145,16 @@ const styles = StyleSheet.create({
127
145
  gap: 4,
128
146
  },
129
147
  value: {
130
- fontWeight: "bold",
148
+ fontWeight: "800",
149
+ letterSpacing: -1,
150
+ textAlign: "center",
131
151
  },
132
152
  suffix: {
133
- fontWeight: "500",
153
+ fontWeight: "600",
134
154
  },
135
155
  label: {
136
- fontWeight: "500",
156
+ fontWeight: "600",
157
+ letterSpacing: 0.5,
158
+ textAlign: "center",
137
159
  },
138
160
  });
package/src/domains/gamification/components/StreakDisplay.tsx CHANGED
@@ -1,16 +1,15 @@
1
1
  /**
2
- * StreakDisplay Component
3
- * Displays streak information - all text via props
2
+ * StreakDisplay Component - Modern Design
3
+ * Clean card-based design with gradient fire icon
4
4
  */
5
5
 
6
6
  import React from "react";
7
7
  import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
8
- import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha, useResponsive } from "@umituz/react-native-design-system";
8
+ import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
9
9
 
10
10
  export interface StreakDisplayProps {
11
11
  current: number;
12
12
  longest: number;
13
- currentLabel: string;
14
13
  bestLabel: string;
15
14
  daysLabel: string;
16
15
  icon?: React.ReactNode | string;
@@ -26,113 +25,117 @@ export interface StreakDisplayProps {
26
25
  export const StreakDisplay: React.FC<StreakDisplayProps> = ({
27
26
  current,
28
27
  longest,
29
- currentLabel,
30
28
  bestLabel,
31
29
  daysLabel,
32
- icon,
33
30
  containerStyle,
34
31
  numberStyle,
35
32
  labelStyle,
36
33
  primaryColor,
37
34
  backgroundColor,
38
- textColor,
35
+ textColor: _textColor,
39
36
  subtextColor,
40
37
  }) => {
41
38
  const tokens = useAppDesignTokens();
42
- const { getFontSize, iconContainerSize } = useResponsive();
39
+ const { getFontSize, getIconSize } = useResponsive();
43
40
 
44
41
  const finalPrimaryColor = primaryColor || tokens.colors.primary;
45
42
  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
46
- const finalTextColor = textColor || tokens.colors.textPrimary;
47
43
  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
48
44
 
49
- const renderedIcon = typeof icon === 'string' ? (
50
- <AtomicIcon name={icon} size="lg" customColor={finalPrimaryColor} />
51
- ) : icon || <AtomicIcon name="trending-up" size="lg" customColor={finalPrimaryColor} />;
52
-
53
- const numberFontSize = getFontSize(36);
54
- const labelFontSize = getFontSize(11);
55
- const currentLabelFontSize = getFontSize(15);
56
- const bestNumberFontSize = getFontSize(24);
57
- const bestLabelFontSize = getFontSize(10);
45
+ const streakNumberSize = getFontSize(48);
46
+ const streakLabelSize = getFontSize(13);
47
+ const bestNumberSize = getFontSize(20);
48
+ const bestLabelSize = getFontSize(11);
49
+ const iconSize = getIconSize(48);
58
50
 
59
51
  return (
60
52
  <View style={[
61
53
  styles.container,
62
54
  {
63
55
  backgroundColor: finalBackgroundColor,
64
- borderRadius: tokens.borders.radius.lg,
65
- padding: tokens.spacing.lg,
56
+ borderRadius: tokens.borders.radius.xl,
57
+ padding: tokens.spacing.xl,
58
+ shadowColor: "#000",
59
+ shadowOffset: { width: 0, height: 2 },
60
+ shadowOpacity: 0.1,
61
+ shadowRadius: 8,
62
+ elevation: 3,
66
63
  },
67
64
  containerStyle
68
65
  ]}>
69
- <View style={styles.mainStreak}>
70
- <View style={[styles.iconContainer, { width: iconContainerSize, height: iconContainerSize }]}>
71
- {renderedIcon}
72
- </View>
73
- <View style={[styles.streakInfo, { minWidth: iconContainerSize + 12 }]}>
74
- <AtomicText style={[
75
- styles.number,
76
- {
77
- color: finalPrimaryColor,
78
- fontSize: numberFontSize,
79
- lineHeight: numberFontSize + 4,
80
- minHeight: numberFontSize + 4,
81
- },
82
- numberStyle
83
- ]}>
84
- {current}
85
- </AtomicText>
66
+ {/* Main Streak Section */}
67
+ <View style={styles.mainSection}>
68
+ {/* Fire Icon */}
69
+ <View style={[
70
+ styles.fireIcon,
71
+ {
72
+ width: iconSize,
73
+ height: iconSize,
74
+ backgroundColor: withAlpha(finalPrimaryColor, 0.15),
75
+ borderRadius: iconSize / 2,
76
+ }
77
+ ]}>
86
78
  <AtomicText style={[
87
- styles.label,
88
- {
89
- color: finalSubtextColor,
90
- fontSize: labelFontSize,
91
- marginTop: tokens.spacing.xs,
92
- },
93
- labelStyle
79
+ styles.fireEmoji,
80
+ { fontSize: iconSize * 0.6 }
94
81
  ]}>
95
- {daysLabel}
82
+ 🔥
96
83
  </AtomicText>
97
84
  </View>
98
- <AtomicText style={[
99
- styles.currentLabel,
100
- {
101
- color: finalTextColor,
102
- fontSize: currentLabelFontSize,
103
- }
104
- ]}>
105
- {currentLabel}
106
- </AtomicText>
85
+
86
+ <View style={styles.streakNumbers}>
87
+ <View style={styles.currentStreak}>
88
+ <AtomicText style={[
89
+ styles.streakNumber,
90
+ {
91
+ color: finalPrimaryColor,
92
+ fontSize: streakNumberSize,
93
+ lineHeight: streakNumberSize + 8,
94
+ },
95
+ numberStyle
96
+ ]}>
97
+ {current}
98
+ </AtomicText>
99
+ <AtomicText style={[
100
+ styles.streakLabel,
101
+ {
102
+ color: finalSubtextColor,
103
+ fontSize: streakLabelSize,
104
+ marginTop: tokens.spacing.xs,
105
+ },
106
+ labelStyle
107
+ ]}>
108
+ {daysLabel.toUpperCase()}
109
+ </AtomicText>
110
+ </View>
111
+ </View>
107
112
  </View>
108
113
 
114
+ {/* Best Streak Badge */}
109
115
  <View style={[
110
- styles.bestStreak,
116
+ styles.bestBadge,
111
117
  {
112
- backgroundColor: withAlpha(finalPrimaryColor, 0.2),
118
+ backgroundColor: withAlpha(finalPrimaryColor, 0.12),
119
+ borderRadius: tokens.borders.radius.lg,
113
120
  paddingHorizontal: tokens.spacing.md,
114
- paddingVertical: tokens.spacing.sm,
115
- borderRadius: tokens.borders.radius.md,
116
- minWidth: 80,
121
+ paddingVertical: tokens.spacing.md,
117
122
  }
118
123
  ]}>
119
124
  <AtomicText style={[
120
125
  styles.bestLabel,
121
126
  {
122
127
  color: finalSubtextColor,
123
- fontSize: bestLabelFontSize,
128
+ fontSize: bestLabelSize,
124
129
  }
125
130
  ]}>
126
- {bestLabel}
131
+ {bestLabel.toUpperCase()}
127
132
  </AtomicText>
128
133
  <AtomicText style={[
129
134
  styles.bestNumber,
130
135
  {
131
136
  color: finalPrimaryColor,
132
- fontSize: bestNumberFontSize,
133
- lineHeight: bestNumberFontSize + 4,
134
- minHeight: bestNumberFontSize + 4,
135
- marginTop: tokens.spacing.xs,
137
+ fontSize: bestNumberSize,
138
+ marginTop: tokens.spacing.xs / 2,
136
139
  }
137
140
  ]}>
138
141
  {longest}
@@ -148,36 +151,42 @@ const styles = StyleSheet.create({
148
151
  alignItems: "center",
149
152
  justifyContent: "space-between",
150
153
  },
151
- mainStreak: {
154
+ mainSection: {
152
155
  flexDirection: "row",
153
156
  alignItems: "center",
154
- gap: 12,
157
+ gap: 16,
155
158
  flex: 1,
156
159
  },
157
- iconContainer: {
160
+ fireIcon: {
158
161
  justifyContent: "center",
159
162
  alignItems: "center",
160
163
  },
161
- streakInfo: {
162
- alignItems: "center",
164
+ fireEmoji: {
165
+ textAlign: "center",
166
+ },
167
+ streakNumbers: {
168
+ flex: 1,
163
169
  },
164
- number: {
165
- fontWeight: "bold",
170
+ currentStreak: {
171
+ alignItems: "flex-start",
166
172
  },
167
- label: {
168
- textTransform: "uppercase",
173
+ streakNumber: {
174
+ fontWeight: "800",
175
+ letterSpacing: -1,
169
176
  },
170
- currentLabel: {
177
+ streakLabel: {
171
178
  fontWeight: "600",
179
+ letterSpacing: 0.5,
172
180
  },
173
- bestStreak: {
181
+ bestBadge: {
174
182
  alignItems: "center",
183
+ minWidth: 70,
175
184
  },
176
185
  bestLabel: {
177
- textTransform: "uppercase",
178
- fontWeight: "600",
186
+ fontWeight: "700",
187
+ letterSpacing: 0.5,
179
188
  },
180
189
  bestNumber: {
181
- fontWeight: "bold",
190
+ fontWeight: "800",
182
191
  },
183
192
  });