@umituz/react-native-ai-generation-content 1.17.219 → 1.17.221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.219",
+  "version": "1.17.221",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

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

@@ -4,70 +4,21 @@
  */
 
 import React, { useMemo, useCallback } from "react";
-import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
 import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { CreationPreview } from "./CreationPreview";
 import { CreationBadges } from "./CreationBadges";
-import { CreationActions, type CreationAction } from "./CreationActions";
-import type { CreationStatus, CreationTypeId } from "../../domain/types";
-import type { CreationOutput } from "../../domain/utils";
+import { CreationActions } from "./CreationActions";
+import { CreationCardMeta } from "./CreationCardMeta";
+import { useCreationCardActions } from "./useCreationCardActions";
+import { useCreationDateFormatter } from "./CreationCard.utils";
+import type { CreationCardProps } from "./CreationCard.types";
+import type { CreationTypeId } from "../../domain/types";
 import { getPreviewUrl, getCreationTitle } from "../../domain/utils";
 
-/**
- * Creation data interface for the card
- * Flexible to support both package and app Creation types
- */
-export interface CreationCardData {
-  id: string;
-  type: CreationTypeId | string;
-  status?: CreationStatus;
-  prompt?: string;
-  /** Output object for app-style creations */
-  output?: CreationOutput;
-  /** URI for package-style creations */
-  uri?: string;
-  provider?: string;
-  createdAt: Date | number;
-}
-
-/**
- * Action callbacks interface
- */
-export interface CreationCardCallbacks {
-  onPress?: (creation: CreationCardData) => void;
-  onDownload?: (creation: CreationCardData) => Promise<void>;
-  onShare?: (creation: CreationCardData) => Promise<void>;
-  onDelete?: (creation: CreationCardData) => void;
-  onFavorite?: (creation: CreationCardData) => void;
-  onPostToFeed?: (creation: CreationCardData) => void;
-}
-
-interface CreationCardProps {
-  /** Creation data */
-  readonly creation: CreationCardData;
-  /** Action callbacks */
-  readonly callbacks?: CreationCardCallbacks;
-  /** Show badges overlay */
-  readonly showBadges?: boolean;
-  /** Show action buttons */
-  readonly showActions?: boolean;
-  /** Custom status text (for i18n) */
-  readonly statusText?: string;
-  /** Custom type text (for i18n) */
-  readonly typeText?: string;
-  /** Date formatter function */
-  readonly formatDate?: (date: Date) => string;
-  /** Is sharing in progress */
-  readonly isSharing?: boolean;
-  /** Is download available */
-  readonly isDownloadAvailable?: boolean;
-  /** Can post to feed */
-  readonly canPostToFeed?: boolean;
-}
-
 export function CreationCard({
   creation,
   callbacks = {},
@@ -81,77 +32,17 @@ export function CreationCard({
   canPostToFeed = false,
 }: CreationCardProps) {
   const tokens = useAppDesignTokens();
-  // Support both output object and direct uri
-  // Prefer getPreviewUrl (which returns thumbnailUrl first) over direct uri
+
   const previewUrl = getPreviewUrl(creation.output) || creation.uri;
   const title = getCreationTitle(creation.prompt, creation.type as CreationTypeId);
-
-  // Format date
-  const formattedDate = useMemo(() => {
-    const date = creation.createdAt instanceof Date
-      ? creation.createdAt
-      : new Date(creation.createdAt);
-
-    if (formatDate) {
-      return formatDate(date);
-    }
-
-    return date.toLocaleDateString(undefined, {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-    });
-  }, [creation.createdAt, formatDate]);
-
-  // Build actions array
-  const actions = useMemo<CreationAction[]>(() => {
-    const result: CreationAction[] = [];
-
-    if (callbacks.onDownload && isDownloadAvailable && creation.output) {
-      result.push({
-        id: "download",
-        icon: "Download",
-        onPress: () => callbacks.onDownload?.(creation),
-      });
-    }
-
-    if (callbacks.onShare) {
-      result.push({
-        id: "share",
-        icon: "share-social",
-        loading: isSharing,
-        onPress: () => callbacks.onShare?.(creation),
-      });
-    }
-
-    if (callbacks.onFavorite) {
-      result.push({
-        id: "favorite",
-        icon: "heart-outline",
-        onPress: () => callbacks.onFavorite?.(creation),
-      });
-    }
-
-    if (callbacks.onDelete) {
-      result.push({
-        id: "delete",
-        icon: "trash",
-        color: "error",
-        onPress: () => callbacks.onDelete?.(creation),
-      });
-    }
-
-    if (callbacks.onPostToFeed && canPostToFeed) {
-      result.push({
-        id: "post",
-        icon: "Send",
-        filled: true,
-        onPress: () => callbacks.onPostToFeed?.(creation),
-      });
-    }
-
-    return result;
-  }, [callbacks, creation, isSharing, isDownloadAvailable, canPostToFeed]);
+  const formattedDate = useCreationDateFormatter(creation.createdAt, formatDate);
+  const actions = useCreationCardActions({
+    callbacks,
+    creation,
+    isSharing,
+    isDownloadAvailable,
+    canPostToFeed,
+  });
 
   const handlePress = useCallback(() => {
     callbacks.onPress?.(creation);
@@ -185,17 +76,6 @@ export function CreationCard({
         title: {
           fontWeight: "600",
         },
-        meta: {
-          flexDirection: "row",
-          alignItems: "center",
-        },
-        metaText: {
-          fontSize: 12,
-          color: tokens.colors.textSecondary,
-        },
-        metaDot: {
-          marginHorizontal: 4,
-        },
       }),
     [tokens]
   );
@@ -236,16 +116,10 @@ export function CreationCard({
           )}
         </View>
 
-        <View style={styles.meta}>
-          <Text style={styles.metaText}>{formattedDate}</Text>
-          {creation.provider && (
-            <>
-              <Text style={[styles.metaText, styles.metaDot]}>•</Text>
-              <Text style={styles.metaText}>{creation.provider}</Text>
-            </>
-          )}
-        </View>
+        <CreationCardMeta formattedDate={formattedDate} provider={creation.provider} />
       </View>
     </TouchableOpacity>
   );
 }
+
+export type { CreationCardProps, CreationCardData, CreationCardCallbacks } from "./CreationCard.types";

package/src/domains/creations/presentation/components/CreationCard.types.ts

@@ -0,0 +1,58 @@
+/**
+ * CreationCard Type Definitions
+ */
+
+import type { CreationStatus, CreationTypeId } from "../../domain/types";
+import type { CreationOutput } from "../../domain/utils";
+
+/**
+ * Creation data interface for the card
+ * Flexible to support both package and app Creation types
+ */
+export interface CreationCardData {
+  id: string;
+  type: CreationTypeId | string;
+  status?: CreationStatus;
+  prompt?: string;
+  /** Output object for app-style creations */
+  output?: CreationOutput;
+  /** URI for package-style creations */
+  uri?: string;
+  provider?: string;
+  createdAt: Date | number;
+}
+
+/**
+ * Action callbacks interface
+ */
+export interface CreationCardCallbacks {
+  onPress?: (creation: CreationCardData) => void;
+  onDownload?: (creation: CreationCardData) => Promise<void>;
+  onShare?: (creation: CreationCardData) => Promise<void>;
+  onDelete?: (creation: CreationCardData) => void;
+  onFavorite?: (creation: CreationCardData) => void;
+  onPostToFeed?: (creation: CreationCardData) => void;
+}
+
+export interface CreationCardProps {
+  /** Creation data */
+  readonly creation: CreationCardData;
+  /** Action callbacks */
+  readonly callbacks?: CreationCardCallbacks;
+  /** Show badges overlay */
+  readonly showBadges?: boolean;
+  /** Show action buttons */
+  readonly showActions?: boolean;
+  /** Custom status text (for i18n) */
+  readonly statusText?: string;
+  /** Custom type text (for i18n) */
+  readonly typeText?: string;
+  /** Date formatter function */
+  readonly formatDate?: (date: Date) => string;
+  /** Is sharing in progress */
+  readonly isSharing?: boolean;
+  /** Is download available */
+  readonly isDownloadAvailable?: boolean;
+  /** Can post to feed */
+  readonly canPostToFeed?: boolean;
+}

package/src/domains/creations/presentation/components/CreationCard.utils.ts

@@ -0,0 +1,29 @@
+/**
+ * CreationCard Utilities
+ */
+
+import { useMemo } from "react";
+
+/**
+ * Format creation date for display
+ */
+export function useCreationDateFormatter(
+  createdAt: Date | number,
+  formatDate?: (date: Date) => string
+): string {
+  return useMemo(() => {
+    const date = createdAt instanceof Date
+      ? createdAt
+      : new Date(createdAt);
+
+    if (formatDate) {
+      return formatDate(date);
+    }
+
+    return date.toLocaleDateString(undefined, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  }, [createdAt, formatDate]);
+}

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

@@ -0,0 +1,50 @@
+/**
+ * CreationCardMeta Component
+ * Displays metadata (date, provider) for CreationCard
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, Text } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface CreationCardMetaProps {
+  readonly formattedDate: string;
+  readonly provider?: string;
+}
+
+export function CreationCardMeta({
+  formattedDate,
+  provider,
+}: CreationCardMetaProps) {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        meta: {
+          flexDirection: "row",
+          alignItems: "center",
+        },
+        metaText: {
+          fontSize: 12,
+          color: tokens.colors.textSecondary,
+        },
+        metaDot: {
+          marginHorizontal: 4,
+        },
+      }),
+    [tokens]
+  );
+
+  return (
+    <View style={styles.meta}>
+      <Text style={styles.metaText}>{formattedDate}</Text>
+      {provider && (
+        <>
+          <Text style={[styles.metaText, styles.metaDot]}>•</Text>
+          <Text style={styles.metaText}>{provider}</Text>
+        </>
+      )}
+    </View>
+  );
+}

package/src/domains/creations/presentation/components/CreationsFilterBar.helpers.ts

@@ -0,0 +1,96 @@
+/**
+ * CreationsFilterBar Helper Functions
+ */
+
+import type {
+  FilterButton,
+  MediaFilterLabels,
+  StatusFilterLabels,
+} from "./CreationsFilterBar.types";
+
+/**
+ * Helper to create filter buttons from filter state
+ */
+export function createMediaFilterButtons(
+  activeFilter: string,
+  onSelect: (filter: string) => void,
+  labels: MediaFilterLabels
+): FilterButton[] {
+  return [
+    {
+      id: "all",
+      label: labels.all,
+      icon: "grid",
+      active: activeFilter === "all",
+      onPress: () => onSelect("all"),
+    },
+    {
+      id: "image",
+      label: labels.images,
+      icon: "image",
+      active: activeFilter === "image",
+      onPress: () => onSelect("image"),
+    },
+    {
+      id: "video",
+      label: labels.videos,
+      icon: "film",
+      active: activeFilter === "video",
+      onPress: () => onSelect("video"),
+    },
+    {
+      id: "voice",
+      label: labels.voice,
+      icon: "mic",
+      active: activeFilter === "voice",
+      onPress: () => onSelect("voice"),
+    },
+  ];
+}
+
+/**
+ * Helper to create status filter buttons
+ */
+export function createStatusFilterButtons(
+  activeFilter: string,
+  onSelect: (filter: string) => void,
+  labels: StatusFilterLabels
+): FilterButton[] {
+  return [
+    {
+      id: "all",
+      label: labels.all,
+      icon: "options",
+      active: activeFilter === "all",
+      onPress: () => onSelect("all"),
+    },
+    {
+      id: "completed",
+      label: labels.completed,
+      icon: "checkmark-circle",
+      active: activeFilter === "completed",
+      onPress: () => onSelect("completed"),
+    },
+    {
+      id: "processing",
+      label: labels.processing,
+      icon: "refresh",
+      active: activeFilter === "processing",
+      onPress: () => onSelect("processing"),
+    },
+    {
+      id: "pending",
+      label: labels.pending,
+      icon: "time",
+      active: activeFilter === "pending",
+      onPress: () => onSelect("pending"),
+    },
+    {
+      id: "failed",
+      label: labels.failed,
+      icon: "close-circle",
+      active: activeFilter === "failed",
+      onPress: () => onSelect("failed"),
+    },
+  ];
+}

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

@@ -10,35 +10,7 @@ import {
   AtomicText,
   AtomicIcon,
 } from "@umituz/react-native-design-system";
-
-/**
- * Filter button configuration
- */
-export interface FilterButton {
-  /** Unique filter identifier */
-  id: string;
-  /** Display label */
-  label: string;
-  /** Icon name */
-  icon?: string;
-  /** Is this filter active */
-  active: boolean;
-  /** Handler when pressed */
-  onPress: () => void;
-}
-
-interface CreationsFilterBarProps {
-  /** Array of filter buttons */
-  readonly filters: FilterButton[];
-  /** Show clear button when any filter is active */
-  readonly showClearButton?: boolean;
-  /** Clear button label */
-  readonly clearLabel?: string;
-  /** Clear all filters handler */
-  readonly onClear?: () => void;
-  /** Has any active filters (for showing clear button) */
-  readonly hasActiveFilters?: boolean;
-}
+import type { CreationsFilterBarProps } from "./CreationsFilterBar.types";
 
 export function CreationsFilterBar({
   filters,
@@ -160,95 +132,8 @@ export function CreationsFilterBar({
   );
 }
 
-/**
- * Helper to create filter buttons from filter state
- */
-export function createMediaFilterButtons(
-  activeFilter: string,
-  onSelect: (filter: string) => void,
-  labels: { all: string; images: string; videos: string; voice: string }
-): FilterButton[] {
-  return [
-    {
-      id: "all",
-      label: labels.all,
-      icon: "grid",
-      active: activeFilter === "all",
-      onPress: () => onSelect("all"),
-    },
-    {
-      id: "image",
-      label: labels.images,
-      icon: "image",
-      active: activeFilter === "image",
-      onPress: () => onSelect("image"),
-    },
-    {
-      id: "video",
-      label: labels.videos,
-      icon: "film",
-      active: activeFilter === "video",
-      onPress: () => onSelect("video"),
-    },
-    {
-      id: "voice",
-      label: labels.voice,
-      icon: "mic",
-      active: activeFilter === "voice",
-      onPress: () => onSelect("voice"),
-    },
-  ];
-}
-
-/**
- * Helper to create status filter buttons
- */
-export function createStatusFilterButtons(
-  activeFilter: string,
-  onSelect: (filter: string) => void,
-  labels: {
-    all: string;
-    completed: string;
-    pending: string;
-    processing: string;
-    failed: string;
-  }
-): FilterButton[] {
-  return [
-    {
-      id: "all",
-      label: labels.all,
-      icon: "options",
-      active: activeFilter === "all",
-      onPress: () => onSelect("all"),
-    },
-    {
-      id: "completed",
-      label: labels.completed,
-      icon: "checkmark-circle",
-      active: activeFilter === "completed",
-      onPress: () => onSelect("completed"),
-    },
-    {
-      id: "processing",
-      label: labels.processing,
-      icon: "refresh",
-      active: activeFilter === "processing",
-      onPress: () => onSelect("processing"),
-    },
-    {
-      id: "pending",
-      label: labels.pending,
-      icon: "time",
-      active: activeFilter === "pending",
-      onPress: () => onSelect("pending"),
-    },
-    {
-      id: "failed",
-      label: labels.failed,
-      icon: "close-circle",
-      active: activeFilter === "failed",
-      onPress: () => onSelect("failed"),
-    },
-  ];
-}
+export type { FilterButton, CreationsFilterBarProps } from "./CreationsFilterBar.types";
+export {
+  createMediaFilterButtons,
+  createStatusFilterButtons,
+} from "./CreationsFilterBar.helpers";

package/src/domains/creations/presentation/components/CreationsFilterBar.types.ts

@@ -0,0 +1,47 @@
+/**
+ * CreationsFilterBar Type Definitions
+ */
+
+/**
+ * Filter button configuration
+ */
+export interface FilterButton {
+  /** Unique filter identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Icon name */
+  icon?: string;
+  /** Is this filter active */
+  active: boolean;
+  /** Handler when pressed */
+  onPress: () => void;
+}
+
+export interface CreationsFilterBarProps {
+  /** Array of filter buttons */
+  readonly filters: FilterButton[];
+  /** Show clear button when any filter is active */
+  readonly showClearButton?: boolean;
+  /** Clear button label */
+  readonly clearLabel?: string;
+  /** Clear all filters handler */
+  readonly onClear?: () => void;
+  /** Has any active filters (for showing clear button) */
+  readonly hasActiveFilters?: boolean;
+}
+
+export interface MediaFilterLabels {
+  all: string;
+  images: string;
+  videos: string;
+  voice: string;
+}
+
+export interface StatusFilterLabels {
+  all: string;
+  completed: string;
+  pending: string;
+  processing: string;
+  failed: string;
+}

package/src/domains/creations/presentation/components/useCreationCardActions.ts

@@ -0,0 +1,73 @@
+/**
+ * useCreationCardActions Hook
+ * Builds actions array for CreationCard based on callbacks and state
+ */
+
+import { useMemo } from "react";
+import type { CreationCardData, CreationCardCallbacks } from "./CreationCard.types";
+import type { CreationAction } from "./CreationActions";
+
+interface UseCreationCardActionsParams {
+  callbacks: CreationCardCallbacks;
+  creation: CreationCardData;
+  isSharing: boolean;
+  isDownloadAvailable: boolean;
+  canPostToFeed: boolean;
+}
+
+export function useCreationCardActions({
+  callbacks,
+  creation,
+  isSharing,
+  isDownloadAvailable,
+  canPostToFeed,
+}: UseCreationCardActionsParams): CreationAction[] {
+  return useMemo<CreationAction[]>(() => {
+    const result: CreationAction[] = [];
+
+    if (callbacks.onDownload && isDownloadAvailable && creation.output) {
+      result.push({
+        id: "download",
+        icon: "Download",
+        onPress: () => callbacks.onDownload?.(creation),
+      });
+    }
+
+    if (callbacks.onShare) {
+      result.push({
+        id: "share",
+        icon: "share-social",
+        loading: isSharing,
+        onPress: () => callbacks.onShare?.(creation),
+      });
+    }
+
+    if (callbacks.onFavorite) {
+      result.push({
+        id: "favorite",
+        icon: "heart-outline",
+        onPress: () => callbacks.onFavorite?.(creation),
+      });
+    }
+
+    if (callbacks.onDelete) {
+      result.push({
+        id: "delete",
+        icon: "trash",
+        color: "error",
+        onPress: () => callbacks.onDelete?.(creation),
+      });
+    }
+
+    if (callbacks.onPostToFeed && canPostToFeed) {
+      result.push({
+        id: "post",
+        icon: "Send",
+        filled: true,
+        onPress: () => callbacks.onPostToFeed?.(creation),
+      });
+    }
+
+    return result;
+  }, [callbacks, creation, isSharing, isDownloadAvailable, canPostToFeed]);
+}