@umituz/react-native-settings 4.19.5 → 4.20.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.19.5",
+  "version": "4.20.0",
   "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",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx --max-warnings 0",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "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,14 +39,14 @@
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
-    "@umituz/react-native-auth": "latest",
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-notifications": "latest",
-    "@umituz/react-native-onboarding": "latest",
-    "@umituz/react-native-sentry": "latest",
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-tanstack": "latest",
+    "@umituz/react-native-auth": "*",
+    "@umituz/react-native-design-system": "*",
+    "@umituz/react-native-localization": "*",
+    "@umituz/react-native-notifications": "*",
+    "@umituz/react-native-onboarding": "*",
+    "@umituz/react-native-sentry": "*",
+    "@umituz/react-native-storage": "*",
+    "@umituz/react-native-tanstack": "*",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-safe-area-context": ">=4.0.0",
@@ -58,28 +58,30 @@
     "@gorhom/bottom-sheet": "^5.2.8",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/native": "^7.1.26",
+    "@react-navigation/stack": "^7.6.13",
     "@sentry/react-native": "^7.8.0",
     "@sentry/types": "^10.32.1",
     "@tanstack/react-query": "^5.0.0",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.1.10",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "@umituz/react-native-auth": "latest",
-    "@umituz/react-native-design-system": "latest",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@umituz/react-native-auth": "^3.2.0",
+    "@umituz/react-native-design-system": "^2.5.1",
     "@umituz/react-native-filesystem": "^2.1.7",
     "@umituz/react-native-firebase": "^1.13.28",
     "@umituz/react-native-haptics": "^1.0.3",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-notifications": "latest",
-    "@umituz/react-native-onboarding": "latest",
+    "@umituz/react-native-localization": "*",
+    "@umituz/react-native-notifications": "*",
+    "@umituz/react-native-onboarding": "*",
     "@umituz/react-native-sentry": "^1.4.2",
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-tanstack": "latest",
+    "@umituz/react-native-storage": "*",
+    "@umituz/react-native-tanstack": "*",
     "@umituz/react-native-uuid": "^1.2.2",
     "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-native": "^5.0.0",
     "expo-apple-authentication": "^8.0.8",
     "expo-application": "^7.0.8",
     "expo-clipboard": "^8.0.8",

package/src/domains/about/presentation/components/AboutContent.tsx

@@ -8,7 +8,7 @@ import { AboutSettingItem } from './AboutSettingItem';
 import { AppInfo } from '../../domain/entities/AppInfo';
 import { AboutConfig } from '../../domain/entities/AppInfo';
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export interface AboutContentProps {
   /** App information to display */
@@ -18,7 +18,7 @@ export interface AboutContentProps {
 }
 
 const AboutSectionHeader: React.FC<{ title: string }> = ({ title }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   return (

package/src/domains/about/presentation/components/AboutHeader.tsx

@@ -26,7 +26,7 @@ export interface AboutHeaderProps {
   testID?: string;
 }
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export const AboutHeader: React.FC<AboutHeaderProps> = ({
   appInfo,
@@ -37,7 +37,7 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
   versionPrefix = "Version",
   testID,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   return (

package/src/domains/about/presentation/components/AboutSettingItem.tsx

@@ -45,7 +45,7 @@ export interface AboutSettingItemProps {
   chevronColor?: string;
 }
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   icon,
@@ -63,7 +63,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   testID,
   chevronColor,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   // Memoize container type to prevent unnecessary re-renders

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -38,7 +38,7 @@ export interface AboutScreenProps {
 }
 
 import { useAboutInfo } from '../hooks/useAboutInfo';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 
 export const AboutScreen: React.FC<AboutScreenProps> = ({
   config,
@@ -51,7 +51,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
   footerComponent,
   testID,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   const { appInfo, loading, error } = useAboutInfo({

package/src/domains/appearance/presentation/components/ColorPicker.tsx

@@ -10,7 +10,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicIcon,
   AtomicText,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 
 interface ColorPickerProps {
@@ -26,7 +26,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   onValueChange,
   colors,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Memoize styles to prevent unnecessary re-creation
   const styles = useMemo(() => getStyles(tokens), [tokens]);
@@ -84,7 +84,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       marginBottom: 16,

package/src/domains/appearance/presentation/components/ThemeOption.tsx

@@ -8,7 +8,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { ThemeMode } from "../../types";
 
 interface ThemeOptionProps {
@@ -30,7 +30,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
   isSelected,
   onSelect,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const styles = getStyles(tokens);
   const iconName = mode === "dark" ? "moon-outline" : mode === "light" ? "sunny-outline" : "desktop-outline";
 
@@ -89,7 +89,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       backgroundColor: tokens.colors.surface,

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -7,7 +7,7 @@
 
 import React, { useMemo, useCallback } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useAppearance, useAppearanceActions } from "../../hooks";
 import {
   AppearanceHeader,
@@ -63,7 +63,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   containerStyle,
   contentContainerStyle,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { themeMode } = useAppearance();
   const {
     localCustomColors,
@@ -211,7 +211,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       flex: 1,

package/src/domains/faqs/domain/entities/FAQEntity.ts

@@ -7,10 +7,17 @@ export interface FAQItem {
     question: string;
     answer: string;
     categoryId?: string;
+    tags?: readonly string[];
+    featured?: boolean;
+    order?: number;
+    metadata?: Record<string, unknown>;
 }
 
 export interface FAQCategory {
     id: string;
     title: string;
     items: FAQItem[];
+    description?: string;
+    icon?: string;
+    order?: number;
 }

package/src/domains/faqs/domain/services/FAQSearchService.ts

@@ -1,6 +1,6 @@
 /**
  * FAQ Search Service
- * Handles searching FAQ items
+ * Handles searching FAQ items with advanced features
  */
 
 import { FAQItem, FAQCategory } from "../entities/FAQEntity";
@@ -11,10 +11,15 @@ export class FAQSearchService {
 
     const normalizedQuery = query.toLowerCase().trim();
     
-    return items.filter(item => 
-      item.question.toLowerCase().includes(normalizedQuery) ||
-      item.answer.toLowerCase().includes(normalizedQuery)
-    );
+    return items.filter(item => {
+      const questionMatch = item.question.toLowerCase().includes(normalizedQuery);
+      const answerMatch = item.answer.toLowerCase().includes(normalizedQuery);
+      const tagMatch = item.tags?.some(tag => 
+        tag.toLowerCase().includes(normalizedQuery)
+      ) || false;
+      
+      return questionMatch || answerMatch || tagMatch;
+    });
   }
 
   static searchCategories(query: string, categories: FAQCategory[]): FAQCategory[] {
@@ -25,12 +30,30 @@ export class FAQSearchService {
     return categories
       .map(category => ({
         ...category,
-        items: category.items.filter(item => 
-          item.question.toLowerCase().includes(normalizedQuery) ||
-          item.answer.toLowerCase().includes(normalizedQuery) ||
-          category.title.toLowerCase().includes(normalizedQuery)
-        )
+        items: category.items.filter(item => {
+          const questionMatch = item.question.toLowerCase().includes(normalizedQuery);
+          const answerMatch = item.answer.toLowerCase().includes(normalizedQuery);
+          const categoryMatch = category.title.toLowerCase().includes(normalizedQuery);
+          const categoryDescMatch = category.description?.toLowerCase().includes(normalizedQuery) || false;
+          const tagMatch = item.tags?.some(tag => 
+            tag.toLowerCase().includes(normalizedQuery)
+          ) || false;
+          
+          return questionMatch || answerMatch || categoryMatch || categoryDescMatch || tagMatch;
+        })
       }))
       .filter(category => category.items.length > 0);
   }
+
+  static getFeaturedItems(items: FAQItem[]): FAQItem[] {
+    return items.filter(item => item.featured === true);
+  }
+
+  static sortByOrder(items: FAQItem[]): FAQItem[] {
+    return [...items].sort((a, b) => (a.order || 0) - (b.order || 0));
+  }
+
+  static sortCategoriesByOrder(categories: FAQCategory[]): FAQCategory[] {
+    return [...categories].sort((a, b) => (a.order || 0) - (b.order || 0));
+  }
 }

package/src/domains/faqs/presentation/components/FAQCategory.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 import { FAQCategory as FAQCategoryType } from '../../domain/entities/FAQEntity';
 import { FAQItemComponent, FAQItemStyles } from './FAQItem';
 
@@ -29,18 +29,26 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
     onToggleItem,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
-                    marginBottom: tokens.spacing.lg,
+                    marginBottom: tokens.spacing.xl,
                 },
                 titleContainer: {
-                    marginBottom: tokens.spacing.md,
-                    paddingHorizontal: tokens.spacing.md,
+                    marginBottom: tokens.spacing.sm,
+                    paddingHorizontal: tokens.spacing.lg,
+                    flexDirection: 'row',
+                    alignItems: 'center',
                 },
+                titleLine: {
+                    flex: 1,
+                    height: 1,
+                    backgroundColor: tokens.colors.border,
+                    marginLeft: tokens.spacing.md,
+                }
             }),
         [tokens]
     );
@@ -49,12 +57,13 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
         <View style={[styles.container, customStyles?.container]}>
             <View style={styles.titleContainer}>
                 <AtomicText
-                    type="headlineSmall"
-                    color="textPrimary"
-                    style={customStyles?.titleStyle}
+                    type="labelLarge"
+                    color="textSecondary"
+                    style={[{ textTransform: 'uppercase', letterSpacing: 1, fontWeight: '700' }, customStyles?.titleStyle]}
                 >
                     {category.title}
                 </AtomicText>
+                <View style={styles.titleLine} />
             </View>
             {category.items.map((item, index) => (
                 <FAQItemComponent

package/src/domains/faqs/presentation/components/FAQEmptyState.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 
 export interface FAQEmptyStateStyles {
     container?: ViewStyle;
@@ -28,7 +28,7 @@ export const FAQEmptyState: React.FC<FAQEmptyStateProps> = ({
     icon = '❓',
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>

package/src/domains/faqs/presentation/components/FAQItem.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { FAQItem as FAQItemType } from '../../domain/entities/FAQEntity';
 
 export interface FAQItemStyles {
@@ -32,36 +32,49 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
     onToggle,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
                     marginHorizontal: tokens.spacing.md,
-                    marginBottom: tokens.spacing.xs,
-                    borderRadius: 12,
+                    marginBottom: tokens.spacing.sm,
+                    borderRadius: 20,
                     backgroundColor: tokens.colors.surface,
                     borderWidth: 1,
-                    borderColor: tokens.colors.border,
+                    borderColor: isExpanded ? tokens.colors.primary : tokens.colors.border,
+                    overflow: 'hidden',
                 },
                 header: {
-                    flexDirection: 'row' as const,
-                    alignItems: 'center' as const,
-                    padding: tokens.spacing.md,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    padding: tokens.spacing.lg,
                 },
                 content: {
                     flex: 1,
-                    marginRight: tokens.spacing.xs,
+                    marginRight: tokens.spacing.md,
+                },
+                questionText: {
+                    fontWeight: '700',
                 },
                 answerContainer: {
-                    paddingHorizontal: tokens.spacing.md,
-                    paddingBottom: tokens.spacing.md,
+                    paddingHorizontal: tokens.spacing.lg,
+                    paddingBottom: tokens.spacing.lg,
                     borderTopWidth: 1,
                     borderTopColor: tokens.colors.borderLight,
+                    backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
+                },
+                iconContainer: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18,
+                    backgroundColor: isExpanded ? tokens.colors.primary : tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
+                    alignItems: 'center',
+                    justifyContent: 'center',
                 },
             }),
-        [tokens]
+        [tokens, isExpanded]
     );
 
     return (
@@ -69,22 +82,24 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
             <TouchableOpacity
                 onPress={onToggle}
                 style={[styles.header, customStyles?.header]}
-                activeOpacity={0.7}
+                activeOpacity={0.8}
             >
                 <View style={[styles.content, customStyles?.content]}>
                     <AtomicText
                         type="bodyLarge"
-                        color="textPrimary"
-                        style={customStyles?.questionStyle}
-                        numberOfLines={isExpanded ? undefined : 2}
+                        color={isExpanded ? "primary" : "textPrimary"}
+                        style={[styles.questionText, customStyles?.questionStyle]}
                     >
                         {item.question}
                     </AtomicText>
                 </View>
-                <AtomicIcon
-                    name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                    size={20}
-                />
+                <View style={styles.iconContainer}>
+                    <AtomicIcon
+                        name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                        size={20}
+                        color={isExpanded ? "onPrimary" : "textSecondary"}
+                    />
+                </View>
             </TouchableOpacity>
 
             {isExpanded && (
@@ -92,7 +107,7 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
                     <AtomicText
                         type="bodyMedium"
                         color="textSecondary"
-                        style={customStyles?.answerStyle}
+                        style={[{ lineHeight: 22 }, customStyles?.answerStyle]}
                     >
                         {item.answer}
                     </AtomicText>

package/src/domains/faqs/presentation/components/FAQSearchBar.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, TextInput, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicIcon } from '@umituz/react-native-design-system';
 
 export interface FAQSearchBarStyles {
     container?: ViewStyle;
@@ -26,26 +26,27 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
     placeholder,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
-                    flexDirection: 'row' as const,
-                    alignItems: 'center' as const,
-                    backgroundColor: tokens.colors.surface,
-                    borderRadius: 12,
-                    paddingHorizontal: tokens.spacing.sm,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
+                    borderRadius: 16,
+                    paddingHorizontal: tokens.spacing.md,
                     borderWidth: 1,
-                    borderColor: tokens.colors.border,
+                    borderColor: tokens.colors.borderLight,
+                    height: 48,
                 },
                 iconContainer: {
-                    marginRight: tokens.spacing.xs,
+                    marginRight: tokens.spacing.sm,
                 },
                 input: {
                     flex: 1,
-                    paddingVertical: tokens.spacing.sm,
+                    height: '100%',
                     fontSize: 16,
                     color: tokens.colors.textPrimary,
                 },
@@ -56,7 +57,7 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
     return (
         <View style={[styles.container, customStyles?.container]}>
             <View style={styles.iconContainer}>
-                <AtomicIcon name="search" size={18} />
+                <AtomicIcon name="search" size={18} color="textSecondary" />
             </View>
             <TextInput
                 style={[styles.input, customStyles?.input]}