@umituz/react-native-ai-generation-content 1.17.7 → 1.17.9

package/src/features/remove-object/presentation/components/RemoveObjectFeature.tsx

@@ -0,0 +1,249 @@
+/**
+ * RemoveObjectFeature Component
+ * Self-contained remove object feature UI component
+ * Uses hook internally, only requires config and translations
+ */
+
+import React, { useCallback, useMemo } from "react";
+import { View, ScrollView, StyleSheet, Image, Dimensions, TextInput } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicButton,
+} from "@umituz/react-native-design-system";
+import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
+import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
+import { useRemoveObjectFeature } from "../hooks";
+import type {
+  RemoveObjectTranslations,
+  RemoveObjectFeatureConfig,
+} from "../../domain/types";
+
+export interface RemoveObjectFeatureProps {
+  config: RemoveObjectFeatureConfig;
+  userId: string;
+  translations: RemoveObjectTranslations;
+  onSelectImage: () => Promise<string | null>;
+  onSaveImage: (imageUrl: string) => Promise<void>;
+  renderProcessingModal?: (props: {
+    visible: boolean;
+    progress: number;
+  }) => React.ReactNode;
+}
+
+export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
+  config,
+  userId,
+  translations,
+  onSelectImage,
+  onSaveImage,
+  renderProcessingModal,
+}) => {
+  const tokens = useAppDesignTokens();
+  const feature = useRemoveObjectFeature({
+    config,
+    userId,
+    onSelectImage,
+    onSaveImage,
+  });
+
+  const photoTranslations = useMemo(
+    () => ({
+      tapToUpload: translations.uploadTitle,
+      selectPhoto: translations.uploadSubtitle,
+      change: translations.uploadChange,
+      analyzing: translations.uploadAnalyzing,
+    }),
+    [translations],
+  );
+
+  const handleProcess = useCallback(() => {
+    void feature.process();
+  }, [feature]);
+
+  const handleSave = useCallback(() => {
+    void feature.save();
+  }, [feature]);
+
+  const handleSelectImage = useCallback(() => {
+    void feature.selectImage();
+  }, [feature]);
+
+  if (feature.processedUrl) {
+    const screenWidth = Dimensions.get("window").width;
+    const imageSize = screenWidth - 48;
+
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="headlineMedium"
+          style={[styles.successText, { color: tokens.colors.success }]}
+        >
+          {translations.successText}
+        </AtomicText>
+
+        <View style={styles.resultImageContainer}>
+          <Image
+            source={{ uri: feature.processedUrl }}
+            style={[styles.resultImage, { width: imageSize, height: imageSize }]}
+            resizeMode="contain"
+          />
+        </View>
+
+        <View style={styles.resultActions}>
+          <AtomicButton
+            title={translations.saveButtonText}
+            onPress={handleSave}
+            variant="primary"
+            size="lg"
+          />
+          <AtomicButton
+            title={translations.tryAnotherText}
+            onPress={feature.reset}
+            variant="secondary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+
+  return (
+    <>
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="bodyLarge"
+          style={[styles.description, { color: tokens.colors.textSecondary }]}
+        >
+          {translations.description}
+        </AtomicText>
+
+        <PhotoUploadCard
+          imageUri={feature.imageUri}
+          onPress={handleSelectImage}
+          isValidating={feature.isProcessing}
+          disabled={feature.isProcessing}
+          translations={photoTranslations}
+          config={{
+            aspectRatio: 1,
+            borderRadius: 24,
+            showValidationStatus: false,
+            allowChange: true,
+          }}
+        />
+
+        <View style={styles.promptContainer}>
+          <AtomicText
+            type="labelMedium"
+            style={[styles.promptLabel, { color: tokens.colors.textPrimary }]}
+          >
+            {translations.maskTitle}
+          </AtomicText>
+          <TextInput
+            style={[
+              styles.promptInput,
+              {
+                backgroundColor: tokens.colors.backgroundSecondary,
+                color: tokens.colors.textPrimary,
+                borderColor: tokens.colors.border,
+              },
+            ]}
+            value={feature.prompt}
+            onChangeText={feature.setPrompt}
+            placeholder={translations.promptPlaceholder}
+            placeholderTextColor={tokens.colors.textTertiary}
+            multiline
+            numberOfLines={3}
+            editable={!feature.isProcessing}
+          />
+          <AtomicText
+            type="bodySmall"
+            style={[styles.promptHint, { color: tokens.colors.textTertiary }]}
+          >
+            {translations.maskSubtitle}
+          </AtomicText>
+        </View>
+
+        <ErrorDisplay error={feature.error} />
+
+        <View style={styles.buttonContainer}>
+          <AtomicButton
+            title={
+              feature.isProcessing
+                ? translations.processingText
+                : translations.processButtonText
+            }
+            onPress={handleProcess}
+            disabled={!feature.imageUri || feature.isProcessing}
+            variant="primary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+
+      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+  promptContainer: {
+    marginHorizontal: 24,
+    marginTop: 16,
+    marginBottom: 8,
+  },
+  promptLabel: {
+    marginBottom: 8,
+  },
+  promptInput: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 12,
+    minHeight: 80,
+    textAlignVertical: "top",
+    fontSize: 16,
+  },
+  promptHint: {
+    marginTop: 8,
+  },
+  successText: {
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  resultImageContainer: {
+    alignItems: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+  },
+  resultImage: {
+    borderRadius: 16,
+  },
+  resultActions: {
+    marginHorizontal: 24,
+    gap: 12,
+  },
+  buttonContainer: {
+    marginHorizontal: 24,
+    marginTop: 8,
+  },
+});

package/src/features/remove-object/presentation/components/index.ts

@@ -0,0 +1,2 @@
+export { RemoveObjectFeature } from "./RemoveObjectFeature";
+export type { RemoveObjectFeatureProps } from "./RemoveObjectFeature";

package/src/features/remove-object/presentation/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from "./hooks";
+export * from "./components";

package/src/features/upscaling/presentation/components/UpscaleFeature.tsx

@@ -1,6 +1,7 @@
 /**
  * UpscaleFeature Component
- * Main upscale feature UI component
+ * Self-contained upscale feature UI component
+ * Uses hook internally, only requires config and translations
  */
 
 import React, { useCallback, useMemo } from "react";
@@ -12,23 +13,24 @@ import {
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { UpscaleResultView } from "./UpscaleResultView";
+import { useUpscaleFeature } from "../hooks";
 import type {
   UpscaleTranslations,
   UpscaleFeatureConfig,
 } from "../../domain/types";
 
 export interface UpscaleFeatureProps {
-  imageUri: string | null;
-  processedUrl: string | null;
-  isProcessing: boolean;
-  progress: number;
-  error: string | null;
+  /** Feature configuration with provider-specific settings */
+  config: UpscaleFeatureConfig;
+  /** User ID for the generation request */
+  userId: string;
+  /** Translations for all UI text */
   translations: UpscaleTranslations;
-  config?: UpscaleFeatureConfig;
-  onSelectImage: () => void;
-  onProcess: () => void;
-  onSave: () => void;
-  onReset: () => void;
+  /** Image picker callback */
+  onSelectImage: () => Promise<string | null>;
+  /** Save image callback */
+  onSaveImage: (imageUrl: string) => Promise<void>;
+  /** Optional custom processing modal renderer */
   renderProcessingModal?: (props: {
     visible: boolean;
     progress: number;
@@ -36,20 +38,22 @@ export interface UpscaleFeatureProps {
 }
 
 export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
-  imageUri,
-  processedUrl,
-  isProcessing,
-  progress,
-  error,
+  config,
+  userId,
   translations,
   onSelectImage,
-  onProcess,
-  onSave,
-  onReset,
+  onSaveImage,
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
 
+  const feature = useUpscaleFeature({
+    config,
+    userId,
+    onSelectImage,
+    onSaveImage,
+  });
+
   const photoTranslations = useMemo(
     () => ({
       tapToUpload: translations.uploadTitle,
@@ -61,10 +65,18 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
   );
 
   const handleProcess = useCallback(() => {
-    onProcess();
-  }, [onProcess]);
+    void feature.process();
+  }, [feature]);
+
+  const handleSave = useCallback(() => {
+    void feature.save();
+  }, [feature]);
+
+  const handleSelectImage = useCallback(() => {
+    void feature.selectImage();
+  }, [feature]);
 
-  if (processedUrl && imageUri) {
+  if (feature.processedUrl && feature.imageUri) {
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
@@ -72,8 +84,8 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
         showsVerticalScrollIndicator={false}
       >
         <UpscaleResultView
-          originalUri={imageUri}
-          processedUri={processedUrl}
+          originalUri={feature.imageUri}
+          processedUri={feature.processedUrl}
           translations={{
             successText: translations.successText,
             saveButtonText: translations.saveButtonText,
@@ -81,8 +93,8 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
             beforeLabel: translations.beforeLabel,
             afterLabel: translations.afterLabel,
           }}
-          onSave={onSave}
-          onReset={onReset}
+          onSave={handleSave}
+          onReset={feature.reset}
         />
       </ScrollView>
     );
@@ -103,10 +115,10 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
         </AtomicText>
 
         <PhotoUploadCard
-          imageUri={imageUri}
-          onPress={onSelectImage}
-          isValidating={isProcessing}
-          disabled={isProcessing}
+          imageUri={feature.imageUri}
+          onPress={handleSelectImage}
+          isValidating={feature.isProcessing}
+          disabled={feature.isProcessing}
           translations={photoTranslations}
           config={{
             aspectRatio: 1,
@@ -116,7 +128,7 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
           }}
         />
 
-        {error && (
+        {feature.error && (
           <View
             style={[
               styles.errorContainer,
@@ -124,7 +136,7 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
             ]}
           >
             <AtomicText type="bodyMedium" style={{ color: tokens.colors.error }}>
-              {error}
+              {feature.error}
             </AtomicText>
           </View>
         )}
@@ -132,19 +144,19 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
         <View style={styles.buttonContainer}>
           <AtomicButton
             title={
-              isProcessing
+              feature.isProcessing
                 ? translations.processingText
                 : translations.processButtonText
             }
             onPress={handleProcess}
-            disabled={!imageUri || isProcessing}
+            disabled={!feature.imageUri || feature.isProcessing}
             variant="primary"
             size="lg"
           />
         </View>
       </ScrollView>
 
-      {renderProcessingModal?.({ visible: isProcessing, progress })}
+      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
     </>
   );
 };