@umituz/react-native-settings 4.21.18 → 4.21.20

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

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, Image, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import type { VideoTutorial } from "../../types";
 
 interface VideoTutorialCardProps {
@@ -32,10 +32,7 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
     <TouchableOpacity
       style={[
         styles.container,
-        {
-          backgroundColor: tokens.colors.surface,
-          borderColor: tokens.colors.border,
-        },
+        { backgroundColor: tokens.colors.surface, borderColor: tokens.colors.border },
         horizontal && styles.horizontalContainer,
       ]}
       onPress={onPress}
@@ -47,149 +44,60 @@ 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)" }]}
-        >
-          <Text style={styles.durationText}>
-            {formatDuration(tutorial.duration)}
-          </Text>
+        <View style={[styles.durationBadge, { backgroundColor: "rgba(0,0,0,0.7)" }]}>
+          <AtomicText style={styles.durationText}>{formatDuration(tutorial.duration)}</AtomicText>
         </View>
         {tutorial.featured && (
-          <View
-            style={[
-              styles.featuredBadge,
-              { backgroundColor: tokens.colors.primary },
-            ]}
-          >
-            <Text style={[styles.featuredText, { color: tokens.colors.onPrimary }]}>
-              Featured
-            </Text>
+          <View style={[styles.featuredBadge, { backgroundColor: tokens.colors.primary }]}>
+            <AtomicText style={[styles.featuredText, { color: tokens.colors.onPrimary }]}>Featured</AtomicText>
           </View>
         )}
       </View>
 
       <View style={styles.content}>
-        <Text
-          style={[
-            styles.title,
-            { color: tokens.colors.textPrimary },
-            horizontal && styles.horizontalTitle,
-          ]}
+        <AtomicText
+          style={[styles.title, horizontal && styles.horizontalTitle]}
           numberOfLines={2}
         >
           {tutorial.title}
-        </Text>
+        </AtomicText>
 
-        <Text
-          style={[
-            styles.description,
-            { color: tokens.colors.textSecondary },
-            horizontal && styles.horizontalDescription,
-          ]}
+        <AtomicText
+          style={[styles.description, horizontal && styles.horizontalDescription]}
           numberOfLines={horizontal ? 2 : 3}
         >
           {tutorial.description}
-        </Text>
+        </AtomicText>
 
         <View style={styles.metadata}>
-          <Text
-            style={[styles.category, { color: tokens.colors.textTertiary }]}
-          >
+          <AtomicText style={styles.category}>
             {tutorial.category.replace("-", " ")}
-          </Text>
-          <Text
-            style={[styles.difficulty, { color: tokens.colors.textSecondary }]}
-          >
+          </AtomicText>
+          <AtomicText style={styles.difficulty}>
             {tutorial.difficulty}
-          </Text>
+          </AtomicText>
         </View>
       </View>
     </TouchableOpacity>
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  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: tokens.colors.textInverse,
-    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: tokens.typography.titleMedium.fontSize,
-    fontWeight: "600",
-    marginBottom: 6,
-  },
-  horizontalTitle: {
-    fontSize: tokens.typography.bodyLarge.fontSize,
-  },
-  description: {
-    fontSize: tokens.typography.bodyMedium.fontSize,
-    lineHeight: 20,
-    marginBottom: 8,
-  },
-  horizontalDescription: {
-    fontSize: tokens.typography.bodySmall.fontSize,
-    lineHeight: 16,
-    marginBottom: 6,
-  },
-  metadata: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  category: {
-    fontSize: 12,
-    textTransform: "capitalize",
-    fontWeight: "500",
-  },
-  difficulty: {
-    fontSize: 12,
-    textTransform: "capitalize",
-    fontWeight: "500",
-  },
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => 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: tokens.colors.textInverse, 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: 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 },
+  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 },
 });

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

@@ -23,176 +23,111 @@ import type { VideoTutorial } from "../../types";
 import { VideoTutorialCard } from "../components/VideoTutorialCard";
 
 export interface VideoTutorialsScreenProps {
-  /**
-   * All tutorials to display (required)
-   */
   tutorials: VideoTutorial[];
-  /**
-   * Featured tutorials to display in horizontal scroll (optional)
-   */
   featuredTutorials?: VideoTutorial[];
-  /**
-   * Title of the screen
-   */
   title?: string;
-  /**
-   * Title for the featured tutorials section
-   */
   featuredTitle?: string;
-  /**
-   * Title for all tutorials section
-   */
   allTutorialsTitle?: string;
-  /**
-   * Empty state message when no tutorials
-   */
   emptyMessage?: string;
-  /**
-   * Loading state (optional - defaults to false)
-   */
   isLoading?: boolean;
-  /**
-   * Callback when a tutorial is pressed
-   */
   onTutorialPress?: (tutorial: VideoTutorial) => void;
 }
 
-export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
-  React.memo(
-    ({
-      tutorials,
-      featuredTutorials,
-      title = "Video Tutorials",
-      featuredTitle = "Featured",
-      allTutorialsTitle = "All Tutorials",
-      emptyMessage = "No tutorials available.",
-      isLoading = false,
-      onTutorialPress,
-    }) => {
-      const tokens = useAppDesignTokens();
-      const styles = getStyles(tokens);
+export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.memo(
+  ({
+    tutorials,
+    featuredTutorials,
+    title = "Video Tutorials",
+    featuredTitle = "Featured",
+    allTutorialsTitle = "All Tutorials",
+    emptyMessage = "No tutorials available.",
+    isLoading = false,
+    onTutorialPress,
+  }) => {
+    const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
 
-      const handleTutorialPress = React.useCallback(
-        (tutorial: VideoTutorial) => {
-          onTutorialPress?.(tutorial);
-        },
-        [onTutorialPress],
-      );
+    const handleTutorialPress = React.useCallback(
+      (tutorial: VideoTutorial) => onTutorialPress?.(tutorial),
+      [onTutorialPress]
+    );
 
-      const renderTutorialItem = React.useCallback(
-        ({ item }: { item: VideoTutorial }) => (
-          <VideoTutorialCard
-            tutorial={item}
-            onPress={() => handleTutorialPress(item)}
-          />
-        ),
-        [handleTutorialPress],
-      );
+    const renderTutorialItem = React.useCallback(
+      ({ item }: { item: VideoTutorial }) => (
+        <VideoTutorialCard tutorial={item} onPress={() => handleTutorialPress(item)} />
+      ),
+      [handleTutorialPress]
+    );
 
-      const renderFeaturedItem = React.useCallback(
-        ({ item }: { item: VideoTutorial }) => (
-          <VideoTutorialCard
-            tutorial={item}
-            onPress={() => handleTutorialPress(item)}
-            horizontal
-          />
-        ),
-        [handleTutorialPress],
-      );
+    const renderFeaturedItem = React.useCallback(
+      ({ item }: { item: VideoTutorial }) => (
+        <VideoTutorialCard tutorial={item} onPress={() => handleTutorialPress(item)} horizontal />
+      ),
+      [handleTutorialPress]
+    );
 
-      if (isLoading) {
-        return <AtomicSpinner size="lg" fullContainer />;
-      }
+    if (isLoading) return <AtomicSpinner size="lg" fullContainer />;
 
-      const hasFeatured = featuredTutorials && featuredTutorials.length > 0;
-      const hasTutorials = tutorials && tutorials.length > 0;
-
-      if (!hasTutorials && !hasFeatured) {
-        return (
-          <View style={styles.emptyContainer}>
-            <AtomicText color="secondary" type="bodyLarge">
-              {emptyMessage}
-            </AtomicText>
-          </View>
-        );
-      }
+    const hasFeatured = featuredTutorials && featuredTutorials.length > 0;
+    const hasTutorials = tutorials && tutorials.length > 0;
 
+    if (!hasTutorials && !hasFeatured) {
       return (
-        <ScreenLayout scrollable={false} edges={["top", "bottom"]}>
-          <Text style={[styles.title, { color: tokens.colors.textPrimary }]}>
-            {title}
-          </Text>
+        <View style={styles.emptyContainer}>
+          <AtomicText color="secondary" type="bodyLarge">{emptyMessage}</AtomicText>
+        </View>
+      );
+    }
 
-          {hasFeatured && (
-            <View style={styles.section}>
-              <Text
-                style={[
-                  styles.sectionTitle,
-                  { color: tokens.colors.textSecondary },
-                ]}
-              >
-                {featuredTitle}
-              </Text>
-              <FlatList
-                data={featuredTutorials}
-                renderItem={renderFeaturedItem}
-                keyExtractor={(item: VideoTutorial) => item.id}
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                contentContainerStyle={styles.horizontalList}
-              />
-            </View>
-          )}
+    return (
+      <ScreenLayout scrollable={false} edges={["top", "bottom"]}>
+        <AtomicText style={styles.title}>{title}</AtomicText>
 
-          {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>
-      );
-    },
-  );
+        {hasFeatured && (
+          <View style={styles.section}>
+            <AtomicText color="secondary" style={styles.sectionTitle}>{featuredTitle}</AtomicText>
+            <FlatList
+              data={featuredTutorials}
+              renderItem={renderFeaturedItem}
+              keyExtractor={(item) => item.id}
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.horizontalList}
+            />
+          </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>
+        )}
+      </ScreenLayout>
+    );
+  }
+);
 
-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,
-    },
-    emptyContainer: {
-      flex: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      padding: 20,
-    },
-  });
+const getStyles = (tokens: any) => StyleSheet.create({
+  title: {
+    fontSize: tokens.typography.headlineLarge.fontSize,
+    color: tokens.colors.textPrimary,
+    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/presentation/components/SettingsItemCard.tsx

@@ -5,45 +5,26 @@ import {
     AtomicIcon,
     AtomicText,
     type IconName,
+    withAlpha
 } from "@umituz/react-native-design-system";
 
 export interface SettingsItemCardProps {
-    /** Item title */
     title: string;
-    /** Optional description or current value */
     description?: string;
-    /** Icon name from AtomicIcon */
     icon: IconName;
-    /** On press handler - if undefined, item is not clickable */
     onPress?: () => void;
-    /** Optional container style */
     containerStyle?: ViewStyle;
-    /** Optional section title (shows above the card) */
     sectionTitle?: string;
-    /** Optional right icon (defaults to chevron-forward, hidden if not clickable) */
     rightIcon?: IconName;
-    /** Optional icon background color (defaults to primary with opacity) */
     iconBgColor?: string;
-    /** Optional icon color */
     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;
 }
 
-/**
- * SettingsItemCard
- *
- * A premium, consistent card for settings items used across all apps.
- * Follows the visual style of the Appearance section.
- */
 export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     title,
     description,
@@ -63,7 +44,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     const tokens = useAppDesignTokens();
     const colors = tokens.colors;
 
-    const defaultIconBg = iconBgColor || `${colors.primary}15`;
+    const defaultIconBg = iconBgColor || withAlpha(colors.primary, 0.15);
     const defaultIconColor = iconColor || colors.primary;
     const isClickable = !!onPress && !showSwitch;
     const shouldShowChevron = !showSwitch && (showChevron ?? isClickable);
@@ -137,7 +118,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
                     style={({ pressed }) => [
                         styles.itemContainer,
                         {
-                            backgroundColor: pressed ? `${colors.primary}08` : "transparent",
+                            backgroundColor: pressed ? withAlpha(colors.primary, 0.08) : "transparent",
                         },
                     ]}
                     onPress={onPress}