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

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

@@ -0,0 +1,93 @@
+/**
+ * Number of Images Selector Component
+ * Grid of buttons to select number of images to generate
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { NumImages } from "../../domain/types/form.types";
+
+export interface NumImagesSelectorProps {
+  value: NumImages;
+  onChange: (num: NumImages) => void;
+  options: NumImages[];
+  label: string;
+}
+
+export const NumImagesSelector: React.FC<NumImagesSelectorProps> = ({
+  value,
+  onChange,
+  options,
+  label,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <View style={styles.grid}>
+        {options.map((num) => {
+          const isSelected = value === num;
+          return (
+            <TouchableOpacity
+              key={num}
+              style={[
+                styles.button,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onChange(num)}
+              activeOpacity={0.7}
+            >
+              <AtomicText
+                type="bodyLarge"
+                style={{
+                  color: isSelected ? "#FFFFFF" : tokens.colors.textPrimary,
+                  fontWeight: isSelected ? "700" : "400",
+                }}
+              >
+                {num}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  grid: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  button: {
+    flex: 1,
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,98 @@
+/**
+ * Output Format Selector Component
+ * Selection for image output format
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { OutputFormat } from "../../domain/types/form.types";
+
+export interface OutputFormatOption {
+  value: OutputFormat;
+  label: string;
+}
+
+export interface OutputFormatSelectorProps {
+  value: OutputFormat;
+  onChange: (format: OutputFormat) => void;
+  options: OutputFormatOption[];
+  label: string;
+}
+
+export const OutputFormatSelector: React.FC<OutputFormatSelectorProps> = ({
+  value,
+  onChange,
+  options,
+  label,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <View style={styles.optionsRow}>
+        {options.map((option) => {
+          const isSelected = value === option.value;
+          return (
+            <TouchableOpacity
+              key={option.value}
+              style={[
+                styles.option,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onChange(option.value)}
+              activeOpacity={0.7}
+            >
+              <AtomicText
+                type="bodyMedium"
+                style={{
+                  color: isSelected ? "#FFFFFF" : tokens.colors.textPrimary,
+                  fontWeight: isSelected ? "600" : "400",
+                }}
+              >
+                {option.label}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  optionsRow: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  option: {
+    flex: 1,
+    padding: 14,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,90 @@
+/**
+ * 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 PromptInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  label: string;
+  placeholder: string;
+  characterCountLabel?: string;
+  minHeight?: number;
+  maxLength?: number;
+}
+
+export const PromptInput: React.FC<PromptInputProps> = ({
+  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/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/index.ts

@@ -0,0 +1,41 @@
+/**
+ * Text-to-Image Presentation Components
+ * All component exports for text-to-image feature
+ */
+
+// Input Components
+export { PromptInput } from "./PromptInput";
+export type { PromptInputProps } from "./PromptInput";
+
+export { ExamplePrompts } from "./ExamplePrompts";
+export type { ExamplePromptsProps } from "./ExamplePrompts";
+
+// Selector Components
+export { NumImagesSelector } from "./NumImagesSelector";
+export type { NumImagesSelectorProps } from "./NumImagesSelector";
+
+export { StyleSelector } from "./StyleSelector";
+export type { StyleSelectorProps } from "./StyleSelector";
+
+export { AspectRatioSelector } from "./AspectRatioSelector";
+export type {
+  AspectRatioSelectorProps,
+  AspectRatioOption,
+} from "./AspectRatioSelector";
+
+export { ImageSizeSelector } from "./ImageSizeSelector";
+export type { ImageSizeSelectorProps, ImageSizeOption } from "./ImageSizeSelector";
+
+export { OutputFormatSelector } from "./OutputFormatSelector";
+export type {
+  OutputFormatSelectorProps,
+  OutputFormatOption,
+} from "./OutputFormatSelector";
+
+// Action Components
+export { TextToImageGenerateButton } from "./TextToImageGenerateButton";
+export type { TextToImageGenerateButtonProps } from "./TextToImageGenerateButton";
+
+// Sheet Components
+export { SettingsSheet } from "./SettingsSheet";
+export type { SettingsSheetProps } 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,