@umituz/react-native-ai-feature-background 1.0.0

package/README.md

@@ -0,0 +1,152 @@
+# @umituz/react-native-ai-feature-background
+
+AI-powered background replacement and removal feature for React Native applications.
+
+## Features
+
+- 🖼️ **Background Replacement** - Replace image backgrounds with AI-generated content
+- ✂️ **Background Removal** - Remove backgrounds from images
+- 🎨 **Customizable UI** - Theme-aware components using design system
+- 🌐 **Localization Support** - Multi-language support via localization package
+- ⚡ **Flexible Architecture** - Configurable services for different AI providers
+
+## Installation
+
+```bash
+npm install @umituz/react-native-ai-feature-background
+```
+
+### Peer Dependencies
+
+```bash
+npm install @umituz/react-native-design-system @umituz/react-native-localization
+```
+
+## Usage
+
+### Basic Usage with Feature Component
+
+```tsx
+import { BackgroundFeature } from '@umituz/react-native-ai-feature-background';
+
+function App() {
+  return (
+    <BackgroundFeature
+      config={{
+        onProcess: async (imageUri, prompt) => {
+          // Your AI processing logic here
+          const result = await yourAIService.replaceBackground(imageUri, prompt);
+          return { success: true, imageUrl: result.url };
+        },
+        onSave: async (imageUrl) => {
+          await saveToGallery(imageUrl);
+        },
+      }}
+    />
+  );
+}
+```
+
+### Using Individual Components
+
+```tsx
+import {
+  ImagePicker,
+  PromptInput,
+  GenerateButton,
+  ResultDisplay,
+  ErrorDisplay,
+} from '@umituz/react-native-ai-feature-background';
+
+function CustomFeature() {
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [prompt, setPrompt] = useState('');
+  const [result, setResult] = useState<string | null>(null);
+
+  return (
+    <View>
+      <ImagePicker
+        imageUri={imageUri}
+        onSelectImage={handleSelectImage}
+        isProcessing={false}
+      />
+      <PromptInput
+        value={prompt}
+        onChangeText={setPrompt}
+        samplePrompts={['Beach sunset', 'Mountain view']}
+      />
+      <GenerateButton
+        isDisabled={!imageUri || !prompt}
+        onPress={handleGenerate}
+      />
+      <ResultDisplay
+        imageUrl={result}
+        onSave={handleSave}
+        onReset={handleReset}
+      />
+    </View>
+  );
+}
+```
+
+### Using the Hook
+
+```tsx
+import { useBackgroundFeature } from '@umituz/react-native-ai-feature-background';
+
+function FeatureScreen() {
+  const feature = useBackgroundFeature({
+    processRequest: async ({ imageUri, prompt }) => {
+      return await myAIService.process(imageUri, prompt);
+    },
+  });
+
+  return (
+    <View>
+      <Button onPress={feature.selectImage} title="Select Image" />
+      <Button onPress={() => feature.process('beach sunset')} title="Process" />
+      {feature.processedUrl && (
+        <Image source={{ uri: feature.processedUrl }} />
+      )}
+    </View>
+  );
+}
+```
+
+## API Reference
+
+### Components
+
+#### `BackgroundFeature`
+Main feature component that composes all sub-components.
+
+#### `ImagePicker`
+Image selection component with camera/gallery support.
+
+#### `PromptInput`
+Text input with sample prompt chips.
+
+#### `GenerateButton`
+Action button to trigger processing.
+
+#### `ResultDisplay`
+Displays processed image with save/reset actions.
+
+#### `ErrorDisplay`
+Error message display component.
+
+#### `ProcessingModal`
+Modal shown during processing.
+
+### Hooks
+
+#### `useBackgroundFeature`
+Main hook for background feature state and actions.
+
+### Types
+
+See `src/domain/entities` for full type definitions.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "@umituz/react-native-ai-feature-background",
+    "version": "1.0.0",
+    "description": "AI-powered background replacement and removal feature for React Native applications",
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "scripts": {
+        "typecheck": "tsc --noEmit",
+        "lint": "eslint src --ext .ts,.tsx",
+        "version:patch": "npm version patch -m 'chore: release v%s'",
+        "version:minor": "npm version minor -m 'chore: release v%s'",
+        "version:major": "npm version major -m 'chore: release v%s'"
+    },
+    "keywords": [
+        "react-native",
+        "ai",
+        "background",
+        "image-processing",
+        "background-replacement",
+        "background-removal"
+    ],
+    "author": "umituz",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/umituz/react-native-ai-feature-background"
+    },
+    "peerDependencies": {
+        "react": ">=18.2.0",
+        "react-native": ">=0.74.0",
+        "@umituz/react-native-design-system": ">=1.0.0",
+        "@umituz/react-native-localization": ">=1.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "~19.1.10",
+        "@umituz/react-native-design-system": "latest",
+        "@umituz/react-native-localization": "latest",
+        "react": "19.1.0",
+        "react-native": "0.81.5",
+        "typescript": "~5.9.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "src",
+        "README.md",
+        "LICENSE"
+    ]
+}

package/src/domain/entities/background.types.ts

@@ -0,0 +1,47 @@
+/**
+ * Background Feature Types
+ * @description Core type definitions for background feature
+ */
+
+/**
+ * Background processing request input
+ */
+export interface BackgroundProcessRequest {
+    readonly imageUri: string;
+    readonly prompt?: string;
+}
+
+/**
+ * Background processing result
+ */
+export interface BackgroundProcessResult {
+    readonly success: boolean;
+    readonly imageUrl?: string;
+    readonly error?: string;
+    readonly requestId?: string;
+}
+
+/**
+ * Background feature state
+ */
+export interface BackgroundFeatureState {
+    readonly imageUri: string | null;
+    readonly prompt: string;
+    readonly processedUrl: string | null;
+    readonly isProcessing: boolean;
+    readonly progress: number;
+    readonly error: string | null;
+}
+
+/**
+ * Sample prompt configuration
+ */
+export interface SamplePrompt {
+    readonly id: string;
+    readonly text: string;
+}
+
+/**
+ * Background feature mode
+ */
+export type BackgroundFeatureMode = "replace" | "remove";

package/src/domain/entities/component.types.ts

@@ -0,0 +1,76 @@
+/**
+ * Component Props Types
+ * @description Props definitions for background feature components
+ */
+
+import type { ImageSourcePropType } from "react-native";
+import type { SamplePrompt } from "./background.types";
+
+/**
+ * Image picker component props
+ */
+export interface ImagePickerProps {
+    readonly imageUri: string | null;
+    readonly isProcessing: boolean;
+    readonly onSelectImage: () => void;
+    readonly placeholderText?: string;
+}
+
+/**
+ * Prompt input component props
+ */
+export interface PromptInputProps {
+    readonly value: string;
+    readonly onChangeText: (text: string) => void;
+    readonly isProcessing: boolean;
+    readonly label?: string;
+    readonly placeholder?: string;
+    readonly samplePrompts?: readonly SamplePrompt[];
+    readonly samplePromptsLabel?: string;
+}
+
+/**
+ * Generate button component props
+ */
+export interface GenerateButtonProps {
+    readonly isDisabled: boolean;
+    readonly isProcessing: boolean;
+    readonly onPress: () => void;
+    readonly buttonText?: string;
+}
+
+/**
+ * Result display component props
+ */
+export interface ResultDisplayProps {
+    readonly imageUrl: string | null;
+    readonly isProcessing: boolean;
+    readonly onSave: () => void;
+    readonly onReset: () => void;
+    readonly saveButtonText?: string;
+    readonly resetButtonText?: string;
+}
+
+/**
+ * Error display component props
+ */
+export interface ErrorDisplayProps {
+    readonly error: string | null;
+}
+
+/**
+ * Processing modal component props
+ */
+export interface ProcessingModalProps {
+    readonly visible: boolean;
+    readonly progress?: number;
+    readonly title?: string;
+}
+
+/**
+ * Feature header component props
+ */
+export interface FeatureHeaderProps {
+    readonly heroImage?: ImageSourcePropType;
+    readonly description?: string;
+}

package/src/domain/entities/config.types.ts

@@ -0,0 +1,31 @@
+/**
+ * Configuration Types
+ * @description Configuration interfaces for background feature
+ */
+
+import type { BackgroundProcessRequest, BackgroundProcessResult } 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;
+}
+
+/**
+ * Hook configuration
+ */
+export interface UseBackgroundFeatureConfig {
+    readonly processRequest: (params: ProcessRequestParams) => Promise<BackgroundProcessResult>;
+    readonly onSelectImage?: () => Promise<string | null>;
+}

package/src/domain/entities/index.ts

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

package/src/index.ts

@@ -0,0 +1,65 @@
+/**
+ * @umituz/react-native-ai-feature-background
+ * AI-powered background replacement and removal feature for React Native
+ *
+ * Usage:
+ *   import {
+ *     BackgroundFeature,
+ *     useBackgroundFeature,
+ *     ImagePicker,
+ *     PromptInput,
+ *   } from '@umituz/react-native-ai-feature-background';
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Types & Interfaces
+// =============================================================================
+
+export type {
+    BackgroundProcessRequest,
+    BackgroundProcessResult,
+    BackgroundFeatureState,
+    SamplePrompt,
+    BackgroundFeatureMode,
+    ImagePickerProps,
+    PromptInputProps,
+    GenerateButtonProps,
+    ResultDisplayProps,
+    ErrorDisplayProps,
+    ProcessingModalProps,
+    FeatureHeaderProps,
+    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,
+} 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/infrastructure/constants/index.ts

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

package/src/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/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/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,
+    },
+});