@umituz/react-native-ai-creations 1.2.8 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -27,32 +27,31 @@
     "type": "git",
     "url": "https://github.com/umituz/react-native-ai-creations"
   },
+  "dependencies": {
+    "@umituz/react-native-filter": "latest",
+    "@umituz/react-native-image": "latest",
+    "@umituz/react-native-bottom-sheet": "latest"
+  },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-firestore": "latest",
-    "@umituz/react-native-image": "latest",
     "@umituz/react-native-sharing": "latest",
     "firebase": ">=11.0.0",
     "react": ">=19.1.0",
     "react-native": ">=0.81.5",
-    "react-native-safe-area-context": ">=5.0.0",
-    "@umituz/react-native-filter": "latest",
-    "@umituz/react-native-bottom-sheet": "latest"
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.62.16",
     "@types/react": "^19.0.0",
     "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-image": "latest",
     "@umituz/react-native-sharing": "latest",
     "@umituz/react-native-firestore": "latest",
     "firebase": "^11.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "^5.6.0",
-    "@umituz/react-native-filter": "latest",
-    "@umituz/react-native-bottom-sheet": "latest",
     "typescript": "^5.3.3"
   },
   "publishConfig": {

package/src/presentation/components/GalleryHeader.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface GalleryHeaderProps {
+    readonly title: string;
+    readonly count: number;
+    readonly countLabel: string;
+    readonly isFiltered: boolean;
+    readonly onFilterPress: () => void;
+}
+
+export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
+    title,
+    count,
+    countLabel,
+    isFiltered,
+    onFilterPress
+}) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    return (
+        <View style={styles.headerArea}>
+            <View>
+                <AtomicText style={styles.title}>{title}</AtomicText>
+                <AtomicText style={styles.subtitle}>
+                    {count} {countLabel}
+                </AtomicText>
+            </View>
+            <TouchableOpacity
+                onPress={onFilterPress}
+                style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
+            >
+                <AtomicIcon
+                    name="ListFilter"
+                    size="sm"
+                    color={isFiltered ? "primary" : "secondary"}
+                />
+                <AtomicText style={[styles.filterText, { color: isFiltered ? tokens.colors.primary : tokens.colors.textSecondary }]}>
+                    Filter
+                </AtomicText>
+                {isFiltered && (
+                    <View style={styles.badge} />
+                )}
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const useStyles = (tokens: any) => StyleSheet.create({
+    headerArea: {
+        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,
+    },
+    subtitle: {
+        fontSize: 14,
+        color: tokens.colors.textSecondary,
+        opacity: 0.6
+    },
+    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',
+    },
+    filterButtonActive: {
+        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,
+    },
+});

package/src/presentation/hooks/useCreationsFilter.ts

@@ -8,10 +8,6 @@ import type { Creation } from "../../domain/entities/Creation";
 
 const ALL_FILTER = "all";
 
-interface UseCreationsFilterProps {
-  readonly creations: Creation[] | undefined;
-}
-
 import { FilterUtils } from "@umituz/react-native-filter";
 
 interface UseCreationsFilterProps {

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -20,6 +20,7 @@ import { EmptyState } from "../components/EmptyState";
 import { FilterBottomSheet, type FilterCategory } from "@umituz/react-native-filter";
 import { BottomSheetModalRef } from "@umituz/react-native-bottom-sheet";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { GalleryHeader } from "../components/GalleryHeader";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -60,13 +61,13 @@ export function CreationsGalleryScreen({
     // Add dynamic types category if types exist
     if (config.types.length > 0) {
       categories.push({
-        id: 'type', // This ID matches logic in useFilter? No, filter logic is flat ID based. 'type' is category ID.
+        id: 'type',
         title: t('creations.category') || 'Category',
         multiSelect: false,
         options: config.types.map(t => ({
           id: t.id,
-          label: t.labelKey, // In a real app we'd translate this, but for now passing key or mocked
-          icon: 'Image', // Default icon since types have emojis which might not work with AtomicIcon
+          label: t.labelKey,
+          icon: 'Image',
         }))
       });
     }
@@ -138,38 +139,6 @@ export function CreationsGalleryScreen({
           flex: 1,
           backgroundColor: tokens.colors.backgroundPrimary,
         },
-        headerArea: {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: 'space-between',
-          paddingHorizontal: tokens.spacing.md,
-          paddingVertical: tokens.spacing.sm,
-          marginBottom: tokens.spacing.sm,
-        },
-        filterButton: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: tokens.spacing.xs,
-          paddingVertical: tokens.spacing.xs,
-          paddingHorizontal: tokens.spacing.md,
-          borderRadius: (tokens as any).borders?.radius?.full || 999,
-          backgroundColor: tokens.colors.surfaceVariant,
-          borderWidth: 1,
-          borderColor: 'transparent',
-        },
-        filterButtonActive: {
-          backgroundColor: tokens.colors.primary + "15",
-          borderColor: tokens.colors.primary + "30",
-        },
-        badge: {
-          width: 8,
-          height: 8,
-          borderRadius: 4,
-          backgroundColor: tokens.colors.primary,
-          position: 'absolute',
-          top: 6,
-          right: 6,
-        },
         list: {
           paddingHorizontal: tokens.spacing.md,
           paddingBottom: insets.bottom + tokens.spacing.xl,
@@ -210,22 +179,14 @@ export function CreationsGalleryScreen({
 
   return (
     <View style={styles.container}>
-      <View style={styles.headerArea}>
-        <View>
-          <AtomicText type="headlineSmall">{t(config.translations.title) || 'My Creations'}</AtomicText>
-          <AtomicText type="bodySmall" style={{ opacity: 0.6 }}>{filtered.length} {t(config.translations.photoCount) || 'photos'}</AtomicText>
-        </View>
-        <TouchableOpacity
-          onPress={() => filterSheetRef.current?.present()}
-          style={[styles.filterButton, isFiltered && styles.filterButtonActive]}
-        >
-          <AtomicIcon name="ListFilter" size="sm" color={isFiltered ? "primary" : "secondary"} />
-          <AtomicText type="labelMedium" color={isFiltered ? "primary" : "secondary"}>Filter</AtomicText>
-          {isFiltered && (
-            <View style={styles.badge} />
-          )}
-        </TouchableOpacity>
-      </View>
+      <GalleryHeader
+        title={t(config.translations.title) || 'My Creations'}
+        count={filtered.length}
+        countLabel={t(config.translations.photoCount) || 'photos'}
+        isFiltered={isFiltered}
+        onFilterPress={() => filterSheetRef.current?.present()}
+      />
+
       <FlatList
         data={filtered}
         renderItem={renderItem}