@umituz/react-native-ai-generation-content 1.12.21 → 1.12.24

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

@@ -3,8 +3,9 @@
  * Composition of result components for CelebrationModal
  */
 
-import React from "react";
-import { ScrollView, StyleSheet, Dimensions } from "react-native";
+import * as React from "react";
+import { useMemo } from "react";
+import { ScrollView, StyleSheet, Dimensions, type ViewStyle, type StyleProp } from "react-native";
 import { Animated } from "@umituz/react-native-design-system";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { ResultHeader } from "./ResultHeader";
@@ -35,7 +36,7 @@ export interface GenerationResultContentProps {
     retry: string;
     aiGenerated: string;
   };
-  modalStyle?: any;
+  modalStyle?: StyleProp<ViewStyle>;
 }
 
 export const GenerationResultContent: React.FC<GenerationResultContentProps> = ({
@@ -49,7 +50,23 @@ export const GenerationResultContent: React.FC<GenerationResultContentProps> = (
   modalStyle,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = createStyles(tokens);
+
+  const styles = useMemo(() => StyleSheet.create({
+    container: {
+      width: width - 40,
+      maxHeight: "90%",
+      backgroundColor: tokens.colors.backgroundPrimary,
+      borderRadius: 28,
+      overflow: "hidden",
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingTop: 24,
+      paddingBottom: 20,
+    },
+  }), [tokens]);
 
   return (
     <Animated.View style={[styles.container, modalStyle]}>
@@ -73,21 +90,3 @@ export const GenerationResultContent: React.FC<GenerationResultContentProps> = (
     </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

@@ -3,7 +3,8 @@
  * Action buttons for generation results
  */
 
-import React from "react";
+import * as React from "react";
+import { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicText,
@@ -34,56 +35,8 @@ export const ResultActions: React.FC<ResultActionsProps> = ({
   translations,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = createStyles(tokens);
 
-  return (
-    <View style={styles.container}>
-      {onRetry && (
-        <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
-          <AtomicIcon name="refresh" size="sm" 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="md"
-              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="md"
-              customColor={tokens.colors.primary}
-            />
-            <AtomicText style={styles.saveText}>{translations.save}</AtomicText>
-          </TouchableOpacity>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const createStyles = (tokens: any) =>
-  StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: {
       paddingHorizontal: 20,
       paddingBottom: 20,
@@ -120,7 +73,7 @@ const createStyles = (tokens: any) =>
     shareText: {
       fontSize: 15,
       fontWeight: "700",
-      color: "#fff",
+      color: tokens.colors.onPrimary,
     },
     saveButton: {
       backgroundColor: tokens.colors.surface,
@@ -132,4 +85,50 @@ const createStyles = (tokens: any) =>
       fontWeight: "700",
       color: tokens.colors.primary,
     },
-  });
+  }), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {onRetry && (
+        <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
+          <AtomicIcon name="refresh" size="sm" color="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="md"
+              color="onPrimary"
+            />
+            <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="md"
+              color="primary"
+            />
+            <AtomicText style={styles.saveText}>{translations.save}</AtomicText>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};

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

@@ -3,7 +3,8 @@
  * Header with title and date badge
  */
 
-import React from "react";
+import * as React from "react";
+import { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
@@ -18,29 +19,8 @@ export interface ResultHeaderProps {
 
 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="sm"
-            customColor={tokens.colors.primary}
-          />
-          <AtomicText style={styles.dateText}>{date}</AtomicText>
-        </View>
-      )}
-    </View>
-  );
-};
-
-const createStyles = (tokens: any) =>
-  StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: {
       alignItems: "center",
       paddingHorizontal: 24,
@@ -60,7 +40,7 @@ const createStyles = (tokens: any) =>
       gap: 6,
       paddingHorizontal: 14,
       paddingVertical: 6,
-      backgroundColor: `${tokens.colors.primary}15`,
+      backgroundColor: tokens.colors.primaryContainer,
       borderRadius: 16,
     },
     dateText: {
@@ -68,4 +48,23 @@ const createStyles = (tokens: any) =>
       fontWeight: "600",
       color: tokens.colors.primary,
     },
-  });
+  }), [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="sm"
+            color="primary"
+          />
+          <AtomicText style={styles.dateText}>{date}</AtomicText>
+        </View>
+      )}
+    </View>
+  );
+};

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

@@ -3,7 +3,8 @@
  * Displays generated image with AI badge
  */
 
-import React from "react";
+import * as React from "react";
+import { useMemo } from "react";
 import { View, Image, StyleSheet } from "react-native";
 import {
   AtomicText,
@@ -21,23 +22,8 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
   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="xs" customColor="#fff" />
-          <AtomicText style={styles.badgeText}>{badgeText}</AtomicText>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const createStyles = (tokens: any) =>
-  StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: {
       paddingHorizontal: 20,
       marginBottom: 20,
@@ -60,13 +46,26 @@ const createStyles = (tokens: any) =>
       gap: 4,
       paddingHorizontal: 10,
       paddingVertical: 5,
-      backgroundColor: "rgba(0,0,0,0.6)",
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
       borderRadius: 12,
     },
     badgeText: {
       fontSize: 10,
       fontWeight: "700",
-      color: "#fff",
+      color: "#FFFFFF",
       letterSpacing: 0.5,
     },
-  });
+  }), [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="xs" color="onPrimary" />
+          <AtomicText style={styles.badgeText}>{badgeText}</AtomicText>
+        </View>
+      </View>
+    </View>
+  );
+};

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

@@ -3,7 +3,8 @@
  * Displays story text with quote styling
  */
 
-import React from "react";
+import * as React from "react";
+import { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
@@ -17,28 +18,8 @@ export interface ResultStoryCardProps {
 
 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({
+  const styles = useMemo(() => StyleSheet.create({
     outer: {
       paddingHorizontal: 20,
       marginBottom: 20,
@@ -47,7 +28,7 @@ const createStyles = (tokens: any) =>
       padding: 20,
       borderRadius: 16,
       borderWidth: 1,
-      borderColor: `${tokens.colors.primary}20`,
+      borderColor: tokens.colors.primaryContainer,
     },
     quoteIcon: {
       fontSize: 40,
@@ -71,4 +52,22 @@ const createStyles = (tokens: any) =>
       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>
+        <View style={styles.quoteEnd}>
+          <AtomicText style={[styles.quoteIcon, styles.quoteIconEnd]}>
+            &quot;
+          </AtomicText>
+        </View>
+      </LinearGradient>
+    </View>
+  );
+};

package/src/presentation/hooks/photo-generation.types.ts

@@ -3,12 +3,12 @@
  * Generic types for photo-based AI generation workflows
  */
 
-export interface PhotoGenerationInput<TMetadata = any> {
+export interface PhotoGenerationInput<TMetadata = unknown> {
   photos: Array<{ uri: string; base64: string }>;
   metadata?: TMetadata;
 }
 
-export interface PhotoGenerationResult<TResult = any> {
+export interface PhotoGenerationResult<TResult = unknown> {
   success: boolean;
   data?: TResult;
   error?: PhotoGenerationError;
@@ -20,18 +20,27 @@ export interface PhotoGenerationError {
   originalError?: Error;
 }
 
+export interface AlertMessages {
+  networkError: string;
+  policyViolation: string;
+  saveFailed: string;
+  creditFailed: string;
+  unknown: string;
+}
+
 export interface PhotoGenerationConfig<TInput, TResult, TSaveInput> {
   generate: (input: TInput) => Promise<TResult>;
   save?: (result: TResult, input: TInput) => Promise<TSaveInput>;
-  buildMetadata?: (input: TInput) => Record<string, any>;
+  buildMetadata?: (input: TInput) => Record<string, unknown>;
   checkCredits?: () => Promise<boolean>;
   deductCredits?: () => Promise<void>;
   onSuccess?: (result: TResult) => void;
   onError?: (error: PhotoGenerationError) => void;
   onSaveComplete?: (saveResult: TSaveInput) => void;
+  alertMessages: AlertMessages;
 }
 
-export interface PhotoGenerationState<TResult = any> {
+export interface PhotoGenerationState<TResult = unknown> {
   isGenerating: boolean;
   result: TResult | null;
   error: PhotoGenerationError | null;

package/src/presentation/hooks/usePhotoGeneration.ts

@@ -5,6 +5,7 @@
 
 import { useState, useCallback, useRef } from "react";
 import { useOfflineStore } from "@umituz/react-native-offline";
+import { useAlert } from "@umituz/react-native-design-system";
 import type {
   PhotoGenerationConfig,
   PhotoGenerationState,
@@ -18,7 +19,7 @@ export interface UsePhotoGenerationReturn<TInput, TResult> extends PhotoGenerati
   status: PhotoGenerationStatus;
 }
 
-export const usePhotoGeneration = <TInput, TResult, TSaveInput = any>(
+export const usePhotoGeneration = <TInput, TResult, TSaveInput = unknown>(
   config: PhotoGenerationConfig<TInput, TResult, TSaveInput>,
 ): UsePhotoGenerationReturn<TInput, TResult> => {
   const {
@@ -29,6 +30,7 @@ export const usePhotoGeneration = <TInput, TResult, TSaveInput = any>(
     onSuccess,
     onError,
     onSaveComplete,
+    alertMessages,
   } = config;
 
   const [state, setState] = useState<PhotoGenerationState<TResult>>({
@@ -41,6 +43,7 @@ export const usePhotoGeneration = <TInput, TResult, TSaveInput = any>(
   const [status, setStatus] = useState<PhotoGenerationStatus>("idle");
   const isGeneratingRef = useRef(false);
   const offlineStore = useOfflineStore();
+  const { showError } = useAlert();
 
   const createError = useCallback(
     (
@@ -58,7 +61,6 @@ export const usePhotoGeneration = <TInput, TResult, TSaveInput = any>(
   const generate = useCallback(
     async (input: TInput) => {
       if (isGeneratingRef.current) {
-        if (__DEV__) console.warn("[usePhotoGeneration] Generation already in progress");
         return;
       }
 
@@ -98,7 +100,7 @@ export const usePhotoGeneration = <TInput, TResult, TSaveInput = any>(
             throw createError(
               "save_failed",
               "Failed to save result",
-              saveError as Error,
+              saveError instanceof Error ? saveError : new Error(String(saveError)),
             );
           }
         }
@@ -109,9 +111,8 @@ export const usePhotoGeneration = <TInput, TResult, TSaveInput = any>(
         if (deductCredits) {
           try {
             await deductCredits();
-          } catch (deductError) {
-            if (__DEV__)
-              console.error("[usePhotoGeneration] Credit deduction failed", deductError);
+          } catch {
+            // Silently fail credit deduction as generation succeeded
           }
         }
 
@@ -123,13 +124,20 @@ export const usePhotoGeneration = <TInput, TResult, TSaveInput = any>(
         });
         setStatus("success");
         onSuccess?.(result);
-      } catch (error: any) {
-        const generationError =
-          error.type
-            ? error
-            : error.name === "ContentPolicyViolationError"
-              ? createError("policy_violation", "Content policy violation", error)
-              : createError("unknown", error.message || "Generation failed", error);
+      } catch (err: unknown) {
+        let generationError: PhotoGenerationError;
+
+        if (err && typeof err === "object" && "type" in err && "message" in err) {
+          generationError = err as PhotoGenerationError;
+        } else if (err instanceof Error) {
+          if (err.name === "ContentPolicyViolationError") {
+            generationError = createError("policy_violation", "Content policy violation", err);
+          } else {
+            generationError = createError("unknown", err.message || "Generation failed", err);
+          }
+        } else {
+          generationError = createError("unknown", "Generation failed");
+        }
 
         setState({
           isGenerating: false,
@@ -138,6 +146,15 @@ export const usePhotoGeneration = <TInput, TResult, TSaveInput = any>(
           progress: 0,
         });
         setStatus("error");
+
+        const errorMessage =
+          generationError.type === "network_error" ? alertMessages.networkError :
+          generationError.type === "policy_violation" ? alertMessages.policyViolation :
+          generationError.type === "save_failed" ? alertMessages.saveFailed :
+          generationError.type === "credit_failed" ? alertMessages.creditFailed :
+          alertMessages.unknown;
+
+        showError("Error", errorMessage);
         onError?.(generationError);
       } finally {
         isGeneratingRef.current = false;

package/src/domains/creations/application/services/CreationsService.ts

@@ -1,72 +0,0 @@
-import { serverTimestamp, addDoc, collection } from "firebase/firestore";
-import { generateUUID } from "@umituz/react-native-uuid";
-import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
-import type { ICreationsStorageService } from "../../domain/services/ICreationsStorageService";
-import type { CreationType } from "../../domain/value-objects";
-import { BaseRepository } from "@umituz/react-native-firebase";
-
-export interface CreateCreationDTO {
-    userId: string;
-    type: CreationType;
-    prompt: string;
-    metadata?: Record<string, any>;
-    imageUri: string; // can be local file uri or base64
-    aspectRatio?: number;
-}
-
-export class CreationsService extends BaseRepository {
-    constructor(
-        private readonly repository: ICreationsRepository,
-        private readonly storageService: ICreationsStorageService,
-        private readonly collectionName: string = "creations" // Default to generic name, app can override via repo
-    ) {
-        super();
-    }
-
-    async saveCreation(dto: CreateCreationDTO): Promise<string> {
-        const db = this.getDb();
-        if (!db) throw new Error("Firestore not initialized");
-
-        try {
-            const creationId = generateUUID();
-
-            const imageUrl = await this.storageService.uploadCreationImage(
-                dto.userId,
-                creationId,
-                dto.imageUri
-            );
-
-            await this.repository.create(dto.userId, {
-                id: creationId,
-                uri: imageUrl,
-                type: dto.type.id,
-                prompt: dto.prompt,
-                metadata: dto.metadata,
-                createdAt: new Date(),
-                isShared: false,
-                isFavorite: false,
-            });
-
-            return creationId;
-        } catch (error) {
-            console.error(error);
-            throw error;
-        }
-    }
-
-    async getCreation(userId: string, id: string): Promise<any> {
-        return this.repository.getById(userId, id);
-    }
-
-    async updateCreation(
-        userId: string,
-        id: string,
-        updates: { metadata?: Record<string, any> },
-    ): Promise<boolean> {
-        return this.repository.update(userId, id, updates);
-    }
-
-    async deleteCreation(userId: string, id: string): Promise<boolean> {
-        return this.repository.delete(userId, id);
-    }
-}

package/src/domains/creations/domain/entities/Creation.ts

@@ -1,54 +0,0 @@
-/**
- * Creation Entity
- * Represents an AI-generated creation
- */
-
-export interface Creation {
-  readonly id: string;
-  readonly uri: string;
-  readonly type: string;
-  readonly prompt?: string;
-  readonly metadata?: Record<string, any>;
-  readonly originalUri?: string;
-  readonly createdAt: Date;
-  readonly isShared: boolean;
-  readonly isFavorite: boolean;
-}
-
-export interface CreationDocument {
-  readonly uri?: string;
-  readonly prompt?: string;
-  readonly metadata?: Record<string, any>;
-  readonly originalImage?: string;
-  readonly originalImageUrl?: string;
-  readonly transformedImage?: string;
-  readonly transformedImageUrl?: string;
-  readonly transformationType?: string;
-  readonly type?: string;
-  readonly status?: string;
-  readonly isShared: boolean;
-  readonly isFavorite: boolean;
-  readonly createdAt: FirebaseTimestamp | Date; // Allow Date for writing
-  readonly completedAt?: FirebaseTimestamp | Date;
-}
-
-interface FirebaseTimestamp {
-  toDate: () => Date;
-}
-
-export function mapDocumentToCreation(
-  id: string,
-  data: CreationDocument,
-): Creation {
-  return {
-    id,
-    uri: data.transformedImageUrl || data.transformedImage || data.uri || "",
-    type: data.transformationType || data.type || "unknown",
-    prompt: data.prompt,
-    metadata: data.metadata,
-    originalUri: data.originalImageUrl || data.originalImage,
-    createdAt: (data.createdAt as any)?.toDate?.() || (data.createdAt instanceof Date ? data.createdAt : new Date()),
-    isShared: data.isShared ?? false,
-    isFavorite: data.isFavorite ?? false,
-  };
-}

package/src/domains/creations/domain/entities/index.ts

@@ -1,6 +0,0 @@
-/**
- * Domain Entities
- */
-
-export type { Creation, CreationDocument } from "./Creation";
-export { mapDocumentToCreation } from "./Creation";