@umituz/react-native-ai-generation-content 1.17.16 → 1.17.18

package/src/features/text-to-image/presentation/components/SettingsSheet.tsx

@@ -0,0 +1,139 @@
+/**
+ * Settings Sheet Component
+ * Modal sheet for advanced image generation settings
+ */
+
+import React from "react";
+import {
+  View,
+  Modal,
+  Pressable,
+  StyleSheet,
+  ScrollView,
+  type GestureResponderEvent,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  AtomicText,
+  AtomicButton,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface SettingsSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  doneLabel: string;
+  children: React.ReactNode;
+}
+
+export const SettingsSheet: React.FC<SettingsSheetProps> = ({
+  visible,
+  onClose,
+  title,
+  doneLabel,
+  children,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const handleBackdropPress = () => {
+    onClose();
+  };
+
+  const handleSheetPress = (e: GestureResponderEvent) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.backdrop} onPress={handleBackdropPress}>
+        <Pressable
+          style={[
+            styles.sheet,
+            {
+              backgroundColor: tokens.colors.surface,
+              paddingBottom: insets.bottom + 16,
+            },
+          ]}
+          onPress={handleSheetPress}
+        >
+          <View
+            style={[styles.handle, { backgroundColor: tokens.colors.border }]}
+          />
+
+          <View style={styles.header}>
+            <AtomicText
+              type="titleMedium"
+              style={[styles.title, { color: tokens.colors.textPrimary }]}
+            >
+              {title}
+            </AtomicText>
+            <AtomicButton
+              variant="secondary"
+              size="sm"
+              onPress={onClose}
+              style={styles.doneButton}
+            >
+              <AtomicText
+                type="bodyMedium"
+                style={[styles.doneText, { color: tokens.colors.primary }]}
+              >
+                {doneLabel}
+              </AtomicText>
+            </AtomicButton>
+          </View>
+
+          <ScrollView contentContainerStyle={styles.content}>
+            {children}
+          </ScrollView>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "flex-end",
+  },
+  sheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    maxHeight: "80%",
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    alignSelf: "center",
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingBottom: 16,
+  },
+  title: {
+    fontWeight: "600",
+  },
+  doneButton: {
+    paddingHorizontal: 0,
+  },
+  doneText: {
+    fontWeight: "600",
+  },
+  content: {
+    padding: 20,
+  },
+});

package/src/features/text-to-image/presentation/components/StyleSelector.tsx

@@ -0,0 +1,110 @@
+/**
+ * Style Selector Component
+ * Horizontal scrollable list of style options
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { StyleOption } from "../../domain/types/form.types";
+
+export interface StyleSelectorProps {
+  options: StyleOption[];
+  value: string;
+  onChange: (styleId: string) => void;
+  label: string;
+}
+
+export const StyleSelector: React.FC<StyleSelectorProps> = ({
+  options,
+  value,
+  onChange,
+  label,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {options.map((style) => {
+          const isSelected = value === style.id;
+          return (
+            <TouchableOpacity
+              key={style.id}
+              style={[
+                styles.card,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onChange(style.id)}
+              activeOpacity={0.7}
+            >
+              <AtomicText
+                type="bodyMedium"
+                style={{
+                  color: isSelected ? "#FFFFFF" : tokens.colors.textPrimary,
+                  fontWeight: isSelected ? "600" : "400",
+                }}
+              >
+                {style.name}
+              </AtomicText>
+              {style.description && (
+                <AtomicText
+                  type="labelSmall"
+                  style={{
+                    color: isSelected
+                      ? "rgba(255,255,255,0.8)"
+                      : tokens.colors.textSecondary,
+                    marginTop: 4,
+                  }}
+                  numberOfLines={1}
+                >
+                  {style.description}
+                </AtomicText>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  scrollContent: {
+    paddingRight: 16,
+  },
+  card: {
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 2,
+    marginRight: 12,
+    minWidth: 100,
+  },
+});

package/src/features/text-to-image/presentation/components/TextToImageGenerateButton.tsx

@@ -0,0 +1,84 @@
+/**
+ * Text-to-Image Generate Button Component
+ * Button to trigger image generation with cost display
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+
+export interface TextToImageGenerateButtonProps {
+  onPress: () => void;
+  onSettingsPress?: () => void;
+  disabled: boolean;
+  label: string;
+  costLabel?: string;
+  showSettings?: boolean;
+}
+
+export const TextToImageGenerateButton: React.FC<TextToImageGenerateButtonProps> = ({
+  onPress,
+  onSettingsPress,
+  disabled,
+  label,
+  costLabel,
+  showSettings = true,
+}) => {
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonRow}>
+        <AtomicButton
+          onPress={onPress}
+          disabled={disabled}
+          variant="primary"
+          size="md"
+          style={styles.generateButton}
+        >
+          <AtomicText type="bodyLarge" style={styles.buttonText}>
+            {label}
+            {costLabel && ` (${costLabel})`}
+          </AtomicText>
+        </AtomicButton>
+
+        {showSettings && onSettingsPress && (
+          <AtomicButton
+            onPress={onSettingsPress}
+            variant="secondary"
+            size="md"
+            style={styles.settingsButton}
+          >
+            <AtomicIcon name="settings-outline" size="md" color="primary" />
+          </AtomicButton>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  buttonRow: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  generateButton: {
+    flex: 1,
+    paddingVertical: 16,
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
+  settingsButton: {
+    width: 56,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/src/features/text-to-image/presentation/components/TextToImagePromptInput.tsx

@@ -0,0 +1,90 @@
+/**
+ * Text-to-Image Prompt Input Component
+ * Text input for entering generation prompts
+ */
+
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface TextToImagePromptInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  label: string;
+  placeholder: string;
+  characterCountLabel?: string;
+  minHeight?: number;
+  maxLength?: number;
+}
+
+export const TextToImagePromptInput: React.FC<TextToImagePromptInputProps> = ({
+  value,
+  onChangeText,
+  label,
+  placeholder,
+  characterCountLabel,
+  minHeight = 100,
+  maxLength,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <TextInput
+        style={[
+          styles.input,
+          {
+            backgroundColor: tokens.colors.surface,
+            color: tokens.colors.textPrimary,
+            borderColor: tokens.colors.borderLight,
+            minHeight,
+          },
+        ]}
+        placeholder={placeholder}
+        placeholderTextColor={tokens.colors.textSecondary}
+        value={value}
+        onChangeText={onChangeText}
+        multiline
+        numberOfLines={4}
+        textAlignVertical="top"
+        maxLength={maxLength}
+      />
+      {characterCountLabel && (
+        <AtomicText
+          type="labelSmall"
+          style={[styles.charCount, { color: tokens.colors.textSecondary }]}
+        >
+          {characterCountLabel}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 16,
+    fontSize: 16,
+  },
+  charCount: {
+    marginTop: 8,
+  },
+});

package/src/features/text-to-image/presentation/components/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Text-to-Image Presentation Components
+ * All component exports for text-to-image feature
+ */
+
+// Input Components
+export { TextToImagePromptInput } from "./TextToImagePromptInput";
+export type { TextToImagePromptInputProps } from "./TextToImagePromptInput";
+
+export { ExamplePrompts as TextToImageExamplePrompts } from "./ExamplePrompts";
+export type { ExamplePromptsProps as TextToImageExamplePromptsProps } from "./ExamplePrompts";
+
+// Selector Components
+export { NumImagesSelector as TextToImageNumImagesSelector } from "./NumImagesSelector";
+export type { NumImagesSelectorProps as TextToImageNumImagesSelectorProps } from "./NumImagesSelector";
+
+export { StyleSelector as TextToImageStyleSelector } from "./StyleSelector";
+export type { StyleSelectorProps as TextToImageStyleSelectorProps } from "./StyleSelector";
+
+export { AspectRatioSelector as TextToImageAspectRatioSelector } from "./AspectRatioSelector";
+export type {
+  AspectRatioSelectorProps as TextToImageAspectRatioSelectorProps,
+  AspectRatioOption as TextToImageAspectRatioOption,
+} from "./AspectRatioSelector";
+
+export { ImageSizeSelector as TextToImageSizeSelector } from "./ImageSizeSelector";
+export type {
+  ImageSizeSelectorProps as TextToImageSizeSelectorProps,
+  ImageSizeOption as TextToImageSizeOption,
+} from "./ImageSizeSelector";
+
+export { OutputFormatSelector as TextToImageOutputFormatSelector } from "./OutputFormatSelector";
+export type {
+  OutputFormatSelectorProps as TextToImageOutputFormatSelectorProps,
+  OutputFormatOption as TextToImageOutputFormatOption,
+} from "./OutputFormatSelector";
+
+// Action Components
+export { TextToImageGenerateButton } from "./TextToImageGenerateButton";
+export type { TextToImageGenerateButtonProps } from "./TextToImageGenerateButton";
+
+// Sheet Components
+export { SettingsSheet as TextToImageSettingsSheet } from "./SettingsSheet";
+export type { SettingsSheetProps as TextToImageSettingsSheetProps } from "./SettingsSheet";

package/src/features/text-to-image/presentation/hooks/index.ts

@@ -1,3 +1,28 @@
+/**
+ * Text-to-Image Presentation Hooks
+ * All hook exports for text-to-image feature
+ */
+
+// Form State Hook
+export { useFormState } from "./useFormState";
+export type { UseFormStateOptions, UseFormStateReturn } from "./useFormState";
+
+// Generation Hook
+export { useGeneration } from "./useGeneration";
+export type {
+  GenerationState,
+  UseGenerationOptions,
+  UseGenerationReturn,
+} from "./useGeneration";
+
+// Combined Form Hook
+export { useTextToImageForm } from "./useTextToImageForm";
+export type {
+  UseTextToImageFormOptions,
+  UseTextToImageFormReturn,
+} from "./useTextToImageForm";
+
+// Provider-based Feature Hook (existing)
 export { useTextToImageFeature } from "./useTextToImageFeature";
 export type {
   UseTextToImageFeatureProps,

package/src/features/text-to-image/presentation/hooks/useFormState.ts

@@ -0,0 +1,103 @@
+/**
+ * Text-to-Image Form State Hook
+ * Manages form state for text-to-image generation
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type {
+  AspectRatio,
+  ImageSize,
+  NumImages,
+  OutputFormat,
+  TextToImageFormState,
+  TextToImageFormActions,
+  TextToImageFormDefaults,
+} from "../../domain/types/form.types";
+import { DEFAULT_FORM_VALUES } from "../../domain/constants/options.constants";
+
+export interface UseFormStateOptions {
+  defaults?: TextToImageFormDefaults;
+}
+
+export interface UseFormStateReturn {
+  state: TextToImageFormState;
+  actions: TextToImageFormActions;
+}
+
+export function useFormState(options?: UseFormStateOptions): UseFormStateReturn {
+  const defaults = useMemo(
+    () => ({ ...DEFAULT_FORM_VALUES, ...options?.defaults }),
+    [options?.defaults]
+  );
+
+  const [prompt, setPrompt] = useState("");
+  const [aspectRatio, setAspectRatio] = useState<AspectRatio>(
+    defaults.aspectRatio ?? "9:16"
+  );
+  const [size, setSize] = useState<ImageSize>(defaults.size ?? "512x512");
+  const [numImages, setNumImages] = useState<NumImages>(defaults.numImages ?? 1);
+  const [negativePrompt, setNegativePrompt] = useState("");
+  const [guidanceScale, setGuidanceScale] = useState(defaults.guidanceScale ?? 7.5);
+  const [selectedModel, setSelectedModel] = useState<string | null>(null);
+  const [outputFormat, setOutputFormat] = useState<OutputFormat>(
+    defaults.outputFormat ?? "png"
+  );
+  const [selectedStyle, setSelectedStyle] = useState(
+    defaults.selectedStyle ?? "realistic"
+  );
+
+  const reset = useCallback(() => {
+    setPrompt("");
+    setAspectRatio(defaults.aspectRatio ?? "9:16");
+    setSize(defaults.size ?? "512x512");
+    setNumImages(defaults.numImages ?? 1);
+    setNegativePrompt("");
+    setGuidanceScale(defaults.guidanceScale ?? 7.5);
+    setSelectedModel(null);
+    setOutputFormat(defaults.outputFormat ?? "png");
+    setSelectedStyle(defaults.selectedStyle ?? "realistic");
+  }, [defaults]);
+
+  const state: TextToImageFormState = useMemo(
+    () => ({
+      prompt,
+      aspectRatio,
+      size,
+      numImages,
+      negativePrompt,
+      guidanceScale,
+      selectedModel,
+      outputFormat,
+      selectedStyle,
+    }),
+    [
+      prompt,
+      aspectRatio,
+      size,
+      numImages,
+      negativePrompt,
+      guidanceScale,
+      selectedModel,
+      outputFormat,
+      selectedStyle,
+    ]
+  );
+
+  const actions: TextToImageFormActions = useMemo(
+    () => ({
+      setPrompt,
+      setAspectRatio,
+      setSize,
+      setNumImages,
+      setNegativePrompt,
+      setGuidanceScale,
+      setSelectedModel,
+      setOutputFormat,
+      setSelectedStyle,
+      reset,
+    }),
+    [reset]
+  );
+
+  return { state, actions };
+}

package/src/features/text-to-image/presentation/hooks/useGeneration.ts

@@ -0,0 +1,98 @@
+/**
+ * Text-to-Image Generation Hook
+ * Orchestrates generation with app-provided callbacks
+ */
+
+import { useState, useCallback } from "react";
+import type {
+  TextToImageFormState,
+  TextToImageCallbacks,
+  GenerationResult,
+  GenerationRequest,
+} from "../../domain/types";
+
+export interface GenerationState {
+  isGenerating: boolean;
+  progress: number;
+  error: string | null;
+}
+
+export interface UseGenerationOptions {
+  formState: TextToImageFormState;
+  callbacks: TextToImageCallbacks;
+  onPromptCleared?: () => void;
+}
+
+export interface UseGenerationReturn {
+  generationState: GenerationState;
+  totalCost: number;
+  handleGenerate: () => Promise<GenerationResult | null>;
+}
+
+const initialState: GenerationState = {
+  isGenerating: false,
+  progress: 0,
+  error: null,
+};
+
+export function useGeneration(options: UseGenerationOptions): UseGenerationReturn {
+  const { formState, callbacks, onPromptCleared } = options;
+  const [generationState, setGenerationState] = useState<GenerationState>(initialState);
+
+  const totalCost = callbacks.calculateCost(formState.numImages, formState.selectedModel);
+
+  const handleGenerate = useCallback(async (): Promise<GenerationResult | null> => {
+    const trimmedPrompt = formState.prompt.trim();
+
+    if (!trimmedPrompt) {
+      setGenerationState((prev) => ({ ...prev, error: "Prompt is required" }));
+      return null;
+    }
+
+    if (!callbacks.isAuthenticated()) {
+      callbacks.onAuthRequired?.();
+      return null;
+    }
+
+    if (!callbacks.canAfford(totalCost)) {
+      callbacks.onCreditsRequired?.(totalCost);
+      return null;
+    }
+
+    setGenerationState({ isGenerating: true, progress: 0, error: null });
+
+    const request: GenerationRequest = {
+      prompt: trimmedPrompt,
+      model: formState.selectedModel ?? undefined,
+      aspectRatio: formState.aspectRatio,
+      size: formState.size,
+      negativePrompt: formState.negativePrompt.trim() || undefined,
+      guidanceScale: formState.guidanceScale,
+      numImages: formState.numImages,
+      style: formState.selectedStyle,
+      outputFormat: formState.outputFormat,
+    };
+
+    try {
+      const result = await callbacks.executeGeneration(request);
+
+      if (result.success === true) {
+        callbacks.onSuccess?.(result.imageUrls);
+        onPromptCleared?.();
+        setGenerationState({ isGenerating: false, progress: 100, error: null });
+      } else {
+        setGenerationState({ isGenerating: false, progress: 0, error: result.error });
+        callbacks.onError?.(result.error);
+      }
+
+      return result;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setGenerationState({ isGenerating: false, progress: 0, error: message });
+      callbacks.onError?.(message);
+      return null;
+    }
+  }, [formState, callbacks, totalCost, onPromptCleared]);
+
+  return { generationState, totalCost, handleGenerate };
+}