@umituz/react-native-settings 4.20.25 → 4.20.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.25",
+  "version": "4.20.27",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -36,8 +36,6 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@react-native-firebase/app": "^23.7.0",
-    "@react-native-firebase/firestore": "^23.7.0",
     "@umituz/react-native-auth": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-localization": "latest",

package/src/index.ts

@@ -53,8 +53,13 @@ export { AppearanceScreen } from './presentation/screens/AppearanceScreen';
 export { SettingsStackNavigator } from './presentation/navigation/SettingsStackNavigator';
 export type {
   SettingsStackNavigatorProps,
-  SettingsStackParamList
-} from './presentation/navigation/SettingsStackNavigator';
+  SettingsStackParamList,
+  AppInfo,
+  LegalUrls,
+  UserProfileConfig,
+  AdditionalScreen,
+  FAQData,
+} from './presentation/navigation/types';
 
 // =============================================================================
 // PRESENTATION LAYER - Types

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -1,152 +1,166 @@
 /**
  * Settings Stack Navigator
- * 
- * Base stack navigator for settings screens
- * Can be extended by apps to add custom screens
+ *
+ * Complete settings navigation with all screens.
+ * Receives appInfo and legalUrls from app.
  */
 
 import React, { useMemo } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsScreen } from "../screens/SettingsScreen";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
-import type { SettingsConfig, CustomSettingsSection, AppearanceConfig } from "../screens/types";
-import type { DevSettingsProps } from "../components/DevSettingsSection";
-import type { AppearanceTexts } from "../../domains/appearance/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;
-
-    /**
-     * App version number from app config (e.g., "1.0.0")
-     */
-    appVersion?: string;
-
-    /**
-     * Show user profile header
-     */
-    showUserProfile?: boolean;
-
-    /**
-     * User profile props for anonymous/authenticated users
-     */
-    userProfile?: {
-        displayName?: string;
-        userId?: string;
-        isAnonymous?: boolean;
-        avatarUrl?: string;
-        accountSettingsRoute?: string;
-        onPress?: () => void;
-        anonymousDisplayName?: string;
-        avatarServiceUrl?: string;
-    };
-
-    /**
-     * Additional screens to register
-     * Apps can add their own screens here
-     */
-    additionalScreens?: Array<{
-        name: string;
-        component: React.ComponentType<any>;
-        options?: any;
-    }>;
-
-    /**
-     * Dev settings (only shown in __DEV__ mode)
-     */
-    devSettings?: DevSettingsProps;
-
-    /**
-     * Custom sections to render in settings list
-     * Use this to add app-specific items like subscription
-     */
-    customSections?: CustomSettingsSection[];
-}
+import { LegalScreen } from "../../domains/legal";
+import { AboutScreen } from "../../domains/about";
+import { FAQScreen } from "../../domains/faqs";
+import { useNavigationHandlers } from "./hooks";
+import type { SettingsStackParamList, SettingsStackNavigatorProps } from "./types";
 
 const Stack = createStackNavigator<SettingsStackParamList>();
 
 export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
-    config = {},
-    appVersion,
-    showUserProfile = false,
-    userProfile,
-    additionalScreens = [],
-    devSettings,
-    customSections = [],
+  appInfo,
+  legalUrls,
+  faqData,
+  config = {},
+  showUserProfile = false,
+  userProfile,
+  additionalScreens = [],
+  devSettings,
+  customSections = [],
 }) => {
-    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,
-    };
-
-    // Memoize SettingsScreen wrapper to prevent remounting on every render
-    const SettingsScreenWrapper = React.useMemo(() => {
-        const Wrapper = () => (
-            <SettingsScreen
-                config={config}
-                appVersion={appVersion}
-                showUserProfile={showUserProfile}
-                userProfile={userProfile}
-                devSettings={devSettings}
-                customSections={customSections}
-            />
-        );
-        Wrapper.displayName = "SettingsScreenWrapper";
-        return Wrapper;
-    }, [config, appVersion, showUserProfile, userProfile, devSettings, customSections]);
-
-    return (
-        <Stack.Navigator screenOptions={screenOptions}>
-            <Stack.Screen
-                name="Settings"
-                component={SettingsScreenWrapper}
-                options={{
-                    headerShown: false,
-                    title: "Settings",
-                }}
-            />
-
-            <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>
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+  const { handlePrivacyPress, handleTermsPress, handleEulaPress, aboutConfig } =
+    useNavigationHandlers(appInfo, legalUrls);
+
+  const screenOptions = useMemo(
+    () => ({
+      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,
+    }),
+    [tokens]
+  );
+
+  const SettingsScreenWrapper = useMemo(() => {
+    const Wrapper = () => (
+      <SettingsScreen
+        config={config}
+        appVersion={appInfo.version}
+        showUserProfile={showUserProfile}
+        userProfile={userProfile}
+        devSettings={devSettings}
+        customSections={customSections}
+      />
     );
+    Wrapper.displayName = "SettingsScreenWrapper";
+    return Wrapper;
+  }, [config, appInfo.version, showUserProfile, userProfile, devSettings, customSections]);
+
+  const LegalScreenWrapper = useMemo(() => {
+    const Wrapper = () => (
+      <LegalScreen
+        title={t("settings.legal.title")}
+        description={t("settings.legal.description")}
+        documentsHeader={t("settings.legal.documentsHeader")}
+        privacyTitle={t("settings.legal.privacyTitle")}
+        privacyDescription={t("settings.legal.privacyDescription")}
+        termsTitle={t("settings.legal.termsTitle")}
+        termsDescription={t("settings.legal.termsDescription")}
+        eulaTitle={t("settings.legal.eulaTitle")}
+        eulaDescription={t("settings.legal.eulaDescription")}
+        onPrivacyPress={handlePrivacyPress}
+        onTermsPress={handleTermsPress}
+        onEulaPress={handleEulaPress}
+      />
+    );
+    Wrapper.displayName = "LegalScreenWrapper";
+    return Wrapper;
+  }, [t, handlePrivacyPress, handleTermsPress, handleEulaPress]);
+
+  const AboutScreenWrapper = useMemo(() => {
+    const Wrapper = () => <AboutScreen config={aboutConfig} />;
+    Wrapper.displayName = "AboutScreenWrapper";
+    return Wrapper;
+  }, [aboutConfig]);
+
+  return (
+    <Stack.Navigator screenOptions={screenOptions}>
+      <Stack.Screen
+        name="Settings"
+        component={SettingsScreenWrapper}
+        options={{ headerShown: false }}
+      />
+
+      <Stack.Screen
+        name="Appearance"
+        component={AppearanceScreen}
+        options={{
+          headerShown: true,
+          headerTitle: t("settings.appearance.title"),
+          headerTitleAlign: "center",
+        }}
+      />
+
+      <Stack.Screen
+        name="About"
+        component={AboutScreenWrapper}
+        options={{
+          headerShown: true,
+          headerTitle: t("settings.about.title"),
+          headerTitleAlign: "center",
+        }}
+      />
+
+      <Stack.Screen
+        name="Legal"
+        component={LegalScreenWrapper}
+        options={{
+          headerShown: true,
+          headerTitle: t("settings.legal.title"),
+          headerTitleAlign: "center",
+        }}
+      />
+
+      {faqData && faqData.categories.length > 0 && (
+        <Stack.Screen
+          name="FAQ"
+          options={{
+            headerShown: true,
+            headerTitle: t("settings.faqs.title"),
+            headerTitleAlign: "center",
+          }}
+        >
+          {() => (
+            <FAQScreen
+              categories={faqData.categories}
+              searchPlaceholder={t("settings.faqs.searchPlaceholder")}
+              emptySearchTitle={t("settings.faqs.emptySearchTitle")}
+              emptySearchMessage={t("settings.faqs.emptySearchMessage")}
+              headerTitle={t("settings.faqs.headerTitle")}
+            />
+          )}
+        </Stack.Screen>
+      )}
+
+      {additionalScreens.map((screen) => (
+        <Stack.Screen
+          key={screen.name}
+          name={screen.name as keyof SettingsStackParamList}
+          component={screen.component}
+          options={screen.options}
+        />
+      ))}
+    </Stack.Navigator>
+  );
 };

package/src/presentation/navigation/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Navigation Hooks
+ */
+
+export { useNavigationHandlers } from "./useNavigationHandlers";

package/src/presentation/navigation/hooks/useNavigationHandlers.ts

@@ -0,0 +1,58 @@
+/**
+ * Navigation Handlers Hook
+ * Provides URL handlers and config generation for settings screens
+ */
+
+import { useCallback, useMemo } from "react";
+import { Linking } from "react-native";
+import type { AppInfo, LegalUrls } from "../types";
+import type { AboutConfig } from "../../../domains/about";
+
+interface NavigationHandlersResult {
+  handlePrivacyPress: () => void;
+  handleTermsPress: () => void;
+  handleEulaPress: () => void;
+  aboutConfig: AboutConfig;
+}
+
+export const useNavigationHandlers = (
+  appInfo: AppInfo,
+  legalUrls: LegalUrls
+): NavigationHandlersResult => {
+  const handlePrivacyPress = useCallback(() => {
+    Linking.openURL(legalUrls.privacy);
+  }, [legalUrls.privacy]);
+
+  const handleTermsPress = useCallback(() => {
+    Linking.openURL(legalUrls.terms);
+  }, [legalUrls.terms]);
+
+  const handleEulaPress = useCallback(() => {
+    if (legalUrls.eula) {
+      Linking.openURL(legalUrls.eula);
+    }
+  }, [legalUrls.eula]);
+
+  const aboutConfig: AboutConfig = useMemo(
+    () => ({
+      appInfo: {
+        name: appInfo.name,
+        version: appInfo.version,
+        description: appInfo.description,
+        developer: appInfo.developer,
+        contactEmail: appInfo.contactEmail,
+        websiteUrl: appInfo.websiteUrl,
+        websiteDisplay: appInfo.websiteDisplay,
+        moreAppsUrl: appInfo.moreAppsUrl,
+      },
+    }),
+    [appInfo]
+  );
+
+  return {
+    handlePrivacyPress,
+    handleTermsPress,
+    handleEulaPress,
+    aboutConfig,
+  };
+};

package/src/presentation/navigation/types.ts

@@ -0,0 +1,88 @@
+/**
+ * Settings Navigation Types
+ */
+
+import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
+import type { DevSettingsProps } from "../components/DevSettingsSection";
+import type { FAQCategory } from "../../domains/faqs";
+
+/**
+ * App Info passed from main app (APP_INFO constant)
+ */
+export interface AppInfo {
+  name: string;
+  version: string;
+  description?: string;
+  developer?: string;
+  contactEmail?: string;
+  websiteUrl?: string;
+  websiteDisplay?: string;
+  moreAppsUrl?: string;
+  appStoreId?: string;
+  appStoreUrl?: string;
+}
+
+/**
+ * Legal URLs passed from main app (LEGAL_URLS constant)
+ */
+export interface LegalUrls {
+  privacy: string;
+  terms: string;
+  eula?: string;
+}
+
+/**
+ * Navigation param list
+ */
+export type SettingsStackParamList = {
+  Settings: undefined;
+  Appearance: undefined;
+  About: undefined;
+  Legal: undefined;
+  FAQ: undefined;
+};
+
+/**
+ * User profile configuration
+ */
+export interface UserProfileConfig {
+  displayName?: string;
+  userId?: string;
+  isAnonymous?: boolean;
+  avatarUrl?: string;
+  accountSettingsRoute?: string;
+  onPress?: () => void;
+  anonymousDisplayName?: string;
+  avatarServiceUrl?: string;
+}
+
+/**
+ * Additional screen configuration
+ */
+export interface AdditionalScreen {
+  name: string;
+  component: React.ComponentType<any>;
+  options?: Record<string, any>;
+}
+
+/**
+ * FAQ Data passed from main app
+ */
+export interface FAQData {
+  categories: FAQCategory[];
+}
+
+/**
+ * Settings Stack Navigator Props
+ */
+export interface SettingsStackNavigatorProps {
+  appInfo: AppInfo;
+  legalUrls: LegalUrls;
+  faqData?: FAQData;
+  config?: SettingsConfig;
+  showUserProfile?: boolean;
+  userProfile?: UserProfileConfig;
+  additionalScreens?: AdditionalScreen[];
+  devSettings?: DevSettingsProps;
+  customSections?: CustomSettingsSection[];
+}