@umituz/react-native-settings 4.20.28 → 4.20.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.28",
+  "version": "4.20.30",
   "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",

package/src/domains/cloud-sync/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Cloud Sync Domain
+ * Cloud synchronization settings and status
+ */
+
+export { CloudSyncSetting } from "./presentation/components/CloudSyncSetting";
+export type { CloudSyncSettingProps } from "./presentation/components/CloudSyncSetting";

package/src/{presentation → domains/cloud-sync/presentation}/components/CloudSyncSetting.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useMemo } from "react";
-import { SettingItem } from "./SettingItem";
+import { SettingsItemCard } from "../../../../presentation/components/SettingsItemCard";
 
 export interface CloudSyncSettingProps {
   title?: string;
@@ -13,7 +13,6 @@ export interface CloudSyncSettingProps {
   lastSynced?: Date | null;
   onPress?: () => void;
   disabled?: boolean;
-  isLast?: boolean;
 }
 
 const formatLastSynced = (date: Date): string => {
@@ -42,7 +41,6 @@ export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
   lastSynced,
   onPress,
   disabled = false,
-  isLast = false,
 }) => {
   const displayValue = useMemo(() => {
     if (isSyncing) {
@@ -58,13 +56,12 @@ export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
   }, [isSyncing, description, lastSynced]);
 
   return (
-    <SettingItem
+    <SettingsItemCard
       icon="cloud"
       title={title}
-      value={displayValue}
+      description={displayValue}
       onPress={onPress}
       disabled={disabled || isSyncing}
-      isLast={isLast}
     />
   );
 };

package/src/domains/dev/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Dev Domain
+ * Development-only settings and utilities
+ * Only visible in __DEV__ mode
+ */
+
+export { DevSettingsSection } from "./presentation/components/DevSettingsSection";
+export type { DevSettingsProps } from "./presentation/components/DevSettingsSection";
+
+export { StorageClearSetting } from "./presentation/components/StorageClearSetting";
+export type { StorageClearSettingProps } from "./presentation/components/StorageClearSetting";

package/src/{presentation → domains/dev/presentation}/components/DevSettingsSection.tsx

@@ -11,8 +11,8 @@ import React from "react";
 import { Alert } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { storageRepository } from "@umituz/react-native-storage";
-import { SettingsSection } from "./SettingsSection";
-import { SettingItem } from "./SettingItem";
+import { SettingsSection } from "../../../../presentation/components/SettingsSection";
+import { SettingsItemCard } from "../../../../presentation/components/SettingsItemCard";
 
 // Default texts (English only - DEV feature)
 const DEFAULT_TEXTS = {
@@ -100,14 +100,12 @@ export const DevSettingsSection: React.FC<DevSettingsProps> = ({
   return (
     <SettingsSection title={t.sectionTitle}>
       {customDevComponents.map((component) => component)}
-      <SettingItem
+      <SettingsItemCard
         icon="trash-outline"
         title={t.clearTitle}
-        value={t.clearDescription}
+        description={t.clearDescription}
         onPress={handleClearData}
         iconColor={tokens.colors.error}
-        titleColor={tokens.colors.error}
-        isLast={true}
       />
     </SettingsSection>
   );

package/src/{presentation → domains/dev/presentation}/components/StorageClearSetting.tsx

@@ -5,15 +5,13 @@
  */
 
 import React from "react";
-import { SettingItem } from "./SettingItem";
+import { SettingsItemCard } from "../../../../presentation/components/SettingsItemCard";
 
 export interface StorageClearSettingProps {
   title?: string;
   description?: string;
   onPress?: () => void;
   iconColor?: string;
-  titleColor?: string;
-  isLast?: boolean;
 }
 
 export const StorageClearSetting: React.FC<StorageClearSettingProps> = ({
@@ -21,28 +19,23 @@ export const StorageClearSetting: React.FC<StorageClearSettingProps> = ({
   description,
   onPress,
   iconColor,
-  titleColor,
-  isLast = false,
 }) => {
-  // Default values for DEV mode
-  const defaultTitle = title || "Clear All Storage";
-  const defaultDescription = description || "Clear all local storage data (DEV only)";
-  const defaultIconColor = iconColor || "#EF4444";
-  const defaultTitleColor = titleColor || "#EF4444";
   // Only render in DEV mode
   if (!__DEV__) {
     return null;
   }
 
+  const defaultTitle = title || "Clear All Storage";
+  const defaultDescription = description || "Clear all local storage data (DEV only)";
+  const defaultIconColor = iconColor || "#EF4444";
+
   return (
-    <SettingItem
+    <SettingsItemCard
       icon="trash-outline"
       title={defaultTitle}
-      value={defaultDescription}
+      description={defaultDescription}
       onPress={onPress}
       iconColor={defaultIconColor}
-      titleColor={defaultTitleColor}
-      isLast={isLast}
     />
   );
 };

package/src/domains/video-tutorials/index.ts

@@ -1,9 +1,19 @@
 /**
  * Video Tutorials Domain
+ *
+ * Props-based component - pass tutorials data from app config
+ *
+ * Usage:
+ *   import { VideoTutorialsScreen, VideoTutorialCard, VideoTutorial } from '@umituz/react-native-settings';
+ *
+ *   <VideoTutorialsScreen
+ *     tutorials={myTutorials}
+ *     featuredTutorials={myFeaturedTutorials}
+ *     onTutorialPress={(tutorial) => Linking.openURL(tutorial.videoUrl)}
+ *   />
  */
 
 export * from "./types";
 export * from "./presentation/screens/VideoTutorialsScreen";
 export * from "./presentation/components/VideoTutorialCard";
-export * from "./presentation/hooks";
-export * from "./infrastructure/services/video-tutorial.service";
+export * from "./presentation/components/VideoTutorialSection";

package/src/domains/video-tutorials/presentation/components/VideoTutorialSection.tsx

@@ -0,0 +1,52 @@
+/**
+ * Video Tutorial Section Component
+ * Renders Video Tutorial entry point for settings
+ */
+
+import React from 'react';
+
+export interface VideoTutorialConfig {
+    enabled?: boolean;
+    title?: string;
+    description?: string;
+    onPress?: () => void;
+}
+
+export interface VideoTutorialSectionProps {
+    config: VideoTutorialConfig;
+    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 VideoTutorialSection: React.FC<VideoTutorialSectionProps> = ({
+    config,
+    renderSection,
+    renderItem,
+}) => {
+    // onPress is required for VideoTutorial section to be functional
+    if (!config.enabled || !config.title || !config.description || !config.onPress) {
+        return null;
+    }
+
+    return (
+        <>
+            {renderSection({
+                title: config.title,
+                children: renderItem({
+                    title: config.description,
+                    icon: 'play-circle',
+                    onPress: config.onPress,
+                    isLast: true,
+                }),
+            })}
+        </>
+    );
+};

package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx

@@ -1,6 +1,14 @@
 /**
  * Video Tutorials Screen
  * Single Responsibility: Display video tutorials list
+ *
+ * Usage:
+ *   <VideoTutorialsScreen
+ *     tutorials={[...]}
+ *     featuredTutorials={[...]}
+ *     title="Video Tutorials"
+ *     onTutorialPress={(id) => openVideo(id)}
+ *   />
  */
 
 import React from "react";
@@ -13,9 +21,16 @@ import {
 } from "@umituz/react-native-design-system";
 import type { VideoTutorial } from "../../types";
 import { VideoTutorialCard } from "../components/VideoTutorialCard";
-import { useVideoTutorials, useFeaturedTutorials } from "../hooks";
 
 export interface VideoTutorialsScreenProps {
+  /**
+   * All tutorials to display (required)
+   */
+  tutorials: VideoTutorial[];
+  /**
+   * Featured tutorials to display in horizontal scroll (optional)
+   */
+  featuredTutorials?: VideoTutorial[];
   /**
    * Title of the screen
    */
@@ -29,63 +44,37 @@ export interface VideoTutorialsScreenProps {
    */
   allTutorialsTitle?: string;
   /**
-   * Error message to show when tutorials fail to load
+   * Empty state message when no tutorials
    */
-  errorLoadingMessage?: string;
+  emptyMessage?: string;
   /**
-   * Maximum number of featured tutorials to show
+   * Loading state (optional - defaults to false)
    */
-  maxFeaturedCount?: number;
+  isLoading?: boolean;
   /**
    * Callback when a tutorial is pressed
    */
-  onTutorialPress?: (tutorialId: string) => void;
-  /**
-   * Optional manual override for loading state
-   */
-  customIsLoading?: boolean;
-  /**
-   * Optional manual override for all tutorials data
-   */
-  customAllTutorials?: VideoTutorial[];
-  /**
-   * Optional manual override for featured tutorials data
-   */
-  customFeaturedTutorials?: VideoTutorial[];
+  onTutorialPress?: (tutorial: VideoTutorial) => void;
 }
 
 export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
   React.memo(
     ({
+      tutorials,
+      featuredTutorials,
       title = "Video Tutorials",
       featuredTitle = "Featured",
       allTutorialsTitle = "All Tutorials",
-      errorLoadingMessage = "Failed to load tutorials.",
-      maxFeaturedCount = 3,
+      emptyMessage = "No tutorials available.",
+      isLoading = false,
       onTutorialPress,
-      customIsLoading,
-      customAllTutorials,
-      customFeaturedTutorials,
     }) => {
       const tokens = useAppDesignTokens();
       const styles = getStyles(tokens);
 
-      const featuredQuery = useFeaturedTutorials(maxFeaturedCount);
-      const allQuery = useVideoTutorials();
-
-      const isLoading =
-        customIsLoading !== undefined
-          ? customIsLoading
-          : featuredQuery.isLoading || allQuery.isLoading;
-      const error = featuredQuery.error || allQuery.error;
-
-      const featuredTutorials =
-        customFeaturedTutorials || featuredQuery.data || [];
-      const allTutorials = customAllTutorials || allQuery.data || [];
-
       const handleTutorialPress = React.useCallback(
-        (tutorialId: string) => {
-          onTutorialPress?.(tutorialId);
+        (tutorial: VideoTutorial) => {
+          onTutorialPress?.(tutorial);
         },
         [onTutorialPress],
       );
@@ -94,7 +83,18 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
         ({ item }: { item: VideoTutorial }) => (
           <VideoTutorialCard
             tutorial={item}
-            onPress={() => handleTutorialPress(item.id)}
+            onPress={() => handleTutorialPress(item)}
+          />
+        ),
+        [handleTutorialPress],
+      );
+
+      const renderFeaturedItem = React.useCallback(
+        ({ item }: { item: VideoTutorial }) => (
+          <VideoTutorialCard
+            tutorial={item}
+            onPress={() => handleTutorialPress(item)}
+            horizontal
           />
         ),
         [handleTutorialPress],
@@ -104,11 +104,14 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
         return <AtomicSpinner size="lg" fullContainer />;
       }
 
-      if (error) {
+      const hasFeatured = featuredTutorials && featuredTutorials.length > 0;
+      const hasTutorials = tutorials && tutorials.length > 0;
+
+      if (!hasTutorials && !hasFeatured) {
         return (
-          <View style={styles.errorContainer}>
-            <AtomicText color="error" type="bodyLarge">
-              {errorLoadingMessage}
+          <View style={styles.emptyContainer}>
+            <AtomicText color="secondary" type="bodyLarge">
+              {emptyMessage}
             </AtomicText>
           </View>
         );
@@ -120,7 +123,7 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
             {title}
           </Text>
 
-          {featuredTutorials && featuredTutorials.length > 0 && (
+          {hasFeatured && (
             <View style={styles.section}>
               <Text
                 style={[
@@ -132,7 +135,7 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
               </Text>
               <FlatList
                 data={featuredTutorials}
-                renderItem={renderTutorialItem}
+                renderItem={renderFeaturedItem}
                 keyExtractor={(item: VideoTutorial) => item.id}
                 horizontal
                 showsHorizontalScrollIndicator={false}
@@ -141,23 +144,25 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
             </View>
           )}
 
-          <View style={styles.section}>
-            <Text
-              style={[
-                styles.sectionTitle,
-                { color: tokens.colors.textSecondary },
-              ]}
-            >
-              {allTutorialsTitle}
-            </Text>
-            <FlatList
-              data={allTutorials}
-              renderItem={renderTutorialItem}
-              keyExtractor={(item: VideoTutorial) => item.id}
-              showsVerticalScrollIndicator={false}
-              contentContainerStyle={styles.verticalList}
-            />
-          </View>
+          {hasTutorials && (
+            <View style={styles.section}>
+              <Text
+                style={[
+                  styles.sectionTitle,
+                  { color: tokens.colors.textSecondary },
+                ]}
+              >
+                {allTutorialsTitle}
+              </Text>
+              <FlatList
+                data={tutorials}
+                renderItem={renderTutorialItem}
+                keyExtractor={(item: VideoTutorial) => item.id}
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={styles.verticalList}
+              />
+            </View>
+          )}
         </ScreenLayout>
       );
     },
@@ -165,29 +170,29 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
 
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
-  title: {
-    fontSize: tokens.typography.headlineLarge.fontSize,
-    fontWeight: "600",
-    marginBottom: 24,
-  },
-  section: {
-    marginBottom: 24,
-  },
-  sectionTitle: {
-    fontSize: tokens.typography.titleLarge.fontSize,
-    fontWeight: "500",
-    marginBottom: 12,
-  },
-  horizontalList: {
-    paddingRight: 16,
-  },
-  verticalList: {
-    paddingBottom: 16,
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 20,
-  },
-});
+    title: {
+      fontSize: tokens.typography.headlineLarge.fontSize,
+      fontWeight: "600",
+      marginBottom: 24,
+    },
+    section: {
+      marginBottom: 24,
+    },
+    sectionTitle: {
+      fontSize: tokens.typography.titleLarge.fontSize,
+      fontWeight: "500",
+      marginBottom: 12,
+    },
+    horizontalList: {
+      paddingRight: 16,
+    },
+    verticalList: {
+      paddingBottom: 16,
+    },
+    emptyContainer: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      padding: 20,
+    },
+  });

package/src/index.ts

@@ -5,7 +5,7 @@
  * User preferences, theme, language, notifications
  *
  * Usage:
- *   import { useSettings, useSettingsStore, SettingsScreen, AppearanceScreen, LanguageSelectionScreen, SettingItem, DisclaimerSetting } from '@umituz/react-native-settings';
+ *   import { useSettings, SettingsScreen, AppearanceScreen, SettingsItemCard, DisclaimerSetting } from '@umituz/react-native-settings';
  */
 
 // =============================================================================
@@ -74,9 +74,6 @@ export type {
 // PRESENTATION LAYER - Components
 // =============================================================================
 
-export { SettingItem } from './presentation/components/SettingItem';
-export type { SettingItemProps } from './presentation/components/SettingItem';
-
 export { SettingsItemCard } from './presentation/components/SettingsItemCard';
 export type { SettingsItemCardProps } from './presentation/components/SettingsItemCard';
 
@@ -88,14 +85,6 @@ export type { SettingsFooterProps } from './presentation/components/SettingsFoot
 
 export { SettingsErrorBoundary } from './presentation/components/SettingsErrorBoundary';
 
-export { StorageClearSetting } from './presentation/components/StorageClearSetting';
-export type { StorageClearSettingProps } from './presentation/components/StorageClearSetting';
-
-export { CloudSyncSetting } from './presentation/components/CloudSyncSetting';
-export type { CloudSyncSettingProps } from './presentation/components/CloudSyncSetting';
-
-export { DevSettingsSection } from './presentation/components/DevSettingsSection';
-export type { DevSettingsProps } from './presentation/components/DevSettingsSection';
 
 // =============================================================================
 // DOMAIN EXPORTS - Consolidated Features
@@ -125,6 +114,12 @@ export * from "./domains/rating";
 // Video Tutorials Domain - Learning resources, tutorials
 export * from "./domains/video-tutorials";
 
+// Cloud Sync Domain - Cloud synchronization settings
+export * from "./domains/cloud-sync";
+
+// Dev Domain - Development-only settings (DEV mode)
+export * from "./domains/dev";
+
 // =============================================================================
 // PRESENTATION LAYER - Re-exports from Dependencies
 // =============================================================================

package/src/presentation/components/SettingsItemCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Pressable, StyleSheet, ViewStyle } from "react-native";
+import { View, Pressable, StyleSheet, ViewStyle, Switch } from "react-native";
 import {
     useAppDesignTokens,
     AtomicIcon,
@@ -28,6 +28,14 @@ export interface SettingsItemCardProps {
     iconColor?: string;
     /** Show chevron even if not clickable */
     showChevron?: boolean;
+    /** Show switch instead of chevron */
+    showSwitch?: boolean;
+    /** Switch value (when showSwitch is true) */
+    switchValue?: boolean;
+    /** Switch change handler */
+    onSwitchChange?: (value: boolean) => void;
+    /** Disable the item */
+    disabled?: boolean;
 }
 
 /**
@@ -47,14 +55,40 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     iconBgColor,
     iconColor,
     showChevron,
+    showSwitch = false,
+    switchValue,
+    onSwitchChange,
+    disabled = false,
 }) => {
     const tokens = useAppDesignTokens();
     const colors = tokens.colors;
 
     const defaultIconBg = iconBgColor || `${colors.primary}15`;
     const defaultIconColor = iconColor || colors.primary;
-    const isClickable = !!onPress;
-    const shouldShowChevron = showChevron ?? isClickable;
+    const isClickable = !!onPress && !showSwitch;
+    const shouldShowChevron = !showSwitch && (showChevron ?? isClickable);
+
+    const renderRightElement = () => {
+        if (showSwitch) {
+            return (
+                <Switch
+                    value={switchValue}
+                    onValueChange={onSwitchChange}
+                    trackColor={{
+                        false: colors.surfaceVariant,
+                        true: colors.primary,
+                    }}
+                    thumbColor={colors.surface}
+                    ios_backgroundColor={colors.surfaceVariant}
+                    disabled={disabled}
+                />
+            );
+        }
+        if (shouldShowChevron) {
+            return <AtomicIcon name={rightIcon} size="sm" color="secondary" />;
+        }
+        return null;
+    };
 
     const renderContent = () => (
         <View style={styles.content}>
@@ -64,9 +98,9 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
             <View style={styles.textContainer}>
                 <AtomicText
                     type="bodyLarge"
-                    color="onSurface"
+                    color={disabled ? "surfaceVariant" : "onSurface"}
                     numberOfLines={1}
-                    style={{ marginBottom: tokens.spacing.xs }}
+                    style={{ marginBottom: description ? tokens.spacing.xs : 0, opacity: disabled ? 0.6 : 1 }}
                 >
                     {title}
                 </AtomicText>
@@ -76,9 +110,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
                     </AtomicText>
                 )}
             </View>
-            {shouldShowChevron && (
-                <AtomicIcon name={rightIcon} size="sm" color="secondary" />
-            )}
+            {renderRightElement()}
         </View>
     );
 

package/src/presentation/navigation/types.ts

@@ -3,7 +3,7 @@
  */
 
 import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
-import type { DevSettingsProps } from "../components/DevSettingsSection";
+import type { DevSettingsProps } from "../../domains/dev";
 import type { FAQCategory } from "../../domains/faqs";
 
 /**

package/src/presentation/screens/SettingsScreen.tsx

@@ -16,7 +16,7 @@ import { SettingsErrorBoundary } from "../components/SettingsErrorBoundary";
 import { normalizeSettingsConfig } from "./utils/normalizeConfig";
 import { useFeatureDetection } from "./hooks/useFeatureDetection";
 import type { SettingsConfig, CustomSettingsSection } from "./types";
-import type { DevSettingsProps } from "../components/DevSettingsSection";
+import type { DevSettingsProps } from "../../domains/dev";
 
 export interface SettingsScreenProps {
   config?: SettingsConfig;

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

@@ -3,7 +3,7 @@ import { View, StyleSheet } from "react-native";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { SettingsSection } from "../../components/SettingsSection";
-import { DevSettingsSection, DevSettingsProps } from "../../components/DevSettingsSection";
+import { DevSettingsSection, DevSettingsProps } from "../../../domains/dev";
 import { DisclaimerSetting } from "../../../domains/disclaimer";
 import { ProfileSectionLoader } from "./sections/ProfileSectionLoader";
 import { FeatureSettingsSection } from "./sections/FeatureSettingsSection";

package/src/presentation/screens/components/sections/SupportSettingsSection.tsx

@@ -3,7 +3,7 @@ import { useLocalization } from "@umituz/react-native-localization";
 import { SupportSection } from "../../../../domains/feedback/presentation/components/SupportSection";
 import { FAQSection } from "../../../../domains/faqs/presentation/components/FAQSection";
 import { SettingsSection } from "../../../components/SettingsSection";
-import { SettingItem } from "../../../components/SettingItem";
+import { SettingsItemCard } from "../../../components/SettingsItemCard";
 
 interface SupportSettingsSectionProps {
     features: any;
@@ -23,7 +23,7 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
             {(features.feedback || features.rating) && (
                 <SupportSection
                     renderSection={(props: any) => <>{props.children}</>}
-                    renderItem={(props: any) => <SettingItem {...props} />}
+                    renderItem={(props: any) => <SettingsItemCard title={props.title} icon={props.icon} onPress={props.onPress} />}
                     feedbackConfig={{
                         enabled: features.feedback,
                         config: {
@@ -70,7 +70,7 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
             {features.faqs && (
                 <FAQSection
                     renderSection={(props: any) => <>{props.children}</>}
-                    renderItem={(props: any) => <SettingItem {...props} />}
+                    renderItem={(props: any) => <SettingsItemCard title={props.title} icon={props.icon} onPress={props.onPress} />}
                     config={{
                         enabled: features.faqs,
                         ...normalizedConfig.faqs.config,

package/src/domains/video-tutorials/infrastructure/services/video-tutorial.service.ts

@@ -1,117 +0,0 @@
-/**
- * Video Tutorial Service
- * Single Responsibility: Handle video tutorial data operations
- */
-
-import {
-  collection,
-  getDocs,
-  query,
-  orderBy,
-  where,
-  limit,
-} from "firebase/firestore";
-import type { Firestore, QueryConstraint } from "firebase/firestore";
-import type {
-  VideoTutorial,
-  VideoTutorialCategory,
-  VideoTutorialFilters,
-} from "../../types";
-
-export interface VideoTutorialServiceConfig {
-  db?: Firestore;
-  collectionName?: string;
-}
-
-class VideoTutorialService {
-  private config: VideoTutorialServiceConfig = {
-    collectionName: "video_tutorials",
-  };
-
-  initialize(config: VideoTutorialServiceConfig) {
-    this.config = { ...this.config, ...config };
-  }
-
-  private get db(): Firestore {
-    if (!this.config.db) {
-      throw new Error("VideoTutorialService: Firestore not initialized. Call initialize({ db }) first.");
-    }
-    return this.config.db;
-  }
-
-  private get collectionName(): string {
-    return this.config.collectionName || "video_tutorials";
-  }
-
-  async getAllTutorials(
-    filters?: VideoTutorialFilters,
-  ): Promise<VideoTutorial[]> {
-    const constraints: QueryConstraint[] = [];
-
-    if (filters?.category) {
-      constraints.push(where("category", "==", filters.category));
-    }
-
-    if (filters?.difficulty) {
-      constraints.push(where("difficulty", "==", filters.difficulty));
-    }
-
-    if (filters?.featured !== undefined) {
-      constraints.push(where("featured", "==", filters.featured));
-    }
-
-    constraints.push(orderBy("createdAt", "desc"));
-
-    const q = query(collection(this.db, this.collectionName), ...constraints);
-    const snapshot = await getDocs(q);
-
-    return snapshot.docs.map((doc) => this.mapDocumentToTutorial(doc));
-  }
-
-  async getFeaturedTutorials(maxCount: number = 5): Promise<VideoTutorial[]> {
-    const q = query(
-      collection(this.db, this.collectionName),
-      where("featured", "==", true),
-      orderBy("createdAt", "desc"),
-      limit(maxCount),
-    );
-
-    const snapshot = await getDocs(q);
-    return snapshot.docs.map((doc) => this.mapDocumentToTutorial(doc));
-  }
-
-  async getTutorialsByCategory(
-    category: VideoTutorialCategory,
-  ): Promise<VideoTutorial[]> {
-    const q = query(
-      collection(this.db, this.collectionName),
-      where("category", "==", category),
-      orderBy("createdAt", "desc"),
-    );
-
-    const snapshot = await getDocs(q);
-    return snapshot.docs.map((doc) => this.mapDocumentToTutorial(doc));
-  }
-
-  private mapDocumentToTutorial(doc: any): VideoTutorial {
-    const data = doc.data();
-    return {
-      id: doc.id,
-      title: data.title || "",
-      description: data.description || "",
-      videoUrl: data.videoUrl || "",
-      thumbnailUrl: data.thumbnailUrl || "",
-      duration: data.duration || 0,
-      category: data.category || "getting-started",
-      difficulty: data.difficulty || "beginner",
-      featured: data.featured || false,
-      tags: data.tags || [],
-      createdAt: data.createdAt?.toDate() || new Date(),
-      updatedAt: data.updatedAt?.toDate() || new Date(),
-      viewCount: data.viewCount || 0,
-    };
-  }
-}
-
-export const videoTutorialService = new VideoTutorialService();
-

package/src/domains/video-tutorials/presentation/hooks/index.ts

@@ -1,36 +0,0 @@
-/**
- * Video Tutorial Hooks
- * Single Responsibility: Provide React hooks for video tutorials
- */
-
-import { useQuery } from "@tanstack/react-query";
-import { videoTutorialService } from "../../infrastructure/services/video-tutorial.service";
-import type {
-  VideoTutorial,
-  VideoTutorialCategory,
-  VideoTutorialFilters,
-} from "../../types";
-
-export function useVideoTutorials(filters?: VideoTutorialFilters) {
-  return useQuery({
-    queryKey: ["video-tutorials", filters],
-    queryFn: () => videoTutorialService.getAllTutorials(filters),
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  });
-}
-
-export function useFeaturedTutorials(maxCount: number = 5) {
-  return useQuery({
-    queryKey: ["featured-tutorials", maxCount],
-    queryFn: () => videoTutorialService.getFeaturedTutorials(maxCount),
-    staleTime: 10 * 60 * 1000, // 10 minutes
-  });
-}
-
-export function useTutorialsByCategory(category: VideoTutorialCategory) {
-  return useQuery({
-    queryKey: ["tutorials-by-category", category],
-    queryFn: () => videoTutorialService.getTutorialsByCategory(category),
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  });
-}

package/src/presentation/components/SettingItem.tsx

@@ -1,145 +0,0 @@
-import React from "react";
-import { View, StyleSheet, Switch } from "react-native";
-import {
-  AtomicIcon,
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { SettingsItemCard } from "./SettingsItemCard";
-
-export interface SettingItemProps {
-  icon: string;
-  title: string;
-  value?: string;
-  onPress?: () => void;
-  showSwitch?: boolean;
-  switchValue?: boolean;
-  onSwitchChange?: (value: boolean) => void;
-  isLast?: boolean;
-  iconColor?: string;
-  titleColor?: string;
-  testID?: string;
-  disabled?: boolean;
-}
-
-/**
- * SettingItem - Enhanced ListItem for Settings
- * Uses design system's ListItem molecule with custom switch support
- */
-export const SettingItem: React.FC<SettingItemProps> = ({
-  icon,
-  title,
-  value,
-  onPress,
-  showSwitch = false,
-  switchValue,
-  onSwitchChange,
-  isLast = false,
-  iconColor,
-  titleColor,
-  testID,
-  disabled = false,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // For switch items, we need custom rendering
-  if (showSwitch) {
-    return (
-      <View
-        style={[
-          styles.switchContainer,
-          {
-            borderBottomWidth: isLast ? 0 : 1,
-            borderBottomColor: `${tokens.colors.onSurface}10`,
-          }
-        ]}
-      >
-        <View style={styles.switchContent}>
-          <View style={[
-            styles.iconWrapper,
-            { backgroundColor: iconColor ? `${iconColor}15` : `${tokens.colors.primary}15` }
-          ]}>
-            <AtomicIcon
-              name={icon}
-              size="md"
-              customColor={iconColor || tokens.colors.primary}
-            />
-          </View>
-          <View style={styles.textContainer}>
-            <AtomicText
-              type="bodyLarge"
-              color={disabled ? "surfaceVariant" : "onSurface"}
-              style={[
-                titleColor ? { color: titleColor } : {},
-                { opacity: disabled ? 0.6 : 1 }
-              ]}
-              numberOfLines={1}
-            >
-              {title}
-            </AtomicText>
-            {value && (
-              <AtomicText
-                type="bodySmall"
-                color="secondary"
-                numberOfLines={2}
-                style={{ marginTop: 2 }}
-              >
-                {value}
-              </AtomicText>
-            )}
-          </View>
-        </View>
-        <Switch
-          value={switchValue}
-          onValueChange={onSwitchChange}
-          trackColor={{
-            false: tokens.colors.surfaceVariant,
-            true: tokens.colors.primary
-          }}
-          thumbColor={tokens.colors.surface}
-          ios_backgroundColor={tokens.colors.surfaceVariant}
-          disabled={disabled}
-        />
-      </View>
-    );
-  }
-
-  // Use SettingsItemCard for regular items
-  return (
-    <SettingsItemCard
-      title={title}
-      description={value}
-      icon={icon as any}
-      onPress={onPress}
-      iconColor={iconColor}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  switchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    minHeight: 64,
-  },
-  switchContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-  iconWrapper: {
-    width: 40,
-    height: 40,
-    borderRadius: 10,
-    justifyContent: "center",
-    alignItems: "center",
-    marginRight: 12,
-  },
-  textContainer: {
-    flex: 1,
-    paddingRight: 8,
-  },
-});

package/src/presentation/components/__tests__/SettingItem.test.tsx

@@ -1,189 +0,0 @@
-/**
- * Tests for SettingItem Component
- */
-
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
-import { SettingItem } from '../SettingItem';
-
-// Mock lucide-react-native
-jest.mock('lucide-react-native', () => ({
-  Bell: 'Bell',
-  Palette: 'Palette',
-  ChevronRight: 'ChevronRight',
-}));
-
-// Mock dependencies
-jest.mock('@umituz/react-native-design-system', () => ({
-  useAppDesignTokens: () => ({
-    colors: {
-      backgroundPrimary: '#ffffff',
-      primary: '#007AFF',
-      textPrimary: '#000000',
-      textSecondary: '#666666',
-    },
-    spacing: {
-      md: 16,
-    },
-  }),
-}));
-
-describe('SettingItem', () => {
-  it('renders correctly with basic props', () => {
-    const { getByText, getByTestId } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        testID="test-setting"
-      />
-    );
-
-    expect(getByText('Test Setting')).toBeTruthy();
-    expect(getByTestId('test-setting')).toBeTruthy();
-  });
-
-  it('displays value when provided', () => {
-    const { getByText } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        value="Test Value"
-      />
-    );
-
-    expect(getByText('Test Setting')).toBeTruthy();
-    expect(getByText('Test Value')).toBeTruthy();
-  });
-
-  it('shows switch when showSwitch is true', () => {
-    const { getByTestId, queryByTestId } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        showSwitch={true}
-        switchValue={true}
-        testID="test-setting"
-      />
-    );
-
-    expect(getByTestId('test-setting')).toBeTruthy();
-    // Switch should be present, chevron should not
-  });
-
-  it('calls onPress when pressed', () => {
-    const mockOnPress = jest.fn();
-    const { getByTestId } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        onPress={mockOnPress}
-        testID="test-setting"
-      />
-    );
-
-    fireEvent.press(getByTestId('test-setting'));
-    expect(mockOnPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onSwitchChange when switch is toggled', () => {
-    const mockOnSwitchChange = jest.fn();
-    const { getByRole } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        showSwitch={true}
-        switchValue={false}
-        onSwitchChange={mockOnSwitchChange}
-      />
-    );
-
-    const switchElement = getByRole('switch');
-    fireEvent(switchElement, 'valueChange', true);
-    expect(mockOnSwitchChange).toHaveBeenCalledWith(true);
-  });
-
-  it('applies custom colors', () => {
-    const { getByText } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        iconColor="#FF0000"
-        titleColor="#00FF00"
-      />
-    );
-
-    expect(getByText('Test Setting')).toBeTruthy();
-  });
-
-  it('shows disabled state correctly', () => {
-    const mockOnPress = jest.fn();
-    const { getByTestId } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        disabled={true}
-        onPress={mockOnPress}
-        testID="test-setting"
-      />
-    );
-
-    const pressable = getByTestId('test-setting');
-    expect(pressable.props.disabled).toBe(true);
-  });
-
-  it('does not show divider when isLast is true', () => {
-    const { queryByTestId } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        isLast={true}
-      />
-    );
-
-    // Divider should not be present
-    expect(queryByTestId('setting-divider')).toBeNull();
-  });
-
-  it('renders with different icon types', () => {
-    const { getByText } = render(
-      <SettingItem
-        icon={Palette}
-        title="Appearance Setting"
-      />
-    );
-
-    expect(getByText('Appearance Setting')).toBeTruthy();
-  });
-
-  it('handles long text correctly', () => {
-    const longTitle = 'This is a very long title that should be truncated properly';
-    const longValue = 'This is a very long value that should be truncated properly and should not break the layout';
-
-    const { getByText } = render(
-      <SettingItem
-        icon={Bell}
-        title={longTitle}
-        value={longValue}
-      />
-    );
-
-    expect(getByText(longTitle)).toBeTruthy();
-    expect(getByText(longValue)).toBeTruthy();
-  });
-
-  it('applies custom switch colors', () => {
-    const { getByRole } = render(
-      <SettingItem
-        icon={Bell}
-        title="Test Setting"
-        showSwitch={true}
-        switchValue={true}
-        switchThumbColor="#FF0000"
-        switchTrackColors={{ false: '#CCCCCC', true: '#00FF00' }}
-      />
-    );
-
-    const switchElement = getByRole('switch');
-    expect(switchElement).toBeTruthy();
-  });
-});

package/src/presentation/screens/components/sections/SubscriptionSettingsSection.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { useLocalization } from "@umituz/react-native-localization";
-import type { IconName } from "@umituz/react-native-design-system";
-import { SettingsItemCard } from "../../../components/SettingsItemCard";
-import type { SubscriptionConfig } from "../../types";
-
-interface SubscriptionSettingsSectionProps {
-  config?: SubscriptionConfig;
-}
-
-export const SubscriptionSettingsSection: React.FC<SubscriptionSettingsSectionProps> = ({
-  config,
-}) => {
-  const { t } = useLocalization();
-
-  // onPress is required for subscription section to be functional
-  if (!config || !config.onPress) return null;
-
-  return (
-    <SettingsItemCard
-      title={config.title || t("settings.subscription.title")}
-      description={config.description || t("settings.subscription.description")}
-      icon={(config.icon || "star") as IconName}
-      onPress={config.onPress}
-      sectionTitle={config.sectionTitle || t("settings.sections.subscription")}
-    />
-  );
-};