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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.16",
+  "version": "1.17.17",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,6 +1,8 @@
 declare const __DEV__: boolean;
 
 import React, { useMemo, useCallback, useState } from "react";
+import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useAppDesignTokens,
   useAlert,
@@ -9,7 +11,7 @@ import {
   useSharing,
   FilterBottomSheet,
   type BottomSheetModalRef,
-  ScreenLayout,
+  type DesignTokens,
 } from "@umituz/react-native-design-system";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
@@ -17,7 +19,7 @@ import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
 import {
   GalleryHeader,
-  CreationsGrid,
+  CreationCard,
   CreationImageViewer,
   GalleryEmptyStates,
 } from "../components";
@@ -26,6 +28,7 @@ import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import { CreationDetailScreen } from "./CreationDetailScreen";
+import { CreationsProvider } from "../components/CreationsProvider";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -40,8 +43,6 @@ interface CreationsGalleryScreenProps {
   readonly showFilter?: boolean;
 }
 
-import { CreationsProvider } from "../components/CreationsProvider";
-
 export function CreationsGalleryScreen(props: CreationsGalleryScreenProps) {
   return (
     <CreationsProvider config={props.config} t={props.t}>
@@ -62,6 +63,7 @@ function CreationsGalleryScreenContent({
   emptyActionLabel,
   showFilter = config.showFilter ?? true,
 }: CreationsGalleryScreenProps) {
+  const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
   const { share } = useSharing();
   const alert = useAlert();
@@ -76,14 +78,12 @@ function CreationsGalleryScreenContent({
   const deleteMutation = useDeleteCreation({ userId, repository });
   const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
 
-  // Refetch creations when screen comes into focus
   useFocusEffect(
     useCallback(() => {
       void refetch();
     }, [refetch])
   );
 
-  // Prepare data for UI using utils
   const allCategories = useMemo(
     () => getFilterCategoriesFromConfig(config, t),
     [config, t],
@@ -118,27 +118,62 @@ function CreationsGalleryScreenContent({
     );
   }, [alert, config, deleteMutation, t]);
 
-  // Handle viewing a creation - shows detail screen
   const handleView = useCallback((creation: Creation) => {
     setSelectedCreation(creation);
   }, []);
 
-  // Handle favorite toggle
   const handleFavorite = useCallback((creation: Creation, isFavorite: boolean) => {
     void (async () => {
       if (!userId) return;
-      const success = await repository.updateFavorite(
-        userId,
-        creation.id,
-        isFavorite,
-      );
+      const success = await repository.updateFavorite(userId, creation.id, isFavorite);
       if (success) {
         void refetch();
       }
     })();
   }, [userId, repository, refetch]);
 
-  const renderEmptyComponent = useMemo(() => (
+  const styles = useStyles(tokens, insets);
+
+  const renderItem = useCallback(
+    ({ item }: { item: Creation }) => (
+      <CreationCard
+        creation={item}
+        callbacks={{
+          onPress: () => handleView(item),
+          onShare: async () => handleShare(item),
+          onDelete: () => handleDelete(item),
+          onFavorite: () => handleFavorite(item, !item.isFavorite),
+        }}
+      />
+    ),
+    [handleView, handleShare, handleDelete, handleFavorite]
+  );
+
+  const renderHeader = useMemo(() => {
+    if ((!creations || creations.length === 0) && !isLoading) return null;
+
+    return (
+      <View style={styles.header}>
+        <GalleryHeader
+          title={t(config.translations.title)}
+          count={filtered.length}
+          countLabel={t(config.translations.photoCount)}
+          isFiltered={isFiltered}
+          showFilter={showFilter}
+          filterLabel={t(config.translations.filterLabel)}
+          onFilterPress={() => {
+            if (__DEV__) {
+              // eslint-disable-next-line no-console
+              console.log('[CreationsGallery] Filter button pressed');
+            }
+            filterSheetRef.current?.present();
+          }}
+        />
+      </View>
+    );
+  }, [creations, isLoading, filtered.length, isFiltered, showFilter, t, config, styles.header]);
+
+  const renderEmpty = useMemo(() => (
     <GalleryEmptyStates
       isLoading={isLoading}
       creations={creations}
@@ -166,63 +201,37 @@ function CreationsGalleryScreenContent({
   }
 
   return (
-    <>
-      <ScreenLayout
-        scrollable={false}
-        edges={["top"]}
-        backgroundColor={tokens.colors.background}
-        header={
-          (!creations || creations?.length === 0) && !isLoading ? null : (
-            <GalleryHeader
-              title={t(config.translations.title)}
-              count={filtered.length}
-              countLabel={t(config.translations.photoCount)}
-              isFiltered={isFiltered}
-              showFilter={showFilter}
-              filterLabel={t(config.translations.filterLabel)}
-              onFilterPress={() => {
-                if (__DEV__) {
-                  // eslint-disable-next-line no-console
-                  console.log('[CreationsGallery] Filter button pressed');
-                  // eslint-disable-next-line no-console
-                  console.log('[CreationsGallery] filterSheetRef.current:', filterSheetRef.current);
-                  // eslint-disable-next-line no-console
-                  console.log('[CreationsGallery] allCategories:', allCategories);
-                }
-                filterSheetRef.current?.present();
-              }}
-            />
-          )
+    <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
+      <FlatList
+        data={filtered}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        ListHeaderComponent={renderHeader}
+        ListEmptyComponent={renderEmpty}
+        contentContainerStyle={[
+          styles.listContent,
+          (!filtered || filtered.length === 0) && styles.emptyContent,
+        ]}
+        showsVerticalScrollIndicator={false}
+        refreshControl={
+          <RefreshControl
+            refreshing={isLoading}
+            onRefresh={() => void refetch()}
+            tintColor={tokens.colors.primary}
+          />
         }
-      >
-        {/* Main Content Grid - handles empty/loading via ListEmptyComponent */}
-        <CreationsGrid
-          creations={filtered}
-          isLoading={isLoading}
-          onRefresh={() => void refetch()}
-          onPress={(creation) => handleView(creation as Creation)}
-          onShare={async (creation) => handleShare(creation as Creation)}
-          onDelete={(creation) => handleDelete(creation as Creation)}
-          onFavorite={(creation) => {
-            const c = creation as Creation;
-            handleFavorite(c, !c.isFavorite);
-          }}
-          contentContainerStyle={{ paddingBottom: tokens.spacing.xl }}
-          ListEmptyComponent={renderEmptyComponent}
-        />
+      />
 
-        <CreationImageViewer
-          creations={filtered}
-          visible={viewerVisible}
-          index={viewerIndex}
-          onDismiss={() => setViewerVisible(false)}
-          onIndexChange={setViewerIndex}
-          enableEditing={enableEditing}
-          onImageEdit={onImageEdit}
-        />
-      </ScreenLayout>
+      <CreationImageViewer
+        creations={filtered}
+        visible={viewerVisible}
+        index={viewerIndex}
+        onDismiss={() => setViewerVisible(false)}
+        onIndexChange={setViewerIndex}
+        enableEditing={enableEditing}
+        onImageEdit={onImageEdit}
+      />
 
-      {/* FilterBottomSheet must be outside ScreenLayout for proper portal rendering */}
       <FilterBottomSheet
         ref={filterSheetRef}
         categories={allCategories}
@@ -234,7 +243,27 @@ function CreationsGalleryScreenContent({
         onClearFilters={clearFilters}
         title={t(config.translations.filterTitle)}
       />
-    </>
+    </View>
   );
 }
 
+const useStyles = (tokens: DesignTokens, insets: { top: number; bottom: number }) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    header: {
+      paddingTop: insets.top + tokens.spacing.md,
+      backgroundColor: tokens.colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: tokens.colors.border,
+    },
+    listContent: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingTop: tokens.spacing.md,
+      paddingBottom: insets.bottom + 100,
+    },
+    emptyContent: {
+      flexGrow: 1,
+    },
+  });

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 {
+  PromptInput,
+  ExamplePrompts,
+  NumImagesSelector,
+  StyleSelector,
+  AspectRatioSelector,
+  ImageSizeSelector,
+  OutputFormatSelector,
+  TextToImageGenerateButton,
+  SettingsSheet,
+} from "./presentation";
+
+export type {
+  PromptInputProps,
+  ExamplePromptsProps,
+  NumImagesSelectorProps,
+  StyleSelectorProps,
+  AspectRatioSelectorProps,
+  AspectRatioOption,
+  ImageSizeSelectorProps,
+  ImageSizeOption,
+  OutputFormatSelectorProps,
+  OutputFormatOption,
+  TextToImageGenerateButtonProps,
+  SettingsSheetProps,
+} 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,
+  },
+});