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

package/package.json

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

package/src/domains/creations/presentation/components/CreationCard.tsx

@@ -7,7 +7,6 @@ import {
 } from "@umituz/react-native-design-system";
 import { timezoneService } from "@umituz/react-native-timezone";
 import type { Creation } from "../../domain/entities/Creation";
-import type { CreationType } from "../../domain/value-objects/CreationsConfig";
 
 import { useCreationsProvider } from "./CreationsProvider";
 
@@ -29,7 +28,7 @@ export function CreationCard({
   locale = "en-US",
 }: CreationCardProps) {
   const tokens = useAppDesignTokens();
-  const { translatedTypes, t } = useCreationsProvider();
+  const { translatedTypes } = useCreationsProvider();
 
   const typeConfig = translatedTypes.find((type) => type.id === creation.type);
   const icon = typeConfig?.icon;

package/src/domains/creations/presentation/components/CreationsGrid.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { FlatList, RefreshControl, StyleSheet, type ViewStyle } from 'react-native';
 import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
 import type { Creation } from "../../domain/entities/Creation";
-import type { CreationType } from "../../domain/value-objects/CreationsConfig";
 import { CreationCard } from "./CreationCard";
 
 interface CreationsGridProps {

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,7 +1,6 @@
 declare const __DEV__: boolean;
 
 import React, { useMemo, useCallback, useState } from "react";
-import { View, StyleSheet, type LayoutChangeEvent } from "react-native";
 import {
   useAppDesignTokens,
   useAlert,
@@ -9,17 +8,20 @@ import {
   AlertMode,
   useSharing,
   FilterBottomSheet,
-  type DesignTokens,
   type BottomSheetModalRef,
-  ScreenLayout
+  ScreenLayout,
 } from "@umituz/react-native-design-system";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
-import { GalleryHeader, CreationsGrid, CreationImageViewer, GalleryEmptyStates } from "../components";
-import { getTranslatedTypes, getFilterCategoriesFromConfig } from "../utils/filterUtils";
+import {
+  GalleryHeader,
+  CreationsGrid,
+  CreationImageViewer,
+  GalleryEmptyStates,
+} from "../components";
+import { getFilterCategoriesFromConfig } from "../utils/filterUtils";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
@@ -61,7 +63,6 @@ function CreationsGalleryScreenContent({
   showFilter = config.showFilter ?? true,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
   const { share } = useSharing();
   const alert = useAlert();
 
@@ -83,8 +84,10 @@ function CreationsGalleryScreenContent({
   );
 
   // Prepare data for UI using utils
-  const translatedTypes = useMemo(() => getTranslatedTypes(config, t), [config, t]);
-  const allCategories = useMemo(() => getFilterCategoriesFromConfig(config, t), [config, t]);
+  const allCategories = useMemo(
+    () => getFilterCategoriesFromConfig(config, t),
+    [config, t],
+  );
 
   const handleShare = useCallback((creation: Creation) => {
     void share(creation.uri, { dialogTitle: t("common.share") });
@@ -124,15 +127,17 @@ function CreationsGalleryScreenContent({
   const handleFavorite = useCallback((creation: Creation, isFavorite: boolean) => {
     void (async () => {
       if (!userId) return;
-      const success = await repository.updateFavorite(userId, creation.id, isFavorite);
+      const success = await repository.updateFavorite(
+        userId,
+        creation.id,
+        isFavorite,
+      );
       if (success) {
         void refetch();
       }
     })();
   }, [userId, repository, refetch]);
 
-  const styles = useStyles(tokens);
-
   const renderEmptyComponent = useMemo(() => (
     <GalleryEmptyStates
       isLoading={isLoading}
@@ -228,13 +233,3 @@ function CreationsGalleryScreenContent({
   );
 }
 
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
-  container: { flex: 1, backgroundColor: tokens.colors.background },
-  centerContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: 400,
-    paddingHorizontal: tokens.spacing.xl
-  },
-});

package/src/index.ts

@@ -221,6 +221,7 @@ export {
   ResultImageCard,
   ResultStoryCard,
   ResultActions,
+  DEFAULT_RESULT_CONFIG,
 } from "./presentation/components";
 
 export type {
@@ -238,6 +239,13 @@ export type {
   ResultImageCardProps,
   ResultStoryCardProps,
   ResultActionsProps,
+  ResultConfig,
+  ResultHeaderConfig,
+  ResultImageConfig,
+  ResultStoryConfig,
+  ResultActionsConfig,
+  ResultLayoutConfig,
+  ResultActionButton,
 } from "./presentation/components";
 
 // =============================================================================

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

@@ -1,16 +1,28 @@
 /**
  * GenerationResultContent Component
- * Composition of result components for CelebrationModal
+ * Composition of result components for CelebrationModal - fully configurable
  */
 
 import * as React from "react";
 import { useMemo } from "react";
-import { ScrollView, StyleSheet, Dimensions, type ViewStyle, type StyleProp } from "react-native";
-import { Animated, useAppDesignTokens } from "@umituz/react-native-design-system";
+import {
+  ScrollView,
+  StyleSheet,
+  Dimensions,
+  type ViewStyle,
+  type StyleProp,
+  type DimensionValue,
+} from "react-native";
+import {
+  Animated,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 import { ResultHeader } from "./ResultHeader";
 import { ResultImageCard } from "./ResultImageCard";
 import { ResultStoryCard } from "./ResultStoryCard";
 import { ResultActions } from "./ResultActions";
+import type { ResultConfig } from "../../types/result-config.types";
+import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
 const { width } = Dimensions.get("window");
 
@@ -36,9 +48,12 @@ export interface GenerationResultContentProps {
     aiGenerated: string;
   };
   modalStyle?: StyleProp<ViewStyle>;
+  config?: ResultConfig;
 }
 
-export const GenerationResultContent: React.FC<GenerationResultContentProps> = ({
+export const GenerationResultContent: React.FC<
+  GenerationResultContentProps
+> = ({
   result,
   onShare,
   onSave,
@@ -47,25 +62,35 @@ export const GenerationResultContent: React.FC<GenerationResultContentProps> = (
   isSaving,
   translations,
   modalStyle,
+  config = DEFAULT_RESULT_CONFIG,
 }) => {
   const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_RESULT_CONFIG, ...config };
 
-  const styles = useMemo(() => StyleSheet.create({
-    container: {
-      width: width - 40,
-      maxHeight: "90%",
-      backgroundColor: tokens.colors.background,
-      borderRadius: 28,
-      overflow: "hidden",
-    },
-    scrollView: {
-      flex: 1,
-    },
-    scrollContent: {
-      paddingTop: 24,
-      paddingBottom: 20,
-    },
-  }), [tokens]);
+  const styles = useMemo(() => {
+    const containerWidth = cfg.layout?.maxWidth ?? width - 40;
+    const maxHeight: DimensionValue = (cfg.layout?.maxHeight ??
+      "90%") as DimensionValue;
+
+    return StyleSheet.create({
+      container: {
+        width: containerWidth,
+        maxHeight,
+        backgroundColor:
+          cfg.layout?.backgroundColor ?? tokens.colors.background,
+        borderRadius: cfg.layout?.borderRadius ?? 28,
+        overflow: "hidden",
+      },
+      scrollView: {
+        flex: 1,
+      },
+      scrollContent: {
+        paddingTop: cfg.layout?.contentPadding?.top ?? 24,
+        paddingBottom: cfg.layout?.contentPadding?.bottom ?? 20,
+        paddingHorizontal: cfg.layout?.contentPadding?.horizontal ?? 0,
+      },
+    });
+  }, [tokens, cfg, width]);
 
   return (
     <Animated.View style={[styles.container, modalStyle]}>
@@ -73,10 +98,21 @@ export const GenerationResultContent: React.FC<GenerationResultContentProps> = (
         style={styles.scrollView}
         contentContainerStyle={styles.scrollContent}
         showsVerticalScrollIndicator={false}
+        scrollEnabled={cfg.layout?.scrollEnabled ?? true}
       >
-        <ResultHeader title={result.title} date={result.date} />
-        <ResultImageCard imageUrl={result.imageUrl} badgeText={translations.aiGenerated} />
-        {result.story && <ResultStoryCard story={result.story} />}
+        <ResultHeader
+          title={result.title}
+          date={result.date}
+          config={cfg.header}
+        />
+        <ResultImageCard
+          imageUrl={result.imageUrl}
+          badgeText={translations.aiGenerated}
+          config={cfg.image}
+        />
+        {result.story && (
+          <ResultStoryCard story={result.story} config={cfg.story} />
+        )}
         <ResultActions
           onShare={onShare}
           onSave={onSave}
@@ -84,6 +120,7 @@ export const GenerationResultContent: React.FC<GenerationResultContentProps> = (
           isSharing={isSharing}
           isSaving={isSaving}
           translations={translations}
+          config={cfg.actions}
         />
       </ScrollView>
     </Animated.View>

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>
   );

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

@@ -1,6 +1,6 @@
 /**
  * ResultStoryCard Component
- * Displays story text with quote styling
+ * Displays story text with quote styling - fully configurable
  */
 
 import * as React from "react";
@@ -11,63 +11,113 @@ import {
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { LinearGradient } from "expo-linear-gradient";
+import type { ResultStoryConfig } from "../../types/result-config.types";
+import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
 export interface ResultStoryCardProps {
   story: string;
+  config?: ResultStoryConfig;
 }
 
-export const ResultStoryCard: React.FC<ResultStoryCardProps> = ({ story }) => {
+export const ResultStoryCard: React.FC<ResultStoryCardProps> = ({
+  story,
+  config = DEFAULT_RESULT_CONFIG.story,
+}) => {
   const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_RESULT_CONFIG.story, ...config };
 
-  const styles = useMemo(() => StyleSheet.create({
-    outer: {
-      paddingHorizontal: 20,
-      marginBottom: 20,
-    },
-    container: {
-      padding: 20,
+  const containerStyle = useMemo(() => {
+    const base = {
+      padding: cfg.spacing?.padding ?? 20,
       borderRadius: 16,
-      borderWidth: 1,
-      borderColor: tokens.colors.primaryContainer,
-    },
-    quoteIcon: {
-      fontSize: 40,
-      lineHeight: 40,
-      color: tokens.colors.primary,
-      opacity: 0.4,
-      marginBottom: -12,
-    },
-    quoteEnd: {
-      alignItems: "flex-end",
-      marginTop: -12,
-    },
-    quoteIconEnd: {
-      marginBottom: 0,
-    },
-    text: {
-      fontSize: 14,
-      color: tokens.colors.textPrimary,
-      textAlign: "center",
-      lineHeight: 22,
-      fontStyle: "italic",
-      fontWeight: "500",
-    },
-  }), [tokens]);
+    };
 
-  return (
-    <View style={styles.outer}>
-      <LinearGradient
-        colors={[tokens.colors.primaryContainer, tokens.colors.surface]}
-        style={styles.container}
-      >
-        <AtomicText style={styles.quoteIcon}>&quot;</AtomicText>
-        <AtomicText style={styles.text}>{story}</AtomicText>
+    if (cfg.borderStyle === "outline") {
+      return {
+        ...base,
+        borderWidth: 1,
+        borderColor: tokens.colors.primaryContainer,
+        backgroundColor: "transparent",
+      };
+    } else if (cfg.borderStyle === "filled") {
+      return {
+        ...base,
+        backgroundColor: tokens.colors.primaryContainer,
+      };
+    }
+
+    return base;
+  }, [cfg.borderStyle, cfg.spacing, tokens]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        outer: {
+          paddingHorizontal: cfg.spacing?.paddingHorizontal ?? 20,
+          marginBottom: cfg.spacing?.marginBottom ?? 20,
+        },
+        container: containerStyle,
+        quoteIcon: {
+          fontSize: 40,
+          lineHeight: 40,
+          color: tokens.colors.primary,
+          opacity: 0.4,
+          marginBottom: -12,
+        },
+        quoteEnd: {
+          alignItems:
+            cfg.textAlignment === "left"
+              ? "flex-start"
+              : cfg.textAlignment === "right"
+                ? "flex-end"
+                : "flex-end",
+          marginTop: -12,
+        },
+        quoteIconEnd: {
+          marginBottom: 0,
+        },
+        text: {
+          fontSize: cfg.fontSize ?? 14,
+          color: tokens.colors.textPrimary,
+          textAlign: cfg.textAlignment ?? "center",
+          lineHeight: (cfg.fontSize ?? 14) * 1.57,
+          fontStyle: cfg.fontStyle ?? "italic",
+          fontWeight: cfg.fontWeight ?? "500",
+        },
+      }),
+    [tokens, cfg, containerStyle],
+  );
+
+  const renderContent = () => (
+    <>
+      {cfg.showQuotes && <AtomicText style={styles.quoteIcon}>&quot;</AtomicText>}
+      <AtomicText style={styles.text}>{story}</AtomicText>
+      {cfg.showQuotes && (
         <View style={styles.quoteEnd}>
           <AtomicText style={[styles.quoteIcon, styles.quoteIconEnd]}>
             &quot;
           </AtomicText>
         </View>
-      </LinearGradient>
+      )}
+    </>
+  );
+
+  if (cfg.borderStyle === "gradient") {
+    return (
+      <View style={styles.outer}>
+        <LinearGradient
+          colors={[tokens.colors.primaryContainer, tokens.colors.surface]}
+          style={styles.container}
+        >
+          {renderContent()}
+        </LinearGradient>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.outer}>
+      <View style={styles.container}>{renderContent()}</View>
     </View>
   );
 };

package/src/presentation/components/result/index.ts

@@ -19,3 +19,17 @@ export type { ResultStoryCardProps } from "./ResultStoryCard";
 
 export { ResultActions } from "./ResultActions";
 export type { ResultActionsProps } from "./ResultActions";
+
+export {
+  DEFAULT_RESULT_CONFIG,
+} from "../../types/result-config.types";
+
+export type {
+  ResultConfig,
+  ResultHeaderConfig,
+  ResultImageConfig,
+  ResultStoryConfig,
+  ResultActionsConfig,
+  ResultLayoutConfig,
+  ResultActionButton,
+} from "../../types/result-config.types";

package/src/presentation/types/result-config.types.ts

@@ -0,0 +1,194 @@
+/**
+ * Result Preview Configuration Types
+ * Allows main apps to customize result preview appearance and behavior
+ */
+
+export interface ResultHeaderConfig {
+  showTitle?: boolean;
+  showDate?: boolean;
+  showDateIcon?: boolean;
+  titleAlignment?: "left" | "center" | "right";
+  titleFontSize?: number;
+  titleFontWeight?:
+    | "normal"
+    | "bold"
+    | "100"
+    | "200"
+    | "300"
+    | "400"
+    | "500"
+    | "600"
+    | "700"
+    | "800"
+    | "900";
+  dateBadgeStyle?: "outline" | "filled" | "minimal";
+  spacing?: {
+    marginBottom?: number;
+    titleMarginBottom?: number;
+    paddingHorizontal?: number;
+  };
+}
+
+export interface ResultImageConfig {
+  aspectRatio?: number;
+  borderRadius?: number;
+  showBadge?: boolean;
+  badgePosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  badgeStyle?: "dark" | "light" | "gradient";
+  badgeIcon?: string;
+  spacing?: {
+    marginBottom?: number;
+    paddingHorizontal?: number;
+  };
+}
+
+export interface ResultStoryConfig {
+  showQuotes?: boolean;
+  textAlignment?: "left" | "center" | "right";
+  fontSize?: number;
+  fontStyle?: "normal" | "italic";
+  fontWeight?:
+    | "normal"
+    | "bold"
+    | "100"
+    | "200"
+    | "300"
+    | "400"
+    | "500"
+    | "600"
+    | "700"
+    | "800"
+    | "900";
+  borderStyle?: "outline" | "filled" | "gradient";
+  spacing?: {
+    marginBottom?: number;
+    paddingHorizontal?: number;
+    padding?: number;
+  };
+}
+
+export interface ResultActionButton {
+  enabled?: boolean;
+  label?: string;
+  icon?: string;
+  variant?: "primary" | "secondary" | "outline" | "text";
+  position?: "top" | "bottom";
+}
+
+export interface ResultActionsConfig {
+  share?: ResultActionButton;
+  save?: ResultActionButton;
+  retry?: ResultActionButton;
+  layout?: "horizontal" | "vertical" | "grid";
+  buttonSpacing?: number;
+  spacing?: {
+    paddingHorizontal?: number;
+    paddingBottom?: number;
+  };
+}
+
+export interface ResultLayoutConfig {
+  maxWidth?: number;
+  maxHeight?: string | number;
+  borderRadius?: number;
+  backgroundColor?: string;
+  scrollEnabled?: boolean;
+  contentPadding?: {
+    top?: number;
+    bottom?: number;
+    horizontal?: number;
+  };
+}
+
+/**
+ * Complete Result Preview Configuration
+ * Pass this from main app to customize all aspects of result preview
+ */
+export interface ResultConfig {
+  header?: ResultHeaderConfig;
+  image?: ResultImageConfig;
+  story?: ResultStoryConfig;
+  actions?: ResultActionsConfig;
+  layout?: ResultLayoutConfig;
+}
+
+/**
+ * Default configuration for result preview
+ * Used when no config is provided by main app
+ */
+export const DEFAULT_RESULT_CONFIG: ResultConfig = {
+  header: {
+    showTitle: true,
+    showDate: true,
+    showDateIcon: true,
+    titleAlignment: "center",
+    titleFontSize: 24,
+    titleFontWeight: "800",
+    dateBadgeStyle: "filled",
+    spacing: {
+      marginBottom: 20,
+      titleMarginBottom: 12,
+      paddingHorizontal: 24,
+    },
+  },
+  image: {
+    aspectRatio: 1,
+    borderRadius: 20,
+    showBadge: true,
+    badgePosition: "top-right",
+    badgeStyle: "dark",
+    badgeIcon: "sparkles",
+    spacing: {
+      marginBottom: 20,
+      paddingHorizontal: 20,
+    },
+  },
+  story: {
+    showQuotes: true,
+    textAlignment: "center",
+    fontSize: 14,
+    fontStyle: "italic",
+    fontWeight: "500",
+    borderStyle: "gradient",
+    spacing: {
+      marginBottom: 20,
+      paddingHorizontal: 20,
+      padding: 20,
+    },
+  },
+  actions: {
+    share: {
+      enabled: true,
+      icon: "share-social",
+      variant: "primary",
+      position: "bottom",
+    },
+    save: {
+      enabled: true,
+      icon: "download",
+      variant: "secondary",
+      position: "bottom",
+    },
+    retry: {
+      enabled: true,
+      icon: "refresh",
+      variant: "text",
+      position: "top",
+    },
+    layout: "horizontal",
+    buttonSpacing: 10,
+    spacing: {
+      paddingHorizontal: 20,
+      paddingBottom: 20,
+    },
+  },
+  layout: {
+    borderRadius: 28,
+    scrollEnabled: true,
+    contentPadding: {
+      top: 24,
+      bottom: 20,
+      horizontal: 0,
+    },
+  },
+};