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

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
+  };
+}

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,5 +1,3 @@
-declare const __DEV__: boolean;
-
 import React, { useMemo, useCallback, useState } from "react";
 import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -9,21 +7,14 @@ import {
   AlertType,
   AlertMode,
   useSharing,
-  FilterBottomSheet,
-  type BottomSheetModalRef,
-  type DesignTokens,
+  FilterSheet,
 } from "@umituz/react-native-design-system";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
-import { useCreationsFilter } from "../hooks/useCreationsFilter";
-import {
-  GalleryHeader,
-  CreationCard,
-  CreationImageViewer,
-  GalleryEmptyStates,
-} from "../components";
-import { getFilterCategoriesFromConfig } from "../utils/filterUtils";
+import { useGalleryFilters } from "../hooks/useGalleryFilters";
+import { GalleryHeader, CreationCard, CreationImageViewer, GalleryEmptyStates } from "../components";
+import { MEDIA_FILTER_OPTIONS, STATUS_FILTER_OPTIONS } from "../../domain/types/creation-filter";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
@@ -56,7 +47,6 @@ function CreationsGalleryScreenContent({
   repository,
   config,
   t,
-  locale: _locale = "en-US",
   enableEditing = false,
   onImageEdit,
   onEmptyAction,
@@ -71,199 +61,134 @@ function CreationsGalleryScreenContent({
   const [viewerVisible, setViewerVisible] = useState(false);
   const [viewerIndex, setViewerIndex] = useState(0);
   const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
-  const filterSheetRef = React.useRef<BottomSheetModalRef>(null);
 
-  const { data: creationsData, isLoading, refetch } = useCreations({ userId, repository });
-  const creations = creationsData;
+  const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
   const deleteMutation = useDeleteCreation({ userId, repository });
-  const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
 
-  useFocusEffect(
-    useCallback(() => {
-      void refetch();
-    }, [refetch])
-  );
+  const statusOptions = config.filterConfig?.statusOptions ?? STATUS_FILTER_OPTIONS;
+  const mediaOptions = config.filterConfig?.mediaOptions ?? MEDIA_FILTER_OPTIONS;
+  const showStatusFilter = config.filterConfig?.showStatusFilter ?? true;
+  const showMediaFilter = config.filterConfig?.showMediaFilter ?? true;
 
-  const allCategories = useMemo(
-    () => getFilterCategoriesFromConfig(config, t),
-    [config, t],
-  );
+  const filters = useGalleryFilters({ creations, statusOptions, mediaOptions, t });
+
+  useFocusEffect(useCallback(() => { void refetch(); }, [refetch]));
 
-  const handleShare = useCallback((creation: Creation) => {
-    void share(creation.uri, { dialogTitle: t("common.share") });
+  const handleShare = useCallback((c: Creation) => {
+    void share(c.uri, { dialogTitle: t("common.share") });
   }, [share, t]);
 
-  const handleDelete = useCallback((creation: Creation) => {
-    alert.show(
-      AlertType.WARNING,
-      AlertMode.MODAL,
-      t(config.translations.deleteTitle),
-      t(config.translations.deleteMessage),
-      {
-        actions: [
-          { id: 'cancel', label: t("common.cancel"), onPress: () => { } },
-          {
-            id: 'delete',
-            label: t("common.delete"),
-            style: 'destructive',
-            onPress: async () => {
-              const success = await deleteMutation.mutateAsync(creation.id);
-              if (success) {
-                setSelectedCreation(null);
-              }
-            }
-          }
-        ]
-      }
-    );
+  const handleDelete = useCallback((c: Creation) => {
+    alert.show(AlertType.WARNING, AlertMode.MODAL, t(config.translations.deleteTitle), t(config.translations.deleteMessage), {
+      actions: [
+        { id: "cancel", label: t("common.cancel"), onPress: () => {} },
+        { id: "delete", label: t("common.delete"), style: "destructive", onPress: async () => {
+          const success = await deleteMutation.mutateAsync(c.id);
+          if (success) setSelectedCreation(null);
+        }}
+      ]
+    });
   }, [alert, config, deleteMutation, t]);
 
-  const handleView = useCallback((creation: Creation) => {
-    setSelectedCreation(creation);
-  }, []);
-
-  const handleFavorite = useCallback((creation: Creation, isFavorite: boolean) => {
+  const handleFavorite = useCallback((c: Creation, isFavorite: boolean) => {
     void (async () => {
       if (!userId) return;
-      const success = await repository.updateFavorite(userId, creation.id, isFavorite);
-      if (success) {
-        void refetch();
-      }
+      const success = await repository.updateFavorite(userId, c.id, isFavorite);
+      if (success) void refetch();
     })();
   }, [userId, repository, refetch]);
 
-  const styles = useStyles(tokens, insets);
-
-  const renderItem = useCallback(
-    ({ item }: { item: Creation }) => (
-      <CreationCard
-        creation={item}
-        callbacks={{
-          onPress: () => handleView(item),
-          onShare: async () => handleShare(item),
-          onDelete: () => handleDelete(item),
-          onFavorite: () => handleFavorite(item, !item.isFavorite),
-        }}
-      />
-    ),
-    [handleView, handleShare, handleDelete, handleFavorite]
-  );
+  const filterButtons = useMemo(() => {
+    const buttons = [];
+    if (showStatusFilter) {
+      buttons.push({
+        id: "status",
+        label: t(config.translations.statusFilterTitle ?? "creations.filter.status"),
+        icon: "list-outline",
+        isActive: filters.statusFilter.hasActiveFilter,
+        onPress: filters.openStatusFilter,
+      });
+    }
+    if (showMediaFilter) {
+      buttons.push({
+        id: "media",
+        label: t(config.translations.mediaFilterTitle ?? "creations.filter.media"),
+        icon: "grid-outline",
+        isActive: filters.mediaFilter.hasActiveFilter,
+        onPress: filters.openMediaFilter,
+      });
+    }
+    return buttons;
+  }, [showStatusFilter, showMediaFilter, filters, t, config.translations]);
+
+  const renderItem = useCallback(({ item }: { item: Creation }) => (
+    <CreationCard
+      creation={item}
+      callbacks={{
+        onPress: () => setSelectedCreation(item),
+        onShare: async () => handleShare(item),
+        onDelete: () => handleDelete(item),
+        onFavorite: () => handleFavorite(item, !item.isFavorite),
+      }}
+    />
+  ), [handleShare, handleDelete, handleFavorite]);
 
   const renderHeader = useMemo(() => {
     if ((!creations || creations.length === 0) && !isLoading) return null;
-
     return (
-      <View style={styles.header}>
+      <View style={[styles.header, { paddingTop: insets.top + tokens.spacing.md, backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
         <GalleryHeader
           title={t(config.translations.title)}
-          count={filtered.length}
+          count={filters.filtered.length}
           countLabel={t(config.translations.photoCount)}
-          isFiltered={isFiltered}
           showFilter={showFilter}
-          filterLabel={t(config.translations.filterLabel)}
-          onFilterPress={() => {
-            if (__DEV__) {
-              // eslint-disable-next-line no-console
-              console.log('[CreationsGallery] Filter button pressed');
-            }
-            filterSheetRef.current?.present();
-          }}
+          filterButtons={filterButtons}
         />
       </View>
     );
-  }, [creations, isLoading, filtered.length, isFiltered, showFilter, t, config, styles.header]);
+  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, insets.top, tokens]);
 
   const renderEmpty = useMemo(() => (
     <GalleryEmptyStates
       isLoading={isLoading}
       creations={creations}
-      isFiltered={isFiltered}
+      isFiltered={filters.isFiltered}
       tokens={tokens}
       t={t}
       emptyTitle={t(config.translations.empty)}
       emptyDescription={t(config.translations.emptyDescription)}
       emptyActionLabel={emptyActionLabel}
       onEmptyAction={onEmptyAction}
-      onClearFilters={clearFilters}
+      onClearFilters={filters.clearAllFilters}
     />
-  ), [isLoading, creations, isFiltered, tokens, t, config, emptyActionLabel, onEmptyAction, clearFilters]);
+  ), [isLoading, creations, filters.isFiltered, tokens, t, config, emptyActionLabel, onEmptyAction, filters.clearAllFilters]);
 
   if (selectedCreation) {
-    return (
-      <CreationDetailScreen
-        creation={selectedCreation}
-        onClose={() => setSelectedCreation(null)}
-        onShare={handleShare}
-        onDelete={handleDelete}
-        t={t}
-      />
-    );
+    return <CreationDetailScreen creation={selectedCreation} onClose={() => setSelectedCreation(null)} onShare={handleShare} onDelete={handleDelete} t={t} />;
   }
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
       <FlatList
-        data={filtered}
+        data={filters.filtered}
         renderItem={renderItem}
         keyExtractor={(item) => item.id}
         ListHeaderComponent={renderHeader}
         ListEmptyComponent={renderEmpty}
-        contentContainerStyle={[
-          styles.listContent,
-          (!filtered || filtered.length === 0) && styles.emptyContent,
-        ]}
+        contentContainerStyle={[styles.listContent, { paddingBottom: insets.bottom + 100 }, (!filters.filtered || filters.filtered.length === 0) && styles.emptyContent]}
         showsVerticalScrollIndicator={false}
-        refreshControl={
-          <RefreshControl
-            refreshing={isLoading}
-            onRefresh={() => void refetch()}
-            tintColor={tokens.colors.primary}
-          />
-        }
-      />
-
-      <CreationImageViewer
-        creations={filtered}
-        visible={viewerVisible}
-        index={viewerIndex}
-        onDismiss={() => setViewerVisible(false)}
-        onIndexChange={setViewerIndex}
-        enableEditing={enableEditing}
-        onImageEdit={onImageEdit}
-      />
-
-      <FilterBottomSheet
-        ref={filterSheetRef}
-        categories={allCategories}
-        selectedIds={selectedIds}
-        onFilterPress={(id, catId) => {
-          const category = allCategories.find(c => c.id === catId);
-          toggleFilter(id, category?.multiSelect);
-        }}
-        onClearFilters={clearFilters}
-        title={t(config.translations.filterTitle)}
+        refreshControl={<RefreshControl refreshing={isLoading} onRefresh={() => void refetch()} tintColor={tokens.colors.primary} />}
       />
+      <CreationImageViewer creations={filters.filtered} visible={viewerVisible} index={viewerIndex} onDismiss={() => setViewerVisible(false)} onIndexChange={setViewerIndex} enableEditing={enableEditing} onImageEdit={onImageEdit} />
+      <FilterSheet visible={filters.statusFilterVisible} onClose={filters.closeStatusFilter} options={filters.statusFilter.filterOptions} selectedIds={[filters.statusFilter.selectedId]} onFilterPress={filters.statusFilter.selectFilter} onClearFilters={filters.statusFilter.clearFilter} title={t(config.translations.statusFilterTitle ?? "creations.filter.status")} clearLabel={t(config.translations.clearFilter ?? "common.clear")} />
+      <FilterSheet visible={filters.mediaFilterVisible} onClose={filters.closeMediaFilter} options={filters.mediaFilter.filterOptions} selectedIds={[filters.mediaFilter.selectedId]} onFilterPress={filters.mediaFilter.selectFilter} onClearFilters={filters.mediaFilter.clearFilter} title={t(config.translations.mediaFilterTitle ?? "creations.filter.media")} clearLabel={t(config.translations.clearFilter ?? "common.clear")} />
     </View>
   );
 }
 
-const useStyles = (tokens: DesignTokens, insets: { top: number; bottom: number }) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    header: {
-      paddingTop: insets.top + tokens.spacing.md,
-      backgroundColor: tokens.colors.surface,
-      borderBottomWidth: 1,
-      borderBottomColor: tokens.colors.border,
-    },
-    listContent: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingTop: tokens.spacing.md,
-      paddingBottom: insets.bottom + 100,
-    },
-    emptyContent: {
-      flexGrow: 1,
-    },
-  });
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: { borderBottomWidth: 1 },
+  listContent: { paddingHorizontal: 16, paddingTop: 16 },
+  emptyContent: { flexGrow: 1 },
+});

package/src/features/image-to-video/index.ts

@@ -3,11 +3,39 @@
  * Provider-agnostic image-to-video generation feature
  */
 
-// Domain Types
+// =============================================================================
+// DOMAIN LAYER - Types
+// =============================================================================
+
+// Animation Types
+export type { AnimationStyle, AnimationStyleId } from "./domain";
+
+// Music Types
+export type { MusicMood, MusicMoodId } from "./domain";
+
+// Duration Types
+export type { VideoDuration, DurationOption } from "./domain";
+
+// Form Types
+export type {
+  ImageToVideoFormState,
+  ImageToVideoFormActions,
+  ImageToVideoFormDefaults,
+} from "./domain";
+
+// Config Types
+export type {
+  ImageToVideoCallbacks,
+  ImageToVideoFormConfig,
+  ImageToVideoTranslationsExtended,
+} from "./domain";
+
+// Core Feature Types
 export type {
   ImageToVideoOptions,
   ImageToVideoRequest,
   ImageToVideoResult,
+  ImageToVideoGenerationState,
   ImageToVideoFeatureState,
   ImageToVideoTranslations,
   ImageToVideoInputBuilder,
@@ -15,13 +43,72 @@ export type {
   ImageToVideoFeatureConfig,
 } from "./domain";
 
-// Infrastructure Services
+// =============================================================================
+// DOMAIN LAYER - Constants
+// =============================================================================
+
+export {
+  DEFAULT_ANIMATION_STYLES as IMAGE_TO_VIDEO_ANIMATION_STYLES,
+  DEFAULT_ANIMATION_STYLE_ID as IMAGE_TO_VIDEO_DEFAULT_ANIMATION,
+  DEFAULT_MUSIC_MOODS as IMAGE_TO_VIDEO_MUSIC_MOODS,
+  DEFAULT_MUSIC_MOOD_ID as IMAGE_TO_VIDEO_DEFAULT_MUSIC,
+  DEFAULT_DURATION_OPTIONS as IMAGE_TO_VIDEO_DURATION_OPTIONS,
+  DEFAULT_VIDEO_DURATION as IMAGE_TO_VIDEO_DEFAULT_DURATION,
+  DEFAULT_FORM_VALUES as IMAGE_TO_VIDEO_FORM_DEFAULTS,
+  DEFAULT_FORM_CONFIG as IMAGE_TO_VIDEO_CONFIG,
+} from "./domain";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER
+// =============================================================================
+
 export { executeImageToVideo, hasImageToVideoSupport } from "./infrastructure";
 export type { ExecuteImageToVideoOptions } from "./infrastructure";
 
-// Presentation Hooks
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export {
+  useImageToVideoFormState,
+  useImageToVideoGeneration,
+  useImageToVideoForm,
+} from "./presentation";
+export type {
+  UseImageToVideoFormStateOptions,
+  UseImageToVideoFormStateReturn,
+  UseImageToVideoGenerationOptions,
+  UseImageToVideoGenerationReturn,
+  UseImageToVideoFormOptions,
+  UseImageToVideoFormReturn,
+} from "./presentation";
+
+// Provider-based Feature Hook
 export { useImageToVideoFeature } from "./presentation";
 export type {
   UseImageToVideoFeatureProps,
   UseImageToVideoFeatureReturn,
 } from "./presentation";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export {
+  ImageToVideoAnimationStyleSelector,
+  ImageToVideoDurationSelector,
+  ImageToVideoMusicMoodSelector,
+  ImageToVideoSelectionGrid,
+  ImageToVideoHeroSection,
+  ImageToVideoGenerateButton,
+} from "./presentation";
+
+export type {
+  ImageToVideoAnimationStyleSelectorProps,
+  ImageToVideoDurationSelectorProps,
+  ImageToVideoMusicMoodSelectorProps,
+  ImageToVideoSelectionGridProps,
+  ImageToVideoSelectionGridTranslations,
+  ImageToVideoHeroSectionProps,
+  ImageToVideoGenerateButtonProps,
+} from "./presentation";

package/src/features/image-to-video/presentation/components/AnimationStyleSelector.tsx

@@ -0,0 +1,135 @@
+/**
+ * Animation Style Selector Component
+ * Generic component for animation style selection
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { AnimationStyle, AnimationStyleId } from "../../domain/types";
+
+export interface AnimationStyleSelectorProps {
+  styles: AnimationStyle[];
+  selectedStyle: AnimationStyleId;
+  onStyleSelect: (styleId: AnimationStyleId) => void;
+  label: string;
+}
+
+export const AnimationStyleSelector: React.FC<AnimationStyleSelectorProps> = ({
+  styles,
+  selectedStyle,
+  onStyleSelect,
+  label,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      {styles.map((style) => {
+        const isSelected = selectedStyle === style.id;
+        return (
+          <TouchableOpacity
+            key={style.id}
+            style={[
+              componentStyles.card,
+              {
+                backgroundColor: isSelected
+                  ? tokens.colors.primary + "20"
+                  : tokens.colors.surface,
+                borderColor: isSelected
+                  ? tokens.colors.primary
+                  : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onStyleSelect(style.id)}
+            activeOpacity={0.7}
+          >
+            <View style={componentStyles.cardContent}>
+              <View
+                style={[
+                  componentStyles.iconContainer,
+                  {
+                    backgroundColor: isSelected
+                      ? tokens.colors.primary
+                      : tokens.colors.primary + "20",
+                  },
+                ]}
+              >
+                <AtomicIcon
+                  name={style.icon as never}
+                  size="md"
+                  color={isSelected ? "onSurface" : "primary"}
+                />
+              </View>
+              <View style={componentStyles.textContainer}>
+                <AtomicText
+                  type="bodyMedium"
+                  style={[
+                    componentStyles.styleName,
+                    { color: tokens.colors.textPrimary },
+                  ]}
+                >
+                  {style.name}
+                </AtomicText>
+                <AtomicText
+                  type="labelSmall"
+                  style={{ color: tokens.colors.textSecondary }}
+                >
+                  {style.description}
+                </AtomicText>
+              </View>
+              {isSelected && (
+                <AtomicIcon name="Check" size="md" color="primary" />
+              )}
+            </View>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+    marginBottom: 12,
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  textContainer: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  styleName: {
+    fontWeight: "600",
+  },
+});