@umituz/react-native-ai-generation-content 1.9.1 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.9.1",
+  "version": "1.10.1",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -31,19 +31,23 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
+    "@umituz/react-native-animation": "latest",
     "@umituz/react-native-design-system": "latest",
+    "expo-linear-gradient": ">=15.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.74.0"
   },
   "devDependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
     "@tanstack/react-query": "^5.0.0",
+    "@umituz/react-native-animation": "latest",
     "@umituz/react-native-design-system": "latest",
     "@types/react": "~19.1.10",
     "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "eslint": "^8.57.0",
+    "expo-linear-gradient": "~15.0.7",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "typescript": "^5.3.0",

package/src/infrastructure/utils/index.ts

@@ -7,3 +7,4 @@ export * from "./polling-interval.util";
 export * from "./progress-calculator.util";
 export * from "./status-checker.util";
 export * from "./result-validator.util";
+export * from "./photo-generation";

package/src/infrastructure/utils/photo-generation/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Photo Generation Utilities
+ */
+
+export {
+  cleanBase64,
+  addBase64Prefix,
+  preparePhoto,
+  preparePhotos,
+  isValidBase64,
+  getBase64Size,
+  getBase64SizeMB,
+} from "./photo-preparation.util";
+
+export type { PhotoInput, PreparedImage } from "./photo-preparation.util";

package/src/infrastructure/utils/photo-generation/photo-preparation.util.ts

@@ -0,0 +1,82 @@
+/**
+ * Photo Preparation Utilities
+ *
+ * Utilities for preparing photos for AI generation.
+ */
+
+export interface PhotoInput {
+  base64: string;
+  mimeType?: string;
+  previewUrl?: string;
+}
+
+export interface PreparedImage {
+  base64: string;
+  mimeType: string;
+}
+
+/**
+ * Clean base64 string by removing data URI prefix
+ */
+export const cleanBase64 = (base64: string): string => {
+  return base64.replace(/^data:image\/(png|jpeg|jpg|webp);base64,/, "");
+};
+
+/**
+ * Add data URI prefix to base64 string
+ */
+export const addBase64Prefix = (
+  base64: string,
+  mimeType: string = "image/jpeg",
+): string => {
+  const cleanedBase64 = cleanBase64(base64);
+  const imageType = mimeType.replace("image/", "");
+  return `data:image/${imageType};base64,${cleanedBase64}`;
+};
+
+/**
+ * Prepare single photo for API consumption
+ */
+export const preparePhoto = (photo: PhotoInput): PreparedImage => {
+  return {
+    base64: cleanBase64(photo.base64),
+    mimeType: photo.mimeType || "image/jpeg",
+  };
+};
+
+/**
+ * Prepare multiple photos for API consumption
+ */
+export const preparePhotos = (photos: PhotoInput[]): PreparedImage[] => {
+  return photos.map(preparePhoto);
+};
+
+/**
+ * Validate photo base64 string
+ */
+export const isValidBase64 = (base64: string): boolean => {
+  if (!base64 || typeof base64 !== "string") return false;
+
+  const cleaned = cleanBase64(base64);
+
+  if (cleaned.length === 0) return false;
+  if (cleaned.length % 4 !== 0) return false;
+
+  const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
+  return base64Regex.test(cleaned);
+};
+
+/**
+ * Get image size estimate in bytes from base64
+ */
+export const getBase64Size = (base64: string): number => {
+  const cleaned = cleanBase64(base64);
+  return (cleaned.length * 3) / 4;
+};
+
+/**
+ * Get image size estimate in MB from base64
+ */
+export const getBase64SizeMB = (base64: string): number => {
+  return getBase64Size(base64) / (1024 * 1024);
+};

package/src/presentation/components/index.ts

@@ -20,3 +20,5 @@ export type {
 
 export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
 export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
+
+export * from "./result";

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

@@ -0,0 +1,93 @@
+/**
+ * GenerationResultContent Component
+ * Composition of result components for CelebrationModal
+ */
+
+import React from "react";
+import { ScrollView, StyleSheet, Dimensions } from "react-native";
+import { Animated } from "@umituz/react-native-animation";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ResultHeader } from "./ResultHeader";
+import { ResultImageCard } from "./ResultImageCard";
+import { ResultStoryCard } from "./ResultStoryCard";
+import { ResultActions } from "./ResultActions";
+
+const { width } = Dimensions.get("window");
+
+export interface GenerationResultData {
+  imageUrl: string;
+  story?: string;
+  title?: string;
+  date?: string;
+}
+
+export interface GenerationResultContentProps {
+  result: GenerationResultData;
+  onShare?: () => void;
+  onSave?: () => void;
+  onRetry?: () => void;
+  isSharing?: boolean;
+  isSaving?: boolean;
+  translations: {
+    share: string;
+    sharing: string;
+    save: string;
+    retry: string;
+    aiGenerated: string;
+  };
+  modalStyle?: any;
+}
+
+export const GenerationResultContent: React.FC<GenerationResultContentProps> = ({
+  result,
+  onShare,
+  onSave,
+  onRetry,
+  isSharing,
+  isSaving,
+  translations,
+  modalStyle,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
+
+  return (
+    <Animated.View style={[styles.container, modalStyle]}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <ResultHeader title={result.title} date={result.date} />
+        <ResultImageCard imageUrl={result.imageUrl} badgeText={translations.aiGenerated} />
+        {result.story && <ResultStoryCard story={result.story} />}
+        <ResultActions
+          onShare={onShare}
+          onSave={onSave}
+          onRetry={onRetry}
+          isSharing={isSharing}
+          isSaving={isSaving}
+          translations={translations}
+        />
+      </ScrollView>
+    </Animated.View>
+  );
+};
+
+const createStyles = (tokens: any) =>
+  StyleSheet.create({
+    container: {
+      width: width - 40,
+      maxHeight: "90%",
+      backgroundColor: tokens.colors.backgroundPrimary,
+      borderRadius: 28,
+      overflow: "hidden",
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingTop: 24,
+      paddingBottom: 20,
+    },
+  });

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

@@ -0,0 +1,135 @@
+/**
+ * ResultActions Component
+ * Action buttons for generation results
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface ResultActionsProps {
+  onShare?: () => void;
+  onSave?: () => void;
+  onRetry?: () => void;
+  isSharing?: boolean;
+  isSaving?: boolean;
+  translations: {
+    share: string;
+    sharing: string;
+    save: string;
+    retry: string;
+  };
+}
+
+export const ResultActions: React.FC<ResultActionsProps> = ({
+  onShare,
+  onSave,
+  onRetry,
+  isSharing = false,
+  isSaving = false,
+  translations,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
+
+  return (
+    <View style={styles.container}>
+      {onRetry && (
+        <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
+          <AtomicIcon name="refresh" size={18} customColor={tokens.colors.primary} />
+          <AtomicText style={styles.retryText}>{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={22}
+              customColor="#fff"
+            />
+            <AtomicText style={styles.shareText}>
+              {isSharing ? translations.sharing : translations.share}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+
+        {onSave && (
+          <TouchableOpacity
+            style={[styles.button, styles.saveButton]}
+            onPress={onSave}
+            disabled={isSaving}
+          >
+            <AtomicIcon
+              name={isSaving ? "hourglass" : "download"}
+              size={22}
+              customColor={tokens.colors.primary}
+            />
+            <AtomicText style={styles.saveText}>{translations.save}</AtomicText>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (tokens: any) =>
+  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: "#fff",
+    },
+    saveButton: {
+      backgroundColor: tokens.colors.surface,
+      borderWidth: 2,
+      borderColor: tokens.colors.primary,
+    },
+    saveText: {
+      fontSize: 15,
+      fontWeight: "700",
+      color: tokens.colors.primary,
+    },
+  });

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

@@ -0,0 +1,71 @@
+/**
+ * ResultHeader Component
+ * Header with title and date badge
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface ResultHeaderProps {
+  title?: string;
+  date?: string;
+}
+
+export const ResultHeader: React.FC<ResultHeaderProps> = ({ title, date }) => {
+  const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
+
+  if (!title && !date) return null;
+
+  return (
+    <View style={styles.container}>
+      {title && <AtomicText style={styles.title}>{title}</AtomicText>}
+      {date && (
+        <View style={styles.badge}>
+          <AtomicIcon
+            name="calendar-outline"
+            size={14}
+            customColor={tokens.colors.primary}
+          />
+          <AtomicText style={styles.dateText}>{date}</AtomicText>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const createStyles = (tokens: any) =>
+  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.primary}15`,
+      borderRadius: 16,
+    },
+    dateText: {
+      fontSize: 12,
+      fontWeight: "600",
+      color: tokens.colors.primary,
+    },
+  });

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

@@ -0,0 +1,72 @@
+/**
+ * ResultImageCard Component
+ * Displays generated image with AI badge
+ */
+
+import React from "react";
+import { View, Image, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface ResultImageCardProps {
+  imageUrl: string;
+  badgeText: string;
+}
+
+export const ResultImageCard: React.FC<ResultImageCardProps> = ({
+  imageUrl,
+  badgeText,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
+
+  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={12} customColor="#fff" />
+          <AtomicText style={styles.badgeText}>{badgeText}</AtomicText>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (tokens: any) =>
+  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: "#fff",
+      letterSpacing: 0.5,
+    },
+  });

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

@@ -0,0 +1,74 @@
+/**
+ * ResultStoryCard Component
+ * Displays story text with quote styling
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { LinearGradient } from "expo-linear-gradient";
+
+export interface ResultStoryCardProps {
+  story: string;
+}
+
+export const ResultStoryCard: React.FC<ResultStoryCardProps> = ({ story }) => {
+  const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
+
+  return (
+    <View style={styles.outer}>
+      <LinearGradient
+        colors={[`${tokens.colors.primary}15`, `${tokens.colors.primary}05`]}
+        style={styles.container}
+      >
+        <AtomicText style={styles.quoteIcon}>&quot;</AtomicText>
+        <AtomicText style={styles.text}>{story}</AtomicText>
+        <View style={styles.quoteEnd}>
+          <AtomicText style={[styles.quoteIcon, styles.quoteIconEnd]}>
+            &quot;
+          </AtomicText>
+        </View>
+      </LinearGradient>
+    </View>
+  );
+};
+
+const createStyles = (tokens: any) =>
+  StyleSheet.create({
+    outer: {
+      paddingHorizontal: 20,
+      marginBottom: 20,
+    },
+    container: {
+      padding: 20,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: `${tokens.colors.primary}20`,
+    },
+    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",
+    },
+  });

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

@@ -0,0 +1,21 @@
+/**
+ * Result Components
+ */
+
+export { GenerationResultContent } from "./GenerationResultContent";
+export type {
+  GenerationResultData,
+  GenerationResultContentProps,
+} from "./GenerationResultContent";
+
+export { ResultHeader } from "./ResultHeader";
+export type { ResultHeaderProps } from "./ResultHeader";
+
+export { ResultImageCard } from "./ResultImageCard";
+export type { ResultImageCardProps } from "./ResultImageCard";
+
+export { ResultStoryCard } from "./ResultStoryCard";
+export type { ResultStoryCardProps } from "./ResultStoryCard";
+
+export { ResultActions } from "./ResultActions";
+export type { ResultActionsProps } from "./ResultActions";