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

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

@@ -0,0 +1,136 @@
+/**
+ * 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={20}
+                                        color="onPrimary"
+                                    />
+                                </View>
+                            </View>
+                        </View>
+                    ) : (
+                        <View
+                            style={[
+                                styles.placeholderContainer,
+                                { backgroundColor: tokens.colors.surface },
+                            ]}
+                        >
+                            <View
+                                style={[
+                                    styles.uploadIconContainer,
+                                    { backgroundColor: tokens.colors.surfaceSecondary },
+                                ]}
+                            >
+                                <AtomicIcon
+                                    name="upload"
+                                    size={40}
+                                    color="primary"
+                                />
+                            </View>
+                            <AtomicText
+                                type="bodyLarge"
+                                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/domains/feature-background/presentation/components/ModeSelector.tsx

@@ -0,0 +1,78 @@
+/**
+ * Mode Selector Component
+ * @description Horizontal scrollable mode selection toolbar
+ */
+
+import React, { memo } from "react";
+import { View, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
+import {
+    AtomicText,
+    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={20}
+                                    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/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";