npm - @umituz/react-native-ai-generation-content - Versions diffs - 1.26.18 → 1.26.19 - Mend

@umituz/react-native-ai-generation-content 1.26.18 → 1.26.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.26.18",
+  "version": "1.26.19",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/scenarios/domain/scenario.types.ts CHANGED Viewed

@@ -95,6 +95,7 @@ export interface ScenarioMainCategory {
   readonly descriptionKey?: string;
   readonly icon?: string;
   readonly emoji?: string;
+  readonly image?: string;
   readonly order: number;
   readonly subCategoryIds: readonly string[];
 }
@@ -105,6 +106,7 @@ export interface ScenarioSubCategory {
   readonly descriptionKey?: string;
   readonly icon?: string;
   readonly emoji?: string;
+  readonly image?: string;
   readonly mainCategoryId: string;
   readonly scenarioCategories: readonly string[];
   readonly order: number;

package/src/domains/scenarios/presentation/screens/MainCategoryScreen.tsx CHANGED Viewed

@@ -5,15 +5,12 @@
 import React, { useMemo, useCallback, useEffect } from "react";
 import {
-  View,
   FlatList,
   StyleSheet,
-  TouchableOpacity,
   type ListRenderItemInfo,
 } from "react-native";
 import {
-  AtomicText,
-  AtomicIcon,
+  AtomicCard,
   useAppDesignTokens,
   ScreenLayout,
   type DesignTokens,
@@ -68,60 +65,22 @@ export const MainCategoryScreen: React.FC<MainCategoryScreenProps> = ({
       const title = t(item.titleKey);
       const description = item.descriptionKey ? t(item.descriptionKey) : "";
+      // Always use AtomicCard now as we moved to visual cards
       return (
-        <TouchableOpacity
-          style={[
-            styles.card,
-            {
-              backgroundColor: tokens.colors.surface,
-              borderColor: tokens.colors.border,
-            },
-          ]}
+        <AtomicCard
+          image={item.image}
+          // Fallback to emoji/icon if no image (though we expect images now)
+          leftIcon={!item.image && !item.emoji ? (item.icon as any) : undefined}
+          title={title}
+          subtitle={description}
+          imageAspectRatio={1.5}
           onPress={() => handleCategoryPress(item.id)}
-          activeOpacity={0.7}
           testID={`main-category-${item.id}`}
-        >
-          <View style={styles.cardContent}>
-            <View
-              style={[
-                styles.iconContainer,
-                { backgroundColor: tokens.colors.surfaceVariant },
-              ]}
-            >
-              {item.emoji ? (
-                <AtomicText style={styles.emoji}>{item.emoji}</AtomicText>
-              ) : (
-                <AtomicIcon name={item.icon as never} size="lg" color="primary" />
-              )}
-            </View>
-            <View style={styles.textContent}>
-              <AtomicText
-                style={[styles.title, { color: tokens.colors.textPrimary }]}
-              >
-                {title}
-              </AtomicText>
-              {description ? (
-                <AtomicText
-                  style={[
-                    styles.description,
-                    { color: tokens.colors.textSecondary },
-                  ]}
-                  numberOfLines={2}
-                >
-                  {description}
-                </AtomicText>
-              ) : null}
-            </View>
-            <AtomicIcon
-              name="chevron-forward"
-              size="md"
-              color="textSecondary"
-            />
-          </View>
-        </TouchableOpacity>
+          style={{ marginBottom: tokens.spacing.md }}
+        />
       );
     },
-    [t, tokens, styles, handleCategoryPress]
+    [t, tokens, handleCategoryPress]
   );
   return (
@@ -153,7 +112,6 @@ export const MainCategoryScreen: React.FC<MainCategoryScreenProps> = ({
     </ScreenLayout>
   );
 };
 const createStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     listContent: {
@@ -161,38 +119,4 @@ const createStyles = (tokens: DesignTokens) =>
       paddingBottom: tokens.spacing.xl,
       gap: tokens.spacing.sm,
     },
-    card: {
-      borderRadius: tokens.borders.radius.lg,
-      borderWidth: 1,
-      overflow: "hidden",
-    },
-    cardContent: {
-      flexDirection: "row",
-      alignItems: "center",
-      padding: tokens.spacing.md,
-    },
-    iconContainer: {
-      width: 56,
-      height: 56,
-      borderRadius: 28,
-      justifyContent: "center",
-      alignItems: "center",
-      marginRight: tokens.spacing.md,
-    },
-    emoji: {
-      fontSize: 28,
-    },
-    textContent: {
-      flex: 1,
-      marginRight: tokens.spacing.sm,
-    },
-    title: {
-      fontSize: 17,
-      fontWeight: "700",
-      marginBottom: 2,
-    },
-    description: {
-      fontSize: 14,
-      lineHeight: 18,
-    },
   });

package/src/domains/scenarios/presentation/screens/SubCategoryScreen.tsx CHANGED Viewed

@@ -5,15 +5,12 @@
 import React, { useMemo, useCallback, useEffect } from "react";
 import {
-  View,
   FlatList,
   StyleSheet,
-  TouchableOpacity,
   type ListRenderItemInfo,
 } from "react-native";
 import {
-  AtomicText,
-  AtomicIcon,
+  AtomicCard,
   useAppDesignTokens,
   ScreenLayout,
   type DesignTokens,
@@ -87,59 +84,21 @@ export const SubCategoryScreen: React.FC<SubCategoryScreenProps> = ({
       const description = item.descriptionKey ? t(item.descriptionKey) : "";
       return (
-        <TouchableOpacity
-          style={[
-            styles.card,
-            {
-              backgroundColor: tokens.colors.surface,
-              borderColor: tokens.colors.border,
-            },
-          ]}
+        <AtomicCard
+          image={item.image}
+          leftIcon={!item.emoji ? (item.icon as any) : undefined}
+          badge={item.emoji}
+          title={title}
+          subtitle={description}
+          // Smaller aspect ratio for subcategories if they have images, or standard if not
+          imageAspectRatio={item.image ? 1.5 : undefined}
           onPress={() => handleSubCategoryPress(item.id)}
-          activeOpacity={0.7}
           testID={`sub-category-${item.id}`}
-        >
-          <View style={styles.cardContent}>
-            <View
-              style={[
-                styles.iconContainer,
-                { backgroundColor: tokens.colors.surfaceVariant },
-              ]}
-            >
-              {item.emoji ? (
-                <AtomicText style={styles.emoji}>{item.emoji}</AtomicText>
-              ) : (
-                <AtomicIcon name={item.icon as never} size="lg" color="primary" />
-              )}
-            </View>
-            <View style={styles.textContent}>
-              <AtomicText
-                style={[styles.title, { color: tokens.colors.textPrimary }]}
-              >
-                {title}
-              </AtomicText>
-              {description ? (
-                <AtomicText
-                  style={[
-                    styles.description,
-                    { color: tokens.colors.textSecondary },
-                  ]}
-                  numberOfLines={2}
-                >
-                  {description}
-                </AtomicText>
-              ) : null}
-            </View>
-            <AtomicIcon
-              name="chevron-forward"
-              size="md"
-              color="textSecondary"
-            />
-          </View>
-        </TouchableOpacity>
+          style={{ marginBottom: tokens.spacing.md }}
+        />
       );
     },
-    [t, tokens, styles, handleSubCategoryPress]
+    [t, tokens, handleSubCategoryPress]
   );
   return (
@@ -179,38 +138,4 @@ const createStyles = (tokens: DesignTokens) =>
       paddingBottom: tokens.spacing.xl,
       gap: tokens.spacing.sm,
     },
-    card: {
-      borderRadius: tokens.borders.radius.lg,
-      borderWidth: 1,
-      overflow: "hidden",
-    },
-    cardContent: {
-      flexDirection: "row",
-      alignItems: "center",
-      padding: tokens.spacing.md,
-    },
-    iconContainer: {
-      width: 56,
-      height: 56,
-      borderRadius: 28,
-      justifyContent: "center",
-      alignItems: "center",
-      marginRight: tokens.spacing.md,
-    },
-    emoji: {
-      fontSize: 28,
-    },
-    textContent: {
-      flex: 1,
-      marginRight: tokens.spacing.sm,
-    },
-    title: {
-      fontSize: 17,
-      fontWeight: "700",
-      marginBottom: 2,
-    },
-    description: {
-      fontSize: 14,
-      lineHeight: 18,
-    },
   });