@umituz/react-native-ai-generation-content 1.17.21 → 1.17.22

package/package.json

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

package/src/domains/creations/domain/types/creation-filter.ts

@@ -4,6 +4,7 @@
  */
 
 import type { CreationTypeId, CreationStatus, CreationCategory } from "./creation-types";
+import { IMAGE_CREATION_TYPES, VIDEO_CREATION_TYPES, VOICE_CREATION_TYPES } from "./creation-categories";
 
 /**
  * Filter options for querying creations
@@ -114,9 +115,6 @@ export function calculateCreationStats(
   }
 
   // Calculate category counts from type counts
-  const { IMAGE_CREATION_TYPES, VIDEO_CREATION_TYPES, VOICE_CREATION_TYPES } =
-    require("./creation-categories");
-
   for (const [typeId, count] of Object.entries(stats.byType)) {
     if (IMAGE_CREATION_TYPES.includes(typeId)) {
       stats.byCategory.image += count as number;

package/src/domains/creations/domain/value-objects/CreationsConfig.ts

@@ -5,6 +5,7 @@
 
 import type { Creation, CreationDocument } from "../entities/Creation";
 import type { FilterCategory } from "@umituz/react-native-design-system";
+import type { FilterOption } from "../types/creation-filter";
 
 export interface CreationType {
   readonly id: string;
@@ -23,6 +24,16 @@ export interface CreationsTranslations {
   readonly filterAll: string;
   readonly filterLabel: string;
   readonly filterTitle: string;
+  readonly statusFilterTitle?: string;
+  readonly mediaFilterTitle?: string;
+  readonly clearFilter?: string;
+}
+
+export interface CreationsFilterConfig {
+  readonly statusOptions?: FilterOption[];
+  readonly mediaOptions?: FilterOption[];
+  readonly showStatusFilter?: boolean;
+  readonly showMediaFilter?: boolean;
 }
 
 /**
@@ -35,6 +46,7 @@ export interface CreationsConfig {
   readonly collectionName: string;
   readonly types: readonly CreationType[];
   readonly filterCategories?: readonly FilterCategory[];
+  readonly filterConfig?: CreationsFilterConfig;
   readonly translations: CreationsTranslations;
   readonly showFilter?: boolean;
   readonly maxThumbnails?: number;

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

@@ -0,0 +1,63 @@
+/**
+ * Filter Sheets Components
+ * Modal-based filter sheets for status and media type filtering
+ */
+
+import React from "react";
+import { FilterSheet } from "@umituz/react-native-design-system";
+import type { FilterOption } from "../../domain/types/creation-filter";
+
+interface FilterSheetConfig {
+  readonly visible: boolean;
+  readonly onClose: () => void;
+  readonly options: FilterOption[];
+  readonly selectedId: string;
+  readonly onSelect: (id: string) => void;
+  readonly onClear: () => void;
+  readonly title: string;
+  readonly clearLabel?: string;
+}
+
+export const StatusFilterSheet: React.FC<FilterSheetConfig> = ({
+  visible,
+  onClose,
+  options,
+  selectedId,
+  onSelect,
+  onClear,
+  title,
+  clearLabel
+}) => (
+  <FilterSheet
+    visible={visible}
+    onClose={onClose}
+    options={options}
+    selectedIds={[selectedId]}
+    onFilterPress={onSelect}
+    onClearFilters={onClear}
+    title={title}
+    clearLabel={clearLabel}
+  />
+);
+
+export const MediaFilterSheet: React.FC<FilterSheetConfig> = ({
+  visible,
+  onClose,
+  options,
+  selectedId,
+  onSelect,
+  onClear,
+  title,
+  clearLabel
+}) => (
+  <FilterSheet
+    visible={visible}
+    onClose={onClose}
+    options={options}
+    selectedIds={[selectedId]}
+    onFilterPress={onSelect}
+    onClearFilters={onClear}
+    title={title}
+    clearLabel={clearLabel}
+  />
+);

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

@@ -1,118 +1,120 @@
 declare const __DEV__: boolean;
 
-import React from 'react';
-import { View, TouchableOpacity, StyleSheet, type ViewStyle } from 'react-native';
+import React from "react";
+import { View, TouchableOpacity, StyleSheet, type ViewStyle } from "react-native";
 import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
 
+interface FilterButtonConfig {
+  readonly id: string;
+  readonly label: string;
+  readonly icon: string;
+  readonly isActive: boolean;
+  readonly onPress: () => void;
+}
+
 interface GalleryHeaderProps {
-    readonly title: string;
-    readonly count: number;
-    readonly countLabel: string;
-    readonly isFiltered: boolean;
-    readonly onFilterPress: () => void;
-    readonly showFilter?: boolean;
-    readonly filterLabel?: string;
-    readonly filterIcon?: string;
-    readonly style?: ViewStyle;
+  readonly title: string;
+  readonly count: number;
+  readonly countLabel: string;
+  readonly filterButtons?: FilterButtonConfig[];
+  readonly showFilter?: boolean;
+  readonly style?: ViewStyle;
 }
 
 export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
-    title,
-    count,
-    countLabel,
-    isFiltered,
-    onFilterPress,
-    showFilter = true,
-    filterLabel = 'Filter',
-    filterIcon = 'filter-outline',
-    style,
+  title,
+  count,
+  countLabel,
+  filterButtons = [],
+  showFilter = true,
+  style,
 }) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
+  const tokens = useAppDesignTokens();
+  const styles = useStyles(tokens);
 
-    return (
-        <View style={[styles.headerArea, style]}>
-            <View>
-                <AtomicText style={styles.title}>{title}</AtomicText>
-                <AtomicText style={styles.subtitle}>
-                    {count} {countLabel}
-                </AtomicText>
-            </View>
-            {showFilter && (
-                <TouchableOpacity
-                    onPress={() => {
-                        if (__DEV__) {
-                            // eslint-disable-next-line no-console
-                            console.log('[GalleryHeader] Filter button pressed');
-                        }
-                        onFilterPress();
-                    }}
-                    style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
-                    activeOpacity={0.7}
-                >
-                    <AtomicIcon
-                        name={filterIcon}
-                        size="sm"
-                        color={isFiltered ? "primary" : "secondary"}
-                    />
-                    <AtomicText style={[styles.filterText, { color: isFiltered ? tokens.colors.primary : tokens.colors.textSecondary }]}>
-                        {filterLabel}
-                    </AtomicText>
-                    {isFiltered && (
-                        <View style={styles.badge} />
-                    )}
-                </TouchableOpacity>
-            )}
+  return (
+    <View style={[styles.headerArea, style]}>
+      <View>
+        <AtomicText style={styles.title}>{title}</AtomicText>
+        <AtomicText style={styles.subtitle}>
+          {count} {countLabel}
+        </AtomicText>
+      </View>
+      {showFilter && filterButtons.length > 0 && (
+        <View style={styles.filterRow}>
+          {filterButtons.map((btn) => (
+            <TouchableOpacity
+              key={btn.id}
+              onPress={() => {
+                if (__DEV__) {
+                  // eslint-disable-next-line no-console
+                  console.log(`[GalleryHeader] ${btn.id} filter pressed`);
+                }
+                btn.onPress();
+              }}
+              style={[styles.filterButton, btn.isActive && styles.filterButtonActive]}
+              activeOpacity={0.7}
+            >
+              <AtomicIcon
+                name={btn.icon}
+                size="sm"
+                color={btn.isActive ? "primary" : "secondary"}
+              />
+              <AtomicText
+                style={[styles.filterText, { color: btn.isActive ? tokens.colors.primary : tokens.colors.textSecondary }]}
+              >
+                {btn.label}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
         </View>
-    );
+      )}
+    </View>
+  );
 };
 
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
+const useStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
     headerArea: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: 'space-between',
-        paddingHorizontal: tokens.spacing.md,
-        paddingVertical: tokens.spacing.sm,
-        marginBottom: tokens.spacing.sm,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      marginBottom: tokens.spacing.sm,
     },
     title: {
-        fontSize: 20,
-        fontWeight: "700",
-        color: tokens.colors.textPrimary,
-        marginBottom: 4,
+      fontSize: 20,
+      fontWeight: "700",
+      color: tokens.colors.textPrimary,
+      marginBottom: 4,
     },
     subtitle: {
-        fontSize: 14,
-        color: tokens.colors.textSecondary,
-        opacity: 0.6
+      fontSize: 14,
+      color: tokens.colors.textSecondary,
+      opacity: 0.6,
+    },
+    filterRow: {
+      flexDirection: "row",
+      gap: tokens.spacing.xs,
     },
     filterButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: tokens.spacing.xs,
-        paddingVertical: tokens.spacing.xs,
-        paddingHorizontal: tokens.spacing.md,
-        borderRadius: 999,
-        backgroundColor: tokens.colors.surfaceVariant,
-        borderWidth: 1,
-        borderColor: 'transparent',
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.spacing.xs,
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      borderRadius: 999,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderWidth: 1,
+      borderColor: "transparent",
     },
     filterButtonActive: {
-        backgroundColor: tokens.colors.primary + "15",
-        borderColor: tokens.colors.primary + "30",
+      backgroundColor: tokens.colors.primary + "15",
+      borderColor: tokens.colors.primary + "30",
     },
     filterText: {
-        fontSize: 14,
-        fontWeight: "500",
-    },
-    badge: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: tokens.colors.primary,
-        position: 'absolute',
-        top: 6,
-        right: 6,
+      fontSize: 13,
+      fontWeight: "500",
     },
-});
+  });

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

@@ -21,6 +21,7 @@ export {
   createStatusFilterButtons,
   type FilterButton,
 } from "./CreationsFilterBar";
+export { StatusFilterSheet, MediaFilterSheet } from "./FilterSheets";
 
 // Gallery Components
 export { GalleryHeader } from "./GalleryHeader";

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

@@ -6,3 +6,6 @@ export { useCreations } from "./useCreations";
 export { useDeleteCreation } from "./useDeleteCreation";
 export { useCreationsFilter } from "./useCreationsFilter";
 export { useAdvancedFilter } from "./useAdvancedFilter";
+export { useStatusFilter } from "./useStatusFilter";
+export { useMediaFilter } from "./useMediaFilter";
+export { useGalleryFilters } from "./useGalleryFilters";

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

@@ -1,77 +1,64 @@
 /**
  * useCreationsFilter Hook
- * Handles filtering of creations by type
+ * Combines status and media filters to filter creations
+ * SOLID: Combines filters, delegates individual filter logic to separate hooks
  */
 
-import { useState, useMemo, useCallback } from "react";
+import { useMemo } from "react";
 import type { Creation } from "../../domain/entities/Creation";
+import { getCategoryForType } from "../../domain/types/creation-categories";
 
 interface UseCreationsFilterProps {
   readonly creations: Creation[] | undefined;
-  readonly defaultFilterId?: string;
+  readonly statusFilter?: string;
+  readonly mediaFilter?: string;
 }
 
-interface CreationWithTags extends Creation {
-  readonly metadata?: {
-    readonly tags?: string[];
-    readonly [key: string]: unknown;
-  };
+interface UseCreationsFilterReturn {
+  readonly filtered: Creation[];
+  readonly isFiltered: boolean;
+  readonly activeFiltersCount: number;
 }
 
 export function useCreationsFilter({
   creations,
-  defaultFilterId = "all"
-}: UseCreationsFilterProps) {
-  const [selectedIds, setSelectedIds] = useState<string[]>([defaultFilterId]);
+  statusFilter = "all",
+  mediaFilter = "all"
+}: UseCreationsFilterProps): UseCreationsFilterReturn {
 
   const filtered = useMemo(() => {
     if (!creations) return [];
-    if (selectedIds.includes(defaultFilterId)) return creations;
-
-    return creations.filter((c) => {
-      const creation = c as CreationWithTags;
-      return (
-        selectedIds.includes(creation.type) ||
-        selectedIds.some(id => creation.metadata?.tags?.includes(id))
-      );
-    });
-  }, [creations, selectedIds, defaultFilterId]);
 
-  const toggleFilter = useCallback((filterId: string, multiSelect = false) => {
-    setSelectedIds(prev => {
-      // If selecting 'all', clear everything else
-      if (filterId === defaultFilterId) return [defaultFilterId];
+    return creations.filter((creation) => {
+      // Status filter
+      if (statusFilter !== "all" && creation.status !== statusFilter) {
+        return false;
+      }
 
-      let newIds: string[];
-      if (!multiSelect) {
-        // Single select
-        if (prev.includes(filterId) && prev.length === 1) return prev;
-        newIds = [filterId];
-      } else {
-        // Multi select
-        if (prev.includes(filterId)) {
-          newIds = prev.filter(id => id !== filterId);
-        } else {
-          // Remove 'all' if present
-          newIds = [...prev.filter(id => id !== defaultFilterId), filterId];
+      // Media filter
+      if (mediaFilter !== "all") {
+        const category = getCategoryForType(creation.type);
+        if (category !== mediaFilter) {
+          return false;
         }
       }
 
-      // If nothing selected, revert to 'all'
-      if (newIds.length === 0) return [defaultFilterId];
-      return newIds;
+      return true;
     });
-  }, [defaultFilterId]);
+  }, [creations, statusFilter, mediaFilter]);
+
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+    if (statusFilter !== "all") count++;
+    if (mediaFilter !== "all") count++;
+    return count;
+  }, [statusFilter, mediaFilter]);
 
-  const clearFilters = useCallback(() => {
-    setSelectedIds([defaultFilterId]);
-  }, [defaultFilterId]);
+  const isFiltered = statusFilter !== "all" || mediaFilter !== "all";
 
   return {
     filtered,
-    selectedIds,
-    toggleFilter,
-    clearFilters,
-    isFiltered: !selectedIds.includes(defaultFilterId),
+    isFiltered,
+    activeFiltersCount
   };
 }

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

@@ -0,0 +1,78 @@
+/**
+ * useGalleryFilters Hook
+ * Manages all filter state and modals for gallery screen
+ * SOLID: Coordinates filter hooks without business logic
+ */
+
+import { useState, useCallback } from "react";
+import type { Creation } from "../../domain/entities/Creation";
+import type { FilterOption } from "../../domain/types/creation-filter";
+import { useStatusFilter } from "./useStatusFilter";
+import { useMediaFilter } from "./useMediaFilter";
+import { useCreationsFilter } from "./useCreationsFilter";
+
+interface UseGalleryFiltersProps {
+  readonly creations: Creation[] | undefined;
+  readonly statusOptions: FilterOption[];
+  readonly mediaOptions: FilterOption[];
+  readonly t: (key: string) => string;
+}
+
+interface UseGalleryFiltersReturn {
+  readonly filtered: Creation[];
+  readonly isFiltered: boolean;
+  readonly activeFiltersCount: number;
+  readonly statusFilterVisible: boolean;
+  readonly mediaFilterVisible: boolean;
+  readonly statusFilter: ReturnType<typeof useStatusFilter>;
+  readonly mediaFilter: ReturnType<typeof useMediaFilter>;
+  readonly openStatusFilter: () => void;
+  readonly closeStatusFilter: () => void;
+  readonly openMediaFilter: () => void;
+  readonly closeMediaFilter: () => void;
+  readonly clearAllFilters: () => void;
+}
+
+export function useGalleryFilters({
+  creations,
+  statusOptions,
+  mediaOptions,
+  t
+}: UseGalleryFiltersProps): UseGalleryFiltersReturn {
+  const [statusFilterVisible, setStatusFilterVisible] = useState(false);
+  const [mediaFilterVisible, setMediaFilterVisible] = useState(false);
+
+  const statusFilter = useStatusFilter({ options: statusOptions, t });
+  const mediaFilter = useMediaFilter({ options: mediaOptions, t });
+
+  const { filtered, isFiltered, activeFiltersCount } = useCreationsFilter({
+    creations,
+    statusFilter: statusFilter.selectedId,
+    mediaFilter: mediaFilter.selectedId
+  });
+
+  const openStatusFilter = useCallback(() => setStatusFilterVisible(true), []);
+  const closeStatusFilter = useCallback(() => setStatusFilterVisible(false), []);
+  const openMediaFilter = useCallback(() => setMediaFilterVisible(true), []);
+  const closeMediaFilter = useCallback(() => setMediaFilterVisible(false), []);
+
+  const clearAllFilters = useCallback(() => {
+    statusFilter.clearFilter();
+    mediaFilter.clearFilter();
+  }, [statusFilter, mediaFilter]);
+
+  return {
+    filtered,
+    isFiltered,
+    activeFiltersCount,
+    statusFilterVisible,
+    mediaFilterVisible,
+    statusFilter,
+    mediaFilter,
+    openStatusFilter,
+    closeStatusFilter,
+    openMediaFilter,
+    closeMediaFilter,
+    clearAllFilters
+  };
+}

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

@@ -0,0 +1,54 @@
+/**
+ * useMediaFilter Hook
+ * Handles media type filtering (image, video, voice)
+ * SOLID: Single Responsibility - Only handles media filter state
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type { FilterOption } from "../../domain/types/creation-filter";
+
+interface UseMediaFilterProps {
+  readonly options: FilterOption[];
+  readonly t: (key: string) => string;
+  readonly defaultId?: string;
+}
+
+interface UseMediaFilterReturn {
+  readonly selectedId: string;
+  readonly filterOptions: FilterOption[];
+  readonly hasActiveFilter: boolean;
+  readonly selectFilter: (id: string) => void;
+  readonly clearFilter: () => void;
+}
+
+export function useMediaFilter({
+  options,
+  t,
+  defaultId = "all"
+}: UseMediaFilterProps): UseMediaFilterReturn {
+  const [selectedId, setSelectedId] = useState(defaultId);
+
+  const filterOptions = useMemo(() =>
+    options.map(opt => ({
+      ...opt,
+      label: opt.labelKey ? t(opt.labelKey) : opt.label
+    })),
+    [options, t]
+  );
+
+  const selectFilter = useCallback((id: string) => {
+    setSelectedId(id);
+  }, []);
+
+  const clearFilter = useCallback(() => {
+    setSelectedId(defaultId);
+  }, [defaultId]);
+
+  return {
+    selectedId,
+    filterOptions,
+    hasActiveFilter: selectedId !== defaultId,
+    selectFilter,
+    clearFilter
+  };
+}

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

@@ -0,0 +1,54 @@
+/**
+ * useStatusFilter Hook
+ * Handles status filtering (completed, pending, processing, failed)
+ * SOLID: Single Responsibility - Only handles status filter state
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type { FilterOption } from "../../domain/types/creation-filter";
+
+interface UseStatusFilterProps {
+  readonly options: FilterOption[];
+  readonly t: (key: string) => string;
+  readonly defaultId?: string;
+}
+
+interface UseStatusFilterReturn {
+  readonly selectedId: string;
+  readonly filterOptions: FilterOption[];
+  readonly hasActiveFilter: boolean;
+  readonly selectFilter: (id: string) => void;
+  readonly clearFilter: () => void;
+}
+
+export function useStatusFilter({
+  options,
+  t,
+  defaultId = "all"
+}: UseStatusFilterProps): UseStatusFilterReturn {
+  const [selectedId, setSelectedId] = useState(defaultId);
+
+  const filterOptions = useMemo(() =>
+    options.map(opt => ({
+      ...opt,
+      label: opt.labelKey ? t(opt.labelKey) : opt.label
+    })),
+    [options, t]
+  );
+
+  const selectFilter = useCallback((id: string) => {
+    setSelectedId(id);
+  }, []);
+
+  const clearFilter = useCallback(() => {
+    setSelectedId(defaultId);
+  }, [defaultId]);
+
+  return {
+    selectedId,
+    filterOptions,
+    hasActiveFilter: selectedId !== defaultId,
+    selectFilter,
+    clearFilter
+  };
+}