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

package/src/features/replace-background/domain/entities/config.types.ts

@@ -1,41 +0,0 @@
-/**
- * Configuration Types
- * @description Configuration interfaces for background feature
- */
-
-import type {
-    BackgroundProcessRequest,
-    BackgroundProcessResult,
-    StudioMode,
-} from "./background.types";
-
-/**
- * Process request callback parameters
- */
-export interface ProcessRequestParams extends BackgroundProcessRequest {
-    readonly onProgress?: (progress: number) => void;
-}
-
-/**
- * Background feature configuration
- */
-export interface BackgroundFeatureConfig {
-    readonly onProcess: (
-        params: ProcessRequestParams
-    ) => Promise<BackgroundProcessResult>;
-    readonly onSave?: (imageUrl: string) => Promise<void>;
-    readonly onError?: (error: Error) => void;
-    readonly onSuccess?: (result: BackgroundProcessResult) => void;
-    readonly defaultMode?: StudioMode;
-}
-
-/**
- * Hook configuration
- */
-export interface UseBackgroundFeatureConfig {
-    readonly processRequest: (
-        params: ProcessRequestParams
-    ) => Promise<BackgroundProcessResult>;
-    readonly onSelectImage?: () => Promise<string | null>;
-    readonly defaultMode?: StudioMode;
-}

package/src/features/replace-background/domain/entities/index.ts

@@ -1,30 +0,0 @@
-/**
- * Domain Entities Export
- */
-
-export type {
-    BackgroundProcessRequest,
-    BackgroundProcessResult,
-    BackgroundFeatureState,
-    SamplePrompt,
-    StudioMode,
-    StudioModeConfig,
-    ComparisonState,
-} from "./background.types";
-
-export type {
-    ImagePickerProps,
-    PromptInputProps,
-    GenerateButtonProps,
-    ResultDisplayProps,
-    ErrorDisplayProps,
-    FeatureHeaderProps,
-    ModeSelectorProps,
-    ComparisonSliderProps,
-} from "./component.types";
-
-export type {
-    ProcessRequestParams,
-    BackgroundFeatureConfig,
-    UseBackgroundFeatureConfig,
-} from "./config.types";

package/src/features/replace-background/infrastructure/constants/index.ts

@@ -1,5 +0,0 @@
-/**
- * Infrastructure Constants Export
- */
-
-export { DEFAULT_SAMPLE_PROMPTS } from "./prompts.constants";

package/src/features/replace-background/infrastructure/constants/prompts.constants.ts

@@ -1,15 +0,0 @@
-/**
- * Default Sample Prompts
- * @description Default prompt suggestions for background replacement
- */
-
-import type { SamplePrompt } from "../../domain/entities";
-
-export const DEFAULT_SAMPLE_PROMPTS: readonly SamplePrompt[] = [
-  { id: "beach", text: "Beach sunset with palm trees" },
-  { id: "office", text: "Modern office with city view" },
-  { id: "mountain", text: "Mountain landscape with snow" },
-  { id: "living-room", text: "Cozy living room interior" },
-  { id: "garden", text: "Japanese garden with cherry blossoms" },
-  { id: "cityscape", text: "Futuristic cityscape at night" },
-] as const;

package/src/features/replace-background/infrastructure/index.ts

@@ -1,5 +0,0 @@
-/**
- * Replace Background Infrastructure Export
- */
-
-export { DEFAULT_SAMPLE_PROMPTS } from "./constants";

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

@@ -1,143 +0,0 @@
-/**
- * Background Feature Component
- * @description Main feature component composing all sub-components
- */
-
-import * as React from "react";
-import { useCallback, useState } from "react";
-import { ScrollView, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import type {
-    BackgroundFeatureConfig,
-    SamplePrompt,
-} from "../../domain/entities";
-import { ImagePicker } from "./ImagePicker";
-import { PromptInput } from "./PromptInput";
-import { GenerateButton } from "./GenerateButton";
-import { ResultDisplay } from "./ResultDisplay";
-import { ErrorDisplay } from "./ErrorDisplay";
-import { FeatureHeader } from "./FeatureHeader";
-import { useBackgroundFeature } from "../hooks";
-import type { ImageSourcePropType } from "react-native";
-
-export interface BackgroundFeatureProps {
-    readonly config: BackgroundFeatureConfig;
-    readonly onSelectImage: () => Promise<string | null>;
-    readonly heroImage?: ImageSourcePropType;
-    readonly description?: string;
-    readonly promptLabel?: string;
-    readonly promptPlaceholder?: string;
-    readonly samplePrompts?: readonly SamplePrompt[];
-    readonly samplePromptsLabel?: string;
-    readonly generateButtonText?: string;
-    readonly saveButtonText?: string;
-    readonly resetButtonText?: string;
-    readonly processingText?: string;
-    readonly placeholderText?: string;
-    readonly renderProcessingModal?: (props: { visible: boolean; progress: number; title?: string }) => React.ReactNode;
-}
-
-export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
-    config,
-    onSelectImage,
-    heroImage,
-    description,
-    promptLabel,
-    promptPlaceholder,
-    samplePrompts,
-    samplePromptsLabel,
-    generateButtonText,
-    saveButtonText,
-    resetButtonText,
-    processingText,
-    placeholderText,
-    renderProcessingModal,
-}) => {
-    const tokens = useAppDesignTokens();
-    const [prompt, setPrompt] = useState("");
-
-    const feature = useBackgroundFeature({
-        processRequest: config.onProcess,
-        onSelectImage,
-    });
-
-    const handleProcess = useCallback(async () => {
-        await feature.process(prompt);
-        if (feature.processedUrl && config.onSuccess) {
-            config.onSuccess({
-                success: true,
-                imageUrl: feature.processedUrl,
-            });
-        }
-    }, [feature, prompt, config]);
-
-    const handleSave = useCallback(async () => {
-        if (feature.processedUrl && config.onSave) {
-            await config.onSave(feature.processedUrl);
-        }
-    }, [feature.processedUrl, config]);
-
-    const handleReset = useCallback(() => {
-        feature.reset();
-        setPrompt("");
-    }, [feature]);
-
-    const isDisabled = !feature.imageUri || !prompt.trim();
-
-    return (
-        <>
-            <ScrollView
-                style={[styles.container, { padding: tokens.spacing.lg }]}
-                showsVerticalScrollIndicator={false}
-            >
-                <FeatureHeader
-                    heroImage={heroImage}
-                    description={description}
-                />
-
-                <ImagePicker
-                    imageUri={feature.imageUri}
-                    isProcessing={feature.isProcessing}
-                    onSelectImage={() => { void feature.selectImage(); }}
-                    placeholderText={placeholderText}
-                />
-
-                <PromptInput
-                    value={prompt}
-                    onChangeText={setPrompt}
-                    isProcessing={feature.isProcessing}
-                    label={promptLabel}
-                    placeholder={promptPlaceholder}
-                    samplePrompts={samplePrompts}
-                    samplePromptsLabel={samplePromptsLabel}
-                />
-
-                <ErrorDisplay error={feature.error} />
-
-                <ResultDisplay
-                    imageUrl={feature.processedUrl}
-                    isProcessing={feature.isProcessing}
-                    onSave={() => { void handleSave(); }}
-                    onReset={handleReset}
-                    saveButtonText={saveButtonText}
-                    resetButtonText={resetButtonText}
-                />
-
-                <GenerateButton
-                    isDisabled={isDisabled}
-                    isProcessing={feature.isProcessing}
-                    onPress={() => { void handleProcess(); }}
-                    buttonText={generateButtonText}
-                />
-            </ScrollView>
-
-            {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress, title: processingText })}
-        </>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-});

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

@@ -1,187 +0,0 @@
-/**
- * Comparison Slider Component
- * @description Before/After comparison slider for images
- */
-
-import * as React from "react";
-import { memo, useState, useRef, useMemo } from "react";
-import { View, StyleSheet, Image, PanResponder } from "react-native";
-import {
-    AtomicText,
-    useAppDesignTokens,
-    useResponsive,
-} from "@umituz/react-native-design-system";
-import type { ComparisonSliderProps } from "../../domain/entities";
-
-export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
-    function ComparisonSlider({
-        originalUri,
-        processedUri,
-        beforeLabel,
-        afterLabel,
-    }) {
-        const tokens = useAppDesignTokens();
-        const { width: screenWidth, horizontalPadding } = useResponsive();
-        const [sliderPosition, setSliderPosition] = useState(50);
-        const containerWidth = useRef(screenWidth - horizontalPadding * 2);
-
-        const panResponder = useRef(
-            PanResponder.create({
-                onStartShouldSetPanResponder: () => true,
-                onMoveShouldSetPanResponder: () => true,
-                onPanResponderMove: (_, gestureState) => {
-                    const newPosition =
-                        ((gestureState.moveX - 16) / containerWidth.current) * 100;
-                    setSliderPosition(Math.max(0, Math.min(100, newPosition)));
-                },
-            })
-        ).current;
-
-        const themedStyles = useMemo(() => StyleSheet.create({
-            container: {
-                width: "100%",
-                aspectRatio: 1,
-                borderRadius: 20,
-                overflow: "hidden",
-            },
-            originalContainer: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                bottom: 0,
-                overflow: "hidden",
-                borderRightWidth: 2,
-                borderRightColor: tokens.colors.surface,
-            },
-            sliderHandle: {
-                position: "absolute",
-                top: "50%",
-                left: -20,
-                width: 40,
-                height: 40,
-                borderRadius: 20,
-                justifyContent: "center",
-                alignItems: "center",
-                marginTop: -20,
-                backgroundColor: tokens.colors.backgroundPrimary,
-            },
-            labelLeft: {
-                backgroundColor: tokens.colors.surface,
-            },
-            labelRight: {
-                backgroundColor: tokens.colors.primary,
-            }
-        }), [tokens]);
-
-        return (
-            <View
-                style={themedStyles.container}
-                onLayout={(e) => {
-                    containerWidth.current = e.nativeEvent.layout.width;
-                }}
-            >
-                <View style={styles.imageContainer}>
-                    <Image
-                        source={{ uri: processedUri }}
-                        style={styles.image}
-                        resizeMode="cover"
-                    />
-
-                    <View
-                        style={[themedStyles.originalContainer, { width: `${sliderPosition}%` }]}
-                    >
-                        <Image
-                            source={{ uri: originalUri }}
-                            style={[styles.image, { width: containerWidth.current }]}
-                            resizeMode="cover"
-                        />
-                    </View>
-
-                    <View
-                        style={[styles.sliderLine, { left: `${sliderPosition}%` }]}
-                        {...panResponder.panHandlers}
-                    >
-                        <View style={themedStyles.sliderHandle}>
-                            <View style={styles.handleBars}>
-                                <View
-                                    style={[
-                                        styles.handleBar,
-                                        { backgroundColor: tokens.colors.primary },
-                                    ]}
-                                />
-                                <View
-                                    style={[
-                                        styles.handleBar,
-                                        { backgroundColor: tokens.colors.primary },
-                                    ]}
-                                />
-                            </View>
-                        </View>
-                    </View>
-
-                    {beforeLabel && (
-                        <View style={[styles.label, styles.labelLeft, themedStyles.labelLeft]}>
-                            <AtomicText
-                                
-                               
-                            >
-                                {beforeLabel}
-                            </AtomicText>
-                        </View>
-                    )}
-
-                    {afterLabel && (
-                        <View style={[styles.label, styles.labelRight, themedStyles.labelRight]}>
-                            <AtomicText
-                                
-                               
-                            >
-                                {afterLabel}
-                            </AtomicText>
-                        </View>
-                    )}
-                </View>
-            </View>
-        );
-    }
-);
-
-const styles = StyleSheet.create({
-    imageContainer: {
-        flex: 1,
-        position: "relative",
-    },
-    image: {
-        width: "100%",
-        height: "100%",
-    },
-    sliderLine: {
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        width: 2,
-        marginLeft: -1,
-    },
-    handleBars: {
-        flexDirection: "row",
-        gap: 4,
-    },
-    handleBar: {
-        width: 3,
-        height: 16,
-        borderRadius: 2,
-    },
-    label: {
-        position: "absolute",
-        top: 12,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 12,
-    },
-    labelLeft: {
-        left: 12,
-    },
-    labelRight: {
-        right: 12,
-    },
-});

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

@@ -1,60 +0,0 @@
-/**
- * Error Display Component
- * @description Displays error messages
- */
-
-import * as React from "react";
-import { memo } from "react";
-import { View, StyleSheet } from "react-native";
-import {
-    AtomicText,
-    AtomicIcon,
-    useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { ErrorDisplayProps } from "../../domain/entities";
-
-export const ErrorDisplay: React.FC<ErrorDisplayProps> = memo(
-    function ErrorDisplay({ error }) {
-        const tokens = useAppDesignTokens();
-
-        if (!error) {
-            return null;
-        }
-
-        return (
-            <View
-                style={[
-                    styles.container,
-                    { backgroundColor: tokens.colors.errorContainer },
-                ]}
-            >
-                <AtomicIcon
-                    name="alert-circle"
-                    size="sm"
-                   
-                />
-                <AtomicText
-                    
-                   
-                    style={styles.errorText}
-                >
-                    {error}
-                </AtomicText>
-            </View>
-        );
-    }
-);
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 12,
-        padding: 16,
-        borderRadius: 12,
-        marginVertical: 12,
-    },
-    errorText: {
-        flex: 1,
-    },
-});

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

@@ -1,80 +0,0 @@
-/**
- * Feature Header Component
- * @description Header with hero image and description
- */
-
-import React, { memo } from "react";
-import { View, StyleSheet, Image, Dimensions } from "react-native";
-import {
-    AtomicText,
-    useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { FeatureHeaderProps } from "../../domain/entities";
-
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-const IMAGE_WIDTH = SCREEN_WIDTH - 32;
-const IMAGE_HEIGHT = IMAGE_WIDTH * 0.5;
-
-export const FeatureHeader: React.FC<FeatureHeaderProps> = memo(
-    function FeatureHeader({ heroImage, description }) {
-        const tokens = useAppDesignTokens();
-
-        if (!heroImage && !description) {
-            return null;
-        }
-
-        return (
-            <View style={styles.container}>
-                {heroImage && (
-                    <View
-                        style={[
-                            styles.imageContainer,
-                            { backgroundColor: tokens.colors.surface },
-                        ]}
-                    >
-                        <Image
-                            source={heroImage}
-                            style={[
-                                styles.heroImage,
-                                { width: IMAGE_WIDTH, height: IMAGE_HEIGHT },
-                            ]}
-                            resizeMode="cover"
-                        />
-                    </View>
-                )}
-                {description && (
-                    <AtomicText
-                        
-                        style={[
-                            styles.description,
-                            {
-                                color: tokens.colors.textSecondary,
-                                marginTop: tokens.spacing.md,
-                            },
-                        ]}
-                    >
-                        {description}
-                    </AtomicText>
-                )}
-            </View>
-        );
-    }
-);
-
-const styles = StyleSheet.create({
-    container: {
-        marginBottom: 8,
-    },
-    imageContainer: {
-        borderRadius: 16,
-        overflow: "hidden",
-    },
-    heroImage: {
-        borderRadius: 16,
-    },
-    description: {
-        textAlign: "center",
-        lineHeight: 22,
-        paddingHorizontal: 8,
-    },
-});

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

@@ -1,85 +0,0 @@
-/**
- * Generate Button Component
- * @description Action button to trigger processing
- */
-
-import React, { memo } from "react";
-import { StyleSheet, TouchableOpacity } from "react-native";
-import {
-    AtomicText,
-    AtomicIcon,
-    AtomicSpinner,
-    useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { GenerateButtonProps } from "../../domain/entities";
-
-export const GenerateButton: React.FC<GenerateButtonProps> = memo(
-    function GenerateButton({
-        isDisabled,
-        isProcessing,
-        onPress,
-        buttonText,
-    }) {
-        const tokens = useAppDesignTokens();
-
-        const disabled = isDisabled || isProcessing;
-
-        return (
-            <TouchableOpacity
-                onPress={onPress}
-                disabled={disabled}
-                activeOpacity={0.8}
-                style={[
-                    styles.container,
-                    {
-                        backgroundColor: disabled
-                            ? tokens.colors.surfaceSecondary
-                            : tokens.colors.primary,
-                    },
-                ]}
-            >
-                {isProcessing ? (
-                    <AtomicSpinner size="sm" color={tokens.colors.backgroundPrimary} />
-                ) : (
-                    <>
-                        <AtomicIcon
-                            name="sparkles"
-                            size="md"
-                            color={disabled ? "surfaceVariant" : "onPrimary"}
-                        />
-                        <AtomicText
-                            style={[
-                                styles.text,
-                                {
-                                    color: disabled
-                                        ? tokens.colors.textTertiary
-                                        : tokens.colors.backgroundPrimary,
-                                },
-                            ]}
-                        >
-                            {buttonText}
-                        </AtomicText>
-                    </>
-                )}
-            </TouchableOpacity>
-        );
-    }
-);
-
-const styles = StyleSheet.create({
-    container: {
-        marginVertical: 24,
-        borderRadius: 28,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        paddingVertical: 16,
-        paddingHorizontal: 32,
-    },
-    icon: {
-        marginRight: 8,
-    },
-    text: {
-        fontWeight: "bold",
-    },
-});