@umituz/react-native-settings 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/DisclaimerSetting.tsx

@@ -27,7 +27,7 @@ import {
 } from 'react-native';
 
 import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system-theme';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
 import { useLocalization } from '@umituz/react-native-localization';
 
 type DesignTokens = ReturnType<typeof useAppDesignTokens>;

package/src/presentation/components/SettingItem.tsx

@@ -12,12 +12,12 @@
  */
 
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, Pressable } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import type { IconName } from '@umituz/react-native-design-system';
-import type { DesignTokens } from '@umituz/react-native-design-system';
+import type { IconName } from '@umituz/react-native-design-system-atoms';
+import type { DesignTokens } from '@umituz/react-native-design-system-theme';
 
 interface SettingItemProps {
   /** Icon name from Lucide library */
@@ -62,86 +62,9 @@ export const SettingItem: React.FC<SettingItemProps> = ({
     ? (iconGradient as unknown as readonly [string, string, ...string[]])
     : [tokens.colors.surface, tokens.colors.surface] as const;
 
-  if (onPress) {
-    return (
-      <TouchableOpacity
-        onPress={onPress}
-        disabled={disabled}
-        activeOpacity={0.7}
-        style={[styles.listItem, disabled && styles.disabled]}
-        testID={testID}
-      >
-        {/* Left: Gradient Icon */}
-        <View style={styles.leftContainer}>
-          <LinearGradient
-            colors={gradientColors}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            style={styles.iconContainer}
-          >
-            <AtomicIcon name={icon} size="md" customColor="#FFFFFF" />
-          </LinearGradient>
-        </View>
-
-        {/* Center: Title and Description */}
-        <View style={styles.contentContainer}>
-          <AtomicText
-            type="bodyLarge"
-            color={disabled ? "textDisabled" : "onSurface"}
-            style={styles.title}
-            numberOfLines={2}
-            ellipsizeMode="tail"
-          >
-            {title}
-          </AtomicText>
-          {description && (
-            <AtomicText
-              type="bodySmall"
-              color="textSecondary"
-              style={styles.description}
-              numberOfLines={2}
-              ellipsizeMode="tail"
-            >
-              {description}
-            </AtomicText>
-          )}
-        </View>
-
-        {/* Right: Value, Chevron, or Custom Element */}
-        {rightElement ? (
-          <View style={styles.rightContainer}>{rightElement}</View>
-        ) : value ? (
-          <View style={styles.rightContainer}>
-            <AtomicText
-              type="bodyMedium"
-              color="textSecondary"
-              style={styles.value}
-              numberOfLines={2}
-              textAlign="right"
-            >
-              {value}
-            </AtomicText>
-          </View>
-        ) : (showChevron ?? true) ? (
-          <View style={styles.rightContainer}>
-            <AtomicIcon
-              name="ChevronRight"
-              size="sm"
-              color="textSecondary"
-              style={styles.chevron}
-            />
-          </View>
-        ) : null}
-      </TouchableOpacity>
-    );
-  }
-
-  return (
-    <View
-      style={[styles.listItem, disabled && styles.disabled]}
-      testID={testID}
-    >
-      {/* Left: Gradient Icon */}
+  const content = (
+    <View style={[styles.listItem, disabled && styles.disabled]}>
+      {/* Left: Icon with gradient */}
       <View style={styles.leftContainer}>
         <LinearGradient
           colors={gradientColors}
@@ -149,111 +72,102 @@ export const SettingItem: React.FC<SettingItemProps> = ({
           end={{ x: 1, y: 1 }}
           style={styles.iconContainer}
         >
-          <AtomicIcon name={icon} size="md" customColor="#FFFFFF" />
+          <AtomicIcon name={icon} size="md" color="primary" />
         </LinearGradient>
       </View>
 
-      {/* Center: Title and Description */}
+      {/* Center: Title and description */}
       <View style={styles.contentContainer}>
-        <AtomicText
-          type="bodyLarge"
-          color={disabled ? "textDisabled" : "onSurface"}
-          style={styles.title}
-          numberOfLines={2}
-          ellipsizeMode="tail"
-        >
+        <AtomicText type="bodyLarge" color="textPrimary" style={styles.title} numberOfLines={2}>
           {title}
         </AtomicText>
         {description && (
-          <AtomicText
-            type="bodySmall"
-            color="textSecondary"
-            style={styles.description}
-            numberOfLines={2}
-            ellipsizeMode="tail"
-          >
+          <AtomicText type="bodySmall" color="textSecondary" style={styles.description} numberOfLines={2}>
             {description}
           </AtomicText>
         )}
       </View>
 
-      {/* Right: Value, Chevron, or Custom Element */}
-      {rightElement ? (
-        <View style={styles.rightContainer}>{rightElement}</View>
-      ) : value ? (
-        <View style={styles.rightContainer}>
-          <AtomicText
-            type="bodyMedium"
-            color="textSecondary"
-            style={styles.value}
-            numberOfLines={2}
-            textAlign="right"
-          >
+      {/* Right: Value, chevron, or custom element */}
+      <View style={styles.rightContainer}>
+        {rightElement ? (
+          rightElement
+        ) : value ? (
+          <AtomicText type="bodyMedium" color="textSecondary" style={styles.value} numberOfLines={2}>
             {value}
           </AtomicText>
-        </View>
-      ) : null}
+        ) : (showChevron ?? true) && onPress ? (
+          <AtomicIcon name="ChevronRight" size="sm" customColor={tokens.colors.textSecondary} style={styles.chevron} />
+        ) : null}
+      </View>
     </View>
   );
+
+  if (onPress && !disabled) {
+    return (
+      <Pressable onPress={onPress} testID={testID} style={styles.pressable}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return <View testID={testID}>{content}</View>;
 };
 
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
+    pressable: {
+      borderRadius: tokens.borders.radius.md,
+    },
     listItem: {
       flexDirection: 'row',
       alignItems: 'center',
-      paddingVertical: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.lg,
-      minHeight: 72,
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      minHeight: 64,
     },
     disabled: {
       opacity: 0.5,
     },
+    contentContainer: {
+      flex: 1,
+      marginLeft: tokens.spacing.md,
+      marginRight: tokens.spacing.md,
+    },
     leftContainer: {
       marginRight: tokens.spacing.md,
       justifyContent: 'center',
     },
     iconContainer: {
-      width: 48,
-      height: 48,
-      borderRadius: 24,
+      width: 44,
+      height: 44,
+      borderRadius: 22,
       alignItems: 'center',
       justifyContent: 'center',
       overflow: 'hidden',
       borderWidth: 1,
-      borderColor: `${tokens.colors.primary}15`,
-    },
-    contentContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      minWidth: 0,
+      borderColor: `${tokens.colors.primary}20`,
     },
     title: {
-      fontSize: tokens.typography.bodyLarge.fontSize,
       fontWeight: '600',
-      flexShrink: 1,
-      lineHeight: tokens.typography.bodyLarge.fontSize * 1.4,
+      marginBottom: tokens.spacing.xs,
     },
     description: {
-      fontSize: tokens.typography.bodySmall.fontSize,
-      marginTop: tokens.spacing.xs / 2,
-      opacity: 0.7,
-      flexShrink: 1,
-      lineHeight: tokens.typography.bodySmall.fontSize * 1.4,
+      marginTop: tokens.spacing.xs,
+      opacity: 0.8,
     },
     rightContainer: {
       justifyContent: 'center',
       alignItems: 'flex-end',
-      marginLeft: tokens.spacing.md,
       maxWidth: '50%',
       flexShrink: 0,
     },
     value: {
       fontWeight: '500',
-      lineHeight: tokens.typography.bodyMedium.fontSize * 1.4,
+      textAlign: 'right',
     },
     chevron: {
-      opacity: 0.5,
+      opacity: 0.6,
     },
   });
 

package/src/presentation/screens/AppearanceScreen.tsx

@@ -13,15 +13,16 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
-import { useTheme, useAppDesignTokens, type DesignTokens } from '@umituz/react-native-design-system-theme';
-import { AtomicText, ScreenLayout, SectionHeader, SectionContainer } from '@umituz/react-native-design-system';
+import { useDesignSystemTheme, useAppDesignTokens, type DesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicText } from '@umituz/react-native-design-system-atoms';
+import { ScreenLayout } from '@umituz/react-native-design-system-organisms';
 import { useLocalization, getLanguageByCode } from '@umituz/react-native-localization';
 import { SettingItem } from '../components/SettingItem';
 
 export const AppearanceScreen: React.FC = () => {
   const { t, currentLanguage } = useLocalization();
   const navigation = useNavigation();
-  const { themeMode, toggleTheme } = useTheme();
+  const { themeMode, setThemeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
   const styles = getStyles(tokens);
 
@@ -34,7 +35,8 @@ export const AppearanceScreen: React.FC = () => {
   };
 
   const handleThemeToggle = () => {
-    toggleTheme();
+    const newMode = themeMode === 'dark' ? 'light' : 'dark';
+    setThemeMode(newMode);
   };
 
   return (
@@ -50,8 +52,10 @@ export const AppearanceScreen: React.FC = () => {
       </View>
 
       {/* Language Section */}
-      <SectionContainer>
-        <SectionHeader>{t('settings.language')}</SectionHeader>
+      <View style={{ marginBottom: tokens.spacing.md }}>
+        <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
+          {t('settings.language')}
+        </AtomicText>
         <SettingItem
           icon="Languages"
           iconGradient={((tokens.colors as any).settingGradients?.language as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
@@ -60,11 +64,13 @@ export const AppearanceScreen: React.FC = () => {
           onPress={handleLanguagePress}
           testID="language-button"
         />
-      </SectionContainer>
+      </View>
 
       {/* Theme Section */}
-      <SectionContainer>
-        <SectionHeader>{t('settings.appearance.darkMode')}</SectionHeader>
+      <View style={{ marginBottom: tokens.spacing.md }}>
+        <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
+          {t('settings.appearance.darkMode')}
+        </AtomicText>
         <SettingItem
           icon={themeMode === 'dark' ? 'Moon' : 'Sun'}
           iconGradient={
@@ -77,7 +83,7 @@ export const AppearanceScreen: React.FC = () => {
           onPress={handleThemeToggle}
           testID="theme-button"
         />
-      </SectionContainer>
+      </View>
     </ScreenLayout>
   );
 };
@@ -87,11 +93,21 @@ const getStyles = (tokens: DesignTokens) =>
     header: {
       paddingBottom: tokens.spacing.lg,
       paddingTop: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
     },
     headerSubtitle: {
       marginTop: tokens.spacing.sm,
       lineHeight: 20,
       opacity: 0.8,
     },
+    sectionHeader: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingTop: tokens.spacing.lg,
+      paddingBottom: tokens.spacing.md,
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+      fontWeight: '600',
+      fontSize: 12,
+    },
   });
 

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -15,8 +15,9 @@ import {
   TextInput,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useTheme, useAppDesignTokens, withAlpha, STATIC_TOKENS, type DesignTokens } from '@umituz/react-native-design-system-theme';
-import { AtomicIcon, AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, withAlpha, STATIC_TOKENS, type DesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicIcon, AtomicText } from '@umituz/react-native-design-system-atoms';
+import { ScreenLayout } from '@umituz/react-native-design-system-organisms';
 import { useLocalization, searchLanguages, Language, LANGUAGES } from '@umituz/react-native-localization';
 
 /**

package/src/presentation/screens/SettingsScreen.tsx

@@ -16,8 +16,9 @@ import { DeviceEventEmitter, Alert, View, TouchableOpacity, StyleSheet } from 'r
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useNavigation, CommonActions } from '@react-navigation/native';
-import { useTheme, useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import { ScreenLayout, AtomicIcon, AtomicText, SectionHeader, SectionContainer, AtomicDivider } from '@umituz/react-native-design-system';
+import { useDesignSystemTheme, useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { ScreenLayout } from '@umituz/react-native-design-system-organisms';
+import { AtomicIcon, AtomicText } from '@umituz/react-native-design-system-atoms';
 import { SettingItem } from '../components/SettingItem';
 import { getLanguageByCode, useLocalization } from '@umituz/react-native-localization';
 import { SettingsConfig } from './types';
@@ -86,10 +87,11 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   config = {} 
 }) => {
   const navigation = useNavigation();
-  const { theme, themeMode } = useTheme();
+  const { themeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { currentLanguage, t } = useLocalization();
+  const styles = getStyles(tokens);
 
   const currentLang = getLanguageByCode(currentLanguage);
   const languageDisplay = currentLang ? `${currentLang.flag} ${currentLang.nativeName}` : 'English';
@@ -246,12 +248,12 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
       <View style={[
         styles.header, 
         { 
-          borderBottomColor: theme.colors.borderLight,
-          backgroundColor: theme.colors.surface,
+          borderBottomColor: tokens.colors.borderLight,
+          backgroundColor: tokens.colors.surface,
           paddingTop: insets.top,
         }
       ]}>
-        <AtomicText type="headlineLarge" style={{ color: theme.colors.textPrimary, flex: 1 }}>
+        <AtomicText type="headlineLarge" style={{ color: tokens.colors.textPrimary, flex: 1 }}>
           {t('navigation.settings') || 'Settings'}
         </AtomicText>
         <TouchableOpacity
@@ -266,103 +268,122 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 
       {/* Appearance Section */}
       {features.appearance && (
-        <SectionContainer>
-          <SectionHeader>{t('settings.sections.appearance')}</SectionHeader>
+        <View style={{ marginBottom: tokens.spacing.md }}>
+          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
+            {t('settings.sections.appearance')}
+          </AtomicText>
           <SettingItem
             icon="Palette"
-            iconGradient={theme.colors.settingGradients.themeLight as unknown as string[]}
+            iconGradient={((tokens.colors as any).settingGradients?.themeLight as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
             title={t('settings.appearance.title')}
             description={t('settings.appearance.themeDescription')}
             onPress={handleAppearancePress}
             testID="appearance-button"
           />
-        </SectionContainer>
+        </View>
       )}
 
       {/* General Section - Notifications */}
       {features.notifications && (
-        <SectionContainer>
-          <SectionHeader>{t('settings.sections.general')}</SectionHeader>
+        <View style={{ marginBottom: tokens.spacing.md }}>
+          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
+            {t('settings.sections.general')}
+          </AtomicText>
           <SettingItem
             icon="Bell"
-            iconGradient={theme.colors.settingGradients.notifications as unknown as string[]}
+            iconGradient={((tokens.colors as any).settingGradients?.notifications as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
             title={t('settings.notifications.title')}
             description={t('settings.notifications.description')}
             onPress={handleNotificationsPress}
             testID="notifications-button"
           />
-        </SectionContainer>
+        </View>
       )}
 
       {/* Development/Test: Show Onboarding */}
       {__DEV__ && useOnboardingStore && (
-        <SectionContainer>
-          <SectionHeader>Development</SectionHeader>
+        <View style={{ marginBottom: tokens.spacing.md }}>
+          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
+            Development
+          </AtomicText>
           <SettingItem
             icon="Play"
-            iconGradient={theme.colors.settingGradients.info as unknown as string[]}
+            iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
             title="Show Onboarding (Dev)"
             description="Navigate to onboarding screen"
             onPress={handleShowOnboarding}
             testID="show-onboarding-button"
           />
-        </SectionContainer>
+        </View>
       )}
 
       {/* About & Legal Section */}
       {(features.about || features.legal) && (
-        <SectionContainer>
-          <SectionHeader>{t('settings.sections.about')}</SectionHeader>
+        <View style={{ marginBottom: tokens.spacing.md }}>
+          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
+            {t('settings.sections.about')}
+          </AtomicText>
           {features.about && (
             <SettingItem
               icon="Info"
-              iconGradient={theme.colors.settingGradients.info as unknown as string[]}
+              iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
               title={t('settings.about.title')}
               description={t('settings.about.description')}
               onPress={handleAboutPress}
               testID="about-button"
             />
           )}
-          {features.about && features.legal && <AtomicDivider />}
+          {features.about && features.legal && (
+            <View style={{ height: 1, backgroundColor: tokens.colors.borderLight, marginVertical: tokens.spacing.sm }} />
+          )}
           {features.legal && (
             <SettingItem
               icon="FileText"
-              iconGradient={theme.colors.settingGradients.info as unknown as string[]}
+              iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
               title={t('settings.legal.title')}
               description={t('settings.legal.description')}
               onPress={handleLegalPress}
               testID="legal-button"
             />
           )}
-        </SectionContainer>
+        </View>
       )}
 
       {/* Fallback: Show message if no features are enabled */}
       {!hasAnyFeatures && (
-        <SectionContainer>
-          <SectionHeader>
+        <View>
+          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
             {t('settings.noOptionsAvailable') || 'No settings available'}
-          </SectionHeader>
-        </SectionContainer>
+          </AtomicText>
+        </View>
       )}
     </ScreenLayout>
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingBottom: 12,
-    paddingTop: 12,
+    paddingHorizontal: tokens.spacing.md,
+    paddingBottom: tokens.spacing.md,
+    paddingTop: tokens.spacing.md,
     borderBottomWidth: 1,
     zIndex: 1000,
   },
+  sectionHeader: {
+    paddingHorizontal: tokens.spacing.lg,
+    paddingTop: tokens.spacing.lg,
+    paddingBottom: tokens.spacing.md,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    fontWeight: '600',
+    fontSize: 12,
+  },
   closeButton: {
-    padding: 8,
-    marginLeft: 8,
+    padding: tokens.spacing.sm,
+    marginLeft: tokens.spacing.sm,
   },
 });