@umituz/react-native-ai-generation-content 1.13.1 → 1.15.0

package/src/presentation/components/result/ResultActions.tsx

@@ -1,6 +1,6 @@
 /**
  * ResultActions Component
- * Action buttons for generation results
+ * Action buttons for generation results - fully configurable
  */
 
 import * as React from "react";
@@ -11,6 +11,8 @@ import {
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import type { ResultActionsConfig } from "../../types/result-config.types";
+import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
 export interface ResultActionsProps {
   onShare?: () => void;
@@ -24,6 +26,7 @@ export interface ResultActionsProps {
     save: string;
     retry: string;
   };
+  config?: ResultActionsConfig;
 }
 
 export const ResultActions: React.FC<ResultActionsProps> = ({
@@ -33,102 +36,186 @@ export const ResultActions: React.FC<ResultActionsProps> = ({
   isSharing = false,
   isSaving = false,
   translations,
+  config = DEFAULT_RESULT_CONFIG.actions,
 }) => {
   const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_RESULT_CONFIG.actions, ...config };
 
-  const styles = useMemo(() => StyleSheet.create({
-    container: {
-      paddingHorizontal: 20,
-      paddingBottom: 20,
-    },
-    retryButton: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: 6,
-      paddingVertical: 12,
-      marginBottom: 16,
-    },
-    retryText: {
-      fontSize: 14,
-      fontWeight: "600",
-      color: tokens.colors.primary,
-    },
-    buttons: {
-      flexDirection: "row",
-      gap: 10,
-    },
-    button: {
-      flex: 1,
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: 8,
-      paddingVertical: 14,
-      borderRadius: 14,
-    },
-    shareButton: {
-      backgroundColor: tokens.colors.primary,
-    },
-    shareText: {
-      fontSize: 15,
-      fontWeight: "700",
-      color: tokens.colors.onPrimary,
-    },
-    saveButton: {
-      backgroundColor: tokens.colors.surface,
-      borderWidth: 2,
-      borderColor: tokens.colors.primary,
-    },
-    saveText: {
-      fontSize: 15,
-      fontWeight: "700",
-      color: tokens.colors.primary,
-    },
-  }), [tokens]);
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingHorizontal: cfg.spacing?.paddingHorizontal ?? 20,
+          paddingBottom: cfg.spacing?.paddingBottom ?? 20,
+        },
+        retryButton: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          paddingVertical: 12,
+          marginBottom: cfg.retry?.position === "top" ? 16 : 0,
+          marginTop: cfg.retry?.position === "bottom" ? 16 : 0,
+        },
+        retryText: {
+          fontSize: 14,
+          fontWeight: "600",
+          color: tokens.colors.primary,
+        },
+        buttons: {
+          flexDirection:
+            cfg.layout === "vertical" ? "column" : "row",
+          gap: cfg.buttonSpacing ?? 10,
+        },
+        button: {
+          flex: cfg.layout === "horizontal" ? 1 : undefined,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          paddingVertical: 14,
+          borderRadius: 14,
+        },
+      }),
+    [tokens, cfg],
+  );
+
+  const getButtonStyle = (variant?: string) => {
+    switch (variant) {
+      case "primary":
+        return {
+          backgroundColor: tokens.colors.primary,
+          color: tokens.colors.onPrimary,
+          textColor: tokens.colors.onPrimary,
+        };
+      case "secondary":
+        return {
+          backgroundColor: tokens.colors.surface,
+          borderWidth: 2,
+          borderColor: tokens.colors.primary,
+          color: tokens.colors.primary,
+          textColor: tokens.colors.primary,
+        };
+      case "outline":
+        return {
+          backgroundColor: "transparent",
+          borderWidth: 1,
+          borderColor: tokens.colors.borderLight,
+          color: tokens.colors.textPrimary,
+          textColor: tokens.colors.textPrimary,
+        };
+      case "text":
+        return {
+          backgroundColor: "transparent",
+          color: tokens.colors.primary,
+          textColor: tokens.colors.primary,
+        };
+      default:
+        return {
+          backgroundColor: tokens.colors.primary,
+          color: tokens.colors.onPrimary,
+          textColor: tokens.colors.onPrimary,
+        };
+    }
+  };
+
+  const renderButton = (
+    key: string,
+    onPress?: () => void,
+    isProcessing?: boolean,
+    label?: string,
+    processingLabel?: string,
+    icon?: string,
+    variant?: string,
+  ) => {
+    if (!onPress) return null;
+
+    const buttonStyle = getButtonStyle(variant);
+    const displayLabel = isProcessing ? processingLabel : label;
+    const displayIcon = isProcessing ? "hourglass" : icon;
+
+    return (
+      <TouchableOpacity
+        key={key}
+        style={[styles.button, buttonStyle]}
+        onPress={onPress}
+        disabled={isProcessing}
+      >
+        {displayIcon && (
+          <AtomicIcon
+            name={displayIcon}
+            size="md"
+            customColor={buttonStyle.textColor}
+          />
+        )}
+        <AtomicText
+          style={{
+            fontSize: 15,
+            fontWeight: "700",
+            color: buttonStyle.textColor,
+          }}
+        >
+          {displayLabel}
+        </AtomicText>
+      </TouchableOpacity>
+    );
+  };
+
+  const topActions = cfg.retry?.enabled && cfg.retry?.position === "top" && onRetry;
+  const bottomActions =
+    cfg.retry?.enabled && cfg.retry?.position === "bottom" && onRetry;
 
   return (
     <View style={styles.container}>
-      {onRetry && (
+      {topActions && (
         <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
-          <AtomicIcon name="refresh" size="sm" color="primary" />
-          <AtomicText style={styles.retryText}>{translations.retry}</AtomicText>
+          <AtomicIcon
+            name={cfg.retry?.icon ?? "refresh"}
+            size="sm"
+            color="primary"
+          />
+          <AtomicText style={styles.retryText}>
+            {cfg.retry?.label ?? translations.retry}
+          </AtomicText>
         </TouchableOpacity>
       )}
 
       <View style={styles.buttons}>
-        {onShare && (
-          <TouchableOpacity
-            style={[styles.button, styles.shareButton]}
-            onPress={onShare}
-            disabled={isSharing}
-          >
-            <AtomicIcon
-              name={isSharing ? "hourglass" : "share-social"}
-              size="md"
-              color="onPrimary"
-            />
-            <AtomicText style={styles.shareText}>
-              {isSharing ? translations.sharing : translations.share}
-            </AtomicText>
-          </TouchableOpacity>
-        )}
+        {cfg.share?.enabled &&
+          renderButton(
+            "share",
+            onShare,
+            isSharing,
+            cfg.share?.label ?? translations.share,
+            translations.sharing,
+            cfg.share?.icon ?? "share-social",
+            cfg.share?.variant,
+          )}
 
-        {onSave && (
-          <TouchableOpacity
-            style={[styles.button, styles.saveButton]}
-            onPress={onSave}
-            disabled={isSaving}
-          >
-            <AtomicIcon
-              name={isSaving ? "hourglass" : "download"}
-              size="md"
-              color="primary"
-            />
-            <AtomicText style={styles.saveText}>{translations.save}</AtomicText>
-          </TouchableOpacity>
-        )}
+        {cfg.save?.enabled &&
+          renderButton(
+            "save",
+            onSave,
+            isSaving,
+            cfg.save?.label ?? translations.save,
+            translations.save,
+            cfg.save?.icon ?? "download",
+            cfg.save?.variant,
+          )}
       </View>
+
+      {bottomActions && (
+        <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
+          <AtomicIcon
+            name={cfg.retry?.icon ?? "refresh"}
+            size="sm"
+            color="primary"
+          />
+          <AtomicText style={styles.retryText}>
+            {cfg.retry?.label ?? translations.retry}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
     </View>
   );
 };

package/src/presentation/components/result/ResultHeader.tsx

@@ -1,6 +1,6 @@
 /**
  * ResultHeader Component
- * Header with title and date badge
+ * Header with title and date badge - fully configurable
  */
 
 import * as React from "react";
@@ -11,57 +11,88 @@ import {
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import type { ResultHeaderConfig } from "../../types/result-config.types";
+import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
 export interface ResultHeaderProps {
   title?: string;
   date?: string;
+  config?: ResultHeaderConfig;
 }
 
-export const ResultHeader: React.FC<ResultHeaderProps> = ({ title, date }) => {
+export const ResultHeader: React.FC<ResultHeaderProps> = ({
+  title,
+  date,
+  config = DEFAULT_RESULT_CONFIG.header,
+}) => {
   const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_RESULT_CONFIG.header, ...config };
 
-  const styles = useMemo(() => StyleSheet.create({
-    container: {
-      alignItems: "center",
-      paddingHorizontal: 24,
-      marginBottom: 20,
-    },
-    title: {
-      fontSize: 24,
-      lineHeight: 32,
-      fontWeight: "800",
-      color: tokens.colors.textPrimary,
-      textAlign: "center",
-      marginBottom: 12,
-    },
-    badge: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: 6,
-      paddingHorizontal: 14,
-      paddingVertical: 6,
-      backgroundColor: tokens.colors.primaryContainer,
-      borderRadius: 16,
-    },
-    dateText: {
-      fontSize: 12,
-      fontWeight: "600",
-      color: tokens.colors.primary,
-    },
-  }), [tokens]);
+  const styles = useMemo(() => {
+    const badgeStyles =
+      cfg.dateBadgeStyle === "outline"
+        ? {
+            backgroundColor: "transparent",
+            borderWidth: 1,
+            borderColor: tokens.colors.primary,
+          }
+        : cfg.dateBadgeStyle === "minimal"
+          ? {
+              backgroundColor: "transparent",
+            }
+          : {
+              backgroundColor: tokens.colors.primaryContainer,
+            };
+
+    return StyleSheet.create({
+      container: {
+        alignItems:
+          cfg.titleAlignment === "left"
+            ? "flex-start"
+            : cfg.titleAlignment === "right"
+              ? "flex-end"
+              : "center",
+        paddingHorizontal: cfg.spacing?.paddingHorizontal ?? 24,
+        marginBottom: cfg.spacing?.marginBottom ?? 20,
+      },
+      title: {
+        fontSize: cfg.titleFontSize ?? 24,
+        lineHeight: (cfg.titleFontSize ?? 24) * 1.33,
+        fontWeight: cfg.titleFontWeight ?? "800",
+        color: tokens.colors.textPrimary,
+        textAlign: cfg.titleAlignment ?? "center",
+        marginBottom: cfg.spacing?.titleMarginBottom ?? 12,
+      },
+      badge: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        paddingHorizontal: 14,
+        paddingVertical: 6,
+        borderRadius: 16,
+        ...badgeStyles,
+      },
+      dateText: {
+        fontSize: 12,
+        fontWeight: "600",
+        color: tokens.colors.primary,
+      },
+    });
+  }, [tokens, cfg]);
 
   if (!title && !date) return null;
+  if (!cfg.showTitle && !cfg.showDate) return null;
 
   return (
     <View style={styles.container}>
-      {title && <AtomicText style={styles.title}>{title}</AtomicText>}
-      {date && (
+      {cfg.showTitle && title && (
+        <AtomicText style={styles.title}>{title}</AtomicText>
+      )}
+      {cfg.showDate && date && (
         <View style={styles.badge}>
-          <AtomicIcon
-            name="calendar-outline"
-            size="sm"
-            color="primary"
-          />
+          {cfg.showDateIcon && (
+            <AtomicIcon name="calendar-outline" size="sm" color="primary" />
+          )}
           <AtomicText style={styles.dateText}>{date}</AtomicText>
         </View>
       )}

package/src/presentation/components/result/ResultImageCard.tsx

@@ -1,6 +1,6 @@
 /**
  * ResultImageCard Component
- * Displays generated image with AI badge
+ * Displays generated image with AI badge - fully configurable
  */
 
 import * as React from "react";
@@ -11,60 +11,139 @@ import {
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import { LinearGradient } from "expo-linear-gradient";
+import type { ResultImageConfig } from "../../types/result-config.types";
+import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
 export interface ResultImageCardProps {
   imageUrl: string;
   badgeText: string;
+  config?: ResultImageConfig;
 }
 
 export const ResultImageCard: React.FC<ResultImageCardProps> = ({
   imageUrl,
   badgeText,
+  config = DEFAULT_RESULT_CONFIG.image,
 }) => {
   const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_RESULT_CONFIG.image, ...config };
 
-  const styles = useMemo(() => StyleSheet.create({
-    container: {
-      paddingHorizontal: 20,
-      marginBottom: 20,
-    },
-    frame: {
-      borderRadius: 20,
-      overflow: "hidden",
-      backgroundColor: tokens.colors.surface,
-    },
-    image: {
-      width: "100%",
-      aspectRatio: 1,
-    },
-    badge: {
-      position: "absolute",
-      top: 12,
-      right: 12,
-      flexDirection: "row",
-      alignItems: "center",
-      gap: 4,
-      paddingHorizontal: 10,
-      paddingVertical: 5,
-      backgroundColor: "rgba(0, 0, 0, 0.6)",
-      borderRadius: 12,
-    },
-    badgeText: {
-      fontSize: 10,
-      fontWeight: "700",
-      color: "#FFFFFF",
-      letterSpacing: 0.5,
-    },
-  }), [tokens]);
+  const badgePosition = useMemo(() => {
+    switch (cfg.badgePosition) {
+      case "top-left":
+        return { top: 12, left: 12 };
+      case "bottom-left":
+        return { bottom: 12, left: 12 };
+      case "bottom-right":
+        return { bottom: 12, right: 12 };
+      case "top-right":
+      default:
+        return { top: 12, right: 12 };
+    }
+  }, [cfg.badgePosition]);
+
+  const badgeBackground = useMemo(() => {
+    if (cfg.badgeStyle === "light") {
+      return "rgba(255, 255, 255, 0.9)";
+    } else if (cfg.badgeStyle === "dark") {
+      return "rgba(0, 0, 0, 0.6)";
+    }
+    return null;
+  }, [cfg.badgeStyle]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingHorizontal: cfg.spacing?.paddingHorizontal ?? 20,
+          marginBottom: cfg.spacing?.marginBottom ?? 20,
+        },
+        frame: {
+          borderRadius: cfg.borderRadius ?? 20,
+          overflow: "hidden",
+          backgroundColor: tokens.colors.surface,
+        },
+        image: {
+          width: "100%",
+          aspectRatio: cfg.aspectRatio ?? 1,
+        },
+        badge: {
+          position: "absolute",
+          ...badgePosition,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 4,
+          paddingHorizontal: 10,
+          paddingVertical: 5,
+          backgroundColor: badgeBackground ?? undefined,
+          borderRadius: 12,
+          overflow: "hidden",
+        },
+        gradientBadge: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 4,
+          paddingHorizontal: 10,
+          paddingVertical: 5,
+        },
+        badgeText: {
+          fontSize: 10,
+          fontWeight: "700",
+          color:
+            cfg.badgeStyle === "light"
+              ? tokens.colors.textPrimary
+              : "#FFFFFF",
+          letterSpacing: 0.5,
+        },
+      }),
+    [tokens, cfg, badgePosition, badgeBackground],
+  );
+
+  const renderBadge = () => {
+    if (!cfg.showBadge) return null;
+
+    const iconColor =
+      cfg.badgeStyle === "light" ? tokens.colors.primary : "#FFFFFF";
+
+    const badgeContent = (
+      <>
+        <AtomicIcon
+          name={cfg.badgeIcon ?? "sparkles"}
+          size="xs"
+          customColor={iconColor}
+        />
+        <AtomicText style={styles.badgeText}>{badgeText}</AtomicText>
+      </>
+    );
+
+    if (cfg.badgeStyle === "gradient") {
+      return (
+        <View style={styles.badge}>
+          <LinearGradient
+            colors={[tokens.colors.primary, tokens.colors.secondary]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={styles.gradientBadge}
+          >
+            {badgeContent}
+          </LinearGradient>
+        </View>
+      );
+    }
+
+    return <View style={styles.badge}>{badgeContent}</View>;
+  };
 
   return (
     <View style={styles.container}>
       <View style={styles.frame}>
-        <Image source={{ uri: imageUrl }} style={styles.image} resizeMode="cover" />
-        <View style={styles.badge}>
-          <AtomicIcon name="sparkles" size="xs" color="onPrimary" />
-          <AtomicText style={styles.badgeText}>{badgeText}</AtomicText>
-        </View>
+        <Image
+          source={{ uri: imageUrl }}
+          style={styles.image}
+          resizeMode="cover"
+        />
+        {renderBadge()}
       </View>
     </View>
   );