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

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

@@ -1,6 +1,6 @@
 /**
  * ResultStoryCard Component
- * Displays story text with quote styling
+ * Displays story text with quote styling - fully configurable
  */
 
 import * as React from "react";
@@ -11,63 +11,113 @@ import {
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { LinearGradient } from "expo-linear-gradient";
+import type { ResultStoryConfig } from "../../types/result-config.types";
+import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
 export interface ResultStoryCardProps {
   story: string;
+  config?: ResultStoryConfig;
 }
 
-export const ResultStoryCard: React.FC<ResultStoryCardProps> = ({ story }) => {
+export const ResultStoryCard: React.FC<ResultStoryCardProps> = ({
+  story,
+  config = DEFAULT_RESULT_CONFIG.story,
+}) => {
   const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_RESULT_CONFIG.story, ...config };
 
-  const styles = useMemo(() => StyleSheet.create({
-    outer: {
-      paddingHorizontal: 20,
-      marginBottom: 20,
-    },
-    container: {
-      padding: 20,
+  const containerStyle = useMemo(() => {
+    const base = {
+      padding: cfg.spacing?.padding ?? 20,
       borderRadius: 16,
-      borderWidth: 1,
-      borderColor: tokens.colors.primaryContainer,
-    },
-    quoteIcon: {
-      fontSize: 40,
-      lineHeight: 40,
-      color: tokens.colors.primary,
-      opacity: 0.4,
-      marginBottom: -12,
-    },
-    quoteEnd: {
-      alignItems: "flex-end",
-      marginTop: -12,
-    },
-    quoteIconEnd: {
-      marginBottom: 0,
-    },
-    text: {
-      fontSize: 14,
-      color: tokens.colors.textPrimary,
-      textAlign: "center",
-      lineHeight: 22,
-      fontStyle: "italic",
-      fontWeight: "500",
-    },
-  }), [tokens]);
+    };
 
-  return (
-    <View style={styles.outer}>
-      <LinearGradient
-        colors={[tokens.colors.primaryContainer, tokens.colors.surface]}
-        style={styles.container}
-      >
-        <AtomicText style={styles.quoteIcon}>&quot;</AtomicText>
-        <AtomicText style={styles.text}>{story}</AtomicText>
+    if (cfg.borderStyle === "outline") {
+      return {
+        ...base,
+        borderWidth: 1,
+        borderColor: tokens.colors.primaryContainer,
+        backgroundColor: "transparent",
+      };
+    } else if (cfg.borderStyle === "filled") {
+      return {
+        ...base,
+        backgroundColor: tokens.colors.primaryContainer,
+      };
+    }
+
+    return base;
+  }, [cfg.borderStyle, cfg.spacing, tokens]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        outer: {
+          paddingHorizontal: cfg.spacing?.paddingHorizontal ?? 20,
+          marginBottom: cfg.spacing?.marginBottom ?? 20,
+        },
+        container: containerStyle,
+        quoteIcon: {
+          fontSize: 40,
+          lineHeight: 40,
+          color: tokens.colors.primary,
+          opacity: 0.4,
+          marginBottom: -12,
+        },
+        quoteEnd: {
+          alignItems:
+            cfg.textAlignment === "left"
+              ? "flex-start"
+              : cfg.textAlignment === "right"
+                ? "flex-end"
+                : "flex-end",
+          marginTop: -12,
+        },
+        quoteIconEnd: {
+          marginBottom: 0,
+        },
+        text: {
+          fontSize: cfg.fontSize ?? 14,
+          color: tokens.colors.textPrimary,
+          textAlign: cfg.textAlignment ?? "center",
+          lineHeight: (cfg.fontSize ?? 14) * 1.57,
+          fontStyle: cfg.fontStyle ?? "italic",
+          fontWeight: cfg.fontWeight ?? "500",
+        },
+      }),
+    [tokens, cfg, containerStyle],
+  );
+
+  const renderContent = () => (
+    <>
+      {cfg.showQuotes && <AtomicText style={styles.quoteIcon}>&quot;</AtomicText>}
+      <AtomicText style={styles.text}>{story}</AtomicText>
+      {cfg.showQuotes && (
         <View style={styles.quoteEnd}>
           <AtomicText style={[styles.quoteIcon, styles.quoteIconEnd]}>
             &quot;
           </AtomicText>
         </View>
-      </LinearGradient>
+      )}
+    </>
+  );
+
+  if (cfg.borderStyle === "gradient") {
+    return (
+      <View style={styles.outer}>
+        <LinearGradient
+          colors={[tokens.colors.primaryContainer, tokens.colors.surface]}
+          style={styles.container}
+        >
+          {renderContent()}
+        </LinearGradient>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.outer}>
+      <View style={styles.container}>{renderContent()}</View>
     </View>
   );
 };

package/src/presentation/components/result/index.ts

@@ -19,3 +19,17 @@ export type { ResultStoryCardProps } from "./ResultStoryCard";
 
 export { ResultActions } from "./ResultActions";
 export type { ResultActionsProps } from "./ResultActions";
+
+export {
+  DEFAULT_RESULT_CONFIG,
+} from "../../types/result-config.types";
+
+export type {
+  ResultConfig,
+  ResultHeaderConfig,
+  ResultImageConfig,
+  ResultStoryConfig,
+  ResultActionsConfig,
+  ResultLayoutConfig,
+  ResultActionButton,
+} from "../../types/result-config.types";

package/src/presentation/hooks/index.ts

@@ -34,3 +34,9 @@ export type {
   PhotoGenerationState,
   PhotoGenerationStatus,
 } from "./photo-generation.types";
+
+export { useGenerationFlow } from "./useGenerationFlow";
+export type {
+  UseGenerationFlowOptions,
+  UseGenerationFlowReturn,
+} from "./useGenerationFlow";

package/src/presentation/hooks/useGenerationFlow.ts

@@ -0,0 +1,315 @@
+/**
+ * useGenerationFlow Hook
+ * Manages step-by-step generation flow state and navigation
+ *
+ * @package @umituz/react-native-ai-generation-content
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type {
+  GenerationFlowConfig,
+  GenerationFlowState,
+  PhotoStepData,
+  PhotoStepConfig,
+} from "../types/flow-config.types";
+
+export interface UseGenerationFlowOptions {
+  /** Flow configuration */
+  config: GenerationFlowConfig;
+  /** Callback when flow is complete */
+  onComplete?: (state: GenerationFlowState) => void;
+  /** Callback when step changes */
+  onStepChange?: (stepIndex: number, stepConfig: PhotoStepConfig) => void;
+}
+
+export interface UseGenerationFlowReturn {
+  /** Current flow state */
+  state: GenerationFlowState;
+  /** Current step configuration */
+  currentStepConfig: PhotoStepConfig | null;
+  /** Current step data */
+  currentStepData: PhotoStepData | null;
+  /** Whether can go to next step */
+  canGoNext: boolean;
+  /** Whether can go to previous step */
+  canGoBack: boolean;
+  /** Go to next step */
+  goNext: () => void;
+  /** Go to previous step */
+  goBack: () => void;
+  /** Update current step photo */
+  updatePhoto: (imageUri: string, previewUrl?: string) => void;
+  /** Update current step name */
+  updateName: (name: string) => void;
+  /** Update current step validation */
+  updateValidation: (isValid: boolean) => void;
+  /** Update text input */
+  updateTextInput: (text: string) => void;
+  /** Reset flow */
+  reset: () => void;
+  /** Complete flow */
+  complete: () => void;
+}
+
+/**
+ * Hook to manage generation flow state
+ */
+export const useGenerationFlow = ({
+  config,
+  onComplete,
+  onStepChange,
+}: UseGenerationFlowOptions): UseGenerationFlowReturn => {
+  // Initialize state
+  const [state, setState] = useState<GenerationFlowState>(() => ({
+    currentStepIndex: 0,
+    photoSteps: config.photoSteps.map((step) => ({
+      id: step.id,
+      imageUri: null,
+      previewUrl: undefined,
+      name: undefined,
+      isValid: undefined,
+      validationStatus: "pending",
+    })),
+    textInput: config.textInputStep
+      ? {
+          id: config.textInputStep.id,
+          text: "",
+          isValid: false,
+        }
+      : undefined,
+    isComplete: false,
+    isProcessing: false,
+  }));
+
+  // Get current step configuration
+  const currentStepConfig = useMemo(() => {
+    if (state.currentStepIndex >= config.photoSteps.length) {
+      return null;
+    }
+    return config.photoSteps[state.currentStepIndex];
+  }, [state.currentStepIndex, config.photoSteps]);
+
+  // Get current step data
+  const currentStepData = useMemo(() => {
+    if (state.currentStepIndex >= state.photoSteps.length) {
+      return null;
+    }
+    return state.photoSteps[state.currentStepIndex];
+  }, [state.currentStepIndex, state.photoSteps]);
+
+  // Check if current step is valid
+  const isCurrentStepValid = useMemo(() => {
+    if (!currentStepData || !currentStepConfig) {
+      return false;
+    }
+
+    // Check photo
+    if (!currentStepData.imageUri) {
+      return false;
+    }
+
+    // Check name if required
+    if (currentStepConfig.requireNameInput && !currentStepData.name) {
+      return false;
+    }
+
+    // Check validation if enabled
+    if (currentStepConfig.enableValidation && !currentStepData.isValid) {
+      return false;
+    }
+
+    return true;
+  }, [currentStepData, currentStepConfig]);
+
+  // Can go to next step
+  const canGoNext = useMemo(() => {
+    return isCurrentStepValid && !state.isProcessing;
+  }, [isCurrentStepValid, state.isProcessing]);
+
+  // Can go back
+  const canGoBack = useMemo(() => {
+    return (
+      state.currentStepIndex > 0 &&
+      config.behavior?.allowBack !== false &&
+      !state.isProcessing
+    );
+  }, [state.currentStepIndex, config.behavior?.allowBack, state.isProcessing]);
+
+  // Go to next step
+  const goNext = useCallback(() => {
+    if (!canGoNext) return;
+
+    setState((prev) => {
+      const nextIndex = prev.currentStepIndex + 1;
+
+      // If we've completed all photo steps, mark as complete
+      if (nextIndex >= config.photoSteps.length) {
+        const newState = {
+          ...prev,
+          isComplete: true,
+        };
+        onComplete?.(newState);
+        return newState;
+      }
+
+      // Move to next step
+      const newState = {
+        ...prev,
+        currentStepIndex: nextIndex,
+      };
+
+      // Notify step change
+      onStepChange?.(nextIndex, config.photoSteps[nextIndex]);
+
+      return newState;
+    });
+  }, [canGoNext, config.photoSteps, onComplete, onStepChange]);
+
+  // Go to previous step
+  const goBack = useCallback(() => {
+    if (!canGoBack) return;
+
+    setState((prev) => {
+      const prevIndex = prev.currentStepIndex - 1;
+      const newState = {
+        ...prev,
+        currentStepIndex: prevIndex,
+        isComplete: false,
+      };
+
+      // Notify step change
+      onStepChange?.(prevIndex, config.photoSteps[prevIndex]);
+
+      return newState;
+    });
+  }, [canGoBack, config.photoSteps, onStepChange]);
+
+  // Update photo
+  const updatePhoto = useCallback(
+    (imageUri: string, previewUrl?: string) => {
+      setState((prev) => {
+        const newPhotoSteps = [...prev.photoSteps];
+        newPhotoSteps[prev.currentStepIndex] = {
+          ...newPhotoSteps[prev.currentStepIndex],
+          imageUri,
+          previewUrl,
+          validationStatus: "pending",
+        };
+
+        return {
+          ...prev,
+          photoSteps: newPhotoSteps,
+        };
+      });
+    },
+    [],
+  );
+
+  // Update name
+  const updateName = useCallback((name: string) => {
+    setState((prev) => {
+      const newPhotoSteps = [...prev.photoSteps];
+      newPhotoSteps[prev.currentStepIndex] = {
+        ...newPhotoSteps[prev.currentStepIndex],
+        name,
+      };
+
+      return {
+        ...prev,
+        photoSteps: newPhotoSteps,
+      };
+    });
+  }, []);
+
+  // Update validation
+  const updateValidation = useCallback((isValid: boolean) => {
+    setState((prev) => {
+      const newPhotoSteps = [...prev.photoSteps];
+      newPhotoSteps[prev.currentStepIndex] = {
+        ...newPhotoSteps[prev.currentStepIndex],
+        isValid,
+        validationStatus: isValid ? "valid" : "invalid",
+      };
+
+      return {
+        ...prev,
+        photoSteps: newPhotoSteps,
+      };
+    });
+  }, []);
+
+  // Update text input
+  const updateTextInput = useCallback(
+    (text: string) => {
+      setState((prev) => {
+        if (!prev.textInput) return prev;
+
+        const minLength = config.textInputStep?.minLength ?? 0;
+        const maxLength = config.textInputStep?.maxLength ?? Infinity;
+        const isValid = text.length >= minLength && text.length <= maxLength;
+
+        return {
+          ...prev,
+          textInput: {
+            ...prev.textInput,
+            text,
+            isValid,
+          },
+        };
+      });
+    },
+    [config.textInputStep],
+  );
+
+  // Reset flow
+  const reset = useCallback(() => {
+    setState({
+      currentStepIndex: 0,
+      photoSteps: config.photoSteps.map((step) => ({
+        id: step.id,
+        imageUri: null,
+        previewUrl: undefined,
+        name: undefined,
+        isValid: undefined,
+        validationStatus: "pending",
+      })),
+      textInput: config.textInputStep
+        ? {
+            id: config.textInputStep.id,
+            text: "",
+            isValid: false,
+          }
+        : undefined,
+      isComplete: false,
+      isProcessing: false,
+    });
+  }, [config.photoSteps, config.textInputStep]);
+
+  // Complete flow
+  const complete = useCallback(() => {
+    setState((prev) => {
+      const newState = {
+        ...prev,
+        isComplete: true,
+      };
+      onComplete?.(newState);
+      return newState;
+    });
+  }, [onComplete]);
+
+  return {
+    state,
+    currentStepConfig,
+    currentStepData,
+    canGoNext,
+    canGoBack,
+    goNext,
+    goBack,
+    updatePhoto,
+    updateName,
+    updateValidation,
+    updateTextInput,
+    reset,
+    complete,
+  };
+};