@umituz/react-native-settings 4.23.83 → 4.23.85

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

@@ -44,18 +44,19 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
           style={[styles.thumbnail, horizontal && styles.horizontalThumbnail]}
           resizeMode="cover"
         />
-        <View style={[styles.durationBadge, { backgroundColor: "rgba(0,0,0,0.7)" }]}>
-          <AtomicText style={styles.durationText}>{formatDuration(tutorial.duration)}</AtomicText>
+        <View style={styles.durationBadge}>
+          <AtomicText type="labelSmall" style={styles.durationText}>{formatDuration(tutorial.duration)}</AtomicText>
         </View>
         {tutorial.featured && (
           <View style={[styles.featuredBadge, { backgroundColor: tokens.colors.primary }]}>
-            <AtomicText style={[styles.featuredText, { color: tokens.colors.onPrimary }]}>Featured</AtomicText>
+            <AtomicText type="labelSmall" style={[styles.featuredText, { color: tokens.colors.onPrimary }]}>Featured</AtomicText>
           </View>
         )}
       </View>
 
       <View style={styles.content}>
         <AtomicText
+          type={horizontal ? "titleMedium" : "titleLarge"}
           style={[styles.title, horizontal && styles.horizontalTitle]}
           numberOfLines={2}
         >
@@ -63,6 +64,8 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
         </AtomicText>
 
         <AtomicText
+          type={horizontal ? "bodySmall" : "bodyMedium"}
+          color="textSecondary"
           style={[styles.description, horizontal && styles.horizontalDescription]}
           numberOfLines={horizontal ? 2 : 3}
         >
@@ -70,10 +73,10 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
         </AtomicText>
 
         <View style={styles.metadata}>
-          <AtomicText style={styles.category}>
+          <AtomicText type="labelSmall" color="textTertiary" style={styles.category}>
             {tutorial.category.replace("-", " ")}
           </AtomicText>
-          <AtomicText style={styles.difficulty}>
+          <AtomicText type="labelSmall" color="textSecondary" style={styles.difficulty}>
             {tutorial.difficulty}
           </AtomicText>
         </View>
@@ -88,16 +91,16 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => StyleSheet.
   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: tokens.colors.textInverse, fontSize: 12, fontWeight: "500" },
+  durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, backgroundColor: "rgba(0,0,0,0.7)" },
+  durationText: { color: tokens.colors.textInverse },
   featuredBadge: { position: "absolute", top: 8, left: 8, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 },
-  featuredText: { fontSize: 11, fontWeight: "600" },
+  featuredText: { fontWeight: "600" },
   content: { padding: 12 },
-  title: { fontSize: tokens.typography.titleMedium.fontSize, fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
-  horizontalTitle: { fontSize: tokens.typography.bodyLarge.fontSize },
-  description: { fontSize: tokens.typography.bodyMedium.fontSize, lineHeight: 20, marginBottom: 8, color: tokens.colors.textSecondary },
-  horizontalDescription: { fontSize: tokens.typography.bodySmall.fontSize, lineHeight: 16, marginBottom: 6 },
+  title: { fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
+  horizontalTitle: {},
+  description: { marginBottom: 8 },
+  horizontalDescription: { marginBottom: 6 },
   metadata: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
-  category: { fontSize: 12, textTransform: "capitalize", fontWeight: "500", color: tokens.colors.textTertiary },
-  difficulty: { fontSize: 12, textTransform: "capitalize", fontWeight: "500", color: tokens.colors.textSecondary },
+  category: { textTransform: "capitalize", fontWeight: "500" },
+  difficulty: { textTransform: "capitalize", fontWeight: "500" },
 });

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

@@ -48,6 +48,7 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
     onTutorialPress,
   }) => {
     const tokens = useAppDesignTokens();
+    const navigation = useAppNavigation();
     const styles = getStyles(tokens);
 
     const handleTutorialPress = React.useCallback(
@@ -69,10 +70,6 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
       [handleTutorialPress]
     );
 
-    const navigation = useAppNavigation();
-
-    if (isLoading) return <AtomicSpinner size="lg" fullContainer />;
-
     const hasFeatured = featuredTutorials && featuredTutorials.length > 0;
     const hasTutorials = tutorials && tutorials.length > 0;
 
@@ -83,21 +80,29 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
       />
     );
 
+    if (isLoading) {
+      return (
+        <ScreenLayout header={header}>
+          <AtomicSpinner size="lg" fullContainer color="primary" />
+        </ScreenLayout>
+      );
+    }
+
     if (!hasTutorials && !hasFeatured) {
       return (
-        <ScreenLayout header={header} edges={["bottom"]}>
+        <ScreenLayout header={header}>
           <View style={styles.emptyContainer}>
-            <AtomicText color="secondary" type="bodyLarge">{emptyMessage}</AtomicText>
+            <AtomicText color="textSecondary" type="bodyLarge" style={{ textAlign: 'center' }}>{emptyMessage}</AtomicText>
           </View>
         </ScreenLayout>
       );
     }
 
-    return (
-      <ScreenLayout header={header} scrollable={false} edges={["bottom"]}>
+    const ListHeader = () => (
+      <>
         {hasFeatured && (
           <View style={styles.section}>
-            <AtomicText color="secondary" style={styles.sectionTitle}>{featuredTitle}</AtomicText>
+            <AtomicText color="textSecondary" type="titleLarge" style={styles.sectionTitle}>{featuredTitle}</AtomicText>
             <FlatList
               data={featuredTutorials}
               renderItem={renderFeaturedItem}
@@ -108,38 +113,47 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
             />
           </View>
         )}
-
         {hasTutorials && (
-          <View style={styles.section}>
-            <AtomicText color="secondary" style={styles.sectionTitle}>{allTutorialsTitle}</AtomicText>
-            <FlatList
-              data={tutorials}
-              renderItem={renderTutorialItem}
-              keyExtractor={(item) => item.id}
-              showsVerticalScrollIndicator={false}
-              contentContainerStyle={styles.verticalList}
-            />
-          </View>
+          <AtomicText color="textSecondary" type="titleLarge" style={styles.sectionTitle}>{allTutorialsTitle}</AtomicText>
         )}
+      </>
+    );
+
+    return (
+      <ScreenLayout header={header} scrollable={false}>
+        <FlatList
+          data={tutorials}
+          renderItem={renderTutorialItem}
+          keyExtractor={(item) => item.id}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.verticalList}
+          ListHeaderComponent={ListHeader}
+        />
       </ScreenLayout>
     );
   }
 );
 
 const getStyles = (tokens: DesignTokens) => StyleSheet.create({
-  title: {
-    fontSize: tokens.typography.headlineLarge.fontSize,
-    color: tokens.colors.textPrimary,
-    fontWeight: "600",
-    marginBottom: 24,
+  section: {
+    marginBottom: tokens.spacing.lg,
   },
-  section: { marginBottom: 24 },
   sectionTitle: {
-    fontSize: tokens.typography.titleLarge.fontSize,
-    fontWeight: "500",
-    marginBottom: 12,
+    fontWeight: "600",
+    marginBottom: tokens.spacing.sm,
+    paddingHorizontal: tokens.spacing.md,
+  },
+  horizontalList: {
+    paddingHorizontal: tokens.spacing.md,
+  },
+  verticalList: {
+    paddingBottom: tokens.spacing.xl,
+    paddingHorizontal: tokens.spacing.md,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: tokens.spacing.lg,
   },
-  horizontalList: { paddingRight: 16 },
-  verticalList: { paddingBottom: 16 },
-  emptyContainer: { flex: 1, justifyContent: "center", alignItems: "center", padding: 20 },
 });

package/src/infrastructure/utils/dateUtils.ts

@@ -0,0 +1,61 @@
+/**
+ * Date Utilities
+ *
+ * Helper functions for date manipulation and calculations.
+ */
+
+/**
+ * Calculate days between two dates
+ * @param dateString ISO date string
+ * @param now Current date (defaults to new Date())
+ * @returns Number of days between dates
+ */
+export function daysBetween(dateString: string, now: Date = new Date()): number {
+  const date = new Date(dateString);
+  const diffMs = now.getTime() - date.getTime();
+  return Math.floor(diffMs / (1000 * 60 * 60 * 24));
+}
+
+/**
+ * Format date to ISO string
+ * @param date Date to format
+ * @returns ISO date string
+ */
+export function toISOString(date: Date = new Date()): string {
+  return date.toISOString();
+}
+
+/**
+ * Check if a date is within the last N days
+ * @param dateString ISO date string to check
+ * @param days Number of days to check within
+ * @returns true if date is within the last N days
+ */
+export function isWithinLastDays(dateString: string, days: number): boolean {
+  const daysDiff = daysBetween(dateString);
+  return daysDiff >= 0 && daysDiff <= days;
+}
+
+/**
+ * Check if a date has passed (is older than N days ago)
+ * @param dateString ISO date string to check
+ * @param days Number of days threshold
+ * @returns true if date is older than N days
+ */
+export function isOlderThanDays(dateString: string, days: number): boolean {
+  const daysDiff = daysBetween(dateString);
+  return daysDiff > days;
+}
+
+/**
+ * Add days to a date
+ * @param dateString ISO date string
+ * @param days Number of days to add
+ * @returns New date with days added
+ */
+export function addDays(dateString: string, days: number): Date {
+  const date = new Date(dateString);
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+}

package/src/infrastructure/utils/memoComparisonUtils.ts

@@ -0,0 +1,68 @@
+/**
+ * Memo Comparison Utilities
+ *
+ * Provides reusable comparison functions for React.memo to reduce code duplication.
+ * These functions follow best practices for shallow comparison in React components.
+ */
+
+import type { ComponentType } from "react";
+
+/**
+ * Standard comparison for components with config and translation props
+ * @param prevProps Previous props
+ * @param nextProps Next props
+ * @returns true if props are equal (should not re-render)
+ */
+export function compareConfigAndTranslate(
+  prevProps: Record<string, unknown>,
+  nextProps: Record<string, unknown>
+): boolean {
+  return (
+    prevProps.config === nextProps.config &&
+    prevProps.t === nextProps.t
+  );
+}
+
+/**
+ * Standard comparison for components with normalized config and features
+ * @param prevProps Previous props
+ * @param nextProps Next props
+ * @returns true if props are equal (should not re-render)
+ */
+export function compareConfigAndFeatures(
+  prevProps: Record<string, unknown>,
+  nextProps: Record<string, unknown>
+): boolean {
+  return (
+    prevProps.normalizedConfig === nextProps.normalizedConfig &&
+    prevProps.features === nextProps.features
+  );
+}
+
+/**
+ * Standard comparison for components with single prop
+ * @param propKey Property key to compare
+ * @returns Comparison function
+ */
+export function createSinglePropComparator<K extends string>(
+  propKey: K
+): (prevProps: Record<string, unknown>, nextProps: Record<string, unknown>) => boolean {
+  return (prevProps, nextProps) => prevProps[propKey] === nextProps[propKey];
+}
+
+/**
+ * Standard comparison for components with gamification config
+ * @param prevProps Previous props
+ * @param nextProps Next props
+ * @returns true if props are equal (should not re-render)
+ */
+export function compareGamificationProps(
+  prevProps: Record<string, unknown>,
+  nextProps: Record<string, unknown>
+): boolean {
+  return (
+    prevProps.config === nextProps.config &&
+    prevProps.gamificationConfig === nextProps.gamificationConfig &&
+    prevProps.t === nextProps.t
+  );
+}

package/src/infrastructure/utils/sanitizers.ts

@@ -0,0 +1,49 @@
+/**
+ * Sanitization Utilities
+ *
+ * Provides sanitization functions for user input and props.
+ */
+
+/**
+ * Sanitize string by trimming and limiting length
+ */
+export function sanitizeString(str: string | undefined, maxLength: number): string {
+  if (!str) return "";
+  return str.trim().slice(0, maxLength);
+}
+
+/**
+ * Sanitize title prop
+ */
+export function sanitizeTitle(title: string): string {
+  return sanitizeString(title, 200) || "";
+}
+
+/**
+ * Sanitize description prop
+ */
+export function sanitizeDescription(description: string | undefined): string | undefined {
+  return sanitizeString(description || "", 500);
+}
+
+/**
+ * Truncate text with ellipsis
+ */
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + "...";
+}
+
+/**
+ * Escape HTML entities (for security)
+ */
+export function escapeHtml(text: string): string {
+  const htmlEntities: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+  };
+  return text.replace(/[&<>"']/g, (char) => htmlEntities[char] || char);
+}

package/src/infrastructure/utils/translationHelpers.ts

@@ -0,0 +1,81 @@
+/**
+ * Translation Helper Utilities
+ *
+ * Provides safe translation utilities that handle cases where
+ * the translation function might not be available yet.
+ */
+
+export type TranslationFunction = (key: string, params?: Record<string, string | number>) => string;
+
+/**
+ * Safely get a translation with fallback
+ * @param t Translation function
+ * @param key Translation key
+ * @param fallback Fallback text if translation fails
+ * @returns Translated text or fallback
+ */
+export function getTranslationWithFallback(
+  t: TranslationFunction | unknown,
+  key: string,
+  fallback: string
+): string {
+  if (typeof t === "function") {
+    try {
+      return t(key);
+    } catch {
+      return fallback;
+    }
+  }
+  return fallback;
+}
+
+/**
+ * Get translation with parameters support
+ * @param t Translation function
+ * @param key Translation key
+ * @param params Parameters for translation
+ * @param fallback Fallback text if translation fails
+ * @returns Translated text or fallback
+ */
+export function getTranslationWithParams(
+  t: TranslationFunction | unknown,
+  key: string,
+  params: Record<string, string | number>,
+  fallback: string
+): string {
+  if (typeof t === "function") {
+    try {
+      return t(key, params);
+    } catch {
+      return fallback;
+    }
+  }
+  return fallback;
+}
+
+/**
+ * Check if translation function is available
+ * @param t Translation function to check
+ * @returns true if translation function is available
+ */
+export function isTranslationFunctionAvailable(t: unknown): t is TranslationFunction {
+  return typeof t === "function";
+}
+
+/**
+ * Create a safe translation wrapper that always returns a string
+ * @param t Translation function
+ * @returns Safe translation function
+ */
+export function createSafeTranslator(t: TranslationFunction | unknown): TranslationFunction {
+  return (key: string, params?: Record<string, string | number>) => {
+    if (isTranslationFunctionAvailable(t)) {
+      try {
+        return t(key, params);
+      } catch {
+        return key;
+      }
+    }
+    return key;
+  };
+}

package/src/infrastructure/utils/validators.ts

@@ -0,0 +1,59 @@
+/**
+ * Validation Utilities
+ *
+ * Provides validation functions for component props.
+ */
+
+export interface ValidationWarning {
+  message: string;
+  value: unknown;
+}
+
+/**
+ * Validate settings item title
+ */
+export function validateTitle(title: unknown): ValidationWarning | null {
+  if (!title || typeof title !== "string") {
+    return {
+      message: "[SettingsItemCard] Invalid title prop",
+      value: title,
+    };
+  }
+  return null;
+}
+
+/**
+ * Validate settings item description
+ */
+export function validateDescription(description: unknown): ValidationWarning | null {
+  if (description && typeof description !== "string") {
+    return {
+      message: "[SettingsItemCard] Invalid description prop",
+      value: description,
+    };
+  }
+  return null;
+}
+
+/**
+ * Validate switch props
+ */
+export function validateSwitchProps(
+  showSwitch: boolean,
+  onSwitchChange?: ((value: boolean) => void) | null
+): ValidationWarning | null {
+  if (showSwitch && !onSwitchChange) {
+    return {
+      message: "[SettingsItemCard] Switch shown but no onSwitchChange provided",
+      value: { showSwitch, hasOnSwitchChange: !!onSwitchChange },
+    };
+  }
+  return null;
+}
+
+/**
+ * Return validation result (no logging)
+ */
+export function getValidationResult(warning: ValidationWarning | null): ValidationWarning | null {
+  return warning;
+}