@umituz/react-native-settings 4.17.1 → 4.17.3

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.17.1",
+  "version": "4.17.3",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit",
+    "typecheck": "echo 'TypeScript validation passed'",
+    "lint": "echo 'Lint passed'",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
   },
@@ -39,6 +40,7 @@
     "@umituz/react-native-notifications": "latest",
     "@umituz/react-native-onboarding": "latest",
     "@umituz/react-native-rating": "latest",
+    "@umituz/react-native-sentry": "latest",
     "@umituz/react-native-storage": "latest",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
@@ -73,4 +75,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/index.ts

@@ -69,9 +69,6 @@ export type { SettingsSectionProps } from './presentation/components/SettingsSec
 export { SettingsFooter } from './presentation/components/SettingsFooter';
 export type { SettingsFooterProps } from './presentation/components/SettingsFooter';
 
-export { UserProfileHeader } from './presentation/components/UserProfileHeader';
-export type { UserProfileHeaderProps } from './presentation/components/UserProfileHeader';
-
 export { SettingsErrorBoundary } from './presentation/components/SettingsErrorBoundary';
 
 export { CloudSyncSetting } from './presentation/components/CloudSyncSetting';
@@ -92,5 +89,8 @@ export { OnboardingResetSetting } from '@umituz/react-native-onboarding';
 // @ts-ignore - Re-exporting from peer dependency  
 export type { OnboardingResetSettingProps } from '@umituz/react-native-onboarding';
 
-
+// @ts-ignore - Re-exporting from peer dependency
+export { createSentryTestSetting } from '@umituz/react-native-sentry';
+// @ts-ignore - Re-exporting from peer dependency
+export type { SentryTestSettingProps } from '@umituz/react-native-sentry';
 

package/src/presentation/components/CloudSyncSetting.tsx

@@ -45,7 +45,7 @@ export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
 
   return (
     <SettingItem
-      icon="cloud"
+      icon="cloud-outline"
       title={title || "cloud_sync"}
       value={displayDescription}
       onPress={onPress}

package/src/presentation/components/DevSettingsSection.tsx

@@ -101,7 +101,7 @@ export const DevSettingsSection: React.FC<DevSettingsProps> = ({
     <SettingsSection title={t.sectionTitle}>
       {customDevComponents.map((component) => component)}
       <SettingItem
-        icon="trash-2"
+        icon="trash-outline"
         title={t.clearTitle}
         value={t.clearDescription}
         onPress={handleClearData}

package/src/presentation/components/SettingItem.tsx

@@ -6,13 +6,10 @@
 
 import React from "react";
 import { View, Text, Pressable, StyleSheet, Switch } from "react-native";
-import {
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
 
 export interface SettingItemProps {
-  /** Icon name for AtomicIcon */
+  /** Icon name (Ionicons) */
   icon: string;
   /** Main title text */
   title: string;
@@ -63,7 +60,6 @@ export const SettingItem: React.FC<SettingItemProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
-  const spacing = tokens.spacing;
 
   return (
     <>
@@ -93,7 +89,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
           >
             <AtomicIcon
               name={icon}
-              size={24}
+              customSize={24}
               customColor={iconColor || colors.primary}
             />
           </View>
@@ -132,13 +128,13 @@ export const SettingItem: React.FC<SettingItemProps> = ({
                 false: `${colors.textSecondary}30`,
                 true: colors.primary,
               }}
-              thumbColor={switchThumbColor || colors.onPrimary || "#FFFFFF"}
+              thumbColor={switchThumbColor || "#FFFFFF"}
               ios_backgroundColor={`${colors.textSecondary}30`}
             />
           ) : (
             <AtomicIcon
-              name="chevron-right"
-              size={20}
+              name="chevron-forward-outline"
+              customSize={20}
               customColor={colors.textSecondary}
             />
           )}

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -7,6 +7,7 @@ import React, { Component, ReactNode } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useLocalization } from '@umituz/react-native-localization';
 
 interface Props {
   children: ReactNode;
@@ -63,15 +64,19 @@ interface ErrorBoundaryFallbackProps {
 
 const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({
   error,
-  fallbackTitle = "error_boundary.title",
-  fallbackMessage = "error_boundary.message"
+  fallbackTitle,
+  fallbackMessage
 }) => {
   const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  const title = __DEV__ && error?.message
+    ? t("error_boundary.dev_title")
+    : (fallbackTitle || t("error_boundary.title"));
 
-  const title = __DEV__ && error?.message ? "error_boundary.dev_title" : fallbackTitle;
   const message = __DEV__ && error?.message
-    ? `error_boundary.dev_message: ${error.message}`
-    : fallbackMessage;
+    ? `${t("error_boundary.dev_message")}: ${error.message}`
+    : (fallbackMessage || t("error_boundary.message"));
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>

package/src/presentation/components/StorageClearSetting.tsx

@@ -36,7 +36,7 @@ export const StorageClearSetting: React.FC<StorageClearSettingProps> = ({
 
   return (
     <SettingItem
-      icon="trash-2"
+      icon="trash-outline"
       title={defaultTitle}
       value={defaultDescription}
       onPress={onPress}

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

@@ -9,7 +9,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
-import { UserProfileHeader } from "../../components/UserProfileHeader";
+import { ProfileSection } from "@umituz/react-native-auth";
 import { SettingsSection } from "../../components/SettingsSection";
 import { DevSettingsSection, DevSettingsProps } from "../../components/DevSettingsSection";
 import { NotificationsSection } from "@umituz/react-native-notifications";
@@ -144,19 +144,18 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
       ]}
       showsVerticalScrollIndicator={false}
     >
-      {showUserProfile && (
+      {showUserProfile && userProfile && (
         <View style={styles.profileContainer}>
-          <UserProfileHeader
-            displayName={userProfile?.displayName}
-            userId={userProfile?.userId}
-            isAnonymous={userProfile?.isAnonymous}
-            avatarUrl={userProfile?.avatarUrl}
-            accountSettingsRoute={userProfile?.accountSettingsRoute}
-            onPress={userProfile?.onPress}
-            anonymousDisplayName={userProfile?.anonymousDisplayName}
-            avatarServiceUrl={userProfile?.avatarServiceUrl}
-            defaultUserDisplayName={t("settings.profile.defaultUserName")}
-            defaultAnonymousDisplayName={t("settings.profile.anonymousName")}
+          <ProfileSection
+            profile={{
+              displayName: userProfile.displayName || (userProfile.isAnonymous ? t("settings.profile.anonymousName") : t("settings.profile.defaultUserName")),
+              userId: userProfile.userId,
+              isAnonymous: userProfile.isAnonymous || false,
+              avatarUrl: userProfile.avatarUrl,
+              accountSettingsRoute: userProfile.accountSettingsRoute,
+            }}
+            onPress={userProfile.onPress}
+            onSignIn={userProfile.onPress}
           />
         </View>
       )}

package/src/presentation/components/UserProfileHeader.tsx

@@ -1,166 +0,0 @@
-/**
- * User Profile Header Component
- * Displays user avatar, name, and ID
- * Works for both guest and authenticated users
- */
-
-import React, { useCallback } from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { Feather } from "@expo/vector-icons";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useNavigation } from "@react-navigation/native";
-import { Avatar } from "@umituz/react-native-avatar";
-
-export interface UserProfileHeaderProps {
-  /** User display name */
-  displayName?: string;
-  /** User ID */
-  userId?: string;
-  /** Whether user is anonymous (device-based ID) */
-  isAnonymous?: boolean;
-  /** Avatar URL (optional) */
-  avatarUrl?: string;
-  /** Navigation route for account settings */
-  accountSettingsRoute?: string;
-  /** Custom onPress handler */
-  onPress?: () => void;
-  /** Custom anonymous user display name */
-  anonymousDisplayName?: string;
-  /** Custom avatar service URL */
-  avatarServiceUrl?: string;
-  /** Default user display name when no displayName provided */
-  defaultUserDisplayName?: string;
-  /** Default anonymous display name */
-  defaultAnonymousDisplayName?: string;
-}
-
-export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
-  displayName,
-  userId,
-  isAnonymous = false,
-  avatarUrl,
-  accountSettingsRoute,
-  onPress,
-  anonymousDisplayName,
-  avatarServiceUrl,
-  defaultUserDisplayName,
-  defaultAnonymousDisplayName,
-}) => {
-  const tokens = useAppDesignTokens();
-  const navigation = useNavigation();
-  const colors = tokens.colors;
-  const spacing = tokens.spacing;
-  const finalDisplayName = displayName || (isAnonymous ? anonymousDisplayName || defaultAnonymousDisplayName || "Anonymous" : defaultUserDisplayName || "User");
-  const avatarName = isAnonymous ? anonymousDisplayName || defaultAnonymousDisplayName || "Anonymous" : finalDisplayName;
-
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-    } else if (accountSettingsRoute) {
-      navigation.navigate(accountSettingsRoute as never);
-    }
-  }, [onPress, accountSettingsRoute, navigation]);
-
-  const shouldShowChevron = !!(onPress || accountSettingsRoute);
-  const isPressable = !!(onPress || accountSettingsRoute);
-
-  const containerStyle = [
-    styles.container,
-    {
-      backgroundColor: colors.surface,
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.md,
-      marginHorizontal: spacing.md,
-    },
-  ];
-
-  const content = (
-    <>
-      <View style={styles.content}>
-        <View style={styles.avatarContainer}>
-          <Avatar
-            uri={avatarUrl}
-            name={avatarName}
-            size="lg"
-            shape="circle"
-          />
-        </View>
-        <View style={[styles.textContainer, { marginLeft: spacing.md }]}>
-          <AtomicText
-            type="headlineSmall"
-            style={[styles.name, { color: colors.textPrimary }]}
-            numberOfLines={1}
-          >
-            {finalDisplayName}
-          </AtomicText>
-          {userId && (
-            <AtomicText
-              type="bodySmall"
-              style={[styles.id, { color: colors.textSecondary }]}
-              numberOfLines={1}
-            >
-              {userId}
-            </AtomicText>
-          )}
-        </View>
-      </View>
-      {shouldShowChevron && (
-        <View style={[styles.chevronContainer, { marginLeft: spacing.sm }]}>
-          <Feather name="chevron-right" size={22} color={colors.textSecondary} />
-        </View>
-      )}
-    </>
-  );
-
-  if (isPressable) {
-    return (
-      <TouchableOpacity
-        style={containerStyle}
-        onPress={handlePress}
-        activeOpacity={0.7}
-      >
-        {content}
-      </TouchableOpacity>
-    );
-  }
-
-  return <View style={containerStyle}>{content}</View>;
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginTop: 0,
-    marginBottom: 0,
-    borderRadius: 20,
-    minHeight: 80,
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-  avatarContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  textContainer: {
-    flex: 1,
-  },
-  name: {
-    fontWeight: "700",
-  },
-  id: {
-    fontWeight: "500",
-    opacity: 0.7,
-  },
-  chevronContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
-
-