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

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

@@ -0,0 +1,72 @@
+/**
+ * @umituz/react-native-ai-feature-background
+ * AI-powered background replacement and removal feature for React Native
+ *
+ * Usage:
+ *   import {
+ *     BackgroundFeature,
+ *     useBackgroundFeature,
+ *     ImagePicker,
+ *     ComparisonSlider,
+ *     ModeSelector,
+ *   } from '@umituz/react-native-ai-feature-background';
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Types & Interfaces
+// =============================================================================
+
+export type {
+    BackgroundProcessRequest,
+    BackgroundProcessResult,
+    BackgroundFeatureState,
+    SamplePrompt,
+    StudioMode,
+    StudioModeConfig,
+    ComparisonState,
+    ImagePickerProps,
+    PromptInputProps,
+    GenerateButtonProps,
+    ResultDisplayProps,
+    ErrorDisplayProps,
+    ProcessingModalProps,
+    FeatureHeaderProps,
+    ModeSelectorProps,
+    ComparisonSliderProps,
+    ProcessRequestParams,
+    BackgroundFeatureConfig,
+    UseBackgroundFeatureConfig,
+} from "./domain/entities";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER - Constants
+// =============================================================================
+
+export { DEFAULT_SAMPLE_PROMPTS } from "./infrastructure/constants";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export {
+    BackgroundFeature,
+    ImagePicker,
+    PromptInput,
+    GenerateButton,
+    ResultDisplay,
+    ErrorDisplay,
+    ProcessingModal,
+    FeatureHeader,
+    ComparisonSlider,
+    ModeSelector,
+} from "./presentation/components";
+
+export type { BackgroundFeatureProps } from "./presentation/components";
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export { useBackgroundFeature } from "./presentation/hooks";
+
+export type { UseBackgroundFeatureReturn } from "./presentation/hooks";

package/src/domains/feature-background/infrastructure/constants/index.ts

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

package/src/domains/feature-background/infrastructure/constants/prompts.constants.ts

@@ -0,0 +1,15 @@
+/**
+ * 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/domains/feature-background/presentation/components/BackgroundFeature.tsx

@@ -0,0 +1,145 @@
+/**
+ * Background Feature Component
+ * @description Main feature component composing all sub-components
+ */
+
+import React, { 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 { ProcessingModal } from "./ProcessingModal";
+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;
+}
+
+export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
+    config,
+    onSelectImage,
+    heroImage,
+    description,
+    promptLabel,
+    promptPlaceholder,
+    samplePrompts,
+    samplePromptsLabel,
+    generateButtonText,
+    saveButtonText,
+    resetButtonText,
+    processingText,
+    placeholderText,
+}) => {
+    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={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={handleSave}
+                    onReset={handleReset}
+                    saveButtonText={saveButtonText}
+                    resetButtonText={resetButtonText}
+                />
+
+                <GenerateButton
+                    isDisabled={isDisabled}
+                    isProcessing={feature.isProcessing}
+                    onPress={handleProcess}
+                    buttonText={generateButtonText}
+                />
+            </ScrollView>
+
+            <ProcessingModal
+                visible={feature.isProcessing}
+                progress={feature.progress}
+                title={processingText}
+            />
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});

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

@@ -0,0 +1,199 @@
+/**
+ * Comparison Slider Component
+ * @description Before/After comparison slider for images
+ */
+
+import React, { memo, useState, useRef } from "react";
+import {
+    View,
+    StyleSheet,
+    Image,
+    PanResponder,
+    Dimensions,
+} from "react-native";
+import {
+    AtomicText,
+    useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ComparisonSliderProps } from "../../domain/entities";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+
+export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
+    function ComparisonSlider({
+        originalUri,
+        processedUri,
+        beforeLabel,
+        afterLabel,
+    }) {
+        const tokens = useAppDesignTokens();
+        const [sliderPosition, setSliderPosition] = useState(50);
+        const containerWidth = useRef(SCREEN_WIDTH - 32);
+
+        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;
+
+        return (
+            <View
+                style={styles.container}
+                onLayout={(e) => {
+                    containerWidth.current = e.nativeEvent.layout.width;
+                }}
+            >
+                <View style={styles.imageContainer}>
+                    <Image
+                        source={{ uri: processedUri }}
+                        style={styles.image}
+                        resizeMode="cover"
+                    />
+
+                    <View
+                        style={[styles.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={[
+                                styles.sliderHandle,
+                                { backgroundColor: tokens.colors.backgroundPrimary },
+                            ]}
+                        >
+                            <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,
+                                { backgroundColor: tokens.colors.surface },
+                            ]}
+                        >
+                            <AtomicText
+                                type="bodySmall"
+                                style={{ color: tokens.colors.textPrimary }}
+                            >
+                                {beforeLabel}
+                            </AtomicText>
+                        </View>
+                    )}
+
+                    {afterLabel && (
+                        <View
+                            style={[
+                                styles.label,
+                                styles.labelRight,
+                                { backgroundColor: tokens.colors.primary },
+                            ]}
+                        >
+                            <AtomicText
+                                type="bodySmall"
+                                style={{ color: tokens.colors.backgroundPrimary }}
+                            >
+                                {afterLabel}
+                            </AtomicText>
+                        </View>
+                    )}
+                </View>
+            </View>
+        );
+    }
+);
+
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        aspectRatio: 1,
+        borderRadius: 20,
+        overflow: "hidden",
+    },
+    imageContainer: {
+        flex: 1,
+        position: "relative",
+    },
+    image: {
+        width: "100%",
+        height: "100%",
+    },
+    originalContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        overflow: "hidden",
+        borderRightWidth: 2,
+        borderRightColor: "#FFFFFF",
+    },
+    sliderLine: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        width: 2,
+        marginLeft: -1,
+    },
+    sliderHandle: {
+        position: "absolute",
+        top: "50%",
+        left: -20,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: -20,
+    },
+    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/domains/feature-background/presentation/components/ErrorDisplay.tsx

@@ -0,0 +1,58 @@
+/**
+ * Error Display Component
+ * @description Displays error messages
+ */
+
+import React, { 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={20}
+                    color="error"
+                />
+                <AtomicText
+                    type="bodyMedium"
+                    style={[styles.errorText, { color: tokens.colors.error }]}
+                >
+                    {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/domains/feature-background/presentation/components/FeatureHeader.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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
+                        type="bodyMedium"
+                        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/domains/feature-background/presentation/components/GenerateButton.tsx

@@ -0,0 +1,86 @@
+/**
+ * Generate Button Component
+ * @description Action button to trigger processing
+ */
+
+import React, { memo } from "react";
+import { StyleSheet, TouchableOpacity, ActivityIndicator } from "react-native";
+import {
+    AtomicText,
+    AtomicIcon,
+    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 ? (
+                    <ActivityIndicator color={tokens.colors.backgroundPrimary} />
+                ) : (
+                    <>
+                        <AtomicIcon
+                            name="sparkles"
+                            size={20}
+                            color={disabled ? "surfaceVariant" : "onPrimary"}
+                            style={styles.icon}
+                        />
+                        <AtomicText
+                            type="headlineSmall"
+                            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",
+    },
+});