@umituz/react-native-ai-generation-content 1.12.3 → 1.12.5

package/src/domains/feature-background/presentation/components/ProcessingModal.tsx

@@ -0,0 +1,113 @@
+/**
+ * Processing Modal Component
+ * @description Modal shown during processing with progress
+ */
+
+import React, { memo } from "react";
+import { Modal, View, StyleSheet, ActivityIndicator } from "react-native";
+import {
+    AtomicText,
+    useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ProcessingModalProps } from "../../domain/entities";
+
+export const ProcessingModal: React.FC<ProcessingModalProps> = memo(
+    function ProcessingModal({ visible, progress = 0, title }) {
+        const tokens = useAppDesignTokens();
+
+        return (
+            <Modal
+                visible={visible}
+                transparent
+                animationType="fade"
+                statusBarTranslucent
+            >
+                <View style={styles.overlay}>
+                    <View
+                        style={[
+                            styles.content,
+                            { backgroundColor: tokens.colors.surface },
+                        ]}
+                    >
+                        <ActivityIndicator
+                            size="large"
+                            color={tokens.colors.primary}
+                        />
+                        {title && (
+                            <AtomicText
+                                type="bodyLarge"
+                                style={[
+                                    styles.title,
+                                    { color: tokens.colors.textPrimary },
+                                ]}
+                            >
+                                {title}
+                            </AtomicText>
+                        )}
+                        {progress > 0 && (
+                            <View style={styles.progressContainer}>
+                                <View
+                                    style={[
+                                        styles.progressBar,
+                                        { backgroundColor: tokens.colors.surfaceSecondary },
+                                    ]}
+                                >
+                                    <View
+                                        style={[
+                                            styles.progressFill,
+                                            {
+                                                backgroundColor: tokens.colors.primary,
+                                                width: `${Math.min(progress, 100)}%`,
+                                            },
+                                        ]}
+                                    />
+                                </View>
+                                <AtomicText
+                                    type="bodySmall"
+                                    style={{ color: tokens.colors.textSecondary }}
+                                >
+                                    {Math.round(progress)}%
+                                </AtomicText>
+                            </View>
+                        )}
+                    </View>
+                </View>
+            </Modal>
+        );
+    }
+);
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    content: {
+        padding: 32,
+        borderRadius: 20,
+        alignItems: "center",
+        minWidth: 200,
+    },
+    title: {
+        marginTop: 16,
+        textAlign: "center",
+    },
+    progressContainer: {
+        marginTop: 16,
+        alignItems: "center",
+        width: "100%",
+    },
+    progressBar: {
+        width: "100%",
+        height: 6,
+        borderRadius: 3,
+        overflow: "hidden",
+        marginBottom: 8,
+    },
+    progressFill: {
+        height: "100%",
+        borderRadius: 3,
+    },
+});

package/src/domains/feature-background/presentation/components/PromptInput.tsx

@@ -0,0 +1,142 @@
+/**
+ * Prompt Input Component
+ * @description Text input with sample prompt chips
+ */
+
+import React, { memo } from "react";
+import { View, TextInput, StyleSheet, TouchableOpacity } from "react-native";
+import {
+    AtomicText,
+    useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { PromptInputProps } from "../../domain/entities";
+import { DEFAULT_SAMPLE_PROMPTS } from "../../infrastructure/constants";
+
+export const PromptInput: React.FC<PromptInputProps> = memo(
+    function PromptInput({
+        value,
+        onChangeText,
+        isProcessing,
+        label,
+        placeholder,
+        samplePrompts = DEFAULT_SAMPLE_PROMPTS,
+        samplePromptsLabel,
+    }) {
+        const tokens = useAppDesignTokens();
+
+        return (
+            <View style={styles.container}>
+                {label && (
+                    <AtomicText
+                        type="labelLarge"
+                        style={[
+                            styles.label,
+                            {
+                                color: tokens.colors.textPrimary,
+                                marginBottom: tokens.spacing.sm,
+                            },
+                        ]}
+                    >
+                        {label}
+                    </AtomicText>
+                )}
+
+                <TextInput
+                    value={value}
+                    onChangeText={onChangeText}
+                    placeholder={placeholder}
+                    placeholderTextColor={tokens.colors.textTertiary}
+                    multiline
+                    numberOfLines={4}
+                    editable={!isProcessing}
+                    style={[
+                        styles.input,
+                        {
+                            backgroundColor: tokens.colors.surface,
+                            borderColor: tokens.colors.border,
+                            color: tokens.colors.textPrimary,
+                        },
+                    ]}
+                />
+
+                {samplePrompts.length > 0 && (
+                    <>
+                        {samplePromptsLabel && (
+                            <AtomicText
+                                type="labelMedium"
+                                style={[
+                                    styles.sampleLabel,
+                                    {
+                                        color: tokens.colors.textSecondary,
+                                        marginTop: tokens.spacing.md,
+                                        marginBottom: tokens.spacing.sm,
+                                    },
+                                ]}
+                            >
+                                {samplePromptsLabel}
+                            </AtomicText>
+                        )}
+
+                        <View style={styles.sampleContainer}>
+                            {samplePrompts.map((prompt) => (
+                                <TouchableOpacity
+                                    key={prompt.id}
+                                    style={[
+                                        styles.sampleChip,
+                                        {
+                                            backgroundColor: tokens.colors.surfaceSecondary,
+                                            borderColor: tokens.colors.border,
+                                        },
+                                    ]}
+                                    onPress={() => onChangeText(prompt.text)}
+                                    disabled={isProcessing}
+                                >
+                                    <AtomicText
+                                        type="bodySmall"
+                                        style={{ color: tokens.colors.textSecondary }}
+                                        numberOfLines={1}
+                                    >
+                                        {prompt.text}
+                                    </AtomicText>
+                                </TouchableOpacity>
+                            ))}
+                        </View>
+                    </>
+                )}
+            </View>
+        );
+    }
+);
+
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: 16,
+    },
+    label: {
+        fontWeight: "600",
+    },
+    input: {
+        minHeight: 120,
+        borderWidth: 1,
+        borderRadius: 16,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        fontSize: 16,
+        textAlignVertical: "top",
+        lineHeight: 24,
+    },
+    sampleLabel: {
+        fontWeight: "500",
+    },
+    sampleContainer: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 8,
+    },
+    sampleChip: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 20,
+        borderWidth: 1,
+    },
+});

package/src/domains/feature-background/presentation/components/ResultDisplay.tsx

@@ -0,0 +1,123 @@
+/**
+ * Result Display Component
+ * @description Displays processed image with save/reset actions
+ */
+
+import React, { memo } from "react";
+import { View, StyleSheet, Image, TouchableOpacity } from "react-native";
+import {
+    AtomicText,
+    AtomicIcon,
+    useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ResultDisplayProps } from "../../domain/entities";
+
+export const ResultDisplay: React.FC<ResultDisplayProps> = memo(
+    function ResultDisplay({
+        imageUrl,
+        isProcessing,
+        onSave,
+        onReset,
+        saveButtonText,
+        resetButtonText,
+    }) {
+        const tokens = useAppDesignTokens();
+
+        if (!imageUrl || isProcessing) {
+            return null;
+        }
+
+        return (
+            <View style={styles.container}>
+                <View style={styles.resultContainer}>
+                    <Image
+                        source={{ uri: imageUrl }}
+                        style={styles.resultImage}
+                        resizeMode="cover"
+                    />
+                </View>
+
+                <View style={styles.actionsContainer}>
+                    <TouchableOpacity
+                        style={[
+                            styles.actionButton,
+                            { backgroundColor: tokens.colors.backgroundSecondary },
+                        ]}
+                        onPress={onReset}
+                    >
+                        <AtomicIcon
+                            name="refresh-cw"
+                            size={20}
+                            color="onSurface"
+                        />
+                        <AtomicText
+                            type="labelLarge"
+                            style={[styles.actionText, { color: tokens.colors.textPrimary }]}
+                        >
+                            {resetButtonText}
+                        </AtomicText>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity
+                        style={[
+                            styles.actionButton,
+                            { backgroundColor: tokens.colors.success },
+                        ]}
+                        onPress={onSave}
+                    >
+                        <AtomicIcon
+                            name="download"
+                            size={20}
+                            color="onPrimary"
+                        />
+                        <AtomicText
+                            type="labelLarge"
+                            style={[
+                                styles.actionText,
+                                { color: tokens.colors.backgroundPrimary },
+                            ]}
+                        >
+                            {saveButtonText}
+                        </AtomicText>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        );
+    }
+);
+
+const styles = StyleSheet.create({
+    container: {
+        marginTop: 24,
+        marginBottom: 16,
+    },
+    resultContainer: {
+        width: "100%",
+        aspectRatio: 1,
+        borderRadius: 24,
+        overflow: "hidden",
+        marginBottom: 16,
+        borderWidth: 1,
+        borderColor: "rgba(255,255,255,0.1)",
+    },
+    resultImage: {
+        width: "100%",
+        height: "100%",
+    },
+    actionsContainer: {
+        flexDirection: "row",
+        gap: 12,
+    },
+    actionButton: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: 14,
+        borderRadius: 16,
+        gap: 8,
+    },
+    actionText: {
+        fontWeight: "600",
+    },
+});

package/src/domains/feature-background/presentation/components/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Presentation Components Export
+ */
+
+export { BackgroundFeature } from "./BackgroundFeature";
+export type { BackgroundFeatureProps } from "./BackgroundFeature";
+
+export { ImagePicker } from "./ImagePicker";
+export { PromptInput } from "./PromptInput";
+export { GenerateButton } from "./GenerateButton";
+export { ResultDisplay } from "./ResultDisplay";
+export { ErrorDisplay } from "./ErrorDisplay";
+export { ProcessingModal } from "./ProcessingModal";
+export { FeatureHeader } from "./FeatureHeader";
+export { ComparisonSlider } from "./ComparisonSlider";
+export { ModeSelector } from "./ModeSelector";

package/src/domains/feature-background/presentation/hooks/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Presentation Hooks Export
+ */
+
+export { useBackgroundFeature } from "./useBackgroundFeature";
+
+export type { UseBackgroundFeatureReturn } from "./useBackgroundFeature";

package/src/domains/feature-background/presentation/hooks/useBackgroundFeature.ts

@@ -0,0 +1,118 @@
+/**
+ * useBackgroundFeature Hook
+ * @description Main hook for background feature state and actions
+ */
+
+import { useCallback, useState } from "react";
+import type {
+    BackgroundFeatureState,
+    BackgroundProcessResult,
+    UseBackgroundFeatureConfig,
+    StudioMode,
+} from "../../domain/entities";
+
+export interface UseBackgroundFeatureReturn extends BackgroundFeatureState {
+    readonly selectImage: () => Promise<void>;
+    readonly process: (prompt?: string) => Promise<void>;
+    readonly save: () => Promise<void>;
+    readonly reset: () => void;
+    readonly setPrompt: (prompt: string) => void;
+    readonly setMode: (mode: StudioMode) => void;
+}
+
+export function useBackgroundFeature(
+    config: UseBackgroundFeatureConfig
+): UseBackgroundFeatureReturn {
+    const [imageUri, setImageUri] = useState<string | null>(null);
+    const [prompt, setPrompt] = useState<string>("");
+    const [processedUrl, setProcessedUrl] = useState<string | null>(null);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [error, setError] = useState<string | null>(null);
+    const [mode, setMode] = useState<StudioMode>(
+        config.defaultMode ?? "transparent"
+    );
+
+    const selectImage = useCallback(async (): Promise<void> => {
+        if (!config.onSelectImage) {
+            return;
+        }
+
+        try {
+            const uri = await config.onSelectImage();
+            if (uri) {
+                setImageUri(uri);
+                setError(null);
+                setProcessedUrl(null);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to select image");
+        }
+    }, [config]);
+
+    const process = useCallback(
+        async (newPrompt?: string): Promise<void> => {
+            if (!imageUri) {
+                setError("Please select an image first");
+                return;
+            }
+
+            const currentPrompt = newPrompt ?? prompt;
+            setIsProcessing(true);
+            setProgress(0);
+            setError(null);
+
+            try {
+                const result: BackgroundProcessResult = await config.processRequest({
+                    imageUri,
+                    prompt: currentPrompt,
+                    mode,
+                    onProgress: setProgress,
+                });
+
+                if (result.success && result.imageUrl) {
+                    setProcessedUrl(result.imageUrl);
+                } else {
+                    setError(result.error || "Processing failed");
+                }
+            } catch (err) {
+                setError(err instanceof Error ? err.message : "Processing failed");
+            } finally {
+                setIsProcessing(false);
+                setProgress(0);
+            }
+        },
+        [imageUri, prompt, mode, config]
+    );
+
+    const save = useCallback(async (): Promise<void> => {
+        if (!processedUrl) {
+            return;
+        }
+    }, [processedUrl]);
+
+    const reset = useCallback((): void => {
+        setImageUri(null);
+        setPrompt("");
+        setProcessedUrl(null);
+        setIsProcessing(false);
+        setProgress(0);
+        setError(null);
+    }, []);
+
+    return {
+        imageUri,
+        prompt,
+        processedUrl,
+        isProcessing,
+        progress,
+        error,
+        mode,
+        selectImage,
+        process,
+        save,
+        reset,
+        setPrompt,
+        setMode,
+    };
+}

package/src/index.ts

@@ -227,3 +227,27 @@ export type {
 // =============================================================================
 
 export * from "./domains/prompts";
+
+// =============================================================================
+// DOMAINS - Content Moderation
+// =============================================================================
+
+export * from "./domains/content-moderation";
+
+// =============================================================================
+// DOMAINS - AI Creations
+// =============================================================================
+
+export * from "./domains/creations";
+
+// =============================================================================
+// DOMAINS - Face Detection
+// =============================================================================
+
+export * from "./domains/face-detection";
+
+// =============================================================================
+// DOMAINS - Feature Background
+// =============================================================================
+
+export * from "./domains/feature-background";