@umituz/react-native-ai-generation-content 1.17.218 → 1.17.220

package/src/presentation/components/GenerationProgressContent.tsx

@@ -5,33 +5,15 @@
  */
 
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { View } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ProgressCloseButton } from "./ProgressCloseButton";
+import { ProgressHeader } from "./ProgressHeader";
+import { ProgressHint } from "./ProgressHint";
+import { ProgressDismissButton } from "./ProgressDismissButton";
 import { GenerationProgressBar } from "./GenerationProgressBar";
-
-export interface GenerationProgressContentProps {
-  readonly progress: number;
-  readonly icon?: string;
-  readonly title?: string;
-  readonly message?: string;
-  readonly hint?: string;
-  readonly dismissLabel?: string;
-  readonly onDismiss?: () => void;
-  /** Close button in top-right corner for background generation */
-  readonly onClose?: () => void;
-  /** Hint text shown near close button (e.g., "Continue in background") */
-  readonly backgroundHint?: string;
-  readonly backgroundColor?: string;
-  readonly textColor?: string;
-  readonly hintColor?: string;
-  readonly progressColor?: string;
-  readonly progressBackgroundColor?: string;
-  readonly dismissButtonColor?: string;
-}
+import { generationProgressContentStyles } from "./GenerationProgressContent.styles";
+import type { GenerationProgressContentProps } from "./GenerationProgressContent.types";
 
 export const GenerationProgressContent: React.FC<
   GenerationProgressContentProps
@@ -53,55 +35,26 @@ export const GenerationProgressContent: React.FC<
   dismissButtonColor,
 }) => {
   const tokens = useAppDesignTokens();
-
-  const activeTextColor = textColor || tokens.colors.textPrimary;
   const activeBgColor = backgroundColor || tokens.colors.surface;
-  const activeHintColor = hintColor || tokens.colors.textTertiary;
 
   return (
     <View
       style={[
-        styles.modal,
+        generationProgressContentStyles.modal,
         {
           backgroundColor: activeBgColor,
           borderColor: tokens.colors.borderLight,
         },
       ]}
     >
-      {/* Close button in top-right corner */}
-      {onClose && (
-        <TouchableOpacity
-          style={styles.closeButton}
-          onPress={onClose}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        >
-          <AtomicIcon name="close" size="md" color="secondary" />
-        </TouchableOpacity>
-      )}
-
-      {icon && (
-        <View style={styles.iconContainer}>
-          <AtomicIcon name={icon} size="xl" color="primary" />
-        </View>
-      )}
-
-      {title && (
-        <AtomicText
-          type="headlineSmall"
-          style={[styles.title, { color: activeTextColor }]}
-        >
-          {title}
-        </AtomicText>
-      )}
+      {onClose && <ProgressCloseButton onPress={onClose} />}
 
-      {message && (
-        <AtomicText
-          type="bodyMedium"
-          style={[styles.message, { color: tokens.colors.textSecondary }]}
-        >
-          {message}
-        </AtomicText>
-      )}
+      <ProgressHeader
+        icon={icon}
+        title={title}
+        message={message}
+        textColor={textColor}
+      />
 
       <GenerationProgressBar
         progress={progress}
@@ -110,107 +63,22 @@ export const GenerationProgressContent: React.FC<
         backgroundColor={progressBackgroundColor}
       />
 
-      {hint && (
-        <AtomicText
-          type="bodySmall"
-          style={[styles.hint, { color: activeHintColor }]}
-        >
-          {hint}
-        </AtomicText>
-      )}
-
-      {/* Background hint - clickable to close and continue in background */}
-      {onClose && backgroundHint && (
-        <TouchableOpacity
-          style={styles.backgroundHintButton}
-          onPress={onClose}
-        >
-          <AtomicText
-            type="bodySmall"
-            style={[styles.backgroundHintText, { color: tokens.colors.primary }]}
-          >
-            {backgroundHint}
-          </AtomicText>
-        </TouchableOpacity>
-      )}
+      <ProgressHint
+        hint={hint}
+        backgroundHint={backgroundHint}
+        hintColor={hintColor}
+        onBackgroundHintPress={onClose}
+      />
 
       {onDismiss && (
-        <TouchableOpacity
-          style={[
-            styles.dismissButton,
-            { backgroundColor: dismissButtonColor || tokens.colors.primary },
-          ]}
-          onPress={onDismiss}
-        >
-          <AtomicText
-            type="bodyMedium"
-            style={[styles.dismissText, { color: tokens.colors.textInverse }]}
-          >
-            {dismissLabel || "OK"}
-          </AtomicText>
-        </TouchableOpacity>
+        <ProgressDismissButton
+          dismissLabel={dismissLabel}
+          dismissButtonColor={dismissButtonColor}
+          onDismiss={onDismiss}
+        />
       )}
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  modal: {
-    width: "100%",
-    maxWidth: 380,
-    borderRadius: 24,
-    padding: 32,
-    borderWidth: 1,
-    alignItems: "center",
-    position: "relative",
-  },
-  closeButton: {
-    position: "absolute",
-    top: 16,
-    right: 16,
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    justifyContent: "center",
-    alignItems: "center",
-    zIndex: 1,
-  },
-  iconContainer: {
-    marginBottom: 20,
-  },
-  title: {
-    fontWeight: "700",
-    marginBottom: 8,
-    textAlign: "center",
-  },
-  message: {
-    marginBottom: 28,
-    textAlign: "center",
-    lineHeight: 20,
-  },
-  hint: {
-    textAlign: "center",
-    lineHeight: 18,
-    paddingHorizontal: 8,
-  },
-  backgroundHintButton: {
-    marginTop: 16,
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  backgroundHintText: {
-    textAlign: "center",
-    textDecorationLine: "underline",
-  },
-  dismissButton: {
-    marginTop: 16,
-    paddingVertical: 14,
-    paddingHorizontal: 32,
-    borderRadius: 12,
-    minWidth: 140,
-    alignItems: "center",
-  },
-  dismissText: {
-    fontWeight: "600",
-  },
-});
+export type { GenerationProgressContentProps } from "./GenerationProgressContent.types";

package/src/presentation/components/GenerationProgressContent.types.ts

@@ -0,0 +1,23 @@
+/**
+ * GenerationProgressContent Type Definitions
+ */
+
+export interface GenerationProgressContentProps {
+  readonly progress: number;
+  readonly icon?: string;
+  readonly title?: string;
+  readonly message?: string;
+  readonly hint?: string;
+  readonly dismissLabel?: string;
+  readonly onDismiss?: () => void;
+  /** Close button in top-right corner for background generation */
+  readonly onClose?: () => void;
+  /** Hint text shown near close button (e.g., "Continue in background") */
+  readonly backgroundHint?: string;
+  readonly backgroundColor?: string;
+  readonly textColor?: string;
+  readonly hintColor?: string;
+  readonly progressColor?: string;
+  readonly progressBackgroundColor?: string;
+  readonly dismissButtonColor?: string;
+}

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

@@ -0,0 +1,48 @@
+/**
+ * ImageContent Component
+ * Displays uploaded image with change button
+ */
+
+import React from "react";
+import { Image, TouchableOpacity, View } from "react-native";
+import {
+  AtomicIcon,
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { PhotoUploadCardStyles } from "./PhotoUploadCard.styles";
+
+interface ImageContentProps {
+  styles: PhotoUploadCardStyles;
+  imageUri: string;
+  allowChange: boolean;
+  changeText: string;
+  onPress: () => void;
+}
+
+export function ImageContent({
+  styles,
+  imageUri,
+  allowChange,
+  changeText,
+  onPress,
+}: ImageContentProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <>
+      <Image source={{ uri: imageUri }} style={styles.image} />
+      <View style={styles.imageOverlay} />
+      {allowChange && (
+        <TouchableOpacity style={styles.changeButton} onPress={onPress}>
+          <AtomicIcon
+            name="camera"
+            size={18}
+            customColor={tokens.colors.primary}
+          />
+          <AtomicText style={styles.changeText}>{changeText}</AtomicText>
+        </TouchableOpacity>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,112 @@
+/**
+ * PhotoUploadCard Styles
+ */
+
+import { StyleSheet } from "react-native";
+import type { DesignTokens } from "@umituz/react-native-design-system";
+import type { PhotoUploadCardConfig } from "./PhotoUploadCard.types";
+
+export type PhotoUploadCardStyles = ReturnType<typeof createPhotoUploadCardStyles>;
+
+interface CreateStylesParams {
+  tokens: DesignTokens;
+  imageUri: string | null;
+  config: PhotoUploadCardConfig;
+}
+
+export function createPhotoUploadCardStyles({
+  tokens,
+  imageUri,
+  config,
+}: CreateStylesParams) {
+  return StyleSheet.create({
+    container: {
+      marginHorizontal: 24,
+      marginBottom: 24,
+    },
+    card: {
+      aspectRatio: config.aspectRatio,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      borderRadius: config.borderRadius,
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+      borderWidth: 2,
+      borderStyle: imageUri ? "solid" : config.borderStyle,
+    },
+    placeholder: {
+      alignItems: "center",
+      padding: 32,
+    },
+    iconCircle: {
+      width: 88,
+      height: 88,
+      borderRadius: 44,
+      justifyContent: "center",
+      alignItems: "center",
+      marginBottom: 20,
+      borderWidth: 2,
+      borderColor: tokens.colors.borderLight,
+      backgroundColor: tokens.colors.surfaceSecondary,
+    },
+    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: tokens.colors.modalOverlay,
+      opacity: 0.3,
+    },
+    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.borderLight,
+    },
+  });
+}

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

@@ -6,58 +6,15 @@
  */
 
 import React, { useMemo } from "react";
-import {
-  View,
-  Image,
-  StyleSheet,
-  Pressable,
-  TouchableOpacity,
-  type ViewStyle,
-  type StyleProp,
-} from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  AtomicSpinner,
-  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;
-  };
-  title?: string;
-  subtitle?: string;
-  icon?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const DEFAULT_CONFIG: PhotoUploadCardConfig = {
-  aspectRatio: 1,
-  borderRadius: 28,
-  iconSize: 40,
-  showValidationStatus: true,
-  allowChange: true,
-  borderStyle: "dashed",
-};
+import { View, Pressable } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ValidatingContent } from "./ValidatingContent";
+import { ImageContent } from "./ImageContent";
+import { PlaceholderContent } from "./PlaceholderContent";
+import { useBorderColor } from "./useBorderColor";
+import { createPhotoUploadCardStyles } from "./PhotoUploadCard.styles";
+import type { PhotoUploadCardProps } from "./PhotoUploadCard.types";
+import { DEFAULT_CONFIG } from "./PhotoUploadCard.types";
 
 export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
   imageUri,
@@ -65,7 +22,7 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
   isValidating = false,
   isValid = null,
   disabled = false,
-  config = DEFAULT_CONFIG,
+  config,
   translations = {
     tapToUpload: "Tap to Upload",
     selectPhoto: "Select a photo",
@@ -79,110 +36,15 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const cfg = { ...DEFAULT_CONFIG, ...config };
-
-  const borderColor = useMemo(() => {
-    if (!cfg.showValidationStatus) {
-      return tokens.colors.borderLight;
-    }
-    if (isValidating) return tokens.colors.primary;
-    if (isValid === true) return tokens.colors.success;
-    if (isValid === false) return tokens.colors.error;
-    return tokens.colors.borderLight;
-  }, [isValidating, isValid, tokens, cfg.showValidationStatus]);
+  const borderColor = useBorderColor({
+    isValidating,
+    isValid,
+    showValidationStatus: cfg.showValidationStatus ?? true,
+  });
 
   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.borderLight,
-          backgroundColor: tokens.colors.surfaceSecondary,
-        },
-        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: tokens.colors.modalOverlay,
-          opacity: 0.3,
-        },
-        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.borderLight,
-        },
-      }),
-    [tokens, imageUri, cfg],
+    () => createPhotoUploadCardStyles({ tokens, imageUri, config: cfg }),
+    [tokens, imageUri, cfg]
   );
 
   return (
@@ -193,49 +55,31 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
         disabled={disabled || isValidating}
       >
         {isValidating ? (
-          <View style={styles.validatingContainer}>
-            <View style={styles.pulseRing} />
-            <AtomicSpinner size="lg" color="primary" />
-            <AtomicText style={styles.validatingText}>
-              {translations.analyzing || "Analyzing..."}
-            </AtomicText>
-          </View>
+          <ValidatingContent
+            styles={styles}
+            analyzingText={translations.analyzing}
+          />
         ) : 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>
-            )}
-          </>
+          <ImageContent
+            styles={styles}
+            imageUri={imageUri}
+            allowChange={cfg.allowChange ?? true}
+            changeText={translations.change}
+            onPress={onPress}
+          />
         ) : (
-          <View style={styles.placeholder}>
-            <View style={styles.iconCircle}>
-              <AtomicIcon
-                name={(icon as string) || "camera"}
-                size={cfg.iconSize}
-                customColor={tokens.colors.primary}
-              />
-            </View>
-            <AtomicText style={styles.title}>
-              {title || translations.tapToUpload}
-            </AtomicText>
-            <AtomicText style={styles.subtitle}>
-              {subtitle || translations.selectPhoto}
-            </AtomicText>
-          </View>
+          <PlaceholderContent
+            styles={styles}
+            title={title || translations.tapToUpload}
+            subtitle={subtitle || translations.selectPhoto}
+            icon={icon || "camera"}
+            iconSize={cfg.iconSize ?? 40}
+          />
         )}
       </Pressable>
     </View>
   );
 };
 
+export type { PhotoUploadCardProps, PhotoUploadCardConfig } from "./PhotoUploadCard.types";
+export { DEFAULT_CONFIG } from "./PhotoUploadCard.types";