@umituz/react-native-settings 5.4.22 → 5.4.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.4.22",
+  "version": "5.4.24",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification - expo-store-review and expo-device now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/domains/feedback/presentation/components/FeedbackForm.styles.ts

@@ -1,7 +1,8 @@
 import { StyleSheet } from "react-native";
 import type { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { withAlpha } from "@umituz/react-native-design-system/theme";
 
-export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
+export const getFeedbackFormStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
         width: "100%",
@@ -25,7 +26,7 @@ export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTok
         alignItems: "center",
         marginVertical: 32,
         paddingVertical: 16,
-        backgroundColor: "rgba(255,255,255,0.02)",
+        backgroundColor: withAlpha(tokens.colors.primary, 0.05),
         borderRadius: 16,
     },
     ratingLabel: {
@@ -34,6 +35,7 @@ export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTok
         letterSpacing: 1,
         marginBottom: 16,
         textTransform: "uppercase",
+        color: tokens.colors.textSecondary,
     },
     stars: {
         flexDirection: "row",
@@ -52,10 +54,14 @@ export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTok
         borderRadius: 16,
         padding: 16,
         fontSize: 15,
+        color: tokens.colors.textPrimary,
+        backgroundColor: tokens.colors.surfaceSecondary,
+        borderColor: tokens.colors.border,
     },
     errorText: {
         marginTop: 8,
         fontWeight: "600",
+        color: tokens.colors.error,
     },
     submitButton: {
         width: "100%",

package/src/domains/gamification/components/AchievementItem.tsx

@@ -8,7 +8,7 @@ import { View } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 import type { AchievementItemProps } from "./types/AchievementItemProps";
-import { achievementItemStyles as styles } from "./styles/achievementItemStyles";
+import { createAchievementItemStyles } from "./styles/achievementItemStyles";
 
 export const AchievementItem: React.FC<AchievementItemProps> = ({
   title,
@@ -28,6 +28,7 @@ export const AchievementItem: React.FC<AchievementItemProps> = ({
   lockedOpacity,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = createAchievementItemStyles(tokens);
   const finalAccentColor = accentColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
   const finalTextColor = textColor || tokens.colors.textPrimary;
@@ -61,7 +62,7 @@ export const AchievementItem: React.FC<AchievementItemProps> = ({
           </AtomicText>
           {isUnlocked && (
             <View style={[styles.checkmark, { backgroundColor: finalAccentColor }]}>
-              <AtomicText style={[styles.checkmarkText, { color: tokens.colors.background }]}>
+              <AtomicText style={[styles.checkmarkText, { color: tokens.colors.onPrimary || '#FFFFFF' }]}>
                 ✓
               </AtomicText>
             </View>

package/src/domains/gamification/components/GamificationScreen/GamificationScreen.tsx

@@ -14,7 +14,7 @@ import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";
 import { StatsGrid } from "./StatsGrid";
 import { AchievementsList } from "./AchievementsList";
-import { styles } from "./styles";
+import { createStyles } from "./styles";
 import type { GamificationScreenProps } from "./types";
 
 /**
@@ -39,6 +39,7 @@ export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
 }) => {
   const _navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
 
   // Use tokens for fallbacks
   const finalAccentColor = accentColor || tokens.colors.primary;

package/src/domains/gamification/components/GamificationScreen/styles.ts

@@ -3,41 +3,47 @@
  */
 
 import { StyleSheet } from "react-native";
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    padding: 16,
-    paddingBottom: 32,
-  },
-  header: {
-    marginBottom: 20,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: "bold",
-  },
-  section: {
-    marginBottom: 24,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  statsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 12,
-  },
-  emptyText: {
-    fontSize: 14,
-    textAlign: "center",
-    paddingVertical: 20,
-  },
-});
+export const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      padding: tokens.spacing.md,
+      paddingBottom: tokens.spacing.xl,
+    },
+    header: {
+      marginBottom: tokens.spacing.lg,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: "bold",
+      color: tokens.colors.textPrimary,
+    },
+    section: {
+      marginBottom: tokens.spacing.xl,
+    },
+    sectionTitle: {
+      fontSize: 18,
+      fontWeight: "600",
+      marginBottom: tokens.spacing.md,
+      color: tokens.colors.textPrimary,
+    },
+    statsGrid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: tokens.spacing.md,
+    },
+    emptyText: {
+      fontSize: 14,
+      textAlign: "center",
+      paddingVertical: tokens.spacing.lg,
+      color: tokens.colors.textSecondary,
+    },
+  });

package/src/domains/gamification/components/styles/achievementItemStyles.ts

@@ -3,72 +3,79 @@
  */
 
 import { StyleSheet } from 'react-native';
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
-export const achievementItemStyles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 12,
-    borderRadius: 12,
-    marginBottom: 8,
-  },
-  iconContainer: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 12,
-  },
-  content: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 4,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "600",
-    flex: 1,
-  },
-  checkmark: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 8,
-  },
-  checkmarkText: {
-    fontSize: 12,
-    fontWeight: "bold",
-  },
-  description: {
-    fontSize: 13,
-    lineHeight: 18,
-  },
-  progressContainer: {
-    marginTop: 8,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  progressBar: {
-    flex: 1,
-    height: 4,
-    borderRadius: 2,
-    overflow: "hidden",
-  },
-  progressFill: {
-    height: "100%",
-    borderRadius: 2,
-  },
-  progressText: {
-    fontSize: 11,
-    minWidth: 40,
-    textAlign: "right",
-  },
-});
+export const createAchievementItemStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      padding: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
+      marginBottom: tokens.spacing.sm,
+      borderWidth: 1,
+      borderColor: tokens.colors.borderLight,
+    },
+    iconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: tokens.spacing.md,
+    },
+    content: {
+      flex: 1,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 4,
+    },
+    title: {
+      fontSize: 16,
+      fontWeight: "600",
+      flex: 1,
+      color: "inherit",
+    },
+    checkmark: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      alignItems: "center",
+      justifyContent: "center",
+      marginLeft: 8,
+    },
+    checkmarkText: {
+      fontSize: 12,
+      fontWeight: "bold",
+    },
+    description: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: "inherit",
+    },
+    progressContainer: {
+      marginTop: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+    },
+    progressBar: {
+      flex: 1,
+      height: 4,
+      borderRadius: 2,
+      overflow: "hidden",
+    },
+    progressFill: {
+      height: "100%",
+      borderRadius: 2,
+    },
+    progressText: {
+      fontSize: 11,
+      minWidth: 40,
+      textAlign: "right",
+      color: "inherit",
+    },
+  });

package/src/domains/localization/infrastructure/components/LanguageSwitcher.styles.ts

@@ -3,36 +3,39 @@
  */
 
 import { StyleSheet } from 'react-native';
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
 const DEFAULT_CONFIG = {
   defaultIconSize: 20,
 };
 
-export const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  flag: {
-    fontSize: DEFAULT_CONFIG.defaultIconSize,
-    textAlign: 'center',
-  },
-  languageName: {
-    fontSize: 14,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  icon: {
-    fontSize: DEFAULT_CONFIG.defaultIconSize,
-    textAlign: 'center',
-  },
-});
+export const createLanguageSwitcherStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.xs,
+      paddingVertical: tokens.spacing.xs,
+    },
+    disabled: {
+      opacity: 0.5,
+    },
+    flag: {
+      fontSize: DEFAULT_CONFIG.defaultIconSize,
+      textAlign: 'center',
+    },
+    languageName: {
+      fontSize: 14,
+      fontWeight: '600',
+      textAlign: 'center',
+      color: tokens.colors.textPrimary,
+    },
+    icon: {
+      fontSize: DEFAULT_CONFIG.defaultIconSize,
+      textAlign: 'center',
+    },
+  });
 
 export const DEFAULT_CONFIG_VALUES = {
   hitSlop: { top: 10, bottom: 10, left: 10, right: 10 } as const,

package/src/domains/localization/infrastructure/components/LanguageSwitcher.tsx

@@ -8,7 +8,7 @@ import { TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from
 import { AtomicText } from '@umituz/react-native-design-system/atoms';
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import { useLanguageSwitcher } from './useLanguageSwitcher';
-import { styles, DEFAULT_CONFIG_VALUES } from './LanguageSwitcher.styles';
+import { createLanguageSwitcherStyles, DEFAULT_CONFIG_VALUES } from './LanguageSwitcher.styles';
 
 export interface LanguageSwitcherProps {
   showName?: boolean;
@@ -36,6 +36,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
   accessibilityLabel,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = createLanguageSwitcherStyles(tokens);
   const { currentLang, handlePress } = useLanguageSwitcher({ onPress, disabled });
 
   const accessibilityProps = useMemo(() => ({
@@ -50,9 +51,8 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
   return (
     <TouchableOpacity
       style={[
-        styles.container, 
-        { gap: tokens.spacing.xs },
-        style, 
+        styles.container,
+        style,
         disabled && styles.disabled
       ]}
       onPress={handlePress}
@@ -68,8 +68,8 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
         </AtomicText>
       )}
       {showName && (
-        <AtomicText 
-          type="bodySmall" 
+        <AtomicText
+          type="bodySmall"
           style={[styles.languageName, { color: textColor, fontWeight: '600' }, textStyle]}
         >
           {currentLang.nativeName}

package/src/domains/localization/presentation/components/LanguageItem.styles.ts

@@ -3,38 +3,52 @@
  */
 
 import { StyleSheet } from 'react-native';
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
-export const styles = StyleSheet.create({
-  languageItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderWidth: 1,
-  },
-  selectedLanguageItem: {
-    borderWidth: 2,
-  },
-  languageContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  flag: {
-    fontSize: 24,
-    marginRight: 16,
-  },
-  languageText: {
-    flex: 1,
-    flexShrink: 1,
-  },
-  nativeName: {
-    // Styling moved to themedStyles in component for token support
-  },
-  languageName: {
-    // Styling moved to themedStyles in component for token support
-  },
-  checkIcon: {
-    // Replaced by AtomicIcon
-  },
-});
+export const createLanguageItemStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    languageItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      borderWidth: 1,
+      borderColor: tokens.colors.borderLight,
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+      marginBottom: tokens.spacing.sm,
+      overflow: 'hidden',
+    },
+    selectedLanguageItem: {
+      borderWidth: 2,
+      borderColor: tokens.colors.primary,
+    },
+    languageContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      padding: tokens.spacing.md,
+    },
+    flag: {
+      fontSize: 24,
+      marginRight: tokens.spacing.md,
+    },
+    languageText: {
+      flex: 1,
+      flexShrink: 1,
+    },
+    nativeName: {
+      fontSize: 16,
+      fontWeight: '500',
+      color: tokens.colors.textPrimary,
+      marginBottom: 2,
+    },
+    languageName: {
+      fontSize: 14,
+      color: tokens.colors.textSecondary,
+    },
+    checkIcon: {
+      padding: tokens.spacing.md,
+      // Replaced by AtomicIcon
+    },
+  });
 

package/src/domains/localization/presentation/components/LanguageItem.tsx

@@ -17,7 +17,7 @@ import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system/atoms
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import type { Language } from '../../infrastructure/storage/types/Language';
 import { ICON_PATHS } from '../../../../utils/iconPaths';
-import { styles } from './LanguageItem.styles';
+import { createLanguageItemStyles } from './LanguageItem.styles';
 
 interface LanguageItemProps {
   item: Language;
@@ -42,29 +42,9 @@ export const LanguageItem: React.FC<LanguageItemProps> = React.memo(({
   customStyles,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = createLanguageItemStyles(tokens);
 
   const themedStyles = useMemo(() => ({
-    languageItem: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.md,
-      borderRadius: tokens.borders.radius.lg,
-      backgroundColor: tokens.colors.surfaceSecondary,
-      marginBottom: tokens.spacing.md,
-      flexDirection: 'row' as const,
-      alignItems: 'center' as const,
-      justifyContent: 'space-between' as const,
-    } as ViewStyle,
-    selectedLanguageItem: {
-      backgroundColor: tokens.colors.surface,
-      borderColor: tokens.colors.primary,
-      borderWidth: 1.5,
-    } as ViewStyle,
-    nativeName: {
-      color: tokens.colors.textPrimary,
-    } as TextStyle,
-    languageName: {
-      color: tokens.colors.textSecondary,
-    } as TextStyle,
     flagContainer: {
       width: 44,
       height: 44,
@@ -80,8 +60,8 @@ export const LanguageItem: React.FC<LanguageItemProps> = React.memo(({
     <TouchableOpacity
       testID="language-item-test"
       style={[
-        themedStyles.languageItem,
-        isSelected && themedStyles.selectedLanguageItem,
+        styles.languageItem,
+        isSelected && styles.selectedLanguageItem,
         customStyles?.languageItem,
       ]}
       onPress={() => {
@@ -110,15 +90,15 @@ export const LanguageItem: React.FC<LanguageItemProps> = React.memo(({
           )}
         </View>
         <View style={[styles.languageText, customStyles?.languageText]}>
-          <AtomicText 
+          <AtomicText
             type="bodyLarge"
-            style={[themedStyles.nativeName, { fontWeight: '600' }, customStyles?.nativeName]}
+            style={[styles.nativeName, { fontWeight: '600' }, customStyles?.nativeName]}
           >
             {item.nativeName}
           </AtomicText>
-          <AtomicText 
-            type="labelMedium" 
-            style={[themedStyles.languageName, customStyles?.nativeName]}
+          <AtomicText
+            type="labelMedium"
+            style={[styles.languageName, customStyles?.nativeName]}
           >
             {item.name}
           </AtomicText>

package/src/domains/localization/scripts/prepublish.js

@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Pre-Publish Script
- * Basic checks before publishing
- */
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const PACKAGE_ROOT = path.resolve(__dirname, '..', '..');
-const SRC_DIR = path.join(PACKAGE_ROOT, 'src');
-
-if (!fs.existsSync(SRC_DIR)) {
-  console.error('❌ src directory not found');
-  process.exit(1);
-}
-
-const mainFiles = [
-  'src/index.ts',
-  'src/infrastructure/config/i18n.ts',
-];
-
-for (const file of mainFiles) {
-  const filePath = path.join(PACKAGE_ROOT, file);
-  if (!fs.existsSync(filePath)) {
-    console.error(`❌ Missing mandatory file: ${file}`);
-    process.exit(1);
-  }
-}
-
-console.log('✅ Pre-publish checks passed!');