@umituz/react-native-ai-generation-content 1.61.39 → 1.61.40

package/src/domains/creations/presentation/utils/filter-buttons.util.ts

@@ -0,0 +1,75 @@
+/**
+ * Filter Buttons Utility
+ * Creates filter buttons for the gallery screen
+ */
+
+export interface FilterButton {
+  readonly id: string;
+  readonly label: string;
+  readonly icon: string;
+  readonly isActive: boolean;
+  readonly onPress: () => void;
+}
+
+export interface FilterButtonsConfig {
+  readonly showStatusFilter: boolean;
+  readonly showMediaFilter: boolean;
+  readonly statusFilterActive: boolean;
+  readonly mediaFilterActive: boolean;
+  readonly statusFilterLabel: string;
+  readonly mediaFilterLabel: string;
+  readonly onStatusFilterPress: () => void;
+  readonly onMediaFilterPress: () => void;
+}
+
+/**
+ * Creates filter buttons array for gallery header
+ */
+export function createFilterButtons(config: FilterButtonsConfig): FilterButton[] {
+  const buttons: FilterButton[] = [];
+
+  if (config.showStatusFilter) {
+    buttons.push({
+      id: "status",
+      label: config.statusFilterLabel,
+      icon: "list-outline",
+      isActive: config.statusFilterActive,
+      onPress: config.onStatusFilterPress,
+    });
+  }
+
+  if (config.showMediaFilter) {
+    buttons.push({
+      id: "media",
+      label: config.mediaFilterLabel,
+      icon: "grid-outline",
+      isActive: config.mediaFilterActive,
+      onPress: config.onMediaFilterPress,
+    });
+  }
+
+  return buttons;
+}
+
+/**
+ * Creates item title for creation card
+ */
+export function createItemTitle(
+  item: { type: string; metadata?: Record<string, unknown> },
+  config: {
+    readonly types?: readonly { id: string; labelKey?: string }[];
+    readonly getCreationTitle?: (params: { type: string; metadata?: Record<string, unknown> }) => string;
+  },
+  t: (key: string) => string
+): string {
+  if (config.getCreationTitle) {
+    return config.getCreationTitle({ type: item.type, metadata: item.metadata });
+  }
+
+  const typeConfig = config.types?.find((tc) => tc.id === item.type);
+  if (typeConfig?.labelKey) {
+    return t(typeConfig.labelKey);
+  }
+
+  return item.type.split("_").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}

package/src/domains/generation/wizard/presentation/screens/GeneratingScreen.tsx

@@ -7,7 +7,7 @@
 
 import React, { useMemo } from "react";
 import { View, StyleSheet, ActivityIndicator, TouchableOpacity } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, ScreenLayout } from "@umituz/react-native-design-system";
 import { useGenerationPhase } from "../hooks/useGenerationPhase";
 import { IndeterminateProgressBar } from "../components/IndeterminateProgressBar";
 
@@ -25,7 +25,6 @@ export interface GeneratingScreenProps {
     };
   };
   readonly t: (key: string) => string;
-  /** Called when user dismisses the screen - generation continues in background */
   readonly onDismiss?: () => void;
 }
 
@@ -38,13 +37,6 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
   const tokens = useAppDesignTokens();
   const phase = useGenerationPhase();
 
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.log("[GeneratingScreen] Rendering", {
-      phase,
-      scenarioId: scenario?.id,
-    });
-  }
-
   const messages = useMemo(() => {
     const custom = scenario?.generatingMessages;
     return {
@@ -69,48 +61,49 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
   }, [phase, t, messages.waitMessage]);
 
   return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <View style={styles.content}>
-        <ActivityIndicator size="large" color={tokens.colors.primary} />
+    <ScreenLayout backgroundColor={tokens.colors.backgroundPrimary}>
+      <View style={styles.container}>
+        <View style={styles.content}>
+          <ActivityIndicator size="large" color={tokens.colors.primary} />
 
-        <AtomicText type="headlineMedium" style={styles.title}>
-          {messages.title}
-        </AtomicText>
+          <AtomicText type="headlineMedium" style={styles.title}>
+            {messages.title}
+          </AtomicText>
 
-        <AtomicText type="bodyMedium" style={[styles.message, { color: tokens.colors.textSecondary }]}>
-          {statusMessage}
-        </AtomicText>
+          <AtomicText type="bodyMedium" style={[styles.message, { color: tokens.colors.textSecondary }]}>
+            {statusMessage}
+          </AtomicText>
 
-        <View style={styles.progressContainer}>
-          <IndeterminateProgressBar
-            backgroundColor={tokens.colors.surfaceVariant}
-            fillColor={tokens.colors.primary}
-          />
-        </View>
+          <View style={styles.progressContainer}>
+            <IndeterminateProgressBar
+              backgroundColor={tokens.colors.surfaceVariant}
+              fillColor={tokens.colors.primary}
+            />
+          </View>
+
+          {scenario && (
+            <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
+              {scenario.title || scenario.id}
+            </AtomicText>
+          )}
 
-        {scenario && (
           <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
-            {scenario.title || scenario.id}
+            {messages.hint}
           </AtomicText>
-        )}
-
-        <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
-          {messages.hint}
-        </AtomicText>
 
-        {/* Background hint - tap to dismiss */}
-        {onDismiss && (
-          <TouchableOpacity
-            style={[styles.backgroundHintButton, { borderColor: tokens.colors.primary }]}
-            onPress={onDismiss}
-          >
-            <AtomicText type="bodyLarge" style={[styles.backgroundHint, { color: tokens.colors.primary }]}>
-              {messages.backgroundHint}
-            </AtomicText>
-          </TouchableOpacity>
-        )}
+          {onDismiss && (
+            <TouchableOpacity
+              style={[styles.backgroundHintButton, { borderColor: tokens.colors.primary }]}
+              onPress={onDismiss}
+            >
+              <AtomicText type="bodyLarge" style={[styles.backgroundHint, { color: tokens.colors.primary }]}>
+                {messages.backgroundHint}
+              </AtomicText>
+            </TouchableOpacity>
+          )}
+        </View>
       </View>
-    </View>
+    </ScreenLayout>
   );
 };
 

package/src/domains/generation/wizard/presentation/screens/TextInputScreen.tsx

@@ -5,16 +5,16 @@
  */
 
 import React, { useState, useCallback, useMemo } from "react";
-import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TextInput, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicButton,
-  AtomicIcon,
   useAppDesignTokens,
   ScreenLayout,
   NavigationHeader,
   type DesignTokens,
 } from "@umituz/react-native-design-system";
+import { ContinueButton } from "#presentation/components/buttons";
 import type { TextInputScreenProps } from "./TextInputScreen.types";
 
 export type {
@@ -57,33 +57,11 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
         title=""
         onBackPress={onBack}
         rightElement={
-          <TouchableOpacity
+          <ContinueButton
+            label={translations.continueButton}
+            canContinue={canContinue}
             onPress={handleContinue}
-            activeOpacity={0.7}
-            disabled={!canContinue}
-            style={[
-              styles.continueButton,
-              {
-                backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceVariant,
-                opacity: canContinue ? 1 : 0.5,
-              },
-            ]}
-          >
-            <AtomicText
-              type="bodyMedium"
-              style={[
-                styles.continueText,
-                { color: canContinue ? tokens.colors.onPrimary : tokens.colors.textSecondary },
-              ]}
-            >
-              {translations.continueButton}
-            </AtomicText>
-            <AtomicIcon
-              name="arrow-forward"
-              size="sm"
-              color={canContinue ? "onPrimary" : "textSecondary"}
-            />
-          </TouchableOpacity>
+          />
         }
       />
       <ScreenLayout
@@ -179,15 +157,4 @@ const createStyles = (tokens: DesignTokens) =>
     exampleButton: {
       marginBottom: tokens.spacing.xs,
     },
-    continueButton: {
-      flexDirection: "row",
-      alignItems: "center",
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.xs,
-      borderRadius: tokens.borders.radius.full,
-    },
-    continueText: {
-      fontWeight: "800",
-      marginRight: 4,
-    },
   });

package/src/domains/scenarios/presentation/screens/ScenarioPreviewScreen.tsx

@@ -4,16 +4,17 @@
  */
 
 import React, { useMemo } from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
+  AtomicIcon,
   useAppDesignTokens,
   ScreenLayout,
   type DesignTokens,
   HeroSection,
-  AtomicIcon,
   NavigationHeader,
 } from "@umituz/react-native-design-system";
+import { ContinueButton } from "#presentation/components/buttons";
 import type { ScenarioData } from "../../domain/scenario.types";
 
 export interface ScenarioPreviewTranslations {
@@ -45,30 +46,11 @@ export const ScenarioPreviewScreen: React.FC<ScenarioPreviewScreenProps> = ({
         title=""
         onBackPress={onBack}
         rightElement={
-          <TouchableOpacity
+          <ContinueButton
+            label={translations.continueButton}
+            canContinue={true}
             onPress={onContinue}
-            activeOpacity={0.7}
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              backgroundColor: tokens.colors.primary,
-              paddingHorizontal: tokens.spacing.md,
-              paddingVertical: tokens.spacing.xs,
-              borderRadius: tokens.borders.radius.full,
-            }}
-          >
-            <AtomicText
-              type="bodyMedium"
-              style={{
-                fontWeight: "800",
-                color: tokens.colors.onPrimary,
-                marginRight: 4,
-              }}
-            >
-              {translations.continueButton}
-            </AtomicText>
-            <AtomicIcon name="arrow-forward" size="sm" color="onPrimary" />
-          </TouchableOpacity>
+          />
         }
       />
       <ScreenLayout

package/src/features/image-to-video/presentation/screens/ImageToVideoWizardFlow.tsx

@@ -3,26 +3,19 @@
  * Step-based wizard flow for image-to-video generation
  */
 
-import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { GenericWizardFlow } from "../../../../domains/generation/wizard/presentation/components";
 import { IMAGE_TO_VIDEO_WIZARD_CONFIG } from "../../../../domains/generation/wizard/configs";
 import { useAIFeatureGate } from "../../../../domains/access-control";
-import type { WizardScenarioData } from "../../../../domains/generation/wizard/presentation/hooks/useWizardGeneration";
+import {
+  createDefaultAlerts,
+  createScenarioData,
+  useWizardFlowHandlers,
+  AutoSkipPreview,
+} from "../../../shared";
 import type { BaseWizardFlowProps } from "../../../../domains/generation/wizard/presentation/components/WizardFlow.types";
-import type { AlertMessages } from "../../../../presentation/hooks/generation/types";
-
-const AutoSkipPreview: React.FC<{ onContinue: () => void }> = ({ onContinue }) => {
-  const hasContinued = useRef(false);
-  useEffect(() => {
-    if (!hasContinued.current) {
-      hasContinued.current = true;
-      onContinue();
-    }
-  }, [onContinue]);
-  return null;
-};
 
 export type ImageToVideoWizardFlowProps = BaseWizardFlowProps;
 
@@ -41,46 +34,33 @@ export const ImageToVideoWizardFlow: React.FC<ImageToVideoWizardFlowProps> = (pr
 
   const tokens = useAppDesignTokens();
 
-  // Centralized access control - handles offline, auth, credits, paywall
   const { requireFeature } = useAIFeatureGate({
     creditCost,
     onNetworkError,
   });
 
-  const scenario: WizardScenarioData = useMemo(
-    () => ({
-      id: "image-to-video",
-      outputType: "video",
-      inputType: "single",
-      model,
-      title: t("image2video.title"),
-    }),
-    [model, t],
-  );
-
-  const defaultAlerts = useMemo<AlertMessages>(
-    () => ({
-      networkError: t("common.errors.network"),
-      policyViolation: t("common.errors.policy"),
-      saveFailed: t("common.errors.saveFailed"),
-      creditFailed: t("common.errors.creditFailed"),
-      unknown: t("common.errors.unknown"),
-    }),
-    [t],
+  const scenario = useMemo(
+    () =>
+      createScenarioData(
+        {
+          id: "image-to-video",
+          outputType: "video",
+          inputType: "single",
+          model,
+          titleKey: "image2video.title",
+        },
+        t
+      ),
+    [model, t]
   );
 
-  const handleGenerationStart = useCallback(
-    (_data: Record<string, unknown>, proceed: () => void) => {
-      // Use centralized access control - checks offline, auth, credits
-      requireFeature(proceed);
-    },
-    [requireFeature],
-  );
+  const defaultAlerts = useMemo(() => createDefaultAlerts(t), [t]);
 
-  const handleGenerationComplete = useCallback(() => {
-    onGenerationComplete?.();
-    onBack();
-  }, [onGenerationComplete, onBack]);
+  const { handleGenerationStart, handleGenerationComplete } = useWizardFlowHandlers({
+    requireFeature,
+    onGenerationComplete,
+    onBack,
+  });
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>

package/src/features/shared/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared Features
+ */
+
+export * from "./presentation/utils";
+export * from "./presentation/components";

package/src/features/shared/presentation/components/AutoSkipPreview.tsx

@@ -0,0 +1,24 @@
+/**
+ * AutoSkipPreview Component
+ * Automatically continues to the next step on mount
+ * Used in wizard flows to skip the preview step
+ */
+
+import { useEffect, useRef } from "react";
+
+export interface AutoSkipPreviewProps {
+  readonly onContinue: () => void;
+}
+
+export const AutoSkipPreview: React.FC<AutoSkipPreviewProps> = ({ onContinue }) => {
+  const hasContinued = useRef(false);
+
+  useEffect(() => {
+    if (!hasContinued.current) {
+      hasContinued.current = true;
+      onContinue();
+    }
+  }, [onContinue]);
+
+  return null;
+};

package/src/features/shared/presentation/components/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared Presentation Components
+ */
+
+export { AutoSkipPreview } from "./AutoSkipPreview";
+export type { AutoSkipPreviewProps } from "./AutoSkipPreview";

package/src/features/shared/presentation/utils/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Wizard Flow Utilities
+ */
+
+export {
+  createDefaultAlerts,
+  createScenarioData,
+  useWizardFlowHandlers,
+  type WizardFlowConfig,
+  type UseWizardFlowHandlersOptions,
+} from "./wizard-flow.utils";
+
+export { AutoSkipPreview } from "../components/AutoSkipPreview";
+export type { AutoSkipPreviewProps } from "../components/AutoSkipPreview";

package/src/features/shared/presentation/utils/wizard-flow.utils.ts

@@ -0,0 +1,84 @@
+/**
+ * Wizard Flow Utilities
+ * Common utilities for wizard flow screens
+ */
+
+import { useCallback } from "react";
+import type { WizardScenarioData } from "../../../../domains/generation/wizard/presentation/hooks/useWizardGeneration";
+import type { AlertMessages } from "../../../../presentation/hooks/generation/types";
+
+/**
+ * Creates default alert messages for wizard flows
+ */
+export function createDefaultAlerts(t: (key: string) => string): AlertMessages {
+  return {
+    networkError: t("common.errors.network"),
+    policyViolation: t("common.errors.policy"),
+    saveFailed: t("common.errors.saveFailed"),
+    creditFailed: t("common.errors.creditFailed"),
+    unknown: t("common.errors.unknown"),
+  };
+}
+
+/**
+ * Configuration for wizard flow utilities
+ */
+export interface WizardFlowConfig {
+  readonly id: string;
+  readonly outputType: "image" | "video";
+  readonly inputType: "text" | "single" | "dual";
+  readonly model: string;
+  readonly titleKey: string;
+}
+
+/**
+ * Creates wizard scenario data from config
+ */
+export function createScenarioData(
+  config: WizardFlowConfig,
+  t: (key: string) => string
+): WizardScenarioData {
+  return {
+    id: config.id,
+    outputType: config.outputType,
+    inputType: config.inputType,
+    model: config.model,
+    title: t(config.titleKey),
+  };
+}
+
+/**
+ * Hook for wizard flow handlers
+ */
+export interface UseWizardFlowHandlersOptions {
+  readonly requireFeature: (proceed: () => void) => void;
+  readonly onGenerationComplete?: () => void;
+  readonly onBack: () => void;
+}
+
+export function useWizardFlowHandlers({
+  requireFeature,
+  onGenerationComplete,
+  onBack,
+}: UseWizardFlowHandlersOptions) {
+  const handleGenerationStart = useCallback(
+    (_data: Record<string, unknown>, proceed: () => void) => {
+      requireFeature(proceed);
+    },
+    [requireFeature]
+  );
+
+  const handleGenerationComplete = useCallback(() => {
+    onGenerationComplete?.();
+    onBack();
+  }, [onGenerationComplete, onBack]);
+
+  return {
+    handleGenerationStart,
+    handleGenerationComplete,
+  };
+}
+
+/**
+ * Wizard flow type definitions
+ */

package/src/features/text-to-image/presentation/screens/TextToImageWizardFlow.tsx

@@ -3,26 +3,19 @@
  * Step-based wizard flow for text-to-image generation
  */
 
-import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { GenericWizardFlow } from "../../../../domains/generation/wizard/presentation/components";
 import { TEXT_TO_IMAGE_WIZARD_CONFIG } from "../../../../domains/generation/wizard/configs";
 import { useAIFeatureGate } from "../../../../domains/access-control";
-import type { WizardScenarioData } from "../../../../domains/generation/wizard/presentation/hooks/useWizardGeneration";
+import {
+  createDefaultAlerts,
+  createScenarioData,
+  useWizardFlowHandlers,
+  AutoSkipPreview,
+} from "../../../shared";
 import type { BaseWizardFlowProps } from "../../../../domains/generation/wizard/presentation/components/WizardFlow.types";
-import type { AlertMessages } from "../../../../presentation/hooks/generation/types";
-
-const AutoSkipPreview: React.FC<{ onContinue: () => void }> = ({ onContinue }) => {
-  const hasContinued = useRef(false);
-  useEffect(() => {
-    if (!hasContinued.current) {
-      hasContinued.current = true;
-      onContinue();
-    }
-  }, [onContinue]);
-  return null;
-};
 
 export type TextToImageWizardFlowProps = BaseWizardFlowProps;
 
@@ -41,46 +34,33 @@ export const TextToImageWizardFlow: React.FC<TextToImageWizardFlowProps> = (prop
 
   const tokens = useAppDesignTokens();
 
-  // Centralized access control - handles offline, auth, credits, paywall
   const { requireFeature } = useAIFeatureGate({
     creditCost,
     onNetworkError,
   });
 
-  const scenario: WizardScenarioData = useMemo(
-    () => ({
-      id: "text-to-image",
-      outputType: "image",
-      inputType: "text",
-      model,
-      title: t("text2image.title"),
-    }),
-    [model, t],
-  );
-
-  const defaultAlerts = useMemo<AlertMessages>(
-    () => ({
-      networkError: t("common.errors.network"),
-      policyViolation: t("common.errors.policy"),
-      saveFailed: t("common.errors.saveFailed"),
-      creditFailed: t("common.errors.creditFailed"),
-      unknown: t("common.errors.unknown"),
-    }),
-    [t],
+  const scenario = useMemo(
+    () =>
+      createScenarioData(
+        {
+          id: "text-to-image",
+          outputType: "image",
+          inputType: "text",
+          model,
+          titleKey: "text2image.title",
+        },
+        t
+      ),
+    [model, t]
   );
 
-  const handleGenerationStart = useCallback(
-    (_data: Record<string, unknown>, proceed: () => void) => {
-      // Use centralized access control - checks offline, auth, credits
-      requireFeature(proceed);
-    },
-    [requireFeature],
-  );
+  const defaultAlerts = useMemo(() => createDefaultAlerts(t), [t]);
 
-  const handleGenerationComplete = useCallback(() => {
-    onGenerationComplete?.();
-    onBack();
-  }, [onGenerationComplete, onBack]);
+  const { handleGenerationStart, handleGenerationComplete } = useWizardFlowHandlers({
+    requireFeature,
+    onGenerationComplete,
+    onBack,
+  });
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>