@umituz/react-native-settings 1.4.1 → 1.6.0

package/README.md

@@ -20,7 +20,7 @@ npm install @umituz/react-native-settings
 ## Peer Dependencies
 
 ```bash
-npm install zustand @umituz/react-native-storage @umituz/react-native-design-system @umituz/react-native-design-system-theme @umituz/react-native-localization @umituz/react-native-notifications react-native-paper expo-linear-gradient
+npm install zustand lucide-react-native @umituz/react-native-storage @umituz/react-native-design-system @umituz/react-native-design-system-theme @umituz/react-native-localization @umituz/react-native-notifications react-native-paper expo-linear-gradient
 ```
 
 ## Usage
@@ -55,8 +55,25 @@ const MyComponent = () => {
 ```tsx
 import { SettingsScreen } from '@umituz/react-native-settings';
 
-// In your navigation stack
+// Basic usage
 <Stack.Screen name="Settings" component={SettingsScreen} />
+
+// With user profile header
+<SettingsScreen
+  showUserProfile={true}
+  userProfile={{
+    displayName: "John Doe",
+    userId: "user123",
+    isGuest: false,
+    accountSettingsRoute: "AccountSettings",
+  }}
+  config={{
+    appearance: true,
+    notifications: true,
+    about: true,
+    legal: true,
+  }}
+/>
 ```
 
 ### Appearance Screen
@@ -81,17 +98,82 @@ import { LanguageSelectionScreen } from '@umituz/react-native-settings';
 
 ```tsx
 import { SettingItem } from '@umituz/react-native-settings';
+import { Palette, Bell } from 'lucide-react-native';
 
+// Basic setting item
 <SettingItem
-  icon="Palette"
-  title="Theme"
-  description="Change app theme"
-  value="Dark"
+  icon={Palette}
+  title="Appearance"
+  value="Theme and language settings"
   onPress={() => navigation.navigate('Appearance')}
-  iconGradient={['#FF6B6B', '#4ECDC4']}
+/>
+
+// With switch
+<SettingItem
+  icon={Bell}
+  title="Notifications"
+  showSwitch={true}
+  switchValue={enabled}
+  onSwitchChange={setEnabled}
+/>
+
+// Custom colors
+<SettingItem
+  icon={Palette}
+  title="Appearance"
+  iconColor="#F59E0B"
+  titleColor="#F59E0B"
+  onPress={() => {}}
 />
 ```
 
+### Settings Section Component
+
+```tsx
+import { SettingsSection, SettingItem } from '@umituz/react-native-settings';
+import { Palette, Bell } from 'lucide-react-native';
+
+<SettingsSection title="APP SETTINGS">
+  <SettingItem
+    icon={Palette}
+    title="Appearance"
+    value="Theme and language settings"
+    onPress={() => navigation.navigate('Appearance')}
+  />
+  <SettingItem
+    icon={Bell}
+    title="Notifications"
+    showSwitch={true}
+    switchValue={enabled}
+    onSwitchChange={setEnabled}
+    isLast={true}
+  />
+</SettingsSection>
+```
+
+### User Profile Header Component
+
+```tsx
+import { UserProfileHeader } from '@umituz/react-native-settings';
+
+<UserProfileHeader
+  displayName="John Doe"
+  userId="user123"
+  isGuest={false}
+  avatarUrl="https://example.com/avatar.jpg"
+  accountSettingsRoute="AccountSettings"
+  onPress={() => navigation.navigate('AccountSettings')}
+/>
+```
+
+### Settings Footer Component
+
+```tsx
+import { SettingsFooter } from '@umituz/react-native-settings';
+
+<SettingsFooter versionText="Version 1.0.0" />
+```
+
 ### Disclaimer Setting Component
 
 ```tsx
@@ -122,7 +204,14 @@ Direct access to Zustand store.
 
 ### `SettingsScreen`
 
-Main settings screen component with sections for Appearance, General, About & Legal.
+Modern settings screen with organized sections and optional user profile header.
+
+**Props:**
+- `config?: SettingsConfig` - Configuration for which features to show
+- `showUserProfile?: boolean` - Show user profile header
+- `userProfile?: UserProfileHeaderProps` - User profile props
+- `showFooter?: boolean` - Show footer with version
+- `footerText?: string` - Custom footer text
 
 ### `AppearanceScreen`
 
@@ -134,19 +223,46 @@ Language selection screen with search functionality.
 
 ### `SettingItem`
 
-Reusable setting item component with gradient icons and Material Design styling.
+Modern setting item component with Lucide icons and switch support.
 
 **Props:**
-- `icon: IconName` - Icon name from Lucide library
+- `icon: React.ComponentType` - Icon component from lucide-react-native
 - `title: string` - Main title text
-- `description?: string` - Optional description
-- `value?: string` - Optional value to display on right
+- `value?: string` - Optional description/value text (shown below title)
 - `onPress?: () => void` - Callback when pressed
-- `showChevron?: boolean` - Show chevron arrow (default: true if onPress exists)
-- `rightElement?: React.ReactNode` - Custom right element
-- `iconGradient?: string[]` - Gradient colors for icon background
-- `disabled?: boolean` - Disable item
-- `testID?: string` - Test ID
+- `showSwitch?: boolean` - Show switch instead of chevron
+- `switchValue?: boolean` - Switch value
+- `onSwitchChange?: (value: boolean) => void` - Switch change handler
+- `isLast?: boolean` - Is last item (no divider)
+- `iconColor?: string` - Custom icon color
+- `titleColor?: string` - Custom title color
+
+### `SettingsSection`
+
+Section container with title and styled content area.
+
+**Props:**
+- `title: string` - Section title (uppercase)
+- `children: React.ReactNode` - Section content
+
+### `UserProfileHeader`
+
+User profile header with avatar, name, and ID.
+
+**Props:**
+- `displayName?: string` - User display name
+- `userId?: string` - User ID
+- `isGuest?: boolean` - Whether user is guest
+- `avatarUrl?: string` - Custom avatar URL
+- `accountSettingsRoute?: string` - Navigation route for account settings
+- `onPress?: () => void` - Custom onPress handler
+
+### `SettingsFooter`
+
+Footer component displaying app version.
+
+**Props:**
+- `versionText?: string` - Custom version text (optional)
 
 ### `DisclaimerSetting`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -29,6 +29,7 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "zustand": "^5.0.2",
+    "lucide-react-native": "^0.468.0",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",

package/src/index.ts

@@ -48,5 +48,16 @@ export type { SettingsConfig } from './presentation/screens/types';
 // =============================================================================
 
 export { SettingItem } from './presentation/components/SettingItem';
+export type { SettingItemProps } from './presentation/components/SettingItem';
+
+export { SettingsSection } from './presentation/components/SettingsSection';
+export type { SettingsSectionProps } from './presentation/components/SettingsSection';
+
+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 { DisclaimerSetting } from './presentation/components/DisclaimerSetting';
 

package/src/presentation/components/DisclaimerSetting.tsx

@@ -27,7 +27,7 @@ import {
 } from 'react-native';
 
 import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system-theme';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
 import { useLocalization } from '@umituz/react-native-localization';
 
 type DesignTokens = ReturnType<typeof useAppDesignTokens>;

package/src/presentation/components/SettingItem.tsx

@@ -1,259 +1,167 @@
 /**
- * SettingItem Component - Paper List.Item Wrapper with Custom Styling
- *
- * Modern settings item built on React Native Paper:
- * - Wraps Paper List.Item for Material Design compliance
- * - Custom gradient icon backgrounds (LinearGradient)
- * - Lucide icons integration (AtomicIcon)
- * - Automatic theme-aware styling
- * - Built-in ripple effects
- * - Accessibility support
- * - Fixed title truncation with proper layout constraints
+ * Setting Item Component
+ * Single Responsibility: Render a single settings item
+ * Modern design with Lucide icons and switch support
  */
 
-import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import type { IconName } from '@umituz/react-native-design-system';
-import type { DesignTokens } from '@umituz/react-native-design-system';
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Switch } from "react-native";
+import { ChevronRight } from "lucide-react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
-interface SettingItemProps {
-  /** Icon name from Lucide library */
-  icon: IconName;
+export interface SettingItemProps {
+  /** Icon component from lucide-react-native */
+  icon: React.ComponentType<{ size?: number; color?: string }>;
   /** Main title text */
   title: string;
-  /** Optional description text */
-  description?: string;
-  /** Optional value to display on the right */
+  /** Optional description/value text */
   value?: string;
   /** Callback when pressed */
   onPress?: () => void;
-  /** Show chevron arrow on right (default: true if onPress exists) */
-  showChevron?: boolean;
-  /** Right element to display instead of chevron/value */
-  rightElement?: React.ReactNode;
-  /** Gradient colors for icon background */
-  iconGradient?: string[];
-  /** Make item look disabled */
-  disabled?: boolean;
-  /** Test ID for E2E testing */
-  testID?: string;
+  /** Show switch instead of chevron */
+  showSwitch?: boolean;
+  /** Switch value */
+  switchValue?: boolean;
+  /** Switch change handler */
+  onSwitchChange?: (value: boolean) => void;
+  /** Is last item in section (no divider) */
+  isLast?: boolean;
+  /** Custom icon color */
+  iconColor?: string;
+  /** Custom title color */
+  titleColor?: string;
 }
 
 export const SettingItem: React.FC<SettingItemProps> = ({
-  icon,
+  icon: Icon,
   title,
-  description,
   value,
   onPress,
-  showChevron,
-  rightElement,
-  iconGradient,
-  disabled = false,
-  testID,
+  showSwitch = false,
+  switchValue,
+  onSwitchChange,
+  isLast = false,
+  iconColor,
+  titleColor,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
+  const colors = tokens.colors;
 
-  // Gradient colors for icon background
-  const gradientColors: readonly [string, string, ...string[]] = (iconGradient && iconGradient.length >= 2) 
-    ? (iconGradient as unknown as readonly [string, string, ...string[]])
-    : [tokens.colors.surface, tokens.colors.surface] as const;
-
-  if (onPress) {
-    return (
+  return (
+    <>
       <TouchableOpacity
+        style={[
+          styles.container,
+          { backgroundColor: colors.backgroundPrimary },
+        ]}
         onPress={onPress}
-        disabled={disabled}
+        disabled={showSwitch}
         activeOpacity={0.7}
-        style={[styles.listItem, disabled && styles.disabled]}
-        testID={testID}
       >
-        {/* Left: Gradient Icon */}
-        <View style={styles.leftContainer}>
-          <LinearGradient
-            colors={gradientColors}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            style={styles.iconContainer}
-          >
-            <AtomicIcon name={icon} size="md" customColor="#FFFFFF" />
-          </LinearGradient>
-        </View>
-
-        {/* Center: Title and Description */}
-        <View style={styles.contentContainer}>
-          <AtomicText
-            type="bodyLarge"
-            color={disabled ? "textDisabled" : "onSurface"}
-            style={styles.title}
-            numberOfLines={2}
-            ellipsizeMode="tail"
+        <View style={styles.content}>
+          <View
+            style={[
+              styles.iconContainer,
+              {
+                backgroundColor: iconColor
+                  ? `${iconColor}15`
+                  : `${colors.primary}15`,
+              },
+            ]}
           >
-            {title}
-          </AtomicText>
-          {description && (
-            <AtomicText
-              type="bodySmall"
-              color="textSecondary"
-              style={styles.description}
-              numberOfLines={2}
-              ellipsizeMode="tail"
+            <Icon size={20} color={iconColor || colors.primary} />
+          </View>
+          <View style={styles.textContainer}>
+            <Text
+              style={[
+                styles.title,
+                { color: titleColor || colors.textPrimary },
+              ]}
+              numberOfLines={1}
             >
-              {description}
-            </AtomicText>
-          )}
+              {title}
+            </Text>
+            {value && !showSwitch && (
+              <Text
+                style={[styles.value, { color: colors.textSecondary }]}
+                numberOfLines={1}
+              >
+                {value}
+              </Text>
+            )}
+          </View>
         </View>
 
-        {/* Right: Value, Chevron, or Custom Element */}
-        {rightElement ? (
-          <View style={styles.rightContainer}>{rightElement}</View>
-        ) : value ? (
-          <View style={styles.rightContainer}>
-            <AtomicText
-              type="bodyMedium"
-              color="textSecondary"
-              style={styles.value}
-              numberOfLines={2}
-              textAlign="right"
-            >
-              {value}
-            </AtomicText>
-          </View>
-        ) : (showChevron ?? true) ? (
-          <View style={styles.rightContainer}>
-            <AtomicIcon
-              name="ChevronRight"
-              size="sm"
-              color="textSecondary"
-              style={styles.chevron}
+        <View style={styles.rightContainer}>
+          {showSwitch ? (
+            <Switch
+              value={switchValue}
+              onValueChange={onSwitchChange}
+              trackColor={{
+                false: `${colors.textSecondary}30`,
+                true: colors.primary,
+              }}
+              thumbColor="#FFFFFF"
             />
-          </View>
-        ) : null}
+          ) : (
+            <ChevronRight size={18} color={colors.textSecondary} />
+          )}
+        </View>
       </TouchableOpacity>
-    );
-  }
 
-  return (
-    <View
-      style={[styles.listItem, disabled && styles.disabled]}
-      testID={testID}
-    >
-      {/* Left: Gradient Icon */}
-      <View style={styles.leftContainer}>
-        <LinearGradient
-          colors={gradientColors}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={styles.iconContainer}
-        >
-          <AtomicIcon name={icon} size="md" customColor="#FFFFFF" />
-        </LinearGradient>
-      </View>
-
-      {/* Center: Title and Description */}
-      <View style={styles.contentContainer}>
-        <AtomicText
-          type="bodyLarge"
-          color={disabled ? "textDisabled" : "onSurface"}
-          style={styles.title}
-          numberOfLines={2}
-          ellipsizeMode="tail"
-        >
-          {title}
-        </AtomicText>
-        {description && (
-          <AtomicText
-            type="bodySmall"
-            color="textSecondary"
-            style={styles.description}
-            numberOfLines={2}
-            ellipsizeMode="tail"
-          >
-            {description}
-          </AtomicText>
-        )}
-      </View>
-
-      {/* Right: Value, Chevron, or Custom Element */}
-      {rightElement ? (
-        <View style={styles.rightContainer}>{rightElement}</View>
-      ) : value ? (
-        <View style={styles.rightContainer}>
-          <AtomicText
-            type="bodyMedium"
-            color="textSecondary"
-            style={styles.value}
-            numberOfLines={2}
-            textAlign="right"
-          >
-            {value}
-          </AtomicText>
-        </View>
-      ) : null}
-    </View>
+      {!isLast && (
+        <View
+          style={[
+            styles.divider,
+            { backgroundColor: `${colors.textSecondary}20` },
+          ]}
+        />
+      )}
+    </>
   );
 };
 
-const getStyles = (tokens: DesignTokens) =>
-  StyleSheet.create({
-    listItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingVertical: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.lg,
-      minHeight: 72,
-    },
-    disabled: {
-      opacity: 0.5,
-    },
-    leftContainer: {
-      marginRight: tokens.spacing.md,
-      justifyContent: 'center',
-    },
-    iconContainer: {
-      width: 48,
-      height: 48,
-      borderRadius: 24,
-      alignItems: 'center',
-      justifyContent: 'center',
-      overflow: 'hidden',
-      borderWidth: 1,
-      borderColor: `${tokens.colors.primary}15`,
-    },
-    contentContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      minWidth: 0,
-    },
-    title: {
-      fontSize: tokens.typography.bodyLarge.fontSize,
-      fontWeight: '600',
-      flexShrink: 1,
-      lineHeight: tokens.typography.bodyLarge.fontSize * 1.4,
-    },
-    description: {
-      fontSize: tokens.typography.bodySmall.fontSize,
-      marginTop: tokens.spacing.xs / 2,
-      opacity: 0.7,
-      flexShrink: 1,
-      lineHeight: tokens.typography.bodySmall.fontSize * 1.4,
-    },
-    rightContainer: {
-      justifyContent: 'center',
-      alignItems: 'flex-end',
-      marginLeft: tokens.spacing.md,
-      maxWidth: '50%',
-      flexShrink: 0,
-    },
-    value: {
-      fontWeight: '500',
-      lineHeight: tokens.typography.bodyMedium.fontSize * 1.4,
-    },
-    chevron: {
-      opacity: 0.5,
-    },
-  });
-
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  textContainer: {
+    flex: 1,
+    minWidth: 0,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  value: {
+    fontSize: 12,
+    fontWeight: "400",
+    marginTop: 2,
+  },
+  rightContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  divider: {
+    height: 1,
+    marginLeft: 68,
+  },
+});

package/src/presentation/components/SettingsFooter.tsx

@@ -0,0 +1,46 @@
+/**
+ * Settings Footer Component
+ * Single Responsibility: Display app version information
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface SettingsFooterProps {
+  /** Custom version text (optional) */
+  versionText?: string;
+}
+
+export const SettingsFooter: React.FC<SettingsFooterProps> = ({
+  versionText,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+  const colors = tokens.colors;
+
+  const displayText =
+    versionText ||
+    `${t("settings.about.version")} ${t("settings.about.versionNumber")}`;
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.text, { color: colors.textSecondary }]}>
+        {displayText}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 24,
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+});
+