@umituz/react-native-ai-generation-content 1.16.0 → 1.17.1

package/src/domains/creations/domain/utils/preview-helpers.ts

@@ -0,0 +1,84 @@
+/**
+ * Preview Helpers
+ * Utility functions for creation preview/thumbnail extraction
+ */
+
+import type { CreationOutput } from "../entities/Creation";
+
+// Re-export for convenience
+export type { CreationOutput } from "../entities/Creation";
+
+/**
+ * Get preview URL from creation output
+ * Priority: thumbnailUrl > imageUrl > first imageUrls item > videoUrl > null
+ */
+export function getPreviewUrl(output?: CreationOutput): string | null {
+  if (!output) return null;
+
+  return (
+    output.thumbnailUrl ||
+    output.imageUrl ||
+    output.imageUrls?.[0] ||
+    output.videoUrl ||
+    null
+  );
+}
+
+/**
+ * Get all available media URLs from creation output
+ */
+export function getAllMediaUrls(output?: CreationOutput): string[] {
+  if (!output) return [];
+
+  const urls: string[] = [];
+
+  if (output.imageUrl) urls.push(output.imageUrl);
+  if (output.imageUrls) urls.push(...output.imageUrls);
+  if (output.videoUrl) urls.push(output.videoUrl);
+  if (output.audioUrl) urls.push(output.audioUrl);
+
+  return urls;
+}
+
+/**
+ * Check if creation has downloadable content
+ */
+export function hasDownloadableContent(output?: CreationOutput): boolean {
+  if (!output) return false;
+
+  return !!(
+    output.imageUrl ||
+    (output.imageUrls && output.imageUrls.length > 0) ||
+    output.videoUrl ||
+    output.audioUrl
+  );
+}
+
+/**
+ * Check if creation has video content
+ */
+export function hasVideoContent(output?: CreationOutput): boolean {
+  return !!output?.videoUrl;
+}
+
+/**
+ * Check if creation has audio content
+ */
+export function hasAudioContent(output?: CreationOutput): boolean {
+  return !!output?.audioUrl;
+}
+
+/**
+ * Get primary media URL (for download/share)
+ */
+export function getPrimaryMediaUrl(output?: CreationOutput): string | null {
+  if (!output) return null;
+
+  return (
+    output.videoUrl ||
+    output.imageUrl ||
+    output.imageUrls?.[0] ||
+    output.audioUrl ||
+    null
+  );
+}

package/src/domains/creations/domain/utils/status-helpers.ts

@@ -0,0 +1,90 @@
+/**
+ * Status Helpers
+ * Utility functions for creation status
+ */
+
+import type { CreationStatus } from "../types";
+
+/**
+ * Design system color keys for status
+ */
+export type StatusColorKey = "success" | "primary" | "warning" | "error" | "textSecondary";
+
+/**
+ * Get design system color key for status
+ */
+export function getStatusColorKey(status: CreationStatus): StatusColorKey {
+  switch (status) {
+    case "completed":
+      return "success";
+    case "processing":
+      return "primary";
+    case "queued":
+      return "warning";
+    case "pending":
+      return "warning";
+    case "failed":
+      return "error";
+    default:
+      return "textSecondary";
+  }
+}
+
+/**
+ * Get status color from colors object
+ */
+export function getStatusColor(
+  status: CreationStatus,
+  colors: Record<string, string>,
+): string {
+  const key = getStatusColorKey(status);
+  return colors[key] || colors.textSecondary;
+}
+
+/**
+ * Get i18n key for status text
+ */
+export function getStatusTextKey(status: CreationStatus): string {
+  return `creations.status.${status}`;
+}
+
+/**
+ * Get default status text (fallback)
+ */
+export function getStatusText(status: CreationStatus): string {
+  switch (status) {
+    case "completed":
+      return "Completed";
+    case "processing":
+      return "In Progress";
+    case "queued":
+      return "Queued";
+    case "pending":
+      return "Pending";
+    case "failed":
+      return "Failed";
+    default:
+      return status;
+  }
+}
+
+/**
+ * Check if creation is in progress
+ */
+export function isInProgress(status: CreationStatus): boolean {
+  return status === "processing" || status === "pending" || status === "queued";
+}
+
+/**
+ * Check if creation is completed
+ */
+export function isCompleted(status: CreationStatus): boolean {
+  return status === "completed";
+}
+
+/**
+ * Check if creation has failed
+ */
+export function isFailed(status: CreationStatus): boolean {
+  return status === "failed";
+}

package/src/domains/creations/index.ts

@@ -1,25 +1,77 @@
 /**
- * @umituz/react-native-ai-creations
- *
+ * Creations Domain
  * AI-generated creations gallery with filtering, sharing, and management
- *
- * Architecture:
- * - Extends BaseRepository from @umituz/react-native-firestore
- * - Fully dynamic path structure (configurable per app)
- * - Fully dynamic document mapping (configurable per app)
- * - App-agnostic: Works with any app, no app-specific code
- *
- * This package is designed to be used across hundreds of apps.
- *
- * Usage:
- *   import {
- *     CreationsGalleryScreen,
- *     CreationsHomeCard,
- *     useCreations,
- *     createCreationsRepository,
- *   } from '@umituz/react-native-ai-creations';
  */
 
+// eslint-disable-next-line no-console
+if (typeof __DEV__ !== "undefined" && __DEV__) console.log("📍 [LIFECYCLE] creations/index.ts - Module loading");
+
+// =============================================================================
+// DOMAIN LAYER - Types
+// =============================================================================
+
+export type {
+  CreationTypeId,
+  CreationStatus,
+  CreationCategory,
+  CreationFilter,
+  FilterOption,
+  CreationStats,
+} from "./domain/types";
+
+export {
+  ALL_CREATION_STATUSES,
+  ALL_CREATION_CATEGORIES,
+  ALL_CREATION_TYPES,
+  IMAGE_CREATION_TYPES,
+  VIDEO_CREATION_TYPES,
+  VOICE_CREATION_TYPES,
+  DEFAULT_CREATION_FILTER,
+  MEDIA_FILTER_OPTIONS,
+  STATUS_FILTER_OPTIONS,
+  getTypesForCategory,
+  getCategoryForType,
+  isTypeInCategory,
+  isVideoCreationType,
+  isImageCreationType,
+  isVoiceCreationType,
+  getMediaTypeForCreation,
+  calculateCreationStats,
+} from "./domain/types";
+
+// =============================================================================
+// DOMAIN LAYER - Utils
+// =============================================================================
+
+export {
+  // Status helpers
+  getStatusColorKey,
+  getStatusColor,
+  getStatusTextKey,
+  getStatusText,
+  isInProgress,
+  isCompleted,
+  isFailed,
+  type StatusColorKey,
+  // Preview helpers
+  getPreviewUrl,
+  getAllMediaUrls,
+  hasDownloadableContent,
+  hasVideoContent,
+  hasAudioContent,
+  getPrimaryMediaUrl,
+  type CreationOutput,
+  // Creation helpers
+  getTypeIcon,
+  getTypeTextKey,
+  getTypeText,
+  getCreationTitle,
+  filterBySearch,
+  sortCreations,
+  truncateText,
+  type IconName,
+} from "./domain/utils";
+
 // =============================================================================
 // DOMAIN LAYER - Entities
 // =============================================================================
@@ -28,7 +80,7 @@ export type { Creation, CreationDocument } from "./domain/entities";
 export { mapDocumentToCreation } from "./domain/entities";
 
 // =============================================================================
-// DOMAIN LAYER - Value Objects
+// DOMAIN LAYER - Config
 // =============================================================================
 
 export type {
@@ -65,15 +117,37 @@ export type { ICreationsStorageService } from "./domain/services/ICreationsStora
 export { useCreations } from "./presentation/hooks/useCreations";
 export { useDeleteCreation } from "./presentation/hooks/useDeleteCreation";
 export { useCreationsFilter } from "./presentation/hooks/useCreationsFilter";
+export { useAdvancedFilter } from "./presentation/hooks/useAdvancedFilter";
 
 // =============================================================================
 // PRESENTATION LAYER - Components
 // =============================================================================
 
+// Core Components
+export { CreationPreview } from "./presentation/components/CreationPreview";
+export { CreationBadges } from "./presentation/components/CreationBadges";
+export {
+  CreationActions,
+  type CreationAction,
+} from "./presentation/components/CreationActions";
+export {
+  CreationCard,
+  type CreationCardData,
+  type CreationCardCallbacks,
+} from "./presentation/components/CreationCard";
 export { CreationThumbnail } from "./presentation/components/CreationThumbnail";
-export { CreationCard } from "./presentation/components/CreationCard";
-export { CreationsHomeCard } from "./presentation/components/CreationsHomeCard";
+
+// Filter Components
 export { FilterChips } from "./presentation/components/FilterChips";
+export {
+  CreationsFilterBar,
+  createMediaFilterButtons,
+  createStatusFilterButtons,
+  type FilterButton,
+} from "./presentation/components/CreationsFilterBar";
+
+// Gallery Components
+export { CreationsHomeCard } from "./presentation/components/CreationsHomeCard";
 export { EmptyState } from "./presentation/components/EmptyState";
 export {
   CreationsProvider,

package/src/domains/creations/infrastructure/repositories/CreationsRepository.ts

@@ -1,3 +1,6 @@
+// eslint-disable-next-line no-console
+if (typeof __DEV__ !== "undefined" && __DEV__) console.log("📍 [LIFECYCLE] CreationsRepository.ts - Module loading");
+
 import { BaseRepository, FirestorePathResolver } from "@umituz/react-native-firebase";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import type { Creation } from "../../domain/entities/Creation";
@@ -36,13 +39,23 @@ export class CreationsRepository
     collectionName: string,
     options?: RepositoryOptions,
   ) {
+    // eslint-disable-next-line no-console
+    if (typeof __DEV__ !== "undefined" && __DEV__) console.log("📍 [LIFECYCLE] CreationsRepository - Constructor start");
     super();
 
     const documentMapper = options?.documentMapper ?? mapDocumentToCreation;
 
-    this.pathResolver = new FirestorePathResolver(collectionName, this.getDb());
+    // eslint-disable-next-line no-console
+    if (typeof __DEV__ !== "undefined" && __DEV__) console.log("📍 [LIFECYCLE] CreationsRepository - Getting db");
+    const db = this.getDb();
+    // eslint-disable-next-line no-console
+    if (typeof __DEV__ !== "undefined" && __DEV__) console.log("📍 [LIFECYCLE] CreationsRepository - db:", db ? "available" : "null");
+
+    this.pathResolver = new FirestorePathResolver(collectionName, db);
     this.fetcher = new CreationsFetcher(this.pathResolver, documentMapper);
     this.writer = new CreationsWriter(this.pathResolver);
+    // eslint-disable-next-line no-console
+    if (typeof __DEV__ !== "undefined" && __DEV__) console.log("📍 [LIFECYCLE] CreationsRepository - Constructor end");
   }
 
   async getAll(userId: string): Promise<Creation[]> {

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

@@ -0,0 +1,120 @@
+/**
+ * CreationActions Component
+ * Flexible action buttons for creations
+ */
+
+import React, { useMemo } from "react";
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+} from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+
+export interface CreationAction {
+  /** Unique action identifier */
+  id: string;
+  /** Icon name */
+  icon: string;
+  /** Icon color (design system color key) */
+  color?: "primary" | "secondary" | "error" | "success" | "textInverse";
+  /** Show loading state */
+  loading?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Use filled background (primary color) */
+  filled?: boolean;
+  /** Action handler */
+  onPress: () => void;
+}
+
+interface CreationActionsProps {
+  /** Array of actions to display */
+  readonly actions: CreationAction[];
+  /** Button size */
+  readonly size?: "sm" | "md" | "lg";
+  /** Layout direction */
+  readonly direction?: "row" | "column";
+}
+
+const SIZES = {
+  sm: { button: 28, icon: "xs" as const },
+  md: { button: 36, icon: "sm" as const },
+  lg: { button: 44, icon: "md" as const },
+};
+
+export function CreationActions({
+  actions,
+  size = "md",
+  direction = "row",
+}: CreationActionsProps) {
+  const tokens = useAppDesignTokens();
+  const sizeConfig = SIZES[size];
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flexDirection: direction,
+          gap: 8,
+        },
+        actionButton: {
+          width: sizeConfig.button,
+          height: sizeConfig.button,
+          borderRadius: sizeConfig.button / 2,
+          borderWidth: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: tokens.colors.surface,
+          borderColor: tokens.colors.borderLight,
+        },
+        actionButtonFilled: {
+          backgroundColor: tokens.colors.primary,
+          borderWidth: 0,
+        },
+        actionButtonDisabled: {
+          opacity: 0.5,
+        },
+      }),
+    [tokens, sizeConfig, direction]
+  );
+
+  if (actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      {actions.map((action) => (
+        <TouchableOpacity
+          key={action.id}
+          style={[
+            styles.actionButton,
+            action.filled && styles.actionButtonFilled,
+            action.disabled && styles.actionButtonDisabled,
+          ]}
+          onPress={action.onPress}
+          disabled={action.disabled || action.loading}
+          activeOpacity={0.7}
+        >
+          {action.loading ? (
+            <ActivityIndicator
+              size="small"
+              color={action.filled ? tokens.colors.textInverse : tokens.colors.primary}
+            />
+          ) : (
+            <AtomicIcon
+              name={action.icon}
+              size={sizeConfig.icon}
+              color={action.color || (action.filled ? "textInverse" : "primary")}
+            />
+          )}
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}

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

@@ -0,0 +1,111 @@
+/**
+ * CreationBadges Component
+ * Displays status and type badges overlay
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, Text } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+import type { CreationStatus, CreationTypeId } from "../../domain/types";
+import { getStatusColorKey, getStatusText, getTypeIcon, getTypeText } from "../../domain/utils";
+
+interface CreationBadgesProps {
+  /** Creation status */
+  readonly status: CreationStatus;
+  /** Creation type */
+  readonly type?: CreationTypeId;
+  /** Show status badge */
+  readonly showStatus?: boolean;
+  /** Show type badge */
+  readonly showType?: boolean;
+  /** Custom status text (for i18n) */
+  readonly statusText?: string;
+  /** Custom type text (for i18n) */
+  readonly typeText?: string;
+}
+
+export function CreationBadges({
+  status,
+  type,
+  showStatus = true,
+  showType = true,
+  statusText,
+  typeText,
+}: CreationBadgesProps) {
+  const tokens = useAppDesignTokens();
+  const colorKey = getStatusColorKey(status);
+  const statusColor = (tokens.colors as unknown as Record<string, string>)[colorKey] || tokens.colors.textSecondary;
+  const displayStatusText = statusText || getStatusText(status);
+  const displayTypeText = typeText || (type ? getTypeText(type) : "");
+  const typeIcon = type ? getTypeIcon(type) : "image";
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        statusBadge: {
+          position: "absolute",
+          top: 8,
+          right: 8,
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          borderRadius: 12,
+          backgroundColor: statusColor + "20",
+        },
+        statusDot: {
+          width: 6,
+          height: 6,
+          borderRadius: 3,
+          marginRight: 4,
+          backgroundColor: statusColor,
+        },
+        statusText: {
+          fontSize: 10,
+          fontWeight: "600",
+          textTransform: "capitalize",
+          color: statusColor,
+        },
+        typeBadge: {
+          position: "absolute",
+          top: 8,
+          left: 8,
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          borderRadius: 12,
+          backgroundColor: "rgba(0,0,0,0.6)",
+          gap: 4,
+        },
+        typeText: {
+          fontSize: 10,
+          fontWeight: "600",
+          color: "white",
+          textTransform: "capitalize",
+        },
+      }),
+    [statusColor]
+  );
+
+  return (
+    <>
+      {showStatus && (
+        <View style={styles.statusBadge}>
+          <View style={styles.statusDot} />
+          <Text style={styles.statusText}>{displayStatusText}</Text>
+        </View>
+      )}
+
+      {showType && type && (
+        <View style={styles.typeBadge}>
+          <AtomicIcon name={typeIcon} color="textInverse" size="xs" />
+          <Text style={styles.typeText}>{displayTypeText}</Text>
+        </View>
+      )}
+    </>
+  );
+}