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

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",
+    },
+});

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",
+    },
+});