@umituz/react-native-ai-generation-content 1.17.3 → 1.17.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.3",
+  "version": "1.17.5",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/presentation/components/GenerationProgressContent.tsx

@@ -1,123 +1,161 @@
 /**
  * GenerationProgressContent
  * Content for the AI generation progress modal
+ * Props-driven for 100+ apps compatibility
  */
 
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 import { GenerationProgressBar } from "./GenerationProgressBar";
 
 export interface GenerationProgressContentProps {
-    progress: number;
-    title?: string;
-    message?: string;
-    hint?: string;
-    dismissLabel?: string;
-    onDismiss?: () => void;
-    backgroundColor?: string;
-    textColor?: string;
-    progressColor?: string;
-    progressBackgroundColor?: string;
-    dismissButtonColor?: string;
+  readonly progress: number;
+  readonly icon?: string;
+  readonly title?: string;
+  readonly message?: string;
+  readonly hint?: string;
+  readonly dismissLabel?: string;
+  readonly onDismiss?: () => void;
+  readonly backgroundColor?: string;
+  readonly textColor?: string;
+  readonly hintColor?: string;
+  readonly progressColor?: string;
+  readonly progressBackgroundColor?: string;
+  readonly dismissButtonColor?: string;
 }
 
 export const GenerationProgressContent: React.FC<
-    GenerationProgressContentProps
+  GenerationProgressContentProps
 > = ({
-    progress,
-    title,
-    message,
-    hint,
-    dismissLabel,
-    onDismiss,
-    backgroundColor,
-    textColor,
-    progressColor,
-    progressBackgroundColor,
-    dismissButtonColor,
+  progress,
+  icon,
+  title,
+  message,
+  hint,
+  dismissLabel,
+  onDismiss,
+  backgroundColor,
+  textColor,
+  hintColor,
+  progressColor,
+  progressBackgroundColor,
+  dismissButtonColor,
 }) => {
-        const tokens = useAppDesignTokens();
+  const tokens = useAppDesignTokens();
 
-        const activeTextColor = textColor || tokens.colors.textPrimary;
-        const activeBgColor = backgroundColor || tokens.colors.surface;
+  const activeTextColor = textColor || tokens.colors.textPrimary;
+  const activeBgColor = backgroundColor || tokens.colors.surface;
+  const activeHintColor = hintColor || tokens.colors.textTertiary;
 
-        return (
-            <View style={[styles.modal, { backgroundColor: activeBgColor }]}>
-                {title && (
-                    <AtomicText style={[styles.title, { color: activeTextColor }]}>{title}</AtomicText>
-                )}
+  return (
+    <View
+      style={[
+        styles.modal,
+        {
+          backgroundColor: activeBgColor,
+          borderColor: tokens.colors.borderLight,
+        },
+      ]}
+    >
+      {icon && (
+        <View style={styles.iconContainer}>
+          <AtomicIcon name={icon} size="xl" color="primary" />
+        </View>
+      )}
 
-                {message && (
-                    <AtomicText style={[styles.message, { color: activeTextColor }]}>
-                        {message}
-                    </AtomicText>
-                )}
+      {title && (
+        <AtomicText
+          type="headlineSmall"
+          style={[styles.title, { color: activeTextColor }]}
+        >
+          {title}
+        </AtomicText>
+      )}
 
-                <GenerationProgressBar
-                    progress={progress}
-                    textColor={activeTextColor}
-                    progressColor={progressColor}
-                    backgroundColor={progressBackgroundColor}
-                />
+      {message && (
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.message, { color: tokens.colors.textSecondary }]}
+        >
+          {message}
+        </AtomicText>
+      )}
 
-                {hint && (
-                    <AtomicText style={[styles.hint, { color: activeTextColor }]}>{hint}</AtomicText>
-                )}
+      <GenerationProgressBar
+        progress={progress}
+        textColor={tokens.colors.primary}
+        progressColor={progressColor}
+        backgroundColor={progressBackgroundColor}
+      />
 
-                {onDismiss && (
-                    <TouchableOpacity
-                        style={[
-                            styles.dismissButton,
-                            { backgroundColor: dismissButtonColor || tokens.colors.primary },
-                        ]}
-                        onPress={onDismiss}
-                    >
-                        <AtomicText style={styles.dismissText}>{dismissLabel || "OK"}</AtomicText>
-                    </TouchableOpacity>
-                )}
-            </View>
-        );
-    };
+      {hint && (
+        <AtomicText
+          type="bodySmall"
+          style={[styles.hint, { color: activeHintColor }]}
+        >
+          {hint}
+        </AtomicText>
+      )}
+
+      {onDismiss && (
+        <TouchableOpacity
+          style={[
+            styles.dismissButton,
+            { backgroundColor: dismissButtonColor || tokens.colors.primary },
+          ]}
+          onPress={onDismiss}
+        >
+          <AtomicText type="bodyMedium" style={styles.dismissText}>
+            {dismissLabel || "OK"}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
-    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,
-    },
-    hint: {
-        fontSize: 14,
-        textAlign: "center",
-        fontStyle: "italic",
-        opacity: 0.6,
-        marginBottom: 16,
-    },
-    dismissButton: {
-        marginTop: 8,
-        paddingVertical: 14,
-        paddingHorizontal: 32,
-        borderRadius: 12,
-        minWidth: 140,
-        alignItems: "center",
-    },
-    dismissText: {
-        color: "#FFFFFF",
-        fontSize: 16,
-        fontWeight: "600",
-    },
+  modal: {
+    width: "100%",
+    maxWidth: 380,
+    borderRadius: 24,
+    padding: 32,
+    borderWidth: 1,
+    alignItems: "center",
+  },
+  iconContainer: {
+    marginBottom: 20,
+  },
+  title: {
+    fontWeight: "700",
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  message: {
+    marginBottom: 28,
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  hint: {
+    textAlign: "center",
+    lineHeight: 18,
+    paddingHorizontal: 8,
+  },
+  dismissButton: {
+    marginTop: 16,
+    paddingVertical: 14,
+    paddingHorizontal: 32,
+    borderRadius: 12,
+    minWidth: 140,
+    alignItems: "center",
+  },
+  dismissText: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
 });

package/src/presentation/components/GenerationProgressModal.tsx

@@ -1,30 +1,36 @@
 /**
  * GenerationProgressModal
- * Generic AI generation progress modal with customizable rendering
+ * Generic AI generation progress modal using BaseModal
+ * Props-driven for 100+ apps compatibility
  */
 
 import React from "react";
-import { Modal, View, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { StyleSheet } from "react-native";
+import {
+  BaseModal,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 import {
   GenerationProgressContent,
-  GenerationProgressContentProps,
+  type GenerationProgressContentProps,
 } from "./GenerationProgressContent";
 
 export interface GenerationProgressRenderProps {
-  progress: number;
-  title?: string;
-  message?: string;
-  hint?: string;
-  onDismiss?: () => void;
+  readonly progress: number;
+  readonly icon?: string;
+  readonly title?: string;
+  readonly message?: string;
+  readonly hint?: string;
+  readonly onDismiss?: () => void;
 }
 
 export interface GenerationProgressModalProps
   extends Omit<GenerationProgressContentProps, "backgroundColor"> {
-  visible: boolean;
-  overlayColor?: string;
-  modalBackgroundColor?: string;
-  renderContent?: (props: GenerationProgressRenderProps) => React.ReactNode;
+  readonly visible: boolean;
+  readonly modalBackgroundColor?: string;
+  readonly renderContent?: (
+    props: GenerationProgressRenderProps
+  ) => React.ReactNode;
 }
 
 export const GenerationProgressModal: React.FC<
@@ -32,67 +38,76 @@ export const GenerationProgressModal: React.FC<
 > = ({
   visible,
   progress,
+  icon,
   title,
   message,
   hint,
   dismissLabel,
   onDismiss,
-  overlayColor = "rgba(0, 0, 0, 0.7)",
   modalBackgroundColor,
   textColor,
+  hintColor,
   progressColor,
   progressBackgroundColor,
   dismissButtonColor,
   renderContent,
 }) => {
-    const tokens = useAppDesignTokens();
-    const clampedProgress = Math.max(0, Math.min(100, progress));
+  const tokens = useAppDesignTokens();
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+
+  const handleClose = React.useCallback(() => {
+    onDismiss?.();
+  }, [onDismiss]);
 
-    const content = renderContent ? (
-      renderContent({
-        progress: clampedProgress,
-        title,
-        message,
-        hint,
-        onDismiss,
-      })
-    ) : (
-      <GenerationProgressContent
-        progress={clampedProgress}
-        title={title}
-        message={message}
-        hint={hint}
-        dismissLabel={dismissLabel}
-        onDismiss={onDismiss}
-        backgroundColor={modalBackgroundColor || tokens.colors.surface}
-        textColor={textColor || tokens.colors.textPrimary}
-        progressColor={progressColor || tokens.colors.primary}
-        progressBackgroundColor={
-          progressBackgroundColor || tokens.colors.borderLight
-        }
-        dismissButtonColor={dismissButtonColor || tokens.colors.primary}
-      />
-    );
+  const content = renderContent ? (
+    renderContent({
+      progress: clampedProgress,
+      icon,
+      title,
+      message,
+      hint,
+      onDismiss,
+    })
+  ) : (
+    <GenerationProgressContent
+      progress={clampedProgress}
+      icon={icon}
+      title={title}
+      message={message}
+      hint={hint}
+      dismissLabel={dismissLabel}
+      onDismiss={onDismiss}
+      backgroundColor={modalBackgroundColor || tokens.colors.surface}
+      textColor={textColor || tokens.colors.textPrimary}
+      hintColor={hintColor || tokens.colors.textTertiary}
+      progressColor={progressColor || tokens.colors.primary}
+      progressBackgroundColor={
+        progressBackgroundColor || tokens.colors.surfaceVariant
+      }
+      dismissButtonColor={dismissButtonColor || tokens.colors.primary}
+    />
+  );
 
-    return (
-      <Modal
-        visible={visible}
-        transparent
-        animationType="fade"
-        statusBarTranslucent
-      >
-        <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
-          {content}
-        </View>
-      </Modal>
-    );
-  };
+  return (
+    <BaseModal
+      visible={visible}
+      onClose={handleClose}
+      dismissOnBackdrop={false}
+      contentStyle={styles.modalContent}
+    >
+      {content}
+    </BaseModal>
+  );
+};
 
 const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
+  modalContent: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    padding: 24,
+    width: "100%",
+    height: "auto",
     justifyContent: "center",
     alignItems: "center",
-    padding: 20,
   },
 });

package/src/presentation/components/PhotoUploadCard/PhotoUploadCard.tsx

@@ -0,0 +1,243 @@
+/**
+ * PhotoUploadCard Component
+ * Beautiful photo upload card with validation status and responsive design
+ *
+ * @package @umituz/react-native-ai-generation-content
+ */
+
+import React, { useMemo } from "react";
+import {
+  View,
+  Image,
+  StyleSheet,
+  Pressable,
+  TouchableOpacity,
+  ActivityIndicator,
+  type ViewStyle,
+  type StyleProp,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface PhotoUploadCardConfig {
+  aspectRatio?: number;
+  borderRadius?: number;
+  iconSize?: number;
+  showValidationStatus?: boolean;
+  allowChange?: boolean;
+  borderStyle?: "solid" | "dashed";
+}
+
+export interface PhotoUploadCardProps {
+  imageUri: string | null;
+  onPress: () => void;
+  isValidating?: boolean;
+  isValid?: boolean | null;
+  disabled?: boolean;
+  config?: PhotoUploadCardConfig;
+  translations: {
+    tapToUpload: string;
+    selectPhoto: string;
+    change: string;
+    analyzing?: string;
+  };
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_CONFIG: PhotoUploadCardConfig = {
+  aspectRatio: 1,
+  borderRadius: 28,
+  iconSize: 40,
+  showValidationStatus: true,
+  allowChange: true,
+  borderStyle: "dashed",
+};
+
+export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
+  imageUri,
+  onPress,
+  isValidating = false,
+  isValid = null,
+  disabled = false,
+  config = DEFAULT_CONFIG,
+  translations,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_CONFIG, ...config };
+
+  const borderColor = useMemo(() => {
+    if (!cfg.showValidationStatus) {
+      return `${tokens.colors.primary}40`;
+    }
+    if (isValidating) return tokens.colors.primary;
+    if (isValid === true) return tokens.colors.success;
+    if (isValid === false) return tokens.colors.error;
+    return `${tokens.colors.primary}40`;
+  }, [isValidating, isValid, tokens, cfg.showValidationStatus]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginHorizontal: 24,
+          marginBottom: 24,
+        },
+        card: {
+          aspectRatio: cfg.aspectRatio,
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderRadius: cfg.borderRadius,
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+          borderWidth: 2,
+          borderStyle: imageUri ? "solid" : cfg.borderStyle,
+        },
+        placeholder: {
+          alignItems: "center",
+          padding: 32,
+        },
+        iconCircle: {
+          width: 88,
+          height: 88,
+          borderRadius: 44,
+          justifyContent: "center",
+          alignItems: "center",
+          marginBottom: 20,
+          borderWidth: 2,
+          borderColor: `${tokens.colors.primary}30`,
+        },
+        iconGradient: {
+          width: 88,
+          height: 88,
+          borderRadius: 44,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        title: {
+          fontSize: 20,
+          fontWeight: "700",
+          color: tokens.colors.textPrimary,
+          marginBottom: 8,
+          letterSpacing: 0.3,
+        },
+        subtitle: {
+          fontSize: 14,
+          color: tokens.colors.textSecondary,
+          textAlign: "center",
+          lineHeight: 20,
+          maxWidth: 240,
+        },
+        image: {
+          width: "100%",
+          height: "100%",
+          resizeMode: "cover",
+        },
+        imageOverlay: {
+          ...StyleSheet.absoluteFillObject,
+          backgroundColor: "rgba(0,0,0,0.15)",
+        },
+        changeButton: {
+          position: "absolute",
+          bottom: 20,
+          right: 20,
+          backgroundColor: tokens.colors.surface,
+          paddingHorizontal: 18,
+          paddingVertical: 12,
+          borderRadius: 28,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+        },
+        changeText: {
+          fontSize: 14,
+          fontWeight: "700",
+          color: tokens.colors.primary,
+        },
+        validatingContainer: {
+          alignItems: "center",
+          padding: 32,
+        },
+        validatingText: {
+          fontSize: 16,
+          fontWeight: "600",
+          color: tokens.colors.primary,
+          marginTop: 20,
+        },
+        pulseRing: {
+          position: "absolute",
+          width: 100,
+          height: 100,
+          borderRadius: 50,
+          borderWidth: 2,
+          borderColor: `${tokens.colors.primary}30`,
+        },
+      }),
+    [tokens, imageUri, cfg],
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        style={[styles.card, { borderColor }]}
+        onPress={onPress}
+        disabled={disabled || isValidating}
+      >
+        {isValidating ? (
+          <View style={styles.validatingContainer}>
+            <View style={styles.pulseRing} />
+            <ActivityIndicator size="large" color={tokens.colors.primary} />
+            <AtomicText style={styles.validatingText}>
+              {translations.analyzing || "Analyzing..."}
+            </AtomicText>
+          </View>
+        ) : imageUri ? (
+          <>
+            <Image source={{ uri: imageUri }} style={styles.image} />
+            <View style={styles.imageOverlay} />
+            {cfg.allowChange && (
+              <TouchableOpacity style={styles.changeButton} onPress={onPress}>
+                <AtomicIcon
+                  name="camera"
+                  size={18}
+                  customColor={tokens.colors.primary}
+                />
+                <AtomicText style={styles.changeText}>
+                  {translations.change}
+                </AtomicText>
+              </TouchableOpacity>
+            )}
+          </>
+        ) : (
+          <View style={styles.placeholder}>
+            <View style={styles.iconCircle}>
+              <LinearGradient
+                colors={[
+                  `${tokens.colors.primary}20`,
+                  `${tokens.colors.primary}10`,
+                ]}
+                style={styles.iconGradient}
+              >
+                <AtomicIcon
+                  name="camera"
+                  size={cfg.iconSize}
+                  customColor={tokens.colors.primary}
+                />
+              </LinearGradient>
+            </View>
+            <AtomicText style={styles.title}>
+              {translations.tapToUpload}
+            </AtomicText>
+            <AtomicText style={styles.subtitle}>
+              {translations.selectPhoto}
+            </AtomicText>
+          </View>
+        )}
+      </Pressable>
+    </View>
+  );
+};

package/src/presentation/components/PhotoUploadCard/index.ts

@@ -0,0 +1,5 @@
+export { PhotoUploadCard } from "./PhotoUploadCard";
+export type {
+  PhotoUploadCardProps,
+  PhotoUploadCardConfig,
+} from "./PhotoUploadCard";

package/src/presentation/components/index.ts

@@ -27,3 +27,4 @@ export * from "./image-picker";
 export * from "./buttons";
 export * from "./display";
 export * from "./headers";
+export * from "./PhotoUploadCard";