@umituz/react-native-ai-generation-content 1.13.1 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.13.1",
+  "version": "1.15.0",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -67,7 +67,7 @@
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@umituz/react-native-animation": "*",
-    "@umituz/react-native-design-system": "^2.3.33",
+    "@umituz/react-native-design-system": "^2.4.1",
     "@umituz/react-native-firebase": "^1.13.20",
     "@umituz/react-native-haptics": "^1.0.2",
     "@umituz/react-native-image": "*",

package/src/domains/creations/presentation/components/CreationCard.tsx

@@ -7,7 +7,6 @@ import {
 } from "@umituz/react-native-design-system";
 import { timezoneService } from "@umituz/react-native-timezone";
 import type { Creation } from "../../domain/entities/Creation";
-import type { CreationType } from "../../domain/value-objects/CreationsConfig";
 
 import { useCreationsProvider } from "./CreationsProvider";
 
@@ -29,7 +28,7 @@ export function CreationCard({
   locale = "en-US",
 }: CreationCardProps) {
   const tokens = useAppDesignTokens();
-  const { translatedTypes, t } = useCreationsProvider();
+  const { translatedTypes } = useCreationsProvider();
 
   const typeConfig = translatedTypes.find((type) => type.id === creation.type);
   const icon = typeConfig?.icon;

package/src/domains/creations/presentation/components/CreationsGrid.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { FlatList, RefreshControl, StyleSheet, type ViewStyle } from 'react-native';
 import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
 import type { Creation } from "../../domain/entities/Creation";
-import type { CreationType } from "../../domain/value-objects/CreationsConfig";
 import { CreationCard } from "./CreationCard";
 
 interface CreationsGridProps {

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

@@ -1,7 +1,6 @@
 declare const __DEV__: boolean;
 
 import React, { useMemo, useCallback, useState } from "react";
-import { View, StyleSheet, type LayoutChangeEvent } from "react-native";
 import {
   useAppDesignTokens,
   useAlert,
@@ -9,17 +8,20 @@ import {
   AlertMode,
   useSharing,
   FilterBottomSheet,
-  type DesignTokens,
   type BottomSheetModalRef,
-  ScreenLayout
+  ScreenLayout,
 } from "@umituz/react-native-design-system";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
-import { GalleryHeader, CreationsGrid, CreationImageViewer, GalleryEmptyStates } from "../components";
-import { getTranslatedTypes, getFilterCategoriesFromConfig } from "../utils/filterUtils";
+import {
+  GalleryHeader,
+  CreationsGrid,
+  CreationImageViewer,
+  GalleryEmptyStates,
+} from "../components";
+import { getFilterCategoriesFromConfig } from "../utils/filterUtils";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
@@ -61,7 +63,6 @@ function CreationsGalleryScreenContent({
   showFilter = config.showFilter ?? true,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
   const { share } = useSharing();
   const alert = useAlert();
 
@@ -83,8 +84,10 @@ function CreationsGalleryScreenContent({
   );
 
   // Prepare data for UI using utils
-  const translatedTypes = useMemo(() => getTranslatedTypes(config, t), [config, t]);
-  const allCategories = useMemo(() => getFilterCategoriesFromConfig(config, t), [config, t]);
+  const allCategories = useMemo(
+    () => getFilterCategoriesFromConfig(config, t),
+    [config, t],
+  );
 
   const handleShare = useCallback((creation: Creation) => {
     void share(creation.uri, { dialogTitle: t("common.share") });
@@ -124,15 +127,17 @@ function CreationsGalleryScreenContent({
   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 styles = useStyles(tokens);
-
   const renderEmptyComponent = useMemo(() => (
     <GalleryEmptyStates
       isLoading={isLoading}
@@ -228,13 +233,3 @@ function CreationsGalleryScreenContent({
   );
 }
 
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
-  container: { flex: 1, backgroundColor: tokens.colors.background },
-  centerContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: 400,
-    paddingHorizontal: tokens.spacing.xl
-  },
-});

package/src/index.ts

@@ -186,6 +186,7 @@ export {
   usePendingJobs,
   useBackgroundGeneration,
   usePhotoGeneration,
+  useGenerationFlow,
 } from "./presentation/hooks";
 
 export type {
@@ -203,6 +204,8 @@ export type {
   PhotoGenerationConfig,
   PhotoGenerationState,
   PhotoGenerationStatus,
+  UseGenerationFlowOptions,
+  UseGenerationFlowReturn,
 } from "./presentation/hooks";
 
 // =============================================================================
@@ -221,6 +224,8 @@ export {
   ResultImageCard,
   ResultStoryCard,
   ResultActions,
+  DEFAULT_RESULT_CONFIG,
+  PhotoStep,
 } from "./presentation/components";
 
 export type {
@@ -238,8 +243,35 @@ export type {
   ResultImageCardProps,
   ResultStoryCardProps,
   ResultActionsProps,
+  ResultConfig,
+  ResultHeaderConfig,
+  ResultImageConfig,
+  ResultStoryConfig,
+  ResultActionsConfig,
+  ResultLayoutConfig,
+  ResultActionButton,
+  PhotoStepProps,
 } from "./presentation/components";
 
+// =============================================================================
+// PRESENTATION LAYER - Flow Configuration
+// =============================================================================
+
+export {
+  DEFAULT_SINGLE_PHOTO_FLOW,
+  DEFAULT_DUAL_PHOTO_FLOW,
+} from "./presentation/types/flow-config.types";
+
+export type {
+  PhotoStepConfig,
+  TextInputStepConfig,
+  PreviewStepConfig,
+  GenerationFlowConfig,
+  PhotoStepData,
+  TextInputStepData,
+  GenerationFlowState,
+} from "./presentation/types/flow-config.types";
+
 // =============================================================================
 // DOMAINS - AI Prompts
 // =============================================================================

package/src/presentation/components/index.ts

@@ -22,3 +22,4 @@ export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
 export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
 
 export * from "./result";
+export * from "./photo-step";

package/src/presentation/components/photo-step/PhotoStep.tsx

@@ -0,0 +1,96 @@
+/**
+ * PhotoStep Component
+ * Configurable photo upload step using design system components
+ *
+ * @package @umituz/react-native-ai-generation-content
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, type ViewStyle, type StyleProp } from "react-native";
+import {
+  StepHeader,
+  PhotoUploadCard,
+} from "@umituz/react-native-design-system";
+import type { PhotoStepConfig } from "../../types/flow-config.types";
+
+export interface PhotoStepProps {
+  /** Step configuration */
+  config: PhotoStepConfig;
+  /** Current photo URI */
+  imageUri: string | null;
+  /** Photo preview URL */
+  previewUrl?: string;
+  /** Whether photo is being validated */
+  isValidating?: boolean;
+  /** Whether photo is valid */
+  isValid?: boolean | null;
+  /** Handler for photo selection */
+  onPhotoSelect: () => void;
+  /** Whether photo selection is disabled */
+  disabled?: boolean;
+  /** Step title */
+  title: string;
+  /** Step subtitle */
+  subtitle?: string;
+  /** Translation strings for photo upload card */
+  translations: {
+    tapToUpload: string;
+    selectPhoto: string;
+    change: string;
+    analyzing?: string;
+  };
+  /** Additional content to render below photo card */
+  children?: React.ReactNode;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+}
+
+export const PhotoStep: React.FC<PhotoStepProps> = ({
+  config,
+  imageUri,
+  previewUrl,
+  isValidating = false,
+  isValid = null,
+  onPhotoSelect,
+  disabled = false,
+  title,
+  subtitle,
+  translations,
+  children,
+  style,
+}) => {
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+      }),
+    [],
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Step Header */}
+      <StepHeader
+        title={title}
+        subtitle={subtitle}
+        config={config.header}
+      />
+
+      {/* Photo Upload Card */}
+      <PhotoUploadCard
+        imageUri={previewUrl || imageUri}
+        onPress={onPhotoSelect}
+        isValidating={isValidating}
+        isValid={config.enableValidation ? isValid : null}
+        disabled={disabled}
+        config={config.photoCard}
+        translations={translations}
+      />
+
+      {/* Additional content (e.g., name input, tips, etc.) */}
+      {children}
+    </View>
+  );
+};

package/src/presentation/components/photo-step/index.ts

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

package/src/presentation/components/result/GenerationResultContent.tsx

@@ -1,16 +1,28 @@
 /**
  * GenerationResultContent Component
- * Composition of result components for CelebrationModal
+ * Composition of result components for CelebrationModal - fully configurable
  */
 
 import * as React from "react";
 import { useMemo } from "react";
-import { ScrollView, StyleSheet, Dimensions, type ViewStyle, type StyleProp } from "react-native";
-import { Animated, useAppDesignTokens } from "@umituz/react-native-design-system";
+import {
+  ScrollView,
+  StyleSheet,
+  Dimensions,
+  type ViewStyle,
+  type StyleProp,
+  type DimensionValue,
+} from "react-native";
+import {
+  Animated,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 import { ResultHeader } from "./ResultHeader";
 import { ResultImageCard } from "./ResultImageCard";
 import { ResultStoryCard } from "./ResultStoryCard";
 import { ResultActions } from "./ResultActions";
+import type { ResultConfig } from "../../types/result-config.types";
+import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
 const { width } = Dimensions.get("window");
 
@@ -36,9 +48,12 @@ export interface GenerationResultContentProps {
     aiGenerated: string;
   };
   modalStyle?: StyleProp<ViewStyle>;
+  config?: ResultConfig;
 }
 
-export const GenerationResultContent: React.FC<GenerationResultContentProps> = ({
+export const GenerationResultContent: React.FC<
+  GenerationResultContentProps
+> = ({
   result,
   onShare,
   onSave,
@@ -47,25 +62,35 @@ export const GenerationResultContent: React.FC<GenerationResultContentProps> = (
   isSaving,
   translations,
   modalStyle,
+  config = DEFAULT_RESULT_CONFIG,
 }) => {
   const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_RESULT_CONFIG, ...config };
 
-  const styles = useMemo(() => StyleSheet.create({
-    container: {
-      width: width - 40,
-      maxHeight: "90%",
-      backgroundColor: tokens.colors.background,
-      borderRadius: 28,
-      overflow: "hidden",
-    },
-    scrollView: {
-      flex: 1,
-    },
-    scrollContent: {
-      paddingTop: 24,
-      paddingBottom: 20,
-    },
-  }), [tokens]);
+  const styles = useMemo(() => {
+    const containerWidth = cfg.layout?.maxWidth ?? width - 40;
+    const maxHeight: DimensionValue = (cfg.layout?.maxHeight ??
+      "90%") as DimensionValue;
+
+    return StyleSheet.create({
+      container: {
+        width: containerWidth,
+        maxHeight,
+        backgroundColor:
+          cfg.layout?.backgroundColor ?? tokens.colors.background,
+        borderRadius: cfg.layout?.borderRadius ?? 28,
+        overflow: "hidden",
+      },
+      scrollView: {
+        flex: 1,
+      },
+      scrollContent: {
+        paddingTop: cfg.layout?.contentPadding?.top ?? 24,
+        paddingBottom: cfg.layout?.contentPadding?.bottom ?? 20,
+        paddingHorizontal: cfg.layout?.contentPadding?.horizontal ?? 0,
+      },
+    });
+  }, [tokens, cfg, width]);
 
   return (
     <Animated.View style={[styles.container, modalStyle]}>
@@ -73,10 +98,21 @@ export const GenerationResultContent: React.FC<GenerationResultContentProps> = (
         style={styles.scrollView}
         contentContainerStyle={styles.scrollContent}
         showsVerticalScrollIndicator={false}
+        scrollEnabled={cfg.layout?.scrollEnabled ?? true}
       >
-        <ResultHeader title={result.title} date={result.date} />
-        <ResultImageCard imageUrl={result.imageUrl} badgeText={translations.aiGenerated} />
-        {result.story && <ResultStoryCard story={result.story} />}
+        <ResultHeader
+          title={result.title}
+          date={result.date}
+          config={cfg.header}
+        />
+        <ResultImageCard
+          imageUrl={result.imageUrl}
+          badgeText={translations.aiGenerated}
+          config={cfg.image}
+        />
+        {result.story && (
+          <ResultStoryCard story={result.story} config={cfg.story} />
+        )}
         <ResultActions
           onShare={onShare}
           onSave={onSave}
@@ -84,6 +120,7 @@ export const GenerationResultContent: React.FC<GenerationResultContentProps> = (
           isSharing={isSharing}
           isSaving={isSaving}
           translations={translations}
+          config={cfg.actions}
         />
       </ScrollView>
     </Animated.View>