@umituz/react-native-ai-generation-content 1.17.40 → 1.17.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.40",
+  "version": "1.17.42",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/features/script-generator/domain/constants/index.ts

@@ -0,0 +1,10 @@
+import { VideoTypeOption } from "../presentation/components/VideoTypeSelector";
+
+export const DEFAULT_VIDEO_TYPES: readonly VideoTypeOption[] = [
+  { id: "product", name: "Product Demo", emoji: "📦" },
+  { id: "tutorial", name: "Tutorial", emoji: "🎓" },
+  { id: "promo", name: "Promo/Ad", emoji: "📣" },
+  { id: "story", name: "Storytelling", emoji: "📖" },
+  { id: "explainer", name: "Explainer", emoji: "💡" },
+  { id: "vlog", name: "Vlog", emoji: "🎥" },
+];

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

@@ -1,2 +1,5 @@
 export * from "./domain/types/script.types";
+export * from "./domain/constants";
 export * from "./presentation/components";
+export * from "./presentation/hooks";
+export * from "./infrastructure/services/ScriptGenerationService";

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

@@ -0,0 +1,62 @@
+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 (like OpenAI or FAL)
+    // The package provides the structure and prompt building.
+    return null;
+  }
+}
+
+export const scriptGenerationService = new ScriptGenerationService();

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

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

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

@@ -0,0 +1,74 @@
+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) {
+        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/index.ts

@@ -295,6 +295,7 @@ export {
   StyleSelector,
   AspectRatioSelector,
   DurationSelector,
+  StylePresetsGrid,
 } from "./presentation/components";
 
 export type {
@@ -326,6 +327,8 @@ export type {
   AIGenerationProgressInlineProps,
   PromptInputProps,
   AIGenerationHeroProps,
+  StylePresetsGridProps,
+  StylePreset,
   // Buttons
   GenerateButtonProps,
   // Display

package/src/presentation/components/StylePresetsGrid.tsx

@@ -0,0 +1,131 @@
+/**
+ * StylePresetsGrid Component
+ * Generic grid of preset styles with emojis, names, and optional duration badges.
+ */
+
+import React from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface StylePreset {
+  readonly id: string;
+  readonly name: string;
+  readonly emoji: string;
+  readonly description: string;
+  readonly duration?: number;
+}
+
+export interface StylePresetsGridProps {
+  readonly presets: readonly StylePreset[];
+  readonly onPresetPress: (preset: StylePreset) => void;
+  readonly disabled?: boolean;
+  readonly title?: string;
+}
+
+export const StylePresetsGrid: React.FC<StylePresetsGridProps> = ({
+  presets,
+  onPresetPress,
+  disabled = false,
+  title = "Quick Start - Choose a Style",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.title, { color: tokens.colors.textPrimary }]}
+      >
+        ⚡ {title}
+      </AtomicText>
+      <View style={styles.grid}>
+        {presets.map((preset) => (
+          <TouchableOpacity
+            key={preset.id}
+            style={[
+              styles.card,
+              { backgroundColor: tokens.colors.surface },
+            ]}
+            onPress={() => onPresetPress(preset)}
+            disabled={disabled}
+          >
+            <View style={styles.cardHeader}>
+              <Text style={styles.emoji}>{preset.emoji}</Text>
+              {preset.duration !== undefined && (
+                <View
+                  style={[
+                    styles.badge,
+                    { backgroundColor: tokens.colors.primary + "20" },
+                  ]}
+                >
+                  <AtomicText
+                    type="labelSmall"
+                    style={{ color: tokens.colors.primary, fontSize: 10 }}
+                  >
+                    {preset.duration}s
+                  </AtomicText>
+                </View>
+              )}
+            </View>
+            <AtomicText
+              type="bodyMedium"
+              style={[styles.cardTitle, { color: tokens.colors.textPrimary }]}
+            >
+              {preset.name}
+            </AtomicText>
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.textSecondary, marginTop: 4 }}
+            >
+              {preset.description}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 16,
+    width: "100%",
+  },
+  title: {
+    fontWeight: "600",
+    marginBottom: 16,
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  card: {
+    flex: 1,
+    minWidth: "47%",
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.05)",
+  },
+  cardHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  emoji: {
+    fontSize: 40,
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  cardTitle: {
+    fontWeight: "600",
+    marginTop: 8,
+  },
+});

package/src/presentation/components/index.ts

@@ -7,6 +7,7 @@ export { PendingJobCardActions } from "./PendingJobCardActions";
 export { AIGenerationProgressInline } from "./AIGenerationProgressInline";
 export { PromptInput } from "./PromptInput";
 export { AIGenerationHero } from "./AIGenerationHero";
+export * from "./StylePresetsGrid";
 
 export type {
   GenerationProgressModalProps,