@umituz/react-native-ai-generation-content 1.17.37 → 1.17.39

package/package.json

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

package/src/features/script-generator/domain/types/script.types.ts

@@ -0,0 +1,24 @@
+/**
+ * AI Script Generator Types
+ */
+
+export interface ScriptSection {
+  readonly id: string;
+  readonly type: "hook" | "intro" | "main" | "transition" | "cta";
+  readonly title: string;
+  readonly content: string;
+  readonly duration: number; // in seconds
+  readonly notes?: string;
+}
+
+export interface ScriptGenerationRequest {
+  readonly topic: string;
+  readonly videoType: string;
+  readonly duration: number;
+  readonly targetAudience?: string;
+  readonly keyPoints?: string;
+}
+
+export interface ScriptGenerationResponse {
+  readonly script: readonly ScriptSection[];
+}

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

@@ -0,0 +1,2 @@
+export * from "./domain/types/script.types";
+export * from "./presentation/components";

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

@@ -0,0 +1,159 @@
+/**
+ * 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="Check" 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.primary + "20" },
+              ]}
+            >
+              <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="Check" size="md" color="onSurface" />
+        <AtomicText
+          type="bodyLarge"
+          style={styles.useButtonText}
+        >
+          {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: {
+    color: "#FFFFFF",
+    fontWeight: "700",
+    marginLeft: 12,
+  },
+});

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

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

package/src/index.ts

@@ -281,7 +281,7 @@ export {
   // New Generic Sections
   AIGenerationProgressInline,
   PromptInput,
-  HeroSection,
+  AIGenerationHero,
   // Buttons
   GenerateButton,
   // Display
@@ -325,7 +325,7 @@ export type {
   DualImagePickerProps,
   AIGenerationProgressInlineProps,
   PromptInputProps,
-  HeroSectionProps,
+  AIGenerationHeroProps,
   // Buttons
   GenerateButtonProps,
   // Display
@@ -414,6 +414,8 @@ export * from "./features/replace-background";
 // =============================================================================
 
 export * from "./features/upscaling";
+export * from "./features/script-generator";
+
 
 // =============================================================================
 // FEATURES - Photo Restoration

package/src/presentation/components/{HeroSection.tsx → AIGenerationHero.tsx}

@@ -13,14 +13,14 @@ import {
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 
-export interface HeroSectionProps {
+export interface AIGenerationHeroProps {
   readonly title: string;
   readonly subtitle?: string;
   readonly iconName?: string;
   readonly gradientColors?: readonly [string, string, ...string[]];
 }
 
-export const HeroSection: React.FC<HeroSectionProps> = ({
+export const AIGenerationHero: React.FC<AIGenerationHeroProps> = ({
   title,
   subtitle,
   iconName,

package/src/presentation/components/index.ts

@@ -6,7 +6,7 @@ export { PendingJobProgressBar } from "./PendingJobProgressBar";
 export { PendingJobCardActions } from "./PendingJobCardActions";
 export { AIGenerationProgressInline } from "./AIGenerationProgressInline";
 export { PromptInput } from "./PromptInput";
-export { HeroSection } from "./HeroSection";
+export { AIGenerationHero } from "./AIGenerationHero";
 
 export type {
   GenerationProgressModalProps,
@@ -25,7 +25,7 @@ export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
 export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
 export type { AIGenerationProgressInlineProps } from "./AIGenerationProgressInline";
 export type { PromptInputProps } from "./PromptInput";
-export type { HeroSectionProps } from "./HeroSection";
+export type { AIGenerationHeroProps } from "./AIGenerationHero";
 
 export * from "./result";
 export * from "./photo-step";