@umituz/react-native-ai-generation-content 1.17.144 → 1.17.146

package/src/features/replace-background/presentation/components/ImagePicker.tsx

@@ -1,136 +0,0 @@
-/**
- * Image Picker Component
- * @description Image selection component with placeholder state
- */
-
-import React, { memo } from "react";
-import { View, StyleSheet, TouchableOpacity, Image } from "react-native";
-import {
-    AtomicText,
-    AtomicIcon,
-    useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { ImagePickerProps } from "../../domain/entities";
-
-export const ImagePicker: React.FC<ImagePickerProps> = memo(
-    function ImagePicker({
-        imageUri,
-        isProcessing,
-        onSelectImage,
-        placeholderText,
-    }) {
-        const tokens = useAppDesignTokens();
-
-        return (
-            <View style={styles.container}>
-                <TouchableOpacity
-                    style={[
-                        styles.imagePickerBox,
-                        { backgroundColor: tokens.colors.surface },
-                    ]}
-                    onPress={onSelectImage}
-                    disabled={isProcessing}
-                    activeOpacity={0.8}
-                >
-                    {imageUri ? (
-                        <View style={styles.imageContainer}>
-                            <Image source={{ uri: imageUri }} style={styles.image} />
-                            <View style={styles.imageOverlay}>
-                                <View
-                                    style={[
-                                        styles.editBadge,
-                                        { backgroundColor: tokens.colors.primary },
-                                    ]}
-                                >
-                                    <AtomicIcon
-                                        name="image-plus"
-                                        size="md"
-                                       
-                                    />
-                                </View>
-                            </View>
-                        </View>
-                    ) : (
-                        <View
-                            style={[
-                                styles.placeholderContainer,
-                                { backgroundColor: tokens.colors.surface },
-                            ]}
-                        >
-                            <View
-                                style={[
-                                    styles.uploadIconContainer,
-                                    { backgroundColor: tokens.colors.surfaceSecondary },
-                                ]}
-                            >
-                                <AtomicIcon
-                                    name="upload"
-                                    size="lg"
-                                   
-                                />
-                            </View>
-                            <AtomicText
-                                
-                                style={[
-                                    styles.placeholderText,
-                                    { color: tokens.colors.primary },
-                                ]}
-                            >
-                                {placeholderText}
-                            </AtomicText>
-                        </View>
-                    )}
-                </TouchableOpacity>
-            </View>
-        );
-    }
-);
-
-const styles = StyleSheet.create({
-    container: {
-        marginVertical: 16,
-        alignItems: "center",
-    },
-    imagePickerBox: {
-        width: "100%",
-        aspectRatio: 1,
-        borderRadius: 20,
-        overflow: "hidden",
-    },
-    imageContainer: {
-        flex: 1,
-        position: "relative",
-    },
-    image: {
-        width: "100%",
-        height: "100%",
-    },
-    imageOverlay: {
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: "25%",
-        justifyContent: "flex-end",
-        alignItems: "flex-end",
-        padding: 16,
-    },
-    editBadge: {
-        borderRadius: 20,
-        padding: 10,
-    },
-    placeholderContainer: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    uploadIconContainer: {
-        borderRadius: 50,
-        padding: 24,
-        marginBottom: 16,
-    },
-    placeholderText: {
-        textAlign: "center",
-        fontWeight: "600",
-    },
-});

package/src/features/replace-background/presentation/components/ModeSelector.tsx

@@ -1,78 +0,0 @@
-/**
- * Mode Selector Component
- * @description Horizontal scrollable mode selection toolbar
- */
-
-import * as React from "react";
-import { memo } from "react";
-import { View, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import {
-    AtomicIcon,
-    useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { ModeSelectorProps } from "../../domain/entities";
-
-export const ModeSelector: React.FC<ModeSelectorProps> = memo(
-    function ModeSelector({ activeMode, onModeChange, isProcessing, modes }) {
-        const tokens = useAppDesignTokens();
-
-        return (
-            <View
-                style={[
-                    styles.container,
-                    { backgroundColor: tokens.colors.surface },
-                ]}
-            >
-                <ScrollView
-                    horizontal
-                    showsHorizontalScrollIndicator={false}
-                    contentContainerStyle={styles.scrollContent}
-                >
-                    {modes.map((mode) => {
-                        const isActive = activeMode === mode.id;
-                        return (
-                            <TouchableOpacity
-                                key={mode.id}
-                                style={[
-                                    styles.modeButton,
-                                    isActive && {
-                                        backgroundColor: tokens.colors.primary,
-                                    },
-                                ]}
-                                onPress={() => !isProcessing && onModeChange(mode.id)}
-                                disabled={isProcessing}
-                                activeOpacity={0.7}
-                            >
-                                <AtomicIcon
-                                    name={mode.icon}
-                                    size="md"
-                                    color={isActive ? "onPrimary" : "onSurface"}
-                                />
-                            </TouchableOpacity>
-                        );
-                    })}
-                </ScrollView>
-            </View>
-        );
-    }
-);
-
-const styles = StyleSheet.create({
-    container: {
-        borderRadius: 24,
-        paddingVertical: 8,
-        paddingHorizontal: 4,
-    },
-    scrollContent: {
-        flexDirection: "row",
-        gap: 8,
-        paddingHorizontal: 8,
-    },
-    modeButton: {
-        width: 48,
-        height: 48,
-        borderRadius: 16,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-});

package/src/features/replace-background/presentation/components/PromptInput.tsx

@@ -1,142 +0,0 @@
-/**
- * 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
-                        
-                        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
-                    
-                    editable={!isProcessing}
-                    style={[
-                        styles.input,
-                        {
-                            backgroundColor: tokens.colors.surface,
-                            borderColor: tokens.colors.border,
-                            color: tokens.colors.textPrimary,
-                        },
-                    ]}
-                />
-
-                {samplePrompts.length > 0 && (
-                    <>
-                        {samplePromptsLabel && (
-                            <AtomicText
-                                
-                                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
-                                        
-                                        style={{ color: tokens.colors.textSecondary }}
-                                        
-                                    >
-                                        {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/features/replace-background/presentation/components/ResultDisplay.tsx

@@ -1,122 +0,0 @@
-/**
- * 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, { borderColor: tokens.colors.borderLight }]}>
-                    <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="md"
-                           
-                        />
-                        <AtomicText
-                            
-                            style={[styles.actionText, { color: tokens.colors.textPrimary }]}
-                        >
-                            {resetButtonText}
-                        </AtomicText>
-                    </TouchableOpacity>
-
-                    <TouchableOpacity
-                        style={[
-                            styles.actionButton,
-                            { backgroundColor: tokens.colors.success },
-                        ]}
-                        onPress={onSave}
-                    >
-                        <AtomicIcon
-                            name="download"
-                            size="md"
-                           
-                        />
-                        <AtomicText
-                            
-                            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,
-    },
-    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/features/replace-background/presentation/hooks/useBackgroundFeature.ts

@@ -1,119 +0,0 @@
-/**
- * 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((): Promise<void> => {
-        if (!processedUrl) {
-            return Promise.resolve();
-        }
-        return Promise.resolve();
-    }, [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,
-    };
-}