@umituz/react-native-ai-creations 1.0.1 → 1.1.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "lint": "tsc --noEmit",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
   },
@@ -29,6 +30,8 @@
   "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": ">=18.2.0",
@@ -38,6 +41,7 @@
   "devDependencies": {
     "@tanstack/react-query": "^5.62.16",
     "@types/react": "^19.0.0",
+    "@umituz/react-native-image": "^1.1.1",
     "firebase": "^11.0.0",
     "react": "^19.0.0",
     "react-native": "^0.76.0",

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

@@ -3,6 +3,8 @@
  * Defines the configuration for creations feature
  */
 
+import type { Creation, CreationDocument } from "../entities/Creation";
+
 export interface CreationType {
   readonly id: string;
   readonly labelKey: string;
@@ -20,12 +22,31 @@ export interface CreationsTranslations {
   readonly filterAll: string;
 }
 
+/**
+ * Path builder function type
+ * Allows apps to define custom Firestore path structures
+ * @example
+ * // Default: users/{userId}/creations
+ * pathBuilder: (userId) => ["users", userId, "creations"]
+ * // Alternative: creations/{userId}/items
+ * pathBuilder: (userId) => ["creations", userId, "items"]
+ */
+export type PathBuilder = (userId: string) => string[];
+
+/**
+ * Document mapper function type
+ * Allows apps to map their specific document structure to Creation
+ */
+export type DocumentMapper = (id: string, data: CreationDocument) => Creation;
+
 export interface CreationsConfig {
   readonly collectionName: string;
   readonly types: readonly CreationType[];
   readonly translations: CreationsTranslations;
   readonly maxThumbnails?: number;
   readonly gridColumns?: number;
+  readonly pathBuilder?: PathBuilder;
+  readonly documentMapper?: DocumentMapper;
 }
 
 export const DEFAULT_TRANSLATIONS: CreationsTranslations = {

package/src/domain/value-objects/index.ts

@@ -6,5 +6,7 @@ export type {
   CreationType,
   CreationsTranslations,
   CreationsConfig,
+  PathBuilder,
+  DocumentMapper,
 } from "./CreationsConfig";
 export { DEFAULT_TRANSLATIONS, DEFAULT_CONFIG } from "./CreationsConfig";

package/src/index.ts

@@ -3,6 +3,14 @@
  *
  * AI-generated creations gallery with filtering, sharing, and management
  *
+ * Architecture:
+ * - Extends BaseRepository from @umituz/react-native-firestore
+ * - Fully dynamic path structure (configurable per app)
+ * - Fully dynamic document mapping (configurable per app)
+ * - App-agnostic: Works with any app, no app-specific code
+ *
+ * This package is designed to be used across hundreds of apps.
+ *
  * Usage:
  *   import {
  *     CreationsGalleryScreen,
@@ -27,6 +35,8 @@ export type {
   CreationType,
   CreationsTranslations,
   CreationsConfig,
+  PathBuilder,
+  DocumentMapper,
 } from "./domain/value-objects";
 export { DEFAULT_TRANSLATIONS, DEFAULT_CONFIG } from "./domain/value-objects";
 
@@ -40,7 +50,10 @@ export type { ICreationsRepository } from "./domain/repositories";
 // INFRASTRUCTURE LAYER
 // =============================================================================
 
-export { CreationsRepository } from "./infrastructure/repositories";
+export {
+  CreationsRepository,
+  type RepositoryOptions,
+} from "./infrastructure/repositories";
 export { createCreationsRepository } from "./infrastructure/adapters";
 
 // =============================================================================

package/src/infrastructure/adapters/createRepository.ts

@@ -1,15 +1,54 @@
 /**
  * Repository Factory
  * Creates repository instance with given configuration
+ *
+ * Architecture:
+ * - Factory pattern for repository creation
+ * - Supports dynamic path structure per app
+ * - Supports custom document mapping per app
+ * - App-agnostic: No Firestore instance needed (BaseRepository handles it)
+ *
+ * This factory is designed to be used across hundreds of apps.
  */
 
-import type { Firestore } from "firebase/firestore";
-import { CreationsRepository } from "../repositories/CreationsRepository";
+import {
+  CreationsRepository,
+  type RepositoryOptions,
+} from "../repositories/CreationsRepository";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 
+/**
+ * Creates a new CreationsRepository instance
+ *
+ * @param collectionName - Firestore collection name
+ * @param options - Optional repository configuration
+ * @returns ICreationsRepository instance
+ *
+ * @example
+ * // Basic usage with default path (users/{userId}/photos)
+ * const repo = createCreationsRepository("photos");
+ *
+ * @example
+ * // Custom path structure
+ * const repo = createCreationsRepository("creations", {
+ *   pathBuilder: (userId) => ["gallery", userId, "items"],
+ * });
+ *
+ * @example
+ * // Custom document mapper
+ * const repo = createCreationsRepository("photos", {
+ *   documentMapper: (id, data) => ({
+ *     id,
+ *     uri: data.imageUrl,
+ *     type: data.category,
+ *     createdAt: data.timestamp?.toDate() || new Date(),
+ *     isShared: data.public ?? false,
+ *   }),
+ * });
+ */
 export function createCreationsRepository(
-  db: Firestore | null,
   collectionName: string,
+  options?: RepositoryOptions,
 ): ICreationsRepository {
-  return new CreationsRepository(db, collectionName);
+  return new CreationsRepository(collectionName, options);
 }

package/src/infrastructure/repositories/CreationsRepository.ts

@@ -1,6 +1,14 @@
 /**
  * Creations Repository Implementation
- * Firestore operations for user creations
+ * Extends BaseRepository from @umituz/react-native-firestore
+ *
+ * Architecture:
+ * - Extends BaseRepository for centralized database access
+ * - Fully dynamic path structure (configurable per app)
+ * - Fully dynamic document mapping (configurable per app)
+ * - App-agnostic: Works with any app, no app-specific code
+ *
+ * This class is designed to be used across hundreds of apps.
  */
 
 declare const __DEV__: boolean;
@@ -13,21 +21,72 @@ import {
   updateDoc,
   query,
   orderBy,
-  type Firestore,
 } from "firebase/firestore";
+import { BaseRepository } from "@umituz/react-native-firestore";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import type { Creation, CreationDocument } from "../../domain/entities/Creation";
 import { mapDocumentToCreation } from "../../domain/entities/Creation";
+import type {
+  PathBuilder,
+  DocumentMapper,
+} from "../../domain/value-objects/CreationsConfig";
+
+/**
+ * Repository options for dynamic configuration
+ * Apps can customize path structure and document mapping
+ */
+export interface RepositoryOptions {
+  /**
+   * Custom path builder function
+   * @example (userId) => ["users", userId, "photos"]
+   * @example (userId) => ["creations", userId, "items"]
+   */
+  readonly pathBuilder?: PathBuilder;
+
+  /**
+   * Custom document mapper function
+   * Maps Firestore documents to Creation entity
+   */
+  readonly documentMapper?: DocumentMapper;
+}
+
+/**
+ * Default path builder: users/{userId}/{collectionName}
+ */
+const createDefaultPathBuilder =
+  (collectionName: string): PathBuilder =>
+  (userId: string) =>
+    ["users", userId, collectionName];
+
+export class CreationsRepository
+  extends BaseRepository
+  implements ICreationsRepository
+{
+  private readonly pathBuilder: PathBuilder;
+  private readonly documentMapper: DocumentMapper;
 
-export class CreationsRepository implements ICreationsRepository {
   constructor(
-    private readonly db: Firestore | null,
     private readonly collectionName: string,
-  ) {}
+    options?: RepositoryOptions,
+  ) {
+    super();
+    this.pathBuilder =
+      options?.pathBuilder ?? createDefaultPathBuilder(collectionName);
+    this.documentMapper = options?.documentMapper ?? mapDocumentToCreation;
+  }
 
   private getUserCollection(userId: string) {
-    if (!this.db) return null;
-    return collection(this.db, "users", userId, this.collectionName);
+    const db = this.getDb();
+    if (!db) return null;
+    const pathSegments = this.pathBuilder(userId);
+    return collection(db, pathSegments[0], ...pathSegments.slice(1));
+  }
+
+  private getDocRef(userId: string, creationId: string) {
+    const db = this.getDb();
+    if (!db) return null;
+    const pathSegments = this.pathBuilder(userId);
+    return doc(db, pathSegments[0], ...pathSegments.slice(1), creationId);
   }
 
   async getAll(userId: string): Promise<Creation[]> {
@@ -48,7 +107,7 @@ export class CreationsRepository implements ICreationsRepository {
 
       return snapshot.docs.map((docSnap) => {
         const data = docSnap.data() as CreationDocument;
-        return mapDocumentToCreation(docSnap.id, data);
+        return this.documentMapper(docSnap.id, data);
       });
     } catch (error) {
       if (__DEV__) {
@@ -59,16 +118,10 @@ export class CreationsRepository implements ICreationsRepository {
   }
 
   async delete(userId: string, creationId: string): Promise<boolean> {
-    if (!this.db) return false;
+    const docRef = this.getDocRef(userId, creationId);
+    if (!docRef) return false;
 
     try {
-      const docRef = doc(
-        this.db,
-        "users",
-        userId,
-        this.collectionName,
-        creationId,
-      );
       await deleteDoc(docRef);
       return true;
     } catch {
@@ -81,16 +134,10 @@ export class CreationsRepository implements ICreationsRepository {
     creationId: string,
     isShared: boolean,
   ): Promise<boolean> {
-    if (!this.db) return false;
+    const docRef = this.getDocRef(userId, creationId);
+    if (!docRef) return false;
 
     try {
-      const docRef = doc(
-        this.db,
-        "users",
-        userId,
-        this.collectionName,
-        creationId,
-      );
       await updateDoc(docRef, { isShared });
       return true;
     } catch {

package/src/infrastructure/repositories/index.ts

@@ -2,4 +2,7 @@
  * Infrastructure Repositories
  */
 
-export { CreationsRepository } from "./CreationsRepository";
+export {
+  CreationsRepository,
+  type RepositoryOptions,
+} from "./CreationsRepository";

package/src/presentation/components/CreationCard.tsx

@@ -16,6 +16,7 @@ import type { CreationType } from "../../domain/value-objects/CreationsConfig";
 interface CreationCardProps {
   readonly creation: Creation;
   readonly types: readonly CreationType[];
+  readonly onView?: (creation: Creation) => void;
   readonly onShare: (creation: Creation) => void;
   readonly onDelete: (creation: Creation) => void;
 }
@@ -23,6 +24,7 @@ interface CreationCardProps {
 export function CreationCard({
   creation,
   types,
+  onView,
   onShare,
   onDelete,
 }: CreationCardProps) {
@@ -32,6 +34,7 @@ export function CreationCard({
   const icon = typeConfig?.icon || "🎨";
   const label = typeConfig?.labelKey || creation.type;
 
+  const handleView = useCallback(() => onView?.(creation), [creation, onView]);
   const handleShare = useCallback(() => onShare(creation), [creation, onShare]);
   const handleDelete = useCallback(
     () => onDelete(creation),
@@ -114,6 +117,11 @@ export function CreationCard({
           <AtomicText style={styles.dateText}>{formattedDate}</AtomicText>
         </View>
         <View style={styles.actions}>
+          {onView && (
+            <TouchableOpacity style={styles.actionBtn} onPress={handleView}>
+              <AtomicIcon name="eye" size="sm" color="primary" />
+            </TouchableOpacity>
+          )}
           <TouchableOpacity style={styles.actionBtn} onPress={handleShare}>
             <AtomicIcon name="share-social" size="sm" color="primary" />
           </TouchableOpacity>

package/src/presentation/hooks/useCreations.ts

@@ -3,8 +3,6 @@
  * Fetches user's creations from repository
  */
 
-declare const __DEV__: boolean;
-
 import { useQuery } from "@tanstack/react-query";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 
@@ -24,21 +22,11 @@ export function useCreations({
   repository,
   enabled = true,
 }: UseCreationsProps) {
-  const result = useQuery({
+  return useQuery({
     queryKey: ["creations", userId ?? ""],
     queryFn: () => repository.getAll(userId!),
     enabled: !!userId && enabled,
     staleTime: CACHE_CONFIG.staleTime,
     gcTime: CACHE_CONFIG.gcTime,
   });
-
-  if (__DEV__) {
-    console.log("[useCreations] State:", {
-      isLoading: result.isLoading,
-      count: result.data?.length ?? 0,
-      enabled: !!userId && enabled,
-    });
-  }
-
-  return result;
 }

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -3,12 +3,11 @@
  * Full gallery view with filtering
  */
 
-declare const __DEV__: boolean;
-
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useState } from "react";
 import { View, FlatList, StyleSheet, RefreshControl, Alert } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useSharing } from "@umituz/react-native-sharing";
+import { ImageGallery } from "@umituz/react-native-image";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
@@ -36,6 +35,8 @@ export function CreationsGalleryScreen({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { share } = useSharing();
+  const [viewerVisible, setViewerVisible] = useState(false);
+  const [viewerIndex, setViewerIndex] = useState(0);
 
   const { data: creations, isLoading, refetch } = useCreations({
     userId,
@@ -46,13 +47,16 @@ export function CreationsGalleryScreen({
   const { filtered, selectedType, availableTypes, selectType } =
     useCreationsFilter({ creations });
 
-  if (__DEV__) {
-    console.log("[CreationsGalleryScreen] Render:", {
-      count: creations?.length ?? 0,
-      filtered: filtered.length,
-      selectedType,
-    });
-  }
+  const handleView = useCallback(
+    (creation: Creation) => {
+      const index = filtered.findIndex((c) => c.id === creation.id);
+      if (index >= 0) {
+        setViewerIndex(index);
+        setViewerVisible(true);
+      }
+    },
+    [filtered],
+  );
 
   const handleShare = useCallback(
     async (creation: Creation) => {
@@ -102,16 +106,22 @@ export function CreationsGalleryScreen({
     [tokens, insets.bottom],
   );
 
+  const viewerImages = useMemo(
+    () => filtered.map((creation) => ({ uri: creation.uri })),
+    [filtered],
+  );
+
   const renderItem = useCallback(
     ({ item }: { item: Creation }) => (
       <CreationCard
         creation={item}
         types={config.types}
+        onView={handleView}
         onShare={handleShare}
         onDelete={handleDelete}
       />
     ),
-    [config.types, handleShare, handleDelete],
+    [config.types, handleView, handleShare, handleDelete],
   );
 
   if (!isLoading && (!creations || creations.length === 0)) {
@@ -149,6 +159,13 @@ export function CreationsGalleryScreen({
           />
         }
       />
+      <ImageGallery
+        images={viewerImages}
+        visible={viewerVisible}
+        index={viewerIndex}
+        onDismiss={() => setViewerVisible(false)}
+        onIndexChange={setViewerIndex}
+      />
     </View>
   );
 }

package/src/types.d.ts

@@ -2,6 +2,41 @@
  * Type declarations for external modules
  */
 
+declare module "@umituz/react-native-firestore" {
+  import type { Firestore } from "firebase/firestore";
+
+  export class BaseRepository {
+    protected getDb(): Firestore | null;
+    protected getDbOrThrow(): Firestore;
+    protected isDbInitialized(): boolean;
+    protected isQuotaError(error: unknown): boolean;
+    protected handleQuotaError(error: unknown): never;
+    protected executeWithQuotaHandling<T>(
+      operation: () => Promise<T>,
+    ): Promise<T>;
+    protected trackRead(
+      collection: string,
+      count: number,
+      cached: boolean,
+    ): void;
+    protected trackWrite(
+      collection: string,
+      docId: string,
+      count: number,
+    ): void;
+    protected trackDelete(
+      collection: string,
+      docId: string,
+      count: number,
+    ): void;
+    destroy(): void;
+  }
+
+  export function getFirestore(): Firestore | null;
+  export function initializeFirestore(app: unknown): void;
+  export function isFirestoreInitialized(): boolean;
+}
+
 declare module "@umituz/react-native-design-system" {
   import type { FC, ReactNode } from "react";
   import type { StyleProp, ViewStyle, TextStyle } from "react-native";