@umituz/react-native-ai-creations 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ümit UZ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+# @umituz/react-native-ai-creations
+
+AI-generated creations gallery with filtering, sharing, and management for React Native apps.
+
+## Features
+
+- Gallery screen with grid/list view
+- Filtering by creation type
+- Share functionality
+- Delete with confirmation
+- Pull-to-refresh support
+- Home card component for quick access
+- Design system integration
+- Firestore integration
+- TanStack Query for data fetching
+
+## Installation
+
+```bash
+npm install @umituz/react-native-ai-creations
+```
+
+## Peer Dependencies
+
+```bash
+npm install @umituz/react-native-design-system @umituz/react-native-firestore @umituz/react-native-localization @umituz/react-native-sharing @tanstack/react-query firebase
+```
+
+## Usage
+
+### Gallery Screen
+
+```tsx
+import { CreationsGalleryScreen } from '@umituz/react-native-ai-creations';
+
+// In your navigation
+<Stack.Screen
+  name="CreationsGallery"
+  component={CreationsGalleryScreen}
+/>
+```
+
+### Home Card
+
+```tsx
+import { CreationsHomeCard } from '@umituz/react-native-ai-creations';
+
+// In your home screen
+<CreationsHomeCard
+  onPress={() => navigation.navigate('CreationsGallery')}
+/>
+```
+
+### Custom Hook
+
+```tsx
+import { useCreations, useDeleteCreation } from '@umituz/react-native-ai-creations';
+
+function MyComponent() {
+  const { data, isLoading, refetch } = useCreations();
+  const deleteMutation = useDeleteCreation();
+
+  // Use data...
+}
+```
+
+### Configuration
+
+```tsx
+import { CreationsProvider, CreationsConfig } from '@umituz/react-native-ai-creations';
+
+const config: CreationsConfig = {
+  collectionPath: 'users/{userId}/creations',
+  types: [
+    { id: 'santa', label: 'santa.types.santa', icon: '🎅' },
+    { id: 'elf', label: 'santa.types.elf', icon: '🧝' },
+  ],
+  translations: {
+    title: 'creations.title',
+    empty: 'creations.empty',
+    delete: 'creations.delete',
+  },
+};
+
+<CreationsProvider config={config}>
+  <App />
+</CreationsProvider>
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@umituz/react-native-ai-creations",
+  "version": "1.0.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:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "keywords": [
+    "react-native",
+    "ai",
+    "creations",
+    "gallery",
+    "firestore",
+    "tanstack-query",
+    "ddd",
+    "domain-driven-design"
+  ],
+  "author": "Ümit UZ <umit@umituz.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/react-native-ai-creations"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
+    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-sharing": "latest",
+    "firebase": ">=11.0.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.62.16",
+    "@types/react": "^19.0.0",
+    "firebase": "^11.0.0",
+    "react": "^19.0.0",
+    "react-native": "^0.76.0",
+    "react-native-safe-area-context": "^4.14.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/domain/entities/Creation.ts

@@ -0,0 +1,43 @@
+/**
+ * Creation Entity
+ * Represents an AI-generated creation
+ */
+
+export interface Creation {
+  readonly id: string;
+  readonly uri: string;
+  readonly type: string;
+  readonly originalUri?: string;
+  readonly createdAt: Date;
+  readonly isShared: boolean;
+}
+
+export interface CreationDocument {
+  readonly uri: string;
+  readonly originalImage?: string;
+  readonly transformedImage?: string;
+  readonly transformationType?: string;
+  readonly type?: string;
+  readonly status?: string;
+  readonly isShared: boolean;
+  readonly createdAt: FirebaseTimestamp;
+  readonly completedAt?: FirebaseTimestamp;
+}
+
+interface FirebaseTimestamp {
+  toDate: () => Date;
+}
+
+export function mapDocumentToCreation(
+  id: string,
+  data: CreationDocument,
+): Creation {
+  return {
+    id,
+    uri: data.transformedImage || data.uri,
+    type: data.transformationType || data.type || "unknown",
+    originalUri: data.originalImage,
+    createdAt: data.createdAt?.toDate?.() || new Date(),
+    isShared: data.isShared ?? false,
+  };
+}

package/src/domain/entities/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Domain Entities
+ */
+
+export type { Creation, CreationDocument } from "./Creation";
+export { mapDocumentToCreation } from "./Creation";

package/src/domain/repositories/ICreationsRepository.ts

@@ -0,0 +1,16 @@
+/**
+ * Creations Repository Interface
+ * Defines the contract for creations data access
+ */
+
+import type { Creation } from "../entities/Creation";
+
+export interface ICreationsRepository {
+  getAll(userId: string): Promise<Creation[]>;
+  delete(userId: string, creationId: string): Promise<boolean>;
+  updateShared(
+    userId: string,
+    creationId: string,
+    isShared: boolean,
+  ): Promise<boolean>;
+}

package/src/domain/repositories/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Domain Repository Interfaces
+ */
+
+export type { ICreationsRepository } from "./ICreationsRepository";

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

@@ -0,0 +1,48 @@
+/**
+ * Creations Configuration Value Object
+ * Defines the configuration for creations feature
+ */
+
+export interface CreationType {
+  readonly id: string;
+  readonly labelKey: string;
+  readonly icon: string;
+}
+
+export interface CreationsTranslations {
+  readonly title: string;
+  readonly subtitle: string;
+  readonly empty: string;
+  readonly emptyDescription: string;
+  readonly deleteTitle: string;
+  readonly deleteMessage: string;
+  readonly photoCount: string;
+  readonly filterAll: string;
+}
+
+export interface CreationsConfig {
+  readonly collectionName: string;
+  readonly types: readonly CreationType[];
+  readonly translations: CreationsTranslations;
+  readonly maxThumbnails?: number;
+  readonly gridColumns?: number;
+}
+
+export const DEFAULT_TRANSLATIONS: CreationsTranslations = {
+  title: "creations.title",
+  subtitle: "creations.subtitle",
+  empty: "creations.empty",
+  emptyDescription: "creations.emptyDescription",
+  deleteTitle: "creations.deleteTitle",
+  deleteMessage: "creations.deleteMessage",
+  photoCount: "creations.photoCount",
+  filterAll: "creations.filterAll",
+};
+
+export const DEFAULT_CONFIG: CreationsConfig = {
+  collectionName: "creations",
+  types: [],
+  translations: DEFAULT_TRANSLATIONS,
+  maxThumbnails: 4,
+  gridColumns: 2,
+};

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

@@ -0,0 +1,10 @@
+/**
+ * Domain Value Objects
+ */
+
+export type {
+  CreationType,
+  CreationsTranslations,
+  CreationsConfig,
+} from "./CreationsConfig";
+export { DEFAULT_TRANSLATIONS, DEFAULT_CONFIG } from "./CreationsConfig";

package/src/index.ts

@@ -0,0 +1,68 @@
+/**
+ * @umituz/react-native-ai-creations
+ *
+ * AI-generated creations gallery with filtering, sharing, and management
+ *
+ * Usage:
+ *   import {
+ *     CreationsGalleryScreen,
+ *     CreationsHomeCard,
+ *     useCreations,
+ *     createCreationsRepository,
+ *   } from '@umituz/react-native-ai-creations';
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Entities
+// =============================================================================
+
+export type { Creation, CreationDocument } from "./domain/entities";
+export { mapDocumentToCreation } from "./domain/entities";
+
+// =============================================================================
+// DOMAIN LAYER - Value Objects
+// =============================================================================
+
+export type {
+  CreationType,
+  CreationsTranslations,
+  CreationsConfig,
+} from "./domain/value-objects";
+export { DEFAULT_TRANSLATIONS, DEFAULT_CONFIG } from "./domain/value-objects";
+
+// =============================================================================
+// DOMAIN LAYER - Repository Interface
+// =============================================================================
+
+export type { ICreationsRepository } from "./domain/repositories";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER
+// =============================================================================
+
+export { CreationsRepository } from "./infrastructure/repositories";
+export { createCreationsRepository } from "./infrastructure/adapters";
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export { useCreations } from "./presentation/hooks/useCreations";
+export { useDeleteCreation } from "./presentation/hooks/useDeleteCreation";
+export { useCreationsFilter } from "./presentation/hooks/useCreationsFilter";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { CreationThumbnail } from "./presentation/components/CreationThumbnail";
+export { CreationCard } from "./presentation/components/CreationCard";
+export { CreationsHomeCard } from "./presentation/components/CreationsHomeCard";
+export { FilterChips } from "./presentation/components/FilterChips";
+export { EmptyState } from "./presentation/components/EmptyState";
+
+// =============================================================================
+// PRESENTATION LAYER - Screens
+// =============================================================================
+
+export { CreationsGalleryScreen } from "./presentation/screens/CreationsGalleryScreen";

package/src/infrastructure/adapters/createRepository.ts

@@ -0,0 +1,15 @@
+/**
+ * Repository Factory
+ * Creates repository instance with given configuration
+ */
+
+import type { Firestore } from "firebase/firestore";
+import { CreationsRepository } from "../repositories/CreationsRepository";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+
+export function createCreationsRepository(
+  db: Firestore | null,
+  collectionName: string,
+): ICreationsRepository {
+  return new CreationsRepository(db, collectionName);
+}

package/src/infrastructure/adapters/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Infrastructure Adapters
+ */
+
+export { createCreationsRepository } from "./createRepository";

package/src/infrastructure/repositories/CreationsRepository.ts

@@ -0,0 +1,100 @@
+/**
+ * Creations Repository Implementation
+ * Firestore operations for user creations
+ */
+
+declare const __DEV__: boolean;
+
+import {
+  collection,
+  doc,
+  getDocs,
+  deleteDoc,
+  updateDoc,
+  query,
+  orderBy,
+  type Firestore,
+} from "firebase/firestore";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+import type { Creation, CreationDocument } from "../../domain/entities/Creation";
+import { mapDocumentToCreation } from "../../domain/entities/Creation";
+
+export class CreationsRepository implements ICreationsRepository {
+  constructor(
+    private readonly db: Firestore | null,
+    private readonly collectionName: string,
+  ) {}
+
+  private getUserCollection(userId: string) {
+    if (!this.db) return null;
+    return collection(this.db, "users", userId, this.collectionName);
+  }
+
+  async getAll(userId: string): Promise<Creation[]> {
+    if (__DEV__) {
+      console.log("[CreationsRepository] getAll()", { userId });
+    }
+
+    const userCollection = this.getUserCollection(userId);
+    if (!userCollection) return [];
+
+    try {
+      const q = query(userCollection, orderBy("createdAt", "desc"));
+      const snapshot = await getDocs(q);
+
+      if (__DEV__) {
+        console.log("[CreationsRepository] Fetched:", snapshot.docs.length);
+      }
+
+      return snapshot.docs.map((docSnap) => {
+        const data = docSnap.data() as CreationDocument;
+        return mapDocumentToCreation(docSnap.id, data);
+      });
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[CreationsRepository] getAll() ERROR", error);
+      }
+      return [];
+    }
+  }
+
+  async delete(userId: string, creationId: string): Promise<boolean> {
+    if (!this.db) return false;
+
+    try {
+      const docRef = doc(
+        this.db,
+        "users",
+        userId,
+        this.collectionName,
+        creationId,
+      );
+      await deleteDoc(docRef);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async updateShared(
+    userId: string,
+    creationId: string,
+    isShared: boolean,
+  ): Promise<boolean> {
+    if (!this.db) return false;
+
+    try {
+      const docRef = doc(
+        this.db,
+        "users",
+        userId,
+        this.collectionName,
+        creationId,
+      );
+      await updateDoc(docRef, { isShared });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}

package/src/infrastructure/repositories/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Infrastructure Repositories
+ */
+
+export { CreationsRepository } from "./CreationsRepository";

package/src/presentation/components/CreationCard.tsx

@@ -0,0 +1,127 @@
+/**
+ * CreationCard Component
+ * Displays a creation item with actions
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, Image, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { Creation } from "../../domain/entities/Creation";
+import type { CreationType } from "../../domain/value-objects/CreationsConfig";
+
+interface CreationCardProps {
+  readonly creation: Creation;
+  readonly types: readonly CreationType[];
+  readonly onShare: (creation: Creation) => void;
+  readonly onDelete: (creation: Creation) => void;
+}
+
+export function CreationCard({
+  creation,
+  types,
+  onShare,
+  onDelete,
+}: CreationCardProps) {
+  const tokens = useAppDesignTokens();
+
+  const typeConfig = types.find((t) => t.id === creation.type);
+  const icon = typeConfig?.icon || "🎨";
+  const label = typeConfig?.labelKey || creation.type;
+
+  const handleShare = useCallback(() => onShare(creation), [creation, onShare]);
+  const handleDelete = useCallback(
+    () => onDelete(creation),
+    [creation, onDelete],
+  );
+
+  const formattedDate = useMemo(() => {
+    const date =
+      creation.createdAt instanceof Date
+        ? creation.createdAt
+        : new Date(creation.createdAt);
+    return date.toLocaleDateString(undefined, {
+      day: "numeric",
+      month: "short",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }, [creation.createdAt]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flexDirection: "row",
+          backgroundColor: tokens.colors.surface,
+          borderRadius: tokens.spacing.md,
+          overflow: "hidden",
+        },
+        thumbnail: {
+          width: 100,
+          height: 100,
+        },
+        content: {
+          flex: 1,
+          padding: tokens.spacing.md,
+          justifyContent: "space-between",
+        },
+        typeRow: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tokens.spacing.sm,
+        },
+        icon: {
+          fontSize: 20,
+        },
+        typeText: {
+          ...tokens.typography.bodyMedium,
+          fontWeight: "600",
+          color: tokens.colors.textPrimary,
+        },
+        dateText: {
+          ...tokens.typography.bodySmall,
+          color: tokens.colors.textSecondary,
+        },
+        actions: {
+          flexDirection: "row",
+          gap: tokens.spacing.sm,
+        },
+        actionBtn: {
+          width: 36,
+          height: 36,
+          borderRadius: 18,
+          backgroundColor: tokens.colors.backgroundSecondary,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      <Image source={{ uri: creation.uri }} style={styles.thumbnail} />
+      <View style={styles.content}>
+        <View>
+          <View style={styles.typeRow}>
+            <AtomicText style={styles.icon}>{icon}</AtomicText>
+            <AtomicText style={styles.typeText}>{label}</AtomicText>
+          </View>
+          <AtomicText style={styles.dateText}>{formattedDate}</AtomicText>
+        </View>
+        <View style={styles.actions}>
+          <TouchableOpacity style={styles.actionBtn} onPress={handleShare}>
+            <AtomicIcon name="share-social" size="sm" color="primary" />
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.actionBtn} onPress={handleDelete}>
+            <AtomicIcon name="trash" size="sm" color="error" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/presentation/components/CreationThumbnail.tsx

@@ -0,0 +1,41 @@
+/**
+ * CreationThumbnail Component
+ * Displays a single creation thumbnail
+ */
+
+import React, { useMemo } from "react";
+import { Image, TouchableOpacity, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface CreationThumbnailProps {
+  readonly uri: string;
+  readonly size?: number;
+  readonly onPress?: () => void;
+}
+
+export function CreationThumbnail({
+  uri,
+  size = 72,
+  onPress,
+}: CreationThumbnailProps) {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        thumbnail: {
+          width: size,
+          height: size,
+          borderRadius: tokens.spacing.sm,
+          backgroundColor: tokens.colors.backgroundSecondary,
+        },
+      }),
+    [tokens, size],
+  );
+
+  return (
+    <TouchableOpacity onPress={onPress} disabled={!onPress}>
+      <Image source={{ uri }} style={styles.thumbnail} />
+    </TouchableOpacity>
+  );
+}