@umituz/react-native-settings 5.2.34 → 5.2.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.2.34",
+  "version": "5.2.36",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -37,10 +37,8 @@
     "type": "git",
     "url": "https://github.com/umituz/react-native-settings"
   },
-  "dependencies": {
-    "firebase": "^12.7.0"
-  },
   "peerDependencies": {
+    "firebase": ">=10.0.0",
     "@expo/vector-icons": ">=14.0.0",
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",

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

@@ -3,7 +3,7 @@
  * Pure presentational component for About screen
  * No business logic, only rendering
  */
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -15,14 +15,80 @@ import type { DesignTokens } from '@umituz/react-native-design-system';
 import type { AboutScreenProps } from './AboutScreen';
 
 export interface AboutScreenContentProps extends Omit<AboutScreenProps, 'config'> {
-  /** App info data */
   appInfo: AppInfo;
-  /** Configuration for the about screen */
   config: AboutConfig;
-  /** Design tokens */
   _tokens: DesignTokens;
 }
 
+interface AboutHeaderSectionProps {
+  appInfo: AppInfo;
+  config: AboutConfig;
+  showHeader: boolean;
+  headerComponent?: React.ReactNode;
+  headerStyle?: AboutScreenContentProps['headerStyle'];
+  titleStyle?: AboutScreenContentProps['titleStyle'];
+  versionStyle?: AboutScreenContentProps['versionStyle'];
+}
+
+const AboutHeaderSection: React.FC<AboutHeaderSectionProps> = ({
+  appInfo,
+  config,
+  showHeader,
+  headerComponent,
+  headerStyle,
+  titleStyle,
+  versionStyle,
+}) => {
+  if (headerComponent) {
+    return <>{headerComponent}</>;
+  }
+  if (!showHeader || !appInfo) {
+    return null;
+  }
+  return (
+    <AboutHeader
+      appInfo={appInfo}
+      containerStyle={headerStyle}
+      titleStyle={titleStyle}
+      versionStyle={versionStyle}
+      versionPrefix={config.texts?.versionPrefix}
+    />
+  );
+};
+
+interface AboutFooterSectionProps {
+  footerComponent?: React.ReactNode;
+  borderColor: string;
+  footerStyle: ReturnType<typeof getStyles>['footer'];
+}
+
+const AboutFooterSection: React.FC<AboutFooterSectionProps> = ({
+  footerComponent,
+  borderColor,
+  footerStyle,
+}) => {
+  if (!footerComponent) {
+    return null;
+  }
+  return (
+    <View style={[footerStyle, { borderTopColor: borderColor }]}>
+      {footerComponent}
+    </View>
+  );
+};
+
+interface AboutContentSectionProps {
+  appInfo: AppInfo;
+  config: AboutConfig;
+}
+
+const AboutContentSection: React.FC<AboutContentSectionProps> = ({ appInfo, config }) => {
+  if (!appInfo) {
+    return null;
+  }
+  return <AboutContent appInfo={appInfo} config={config} />;
+};
+
 export const AboutScreenContent: React.FC<AboutScreenContentProps> = ({
   appInfo,
   config,
@@ -39,71 +105,29 @@ export const AboutScreenContent: React.FC<AboutScreenContentProps> = ({
   const styles = getStyles(_tokens);
   const colors = _tokens.colors;
 
-  // Memoize header rendering to prevent unnecessary re-renders
-  const renderHeader = useCallback(() => {
-    if (headerComponent) {
-      return headerComponent;
-    }
+  const containerStyles = useMemo(() => [
+    styles.container,
+    { backgroundColor: colors.backgroundPrimary },
+    containerStyle
+  ], [containerStyle, colors.backgroundPrimary, styles]);
 
-    if (!showHeader || !appInfo) {
-      return null;
-    }
-
-    return (
-      <AboutHeader
+  return (
+    <View style={containerStyles} testID={testID}>
+      <AboutHeaderSection
         appInfo={appInfo}
-        containerStyle={headerStyle}
+        config={config}
+        showHeader={showHeader}
+        headerComponent={headerComponent}
+        headerStyle={headerStyle}
         titleStyle={titleStyle}
         versionStyle={versionStyle}
-        versionPrefix={config.texts?.versionPrefix}
       />
-    );
-  }, [headerComponent, showHeader, appInfo, headerStyle, titleStyle, versionStyle, config.texts?.versionPrefix]);
-
-  // Memoize footer rendering
-  const renderFooter = useCallback(() => {
-    if (!footerComponent) {
-      return null;
-    }
-
-    return (
-      <View style={[styles.footer, { borderTopColor: colors.border }]}>
-        {footerComponent}
-      </View>
-    );
-  }, [footerComponent, colors.border, styles]);
-
-  // Memoize content rendering
-  const renderContent = useCallback(() => {
-    if (!appInfo) {
-      return null;
-    }
-
-    return (
-      <AboutContent
-        appInfo={appInfo}
-        config={config}
+      <AboutContentSection appInfo={appInfo} config={config} />
+      <AboutFooterSection
+        footerComponent={footerComponent}
+        borderColor={colors.border}
+        footerStyle={styles.footer}
       />
-    );
-  }, [appInfo, config]);
-
-  // Memoize container style to prevent unnecessary re-renders
-  const containerStyles = useMemo(() => {
-    return [
-      styles.container,
-      { backgroundColor: colors.backgroundPrimary },
-      containerStyle
-    ];
-  }, [containerStyle, colors.backgroundPrimary, styles]);
-
-  return (
-    <View
-      style={containerStyles}
-      testID={testID}
-    >
-      {renderHeader()}
-      {renderContent()}
-      {renderFooter()}
     </View>
   );
 };

package/src/domains/appearance/data/colorPalettes.ts

@@ -64,26 +64,3 @@ export const DEFAULT_ACCENT_COLORS: ColorPalette = {
   ],
 };
 
-/**
- * Generate custom color palette
- * @param baseColor - Base color to generate variations from
- * @param count - Number of variations to generate
- * @returns Color palette with variations
- */
-export const generateColorPalette = (
-  baseColor: string, 
-  count: number = 8
-): ColorPalette => {
-  const colors: string[] = [];
-  
-  for (let i = 0; i < count; i++) {
-    // Simple color variation logic - in real implementation, 
-    // this would use HSL/HSV color space manipulation
-    colors.push(baseColor);
-  }
-  
-  return {
-    name: "custom",
-    colors,
-  };
-};

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

@@ -81,8 +81,6 @@ export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
   // Memoize styles to prevent unnecessary re-creation
   const styles = useMemo(() => getStyles(tokens), [tokens]);
 
-  // Memoize color fields to prevent unnecessary re-renders
-  const colorFieldsMemo = useMemo(() => colorFields, [colorFields]);
 
   // Stable callback for color change to prevent infinite re-renders
   const handleColorChange = useCallback((key: keyof CustomThemeColors, color: string) => {
@@ -104,7 +102,7 @@ export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
 
   // Memoize color pickers to prevent unnecessary re-renders
   const colorPickers = useMemo(() => {
-    return colorFieldsMemo.map((field) => (
+    return colorFields.map((field) => (
       <ColorPicker
         key={field.key}
         label={field.label}
@@ -113,7 +111,7 @@ export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
         colors={field.colorPalette}
       />
     ));
-  }, [colorFieldsMemo, localCustomColors, handleColorChange]);
+  }, [colorFields, localCustomColors, handleColorChange]);
 
   // Memoize reset button to prevent unnecessary re-renders
   const resetButton = useMemo(() => {

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

@@ -113,9 +113,9 @@ export const ThemeOption: React.FC<ThemeOptionProps> = React.memo(({
               {featuresTitle}
             </AtomicText>
           ) : null}
-          {features.map((feature, index) => (
+          {features.map((feature) => (
             <AtomicText
-              key={`feature-${index}-${feature.slice(0, 10)}`}
+              key={feature}
               type="bodySmall"
               color="secondary"
               style={styles.feature}

package/src/domains/dev/presentation/components/DevSettingsSection.tsx

@@ -39,11 +39,14 @@ export interface DevSettingsProps {
   customDevComponents?: React.ReactNode[];
 }
 
+const EMPTY_TEXTS: Partial<typeof DEFAULT_TEXTS> = {};
+const EMPTY_DEV_COMPONENTS: React.ReactNode[] = [];
+
 export const DevSettingsSection: React.FC<DevSettingsProps> = ({
   enabled = true,
   onAfterClear,
-  texts = {},
-  customDevComponents = [],
+  texts = EMPTY_TEXTS,
+  customDevComponents = EMPTY_DEV_COMPONENTS,
 }) => {
   const tokens = useAppDesignTokens();
 

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -122,37 +122,31 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     <View style={{ height: tokens.spacing.xl * 2 }} />
   ), [tokens.spacing.xl]);
 
-  const renderContent = () => {
-    return (
-      <View style={{ flex: 1 }}>
-        <FlatList
-          data={filteredCategories}
-          renderItem={renderCategory}
-          keyExtractor={keyExtractor}
-          ListHeaderComponent={renderListHeader}
-          ListEmptyComponent={renderListEmpty}
-          ListFooterComponent={renderListFooter}
-          style={[styles.content, customStyles?.content]}
-          contentContainerStyle={{ paddingVertical: tokens.spacing.md }}
-          showsVerticalScrollIndicator={false}
-          initialNumToRender={5}
-          maxToRenderPerBatch={5}
-          windowSize={10}
-          removeClippedSubviews={true}
-        />
-      </View>
-    );
-  };
-
   return (
-    <ScreenLayout 
-      edges={['bottom']} 
+    <ScreenLayout
+      edges={['bottom']}
       scrollable={false}
       header={header}
     >
       <View style={[styles.container, customStyles?.container]}>
         <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth, flex: 1 }}>
-          {renderContent()}
+          <View style={{ flex: 1 }}>
+            <FlatList
+              data={filteredCategories}
+              renderItem={renderCategory}
+              keyExtractor={keyExtractor}
+              ListHeaderComponent={renderListHeader}
+              ListEmptyComponent={renderListEmpty}
+              ListFooterComponent={renderListFooter}
+              style={[styles.content, customStyles?.content]}
+              contentContainerStyle={{ paddingVertical: tokens.spacing.md }}
+              showsVerticalScrollIndicator={false}
+              initialNumToRender={5}
+              maxToRenderPerBatch={5}
+              windowSize={10}
+              removeClippedSubviews={true}
+            />
+          </View>
         </View>
       </View>
     </ScreenLayout>

package/src/domains/feedback/presentation/components/FeedbackForm.tsx

@@ -3,13 +3,140 @@
  * Form for submitting user feedback with type, rating, and description
  */
 
-import React, { useState } from "react";
+import React, { useReducer } from "react";
 import { View, TouchableOpacity, ScrollView, TextInput } from "react-native";
 import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import { validateFeedbackForm } from "../../../../infrastructure/utils/validation";
 import type { FeedbackFormProps } from "./FeedbackFormProps";
 import { getFeedbackFormStyles as getStyles } from "./FeedbackForm.styles";
+import type { DesignTokens } from "@umituz/react-native-design-system";
+
+interface FeedbackFormState {
+    selectedType: FeedbackType;
+    rating: FeedbackRating;
+    description: string;
+    title: string;
+    error: string | null;
+    isSubmittingLocal: boolean;
+}
+
+type FeedbackFormAction =
+    | { type: 'SET_TYPE'; payload: FeedbackType }
+    | { type: 'SET_RATING'; payload: FeedbackRating }
+    | { type: 'SET_DESCRIPTION'; payload: string }
+    | { type: 'SET_TITLE'; payload: string }
+    | { type: 'SET_ERROR'; payload: string | null }
+    | { type: 'SET_SUBMITTING'; payload: boolean }
+    | { type: 'RESET_FORM'; payload: FeedbackRating };
+
+function feedbackFormReducer(state: FeedbackFormState, action: FeedbackFormAction): FeedbackFormState {
+    switch (action.type) {
+        case 'SET_TYPE':
+            return { ...state, selectedType: action.payload };
+        case 'SET_RATING':
+            return { ...state, rating: action.payload };
+        case 'SET_DESCRIPTION':
+            return { ...state, description: action.payload, error: null };
+        case 'SET_TITLE':
+            return { ...state, title: action.payload };
+        case 'SET_ERROR':
+            return { ...state, error: action.payload };
+        case 'SET_SUBMITTING':
+            return { ...state, isSubmittingLocal: action.payload };
+        case 'RESET_FORM':
+            return { ...state, description: "", title: "", rating: action.payload };
+    }
+}
+
+const STAR_VALUES = [1, 2, 3, 4, 5] as const;
+
+interface FeedbackRatingSectionProps {
+    rating: FeedbackRating;
+    onRatingChange: (star: FeedbackRating) => void;
+    ratingLabel: string;
+    styles: ReturnType<typeof getStyles>;
+    tokens: DesignTokens;
+}
+
+const FeedbackRatingSection: React.FC<FeedbackRatingSectionProps> = ({
+    rating,
+    onRatingChange,
+    ratingLabel,
+    styles,
+    tokens,
+}) => (
+    <View style={styles.ratingContainer}>
+        <AtomicText type="bodyMedium" style={{ marginBottom: 8, color: tokens.colors.textSecondary }}>
+            {ratingLabel}
+        </AtomicText>
+        <View style={styles.stars}>
+            {STAR_VALUES.map((star) => (
+                <TouchableOpacity
+                    key={star}
+                    onPress={() => onRatingChange(star as FeedbackRating)}
+                    style={styles.starButton}
+                >
+                    <AtomicIcon
+                        name={star <= rating ? "star" : "star-outline"}
+                        customSize={32}
+                        customColor={star <= rating ? tokens.colors.warning : tokens.colors.border}
+                    />
+                </TouchableOpacity>
+            ))}
+        </View>
+    </View>
+);
+
+interface FeedbackTypeSelectorProps {
+    feedbackTypes: Array<{ type: FeedbackType; label: string }>;
+    selectedType: FeedbackType;
+    onTypeSelect: (type: FeedbackType) => void;
+    styles: ReturnType<typeof getStyles>;
+    tokens: DesignTokens;
+}
+
+const FeedbackTypeSelector: React.FC<FeedbackTypeSelectorProps> = ({
+    feedbackTypes,
+    selectedType,
+    onTypeSelect,
+    styles,
+    tokens,
+}) => (
+    <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.typeScroll}
+        style={styles.typeContainer}
+    >
+        {feedbackTypes.map((item) => {
+            const isSelected = selectedType === item.type;
+            return (
+                <TouchableOpacity
+                    key={item.type}
+                    style={[
+                        styles.typeButton,
+                        {
+                            backgroundColor: isSelected ? tokens.colors.primary : tokens.colors.surface,
+                            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                        },
+                    ]}
+                    onPress={() => onTypeSelect(item.type)}
+                >
+                    <AtomicText
+                        type="bodySmall"
+                        style={{
+                            color: isSelected ? tokens.colors.onPrimary : tokens.colors.textSecondary,
+                            fontWeight: isSelected ? "600" : "400",
+                        }}
+                    >
+                        {item.label}
+                    </AtomicText>
+                </TouchableOpacity>
+            );
+        })}
+    </ScrollView>
+);
 
 export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     onSubmit,
@@ -19,15 +146,19 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
 }) => {
     const tokens = useAppDesignTokens();
     const styles = getStyles(tokens);
-    const [selectedType, setSelectedType] = useState<FeedbackType>(initialType || texts.feedbackTypes[0].type);
-    const [rating, setRating] = useState<FeedbackRating>(5);
-    const [description, setDescription] = useState("");
-    const [title, setTitle] = useState("");
-    const [error, setError] = useState<string | null>(null);
-    const [isSubmittingLocal, setIsSubmittingLocal] = useState(false);
+
+    const [state, dispatch] = useReducer(feedbackFormReducer, {
+        selectedType: initialType || texts.feedbackTypes[0].type,
+        rating: 5,
+        description: "",
+        title: "",
+        error: null,
+        isSubmittingLocal: false,
+    });
+
+    const { selectedType, rating, description, title, error, isSubmittingLocal } = state;
 
     const handleSubmit = async () => {
-        // Validate using centralized validation
         const validationResult = validateFeedbackForm({
             type: selectedType,
             rating,
@@ -35,12 +166,12 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
         });
 
         if (!validationResult.isValid) {
-            setError(validationResult.error || "Validation failed");
+            dispatch({ type: 'SET_ERROR', payload: validationResult.error || "Validation failed" });
             return;
         }
 
-        setIsSubmittingLocal(true);
-        setError(null);
+        dispatch({ type: 'SET_SUBMITTING', payload: true });
+        dispatch({ type: 'SET_ERROR', payload: null });
 
         try {
             await onSubmit({
@@ -50,90 +181,38 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
                 title: title || texts.defaultTitle(selectedType),
             });
 
-            // Clear form on success
-            setDescription("");
-            setTitle("");
-            setRating(5);
+            dispatch({ type: 'RESET_FORM', payload: 5 });
         } catch (err) {
             const errorMessage = err instanceof Error ? err.message : "Failed to submit feedback";
-            setError(errorMessage);
+            dispatch({ type: 'SET_ERROR', payload: errorMessage });
         } finally {
-            setIsSubmittingLocal(false);
+            dispatch({ type: 'SET_SUBMITTING', payload: false });
         }
     };
 
-    const renderRating = () => (
-        <View style={styles.ratingContainer}>
-            <AtomicText type="bodyMedium" style={{ marginBottom: 8, color: tokens.colors.textSecondary }}>
-                {texts.ratingLabel}
-            </AtomicText>
-            <View style={styles.stars}>
-                {[1, 2, 3, 4, 5].map((star) => (
-                    <TouchableOpacity
-                        key={star}
-                        onPress={() => setRating(star as FeedbackRating)}
-                        style={styles.starButton}
-                    >
-                        <AtomicIcon
-                            name={star <= rating ? "star" : "star-outline"}
-                            customSize={32}
-                            customColor={star <= rating ? tokens.colors.warning : tokens.colors.border}
-                        />
-                    </TouchableOpacity>
-                ))}
-            </View>
-        </View>
-    );
-
-    const renderTypeSelector = () => (
-        <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.typeScroll}
-            style={styles.typeContainer}
-        >
-            {texts.feedbackTypes.map((item) => {
-                const isSelected = selectedType === item.type;
-
-                return (
-                    <TouchableOpacity
-                        key={item.type}
-                        style={[
-                            styles.typeButton,
-                            {
-                                backgroundColor: isSelected ? tokens.colors.primary : tokens.colors.surface,
-                                borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-                            },
-                        ]}
-                        onPress={() => setSelectedType(item.type)}
-                    >
-                        <AtomicText
-                            type="bodySmall"
-                            style={{
-                                color: isSelected ? tokens.colors.onPrimary : tokens.colors.textSecondary,
-                                fontWeight: isSelected ? "600" : "400",
-                            }}
-                        >
-                            {item.label}
-                        </AtomicText>
-                    </TouchableOpacity>
-                );
-            })}
-        </ScrollView>
-    );
-
     return (
         <View style={styles.container}>
-            {renderTypeSelector()}
+            <FeedbackTypeSelector
+                feedbackTypes={texts.feedbackTypes}
+                selectedType={selectedType}
+                onTypeSelect={(type: FeedbackType) => dispatch({ type: 'SET_TYPE', payload: type })}
+                styles={styles}
+                tokens={tokens}
+            />
 
-            {renderRating()}
+            <FeedbackRatingSection
+                rating={rating}
+                onRatingChange={(star: FeedbackRating) => dispatch({ type: 'SET_RATING', payload: star })}
+                ratingLabel={texts.ratingLabel}
+                styles={styles}
+                tokens={tokens}
+            />
 
             <View style={styles.inputContainer}>
                 <TextInput
                     value={description}
                     onChangeText={(text) => {
-                        setDescription(text);
-                        setError(null); // Clear error on input
+                        dispatch({ type: 'SET_DESCRIPTION', payload: text });
                     }}
                     placeholder={texts.descriptionPlaceholder}
                     placeholderTextColor={tokens.colors.textTertiary}