@umituz/react-native-ai-generation-content 1.26.1 → 1.26.4

package/src/features/script-generator/infrastructure/services/ScriptGenerationService.ts

@@ -1,62 +0,0 @@
-import {
-  ScriptSection,
-  ScriptGenerationRequest,
-} from "../../domain/types/script.types";
-import { DEFAULT_VIDEO_TYPES } from "../../domain/constants";
-
-/**
- * ScriptGenerationService
- * Handles building prompts and (eventually) calling AI providers for script generation.
- */
-export class ScriptGenerationService {
-  /**
-   * Build prompt for script generation
-   */
-  buildScriptPrompt(request: ScriptGenerationRequest): string {
-    const typeInfo = DEFAULT_VIDEO_TYPES.find((t) => t.id === request.videoType);
-
-    return `Generate a video script for a ${request.duration}-second ${typeInfo?.name || "video"} about: ${request.topic}
-
-${request.targetAudience ? `Target Audience: ${request.targetAudience}` : ""}
-${request.keyPoints ? `Key Points to Cover: ${request.keyPoints}` : ""}
-
-Please create a detailed script with the following structure:
-1. Hook (3-5 seconds): Attention-grabbing opening
-2. Introduction (5-10 seconds): Brief intro to the topic
-3. Main Content (${request.duration - 15} seconds): Core message and value
-4. Call-to-Action (5 seconds): Clear next step for viewers
-
-For each section, provide:
-- Section title
-- Voiceover text
-- Duration in seconds
-- Visual/scene suggestions
-
-Format as JSON with this structure:
-{
-  "sections": [
-    {
-      "type": "hook|intro|main|cta",
-      "title": "Section title",
-      "content": "Voiceover text",
-      "duration": 5,
-      "notes": "Visual suggestions"
-    }
-  ],
-  "totalDuration": ${request.duration}
-}`;
-  }
-
-  /**
-   * Generate script from request
-   */
-  async generateScript(
-    _request: ScriptGenerationRequest,
-  ): Promise<readonly ScriptSection[] | null> {
-    // NOTE: This will be implemented by the app using a specific AI provider
-    // The package provides the structure and prompt building.
-    return null;
-  }
-}
-
-export const scriptGenerationService = new ScriptGenerationService();

package/src/features/script-generator/presentation/components/ScriptDisplay.tsx

@@ -1,158 +0,0 @@
-/**
- * ScriptDisplay Component
- * Generic display for AI-generated scripts with sections, durations and types.
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { ScriptSection } from "../../domain/types/script.types";
-
-export interface ScriptDisplayProps {
-  readonly script: readonly ScriptSection[];
-  readonly onUseScript: () => void;
-  readonly title?: string;
-  readonly useButtonText?: string;
-}
-
-export const ScriptDisplay: React.FC<ScriptDisplayProps> = ({
-  script,
-  onUseScript,
-  title = "Generated Script",
-  useButtonText = "Use This Script",
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <AtomicText
-          type="bodyLarge"
-          style={[styles.headerTitle, { color: tokens.colors.textPrimary }]}
-        >
-          📝 {title}
-        </AtomicText>
-        <TouchableOpacity onPress={onUseScript}>
-          <AtomicIcon name="checkmark-outline" size="md" color="primary" />
-        </TouchableOpacity>
-      </View>
-
-      {script.map((section) => (
-        <View
-          key={section.id}
-          style={[
-            styles.section,
-            { backgroundColor: tokens.colors.surface },
-          ]}
-        >
-          <View style={styles.sectionHeader}>
-            <AtomicText
-              type="bodyMedium"
-              style={{ color: tokens.colors.primary, fontWeight: "600" }}
-            >
-              {section.title} ({section.duration}s)
-            </AtomicText>
-            <View
-              style={[
-                styles.badge,
-                { backgroundColor: tokens.colors.surfaceVariant },
-              ]}
-            >
-              <AtomicText
-                type="labelSmall"
-                style={{ color: tokens.colors.primary }}
-              >
-                {section.type.toUpperCase()}
-              </AtomicText>
-            </View>
-          </View>
-          <AtomicText
-            type="bodySmall"
-            style={{
-              color: tokens.colors.textPrimary,
-              marginTop: 8,
-              lineHeight: 22,
-            }}
-          >
-            {section.content}
-          </AtomicText>
-          {section.notes && ( section.notes.length > 0) && (
-            <AtomicText
-              type="labelSmall"
-              style={{
-                color: tokens.colors.textSecondary,
-                marginTop: 8,
-                fontStyle: "italic",
-              }}
-            >
-              💡 {section.notes}
-            </AtomicText>
-          )}
-        </View>
-      ))}
-
-      <TouchableOpacity
-        style={[
-          styles.useButton,
-          { backgroundColor: tokens.colors.primary },
-        ]}
-        onPress={onUseScript}
-      >
-        <AtomicIcon name="checkmark-outline" size="md" color="textInverse" />
-        <AtomicText
-          type="bodyLarge"
-          style={[styles.useButtonText, { color: tokens.colors.textInverse }]}
-        >
-          {useButtonText}
-        </AtomicText>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    width: "100%",
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 16,
-  },
-  headerTitle: {
-    fontWeight: "700",
-  },
-  section: {
-    padding: 16,
-    borderRadius: 12,
-    marginBottom: 12,
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  badge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 6,
-  },
-  useButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 18,
-    borderRadius: 16,
-    marginTop: 16,
-  },
-  useButtonText: {
-    fontWeight: "700",
-    marginLeft: 12,
-  },
-});

package/src/features/script-generator/presentation/components/VideoTypeSelector.tsx

@@ -1,102 +0,0 @@
-/**
- * VideoTypeSelector Component
- * Horizontal scroll selector for different video types with emojis.
- */
-
-import React from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { VideoTypeOption } from "../../domain/types/script.types";
-
-export interface VideoTypeSelectorProps {
-  readonly selectedType: string;
-  readonly onSelectType: (typeId: string) => void;
-  readonly types: readonly VideoTypeOption[];
-  readonly title?: string;
-}
-
-export const VideoTypeSelector: React.FC<VideoTypeSelectorProps> = ({
-  selectedType,
-  onSelectType,
-  types,
-  title = "Video Type",
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.section}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.title, { color: tokens.colors.textPrimary }]}
-      >
-        {title}
-      </AtomicText>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.scrollContent}
-      >
-        {types.map((type) => (
-          <TouchableOpacity
-            key={type.id}
-            style={[
-              styles.card,
-              {
-                backgroundColor:
-                  selectedType === type.id
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                borderColor:
-                  selectedType === type.id
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-              },
-            ]}
-            onPress={() => onSelectType(type.id)}
-          >
-            <AtomicText type="headlineLarge">{type.emoji}</AtomicText>
-            <AtomicText
-              type="bodySmall"
-              style={{
-                color:
-                  selectedType === type.id
-                    ? tokens.colors.onPrimary
-                    : tokens.colors.textPrimary,
-                fontWeight: selectedType === type.id ? "600" : "400",
-                marginTop: 8,
-                textAlign: "center",
-              }}
-            >
-              {type.name}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  section: {
-    padding: 16,
-    width: "100%",
-  },
-  title: {
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  scrollContent: {
-    paddingRight: 16,
-  },
-  card: {
-    width: 100,
-    padding: 16,
-    borderRadius: 16,
-    borderWidth: 2,
-    marginRight: 12,
-    alignItems: "center",
-  },
-});

package/src/features/script-generator/presentation/components/index.ts

@@ -1,2 +0,0 @@
-export { ScriptDisplay } from "./ScriptDisplay";
-export { VideoTypeSelector, type VideoTypeSelectorProps } from "./VideoTypeSelector";

package/src/features/script-generator/presentation/hooks/index.ts

@@ -1 +0,0 @@
-export * from "./useScriptGenerator";

package/src/features/script-generator/presentation/hooks/useScriptGenerator.ts

@@ -1,77 +0,0 @@
-import { useState, useCallback } from "react";
-import {
-  ScriptSection,
-  ScriptGenerationRequest,
-} from "../../domain/types/script.types";
-
-export interface UseScriptGeneratorProps {
-  readonly onGenerate: (request: ScriptGenerationRequest) => Promise<readonly ScriptSection[] | null>;
-  readonly onUseScript?: (script: readonly ScriptSection[]) => void;
-  readonly onAuthRequired?: () => void;
-}
-
-export interface UseScriptGeneratorReturn {
-  readonly isGenerating: boolean;
-  readonly generatedScript: readonly ScriptSection[] | null;
-  readonly generateScript: (request: ScriptGenerationRequest) => Promise<void>;
-  readonly handleUseScript: () => void;
-  readonly resetState: () => void;
-}
-
-export function useScriptGenerator({
-  onGenerate,
-  onUseScript,
-  onAuthRequired,
-}: UseScriptGeneratorProps): UseScriptGeneratorReturn {
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [generatedScript, setGeneratedScript] = useState<readonly ScriptSection[] | null>(null);
-
-  const generateScript = useCallback(
-    async (request: ScriptGenerationRequest) => {
-      if (!request.topic.trim()) {
-        return;
-      }
-
-      if (onAuthRequired) {
-        onAuthRequired();
-      }
-
-      setIsGenerating(true);
-
-      try {
-        const script = await onGenerate(request);
-
-        if (script) {
-          setGeneratedScript(script);
-        }
-      } catch (error) {
-        if (__DEV__) {
-           
-          console.error("Script generation error:", error);
-        }
-      } finally {
-        setIsGenerating(false);
-      }
-    },
-    [onGenerate, onAuthRequired],
-  );
-
-  const handleUseScript = useCallback(() => {
-    if (generatedScript && onUseScript) {
-      onUseScript(generatedScript);
-    }
-  }, [generatedScript, onUseScript]);
-
-  const resetState = useCallback(() => {
-    setGeneratedScript(null);
-    setIsGenerating(false);
-  }, []);
-
-  return {
-    isGenerating,
-    generatedScript,
-    generateScript,
-    handleUseScript,
-    resetState,
-  };
-}

package/src/features/shared/README.md

@@ -1,311 +0,0 @@
-# Shared Features
-
-Common functionality and utilities shared across multiple AI features.
-
-## 📍 Import Path
-
-```typescript
-import {
-  useDualImageVideoProcessing,
-  DualImagePicker,
-  DualVideoPicker
-} from '@umituz/react-native-ai-generation-content';
-```
-
-**Location**: `src/features/shared/`
-
-## 🎯 Shared Purpose
-
-Provide reusable components, hooks, and utilities for common AI feature patterns. Focus on dual image/video processing for features requiring two inputs, with shared state management, validation, and error handling.
-
----
-
-## 📋 Usage Strategy
-
-### When to Use Shared Features
-
-✅ **Use Cases:**
-- Features requiring two images/videos
-- Common state management patterns
-- Shared validation logic
-- Reusable UI components
-- Dual input processing
-
-❌ **When NOT to Use:**
-- Single input features (use feature-specific hooks)
-- Complex custom logic (build custom solution)
-- Feature-specific requirements
-
-### Implementation Strategy
-
-1. **Identify common patterns** across features
-2. **Use shared hooks** for dual processing
-3. **Implement validation** consistently
-4. **Handle errors** uniformly
-5. **Track progress** with shared UI
-6. **Reset states** properly
-7. **Customize** when needed
-
----
-
-## ⚠️ Critical Rules (MUST FOLLOW)
-
-### 1. Dual Processing
-- **MUST** validate both inputs before processing
-- **MUST** handle missing inputs gracefully
-- **MUST** provide clear input labels
-- **MUST** implement input selection
-- **MUST** check `isReady` before processing
-
-### 2. State Management
-- **MUST** track both inputs independently
-- **MUST** handle processing state
-- **MUST** track progress percentage
-- **MUST** display errors clearly
-- **MUST** reset state properly
-
-### 3. Validation
-- **MUST** validate input types
-- **MUST** check file sizes
-- **MUST** verify input quality
-- **MUST** provide validation feedback
-- **MUST** prevent invalid operations
-
-### 4. User Experience
-- **MUST** provide clear UI labels
-- **MUST** show progress indicators
-- **MUST** handle long operations
-- **MUST** allow cancellation
-- **MUST** confirm before processing
-
-### 5. Error Handling
-- **MUST** handle processing errors
-- **MUST** provide user-friendly messages
-- **MUST** offer retry options
-- **MUST** log errors appropriately
-- **MUST** recover gracefully
-
----
-
-## 🚫 Prohibitions (MUST AVOID)
-
-### Strictly Forbidden
-
-❌ **NEVER** do the following:
-
-1. **No Missing Validation**
-   - Always validate both inputs
-   - Never process without checking
-   - Provide clear validation messages
-
-2. **No Confusing UI**
-   - Always label inputs clearly
-   - Never mix up source/target
-   - Show which input is which
-
-3. **No Silent Failures**
-   - Always explain what went wrong
-   - Never fail silently
-   - Provide actionable guidance
-
-4. **No Blocking Operations**
-   - Never block main thread
-   - Always show progress
-   - Allow cancellation
-
-5. **No State Leaks**
-   - Always cleanup properly
-   - Reset state when done
-   - Clear temporary data
-
-6. **No Missing Context**
-   - Always explain what's happening
-   - Show current operation
-   - Provide progress feedback
-
-7. **No Partial Processing**
-   - Always complete or fail cleanly
-   - Never leave partial state
-   - Handle cancellation properly
-
----
-
-## 🤖 AI Agent Directions
-
-### For AI Code Generation Tools
-
-#### Prompt Template for AI Agents
-
-```
-You are implementing dual image/video processing using @umituz/react-native-ai-generation-content.
-
-REQUIREMENTS:
-1. Import shared processing hooks
-2. Implement dual input selection
-3. Validate both inputs
-4. Handle processing state
-5. Show progress indicators
-6. Handle errors gracefully
-7. Implement confirmation dialog
-8. Reset state properly
-
-CRITICAL RULES:
-- MUST validate both inputs before processing
-- MUST provide clear UI labels
-- MUST handle missing inputs
-- MUST show progress during processing
-- MUST implement error handling
-- MUST allow user cancellation
-
-SHARED HOOKS:
-- useDualImageVideoProcessing: Main dual processing hook
-- DualImagePicker: Image selection component
-- DualVideoPicker: Video selection component
-
-CONFIGURATION:
-- featureType: 'face-swap' | 'ai-hug' | 'ai-kiss' | etc.
-- inputType: 'image' | 'video'
-- defaultOptions: Feature-specific options
-- onProcessingStart: Callback when processing starts
-- onProcessingComplete: Callback when processing completes
-- onError: Error callback
-
-STATE MANAGEMENT:
-- sourceImageOrVideo: First input
-- targetImageOrVideo: Second input
-- isProcessing: Processing state
-- progress: Progress percentage (0-100)
-- error: Error message if failed
-- result: Processing result
-- isReady: Both inputs provided and valid
-
-VALIDATION:
-- Check both inputs provided
-- Verify input types match
-- Validate file sizes
-- Check input quality
-- Provide clear feedback
-
-STRICTLY FORBIDDEN:
-- No missing validation
-- No confusing UI
-- No silent failures
-- No blocking operations
-- No state leaks
-- No missing context
-- No partial processing
-
-QUALITY CHECKLIST:
-- [ ] Both inputs validated
-- [ ] Clear UI labels
-- [ ] Progress tracking
-- [ ] Error handling
-- [ ] Confirmation dialog
-- [ ] State reset
-- [ ] Cancellation support
-- [ ] User feedback
-- [ ] Clean state management
-- [ ] Proper cleanup
-```
-
----
-
-## 🛠️ Configuration Strategy
-
-### Dual Processing Types
-
-```typescript
-type DualInputType = 'image' | 'video';
-
-interface DualImageVideoProcessingStartData {
-  sourceImageOrVideo: string; // Base64
-  targetImageOrVideo: string; // Base64
-  options?: Record<string, any>;
-}
-
-interface DualImageVideoResult {
-  success: boolean;
-  result?: {
-    imageUrl?: string;
-    videoUrl?: string;
-    thumbnailUrl?: string;
-    metadata?: Record<string, any>;
-  };
-  error?: string;
-}
-```
-
-### Feature Config
-
-```typescript
-interface DualImageVideoFeatureConfig {
-  featureType: string;
-  inputType: DualInputType;
-  defaultOptions?: Record<string, any>;
-  onProcessingStart?: () => void;
-  onProcessingComplete?: (result: DualImageVideoResult) => void;
-  onError?: (error: string) => void;
-}
-```
-
----
-
-## 📊 Features Using Shared
-
-### Dual Image Features
-- **Face Swap**: Swap faces between images
-- **AI Hug**: Generate hug images
-- **AI Kiss**: Generate kiss images
-- **Couple Future**: Future predictions
-
-### Shared Components
-- `DualImagePicker` - Image selection UI
-- `DualVideoPicker` - Video selection UI
-- `DualImageVideoState` - State management
-
----
-
-## 🎨 Best Practices
-
-### Input Labeling
-- "First Image/Video" vs "Second Image/Video"
-- "Source" vs "Target" for swap features
-- "Person 1" vs "Person 2" for couple features
-- Always show which is which
-
-### Validation
-- Check both inputs present
-- Validate file types
-- Check file sizes
-- Verify quality
-- Provide clear feedback
-
-### User Experience
-- Show input previews
-- Display progress clearly
-- Confirm before processing
-- Allow cancellation
-- Explain errors clearly
-
----
-
-## 🐛 Common Pitfalls
-
-❌ **Mixed up inputs**: Clear labels, visual indicators
-❌ **Missing validation**: Always check both inputs
-❌ **No feedback**: Show progress, errors clearly
-❌ **State issues**: Proper cleanup and reset
-
----
-
-## 📚 Related Features
-
-- [Face Swap](../face-swap) - Uses dual image processing
-- [AI Hug](../ai-hug) - Uses dual image processing
-- [AI Kiss](../ai-kiss) - Uses dual image processing
-- [Couple Future](../couple-future) - Uses dual image processing
-
----
-
-**Last Updated**: 2025-01-08
-**Version**: 2.0.0 (Strategy-based Documentation)