@umituz/react-native-ai-generation-content 1.72.11 → 1.72.13

package/src/presentation/components/index.ts

@@ -1,7 +1,5 @@
 export { GenerationProgressContent } from "./GenerationProgressContent";
-export { GenerationProgressBar } from "./GenerationProgressBar";
 export { PendingJobCard } from "./PendingJobCard";
-export { PendingJobProgressBar } from "./PendingJobProgressBar";
 export { PendingJobCardActions } from "./PendingJobCardActions";
 export { PromptInput } from "./PromptInput";
 export { AIGenerationHero } from "./AIGenerationHero";
@@ -12,14 +10,12 @@ export * from "./AIGenerationForm.types";
 export * from "./AIGenerationConfig";
 
 export type { GenerationProgressContentProps } from "./GenerationProgressContent";
-export type { GenerationProgressBarProps } from "./GenerationProgressBar";
 
 export type {
   PendingJobCardProps,
   StatusLabels,
 } from "./PendingJobCard";
 
-export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
 export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
 export type { PromptInputProps } from "./PromptInput";
 export type { AIGenerationHeroProps } from "./AIGenerationHero";

package/src/shared/components/common/ProgressBar.tsx

@@ -0,0 +1,99 @@
+/**
+ * Unified ProgressBar Component
+ * Flexible progress bar with optional percentage display
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { clampProgress, roundProgress } from "../../../infrastructure/utils/progress.utils";
+
+export interface ProgressBarProps {
+  /** Progress value (0-100) */
+  progress: number;
+  /** Show percentage text below bar */
+  showPercentage?: boolean;
+  /** Custom text color */
+  textColor?: string;
+  /** Custom progress fill color */
+  progressColor?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Bar height (default: 8 for standard, 4 for compact) */
+  height?: number;
+  /** Spacing below bar (default: 16 with percentage, 0 without) */
+  marginBottom?: number;
+  /** Border radius (default: height / 2) */
+  borderRadius?: number;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  progress,
+  showPercentage = false,
+  textColor,
+  progressColor,
+  backgroundColor,
+  height = 8,
+  marginBottom,
+  borderRadius,
+}) => {
+  const tokens = useAppDesignTokens();
+  const clampedProgress = clampProgress(progress);
+  const actualBorderRadius = borderRadius ?? height / 2;
+  const actualMarginBottom = marginBottom ?? (showPercentage ? 16 : 0);
+
+  return (
+    <View style={[styles.container, { marginBottom: actualMarginBottom }]}>
+      <View
+        style={[
+          styles.background,
+          {
+            backgroundColor: backgroundColor || tokens.colors.borderLight,
+            height,
+            borderRadius: actualBorderRadius,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.fill,
+            {
+              backgroundColor: progressColor || tokens.colors.primary,
+              width: `${clampedProgress}%`,
+              borderRadius: actualBorderRadius,
+            },
+          ]}
+        />
+      </View>
+      {showPercentage && (
+        <AtomicText
+          style={[
+            styles.text,
+            { color: textColor || tokens.colors.textPrimary },
+          ]}
+        >
+          {roundProgress(clampedProgress)}%
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    alignItems: "center",
+  },
+  background: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  fill: {
+    height: "100%",
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 8,
+  },
+});

package/src/shared/components/common/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Common Shared Components
+ */
+
+export { ProgressBar, type ProgressBarProps } from "./ProgressBar";

package/src/shared/components/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared Components
+ */
+
+export * from "./common";

package/src/shared/hooks/factories/createFormStateHook.ts

@@ -0,0 +1,119 @@
+/**
+ * Generic Form State Hook Factory
+ * Creates type-safe form state management hooks
+ */
+
+import { useState, useCallback, useMemo } from "react";
+
+/**
+ * Form state configuration
+ */
+export interface FormStateConfig<TState, TDefaults> {
+  /** Initial state factory */
+  createInitialState: (defaults: TDefaults) => TState;
+  /** Optional state validator */
+  validate?: (state: TState) => void;
+}
+
+/**
+ * Form actions type - maps state keys to setters
+ */
+export type FormActions<TState> = {
+  [K in keyof TState as `set${Capitalize<string & K>}`]: (value: TState[K]) => void;
+} & {
+  reset: () => void;
+};
+
+/**
+ * Form state hook return type
+ */
+export interface FormStateHookReturn<TState, TActions> {
+  state: TState;
+  actions: TActions;
+}
+
+/**
+ * Options for form state hook
+ */
+export interface FormStateHookOptions<TDefaults> {
+  defaults: TDefaults;
+}
+
+/**
+ * Creates a type-safe form state hook
+ * @param config - Form state configuration
+ * @returns Form state hook
+ *
+ * @example
+ * ```ts
+ * const useMyForm = createFormStateHook({
+ *   createInitialState: (defaults) => ({
+ *     name: "",
+ *     age: defaults.age,
+ *   }),
+ * });
+ *
+ * // Usage
+ * const { state, actions } = useMyForm({ defaults: { age: 18 } });
+ * actions.setName("John");
+ * actions.setAge(25);
+ * actions.reset();
+ * ```
+ */
+export function createFormStateHook<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TState extends Record<string, any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TDefaults extends Record<string, any>,
+  TActions extends FormActions<TState> = FormActions<TState>
+>(
+  config: FormStateConfig<TState, TDefaults>
+) {
+  return function useFormState(
+    options: FormStateHookOptions<TDefaults>
+  ): FormStateHookReturn<TState, TActions> {
+    const { defaults } = options;
+
+    // Validate defaults if validator provided
+    const validatedDefaults = useMemo(() => {
+      if (config.validate) {
+        const initialState = config.createInitialState(defaults);
+        config.validate(initialState);
+      }
+      return defaults;
+    }, [defaults]);
+
+    // Create initial state
+    const [state, setState] = useState<TState>(() =>
+      config.createInitialState(validatedDefaults)
+    );
+
+    // Create reset function
+    const reset = useCallback(() => {
+      setState(config.createInitialState(validatedDefaults));
+    }, [validatedDefaults]);
+
+    // Create actions dynamically
+    const actions = useMemo(() => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const actionObj: any = { reset };
+
+      // Generate setter for each state key
+      Object.keys(state).forEach((key) => {
+        const setterName = `set${key.charAt(0).toUpperCase()}${key.slice(1)}`;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        actionObj[setterName] = (value: any) => {
+          setState((prev) => ({ ...prev, [key]: value }));
+        };
+      });
+
+      return actionObj as TActions;
+    }, [state, reset]);
+
+    return { state, actions };
+  };
+}
+
+// Note: createFormStateHookWithIndividualState removed due to type complexity
+// and lack of usage. Use createFormStateHook instead which provides the same
+// functionality with better type safety.

package/src/shared/hooks/factories/createGenerationHook.ts

@@ -0,0 +1,253 @@
+/**
+ * Generic Generation Hook Factory
+ * Creates type-safe generation hooks with error handling, progress tracking, and abort support
+ */
+
+import { useState, useCallback, useRef, useEffect } from "react";
+
+/**
+ * Generation state
+ */
+export interface GenerationState {
+  isGenerating: boolean;
+  progress: number;
+  error: string | null;
+}
+
+/**
+ * Generation callbacks
+ */
+export interface GenerationCallbacks<TResult> {
+  /** Called when generation succeeds */
+  onSuccess?: (result: TResult) => void;
+  /** Called when generation fails */
+  onError?: (error: string) => void;
+  /** Called on progress update */
+  onProgress?: (progress: number) => void;
+}
+
+/**
+ * Generation hook configuration
+ */
+export interface GenerationHookConfig<TRequest, TResult> {
+  /** Execute the generation request */
+  execute: (request: TRequest, signal?: AbortSignal) => Promise<TResult>;
+  /** Optional validation before execution */
+  validate?: (request: TRequest) => string | null;
+  /** Optional transform for errors */
+  transformError?: (error: unknown) => string;
+}
+
+/**
+ * Generation hook return type
+ */
+export interface GenerationHookReturn<TRequest, TResult> {
+  generationState: GenerationState;
+  handleGenerate: (request: TRequest) => Promise<TResult | null>;
+  setProgress: (progress: number) => void;
+  setError: (error: string | null) => void;
+  abort: () => void;
+}
+
+const INITIAL_STATE: GenerationState = {
+  isGenerating: false,
+  progress: 0,
+  error: null,
+};
+
+/**
+ * Creates a type-safe generation hook
+ * @param config - Generation hook configuration
+ * @param callbacks - Generation callbacks
+ * @returns Generation hook
+ *
+ * @example
+ * ```ts
+ * const useMyGeneration = createGenerationHook({
+ *   execute: async (request) => {
+ *     return await api.generate(request);
+ *   },
+ *   validate: (request) => {
+ *     if (!request.prompt) return "Prompt is required";
+ *     return null;
+ *   },
+ * });
+ *
+ * // Usage
+ * const { generationState, handleGenerate } = useMyGeneration({
+ *   onSuccess: (result) => console.log("Success!", result),
+ *   onError: (error) => console.error("Error:", error),
+ * });
+ * ```
+ */
+export function createGenerationHook<TRequest, TResult>(
+  config: GenerationHookConfig<TRequest, TResult>
+) {
+  return function useGeneration(
+    callbacks: GenerationCallbacks<TResult> = {}
+  ): GenerationHookReturn<TRequest, TResult> {
+    const [generationState, setGenerationState] = useState<GenerationState>(INITIAL_STATE);
+
+    const abortControllerRef = useRef<AbortController | null>(null);
+    const isMountedRef = useRef(true);
+
+    // Stabilize callbacks
+    const onSuccessRef = useRef(callbacks.onSuccess);
+    const onErrorRef = useRef(callbacks.onError);
+    const onProgressRef = useRef(callbacks.onProgress);
+
+    useEffect(() => {
+      onSuccessRef.current = callbacks.onSuccess;
+      onErrorRef.current = callbacks.onError;
+      onProgressRef.current = callbacks.onProgress;
+    }, [callbacks.onSuccess, callbacks.onError, callbacks.onProgress]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+        abortControllerRef.current?.abort();
+      };
+    }, []);
+
+    const setProgress = useCallback((progress: number) => {
+      if (!isMountedRef.current) return;
+      setGenerationState((prev) => ({ ...prev, progress }));
+      onProgressRef.current?.(progress);
+    }, []);
+
+    const setError = useCallback((error: string | null) => {
+      if (!isMountedRef.current) return;
+      setGenerationState((prev) => ({ ...prev, error, isGenerating: false }));
+      if (error) {
+        onErrorRef.current?.(error);
+      }
+    }, []);
+
+    const abort = useCallback(() => {
+      abortControllerRef.current?.abort();
+      if (isMountedRef.current) {
+        setGenerationState((prev) => ({
+          ...prev,
+          isGenerating: false,
+          error: "Generation aborted",
+        }));
+      }
+    }, []);
+
+    const handleGenerate = useCallback(
+      async (request: TRequest): Promise<TResult | null> => {
+        // Validate request
+        if (config.validate) {
+          const validationError = config.validate(request);
+          if (validationError) {
+            setError(validationError);
+            return null;
+          }
+        }
+
+        // Create new AbortController
+        abortControllerRef.current = new AbortController();
+
+        setGenerationState({
+          isGenerating: true,
+          progress: 0,
+          error: null,
+        });
+
+        try {
+          const result = await config.execute(
+            request,
+            abortControllerRef.current.signal
+          );
+
+          if (!isMountedRef.current || abortControllerRef.current.signal.aborted) {
+            return null;
+          }
+
+          setGenerationState((prev) => ({
+            ...prev,
+            isGenerating: false,
+            progress: 100
+          }));
+
+          onSuccessRef.current?.(result);
+          return result;
+        } catch (error) {
+          if (!isMountedRef.current || abortControllerRef.current.signal.aborted) {
+            return null;
+          }
+
+          const errorMessage = config.transformError
+            ? config.transformError(error)
+            : error instanceof Error
+            ? error.message
+            : String(error);
+
+          setError(errorMessage);
+          return null;
+        } finally {
+          abortControllerRef.current = null;
+        }
+      },
+      [config, setError]
+    );
+
+    return {
+      generationState,
+      handleGenerate,
+      setProgress,
+      setError,
+      abort,
+    };
+  };
+}
+
+/**
+ * Creates a generation hook with progress updates
+ * Useful when the generation API supports progress callbacks
+ */
+export function createGenerationHookWithProgress<TRequest, TResult>(
+  config: GenerationHookConfig<TRequest, TResult> & {
+    /** Get progress stream or polling function */
+    subscribeToProgress?: (
+      request: TRequest,
+      onProgress: (progress: number) => void
+    ) => () => void;
+  }
+) {
+  const baseHook = createGenerationHook(config);
+
+  return function useGenerationWithProgress(
+    callbacks: GenerationCallbacks<TResult> = {}
+  ): GenerationHookReturn<TRequest, TResult> {
+    const hookResult = baseHook(callbacks);
+    const unsubscribeRef = useRef<(() => void) | null>(null);
+
+    const handleGenerateWithProgress = useCallback(
+      async (request: TRequest): Promise<TResult | null> => {
+        // Subscribe to progress if available
+        if (config.subscribeToProgress) {
+          unsubscribeRef.current = config.subscribeToProgress(
+            request,
+            hookResult.setProgress
+          );
+        }
+
+        try {
+          return await hookResult.handleGenerate(request);
+        } finally {
+          unsubscribeRef.current?.();
+          unsubscribeRef.current = null;
+        }
+      },
+      [hookResult, config.subscribeToProgress]
+    );
+
+    return {
+      ...hookResult,
+      handleGenerate: handleGenerateWithProgress,
+    };
+  };
+}

package/src/shared/hooks/factories/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Hook Factories
+ * Generic hook creation utilities
+ */
+
+export {
+  createFormStateHook,
+  type FormStateConfig,
+  type FormActions,
+  type FormStateHookReturn,
+  type FormStateHookOptions,
+} from "./createFormStateHook";
+
+export {
+  createGenerationHook,
+  createGenerationHookWithProgress,
+  type GenerationState as BaseGenerationState,
+  type GenerationCallbacks,
+  type GenerationHookConfig,
+  type GenerationHookReturn,
+} from "./createGenerationHook";

package/src/shared/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared Hooks
+ */
+
+export * from "./factories";

package/src/shared/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared Utilities, Components, and Hooks
+ * Centralized exports for all shared code
+ */
+
+// Components
+export * from "./components";
+
+// Hooks
+export * from "./hooks";
+
+// Utils
+export * from "./utils/date";
+export * from "./utils/filters";

package/src/shared/utils/date/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Date Utilities
+ * Centralized date handling utilities
+ */
+
+export {
+  normalizeDateToTimestamp,
+  normalizeToDate,
+  isValidDate,
+  compareDates,
+} from "./normalization";

package/src/shared/utils/date/normalization.ts

@@ -0,0 +1,60 @@
+/**
+ * Date Normalization Utilities
+ * Provides consistent date handling across the application
+ */
+
+/**
+ * Normalizes a Date or timestamp to a timestamp number
+ * @param date - Date object or timestamp number
+ * @returns Timestamp in milliseconds
+ */
+export function normalizeDateToTimestamp(date: Date | number | undefined): number {
+  if (date === undefined) return 0;
+  return date instanceof Date ? date.getTime() : date;
+}
+
+/**
+ * Normalizes a Date or timestamp to a Date object
+ * @param date - Date object or timestamp number
+ * @returns Date object
+ */
+export function normalizeToDate(date: Date | number): Date {
+  return date instanceof Date ? date : new Date(date);
+}
+
+/**
+ * Checks if a value is a valid date
+ * @param value - Value to check
+ * @returns True if value is a valid Date or number timestamp
+ */
+export function isValidDate(value: unknown): value is Date | number {
+  if (value instanceof Date) {
+    return !isNaN(value.getTime());
+  }
+  if (typeof value === "number") {
+    return !isNaN(value) && isFinite(value);
+  }
+  return false;
+}
+
+/**
+ * Compares two dates for sorting
+ * @param a - First date
+ * @param b - Second date
+ * @param order - Sort order ('asc' or 'desc')
+ * @returns Comparison result for Array.sort()
+ */
+export function compareDates(
+  a: Date | number | undefined,
+  b: Date | number | undefined,
+  order: "asc" | "desc" = "asc"
+): number {
+  const aTime = normalizeDateToTimestamp(a);
+  const bTime = normalizeDateToTimestamp(b);
+
+  if (aTime === 0 && bTime === 0) return 0;
+  if (aTime === 0) return 1;
+  if (bTime === 0) return -1;
+
+  return order === "desc" ? bTime - aTime : aTime - bTime;
+}

package/src/shared/utils/filters/createFilterButtons.ts

@@ -0,0 +1,60 @@
+/**
+ * Generic Filter Button Factory
+ * Creates filter button configurations from data
+ */
+
+export interface FilterButtonConfig<T = string> {
+  id: T;
+  label: string;
+  icon: string;
+  active: boolean;
+  onPress: () => void;
+}
+
+export interface FilterItemInput<T = string> {
+  id: T;
+  label: string;
+  icon: string;
+}
+
+/**
+ * Creates filter buttons from configuration
+ * @param items - Array of filter items with id, label, and icon
+ * @param activeFilter - Currently active filter id
+ * @param onSelect - Callback when a filter is selected
+ * @returns Array of filter button configurations
+ */
+export function createFilterButtons<T extends string = string>(
+  items: readonly FilterItemInput<T>[],
+  activeFilter: T,
+  onSelect: (filter: T) => void
+): FilterButtonConfig<T>[] {
+  return items.map((item) => ({
+    id: item.id,
+    label: item.label,
+    icon: item.icon,
+    active: activeFilter === item.id,
+    onPress: () => onSelect(item.id),
+  }));
+}
+
+/**
+ * Creates filter buttons from a record/map
+ * @param filterMap - Record of filter id to label and icon
+ * @param activeFilter - Currently active filter id
+ * @param onSelect - Callback when a filter is selected
+ * @returns Array of filter button configurations
+ */
+export function createFilterButtonsFromMap<T extends string = string>(
+  filterMap: Record<T, { label: string; icon: string }>,
+  activeFilter: T,
+  onSelect: (filter: T) => void
+): FilterButtonConfig<T>[] {
+  return Object.entries(filterMap).map(([id, config]) => ({
+    id: id as T,
+    label: (config as { label: string; icon: string }).label,
+    icon: (config as { label: string; icon: string }).icon,
+    active: activeFilter === id,
+    onPress: () => onSelect(id as T),
+  }));
+}

package/src/shared/utils/filters/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Filter Utilities
+ * Centralized filter utilities
+ */
+
+export {
+  createFilterButtons,
+  createFilterButtonsFromMap,
+  type FilterButtonConfig,
+  type FilterItemInput,
+} from "./createFilterButtons";