@umituz/react-native-ai-generation-content 1.17.0 → 1.17.1

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

@@ -0,0 +1,254 @@
+/**
+ * CreationsFilterBar Component
+ * Filter buttons with dropdown-style appearance
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
+import {
+  useAppDesignTokens,
+  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;
+}
+
+export function CreationsFilterBar({
+  filters,
+  showClearButton = true,
+  clearLabel = "Clear",
+  onClear,
+  hasActiveFilters = false,
+}: CreationsFilterBarProps) {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginTop: 8,
+        },
+        scrollContent: {
+          paddingHorizontal: 16,
+          gap: 8,
+          flexDirection: "row",
+        },
+        filterButton: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderRadius: 20,
+          minHeight: 36,
+          gap: 6,
+        },
+        filterButtonActive: {
+          backgroundColor: tokens.colors.primary + "15",
+          borderWidth: 1,
+          borderColor: tokens.colors.primary,
+        },
+        filterButtonInactive: {
+          backgroundColor: tokens.colors.backgroundSecondary,
+        },
+        filterText: {
+          fontSize: 14,
+        },
+        clearButton: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderRadius: 20,
+          borderWidth: 1,
+          borderColor: tokens.colors.primary,
+          minHeight: 36,
+        },
+        clearText: {
+          marginLeft: 4,
+        },
+      }),
+    [tokens]
+  );
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {filters.map((filter) => (
+          <TouchableOpacity
+            key={filter.id}
+            style={[
+              styles.filterButton,
+              filter.active
+                ? styles.filterButtonActive
+                : styles.filterButtonInactive,
+            ]}
+            onPress={filter.onPress}
+          >
+            {filter.icon && (
+              <AtomicIcon
+                name={filter.icon}
+                size="sm"
+                color={filter.active ? "primary" : "secondary"}
+              />
+            )}
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.filterText,
+                {
+                  color: filter.active
+                    ? tokens.colors.primary
+                    : tokens.colors.textPrimary,
+                  fontWeight: filter.active ? "600" : "400",
+                },
+              ]}
+            >
+              {filter.label}
+            </AtomicText>
+            <AtomicIcon
+              name="chevron-down"
+              size="xs"
+              color={filter.active ? "primary" : "secondary"}
+            />
+          </TouchableOpacity>
+        ))}
+
+        {showClearButton && hasActiveFilters && onClear && (
+          <TouchableOpacity style={styles.clearButton} onPress={onClear}>
+            <AtomicIcon name="close" size="sm" color="primary" />
+            <AtomicText
+              type="bodySmall"
+              style={[styles.clearText, { color: tokens.colors.primary }]}
+            >
+              {clearLabel}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+/**
+ * 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"),
+    },
+  ];
+}

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

@@ -1,77 +1,130 @@
-import React from 'react';
-import { FlatList, RefreshControl, StyleSheet, type ViewStyle } from 'react-native';
-import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-import type { Creation } from "../../domain/entities/Creation";
-import { CreationCard } from "./CreationCard";
+/**
+ * CreationsGrid Component
+ * Grid/list of creation cards with refresh support
+ */
 
-interface CreationsGridProps {
-    readonly creations: Creation[];
-    readonly isLoading: boolean;
-    readonly onRefresh: () => void;
-    readonly onView: (creation: Creation) => void;
-    readonly onShare: (creation: Creation) => void;
-    readonly onDelete: (creation: Creation) => void;
-    readonly onFavorite?: (creation: Creation, isFavorite: boolean) => void;
-    readonly locale?: string;
-    readonly contentContainerStyle?: ViewStyle;
-    readonly ListEmptyComponent?: React.ReactElement | null;
-    readonly ListHeaderComponent?: React.ComponentType<unknown> | React.ReactElement | null;
+import React, { useCallback } from "react";
+import {
+  FlatList,
+  RefreshControl,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
+import {
+  useAppDesignTokens,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { CreationCard, type CreationCardData } from "./CreationCard";
+
+interface CreationsGridProps<T extends CreationCardData> {
+  /** Array of creations to display */
+  readonly creations: T[];
+  /** Loading state for refresh indicator */
+  readonly isLoading: boolean;
+  /** Pull to refresh handler */
+  readonly onRefresh: () => void;
+  /** Press handler */
+  readonly onPress?: (creation: T) => void;
+  /** Download handler */
+  readonly onDownload?: (creation: T) => Promise<void>;
+  /** Share handler */
+  readonly onShare?: (creation: T) => Promise<void>;
+  /** Delete handler */
+  readonly onDelete?: (creation: T) => void;
+  /** Favorite handler */
+  readonly onFavorite?: (creation: T) => void;
+  /** Post to feed handler */
+  readonly onPostToFeed?: (creation: T) => void;
+  /** Date formatter */
+  readonly formatDate?: (date: Date) => string;
+  /** Can post to feed */
+  readonly canPostToFeed?: boolean;
+  /** Content container style */
+  readonly contentContainerStyle?: ViewStyle;
+  /** Empty state component */
+  readonly ListEmptyComponent?: React.ReactElement | null;
+  /** Header component */
+  readonly ListHeaderComponent?:
+    | React.ComponentType<unknown>
+    | React.ReactElement
+    | null;
 }
 
-export const CreationsGrid: React.FC<CreationsGridProps> = ({
-    creations,
-    isLoading,
-    onRefresh,
-    onView,
-    onShare,
-    onDelete,
-    onFavorite,
-    locale,
-    contentContainerStyle,
-    ListEmptyComponent,
-    ListHeaderComponent,
-}) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
+export function CreationsGrid<T extends CreationCardData>({
+  creations,
+  isLoading,
+  onRefresh,
+  onPress,
+  onDownload,
+  onShare,
+  onDelete,
+  onFavorite,
+  onPostToFeed,
+  formatDate,
+  canPostToFeed = false,
+  contentContainerStyle,
+  ListEmptyComponent,
+  ListHeaderComponent,
+}: CreationsGridProps<T>) {
+  const tokens = useAppDesignTokens();
+  const styles = useStyles(tokens);
 
-    const renderItem = ({ item }: { item: Creation }) => (
-        <CreationCard
-            creation={item}
-            onView={() => onView(item)}
-            onShare={() => onShare(item)}
-            onDelete={() => onDelete(item)}
-            onFavorite={onFavorite ? (creation, isFavorite) => onFavorite(creation, isFavorite) : undefined}
-            locale={locale}
-        />
-    );
+  const renderItem = useCallback(
+    ({ item }: { item: T }) => (
+      <CreationCard
+        creation={item}
+        callbacks={{
+          onPress: onPress ? () => onPress(item) : undefined,
+          onDownload: onDownload ? () => onDownload(item) : undefined,
+          onShare: onShare ? () => onShare(item) : undefined,
+          onDelete: onDelete ? () => onDelete(item) : undefined,
+          onFavorite: onFavorite ? () => onFavorite(item) : undefined,
+          onPostToFeed: onPostToFeed ? () => onPostToFeed(item) : undefined,
+        }}
+        formatDate={formatDate}
+        canPostToFeed={canPostToFeed}
+      />
+    ),
+    [
+      onPress,
+      onDownload,
+      onShare,
+      onDelete,
+      onFavorite,
+      onPostToFeed,
+      formatDate,
+      canPostToFeed,
+    ]
+  );
 
-    return (
-        <FlatList
-            data={creations}
-            renderItem={renderItem}
-            keyExtractor={(item) => item.id}
-            ListHeaderComponent={ListHeaderComponent}
-            ListEmptyComponent={ListEmptyComponent}
-            contentContainerStyle={[
-                styles.list,
-                contentContainerStyle,
-                (!creations || creations.length === 0) && { flexGrow: 1 }
-            ]}
-            showsVerticalScrollIndicator={false}
-            refreshControl={
-                <RefreshControl
-                    refreshing={isLoading}
-                    onRefresh={onRefresh}
-                    tintColor={tokens.colors.primary}
-                />
-            }
+  return (
+    <FlatList
+      data={creations}
+      renderItem={renderItem}
+      keyExtractor={(item) => item.id}
+      ListHeaderComponent={ListHeaderComponent}
+      ListEmptyComponent={ListEmptyComponent}
+      contentContainerStyle={[
+        styles.list,
+        contentContainerStyle,
+        (!creations || creations.length === 0) && { flexGrow: 1 },
+      ]}
+      showsVerticalScrollIndicator={false}
+      refreshControl={
+        <RefreshControl
+          refreshing={isLoading}
+          onRefresh={onRefresh}
+          tintColor={tokens.colors.primary}
         />
-    );
-};
+      }
+    />
+  );
+}
 
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
+const useStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
     list: {
-        padding: tokens.spacing.md,
-        paddingBottom: 100, // Space for fab or bottom tab
+      padding: tokens.spacing.md,
+      paddingBottom: 100,
     },
-});
+  });

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

@@ -2,15 +2,35 @@
  * Presentation Components
  */
 
+// Core Components
+export { CreationPreview } from "./CreationPreview";
+export { CreationBadges } from "./CreationBadges";
+export { CreationActions, type CreationAction } from "./CreationActions";
+export {
+  CreationCard,
+  type CreationCardData,
+  type CreationCardCallbacks,
+} from "./CreationCard";
+export { CreationThumbnail } from "./CreationThumbnail";
+
+// Filter Components
+export { FilterChips } from "./FilterChips";
+export {
+  CreationsFilterBar,
+  createMediaFilterButtons,
+  createStatusFilterButtons,
+  type FilterButton,
+} from "./CreationsFilterBar";
+
+// Gallery Components
 export { GalleryHeader } from "./GalleryHeader";
 export { EmptyState } from "./EmptyState";
 export { GalleryEmptyStates } from "./GalleryEmptyStates";
-export { FilterChips } from "./FilterChips";
 export { CreationsHomeCard } from "./CreationsHomeCard";
-export { CreationCard } from "./CreationCard";
-export { CreationThumbnail } from "./CreationThumbnail";
 export { CreationImageViewer } from "./CreationImageViewer";
 export { CreationsGrid } from "./CreationsGrid";
+
+// Provider
 export { CreationsProvider, useCreationsProvider } from "./CreationsProvider";
 
 // Detail Components

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

@@ -5,3 +5,4 @@
 export { useCreations } from "./useCreations";
 export { useDeleteCreation } from "./useDeleteCreation";
 export { useCreationsFilter } from "./useCreationsFilter";
+export { useAdvancedFilter } from "./useAdvancedFilter";