@umituz/react-native-settings 4.19.4 → 4.19.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.19.4",
+  "version": "4.19.6",
   "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/about/index.ts

@@ -8,3 +8,4 @@ export * from './presentation/components/AboutContent';
 export * from './presentation/components/AboutSection';
 export * from './presentation/components/AboutSettingItem';
 export * from './presentation/components/AboutHeader';
+export * from './domain/entities/AppInfo';

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/video-tutorials/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Video Tutorials Domain
+ */
+
+export * from "./types";
+export * from "./presentation/screens/VideoTutorialsScreen";
+export * from "./presentation/hooks";
+export * from "./infrastructure/services/video-tutorial.service";

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

@@ -0,0 +1,117 @@
+/**
+ * Video Tutorial Service
+ * Single Responsibility: Handle video tutorial data operations
+ */
+
+import {
+  collection,
+  getDocs,
+  query,
+  orderBy,
+  where,
+  limit,
+} from "firebase/firestore";
+import type { Firestore } 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 = [];
+
+    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/components/VideoTutorialCard.tsx

@@ -0,0 +1,191 @@
+/**
+ * Video Tutorial Card Component
+ * Single Responsibility: Display individual video tutorial card
+ */
+
+import React from "react";
+import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { VideoTutorial } from "../../types";
+
+interface VideoTutorialCardProps {
+  readonly tutorial: VideoTutorial;
+  readonly onPress: () => void;
+  readonly horizontal?: boolean;
+}
+
+export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
+  tutorial,
+  onPress,
+  horizontal = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const formatDuration = (seconds: number): string => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        {
+          backgroundColor: tokens.colors.surface,
+          borderColor: tokens.colors.border,
+        },
+        horizontal && styles.horizontalContainer,
+      ]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <View style={styles.imageContainer}>
+        <Image
+          source={{ uri: tutorial.thumbnailUrl }}
+          style={[styles.thumbnail, horizontal && styles.horizontalThumbnail]}
+          resizeMode="cover"
+        />
+        <View
+          style={[styles.durationBadge, { backgroundColor: "rgba(0,0,0,0.7)" }]}
+        >
+          <Text style={styles.durationText}>
+            {formatDuration(tutorial.duration)}
+          </Text>
+        </View>
+        {tutorial.featured && (
+          <View
+            style={[
+              styles.featuredBadge,
+              { backgroundColor: tokens.colors.primary },
+            ]}
+          >
+            <Text style={[styles.featuredText, { color: "#FFFFFF" }]}>
+              Featured
+            </Text>
+          </View>
+        )}
+      </View>
+
+      <View style={styles.content}>
+        <Text
+          style={[
+            styles.title,
+            { color: tokens.colors.textPrimary },
+            horizontal && styles.horizontalTitle,
+          ]}
+          numberOfLines={2}
+        >
+          {tutorial.title}
+        </Text>
+
+        <Text
+          style={[
+            styles.description,
+            { color: tokens.colors.textSecondary },
+            horizontal && styles.horizontalDescription,
+          ]}
+          numberOfLines={horizontal ? 2 : 3}
+        >
+          {tutorial.description}
+        </Text>
+
+        <View style={styles.metadata}>
+          <Text
+            style={[styles.category, { color: tokens.colors.textTertiary }]}
+          >
+            {tutorial.category.replace("-", " ")}
+          </Text>
+          <Text
+            style={[styles.difficulty, { color: tokens.colors.textSecondary }]}
+          >
+            {tutorial.difficulty}
+          </Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    borderWidth: 1,
+    marginBottom: 12,
+    overflow: "hidden",
+  },
+  horizontalContainer: {
+    width: 280,
+    marginRight: 12,
+    marginBottom: 0,
+  },
+  imageContainer: {
+    position: "relative",
+  },
+  thumbnail: {
+    width: "100%",
+    height: 180,
+  },
+  horizontalThumbnail: {
+    height: 140,
+  },
+  durationBadge: {
+    position: "absolute",
+    bottom: 8,
+    right: 8,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  durationText: {
+    color: "white",
+    fontSize: 12,
+    fontWeight: "500",
+  },
+  featuredBadge: {
+    position: "absolute",
+    top: 8,
+    left: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+  },
+  featuredText: {
+    fontSize: 11,
+    fontWeight: "600",
+  },
+  content: {
+    padding: 12,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 6,
+  },
+  horizontalTitle: {
+    fontSize: 14,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  horizontalDescription: {
+    fontSize: 12,
+    lineHeight: 16,
+    marginBottom: 6,
+  },
+  metadata: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  category: {
+    fontSize: 12,
+    textTransform: "capitalize",
+  },
+  difficulty: {
+    fontSize: 12,
+    textTransform: "capitalize",
+  },
+});

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

@@ -0,0 +1,36 @@
+/**
+ * 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/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx

@@ -0,0 +1,198 @@
+/**
+ * Video Tutorials Screen
+ * Single Responsibility: Display video tutorials list
+ */
+
+import React from "react";
+import { View, Text, FlatList, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  ScreenLayout,
+  AtomicSpinner,
+  AtomicText,
+} from "@umituz/react-native-design-system";
+import type { VideoTutorial } from "../../types";
+import { VideoTutorialCard } from "../components/VideoTutorialCard";
+import { useVideoTutorials, useFeaturedTutorials } from "../hooks";
+
+export interface VideoTutorialsScreenProps {
+  /**
+   * Title of the screen
+   */
+  title?: string;
+  /**
+   * Title for the featured tutorials section
+   */
+  featuredTitle?: string;
+  /**
+   * Title for all tutorials section
+   */
+  allTutorialsTitle?: string;
+  /**
+   * Error message to show when tutorials fail to load
+   */
+  errorLoadingMessage?: string;
+  /**
+   * Maximum number of featured tutorials to show
+   */
+  maxFeaturedCount?: number;
+  /**
+   * 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[];
+}
+
+export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
+  React.memo(
+    ({
+      title = "Video Tutorials",
+      featuredTitle = "Featured",
+      allTutorialsTitle = "All Tutorials",
+      errorLoadingMessage = "Failed to load tutorials.",
+      maxFeaturedCount = 3,
+      onTutorialPress,
+      customIsLoading,
+      customAllTutorials,
+      customFeaturedTutorials,
+    }) => {
+      const tokens = useAppDesignTokens();
+
+      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) => {
+          if (onTutorialPress) {
+            onTutorialPress(tutorialId);
+          } else if (__DEV__) {
+            // eslint-disable-next-line no-console
+            console.log("VideoTutorialsScreen: No onTutorialPress handler", {
+              tutorialId,
+            });
+          }
+        },
+        [onTutorialPress],
+      );
+
+      const renderTutorialItem = React.useCallback(
+        ({ item }: { item: VideoTutorial }) => (
+          <VideoTutorialCard
+            tutorial={item}
+            onPress={() => handleTutorialPress(item.id)}
+          />
+        ),
+        [handleTutorialPress],
+      );
+
+      if (isLoading) {
+        return <AtomicSpinner size="lg" fullContainer />;
+      }
+
+      if (error) {
+        return (
+          <View style={styles.errorContainer}>
+            <AtomicText color="error" type="bodyLarge">
+              {errorLoadingMessage}
+            </AtomicText>
+          </View>
+        );
+      }
+
+      return (
+        <ScreenLayout scrollable={false} edges={["top", "bottom"]}>
+          <Text style={[styles.title, { color: tokens.colors.textPrimary }]}>
+            {title}
+          </Text>
+
+          {featuredTutorials && featuredTutorials.length > 0 && (
+            <View style={styles.section}>
+              <Text
+                style={[
+                  styles.sectionTitle,
+                  { color: tokens.colors.textSecondary },
+                ]}
+              >
+                {featuredTitle}
+              </Text>
+              <FlatList
+                data={featuredTutorials}
+                renderItem={renderTutorialItem}
+                keyExtractor={(item: VideoTutorial) => item.id}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={styles.horizontalList}
+              />
+            </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>
+        </ScreenLayout>
+      );
+    },
+  );
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: "600",
+    marginBottom: 24,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "500",
+    marginBottom: 12,
+  },
+  horizontalList: {
+    paddingRight: 16,
+  },
+  verticalList: {
+    paddingBottom: 16,
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+});

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

@@ -0,0 +1,36 @@
+/**
+ * Video Tutorial Types
+ * Single Responsibility: Define type definitions for video tutorials
+ */
+
+export interface VideoTutorial {
+  readonly id: string;
+  readonly title: string;
+  readonly description: string;
+  readonly videoUrl: string;
+  readonly thumbnailUrl: string;
+  readonly duration: number; // in seconds
+  readonly category: VideoTutorialCategory;
+  readonly difficulty: "beginner" | "intermediate" | "advanced";
+  readonly featured: boolean;
+  readonly tags: readonly string[];
+  readonly createdAt: Date;
+  readonly updatedAt: Date;
+  readonly viewCount: number;
+}
+
+export type VideoTutorialCategory =
+  | "getting-started"
+  | "ai-generation"
+  | "editing"
+  | "effects"
+  | "exporting"
+  | "tips-tricks"
+  | "troubleshooting";
+
+export interface VideoTutorialFilters {
+  readonly category?: VideoTutorialCategory;
+  readonly difficulty?: VideoTutorial["difficulty"];
+  readonly featured?: boolean;
+  readonly tags?: readonly string[];
+}

package/src/index.ts

@@ -115,7 +115,10 @@ export * from './domains/feedback';
 export * from './domains/faqs';
 
 // Rating Domain - Star ratings, reviews, statistics
-export * from './domains/rating';
+export * from "./domains/rating";
+
+// Video Tutorials Domain - Learning resources, tutorials
+export * from "./domains/video-tutorials";
 
 // =============================================================================
 // PRESENTATION LAYER - Re-exports from Dependencies