@umituz/react-native-ai-generation-content 1.72.10 → 1.72.12

package/package.json

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

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

@@ -3,6 +3,7 @@
  */
 
 import { useMemo } from "react";
+import { normalizeToDate } from "../../../../shared/utils/date";
 
 /**
  * Format creation date for display
@@ -12,9 +13,7 @@ export function useCreationDateFormatter(
   formatDate?: (date: Date) => string
 ): string {
   return useMemo(() => {
-    const date = createdAt instanceof Date
-      ? createdAt
-      : new Date(createdAt);
+    const date = normalizeToDate(createdAt);
 
     if (formatDate) {
       return formatDate(date);

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

@@ -10,7 +10,8 @@ import {
   AtomicText,
   AtomicIcon,
 } from "@umituz/react-native-design-system";
-import type { CreationsFilterBarProps } from "./CreationsFilterBar.types";
+import { createFilterButtons } from "../../../../shared/utils/filters";
+import type { CreationsFilterBarProps, MediaFilterLabels, StatusFilterLabels, FilterButton } from "./CreationsFilterBar.types";
 
 export function CreationsFilterBar({
   filters,
@@ -133,7 +134,42 @@ export function CreationsFilterBar({
 }
 
 export type { FilterButton, CreationsFilterBarProps } from "./CreationsFilterBar.types";
-export {
-  createMediaFilterButtons,
-  createStatusFilterButtons,
-} from "./filter-bar-utils";
+
+/**
+ * Helper to create media filter buttons
+ * Uses shared generic filter factory
+ */
+export function createMediaFilterButtons(
+  activeFilter: string,
+  onSelect: (filter: string) => void,
+  labels: MediaFilterLabels
+): FilterButton[] {
+  const items = [
+    { id: "all" as const, label: labels.all, icon: "grid" },
+    { id: "image" as const, label: labels.images, icon: "image" },
+    { id: "video" as const, label: labels.videos, icon: "film" },
+    { id: "voice" as const, label: labels.voice, icon: "mic" },
+  ];
+
+  return createFilterButtons(items, activeFilter, onSelect);
+}
+
+/**
+ * Helper to create status filter buttons
+ * Uses shared generic filter factory
+ */
+export function createStatusFilterButtons(
+  activeFilter: string,
+  onSelect: (filter: string) => void,
+  labels: StatusFilterLabels
+): FilterButton[] {
+  const items = [
+    { id: "all" as const, label: labels.all, icon: "options" },
+    { id: "completed" as const, label: labels.completed, icon: "checkmark-circle" },
+    { id: "processing" as const, label: labels.processing, icon: "refresh" },
+    { id: "pending" as const, label: labels.pending, icon: "time" },
+    { id: "failed" as const, label: labels.failed, icon: "close-circle" },
+  ];
+
+  return createFilterButtons(items, activeFilter, onSelect);
+}

package/src/domains/creations/presentation/hooks/filterHelpers.ts

@@ -7,6 +7,7 @@ import type { CreationFilter } from "../../domain/types";
 import { isTypeInCategory } from "../../domain/types";
 import type { CreationCategory, CreationTypeId } from "../../domain/types";
 import type { FilterableCreation } from "./advancedFilter.types";
+import { normalizeDateToTimestamp, compareDates } from "../../../../shared/utils/date";
 
 export function filterByType<T extends FilterableCreation>(
   creations: T[],
@@ -55,16 +56,14 @@ export function filterByDateRange<T extends FilterableCreation>(
 
   if (startDate) {
     result = result.filter((c) => {
-      const createdAt =
-        c.createdAt instanceof Date ? c.createdAt.getTime() : c.createdAt || 0;
+      const createdAt = normalizeDateToTimestamp(c.createdAt);
       return createdAt >= startDate;
     });
   }
 
   if (endDate) {
     result = result.filter((c) => {
-      const createdAt =
-        c.createdAt instanceof Date ? c.createdAt.getTime() : c.createdAt || 0;
+      const createdAt = normalizeDateToTimestamp(c.createdAt);
       return createdAt <= endDate;
     });
   }
@@ -85,13 +84,9 @@ export function sortCreations<T extends FilterableCreation>(
 
     switch (sortField) {
       case "createdAt":
-        aVal = a.createdAt;
-        bVal = b.createdAt;
-        break;
+        return compareDates(a.createdAt, b.createdAt, sortOrder);
       case "updatedAt":
-        aVal = a.updatedAt;
-        bVal = b.updatedAt;
-        break;
+        return compareDates(a.updatedAt, b.updatedAt, sortOrder);
       case "type":
         aVal = a.type;
         bVal = b.type;
@@ -104,9 +99,6 @@ export function sortCreations<T extends FilterableCreation>(
         return 0;
     }
 
-    if (aVal instanceof Date) aVal = aVal.getTime();
-    if (bVal instanceof Date) bVal = bVal.getTime();
-
     if (aVal === undefined && bVal === undefined) return 0;
     if (aVal === undefined) return 1;
     if (bVal === undefined) return -1;
@@ -117,10 +109,6 @@ export function sortCreations<T extends FilterableCreation>(
         : aVal.localeCompare(bVal);
     }
 
-    if (typeof aVal === "number" && typeof bVal === "number") {
-      return sortOrder === "desc" ? bVal - aVal : aVal - bVal;
-    }
-
     return 0;
   });
 }

package/src/domains/image-to-video/presentation/hooks/useFormState.ts

@@ -1,15 +1,15 @@
 /**
  * Form State Hook for Image-to-Video
  * Manages form state with actions
+ * Now powered by generic form state factory
  */
 
-import { useState, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
+import { createFormStateHook } from "../../../../shared/hooks/factories";
 import type {
   ImageToVideoFormState,
   ImageToVideoFormActions,
   ImageToVideoFormDefaults,
-  AnimationStyleId,
-  VideoDuration,
 } from "../../domain/types";
 
 export interface UseFormStateOptions {
@@ -18,78 +18,50 @@ export interface UseFormStateOptions {
 
 export interface UseFormStateReturn {
   state: ImageToVideoFormState;
-  actions: ImageToVideoFormActions;
+  actions: ImageToVideoFormActions & {
+    addImages: (images: string[]) => void;
+    removeImage: (index: number) => void;
+  };
 }
 
-function createInitialState(defaults: ImageToVideoFormDefaults): ImageToVideoFormState {
-  return {
+// Create the form state hook using the factory
+const useImageToVideoFormStateInternal = createFormStateHook<
+  ImageToVideoFormState,
+  ImageToVideoFormDefaults
+>({
+  createInitialState: (defaults) => ({
     selectedImages: [],
     animationStyle: defaults.animationStyle ?? "none",
     duration: defaults.duration ?? 3,
     motionPrompt: "",
-  };
-}
+  }),
+});
 
+/**
+ * Image-to-Video form state hook
+ * Manages form fields with additional image array helpers
+ */
 export function useFormState(options: UseFormStateOptions): UseFormStateReturn {
-  const { defaults } = options;
-
-  const [state, setState] = useState<ImageToVideoFormState>(() =>
-    createInitialState(defaults)
-  );
-
-  const setSelectedImages = useCallback((images: string[]) => {
-    setState((prev) => ({ ...prev, selectedImages: images }));
-  }, []);
+  const { state, actions: baseActions } = useImageToVideoFormStateInternal(options);
 
+  // Add custom array helpers
   const addImages = useCallback((images: string[]) => {
-    setState((prev) => ({
-      ...prev,
-      selectedImages: [...prev.selectedImages, ...images],
-    }));
-  }, []);
+    baseActions.setSelectedImages([...state.selectedImages, ...images]);
+  }, [state.selectedImages, baseActions]);
 
   const removeImage = useCallback((index: number) => {
-    setState((prev) => ({
-      ...prev,
-      selectedImages: prev.selectedImages.filter((_, i) => i !== index),
-    }));
-  }, []);
-
-  const setAnimationStyle = useCallback((style: AnimationStyleId) => {
-    setState((prev) => ({ ...prev, animationStyle: style }));
-  }, []);
-
-  const setDuration = useCallback((duration: VideoDuration) => {
-    setState((prev) => ({ ...prev, duration }));
-  }, []);
-
-  const setMotionPrompt = useCallback((prompt: string) => {
-    setState((prev) => ({ ...prev, motionPrompt: prompt }));
-  }, []);
+    baseActions.setSelectedImages(
+      state.selectedImages.filter((_, i) => i !== index)
+    );
+  }, [state.selectedImages, baseActions]);
 
-  const reset = useCallback(() => {
-    setState(createInitialState(defaults));
-  }, [defaults]);
-
-  const actions = useMemo<ImageToVideoFormActions>(
+  const actions = useMemo(
     () => ({
-      setSelectedImages,
+      ...baseActions,
       addImages,
       removeImage,
-      setAnimationStyle,
-      setDuration,
-      setMotionPrompt,
-      reset,
     }),
-    [
-      setSelectedImages,
-      addImages,
-      removeImage,
-      setAnimationStyle,
-      setDuration,
-      setMotionPrompt,
-      reset,
-    ]
+    [baseActions, addImages, removeImage]
   );
 
   return { state, actions };

package/src/domains/image-to-video/presentation/hooks/useGeneration.ts

@@ -1,9 +1,11 @@
 /**
  * Generation Hook for Image-to-Video
  * Manages generation state and execution with abort support
+ * Now powered by generic generation hook factory
  */
 
-import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { useMemo } from "react";
+import { createGenerationHook } from "../../../../shared/hooks/factories";
 import type {
   ImageToVideoFormState,
   ImageToVideoGenerationState,
@@ -23,85 +25,53 @@ export interface UseGenerationReturn {
   isReady: boolean;
 }
 
-const INITIAL_GENERATION_STATE: ImageToVideoGenerationState = {
-  isGenerating: false,
-  progress: 0,
-  error: null,
-};
+// Create the generation hook using the factory
+const useImageToVideoGenerationInternal = createGenerationHook<
+  ImageToVideoFormState,
+  void
+>({
+  execute: async (_request) => {
+    // This will be called via callbacks
+    // The actual execution happens in the callbacks layer
+  },
+  validate: (request) => {
+    if (request.selectedImages.length === 0) {
+      return "No images selected";
+    }
+    return null;
+  },
+  transformError: (error) => {
+    return error instanceof Error ? error.message : String(error);
+  },
+});
 
+/**
+ * Image-to-Video generation hook
+ * Manages generation state with validation and error handling
+ */
 export function useGeneration(options: UseGenerationOptions): UseGenerationReturn {
   const { formState, callbacks } = options;
 
-  const [generationState, setGenerationState] = useState<ImageToVideoGenerationState>(
-    INITIAL_GENERATION_STATE
-  );
-
-  const abortControllerRef = useRef<AbortController | null>(null);
-  const isMountedRef = useRef(true);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-      abortControllerRef.current?.abort();
-    };
-  }, []);
-
-  // Stabilize callbacks to prevent unnecessary re-renders
-  const onErrorRef = useRef(callbacks.onError);
-  const onGenerateRef = useRef(callbacks.onGenerate);
-
-  useEffect(() => {
-    onErrorRef.current = callbacks.onError;
-    onGenerateRef.current = callbacks.onGenerate;
-  }, [callbacks.onError, callbacks.onGenerate]);
-
-  const setProgress = useCallback((progress: number) => {
-    if (!isMountedRef.current) return;
-    setGenerationState((prev) => ({ ...prev, progress }));
-  }, []);
-
-  const setError = useCallback((error: string | null) => {
-    if (!isMountedRef.current) return;
-    setGenerationState((prev) => ({ ...prev, error, isGenerating: false }));
-  }, []);
-
-  const handleGenerate = useCallback(async () => {
-    if (formState.selectedImages.length === 0) {
-      onErrorRef.current?.("No images selected");
-      return;
-    }
-
-    // Create new AbortController for this generation
-    abortControllerRef.current = new AbortController();
-
-    setGenerationState({
-      isGenerating: true,
-      progress: 0,
-      error: null,
-    });
+  const {
+    generationState,
+    handleGenerate: baseHandleGenerate,
+    setProgress,
+    setError,
+  } = useImageToVideoGenerationInternal({
+    onError: callbacks.onError,
+  });
 
+  const handleGenerate = async () => {
+    await baseHandleGenerate(formState);
+    // Execute the actual generation via callbacks
     try {
-      await onGenerateRef.current(formState);
-
-      if (!isMountedRef.current || abortControllerRef.current.signal.aborted) return;
-
-      setGenerationState((prev) => ({ ...prev, isGenerating: false, progress: 100 }));
+      await callbacks.onGenerate(formState);
     } catch (error) {
-      if (!isMountedRef.current || abortControllerRef.current.signal.aborted) return;
-
       const errorMessage = error instanceof Error ? error.message : String(error);
-      setGenerationState({
-        isGenerating: false,
-        progress: 0,
-        error: errorMessage,
-      });
-      onErrorRef.current?.(errorMessage);
-    } finally {
-      abortControllerRef.current = null;
+      setError(errorMessage);
+      callbacks.onError?.(errorMessage);
     }
-  }, [formState]);
+  };
 
   const isReady = useMemo(
     () => formState.selectedImages.length > 0 && !generationState.isGenerating,

package/src/domains/text-to-image/presentation/hooks/useFormState.ts

@@ -1,14 +1,11 @@
 /**
  * Text-to-Image Form State Hook
  * Manages form state for text-to-image generation
+ * Now powered by generic form state factory
  */
 
-import { useState, useCallback, useMemo } from "react";
+import { createFormStateHook } from "../../../../shared/hooks/factories";
 import type {
-  AspectRatio,
-  ImageSize,
-  NumImages,
-  OutputFormat,
   TextToImageFormState,
   TextToImageFormActions,
   TextToImageFormDefaults,
@@ -23,95 +20,51 @@ export interface UseFormStateReturn {
   actions: TextToImageFormActions;
 }
 
-function validateDefaults(defaults: TextToImageFormDefaults): asserts defaults is Required<TextToImageFormDefaults> {
-  if (!defaults.aspectRatio) {
+function validateDefaults(state: TextToImageFormState): void {
+  if (!state.aspectRatio) {
     throw new Error("useFormState: defaults.aspectRatio is required");
   }
-  if (!defaults.size) {
+  if (!state.size) {
     throw new Error("useFormState: defaults.size is required");
   }
-  if (!defaults.numImages) {
+  if (!state.numImages) {
     throw new Error("useFormState: defaults.numImages is required");
   }
-  if (defaults.guidanceScale === undefined) {
+  if (state.guidanceScale === undefined) {
     throw new Error("useFormState: defaults.guidanceScale is required");
   }
-  if (!defaults.outputFormat) {
+  if (!state.outputFormat) {
     throw new Error("useFormState: defaults.outputFormat is required");
   }
-  if (!defaults.selectedStyle) {
+  if (!state.selectedStyle) {
     throw new Error("useFormState: defaults.selectedStyle is required");
   }
 }
 
-export function useFormState(options: UseFormStateOptions): UseFormStateReturn {
-  const defaults = useMemo(() => {
-    validateDefaults(options.defaults);
-    return options.defaults;
-  }, [options.defaults]);
-
-  const [prompt, setPrompt] = useState("");
-  const [aspectRatio, setAspectRatio] = useState<AspectRatio>(defaults.aspectRatio);
-  const [size, setSize] = useState<ImageSize>(defaults.size);
-  const [numImages, setNumImages] = useState<NumImages>(defaults.numImages);
-  const [negativePrompt, setNegativePrompt] = useState("");
-  const [guidanceScale, setGuidanceScale] = useState(defaults.guidanceScale);
-  const [selectedModel, setSelectedModel] = useState<string | null>(null);
-  const [outputFormat, setOutputFormat] = useState<OutputFormat>(defaults.outputFormat);
-  const [selectedStyle, setSelectedStyle] = useState(defaults.selectedStyle);
-
-  const reset = useCallback(() => {
-    setPrompt("");
-    setAspectRatio(defaults.aspectRatio);
-    setSize(defaults.size);
-    setNumImages(defaults.numImages);
-    setNegativePrompt("");
-    setGuidanceScale(defaults.guidanceScale);
-    setSelectedModel(null);
-    setOutputFormat(defaults.outputFormat);
-    setSelectedStyle(defaults.selectedStyle);
-  }, [defaults]);
-
-  const state: TextToImageFormState = useMemo(
-    () => ({
-      prompt,
-      aspectRatio,
-      size,
-      numImages,
-      negativePrompt,
-      guidanceScale,
-      selectedModel,
-      outputFormat,
-      selectedStyle,
-    }),
-    [
-      prompt,
-      aspectRatio,
-      size,
-      numImages,
-      negativePrompt,
-      guidanceScale,
-      selectedModel,
-      outputFormat,
-      selectedStyle,
-    ]
-  );
-
-  const actions: TextToImageFormActions = useMemo(
-    () => ({
-      setPrompt,
-      setAspectRatio,
-      setSize,
-      setNumImages,
-      setNegativePrompt,
-      setGuidanceScale,
-      setSelectedModel,
-      setOutputFormat,
-      setSelectedStyle,
-      reset,
-    }),
-    [reset]
-  );
+// Create the form state hook using the factory
+const useTextToImageFormStateInternal = createFormStateHook<
+  TextToImageFormState,
+  TextToImageFormDefaults,
+  TextToImageFormActions
+>({
+  createInitialState: (defaults) => ({
+    prompt: "",
+    aspectRatio: defaults.aspectRatio!,
+    size: defaults.size!,
+    numImages: defaults.numImages!,
+    negativePrompt: "",
+    guidanceScale: defaults.guidanceScale!,
+    selectedModel: null,
+    outputFormat: defaults.outputFormat!,
+    selectedStyle: defaults.selectedStyle!,
+  }),
+  validate: validateDefaults,
+});
 
-  return { state, actions };
+/**
+ * Text-to-Image form state hook
+ * Manages all form fields for text-to-image generation
+ */
+export function useFormState(options: UseFormStateOptions): UseFormStateReturn {
+  return useTextToImageFormStateInternal(options);
 }

package/src/exports/presentation.ts

@@ -28,20 +28,20 @@ export type {
 
 // Components
 export {
-  GenerationProgressContent, GenerationProgressBar, PendingJobCard,
-  PendingJobProgressBar, PendingJobCardActions, GenerationResultContent, ResultHeader,
+  GenerationProgressContent, PendingJobCard,
+  PendingJobCardActions, GenerationResultContent, ResultHeader,
   ResultImageCard, ResultStoryCard, ResultActions, DEFAULT_RESULT_CONFIG, PhotoStep,
   DualImagePicker, PromptInput, AIGenerationHero, ExamplePrompts, ModerationSummary,
   GenerateButton, ResultDisplay, AIGenerationResult, ErrorDisplay, FeatureHeader,
   AIGenScreenHeader, CreditBadge, PhotoUploadCard, SettingsSheet, StyleSelector,
   AspectRatioSelector, DurationSelector, GridSelector, StylePresetsGrid, AIGenerationForm,
-  AIGenerationConfig, ModelSelector, 
+  AIGenerationConfig, ModelSelector,
   createAspectRatioOptions, createDurationOptions, createStyleOptions, createStyleOptionsFromConfig,
   ASPECT_RATIO_IDS, COMMON_DURATIONS,
 } from "../presentation/components";
 export type {
-  GenerationProgressContentProps, GenerationProgressBarProps, PendingJobCardProps, StatusLabels,
-  PendingJobProgressBarProps, PendingJobCardActionsProps, GenerationResultData, GenerationResultContentProps,
+  GenerationProgressContentProps, PendingJobCardProps, StatusLabels,
+  PendingJobCardActionsProps, GenerationResultData, GenerationResultContentProps,
   ResultHeaderProps, ResultImageCardProps, ResultStoryCardProps, ResultActionsProps, ResultConfig,
   ResultHeaderConfig, ResultImageConfig, ResultStoryConfig, ResultActionsConfig, ResultLayoutConfig,
   ResultActionButton, PhotoStepProps, DualImagePickerProps, PromptInputProps, AIGenerationHeroProps,

package/src/index.ts

@@ -8,6 +8,9 @@ export * from "./exports/infrastructure";
 export * from "./exports/presentation";
 export * from "./exports/features";
 
+// Shared Utilities and Components
+export * from "./shared";
+
 // Creations Domain
 export * from "./domains/creations";
 

package/src/presentation/components/GenerationProgressContent.tsx

@@ -11,7 +11,7 @@ import { ProgressCloseButton } from "./ProgressCloseButton";
 import { ProgressHeader } from "./ProgressHeader";
 import { ProgressHint } from "./ProgressHint";
 import { ProgressDismissButton } from "./ProgressDismissButton";
-import { GenerationProgressBar } from "./GenerationProgressBar";
+import { ProgressBar } from "../../shared/components/common";
 import { generationProgressContentStyles } from "./GenerationProgressContent.styles";
 import type { GenerationProgressContentProps } from "./GenerationProgressContent.types";
 
@@ -56,11 +56,14 @@ export const GenerationProgressContent: React.FC<
         textColor={textColor}
       />
 
-      <GenerationProgressBar
+      <ProgressBar
         progress={progress}
+        showPercentage={true}
         textColor={tokens.colors.primary}
         progressColor={progressColor}
         backgroundColor={progressBackgroundColor}
+        height={8}
+        marginBottom={16}
       />
 
       <ProgressHint

package/src/presentation/components/PendingJobCard.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { View, StyleSheet } from "react-native";
 import { AtomicText, AtomicSpinner, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { BackgroundJob } from "../../domains/background/domain/entities/job.types";
-import { PendingJobProgressBar } from "./PendingJobProgressBar";
+import { ProgressBar } from "../../shared/components/common";
 import { PendingJobCardActions } from "./PendingJobCardActions";
 
 export interface StatusLabels {
@@ -110,7 +110,14 @@ export function PendingJobCard<TInput = unknown, TResult = unknown>({
           <AtomicText style={styles.statusText}>
             {statusText}
           </AtomicText>
-          {!isFailed && <PendingJobProgressBar progress={job.progress} />}
+          {!isFailed && (
+            <ProgressBar
+              progress={job.progress}
+              showPercentage={false}
+              height={4}
+              marginBottom={0}
+            />
+          )}
         </View>
         {renderActions ? (
           renderActions(job)

package/src/presentation/components/README.md

@@ -50,17 +50,18 @@ import { GenerationProgressContent } from '@umituz/react-native-ai-generation-co
 />
 ```
 
-### GenerationProgressBar
+### ProgressBar
 
-Progress bar component:
+Progress bar component (from shared utilities):
 
 ```tsx
-import { GenerationProgressBar } from '@umituz/react-native-ai-generation-content';
+import { ProgressBar } from '@umituz/react-native-ai-generation-content';
 
-<GenerationProgressBar
+<ProgressBar
   progress={progress}
+  showPercentage={true}
   height={8}
-  color="#4CAF50"
+  progressColor="#4CAF50"
 />
 ```