@umituz/react-native-settings 4.19.5 → 4.20.0

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

@@ -5,8 +5,8 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { View, ScrollView, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
+import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth } from '@umituz/react-native-design-system';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
 import { useFAQExpansion } from '../hooks/useFAQExpansion';
@@ -45,9 +45,10 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
   renderHeader,
   styles: customStyles,
 }) => {
-  const tokens = useResponsiveDesignTokens();
-  const { searchQuery, setSearchQuery, filteredCategories, hasResults } =
-    useFAQSearch(categories);
+  const tokens = useAppDesignTokens();
+  const { width: windowWidth } = useWindowDimensions();
+  const contentMaxWidth = useMemo(() => getContentMaxWidth(windowWidth), [windowWidth]);
+  const { searchQuery, setSearchQuery, filteredCategories, hasResults } = useFAQSearch(categories);
   const { isExpanded, toggleExpansion } = useFAQExpansion();
 
   const styles = useMemo(
@@ -55,12 +56,9 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
       StyleSheet.create({
         container: {
           flex: 1,
-          backgroundColor: tokens.colors.backgroundPrimary,
         },
         header: {
           padding: tokens.spacing.md,
-          borderBottomWidth: 1,
-          borderBottomColor: tokens.colors.border,
         },
         content: {
           flex: 1,
@@ -81,12 +79,13 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     }
 
     return (
-      <ScrollView
-        style={[styles.content, customStyles?.content]}
-        showsVerticalScrollIndicator={false}
-      >
+      <View style={{ flex: 1 }}>
         <View style={[styles.header, customStyles?.header]}>
-          <AtomicText type="headlineMedium" color="textPrimary" style={{ marginBottom: tokens.spacing.sm }}>
+          <AtomicText
+            type="headlineMedium"
+            color="textPrimary"
+            style={{ marginBottom: tokens.spacing.md, fontWeight: '700' }}
+          >
             {headerTitle}
           </AtomicText>
           <FAQSearchBar
@@ -97,30 +96,41 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
           />
         </View>
 
-        {filteredCategories.map((category) => (
-          <FAQCategoryComponent
-            key={category.id}
-            category={category}
-            isExpanded={isExpanded}
-            onToggleItem={toggleExpansion}
-            styles={customStyles?.category}
-          />
-        ))}
-      </ScrollView>
+        <ScrollView
+          style={[styles.content, customStyles?.content]}
+          contentContainerStyle={{ paddingVertical: tokens.spacing.md }}
+          showsVerticalScrollIndicator={false}
+        >
+          {filteredCategories.map((category) => (
+            <FAQCategoryComponent
+              key={category.id}
+              category={category}
+              isExpanded={isExpanded}
+              onToggleItem={toggleExpansion}
+              styles={customStyles?.category}
+            />
+          ))}
+          <View style={{ height: tokens.spacing.xl * 2 }} />
+        </ScrollView>
+      </View>
     );
   };
 
   if (renderHeader) {
     return (
-      <View style={[styles.container, customStyles?.container]}>
-        {renderHeader({ onBack: onBack || (() => { }) })}
-        {renderContent()}
+      <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+        <View style={[styles.container, customStyles?.container]}>
+          <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
+            {renderHeader({ onBack: onBack || (() => { }) })}
+          </View>
+          {renderContent()}
+        </View>
       </View>
     );
   }
 
   return (
-    <ScreenLayout edges={['bottom']} scrollable={false}>
+    <ScreenLayout edges={['bottom']} scrollable={false} maxWidth={contentMaxWidth}>
       <View style={[styles.container, customStyles?.container]}>
         {renderContent()}
       </View>

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

@@ -5,7 +5,7 @@
 
 import React, { useState } from "react";
 import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react-native";
-import { useResponsiveDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import { useFeedbackForm } from "../hooks/useFeedbackForm";
 
@@ -29,7 +29,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     initialType,
     isSubmitting = false,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
     const [selectedType, setSelectedType] = useState<FeedbackType>(initialType || texts.feedbackTypes[0].type);
     const [rating, setRating] = useState<FeedbackRating>(5);
     const [description, setDescription] = useState("");

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

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, StyleSheet, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens, AtomicText, AtomicIcon, BaseModal } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal } from "@umituz/react-native-design-system";
 import { FeedbackForm } from "./FeedbackForm";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 
@@ -31,7 +31,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
     subtitle,
     texts,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     return (
         <BaseModal visible={visible} onClose={onClose}>

package/src/domains/legal/presentation/screens/LegalScreen.tsx

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { ScreenLayout } from "@umituz/react-native-design-system";
 import { LegalItem } from "../components/LegalItem";
@@ -93,7 +93,7 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo(({
   eulaUrl,
   testID = "legal-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Memoize styles to prevent recreation on every render
   const styles = React.useMemo(() => {

package/src/domains/legal/presentation/screens/PrivacyPolicyScreen.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
@@ -54,7 +54,7 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   onUrlPress,
   testID = "privacy-policy-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   
   // Validate required props

package/src/domains/legal/presentation/screens/TermsOfServiceScreen.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
@@ -54,7 +54,7 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   onUrlPress,
   testID = "terms-of-service-screen",
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   
   // Validate required props

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, 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/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
+  });
+}