@umituz/react-native-ai-generation-content 1.12.3 → 1.12.5

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

@@ -0,0 +1,71 @@
+
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { Creation } from '../../domain/entities/Creation';
+import { DetailHeader } from '../components/CreationDetail/DetailHeader';
+import { DetailImage } from '../components/CreationDetail/DetailImage';
+import { DetailStory } from '../components/CreationDetail/DetailStory';
+import { DetailActions } from '../components/CreationDetail/DetailActions';
+
+interface CreationDetailScreenProps {
+    readonly creation: Creation;
+    readonly onClose: () => void;
+    readonly onShare: (creation: Creation) => void;
+    readonly onDelete: (creation: Creation) => void;
+    readonly t: (key: string) => string;
+}
+
+export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
+    creation,
+    onClose,
+    onShare,
+    onDelete,
+    t
+}) => {
+    const tokens = useAppDesignTokens();
+
+    // Extract data
+    const metadata = (creation as any).metadata || {};
+    const title = metadata.names || creation.type;
+    const story = metadata.story || metadata.description || "";
+    const date = metadata.date || new Date(creation.createdAt).toLocaleDateString();
+
+    const styles = useStyles(tokens);
+
+    return (
+        <View style={styles.container}>
+            <DetailHeader
+                title={title}
+                date={date}
+                onClose={onClose}
+            />
+
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+            >
+                <DetailImage uri={creation.uri} />
+
+                <DetailStory story={story} />
+
+                <DetailActions
+                    onShare={() => onShare(creation)}
+                    onDelete={() => onDelete(creation)}
+                    shareLabel={t("result.shareButton") || "Share"}
+                    deleteLabel={t("common.delete") || "Delete"}
+                />
+            </ScrollView>
+        </View>
+    );
+};
+
+const useStyles = (tokens: any) => StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    scrollContent: {
+        paddingBottom: tokens.spacing.xxl,
+    },
+});

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

@@ -0,0 +1,217 @@
+import React, { useMemo, useCallback, useState } from "react";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useSharing } from "@umituz/react-native-sharing";
+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 { useAlert } from "@umituz/react-native-alert";
+import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
+import { GalleryHeader, EmptyState, CreationsGrid, FilterBottomSheet, CreationImageViewer, type FilterCategory } from "../components";
+import { getTranslatedTypes, 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";
+import { CreationDetailScreen } from "./CreationDetailScreen";
+
+interface CreationsGalleryScreenProps {
+  readonly userId: string | null;
+  readonly repository: ICreationsRepository;
+  readonly config: CreationsConfig;
+  readonly t: (key: string) => string;
+  readonly enableEditing?: boolean;
+  readonly onImageEdit?: (uri: string, creationId: string) => void | Promise<void>;
+  readonly onEmptyAction?: () => void;
+  readonly emptyActionLabel?: string;
+}
+
+export function CreationsGalleryScreen({
+  userId,
+  repository,
+  config,
+  t,
+  enableEditing = false,
+  onImageEdit,
+  onEmptyAction,
+  emptyActionLabel,
+}: CreationsGalleryScreenProps) {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+  const { share } = useSharing();
+  const alert = useAlert();
+
+  const [viewerVisible, setViewerVisible] = useState(false);
+  const [viewerIndex, setViewerIndex] = useState(0);
+  const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
+  const filterSheetRef = React.useRef<BottomSheetModalRef>(null);
+
+  const { data: creationsData, isLoading, refetch } = useCreations({ userId, repository });
+  const creations = creationsData as Creation[] | undefined;
+  const deleteMutation = useDeleteCreation({ userId, repository });
+  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
+
+  // Refetch creations when screen comes into focus
+  useFocusEffect(
+    useCallback(() => {
+      refetch();
+    }, [refetch])
+  );
+
+  // Prepare data for UI using utils
+  const translatedTypes = useMemo(() => getTranslatedTypes(config, t), [config, t]);
+  const allCategories = useMemo(() => getFilterCategoriesFromConfig(config, t), [config, t]);
+
+  const handleShare = useCallback(async (creation: Creation) => {
+    share(creation.uri, { dialogTitle: t("common.share") });
+  }, [share, t]);
+
+  const handleDelete = useCallback(async (creation: Creation) => {
+    alert.show({
+      title: t(config.translations.deleteTitle),
+      message: t(config.translations.deleteMessage),
+      type: 'warning' as any,
+      actions: [
+        { id: 'cancel', label: t("common.cancel"), onPress: () => { } },
+        {
+          id: 'delete', label: t("common.delete"), variant: 'danger' as any, onPress: async () => {
+            const success = await deleteMutation.mutateAsync(creation.id);
+            if (success) setSelectedCreation(null);
+          }
+        }
+      ]
+    });
+  }, [alert, config, deleteMutation, t]);
+
+  // Handle viewing a creation - shows detail screen
+  const handleView = useCallback((creation: Creation) => {
+    setSelectedCreation(creation);
+  }, []);
+
+  const styles = useStyles(tokens);
+
+  // Define empty state content based on state
+  const renderEmptyComponent = useMemo(() => {
+    // 1. Loading State
+    if (isLoading && (!creations || creations?.length === 0)) {
+      return (
+        <View style={styles.centerContainer}>
+          <ActivityIndicator size="large" color={tokens.colors.primary} />
+        </View>
+      );
+    }
+
+    // 2. System Empty State (User has NO creations at all)
+    // We check 'creations' (the full list)
+    if (!creations || creations?.length === 0) {
+      return (
+        <View style={styles.centerContainer}>
+          <EmptyState
+            title={t(config.translations.empty)}
+            description={t(config.translations.emptyDescription)}
+            actionLabel={emptyActionLabel}
+            onAction={onEmptyAction}
+          />
+        </View>
+      );
+    }
+
+    // 3. Filter Empty State (User has creations, but filter returns none)
+    // We check 'filtered' (the displayed list)
+    return (
+      <View style={styles.centerContainer}>
+        <EmptyState
+          title={t("common.no_results") || "No results"}
+          description={t("common.no_results_description") || "Try changing your filters"}
+          actionLabel={t("common.clear_all") || "Clear All"}
+          onAction={clearFilters}
+        />
+      </View>
+    );
+  }, [isLoading, creations, config, t, emptyActionLabel, onEmptyAction, clearFilters, styles.centerContainer, tokens.colors.primary]);
+
+  if (selectedCreation) {
+    return (
+      <CreationDetailScreen
+        creation={selectedCreation}
+        onClose={() => setSelectedCreation(null)}
+        onShare={handleShare}
+        onDelete={handleDelete}
+        t={t}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Header is always shown unless we are in "System Empty" without data? 
+          User requested: "herhangi bir creations yoksa buradaki no creations gözükmeli" (if no creations, show no creations).
+          Currently we show header always, except logic below might hide it. 
+          Actually, let's keep header always visible IF we have creations. 
+          If !creations, we pass `renderEmptyComponent`, but Grid has header support. 
+          
+          However, to match previous request "filter gözükebilir" (filter can be visible), we'll keep header outside.
+          BUT, if NO creations, showing filter header is weird. 
+          
+          Let's conditonally render header: Only if we have creations OR loading. 
+          If loaded and 0 creations -> Hide header (Clean Empty State).
+      */}
+      {(!creations || creations?.length === 0) && !isLoading ? null : (
+        <GalleryHeader
+          title={t(config.translations.title) || 'My Creations'}
+          count={filtered.length}
+          countLabel={t(config.translations.photoCount) || 'photos'}
+          isFiltered={isFiltered}
+          filterLabel={t(config.translations.filterLabel) || 'Filter'}
+          onFilterPress={() => filterSheetRef.current?.present()}
+          style={{ paddingTop: insets.top + tokens.spacing.md }}
+        />
+      )}
+
+      {/* Main Content Grid - handles empty/loading via ListEmptyComponent */}
+      <CreationsGrid
+        creations={filtered}
+        types={translatedTypes}
+        isLoading={isLoading}
+        onRefresh={refetch}
+        onView={handleView}
+        onShare={handleShare}
+        onDelete={handleDelete}
+        contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
+        ListEmptyComponent={renderEmptyComponent}
+      />
+
+      <CreationImageViewer
+        creations={filtered}
+        visible={viewerVisible}
+        index={viewerIndex}
+        onDismiss={() => setViewerVisible(false)}
+        onIndexChange={setViewerIndex}
+        enableEditing={enableEditing}
+        onImageEdit={onImageEdit}
+        selectedCreationId={(selectedCreation as Creation | null)?.id}
+      />
+
+      <FilterBottomSheet
+        ref={filterSheetRef}
+        categories={allCategories}
+        selectedIds={selectedIds}
+        onFilterPress={(id, catId) => toggleFilter(id, allCategories.find(c => c.id === catId)?.multiSelect)}
+        onClearFilters={clearFilters}
+        title={t(config.translations.filterTitle) || t("common.filter")}
+      />
+    </View>
+  );
+}
+
+const useStyles = (tokens: any) => StyleSheet.create({
+  container: { flex: 1, backgroundColor: tokens.colors.background },
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: 400,
+    paddingHorizontal: tokens.spacing.xl
+  },
+});

package/src/domains/creations/presentation/screens/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Presentation Screens
+ */
+
+export { CreationsGalleryScreen } from "./CreationsGalleryScreen";

package/src/domains/creations/presentation/utils/filterUtils.ts

@@ -0,0 +1,52 @@
+import { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
+import { FilterCategory } from "../components/FilterBottomSheet";
+
+/**
+ * Transforms the creations configuration into filter categories for the UI.
+ * 
+ * @param config The creations configuration object
+ * @param t Translation function
+ * @returns Array of FilterCategory
+ */
+export const getFilterCategoriesFromConfig = (
+    config: CreationsConfig,
+    t: (key: string) => string
+): FilterCategory[] => {
+    const categories: FilterCategory[] = [];
+
+    if (config.types.length > 0) {
+        categories.push({
+            id: 'type',
+            title: t(config.translations.filterTitle),
+            multiSelect: false,
+            options: config.types.map(type => ({
+                id: type.id,
+                label: t(type.labelKey),
+                icon: type.icon || 'image'
+            }))
+        });
+    }
+
+    if (config.filterCategories) {
+        categories.push(...config.filterCategories);
+    }
+
+    return categories;
+};
+
+/**
+ * Translates the creation types for display.
+ * 
+ * @param config The creations configuration object
+ * @param t Translation function
+ * @returns Array of types with translated labels
+ */
+export const getTranslatedTypes = (
+    config: CreationsConfig,
+    t: (key: string) => string
+) => {
+    return config.types.map(type => ({
+        ...type,
+        labelKey: t(type.labelKey)
+    }));
+};

package/src/domains/creations/types.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Type declarations for external modules
+ */
+
+declare module "@umituz/react-native-firestore" {
+  import type { Firestore } from "firebase/firestore";
+
+  export class BaseRepository {
+    protected getDb(): Firestore | null;
+    protected getDbOrThrow(): Firestore;
+    protected isDbInitialized(): boolean;
+    protected isQuotaError(error: unknown): boolean;
+    protected handleQuotaError(error: unknown): never;
+    protected executeWithQuotaHandling<T>(
+      operation: () => Promise<T>,
+    ): Promise<T>;
+    protected trackRead(
+      collection: string,
+      count: number,
+      cached: boolean,
+    ): void;
+    protected trackWrite(
+      collection: string,
+      docId: string,
+      count: number,
+    ): void;
+    protected trackDelete(
+      collection: string,
+      docId: string,
+      count: number,
+    ): void;
+    destroy(): void;
+  }
+
+  export function getFirestore(): Firestore | null;
+  export function initializeFirestore(app: unknown): void;
+  export function isFirestoreInitialized(): boolean;
+}
+
+declare module "@umituz/react-native-design-system" {
+  import type { FC, ReactNode } from "react";
+  import type { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+  export interface DesignTokens {
+    colors: {
+      primary: string;
+      secondary: string;
+      error: string;
+      warning: string;
+      success: string;
+      backgroundPrimary: string;
+      backgroundSecondary: string;
+      surface: string;
+      textPrimary: string;
+      textSecondary: string;
+      textInverse: string;
+      border: string;
+      [key: string]: string;
+    };
+    spacing: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+      xxl: number;
+      [key: string]: number;
+    };
+    typography: {
+      headingLarge: TextStyle;
+      headingMedium: TextStyle;
+      headingSmall: TextStyle;
+      bodyLarge: TextStyle;
+      bodyMedium: TextStyle;
+      bodySmall: TextStyle;
+      [key: string]: TextStyle;
+    };
+  }
+
+  export function useAppDesignTokens(): DesignTokens;
+
+  export interface AtomicTextProps {
+    children?: ReactNode;
+    style?: StyleProp<TextStyle>;
+  }
+  export const AtomicText: FC<AtomicTextProps>;
+
+  export interface AtomicIconProps {
+    name: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    color?: string;
+  }
+  export const AtomicIcon: FC<AtomicIconProps>;
+}
+
+declare module "@umituz/react-native-sharing" {
+  export interface ShareOptions {
+    dialogTitle?: string;
+    mimeType?: string;
+  }
+
+  export interface UseSharingResult {
+    share: (uri: string, options?: ShareOptions) => Promise<void>;
+  }
+
+  export function useSharing(): UseSharingResult;
+}

package/src/domains/face-detection/domain/constants/faceDetectionConstants.ts

@@ -0,0 +1,16 @@
+/**
+ * Face Detection Constants
+ */
+
+export const FACE_DETECTION_CONFIG = {
+  minConfidence: 0.5,
+} as const;
+
+export const FACE_DETECTION_PROMPTS = {
+  analyze: `Look at this image and check if there is a human face visible.
+Reply with ONLY this JSON (no markdown, no explanation):
+{"hasFace": true, "confidence": 0.9, "reason": "face visible"}
+
+If no face is visible:
+{"hasFace": false, "confidence": 0.1, "reason": "no face found"}`,
+} as const;

package/src/domains/face-detection/domain/entities/FaceDetection.ts

@@ -0,0 +1,19 @@
+/**
+ * Face Detection Types
+ */
+
+export interface FaceDetectionResult {
+  hasFace: boolean;
+  confidence: number;
+  message: string;
+}
+
+export interface FaceValidationState {
+  isValidating: boolean;
+  result: FaceDetectionResult | null;
+  error: string | null;
+}
+
+export interface FaceDetectionConfig {
+  minConfidence: number;
+}

package/src/domains/face-detection/index.ts

@@ -0,0 +1,26 @@
+/**
+ * React Native AI Face Detection - Public API
+ *
+ * AI-powered face detection for React Native apps using Gemini Vision
+ */
+
+export type {
+  FaceDetectionResult,
+  FaceValidationState,
+  FaceDetectionConfig,
+} from "./domain/entities/FaceDetection";
+
+export { FACE_DETECTION_CONFIG, FACE_DETECTION_PROMPTS } from "./domain/constants/faceDetectionConstants";
+
+export {
+  isValidFace,
+  parseDetectionResponse,
+  createFailedResult,
+  createSuccessResult,
+} from "./infrastructure/validators/faceValidator";
+
+export { analyzeImageForFace } from "./infrastructure/analyzers/faceAnalyzer";
+
+export { useFaceDetection } from "./presentation/hooks/useFaceDetection";
+
+export { FaceValidationStatus } from "./presentation/components/FaceValidationStatus";

package/src/domains/face-detection/infrastructure/analyzers/faceAnalyzer.ts

@@ -0,0 +1,36 @@
+/**
+ * Face Analyzer
+ *
+ * Analyzes images for face presence using Gemini AI.
+ */
+
+import { geminiProviderService } from "@umituz/react-native-ai-gemini-provider";
+import type { FaceDetectionResult } from "../../domain/entities/FaceDetection";
+import { FACE_DETECTION_PROMPTS } from "../../domain/constants/faceDetectionConstants";
+import {
+  parseDetectionResponse,
+  createFailedResult,
+} from "../validators/faceValidator";
+
+export const analyzeImageForFace = async (
+  base64Image: string,
+): Promise<FaceDetectionResult> => {
+  try {
+    const result = await geminiProviderService.run<{ text: string }>(
+      "gemini-2.0-flash-exp",
+      {
+        prompt: FACE_DETECTION_PROMPTS.analyze,
+        image_url: base64Image,
+      },
+    );
+
+    if (!result.text) {
+      return createFailedResult("No response from AI");
+    }
+
+    return parseDetectionResponse(result.text);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Analysis failed";
+    return createFailedResult(message);
+  }
+};

package/src/domains/face-detection/infrastructure/validators/faceValidator.ts

@@ -0,0 +1,52 @@
+/**
+ * Face Validator
+ *
+ * Pure functions for validating face detection results.
+ */
+
+import type { FaceDetectionResult } from "../../domain/entities/FaceDetection";
+import { FACE_DETECTION_CONFIG } from "../../domain/constants/faceDetectionConstants";
+
+export const isValidFace = (result: FaceDetectionResult): boolean => {
+  return (
+    result.hasFace && result.confidence >= FACE_DETECTION_CONFIG.minConfidence
+  );
+};
+
+export const parseDetectionResponse = (
+  response: string,
+): FaceDetectionResult => {
+  try {
+    let cleaned = response.replace(/```json\n?/g, "").replace(/```\n?/g, "");
+    cleaned = cleaned.trim();
+
+    const jsonMatch = cleaned.match(/\{[\s\S]*\}/);
+    if (!jsonMatch) {
+      return createFailedResult("Invalid response format");
+    }
+
+    const parsed = JSON.parse(jsonMatch[0]);
+
+    return {
+      hasFace: Boolean(parsed.hasFace),
+      confidence: Number(parsed.confidence) || 0,
+      message: String(parsed.reason || ""),
+    };
+  } catch (error) {
+    return createFailedResult("Failed to parse response");
+  }
+};
+
+export const createFailedResult = (message: string): FaceDetectionResult => ({
+  hasFace: false,
+  confidence: 0,
+  message,
+});
+
+export const createSuccessResult = (
+  confidence: number,
+): FaceDetectionResult => ({
+  hasFace: true,
+  confidence,
+  message: "Face detected successfully",
+});