@umituz/react-native-settings 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -26,19 +26,19 @@
     "url": "https://github.com/umituz/react-native-settings"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^6.1.18",
-    "@umituz/react-native-appearance": "latest",
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-design-system-atoms": "latest",
-    "@umituz/react-native-design-system-molecules": "latest",
-    "@umituz/react-native-design-system-organisms": "latest",
-    "@umituz/react-native-design-system-responsive": "latest",
-    "@umituz/react-native-design-system-theme": "latest",
-    "@umituz/react-native-design-system-typography": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-storage": "latest",
+    "@react-navigation/native": ">=6.0.0",
+    "@react-navigation/stack": ">=6.0.0",
+    "@umituz/react-native-appearance": "*",
+    "@umituz/react-native-design-system": "*",
+    "@umituz/react-native-design-system-atoms": "*",
+    "@umituz/react-native-design-system-molecules": "*",
+    "@umituz/react-native-design-system-organisms": "*",
+    "@umituz/react-native-design-system-responsive": "*",
+    "@umituz/react-native-design-system-theme": "*",
+    "@umituz/react-native-design-system-typography": "*",
+    "@umituz/react-native-localization": "*",
+    "@umituz/react-native-storage": "*",
     "@expo/vector-icons": ">=14.0.0",
-    "expo-linear-gradient": "^15.0.7",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": "~5.6.0",

package/src/index.ts

@@ -36,6 +36,16 @@ export { SettingsScreen } from './presentation/screens/SettingsScreen';
 export type { SettingsScreenProps } from './presentation/screens/SettingsScreen';
 export { AppearanceScreen } from './presentation/screens/AppearanceScreen';
 
+// =============================================================================
+// PRESENTATION LAYER - Navigation
+// =============================================================================
+
+export { SettingsStackNavigator } from './presentation/navigation/SettingsStackNavigator';
+export type {
+  SettingsStackNavigatorProps,
+  SettingsStackParamList
+} from './presentation/navigation/SettingsStackNavigator';
+
 // =============================================================================
 // PRESENTATION LAYER - Types
 // =============================================================================

package/src/presentation/components/CloudSyncSetting.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback } from "react";
-import { Cloud } from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { SettingItem } from "./SettingItem";
 import type { SettingItemProps } from "./SettingItem";
 
@@ -46,7 +46,7 @@ export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
 
   return (
     <SettingItem
-      icon={Cloud}
+      icon={(props) => <Feather name={"cloud" as any} {...props} />}
       title={title || "cloud_sync"}
       value={displayDescription}
       onPress={onPress}

package/src/presentation/components/StorageClearSetting.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import { Trash2 } from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { SettingItem } from "./SettingItem";
 
 export interface StorageClearSettingProps {
@@ -37,7 +37,7 @@ export const StorageClearSetting: React.FC<StorageClearSettingProps> = ({
 
   return (
     <SettingItem
-      icon={Trash2}
+      icon={(props) => <Feather name={"trash-2" as any} {...props} />}
       title={defaultTitle}
       value={defaultDescription}
       onPress={onPress}

package/src/presentation/components/UserProfileHeader.tsx

@@ -6,7 +6,7 @@
 
 import React, { useState, useCallback } from "react";
 import { View, TouchableOpacity, StyleSheet, Image } from "react-native";
-import { ChevronRight } from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { AtomicText } from "@umituz/react-native-design-system-atoms";
 import { useNavigation } from "@react-navigation/native";
@@ -54,7 +54,7 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
 
   const finalDisplayName = displayName || (isGuest ? guestDisplayName || defaultGuestDisplayName || "Guest" : defaultUserDisplayName || "User");
   const avatarName = isGuest ? guestDisplayName || defaultGuestDisplayName || defaultGuestDisplayName || "Guest" : finalDisplayName;
-  
+
   const defaultAvatarService = avatarServiceUrl || "https://ui-avatars.com/api";
   const finalAvatarUrl =
     (imageError ? null : avatarUrl) ||
@@ -115,7 +115,7 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
       </View>
       {shouldShowChevron && (
         <View style={[styles.chevronContainer, { marginLeft: spacing.sm }]}>
-          <ChevronRight size={22} color={colors.textSecondary} strokeWidth={2.5} />
+          <Feather name="chevron-right" size={22} color={colors.textSecondary} />
         </View>
       )}
     </>

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -0,0 +1,95 @@
+/**
+ * Settings Stack Navigator
+ * 
+ * Base stack navigator for settings screens
+ * Can be extended by apps to add custom screens
+ */
+
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { SettingsScreen } from "../screens/SettingsScreen";
+import { AppearanceScreen } from "../screens/AppearanceScreen";
+import type { SettingsConfig } from "../screens/types";
+
+// Default param list - can be extended by apps
+export type SettingsStackParamList = {
+    Settings: { config?: SettingsConfig };
+    Appearance: undefined;
+    // About and Legal screens will be handled by external packages
+};
+
+export interface SettingsStackNavigatorProps {
+    /**
+     * Settings configuration
+     */
+    config?: SettingsConfig;
+
+    /**
+     * Additional screens to register
+     * Apps can add their own screens here
+     */
+    additionalScreens?: Array<{
+        name: string;
+        component: React.ComponentType<any>;
+        options?: any;
+    }>;
+}
+
+const Stack = createStackNavigator<SettingsStackParamList>();
+
+export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
+    config = {},
+    additionalScreens = [],
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const screenOptions = {
+        headerStyle: {
+            backgroundColor: tokens.colors.surface,
+            borderBottomColor: tokens.colors.borderLight,
+            borderBottomWidth: 1,
+        },
+        headerTitleStyle: {
+            fontSize: 18,
+            fontWeight: "600" as const,
+            color: tokens.colors.textPrimary,
+        },
+        headerTintColor: tokens.colors.textPrimary,
+    };
+
+    return (
+        <Stack.Navigator screenOptions={screenOptions}>
+            <Stack.Screen
+                name="Settings"
+                options={{
+                    headerShown: false,
+                    title: "Settings",
+                }}
+            >
+                {() => <SettingsScreen config={config} />}
+            </Stack.Screen>
+
+            <Stack.Screen
+                name="Appearance"
+                component={AppearanceScreen}
+                options={{
+                    headerShown: true,
+                    headerTitle: "Appearance",
+                    headerTitleAlign: "center",
+                    headerBackTitle: "Settings",
+                }}
+            />
+
+            {/* Render additional screens */}
+            {additionalScreens.map((screen) => (
+                <Stack.Screen
+                    key={screen.name}
+                    name={screen.name as any}
+                    component={screen.component}
+                    options={screen.options}
+                />
+            ))}
+        </Stack.Navigator>
+    );
+};

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

@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { Info, FileText } from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { NavigationProp } from "@react-navigation/native";
@@ -54,7 +54,7 @@ export const AboutLegalSection: React.FC<AboutLegalSectionProps> = ({
     <SettingsSection title={t("settings.sections.about")}>
       {showAbout && (
         <SettingItem
-          icon={Info}
+          icon={(props) => <Feather name={"info" as any} {...props} />}
           title={aboutTitle}
           value={aboutDescription}
           onPress={() => navigation.navigate(aboutRoute as string)}
@@ -62,7 +62,7 @@ export const AboutLegalSection: React.FC<AboutLegalSectionProps> = ({
       )}
       {showLegal && (
         <SettingItem
-          icon={FileText}
+          icon={(props) => <Feather name={"file-text" as any} {...props} />}
           title={legalTitle}
           value={legalDescription}
           onPress={() => navigation.navigate(legalRoute as string)}

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

@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { Palette } from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingItem } from "../../components/SettingItem";
@@ -28,7 +28,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
   return (
     <SettingsSection title={t("settings.sections.app.title")}>
       <SettingItem
-        icon={Palette}
+        icon={(props) => <Feather name={"droplet" as any} {...props} />}
         title={title}
         value={description}
         onPress={() => navigation.navigate(route as never)}

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

@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { Languages } from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { useLocalization, getLanguageByCode } from "@umituz/react-native-localization";
 import { SettingItem } from "../../components/SettingItem";
@@ -34,7 +34,7 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
   return (
     <SettingsSection title={t("settings.sections.app.title")}>
       <SettingItem
-        icon={Languages}
+        icon={(props) => <Feather name={"globe" as any} {...props} />}
         title={title}
         value={languageDisplay}
         onPress={() => navigation.navigate(route as never)}

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

@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useEffect, useCallback } from "react";
-import { Bell } from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingItem } from "../../components/SettingItem";
@@ -75,7 +75,7 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
     <SettingsSection title={t("settings.sections.general")}>
       {showToggle ? (
         <SettingItem
-          icon={Bell}
+          icon={(props) => <Feather name={"bell" as any} {...props} />}
           title={title}
           showSwitch={true}
           switchValue={notificationsEnabled}
@@ -84,7 +84,7 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
         />
       ) : (
         <SettingItem
-          icon={Bell}
+          icon={(props) => <Feather name={"bell" as any} {...props} />}
           title={title}
           value={description}
           onPress={handlePress}