@umituz/react-native-ai-generation-content 1.17.233 → 1.17.234

package/package.json

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

package/src/domains/result-preview/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Result Preview Domain Export
+ * Reusable result preview components for AI generation
+ */
+
+export * from "./presentation/components";
+export * from "./presentation/hooks";
+export * from "./presentation/types";

package/src/domains/result-preview/presentation/components/ResultActionBar.tsx

@@ -0,0 +1,74 @@
+/**
+ * ResultActionBar Component
+ * Action buttons for save, share, and try again
+ */
+
+import React, { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import {
+  AtomicButton,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ResultActionBarProps } from "../types/result-preview.types";
+
+export const ResultActionBar: React.FC<ResultActionBarProps> = ({
+  isSaving,
+  isSharing,
+  onDownload,
+  onShare,
+  onTryAgain,
+  saveButtonText,
+  saveButtonLoadingText,
+  shareButtonText,
+  shareButtonLoadingText,
+  tryAgainButtonText,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flexDirection: "row",
+          gap: tokens.spacing.md,
+          marginBottom: tokens.spacing.lg,
+        },
+        button: {
+          flex: 1,
+        },
+        tryAgainButton: {
+          marginTop: tokens.spacing.md,
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      <AtomicButton
+        title={isSaving ? saveButtonLoadingText : saveButtonText}
+        onPress={onDownload}
+        disabled={isSaving}
+        variant="secondary"
+        icon="download"
+        style={styles.button}
+      />
+      <AtomicButton
+        title={isSharing ? shareButtonLoadingText : shareButtonText}
+        onPress={onShare}
+        disabled={isSharing}
+        variant="primary"
+        icon="share-social"
+        style={styles.button}
+      />
+      <AtomicButton
+        title={tryAgainButtonText}
+        onPress={onTryAgain}
+        variant="text"
+        icon="refresh"
+        fullWidth
+        style={styles.tryAgainButton}
+      />
+    </View>
+  );
+};

package/src/domains/result-preview/presentation/components/ResultImageCard.tsx

@@ -0,0 +1,64 @@
+/**
+ * ResultImageCard Component
+ * Displays AI generation result image with proper styling
+ */
+
+import React, { useMemo } from "react";
+import { StyleSheet, View, ViewStyle } from "react-native";
+import { AtomicImage } from "@umituz/react-native-image";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { ResultImageCardProps } from "../types/result-preview.types";
+
+export const ResultImageCard: React.FC<ResultImageCardProps> = ({
+  imageUrl,
+  style,
+  rounded = true,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          width: "100%",
+          aspectRatio: 1,
+          borderRadius: rounded ? tokens.borders.radius.md : 0,
+          overflow: "hidden",
+          backgroundColor: tokens.colors.backgroundSecondary,
+        },
+        image: {
+          width: "100%",
+          height: "100%",
+        },
+      }),
+    [tokens, rounded],
+  );
+
+  const displayImageUrl = useMemo(() => {
+    if (!imageUrl) return null;
+
+    // If not a URL and not a data URL, assume it's base64
+    if (
+      !imageUrl.startsWith("http") &&
+      !imageUrl.startsWith("data:image")
+    ) {
+      return `data:image/jpeg;base64,${imageUrl}`;
+    }
+
+    return imageUrl;
+  }, [imageUrl]);
+
+  if (!displayImageUrl) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <AtomicImage
+        source={{ uri: displayImageUrl }}
+        style={styles.image}
+        rounded={rounded}
+      />
+    </View>
+  );
+};

package/src/domains/result-preview/presentation/components/ResultPreviewScreen.tsx

@@ -0,0 +1,101 @@
+/**
+ * ResultPreviewScreen Component
+ * Displays AI generation result with actions
+ */
+
+import React, { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  ScreenLayout,
+  NavigationHeader,
+} from "@umituz/react-native-design-system";
+import { ResultImageCard } from "./ResultImageCard";
+import { ResultActionBar } from "./ResultActionBar";
+import type { ResultPreviewScreenProps } from "../types/result-preview.types";
+
+export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
+  imageUrl,
+  isSaving,
+  isSharing,
+  onDownload,
+  onShare,
+  onTryAgain,
+  onNavigateBack,
+  translations,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          paddingHorizontal: tokens.spacing.lg,
+        },
+        resultContainer: {
+          marginTop: tokens.spacing.lg,
+        },
+        title: {
+          fontSize: 18,
+          fontWeight: "700",
+          color: tokens.colors.textPrimary,
+          marginBottom: tokens.spacing.md,
+        },
+      }),
+    [tokens],
+  );
+
+  const displayImageUrl = useMemo(() => {
+    if (!imageUrl) return null;
+
+    // If not a URL and not a data URL, assume it's base64
+    if (
+      !imageUrl.startsWith("http") &&
+      !imageUrl.startsWith("data:image")
+    ) {
+      return `data:image/jpeg;base64,${imageUrl}`;
+    }
+
+    return imageUrl;
+  }, [imageUrl]);
+
+  if (!displayImageUrl) {
+    return null;
+  }
+
+  return (
+    <ScreenLayout
+      scrollable
+      edges={["left", "right"]}
+      backgroundColor={tokens.colors.backgroundPrimary}
+    >
+      <NavigationHeader
+        title={translations.title}
+        onBackPress={onNavigateBack}
+      />
+      <View style={[styles.container, style]}>
+        <View style={styles.resultContainer}>
+          <AtomicText style={styles.title}>
+            {translations.yourResult}
+          </AtomicText>
+          <ResultImageCard imageUrl={displayImageUrl} />
+          <ResultActionBar
+            isSaving={isSaving}
+            isSharing={isSharing}
+            onDownload={onDownload}
+            onShare={onShare}
+            onTryAgain={onTryAgain}
+            saveButtonText={translations.saveButton}
+            saveButtonLoadingText={translations.saving}
+            shareButtonText={translations.shareButton}
+            shareButtonLoadingText={translations.sharing}
+            tryAgainButtonText={translations.tryAnother}
+          />
+        </View>
+      </View>
+    </ScreenLayout>
+  );
+};

package/src/domains/result-preview/presentation/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Result Preview Components Export
+ */
+
+export { ResultPreviewScreen } from "./ResultPreviewScreen";
+export { ResultImageCard } from "./ResultImageCard";
+export { ResultActionBar } from "./ResultActionBar";

package/src/domains/result-preview/presentation/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Result Preview Hooks Export
+ */
+
+export { useResultActions } from "./useResultActions";

package/src/domains/result-preview/presentation/hooks/useResultActions.ts

@@ -0,0 +1,148 @@
+/**
+ * useResultActions Hook
+ * Handles save and share actions for AI generation results
+ */
+
+import { useState, useCallback } from "react";
+import * as MediaLibrary from "expo-media-library";
+import * as Sharing from "expo-sharing";
+import { File, Paths } from "expo-file-system/next";
+import type {
+  UseResultActionsOptions,
+  UseResultActionsReturn,
+} from "../types/result-preview.types";
+
+/**
+ * Check if a string is a base64 data URL
+ */
+const isBase64DataUrl = (str: string): boolean => {
+  return str.startsWith("data:image/");
+};
+
+/**
+ * Save base64 image to file system
+ */
+const saveBase64ToFile = async (
+  base64Data: string,
+): Promise<string> => {
+  const timestamp = Date.now();
+  const filename = `ai_generation_${timestamp}.jpg`;
+  const file = new File(Paths.cache, filename);
+
+  // Extract pure base64 data (remove data URL prefix if present)
+  const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, "");
+
+  // Convert base64 to Uint8Array
+  const binaryString = atob(pureBase64);
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  // Write file
+  file.write(bytes);
+
+  return file.uri;
+};
+
+/**
+ * Hook for managing result actions (save/share)
+ */
+export const useResultActions = (
+  options: UseResultActionsOptions = {},
+): UseResultActionsReturn => {
+  const {
+    imageUrl,
+    onSaveSuccess,
+    onSaveError,
+    onShareStart,
+    onShareEnd,
+  } = options;
+
+  const [isSharing, setIsSharing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  /**
+   * Save image to device gallery
+   */
+  const handleDownload = useCallback(async () => {
+    if (!imageUrl) {
+      onSaveError?.(new Error("No image URL provided"));
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+
+      // Request permissions
+      const { status } = await MediaLibrary.requestPermissionsAsync();
+      if (status !== "granted") {
+        throw new Error("Media library permission not granted");
+      }
+
+      let fileUri = imageUrl;
+
+      // If it's a base64 string, save to file first
+      if (isBase64DataUrl(fileUri)) {
+        fileUri = await saveBase64ToFile(fileUri);
+      }
+
+      // Save to media library
+      await MediaLibrary.saveToLibraryAsync(fileUri);
+
+      onSaveSuccess?.();
+    } catch (error) {
+      const errorObj =
+        error instanceof Error ? error : new Error(String(error));
+      onSaveError?.(errorObj);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [imageUrl, onSaveSuccess, onSaveError]);
+
+  /**
+   * Share image
+   */
+  const handleShare = useCallback(async () => {
+    if (!imageUrl) {
+      return;
+    }
+
+    try {
+      setIsSharing(true);
+      onShareStart?.();
+
+      let shareUrl = imageUrl;
+
+      // If it's a base64 string, save to file first for sharing
+      if (isBase64DataUrl(shareUrl)) {
+        shareUrl = await saveBase64ToFile(shareUrl);
+      }
+
+      // Use expo-sharing for cross-platform file sharing
+      const isAvailable = await Sharing.isAvailableAsync();
+      if (isAvailable) {
+        await Sharing.shareAsync(shareUrl, {
+          mimeType: "image/jpeg",
+          dialogTitle: "Share Image",
+        });
+        onShareEnd?.(false);
+      } else {
+        onShareEnd?.(true);
+      }
+    } catch (error: unknown) {
+      // User cancelled or error - silently handle
+      if (__DEV__) console.log("Share cancelled or failed:", error);
+      onShareEnd?.(true);
+    } finally {
+      setIsSharing(false);
+    }
+  }, [imageUrl, onShareStart, onShareEnd]);
+
+  return {
+    isSaving,
+    isSharing,
+    handleDownload,
+    handleShare,
+  };
+};

package/src/domains/result-preview/presentation/types/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Result Preview Types Export
+ */
+
+export * from "./result-preview.types";

package/src/domains/result-preview/presentation/types/result-preview.types.ts

@@ -0,0 +1,146 @@
+/**
+ * Result Preview Domain Types
+ * Reusable result preview components for AI generation
+ */
+
+import { StyleProp, ViewStyle } from "react-native";
+
+/**
+ * Result data structure
+ */
+export interface ResultData {
+  imageUrl: string;
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * Result actions callbacks
+ */
+export interface ResultActionsCallbacks {
+  /** Download/save result */
+  onDownload: () => void | Promise<void>;
+  /** Share result */
+  onShare: () => void | Promise<void>;
+  /** Try again with same inputs */
+  onTryAgain: () => void | Promise<void>;
+  /** Navigate back */
+  onNavigateBack: () => void | Promise<void>;
+}
+
+/**
+ * Result display state
+ */
+export interface ResultDisplayState {
+  /** Currently saving */
+  isSaving: boolean;
+  /** Currently sharing */
+  isSharing: boolean;
+}
+
+/**
+ * Result image card props
+ */
+export interface ResultImageCardProps {
+  /** Image URL to display */
+  imageUrl: string;
+  /** Optional custom style */
+  style?: StyleProp<ViewStyle>;
+  /** Image rounded corners */
+  rounded?: boolean;
+}
+
+/**
+ * Result action bar props
+ */
+export interface ResultActionBarProps {
+  /** Currently saving */
+  isSaving: boolean;
+  /** Currently sharing */
+  isSharing: boolean;
+  /** Download callback */
+  onDownload: () => void;
+  /** Share callback */
+  onShare: () => void;
+  /** Try again callback */
+  onTryAgain: () => void;
+  /** Save button text */
+  saveButtonText: string;
+  /** Save button text when loading */
+  saveButtonLoadingText: string;
+  /** Share button text */
+  shareButtonText: string;
+  /** Share button text when loading */
+  shareButtonLoadingText: string;
+  /** Try again button text */
+  tryAgainButtonText: string;
+}
+
+/**
+ * Result preview screen props
+ */
+export interface ResultPreviewScreenProps {
+  /** Result data to display */
+  imageUrl: string;
+  /** Result display state */
+  isSaving: boolean;
+  isSharing: boolean;
+  /** Action callbacks */
+  onDownload: () => void;
+  onShare: () => void;
+  onTryAgain: () => void;
+  onNavigateBack: () => void;
+  /** Translations */
+  translations: ResultPreviewTranslations;
+  /** Optional custom style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Result preview translations
+ */
+export interface ResultPreviewTranslations {
+  /** Screen title */
+  title: string;
+  /** Result label */
+  yourResult: string;
+  /** Save button */
+  saveButton: string;
+  /** Saving button */
+  saving: string;
+  /** Share button */
+  shareButton: string;
+  /** Sharing button */
+  sharing: string;
+  /** Try again button */
+  tryAnother: string;
+}
+
+/**
+ * Use result actions options
+ */
+export interface UseResultActionsOptions {
+  /** Image URL to save/share */
+  imageUrl?: string;
+  /** Callback on save success */
+  onSaveSuccess?: () => void;
+  /** Callback on save error */
+  onSaveError?: (error: Error) => void;
+  /** Callback on share start */
+  onShareStart?: () => void;
+  /** Callback on share end */
+  onShareEnd?: (cancelled?: boolean) => void;
+}
+
+/**
+ * Use result actions return
+ */
+export interface UseResultActionsReturn {
+  /** Currently saving */
+  isSaving: boolean;
+  /** Currently sharing */
+  isSharing: boolean;
+  /** Save/download handler */
+  handleDownload: () => Promise<void>;
+  /** Share handler */
+  handleShare: () => Promise<void>;
+}

package/src/index.ts

@@ -153,6 +153,9 @@ export * from "./features/meme-generator";
 export * from "./features/couple-future";
 export * from "./infrastructure/orchestration";
 
+// Result Preview Domain
+export * from "./domains/result-preview";
+
 // Unified AI Feature Screen
 export {
   AIFeatureScreen,