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

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

@@ -3,25 +3,113 @@
  * Provider-agnostic text-to-image generation feature
  */
 
-// Domain Types
+// =============================================================================
+// DOMAIN LAYER - Types
+// =============================================================================
+
+// Form Types
+export type {
+  AspectRatio,
+  ImageSize,
+  OutputFormat,
+  NumImages,
+  StyleOption,
+  TextToImageFormState,
+  TextToImageFormActions,
+  TextToImageFormDefaults,
+} from "./domain";
+
+// Config Types
+export type {
+  GenerationRequest,
+  GenerationResult,
+  GenerationResultSuccess,
+  GenerationResultError,
+  TextToImageCallbacks,
+  TextToImageFormConfig,
+  TextToImageTranslations,
+} from "./domain";
+
+// Provider Types
 export type {
   TextToImageOptions,
   TextToImageRequest,
   TextToImageResult,
   TextToImageFeatureState,
-  TextToImageTranslations,
   TextToImageInputBuilder,
   TextToImageResultExtractor,
   TextToImageFeatureConfig,
 } from "./domain";
 
-// Infrastructure Services
+// =============================================================================
+// DOMAIN LAYER - Constants
+// =============================================================================
+
+export {
+  DEFAULT_IMAGE_STYLES,
+  DEFAULT_NUM_IMAGES_OPTIONS,
+  DEFAULT_ASPECT_RATIO_OPTIONS,
+  DEFAULT_SIZE_OPTIONS,
+  DEFAULT_OUTPUT_FORMAT_OPTIONS,
+  DEFAULT_FORM_VALUES,
+} from "./domain";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER
+// =============================================================================
+
 export { executeTextToImage, hasTextToImageSupport } from "./infrastructure";
 export type { ExecuteTextToImageOptions } from "./infrastructure";
 
-// Presentation Hooks
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export { useFormState, useGeneration, useTextToImageForm } from "./presentation";
+export type {
+  UseFormStateOptions,
+  UseFormStateReturn,
+  GenerationState,
+  UseGenerationOptions,
+  UseGenerationReturn,
+  UseTextToImageFormOptions,
+  UseTextToImageFormReturn,
+} from "./presentation";
+
+// Provider-based Feature Hook
 export { useTextToImageFeature } from "./presentation";
 export type {
   UseTextToImageFeatureProps,
   UseTextToImageFeatureReturn,
 } from "./presentation";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export {
+  TextToImagePromptInput,
+  TextToImageExamplePrompts,
+  TextToImageNumImagesSelector,
+  TextToImageStyleSelector,
+  TextToImageAspectRatioSelector,
+  TextToImageSizeSelector,
+  TextToImageOutputFormatSelector,
+  TextToImageGenerateButton,
+  TextToImageSettingsSheet,
+} from "./presentation";
+
+export type {
+  TextToImagePromptInputProps,
+  TextToImageExamplePromptsProps,
+  TextToImageNumImagesSelectorProps,
+  TextToImageStyleSelectorProps,
+  TextToImageAspectRatioSelectorProps,
+  TextToImageAspectRatioOption,
+  TextToImageSizeSelectorProps,
+  TextToImageSizeOption,
+  TextToImageOutputFormatSelectorProps,
+  TextToImageOutputFormatOption,
+  TextToImageGenerateButtonProps,
+  TextToImageSettingsSheetProps,
+} from "./presentation";

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

@@ -0,0 +1,98 @@
+/**
+ * Aspect Ratio Selector Component
+ * Button group for selecting image aspect ratio
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { AspectRatio } from "../../domain/types/form.types";
+
+export interface AspectRatioOption {
+  value: AspectRatio;
+  label: string;
+}
+
+export interface AspectRatioSelectorProps {
+  value: AspectRatio;
+  onChange: (ratio: AspectRatio) => void;
+  options: AspectRatioOption[];
+  label: string;
+}
+
+export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
+  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="bodySmall"
+                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: 8,
+  },
+  option: {
+    flex: 1,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+  },
+});

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

@@ -0,0 +1,88 @@
+/**
+ * Example Prompts Component
+ * Horizontal scrollable list of example prompts
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface ExamplePromptsProps {
+  prompts: string[];
+  onSelectPrompt: (prompt: string) => void;
+  label: string;
+  cardWidth?: number;
+}
+
+export const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
+  prompts,
+  onSelectPrompt,
+  label,
+  cardWidth = 180,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (prompts.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {prompts.map((prompt, index) => (
+          <TouchableOpacity
+            key={`prompt-${index}`}
+            style={[
+              styles.card,
+              {
+                backgroundColor: tokens.colors.surface,
+                width: cardWidth,
+              },
+            ]}
+            onPress={() => onSelectPrompt(prompt)}
+            activeOpacity={0.7}
+          >
+            <AtomicText
+              type="bodySmall"
+              style={{ color: tokens.colors.textPrimary }}
+              numberOfLines={2}
+            >
+              {prompt}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  scrollContent: {
+    paddingRight: 16,
+  },
+  card: {
+    padding: 12,
+    borderRadius: 8,
+    marginRight: 12,
+  },
+});

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

@@ -0,0 +1,98 @@
+/**
+ * Image Size Selector Component
+ * Selection for image output size
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ImageSize } from "../../domain/types/form.types";
+
+export interface ImageSizeOption {
+  value: ImageSize;
+  label: string;
+}
+
+export interface ImageSizeSelectorProps {
+  value: ImageSize;
+  onChange: (size: ImageSize) => void;
+  options: ImageSizeOption[];
+  label: string;
+}
+
+export const ImageSizeSelector: React.FC<ImageSizeSelectorProps> = ({
+  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.optionsGrid}>
+        {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="bodySmall"
+                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,
+  },
+  optionsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+  },
+  option: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+});

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