@umituz/react-native-settings 1.11.4 → 2.4.0

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

@@ -0,0 +1,79 @@
+/**
+ * Settings Header Component
+ * Handles close button functionality
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useNavigation } from "@react-navigation/native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+
+interface SettingsHeaderProps {
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
+  showCloseButton = false,
+  onClose,
+}) => {
+  const navigation = useNavigation();
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  if (!showCloseButton) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.closeButtonContainer,
+        {
+          paddingTop: insets.top + tokens.spacing.xs,
+          paddingRight: tokens.spacing.md,
+        },
+      ]}
+    >
+      <TouchableOpacity
+        onPress={handleClose}
+        style={[
+          styles.closeButton,
+          {
+            backgroundColor: tokens.colors.surface,
+          },
+        ]}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+      >
+        <AtomicIcon name="X" size="lg" color="primary" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  closeButtonContainer: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 10,
+    alignItems: "flex-end",
+  },
+  closeButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/src/presentation/screens/hooks/__tests__/useFeatureDetection.test.tsx

@@ -0,0 +1,261 @@
+/**
+ * Tests for useFeatureDetection Hook
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import { useFeatureDetection } from '../useFeatureDetection';
+import type { NormalizedConfig } from '../../utils/normalizeConfig';
+
+// Mock navigation
+const mockNavigation = {
+  getState: jest.fn(() => ({
+    routes: [
+      { name: 'Settings' },
+      { name: 'Appearance' },
+      { name: 'Notifications' },
+    ],
+  })),
+};
+
+describe('useFeatureDetection', () => {
+  const mockConfig: NormalizedConfig = {
+    appearance: { enabled: true, config: { enabled: true } },
+    language: { enabled: true, config: { enabled: true } },
+    notifications: { enabled: true, config: { enabled: true } },
+    about: { enabled: true, config: { enabled: true } },
+    legal: { enabled: true, config: { enabled: true } },
+    account: { enabled: true, config: { enabled: true } },
+    support: { enabled: true, config: { enabled: true } },
+    developer: { enabled: true, config: { enabled: true } },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('detects all features when enabled', () => {
+    const { result } = renderHook(() =>
+      useFeatureDetection(mockConfig, mockNavigation)
+    );
+
+    expect(result.current.appearance).toBe(true);
+    expect(result.current.language).toBe(true);
+    expect(result.current.notifications).toBe(true);
+    expect(result.current.about).toBe(true);
+    expect(result.current.legal).toBe(true);
+    expect(result.current.account).toBe(true);
+    expect(result.current.support).toBe(true);
+    expect(result.current.developer).toBe(true);
+  });
+
+  it('disables features when config disabled', () => {
+    const disabledConfig: NormalizedConfig = {
+      ...mockConfig,
+      appearance: { enabled: false, config: { enabled: true } },
+      notifications: { enabled: false, config: { enabled: true } },
+    };
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(disabledConfig, mockNavigation)
+    );
+
+    expect(result.current.appearance).toBe(false);
+    expect(result.current.language).toBe(true);
+    expect(result.current.notifications).toBe(false);
+    expect(result.current.about).toBe(true);
+  });
+
+  it('checks navigation screen availability', () => {
+    const configWithRoutes: NormalizedConfig = {
+      ...mockConfig,
+      appearance: { enabled: true, config: { enabled: false, route: 'Appearance' } },
+      language: { enabled: true, config: { enabled: false, route: 'NonExistent' } },
+    };
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(configWithRoutes, mockNavigation)
+    );
+
+    expect(result.current.appearance).toBe(true); // Route exists
+    expect(result.current.language).toBe(false); // Route doesn't exist
+  });
+
+  it('handles notification service availability', () => {
+    const { result } = renderHook(() =>
+      useFeatureDetection(mockConfig, mockNavigation, {
+        notificationServiceAvailable: false,
+      })
+    );
+
+    expect(result.current.notifications).toBe(false);
+    expect(result.current.appearance).toBe(true);
+  });
+
+  it('disables developer features in production', () => {
+    const originalDev = __DEV__;
+    (global as any).__DEV__ = false;
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(mockConfig, mockNavigation)
+    );
+
+    expect(result.current.developer).toBe(false);
+    expect(result.current.appearance).toBe(true);
+
+    (global as any).__DEV__ = originalDev;
+  });
+
+  it('enables developer features in development', () => {
+    const originalDev = __DEV__;
+    (global as any).__DEV__ = true;
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(mockConfig, mockNavigation)
+    );
+
+    expect(result.current.developer).toBe(true);
+
+    (global as any).__DEV__ = originalDev;
+  });
+
+  it('handles complex navigation state', () => {
+    const complexNavigation = {
+      getState: jest.fn(() => ({
+        routes: [
+          {
+            name: 'TabNavigator',
+            state: {
+              routes: [
+                {
+                  name: 'SettingsStack',
+                  state: {
+                    routes: [
+                      { name: 'Settings' },
+                      { name: 'Appearance' },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      })),
+    };
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(mockConfig, complexNavigation)
+    );
+
+    expect(result.current.appearance).toBe(true);
+  });
+
+  it('handles navigation errors gracefully', () => {
+    const errorNavigation = {
+      getState: jest.fn(() => {
+        throw new Error('Navigation error');
+      }),
+    };
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(mockConfig, errorNavigation)
+    );
+
+    expect(result.current.appearance).toBe(false);
+    expect(result.current.language).toBe(false);
+  });
+
+  it('handles missing navigation state', () => {
+    const emptyNavigation = {
+      getState: jest.fn(() => null),
+    };
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(mockConfig, emptyNavigation)
+    );
+
+    expect(result.current.appearance).toBe(false);
+    expect(result.current.language).toBe(false);
+  });
+
+  it('handles malformed navigation routes', () => {
+    const malformedNavigation = {
+      getState: jest.fn(() => ({
+        routes: null,
+      })),
+    };
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(mockConfig, malformedNavigation)
+    );
+
+    expect(result.current.appearance).toBe(false);
+  });
+
+  it('memoizes results correctly', () => {
+    const { result, rerender } = renderHook(() =>
+      useFeatureDetection(mockConfig, mockNavigation)
+    );
+
+    const firstResult = result.current;
+
+    rerender();
+
+    expect(result.current).toBe(firstResult);
+  });
+
+  it('updates when config changes', () => {
+    const { result, rerender } = renderHook(
+      ({ config }) => useFeatureDetection(config, mockNavigation),
+      {
+        initialProps: { config: mockConfig },
+      }
+    );
+
+    expect(result.current.appearance).toBe(true);
+
+    const newConfig = {
+      ...mockConfig,
+      appearance: { enabled: false, config: { enabled: true } },
+    };
+
+    rerender({ config: newConfig });
+
+    expect(result.current.appearance).toBe(false);
+  });
+
+  it('updates when navigation changes', () => {
+    const { result, rerender } = renderHook(
+      ({ navigation }) => useFeatureDetection(mockConfig, navigation),
+      {
+        initialProps: { navigation: mockNavigation },
+      }
+    );
+
+    expect(result.current.appearance).toBe(true);
+
+    const newNavigation = {
+      getState: jest.fn(() => ({
+        routes: [{ name: 'Settings' }], // No Appearance route
+      })),
+    };
+
+    rerender({ navigation: newNavigation });
+
+    expect(result.current.appearance).toBe(false);
+  });
+
+  it('handles default route names', () => {
+    const configWithoutRoutes: NormalizedConfig = {
+      ...mockConfig,
+      appearance: { enabled: true, config: { enabled: false } }, // No route specified
+      language: { enabled: true, config: { enabled: false } },
+    };
+
+    const { result } = renderHook(() =>
+      useFeatureDetection(configWithoutRoutes, mockNavigation)
+    );
+
+    expect(result.current.appearance).toBe(true); // Should check default "Appearance" route
+    expect(result.current.language).toBe(true); // Should check default "LanguageSelection" route
+  });
+});

package/src/presentation/screens/hooks/useFeatureDetection.ts

@@ -7,11 +7,16 @@ import { useMemo } from "react";
 import type { NormalizedConfig } from "../utils/normalizeConfig";
 
 // Optional notification service
-let notificationService: any = null;
+let notificationService: {
+  hasPermissions?: () => Promise<boolean>;
+  requestPermissions?: () => Promise<void>;
+} | null = null;
 try {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  notificationService = require("@umituz/react-native-notifications")
-    .notificationService;
+  const module = require("@umituz/react-native-notifications");
+  if (module?.notificationService && typeof module.notificationService === 'object') {
+    notificationService = module.notificationService;
+  }
 } catch {
   // Package not available
 }
@@ -51,10 +56,15 @@ function hasNavigationScreen(
 export function useFeatureDetection(
   normalizedConfig: NormalizedConfig,
   navigation: any,
+  options?: {
+    notificationServiceAvailable?: boolean;
+  },
 ) {
   return useMemo(() => {
     const { appearance, language, notifications, about, legal, account, support, developer } =
       normalizedConfig;
+    
+    const notificationServiceAvailable = options?.notificationServiceAvailable ?? notificationService !== null;
 
     return {
       appearance:
@@ -77,7 +87,7 @@ export function useFeatureDetection(
         notifications.enabled &&
         (notifications.config?.enabled === true ||
           (notifications.config?.enabled !== false &&
-            notificationService !== null &&
+            notificationServiceAvailable &&
             hasNavigationScreen(
               navigation,
               notifications.config?.route || "Notifications",
@@ -103,6 +113,6 @@ export function useFeatureDetection(
       support: support.enabled,
       developer: developer.enabled && __DEV__,
     };
-  }, [normalizedConfig, navigation]);
+  }, [normalizedConfig, navigation, options]);
 }
 

package/src/presentation/screens/types/CustomSection.ts

@@ -0,0 +1,20 @@
+/**
+ * Custom Settings Section Type
+ * Allows apps to add custom sections to the settings screen
+ */
+
+import type { ReactNode } from "react";
+
+/**
+ * Custom Settings Section
+ */
+export interface CustomSettingsSection {
+  /** Section title */
+  title: string;
+  /** Section content (React nodes) */
+  content: ReactNode;
+  /** Section order (lower = higher in list) */
+  order?: number;
+  /** Section ID for identification */
+  id?: string;
+}

package/src/presentation/screens/types/ExtendedConfig.ts

@@ -0,0 +1,68 @@
+/**
+ * Extended Configuration Types
+ * Account, Support, and Developer configurations
+ */
+
+import type { ComponentType } from "react";
+import type { FeatureVisibility } from "./FeatureConfig";
+
+/**
+ * Account Settings Configuration
+ */
+export interface AccountConfig {
+  /** Show account section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for account screen */
+  route?: string;
+  /** Custom account title */
+  title?: string;
+  /** Custom account description */
+  description?: string;
+}
+
+/**
+ * Support Settings Configuration
+ */
+export interface SupportConfig {
+  /** Show support section */
+  enabled?: FeatureVisibility;
+  /** Support items configuration */
+  items?: {
+    /** Live support configuration */
+    liveSupport?: {
+      enabled?: boolean;
+      route?: string;
+      title?: string;
+      description?: string;
+    };
+    /** Help support configuration */
+    helpSupport?: {
+      enabled?: boolean;
+      route?: string;
+      title?: string;
+      description?: string;
+    };
+  };
+  /** Custom support section title */
+  title?: string;
+}
+
+/**
+ * Developer Settings Configuration
+ */
+export interface DeveloperConfig {
+  /** Show developer section (only in __DEV__ mode) */
+  enabled?: boolean;
+  /** Developer settings items */
+  items?: Array<{
+    title: string;
+    description?: string;
+    route?: string;
+    onPress?: () => void;
+    icon?: ComponentType<{ size?: number; color?: string }>;
+    iconColor?: string;
+    titleColor?: string;
+  }>;
+  /** Custom developer section title */
+  title?: string;
+}

package/src/presentation/screens/types/FeatureConfig.ts

@@ -0,0 +1,102 @@
+/**
+ * Feature Configuration Types
+ * Core types for feature visibility and configuration
+ */
+
+import type { ComponentType, ReactNode } from "react";
+
+/**
+ * Feature visibility configuration
+ * - true: Always show (if navigation screen exists)
+ * - false: Never show
+ * - 'auto': Automatically detect (check if navigation screen exists and package is available)
+ */
+export type FeatureVisibility = boolean | "auto";
+
+/**
+ * Appearance Settings Configuration
+ */
+export interface AppearanceConfig {
+  /** Show appearance section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for appearance screen */
+  route?: string;
+  /** Show theme toggle */
+  showTheme?: boolean;
+  /** Custom appearance title */
+  title?: string;
+  /** Custom appearance description */
+  description?: string;
+  /** Default route name when no custom route provided */
+  defaultRoute?: string;
+}
+
+/**
+ * Language Settings Configuration
+ */
+export interface LanguageConfig {
+  /** Show language section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for language selection screen */
+  route?: string;
+  /** Custom language title */
+  title?: string;
+  /** Custom language description */
+  description?: string;
+  /** Default language display when no language is detected */
+  defaultLanguageDisplay?: string;
+}
+
+/**
+ * Notifications Settings Configuration
+ */
+export interface NotificationsConfig {
+  /** Show notifications section */
+  enabled?: FeatureVisibility;
+  /** Show notification toggle switch */
+  showToggle?: boolean;
+  /** Initial toggle value */
+  initialValue?: boolean;
+  /** Toggle change handler */
+  onToggleChange?: (value: boolean) => void;
+  /** Custom navigation route for notifications screen */
+  route?: string;
+  /** Custom notifications title */
+  title?: string;
+  /** Custom notifications description */
+  description?: string;
+  /** Default route name when no custom route provided */
+  defaultRoute?: string;
+}
+
+/**
+ * About Settings Configuration
+ */
+export interface AboutConfig {
+  /** Show about section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for about screen */
+  route?: string;
+  /** Custom about title */
+  title?: string;
+  /** Custom about description */
+  description?: string;
+  /** Default route name when no custom route provided */
+  defaultRoute?: string;
+}
+
+/**
+ * Legal Settings Configuration
+ */
+export interface LegalConfig {
+  /** Show legal section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for legal screen */
+  route?: string;
+  /** Custom legal title */
+  title?: string;
+  /** Custom legal description */
+  description?: string;
+  /** Default route name when no custom route provided */
+  defaultRoute?: string;
+}

package/src/presentation/screens/types/SettingsConfig.ts

@@ -0,0 +1,116 @@
+/**
+ * Main Settings Configuration Type
+ * Combines all feature configurations
+ */
+
+import type { FeatureVisibility } from "./FeatureConfig";
+import type {
+  AppearanceConfig,
+  LanguageConfig,
+  NotificationsConfig,
+  AboutConfig,
+  LegalConfig,
+} from "./FeatureConfig";
+import type {
+  AccountConfig,
+  SupportConfig,
+  DeveloperConfig,
+} from "./ExtendedConfig";
+
+/**
+ * Main Settings Configuration
+ * 
+ * Controls which settings features are visible in the SettingsScreen.
+ * Each feature can be configured with:
+ * - Simple: boolean | 'auto' (quick setup)
+ * - Advanced: Detailed config object (full control)
+ * 
+ * @example
+ * // Simple configuration
+ * const config: SettingsConfig = {
+ *   appearance: true,
+ *   notifications: 'auto',
+ *   about: false,
+ * };
+ * 
+ * @example
+ * // Advanced configuration
+ * const config: SettingsConfig = {
+ *   appearance: {
+ *     enabled: true,
+ *     route: 'CustomAppearance',
+ *     showLanguage: true,
+ *     showTheme: true,
+ *   },
+ *   notifications: {
+ *     enabled: 'auto',
+ *     showToggle: true,
+ *     initialValue: false,
+ *     onToggleChange: (value) => console.log(value),
+ *   },
+ *   support: {
+ *     enabled: true,
+ *     items: {
+ *       liveSupport: {
+ *         enabled: true,
+ *         route: 'ChatSupport',
+ *         title: 'Live Chat',
+ *       },
+ *     },
+ *   },
+ * };
+ */
+export interface SettingsConfig {
+  /**
+   * Appearance settings (Theme customization)
+   * @default 'auto'
+   */
+  appearance?: FeatureVisibility | AppearanceConfig;
+
+  /**
+   * Language settings
+   * @default 'auto'
+   */
+  language?: FeatureVisibility | LanguageConfig;
+
+  /**
+   * Notifications settings
+   * @default 'auto'
+   */
+  notifications?: FeatureVisibility | NotificationsConfig;
+
+  /**
+   * About settings
+   * @default 'auto'
+   */
+  about?: FeatureVisibility | AboutConfig;
+
+  /**
+   * Legal settings (Terms, Privacy Policy)
+   * @default 'auto'
+   */
+  legal?: FeatureVisibility | LegalConfig;
+
+  /**
+   * Account settings
+   * @default false
+   */
+  account?: FeatureVisibility | AccountConfig;
+
+  /**
+   * Support settings
+   * @default false
+   */
+  support?: FeatureVisibility | SupportConfig;
+
+  /**
+   * Developer settings (only shown in __DEV__ mode)
+   * @default false
+   */
+  developer?: boolean | DeveloperConfig;
+
+  /**
+   * Custom empty state text when no settings are available
+   */
+  emptyStateText?: string;
+}