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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.4.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

@@ -132,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/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";