@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/appearance/types/index.ts

@@ -0,0 +1,54 @@
+/**
+ * Appearance Domain Types
+ *
+ * Types for appearance settings including theme mode and custom colors
+ */
+
+import type {
+  ThemeMode,
+  CustomThemeColors,
+} from "@umituz/react-native-design-system";
+
+export type { ThemeMode, CustomThemeColors };
+
+export interface AppearanceSettings {
+  themeMode: ThemeMode;
+  customColors?: CustomThemeColors;
+}
+
+export interface AppearanceState {
+  settings: AppearanceSettings;
+  isInitialized: boolean;
+}
+
+export interface AppearanceSectionConfig {
+  /** Section title */
+  title?: string;
+  /** Section description/value */
+  description?: string;
+  /** Navigation route name */
+  route?: string;
+  /** Default navigation route name */
+  defaultRoute?: string;
+}
+
+export interface ThemeModeTextConfig {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  features: string[];
+}
+
+export interface AppearanceTexts {
+  title?: string;
+  subtitle?: string;
+  themeSectionTitle?: string;
+  themeSectionDescription?: string;
+  colorsSectionTitle?: string;
+  colorsSectionDescription?: string;
+  previewSectionTitle?: string;
+  previewSectionDescription?: string;
+  resetButtonText?: string;
+  lightMode?: ThemeModeTextConfig;
+  darkMode?: ThemeModeTextConfig;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * FAQ Entity Definitions
+ */
+
+export interface FAQItem {
+    id: string;
+    question: string;
+    answer: string;
+    categoryId?: string;
+}
+
+export interface FAQCategory {
+    id: string;
+    title: string;
+    items: FAQItem[];
+}

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

@@ -0,0 +1,36 @@
+/**
+ * FAQ Search Service
+ * Handles searching FAQ items
+ */
+
+import { FAQItem, FAQCategory } from "../entities/FAQEntity";
+
+export class FAQSearchService {
+  static searchItems(query: string, items: FAQItem[]): FAQItem[] {
+    if (!query.trim()) return items;
+
+    const normalizedQuery = query.toLowerCase().trim();
+    
+    return items.filter(item => 
+      item.question.toLowerCase().includes(normalizedQuery) ||
+      item.answer.toLowerCase().includes(normalizedQuery)
+    );
+  }
+
+  static searchCategories(query: string, categories: FAQCategory[]): FAQCategory[] {
+    if (!query.trim()) return categories;
+
+    const normalizedQuery = query.toLowerCase().trim();
+    
+    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)
+        )
+      }))
+      .filter(category => category.items.length > 0);
+  }
+}

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

@@ -0,0 +1 @@
+export { FAQSearchService } from "./FAQSearchService";

package/src/domains/faqs/index.ts

@@ -0,0 +1,7 @@
+/**
+ * FAQs Domain
+ * Frequently asked questions
+ */
+
+export * from './presentation/screens/FAQsScreen';
+export * from './presentation/components/FAQItem';

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

@@ -0,0 +1,71 @@
+/**
+ * FAQ Category Component
+ * Renders a category with its FAQ items
+ * Uses design system tokens for theming
+ */
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { FAQCategory as FAQCategoryType } from '../../domain/entities/FAQEntity';
+import { FAQItemComponent, FAQItemStyles } from './FAQItem';
+
+export interface FAQCategoryStyles {
+    container?: ViewStyle;
+    titleStyle?: object;
+    itemStyles?: FAQItemStyles;
+}
+
+export interface FAQCategoryProps {
+    category: FAQCategoryType;
+    isExpanded: (itemId: string) => boolean;
+    onToggleItem: (itemId: string) => void;
+    styles?: FAQCategoryStyles;
+}
+
+export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
+    category,
+    isExpanded,
+    onToggleItem,
+    styles: customStyles,
+}) => {
+    const tokens = useResponsiveDesignTokens();
+
+    const styles = useMemo(
+        () =>
+            StyleSheet.create({
+                container: {
+                    marginBottom: tokens.spacing.lg,
+                },
+                titleContainer: {
+                    marginBottom: tokens.spacing.md,
+                    paddingHorizontal: tokens.spacing.md,
+                },
+            }),
+        [tokens]
+    );
+
+    return (
+        <View style={[styles.container, customStyles?.container]}>
+            <View style={styles.titleContainer}>
+                <AtomicText
+                    type="headlineSmall"
+                    color="textPrimary"
+                    style={customStyles?.titleStyle}
+                >
+                    {category.title}
+                </AtomicText>
+            </View>
+            {category.items.map((item, index) => (
+                <FAQItemComponent
+                    key={item.id}
+                    item={item}
+                    isExpanded={isExpanded(item.id)}
+                    onToggle={() => onToggleItem(item.id)}
+                    isLast={index === category.items.length - 1}
+                    styles={customStyles?.itemStyles}
+                />
+            ))}
+        </View>
+    );
+};

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

@@ -0,0 +1,75 @@
+/**
+ * FAQ Empty State Component
+ * Shown when no search results found
+ * Uses design system tokens for theming
+ */
+
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+
+export interface FAQEmptyStateStyles {
+    container?: ViewStyle;
+    icon?: TextStyle;
+    titleStyle?: object;
+    messageStyle?: object;
+}
+
+export interface FAQEmptyStateProps {
+    title: string;
+    message: string;
+    icon?: string;
+    styles?: FAQEmptyStateStyles;
+}
+
+export const FAQEmptyState: React.FC<FAQEmptyStateProps> = ({
+    title,
+    message,
+    icon = '❓',
+    styles: customStyles,
+}) => {
+    const tokens = useResponsiveDesignTokens();
+
+    const styles = useMemo(
+        () =>
+            StyleSheet.create({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: tokens.spacing.lg,
+                },
+                icon: {
+                    fontSize: 48,
+                    marginBottom: tokens.spacing.md,
+                },
+                textCenter: {
+                    textAlign: 'center',
+                },
+                message: {
+                    marginTop: tokens.spacing.xs,
+                },
+            }),
+        [tokens]
+    );
+
+    return (
+        <View style={[styles.container, customStyles?.container]}>
+            <Text style={[styles.icon, customStyles?.icon]}>{icon}</Text>
+            <AtomicText
+                type="headlineSmall"
+                color="textPrimary"
+                style={[styles.textCenter, customStyles?.titleStyle]}
+            >
+                {title}
+            </AtomicText>
+            <AtomicText
+                type="bodyMedium"
+                color="textSecondary"
+                style={[styles.textCenter, styles.message, customStyles?.messageStyle]}
+            >
+                {message}
+            </AtomicText>
+        </View>
+    );
+};

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

@@ -0,0 +1,103 @@
+/**
+ * FAQ Item Component
+ * Individual FAQ question/answer item
+ * Uses design system tokens for theming
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
+import { useResponsiveDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { FAQItem as FAQItemType } from '../../domain/entities/FAQEntity';
+
+export interface FAQItemStyles {
+    container?: ViewStyle;
+    header?: ViewStyle;
+    content?: ViewStyle;
+    questionStyle?: object;
+    answerContainer?: ViewStyle;
+    answerStyle?: object;
+}
+
+export interface FAQItemProps {
+    item: FAQItemType;
+    isExpanded: boolean;
+    onToggle: () => void;
+    isLast?: boolean;
+    styles?: FAQItemStyles;
+}
+
+export const FAQItemComponent: React.FC<FAQItemProps> = ({
+    item,
+    isExpanded,
+    onToggle,
+    styles: customStyles,
+}) => {
+    const tokens = useResponsiveDesignTokens();
+
+    const styles = useMemo(
+        () =>
+            StyleSheet.create({
+                container: {
+                    marginHorizontal: tokens.spacing.md,
+                    marginBottom: tokens.spacing.xs,
+                    borderRadius: 12,
+                    backgroundColor: tokens.colors.surface,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.border,
+                },
+                header: {
+                    flexDirection: 'row' as const,
+                    alignItems: 'center' as const,
+                    padding: tokens.spacing.md,
+                },
+                content: {
+                    flex: 1,
+                    marginRight: tokens.spacing.xs,
+                },
+                answerContainer: {
+                    paddingHorizontal: tokens.spacing.md,
+                    paddingBottom: tokens.spacing.md,
+                    borderTopWidth: 1,
+                    borderTopColor: tokens.colors.borderLight,
+                },
+            }),
+        [tokens]
+    );
+
+    return (
+        <View style={[styles.container, customStyles?.container]}>
+            <TouchableOpacity
+                onPress={onToggle}
+                style={[styles.header, customStyles?.header]}
+                activeOpacity={0.7}
+            >
+                <View style={[styles.content, customStyles?.content]}>
+                    <AtomicText
+                        type="bodyLarge"
+                        color="textPrimary"
+                        style={customStyles?.questionStyle}
+                        numberOfLines={isExpanded ? undefined : 2}
+                    >
+                        {item.question}
+                    </AtomicText>
+                </View>
+                <AtomicIcon
+                    name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                    size={20}
+                />
+            </TouchableOpacity>
+
+            {isExpanded && (
+                <View style={[styles.answerContainer, customStyles?.answerContainer]}>
+                    <AtomicText
+                        type="bodyMedium"
+                        color="textSecondary"
+                        style={customStyles?.answerStyle}
+                    >
+                        {item.answer}
+                    </AtomicText>
+                </View>
+            )}
+        </View>
+    );
+};

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

@@ -0,0 +1,70 @@
+/**
+ * FAQ Search Bar Component
+ * Search input for filtering FAQ items
+ * Uses design system tokens for theming
+ */
+
+import React, { useMemo } from 'react';
+import { View, TextInput, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { useResponsiveDesignTokens, AtomicIcon } from '@umituz/react-native-design-system';
+
+export interface FAQSearchBarStyles {
+    container?: ViewStyle;
+    input?: TextStyle;
+}
+
+export interface FAQSearchBarProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder: string;
+    styles?: FAQSearchBarStyles;
+}
+
+export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
+    value,
+    onChangeText,
+    placeholder,
+    styles: customStyles,
+}) => {
+    const tokens = useResponsiveDesignTokens();
+
+    const styles = useMemo(
+        () =>
+            StyleSheet.create({
+                container: {
+                    flexDirection: 'row' as const,
+                    alignItems: 'center' as const,
+                    backgroundColor: tokens.colors.surface,
+                    borderRadius: 12,
+                    paddingHorizontal: tokens.spacing.sm,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.border,
+                },
+                iconContainer: {
+                    marginRight: tokens.spacing.xs,
+                },
+                input: {
+                    flex: 1,
+                    paddingVertical: tokens.spacing.sm,
+                    fontSize: 16,
+                    color: tokens.colors.textPrimary,
+                },
+            }),
+        [tokens]
+    );
+
+    return (
+        <View style={[styles.container, customStyles?.container]}>
+            <View style={styles.iconContainer}>
+                <AtomicIcon name="search" size={18} />
+            </View>
+            <TextInput
+                style={[styles.input, customStyles?.input]}
+                value={value}
+                onChangeText={onChangeText}
+                placeholder={placeholder}
+                placeholderTextColor={tokens.colors.textTertiary}
+            />
+        </View>
+    );
+};

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

@@ -0,0 +1,50 @@
+/**
+ * FAQ Section Component
+ * Renders FAQ entry point for settings
+ */
+
+import React from 'react';
+import { AtomicIcon } from '@umituz/react-native-design-system';
+
+export interface FAQConfig {
+    enabled?: boolean;
+    title?: string;
+    description?: string;
+    onPress?: () => void;
+}
+
+export interface FAQSectionProps {
+    config: FAQConfig;
+    renderSection: (props: {
+        title: string;
+        children: React.ReactNode;
+    }) => React.ReactElement | null;
+    renderItem: (props: {
+        title: string;
+        icon: any;
+        onPress: () => void;
+        isLast?: boolean;
+    }) => React.ReactElement | null;
+}
+
+export const FAQSection: React.FC<FAQSectionProps> = ({
+    config,
+    renderSection,
+    renderItem,
+}) => {
+    if (!config.enabled) return null;
+
+    return (
+        <>
+            {renderSection({
+                title: config.title || 'Help & Support',
+                children: renderItem({
+                    title: config.description || 'FAQ',
+                    icon: 'help-circle-outline',
+                    onPress: config.onPress || (() => console.warn('No FAQ handler')),
+                    isLast: true,
+                }),
+            })}
+        </>
+    );
+};

package/src/domains/faqs/presentation/components/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @umituz/react-native-faqs - Components
+ */
+
+export { FAQSection } from './FAQSection';
+export type { FAQSectionProps, FAQConfig } from './FAQSection';
+
+export { FAQItemComponent } from './FAQItem';
+export type { FAQItemProps } from './FAQItem';
+
+export { FAQEmptyState } from './FAQEmptyState';
+export type { FAQEmptyStateProps } from './FAQEmptyState';
+
+export { FAQSearchBar } from './FAQSearchBar';
+export type { FAQSearchBarProps } from './FAQSearchBar';
+
+export { FAQCategoryComponent } from './FAQCategory';
+export type { FAQCategoryProps } from './FAQCategory';

package/src/domains/faqs/presentation/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @umituz/react-native-faqs - Hooks
+ */
+
+export { useFAQSearch } from './useFAQSearch';
+export { useFAQExpansion } from './useFAQExpansion';

package/src/domains/faqs/presentation/hooks/useFAQExpansion.ts

@@ -0,0 +1,51 @@
+/**
+ * FAQ Expansion Hook
+ * Manages FAQ item expansion state
+ */
+
+import { useState, useCallback } from 'react';
+
+export interface UseFAQExpansionResult {
+    expandedItems: Set<string>;
+    isExpanded: (itemId: string) => boolean;
+    toggleExpansion: (itemId: string) => void;
+    expandAll: (itemIds: string[]) => void;
+    collapseAll: () => void;
+}
+
+export function useFAQExpansion(): UseFAQExpansionResult {
+    const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+    const isExpanded = useCallback(
+        (itemId: string) => expandedItems.has(itemId),
+        [expandedItems]
+    );
+
+    const toggleExpansion = useCallback((itemId: string) => {
+        setExpandedItems(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(itemId)) {
+                newSet.delete(itemId);
+            } else {
+                newSet.add(itemId);
+            }
+            return newSet;
+        });
+    }, []);
+
+    const expandAll = useCallback((itemIds: string[]) => {
+        setExpandedItems(new Set(itemIds));
+    }, []);
+
+    const collapseAll = useCallback(() => {
+        setExpandedItems(new Set());
+    }, []);
+
+    return {
+        expandedItems,
+        isExpanded,
+        toggleExpansion,
+        expandAll,
+        collapseAll,
+    };
+}

package/src/domains/faqs/presentation/hooks/useFAQSearch.ts

@@ -0,0 +1,33 @@
+/**
+ * FAQ Search Hook
+ * Handles FAQ search state and filtering
+ */
+
+import { useState, useMemo } from 'react';
+import { FAQCategory } from '../../domain/entities/FAQEntity';
+import { FAQSearchService } from '../../domain/services/FAQSearchService';
+
+export interface UseFAQSearchResult {
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    filteredCategories: FAQCategory[];
+    hasResults: boolean;
+}
+
+export function useFAQSearch(categories: FAQCategory[]): UseFAQSearchResult {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const filteredCategories = useMemo(
+        () => FAQSearchService.searchCategories(searchQuery, categories),
+        [searchQuery, categories]
+    );
+
+    const hasResults = filteredCategories.length > 0 || !searchQuery.trim();
+
+    return {
+        searchQuery,
+        setSearchQuery,
+        filteredCategories,
+        hasResults,
+    };
+}