@umituz/react-native-settings 3.0.1 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "3.0.1",
+  "version": "4.0.1",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -26,19 +26,21 @@
     "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-about": "*",
+    "@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-legal": "*",
+    "@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",
@@ -83,4 +85,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

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/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>
+    );
+};