@umituz/react-native-settings 4.19.5 → 4.20.0

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

package/src/presentation/components/DevSettingsSection.tsx

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { Alert } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { storageRepository } from "@umituz/react-native-storage";
 import { SettingsSection } from "./SettingsSection";
 import { SettingItem } from "./SettingItem";
@@ -46,7 +46,7 @@ export const DevSettingsSection: React.FC<DevSettingsProps> = ({
   texts = {},
   customDevComponents = [],
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Merge custom texts with defaults
   const t = { ...DEFAULT_TEXTS, ...texts };

package/src/presentation/components/SettingItem.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, Switch } from "react-native";
 import {
   AtomicIcon,
   AtomicText,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "./SettingsItemCard";
 
@@ -40,7 +40,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
   testID,
   disabled = false,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // For switch items, we need custom rendering
   if (showSwitch) {

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -5,7 +5,7 @@
 
 import React, { Component, ReactNode } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useLocalization } from '@umituz/react-native-localization';
 
@@ -67,7 +67,7 @@ const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({
   fallbackTitle,
   fallbackMessage
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { t } = useLocalization();
 
   const title = __DEV__ && error?.message

package/src/presentation/components/SettingsFooter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsFooterProps {
   versionText?: string;
@@ -13,7 +13,7 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   appVersion,
   versionLabel,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   const displayText = versionText || (appVersion && versionLabel

package/src/presentation/components/SettingsItemCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Pressable, StyleSheet, ViewStyle } from "react-native";
 import {
-    useResponsiveDesignTokens,
+    useAppDesignTokens,
     AtomicIcon,
     AtomicText,
     type IconName,
@@ -45,7 +45,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     iconBgColor,
     iconColor,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
     const colors = tokens.colors;
 
     const defaultIconBg = iconBgColor || `${colors.primary}15`;

package/src/presentation/components/SettingsSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsSectionProps {
   title: string;
@@ -11,7 +11,7 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
   title,
   children,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
   return (

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { SettingsScreen } from "../screens/SettingsScreen";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
@@ -83,7 +83,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     devSettings,
     customSections = [],
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const screenOptions = {
         headerStyle: {

package/src/presentation/screens/SettingsScreen.tsx

@@ -8,7 +8,7 @@ import { View, StatusBar, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {
   useDesignSystemTheme,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
@@ -68,7 +68,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 }) => {
   const navigation = useNavigation();
   const { themeMode } = useDesignSystemTheme();
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   const isDark = themeMode === "dark";
   const colors = tokens.colors;

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

@@ -1,7 +1,7 @@
 import React, { useMemo } 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 { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { SettingsSection } from "../../components/SettingsSection";
@@ -53,7 +53,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   showCloseButton = false,
   devSettings,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
 

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

@@ -7,7 +7,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNavigation } from "@react-navigation/native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicIcon } from "@umituz/react-native-design-system";
 
 interface SettingsHeaderProps {
@@ -20,7 +20,7 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
   onClose,
 }) => {
   const navigation = useNavigation();
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
   const handleClose = () => {