@umituz/react-native-settings 4.1.3 → 4.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.1.3",
+  "version": "4.1.5",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -26,9 +26,10 @@
     "url": "https://github.com/umituz/react-native-settings"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
-    "@umituz/react-native-about": "*",
+    "@umituz/react-native-about": "^1.11.3",
     "@umituz/react-native-appearance": "*",
     "@umituz/react-native-design-system": "*",
     "@umituz/react-native-design-system-atoms": "*",
@@ -40,7 +41,6 @@
     "@umituz/react-native-legal": "*",
     "@umituz/react-native-localization": "*",
     "@umituz/react-native-storage": "*",
-    "@expo/vector-icons": ">=14.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": "~5.6.0",
@@ -49,14 +49,18 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.28.5",
+    "@expo/vector-icons": "^14.0.0",
     "@react-native/babel-preset": "^0.83.0",
+    "@react-navigation/stack": "^7.6.12",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^12.9.0",
     "@types/jest": "^29.5.14",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
-    "@umituz/react-native-appearance": "latest",
+    "@umituz/react-native-about": "^1.11.4",
+    "@umituz/react-native-alert": "latest",
+    "@umituz/react-native-appearance": "^2.0.2",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
     "@umituz/react-native-design-system-molecules": "latest",
@@ -64,12 +68,13 @@
     "@umituz/react-native-design-system-responsive": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system-typography": "latest",
+    "@umituz/react-native-legal": "^2.0.3",
     "@umituz/react-native-localization": "latest",
-    "@expo/vector-icons": "^14.0.0",
-    "@umituz/react-native-alert": "latest",
     "@umituz/react-native-notifications": "latest",
     "@umituz/react-native-storage": "latest",
     "babel-plugin-module-resolver": "^5.0.2",
+    "expo-constants": "^18.0.12",
+    "lucide-react-native": "^0.561.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "react": "^18.2.0",
     "react-native": "^0.74.0",
@@ -85,4 +90,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

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

@@ -11,10 +11,11 @@ import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { UserProfileHeader } from "../../components/UserProfileHeader";
 import { SettingsSection } from "../../components/SettingsSection";
-import { AppearanceSection } from "./AppearanceSection";
-import { LanguageSection } from "./LanguageSection";
-import { NotificationsSection } from "./NotificationsSection";
-import { AboutLegalSection } from "./AboutLegalSection";
+import { NotificationsSection } from "@umituz/react-native-notifications";
+import { AboutSection } from "@umituz/react-native-about";
+import { LegalSection } from "@umituz/react-native-legal";
+import { AppearanceSection } from "@umituz/react-native-appearance";
+import { LanguageSection } from "@umituz/react-native-localization";
 import type { NormalizedConfig } from "../utils/normalizeConfig";
 import type { CustomSettingsSection } from "../types";
 
@@ -60,7 +61,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
 
-  const hasAnyFeatures = useMemo(() => 
+  const hasAnyFeatures = useMemo(() =>
     features.appearance ||
     features.language ||
     features.notifications ||
@@ -113,13 +114,12 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         <NotificationsSection config={normalizedConfig.notifications.config} />
       )}
 
-      {(features.about || features.legal) && (
-        <AboutLegalSection
-          showAbout={features.about}
-          showLegal={features.legal}
-          aboutConfig={normalizedConfig.about.config}
-          legalConfig={normalizedConfig.legal.config}
-        />
+      {features.about && (
+        <AboutSection config={normalizedConfig.about.config} />
+      )}
+
+      {features.legal && (
+        <LegalSection config={normalizedConfig.legal.config} />
       )}
 
       {customSections && customSections.length > 0 && (

package/src/presentation/screens/components/index.ts

@@ -3,8 +3,8 @@
  * Barrel export for all section components
  */
 
-export { AppearanceSection } from "./AppearanceSection";
-export { LanguageSection } from "./LanguageSection";
-export { NotificationsSection } from "./NotificationsSection";
-export { AboutLegalSection } from "./AboutLegalSection";
+
+
+
+
 

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

@@ -1,75 +0,0 @@
-/**
- * About & Legal Section Component
- * Single Responsibility: Render about and legal settings section
- */
-
-import React from "react";
-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";
-import { SettingItem } from "../../components/SettingItem";
-import { SettingsSection } from "../../components/SettingsSection";
-import type { AboutConfig, LegalConfig } from "../types";
-
-interface AboutLegalSectionProps {
-  showAbout: boolean;
-  showLegal: boolean;
-  aboutConfig?: AboutConfig;
-  legalConfig?: LegalConfig;
-}
-
-type RootStackParamList = {
-  About: undefined;
-  Legal: undefined;
-  [key: string]: undefined;
-};
-
-type NavigationType = NavigationProp<RootStackParamList>;
-
-export const AboutLegalSection: React.FC<AboutLegalSectionProps> = ({
-  showAbout,
-  showLegal,
-  aboutConfig,
-  legalConfig,
-}) => {
-  const navigation = useNavigation<NavigationType>();
-  const { t } = useLocalization();
-
-  if (!showAbout && !showLegal) {
-    return null;
-  }
-
-  const aboutRoute = aboutConfig?.route || aboutConfig?.defaultRoute || "About";
-  const aboutTitle = aboutConfig?.title || t("settings.about.title");
-  const aboutDescription =
-    aboutConfig?.description || t("settings.about.description");
-
-  const legalRoute = legalConfig?.route || legalConfig?.defaultRoute || "Legal";
-  const legalTitle = legalConfig?.title || t("settings.legal.title");
-  const legalDescription =
-    legalConfig?.description || t("settings.legal.description");
-
-  return (
-    <SettingsSection title={t("settings.sections.about")}>
-      {showAbout && (
-        <SettingItem
-          icon={(props) => <Feather name={"info" as any} {...props} />}
-          title={aboutTitle}
-          value={aboutDescription}
-          onPress={() => navigation.navigate(aboutRoute as string)}
-        />
-      )}
-      {showLegal && (
-        <SettingItem
-          icon={(props) => <Feather name={"file-text" as any} {...props} />}
-          title={legalTitle}
-          value={legalDescription}
-          onPress={() => navigation.navigate(legalRoute as string)}
-          isLast={true}
-        />
-      )}
-    </SettingsSection>
-  );
-};
-

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

@@ -1,39 +0,0 @@
-/**
- * Appearance Section Component
- * Single Responsibility: Render appearance settings section (theme customization)
- */
-
-import React from "react";
-import { Feather } from "@expo/vector-icons";
-import { useNavigation } from "@react-navigation/native";
-import { useLocalization } from "@umituz/react-native-localization";
-import { SettingItem } from "../../components/SettingItem";
-import { SettingsSection } from "../../components/SettingsSection";
-import type { AppearanceConfig } from "../types";
-
-interface AppearanceSectionProps {
-  config?: AppearanceConfig;
-}
-
-export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
-  config,
-}) => {
-  const navigation = useNavigation();
-  const { t } = useLocalization();
-
-  const route = config?.route || config?.defaultRoute || "Appearance";
-  const title = config?.title || t("settings.appearance.title");
-  const description = config?.description || t("settings.appearance.description");
-
-  return (
-    <SettingsSection title={t("settings.sections.app.title")}>
-      <SettingItem
-        icon={(props) => <Feather name={"droplet" as any} {...props} />}
-        title={title}
-        value={description}
-        onPress={() => navigation.navigate(route as never)}
-      />
-    </SettingsSection>
-  );
-};
-

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

@@ -1,44 +0,0 @@
-/**
- * Language Section Component
- * Single Responsibility: Render language settings section
- */
-
-import React from "react";
-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";
-import { SettingsSection } from "../../components/SettingsSection";
-import type { LanguageConfig } from "../types";
-
-interface LanguageSectionProps {
-  config?: LanguageConfig;
-}
-
-export const LanguageSection: React.FC<LanguageSectionProps> = ({
-  config,
-}) => {
-  const navigation = useNavigation();
-  const { t, currentLanguage } = useLocalization();
-
-  const route = config?.route || "LanguageSelection";
-  const title = config?.title || t("settings.language");
-  const description = config?.description || "";
-
-  const currentLang = getLanguageByCode(currentLanguage);
-  const defaultLanguageDisplay = config?.defaultLanguageDisplay || "English";
-  const languageDisplay = currentLang
-    ? `${currentLang.flag} ${currentLang.nativeName}`
-    : defaultLanguageDisplay;
-
-  return (
-    <SettingsSection title={t("settings.sections.app.title")}>
-      <SettingItem
-        icon={(props) => <Feather name={"globe" as any} {...props} />}
-        title={title}
-        value={languageDisplay}
-        onPress={() => navigation.navigate(route as never)}
-      />
-    </SettingsSection>
-  );
-};

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

@@ -1,97 +0,0 @@
-/**
- * Notifications Section Component
- * Single Responsibility: Render notifications settings section
- */
-
-import React, { useState, useEffect, useCallback } from "react";
-import { Feather } from "@expo/vector-icons";
-import { useNavigation } from "@react-navigation/native";
-import { useLocalization } from "@umituz/react-native-localization";
-import { SettingItem } from "../../components/SettingItem";
-import { SettingsSection } from "../../components/SettingsSection";
-import type { NotificationsConfig } from "../types";
-
-// Optional notification service
-let notificationService: {
-  hasPermissions?: () => Promise<boolean>;
-  requestPermissions?: () => Promise<void>;
-} | null = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const module = require("@umituz/react-native-notifications");
-  if (module?.notificationService && typeof module.notificationService === 'object') {
-    notificationService = module.notificationService;
-  }
-} catch {
-  // Package not available
-}
-
-interface NotificationsSectionProps {
-  config?: NotificationsConfig;
-}
-
-export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
-  config,
-}) => {
-  const navigation = useNavigation<any>();
-  const { t } = useLocalization();
-  const [notificationsEnabled, setNotificationsEnabled] = useState(
-    config?.initialValue ?? true,
-  );
-
-  useEffect(() => {
-    if (config?.initialValue !== undefined) {
-      setNotificationsEnabled(config.initialValue);
-    }
-  }, [config?.initialValue]);
-
-  const handleToggle = useCallback(async (value: boolean) => {
-    if (notificationService && !value) {
-      const hasPermissions = await notificationService.hasPermissions?.();
-      if (!hasPermissions) {
-        await notificationService.requestPermissions?.();
-      }
-    }
-
-    setNotificationsEnabled(value);
-    config?.onToggleChange?.(value);
-  }, [config?.onToggleChange]);
-
-  const handlePress = useCallback(async () => {
-    if (notificationService) {
-      const hasPermissions = await notificationService.hasPermissions?.();
-      if (!hasPermissions) {
-        await notificationService.requestPermissions?.();
-      }
-    }
-    navigation.navigate(config?.route || config?.defaultRoute || "Notifications" as any);
-  }, [navigation, config?.route, config?.defaultRoute]);
-
-  const title = config?.title || t("settings.notifications.title");
-  const description = config?.description || t("settings.notifications.description");
-  const showToggle = config?.showToggle ?? true;
-
-  return (
-    <SettingsSection title={t("settings.sections.general")}>
-      {showToggle ? (
-        <SettingItem
-          icon={(props) => <Feather name={"bell" as any} {...props} />}
-          title={title}
-          showSwitch={true}
-          switchValue={notificationsEnabled}
-          onSwitchChange={handleToggle}
-          isLast={true}
-        />
-      ) : (
-        <SettingItem
-          icon={(props) => <Feather name={"bell" as any} {...props} />}
-          title={title}
-          value={description}
-          onPress={handlePress}
-          isLast={true}
-        />
-      )}
-    </SettingsSection>
-  );
-};
-