@umituz/react-native-ai-generation-content 1.36.1 → 1.37.0

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

@@ -2,10 +2,6 @@ import React, { useState, useMemo, useCallback, useEffect, useRef } from "react"
 import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
-  useAlert,
-  AlertType,
-  AlertMode,
-  useSharing,
   FilterSheet,
   ScreenLayout,
   useAppFocusEffect,
@@ -13,10 +9,9 @@ import {
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
+import { useGalleryCallbacks } from "../hooks/useGalleryCallbacks";
 import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
-import { ResultPreviewScreen } from "../../../result-preview/presentation/components/ResultPreviewScreen";
-import { StarRatingPicker } from "../../../result-preview/presentation/components/StarRatingPicker";
-import { useResultActions } from "../../../result-preview/presentation/hooks/useResultActions";
+import { GalleryResultPreview } from "../components/GalleryResultPreview";
 import { usePendingJobs } from "../../../../presentation/hooks/use-pending-jobs";
 import { MEDIA_FILTER_OPTIONS, STATUS_FILTER_OPTIONS } from "../../domain/types/creation-filter";
 import { getPreviewUrl } from "../../domain/utils";
@@ -33,7 +28,6 @@ interface CreationsGalleryScreenProps {
   readonly onEmptyAction?: () => void;
   readonly emptyActionLabel?: string;
   readonly showFilter?: boolean;
-  /** Show pending generation jobs badge in header */
   readonly showPendingJobs?: boolean;
 }
 
@@ -49,16 +43,13 @@ export function CreationsGalleryScreen({
   showPendingJobs = true,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
-  const { share } = useSharing();
-  const alert = useAlert();
   const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
   const [showRatingPicker, setShowRatingPicker] = useState(false);
   const hasAutoSelectedRef = useRef(false);
 
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
-
-  // Background jobs for pending generations
   const { jobs: pendingJobs } = usePendingJobs();
+  const deleteMutation = useDeleteCreation({ userId, repository });
 
   // Auto-select creation when initialCreationId is provided
   useEffect(() => {
@@ -71,16 +62,16 @@ export function CreationsGalleryScreen({
     }
   }, [initialCreationId, creations]);
 
-  const deleteMutation = useDeleteCreation({ userId, repository });
-
-  const selectedImageUrl = selectedCreation ? (getPreviewUrl(selectedCreation.output) || selectedCreation.uri) : undefined;
-  const selectedVideoUrl = selectedCreation?.output?.videoUrl;
-
-  const { isSharing, isSaving, handleDownload, handleShare } = useResultActions({
-    imageUrl: selectedImageUrl,
-    videoUrl: selectedVideoUrl,
-    onSaveSuccess: () => alert.show(AlertType.SUCCESS, AlertMode.TOAST, t("result.saveSuccess"), t("result.saveSuccessMessage")),
-    onSaveError: () => alert.show(AlertType.ERROR, AlertMode.TOAST, t("common.error"), t("result.saveError")),
+  const callbacks = useGalleryCallbacks({
+    userId,
+    repository,
+    config,
+    t,
+    deleteMutation,
+    refetch: async () => { await refetch(); },
+    setSelectedCreation,
+    setShowRatingPicker,
+    selectedCreation,
   });
 
   const statusOptions = config.filterConfig?.statusOptions ?? STATUS_FILTER_OPTIONS;
@@ -92,57 +83,6 @@ export function CreationsGalleryScreen({
 
   useAppFocusEffect(useCallback(() => { void refetch(); }, [refetch]));
 
-  const handleShareCard = useCallback((c: Creation) => {
-    void share(c.uri, { dialogTitle: t("common.share") });
-  }, [share, t]);
-
-  const handleDelete = useCallback((c: Creation) => {
-    alert.show(AlertType.WARNING, AlertMode.MODAL, t(config.translations.deleteTitle), t(config.translations.deleteMessage), {
-      actions: [
-        { id: "cancel", label: t("common.cancel"), onPress: () => {} },
-        { id: "delete", label: t("common.delete"), style: "destructive", onPress: async () => {
-          await deleteMutation.mutateAsync(c.id);
-        }}
-      ]
-    });
-  }, [alert, config, deleteMutation, t]);
-
-  const handleFavorite = useCallback((c: Creation, isFavorite: boolean) => {
-    void (async () => {
-      if (!userId) return;
-      const success = await repository.updateFavorite(userId, c.id, isFavorite);
-      if (success) void refetch();
-    })();
-  }, [userId, repository, refetch]);
-
-  const handleCardPress = useCallback((item: Creation) => {
-    setSelectedCreation(item);
-  }, []);
-
-  const handleBack = useCallback(() => {
-    setSelectedCreation(null);
-  }, []);
-
-  const handleTryAgain = useCallback(() => {
-    setSelectedCreation(null);
-  }, []);
-
-  const handleOpenRatingPicker = useCallback(() => {
-    setShowRatingPicker(true);
-  }, []);
-
-  const handleSubmitRating = useCallback((rating: number, description: string) => {
-    if (!userId || !selectedCreation) return;
-    void (async () => {
-      const success = await repository.rate(userId, selectedCreation.id, rating, description);
-      if (success) {
-        setSelectedCreation({ ...selectedCreation, rating, ratedAt: new Date() });
-        alert.show(AlertType.SUCCESS, AlertMode.TOAST, t("result.rateSuccessTitle"), t("result.rateSuccessMessage"));
-        void refetch();
-      }
-    })();
-  }, [userId, selectedCreation, repository, alert, t, refetch]);
-
   const filterButtons = useMemo(() => {
     const buttons = [];
     if (showStatusFilter) {
@@ -168,10 +108,7 @@ export function CreationsGalleryScreen({
 
   const getScenarioTitle = useCallback((type: string): string => {
     const typeConfig = config.types?.find((tc) => tc.id === type);
-    if (typeConfig?.labelKey) {
-      return t(typeConfig.labelKey);
-    }
-    return type.split("_").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+    return typeConfig?.labelKey ? t(typeConfig.labelKey) : type.split("_").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
   }, [config.types, t]);
 
   const renderItem = useCallback(({ item }: { item: Creation }) => (
@@ -179,24 +116,21 @@ export function CreationsGalleryScreen({
       creation={item}
       titleText={getScenarioTitle(item.type)}
       callbacks={{
-        onPress: () => handleCardPress(item),
-        onShare: async () => handleShareCard(item),
-        onDelete: () => handleDelete(item),
-        onFavorite: () => handleFavorite(item, !item.isFavorite),
+        onPress: () => callbacks.handleCardPress(item),
+        onShare: async () => callbacks.handleShareCard(item),
+        onDelete: () => callbacks.handleDelete(item),
+        onFavorite: () => callbacks.handleFavorite(item, !item.isFavorite),
       }}
     />
-  ), [handleShareCard, handleDelete, handleFavorite, handleCardPress, getScenarioTitle]);
+  ), [callbacks, getScenarioTitle]);
 
-  // Calculate active pending jobs count once
   const activePendingCount = useMemo(() => {
     if (!showPendingJobs) return 0;
     return pendingJobs.filter((j) => j.status === "processing" || j.status === "queued").length;
   }, [showPendingJobs, pendingJobs]);
 
   const renderHeader = useMemo(() => {
-    const hasCreations = creations && creations.length > 0;
-    if (!hasCreations && !isLoading) return null;
-
+    if (!creations?.length && !isLoading) return null;
     return (
       <View style={[styles.header, { backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
         <GalleryHeader
@@ -227,45 +161,25 @@ export function CreationsGalleryScreen({
     />
   ), [isLoading, creations, filters.isFiltered, tokens, t, config, emptyActionLabel, onEmptyAction, filters.clearAllFilters]);
 
-  // Show result preview when a creation is selected
+  const selectedImageUrl = selectedCreation ? (getPreviewUrl(selectedCreation.output) || selectedCreation.uri) : undefined;
+  const selectedVideoUrl = selectedCreation?.output?.videoUrl;
   const hasMediaToShow = selectedImageUrl || selectedVideoUrl;
+
   if (selectedCreation && hasMediaToShow) {
-    const hasRating = selectedCreation.rating !== undefined && selectedCreation.rating !== null;
     return (
-      <>
-        <ResultPreviewScreen
-          imageUrl={selectedVideoUrl ? undefined : selectedImageUrl}
-          videoUrl={selectedVideoUrl}
-          isSaving={isSaving}
-          isSharing={isSharing}
-          onDownload={handleDownload}
-          onShare={handleShare}
-          onTryAgain={handleTryAgain}
-          onNavigateBack={handleBack}
-          onRate={handleOpenRatingPicker}
-          hideLabel
-          iconOnly
-          showTryAgain
-          showRating={!hasRating}
-          translations={{
-            title: t(config.translations.title),
-            saveButton: t("result.saveButton"),
-            saving: t("result.saving"),
-            shareButton: t("result.shareButton"),
-            sharing: t("result.sharing"),
-            tryAnother: t("result.tryAnother"),
-          }}
-        />
-        <StarRatingPicker
-          visible={showRatingPicker}
-          onClose={() => setShowRatingPicker(false)}
-          onRate={handleSubmitRating}
-          title={t("result.rateTitle")}
-          submitLabel={t("common.submit")}
-          cancelLabel={t("common.cancel")}
-          descriptionPlaceholder={t("result.feedbackPlaceholder")}
-        />
-      </>
+      <GalleryResultPreview
+        selectedCreation={selectedCreation}
+        imageUrl={selectedVideoUrl ? undefined : selectedImageUrl}
+        videoUrl={selectedVideoUrl}
+        showRatingPicker={showRatingPicker}
+        config={config}
+        t={t}
+        onBack={callbacks.handleBack}
+        onTryAgain={callbacks.handleTryAgain}
+        onRate={callbacks.handleOpenRatingPicker}
+        onSubmitRating={callbacks.handleSubmitRating}
+        onCloseRating={() => setShowRatingPicker(false)}
+      />
     );
   }
 
@@ -277,7 +191,7 @@ export function CreationsGalleryScreen({
         keyExtractor={(item) => item.id}
         ListHeaderComponent={renderHeader}
         ListEmptyComponent={renderEmpty}
-        contentContainerStyle={[styles.listContent, (!filters.filtered || filters.filtered.length === 0) && styles.emptyContent]}
+        contentContainerStyle={[styles.listContent, (!filters.filtered?.length) && styles.emptyContent]}
         showsVerticalScrollIndicator={false}
         refreshControl={<RefreshControl refreshing={isLoading} onRefresh={() => void refetch()} tintColor={tokens.colors.primary} />}
       />

package/src/domains/generation/wizard/infrastructure/strategies/wizard-strategy.factory.ts

@@ -17,7 +17,6 @@ export type { WizardStrategy } from "./wizard-strategy.types";
 
 export interface CreateWizardStrategyOptions {
   readonly scenario: WizardScenarioData;
-  readonly wizardData: Record<string, unknown>;
   readonly collectionName?: string;
 }
 

package/src/domains/generation/wizard/presentation/components/GenericWizardFlow.tsx

@@ -4,33 +4,13 @@
  * Supports both scenario object and scenarioId (resolved from registry)
  */
 
-import React, { useMemo, useCallback, useEffect, useRef, useState } from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  useAppDesignTokens,
-  useAlert,
-  AlertType,
-  AlertMode,
-} from "@umituz/react-native-design-system";
-import { useFlow } from "../../../infrastructure/flow/useFlow";
-import {
-  StepType,
-  type StepDefinition,
-} from "../../../../../domain/entities/flow-config.types";
+import React, { useMemo } from "react";
+import type { StepType } from "../../../../../domain/entities/flow-config.types";
 import type { WizardFeatureConfig } from "../../domain/entities/wizard-config.types";
-import { buildFlowStepsFromWizard } from "../../infrastructure/builders/dynamic-step-builder";
-import {
-  useWizardGeneration,
-  type WizardScenarioData,
-} from "../hooks/useWizardGeneration";
+import type { WizardScenarioData } from "../hooks/useWizardGeneration";
 import type { AlertMessages } from "../../../../../presentation/hooks/generation/types";
-import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
-import type { Creation } from "../../../../creations/domain/entities/Creation";
-import { createCreationsRepository } from "../../../../creations";
-import { useResultActions } from "../../../../result-preview/presentation/hooks/useResultActions";
 import { validateScenario } from "../utilities/validateScenario";
-import { WizardStepRenderer } from "./WizardStepRenderer";
-import { StarRatingPicker } from "../../../../result-preview/presentation/components/StarRatingPicker";
+import { WizardFlowContent } from "./WizardFlowContent";
 import {
   getConfiguredScenario,
   getDefaultOutputType,
@@ -83,9 +63,6 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = (props) => {
     renderResult,
   } = props;
 
-  const tokens = useAppDesignTokens();
-  const alert = useAlert();
-
   // Resolve scenario from prop or registry
   const scenario = useMemo<WizardScenarioData | undefined>(() => {
     if (scenarioProp) {
@@ -118,10 +95,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = (props) => {
     return undefined;
   }, [scenarioProp, scenarioId]);
 
-  const validatedScenario = useMemo(
-    () => validateScenario(scenario),
-    [scenario],
-  );
+  const validatedScenario = useMemo(() => validateScenario(scenario), [scenario]);
 
   return (
     <WizardFlowContent
@@ -139,209 +113,9 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = (props) => {
       onBack={onBack}
       onTryAgain={onTryAgain}
       t={t}
-      tokens={tokens}
-      alert={alert}
       renderPreview={renderPreview}
       renderGenerating={renderGenerating}
       renderResult={renderResult}
     />
   );
 };
-
-interface WizardFlowContentProps
-  extends Omit<GenericWizardFlowProps, "scenarioId" | "translations"> {
-  readonly validatedScenario: WizardScenarioData;
-  readonly tokens: ReturnType<typeof useAppDesignTokens>;
-  readonly alert: ReturnType<typeof useAlert>;
-}
-
-const WizardFlowContent: React.FC<WizardFlowContentProps> = (props) => {
-  const {
-    featureConfig,
-    scenario,
-    validatedScenario,
-    userId,
-    alertMessages,
-    skipResultStep = false,
-    onStepChange,
-    onGenerationStart,
-    onGenerationComplete,
-    onGenerationError,
-    onCreditsExhausted,
-    onBack,
-    onTryAgain,
-    t,
-    tokens,
-    alert,
-    renderPreview,
-    renderGenerating,
-    renderResult,
-  } = props;
-
-  const [currentCreation, setCurrentCreation] = useState<Creation | null>(null);
-  const [showRatingPicker, setShowRatingPicker] = useState(false);
-  const [hasRated, setHasRated] = useState(false);
-  const prevStepIdRef = useRef<string | undefined>(undefined);
-  const repository = useMemo(() => createCreationsRepository("creations"), []);
-
-  const flowSteps = useMemo<StepDefinition[]>(
-    () =>
-      buildFlowStepsFromWizard(featureConfig, {
-        includePreview: true,
-        includeGenerating: true,
-        includeResult: !skipResultStep,
-      }),
-    [featureConfig, skipResultStep],
-  );
-
-  const flow = useFlow({ steps: flowSteps, initialStepIndex: 0 });
-  const {
-    currentStep,
-    currentStepIndex,
-    customData,
-    generationProgress,
-    generationResult,
-    nextStep,
-    previousStep,
-    setCustomData,
-    setResult,
-  } = flow;
-
-  const resultImageUrl =
-    currentCreation?.output?.imageUrl || currentCreation?.uri || "";
-  const resultVideoUrl = currentCreation?.output?.videoUrl || "";
-  const { isSaving, isSharing, handleDownload, handleShare } = useResultActions(
-    { imageUrl: resultImageUrl, videoUrl: resultVideoUrl },
-  );
-
-  const handleGenerationComplete = useCallback(
-    (result: unknown) => {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[WizardFlowContent] Generation completed");
-      }
-      setResult(result);
-      setCurrentCreation(result as Creation);
-      onGenerationComplete?.(result);
-      if (!skipResultStep) nextStep();
-    },
-    [setResult, nextStep, onGenerationComplete, skipResultStep],
-  );
-
-  useWizardGeneration({
-    scenario: validatedScenario,
-    wizardData: customData,
-    userId,
-    isGeneratingStep: currentStep?.type === StepType.GENERATING,
-    alertMessages,
-    onSuccess: handleGenerationComplete,
-    onError: onGenerationError,
-    onCreditsExhausted,
-  });
-
-  useEffect(() => {
-    if (currentStep && onStepChange && prevStepIdRef.current !== currentStep.id) {
-      prevStepIdRef.current = currentStep.id;
-      onStepChange(currentStep.id, currentStep.type);
-    }
-  }, [currentStep, onStepChange]);
-
-  const handleDismissGenerating = useCallback(() => {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[WizardFlowContent] Dismissing - generation continues");
-    }
-    alert.show(
-      AlertType.INFO,
-      AlertMode.TOAST,
-      t("generator.backgroundTitle"),
-      t("generator.backgroundMessage"),
-    );
-    onBack?.();
-  }, [alert, t, onBack]);
-
-  const handleBack = useCallback(() => {
-    if (currentStepIndex === 0) onBack?.();
-    else previousStep();
-  }, [currentStepIndex, previousStep, onBack]);
-
-  const handleNextStep = useCallback(() => {
-    const nextStepDef = flowSteps[currentStepIndex + 1];
-    if (nextStepDef?.type === StepType.GENERATING && onGenerationStart) {
-      onGenerationStart(customData, nextStep);
-      return;
-    }
-    nextStep();
-  }, [currentStepIndex, flowSteps, customData, onGenerationStart, nextStep]);
-
-  const handlePhotoContinue = useCallback(
-    (stepId: string, image: UploadedImage) => {
-      setCustomData(stepId, image);
-      handleNextStep();
-    },
-    [setCustomData, handleNextStep],
-  );
-
-  const handleSubmitRating = useCallback(
-    async (rating: number, description: string) => {
-      if (!currentCreation?.id || !userId) return;
-      const success = await repository.rate(
-        userId,
-        currentCreation.id,
-        rating,
-        description,
-      );
-      if (success) {
-        setHasRated(true);
-        alert.show(
-          AlertType.SUCCESS,
-          AlertMode.TOAST,
-          t("result.rateSuccessTitle"),
-          t("result.rateSuccessMessage"),
-        );
-      }
-      setShowRatingPicker(false);
-    },
-    [currentCreation, userId, repository, alert, t],
-  );
-
-  return (
-    <View
-      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-    >
-      <WizardStepRenderer
-        step={currentStep}
-        scenario={scenario}
-        customData={customData}
-        generationProgress={generationProgress}
-        generationResult={generationResult}
-        isSaving={isSaving}
-        isSharing={isSharing}
-        showRating={Boolean(userId) && !hasRated}
-        onNext={handleNextStep}
-        onBack={handleBack}
-        onPhotoContinue={handlePhotoContinue}
-        onDownload={handleDownload}
-        onShare={handleShare}
-        onRate={() => setShowRatingPicker(true)}
-        onTryAgain={onTryAgain}
-        onDismissGenerating={handleDismissGenerating}
-        t={t}
-        renderPreview={renderPreview}
-        renderGenerating={renderGenerating}
-        renderResult={renderResult}
-      />
-      <StarRatingPicker
-        visible={showRatingPicker}
-        onClose={() => setShowRatingPicker(false)}
-        onRate={handleSubmitRating}
-        title={t("result.rateTitle")}
-        submitLabel={t("common.submit")}
-        cancelLabel={t("common.cancel")}
-        descriptionPlaceholder={t("result.feedbackPlaceholder")}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-});

package/src/domains/generation/wizard/presentation/components/WizardContinueButton.tsx

@@ -0,0 +1,73 @@
+/**
+ * Wizard Continue Button Component
+ * Reusable continue button for wizard screens
+ */
+
+import React from "react";
+import { TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  type IconName,
+} from "@umituz/react-native-design-system";
+
+export interface WizardContinueButtonProps {
+  readonly canContinue: boolean;
+  readonly onPress: () => void;
+  readonly label: string;
+  readonly icon?: IconName;
+}
+
+export function WizardContinueButton({
+  canContinue,
+  onPress,
+  label,
+  icon = "chevron-forward-outline",
+}: WizardContinueButtonProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={!canContinue}
+      activeOpacity={0.7}
+      style={[
+        styles.button,
+        {
+          backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceVariant,
+          opacity: canContinue ? 1 : 0.5,
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.xs,
+          borderRadius: tokens.borders.radius.full,
+        },
+      ]}
+    >
+      <AtomicText
+        type="bodyMedium"
+        style={[
+          styles.text,
+          { color: canContinue ? tokens.colors.onPrimary : tokens.colors.textSecondary },
+        ]}
+      >
+        {label}
+      </AtomicText>
+      <AtomicIcon
+        name={icon}
+        size="sm"
+        color={canContinue ? "onPrimary" : "textSecondary"}
+      />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  text: {
+    fontWeight: "800",
+    marginRight: 4,
+  },
+});