@umituz/react-native-ai-generation-content 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -28,13 +28,16 @@
     "url": "git+https://github.com/umituz/react-native-ai-generation-content.git"
   },
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "react-native": ">=0.74.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
+    "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "eslint": "^8.57.0",
+    "react-native": "^0.76.0",
     "typescript": "^5.3.0"
   },
   "publishConfig": {

package/src/index.ts

@@ -72,6 +72,21 @@ export type {
   WrapperConfig,
 } from "./infrastructure/services";
 
+// =============================================================================
+// INFRASTRUCTURE LAYER - Middleware Factories
+// =============================================================================
+
+export {
+  createCreditCheckMiddleware,
+  createHistoryTrackingMiddleware,
+} from "./infrastructure/middleware";
+
+export type {
+  CreditCheckConfig,
+  HistoryConfig,
+  HistoryEntry,
+} from "./infrastructure/middleware";
+
 // =============================================================================
 // INFRASTRUCTURE LAYER - Utils
 // =============================================================================
@@ -117,3 +132,14 @@ export type {
   UseGenerationOptions,
   UseGenerationReturn,
 } from "./presentation/hooks";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { GenerationProgressModal } from "./presentation/components";
+
+export type {
+  GenerationProgressModalProps,
+  GenerationProgressRenderProps,
+} from "./presentation/components";

package/src/infrastructure/middleware/credit-check.middleware.ts

@@ -0,0 +1,74 @@
+/**
+ * Credit Check Middleware Factory
+ * Generic credit checking with app-provided config
+ */
+
+import type { GenerationMiddleware } from "../../domain/entities";
+
+export interface CreditCheckConfig {
+  /**
+   * Get credit type from operation type
+   * App-specific logic
+   */
+  getCreditType: (operationType: string) => string;
+
+  /**
+   * Check if user has available credits
+   * App provides implementation
+   */
+  checkCredits: (
+    userId: string | undefined,
+    operationType: string,
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+    creditType?: string;
+  }>;
+
+  /**
+   * Deduct credits after successful generation
+   * App provides implementation
+   */
+  deductCredits: (
+    userId: string | undefined,
+    creditType: string,
+  ) => Promise<void>;
+}
+
+/**
+ * Create credit check middleware
+ * Checks credits before generation, deducts after success
+ */
+export function createCreditCheckMiddleware(
+  config: CreditCheckConfig,
+): GenerationMiddleware {
+  return {
+    async beforeGenerate(context) {
+      const operationType =
+        (context.request.input?.type as string) || "default";
+
+      const result = await config.checkCredits(
+        context.userId,
+        operationType,
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || "credits_exhausted");
+      }
+
+      context.metadata = {
+        ...context.metadata,
+        creditType: result.creditType || config.getCreditType(operationType),
+      };
+    },
+
+    async afterGenerate(context) {
+      if (context.result.success && context.metadata?.creditType) {
+        await config.deductCredits(
+          context.userId,
+          context.metadata.creditType as string,
+        );
+      }
+    },
+  };
+}

package/src/infrastructure/middleware/history-tracking.middleware.ts

@@ -0,0 +1,69 @@
+/**
+ * History Tracking Middleware Factory
+ * Generic history saving with app-provided config
+ */
+
+import type { GenerationMiddleware } from "../../domain/entities";
+
+export interface HistoryEntry {
+  type: string;
+  prompt: string;
+  result: string | null;
+  success: boolean;
+  error?: string;
+  userId: string;
+  metadata?: Record<string, unknown>;
+  timestamp: unknown;
+}
+
+export interface HistoryConfig {
+  /**
+   * Save generation to history
+   * App provides storage implementation (Firestore, API, etc.)
+   */
+  saveToHistory: (entry: HistoryEntry) => Promise<void>;
+
+  /**
+   * Create timestamp for history entry
+   * App-specific (serverTimestamp for Firestore, new Date() for API, etc.)
+   */
+  createTimestamp: () => unknown;
+}
+
+/**
+ * Create history tracking middleware
+ * Saves generation history after completion
+ */
+export function createHistoryTrackingMiddleware(
+  config: HistoryConfig,
+): GenerationMiddleware {
+  return {
+    async afterGenerate(context) {
+      if (!context.userId) {
+        return;
+      }
+
+      try {
+        const operationType =
+          (context.request.input?.type as string) || "default";
+        const prompt =
+          (context.request.input?.prompt as string) || "";
+
+        const entry: HistoryEntry = {
+          type: operationType,
+          prompt,
+          result: context.result.success ? String(context.result.data) : null,
+          success: context.result.success,
+          error: context.result.error,
+          userId: context.userId,
+          metadata: context.result.metadata as Record<string, unknown>,
+          timestamp: config.createTimestamp(),
+        };
+
+        await config.saveToHistory(entry);
+      } catch {
+        // Silent fail
+      }
+    },
+  };
+}

package/src/infrastructure/middleware/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Middleware Factories
+ * Generic middleware with app-provided config
+ */
+
+export {
+  createCreditCheckMiddleware,
+  type CreditCheckConfig,
+} from "./credit-check.middleware";
+
+export {
+  createHistoryTrackingMiddleware,
+  type HistoryConfig,
+  type HistoryEntry,
+} from "./history-tracking.middleware";

package/src/presentation/components/GenerationProgressModal.tsx

@@ -0,0 +1,166 @@
+/**
+ * GenerationProgressModal
+ * Generic AI generation progress modal with customizable rendering
+ */
+
+import React from "react";
+import { Modal, View, Text, StyleSheet } from "react-native";
+
+export interface GenerationProgressModalProps {
+  visible: boolean;
+  progress: number;
+  title?: string;
+  message?: string;
+  hint?: string;
+  overlayColor?: string;
+  modalBackgroundColor?: string;
+  textColor?: string;
+  progressColor?: string;
+  progressBackgroundColor?: string;
+  renderContent?: (props: GenerationProgressRenderProps) => React.ReactNode;
+}
+
+export interface GenerationProgressRenderProps {
+  progress: number;
+  title?: string;
+  message?: string;
+  hint?: string;
+}
+
+export const GenerationProgressModal: React.FC<
+  GenerationProgressModalProps
+> = ({
+  visible,
+  progress,
+  title,
+  message,
+  hint,
+  overlayColor = "rgba(0, 0, 0, 0.7)",
+  modalBackgroundColor = "#1C1C1E",
+  textColor = "#FFFFFF",
+  progressColor = "#007AFF",
+  progressBackgroundColor = "#3A3A3C",
+  renderContent,
+}) => {
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+
+  if (renderContent) {
+    return (
+      <Modal
+        visible={visible}
+        transparent
+        animationType="fade"
+        statusBarTranslucent
+      >
+        <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
+          {renderContent({ progress: clampedProgress, title, message, hint })}
+        </View>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+    >
+      <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
+        <View
+          style={[styles.modal, { backgroundColor: modalBackgroundColor }]}
+        >
+          {title && (
+            <Text style={[styles.title, { color: textColor }]}>{title}</Text>
+          )}
+
+          {message && (
+            <Text style={[styles.message, { color: textColor }]}>
+              {message}
+            </Text>
+          )}
+
+          <View style={styles.progressContainer}>
+            <View
+              style={[
+                styles.progressBackground,
+                { backgroundColor: progressBackgroundColor },
+              ]}
+            >
+              <View
+                style={[
+                  styles.progressFill,
+                  {
+                    backgroundColor: progressColor,
+                    width: `${clampedProgress}%`,
+                  },
+                ]}
+              />
+            </View>
+            <Text style={[styles.progressText, { color: textColor }]}>
+              {Math.round(clampedProgress)}%
+            </Text>
+          </View>
+
+          {hint && (
+            <Text style={[styles.hint, { color: textColor }]}>{hint}</Text>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  modal: {
+    width: "100%",
+    maxWidth: 400,
+    borderRadius: 24,
+    padding: 32,
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+    marginBottom: 12,
+    textAlign: "center",
+  },
+  message: {
+    fontSize: 16,
+    marginBottom: 24,
+    textAlign: "center",
+    opacity: 0.8,
+  },
+  progressContainer: {
+    width: "100%",
+    marginBottom: 16,
+    alignItems: "center",
+  },
+  progressBackground: {
+    width: "100%",
+    height: 8,
+    borderRadius: 4,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 8,
+  },
+  hint: {
+    fontSize: 14,
+    textAlign: "center",
+    fontStyle: "italic",
+    opacity: 0.6,
+  },
+});

package/src/presentation/components/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Presentation Components
+ */
+
+export {
+  GenerationProgressModal,
+} from "./GenerationProgressModal";
+
+export type {
+  GenerationProgressModalProps,
+  GenerationProgressRenderProps,
+} from "./GenerationProgressModal";