@umituz/react-native-ai-generation-content 1.17.21 → 1.17.22

package/src/features/text-to-video/index.ts

@@ -1,6 +1,6 @@
 /**
  * Text-to-Video Feature
- * Provider-agnostic text-to-video generation feature
+ * Provider-agnostic text-to-video generation for 100+ apps
  */
 
 // Domain Types
@@ -9,19 +9,57 @@ export type {
   TextToVideoRequest,
   TextToVideoResult,
   TextToVideoFeatureState,
+  TextToVideoFormState,
+  TextToVideoGenerationState,
   TextToVideoTranslations,
   TextToVideoInputBuilder,
   TextToVideoResultExtractor,
-  TextToVideoFeatureConfig,
+  TextToVideoConfig,
+  TextToVideoCallbacks,
+  TabConfig,
+  StyleOption,
+  AspectRatioOption,
+  DurationOption,
+  OptionToggleConfig,
+  HeroConfig,
+  ProgressConfig,
+  FrameData,
+  ModerationResult,
+  ProjectData,
+  GenerationTabsProps,
+  FrameSelectorProps,
+  OptionsPanelProps,
+  HeroSectionProps,
+  HintCarouselProps,
+  HintItem,
+  ExamplePromptsProps,
+  ExamplePrompt,
 } from "./domain";
 
+export { INITIAL_FORM_STATE, INITIAL_GENERATION_STATE } from "./domain";
+
 // Infrastructure Services
 export { executeTextToVideo, hasTextToVideoSupport } from "./infrastructure";
 export type { ExecuteTextToVideoOptions } from "./infrastructure";
 
 // Presentation Hooks
-export { useTextToVideoFeature } from "./presentation";
+export {
+  useTextToVideoFeature,
+  useTextToVideoForm,
+} from "./presentation";
+
 export type {
   UseTextToVideoFeatureProps,
   UseTextToVideoFeatureReturn,
+  UseTextToVideoFormProps,
+  UseTextToVideoFormReturn,
+} from "./presentation";
+
+// Presentation Components
+export {
+  GenerationTabs,
+  FrameSelector,
+  OptionsPanel,
+  HeroSection,
+  HintCarousel,
 } from "./presentation";

package/src/features/text-to-video/infrastructure/services/text-to-video-executor.ts

@@ -1,6 +1,6 @@
 /**
  * Text-to-Video Executor
- * Provider-agnostic text-to-video execution using active AI provider
+ * Single Responsibility: Execute text-to-video using active AI provider
  */
 
 import { providerRegistry } from "../../../../infrastructure/services";

package/src/features/text-to-video/presentation/components/FrameSelector.tsx

@@ -0,0 +1,153 @@
+/**
+ * FrameSelector Component
+ * Single Responsibility: Display and manage start/end frames
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity, Image } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { FrameSelectorProps } from "../../domain/types";
+
+export const FrameSelector: React.FC<FrameSelectorProps> = ({
+  frames,
+  onFrameChange,
+  onFrameDelete,
+  startLabel,
+  endLabel,
+  changeLabel,
+  deleteLabel,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const startFrame = frames.find((f) => f.order === 0);
+  const endFrame = frames.find((f) => f.order === 1);
+
+  const renderFrameContent = (frame: typeof startFrame) =>
+    frame ? (
+      <Image
+        source={{ uri: frame.url }}
+        style={styles.image}
+        resizeMode="cover"
+      />
+    ) : (
+      <View style={styles.placeholder}>
+        <AtomicIcon name="image-outline" size="xl" color="secondary" />
+      </View>
+    );
+
+  const renderActions = (index: number) => (
+    <View style={[styles.actions, { gap: tokens.spacing.md }]}>
+      <TouchableOpacity
+        style={[styles.actionButton, { gap: tokens.spacing.xs }]}
+        onPress={() => onFrameChange(index)}
+      >
+        <AtomicIcon name="pencil-outline" size="xs" color="primary" />
+        <AtomicText type="labelSmall" color="primary">
+          {changeLabel}
+        </AtomicText>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[styles.actionButton, { gap: tokens.spacing.xs }]}
+        onPress={() => onFrameDelete(index)}
+      >
+        <AtomicIcon name="trash-outline" size="xs" color="primary" />
+        <AtomicText type="labelSmall" color="primary">
+          {deleteLabel}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <View style={[styles.container, { gap: tokens.spacing.md }, style]}>
+      <View style={[styles.frameContainer, { gap: tokens.spacing.sm }]}>
+        <AtomicText type="labelMedium" color="textSecondary">
+          {startLabel}
+        </AtomicText>
+        <View
+          style={[
+            styles.imageWrapper,
+            { backgroundColor: tokens.colors.surface },
+          ]}
+        >
+          {renderFrameContent(startFrame)}
+        </View>
+        {renderActions(0)}
+      </View>
+
+      <View style={styles.separatorContainer}>
+        <View
+          style={[styles.separator, { backgroundColor: tokens.colors.surface }]}
+        >
+          <AtomicIcon name="arrow-forward-outline" size="sm" color="primary" />
+        </View>
+      </View>
+
+      <View style={[styles.frameContainer, { gap: tokens.spacing.sm }]}>
+        <AtomicText type="labelMedium" color="textSecondary">
+          {endLabel}
+        </AtomicText>
+        <View
+          style={[
+            styles.imageWrapper,
+            { backgroundColor: tokens.colors.surface },
+          ]}
+        >
+          {renderFrameContent(endFrame)}
+        </View>
+        {renderActions(1)}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    marginBottom: 24,
+  },
+  frameContainer: {
+    flex: 1,
+  },
+  imageWrapper: {
+    width: "100%",
+    aspectRatio: 9 / 16,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+  },
+  placeholder: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  actionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  separatorContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingTop: 80,
+  },
+  separator: {
+    width: 32,
+    height: 32,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/features/text-to-video/presentation/components/GenerationTabs.tsx

@@ -0,0 +1,73 @@
+/**
+ * GenerationTabs Component
+ * Single Responsibility: Tab navigation for generation modes
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { GenerationTabsProps } from "../../domain/types";
+
+export const GenerationTabs: React.FC<GenerationTabsProps> = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  getLabel,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: tokens.colors.background },
+        style,
+      ]}
+    >
+      {tabs.map((tab) => {
+        const isActive = activeTab === tab.id;
+        return (
+          <TouchableOpacity
+            key={tab.id}
+            style={[
+              styles.tab,
+              isActive && { backgroundColor: tokens.colors.secondary },
+            ]}
+            onPress={() => onTabChange(tab.id)}
+          >
+            <AtomicText
+              type="labelMedium"
+              color={isActive ? "textInverse" : "textSecondary"}
+              style={styles.text}
+            >
+              {getLabel(tab.labelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    padding: 4,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  tab: {
+    flex: 1,
+    paddingVertical: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+  },
+  text: {
+    fontWeight: "600",
+  },
+});

package/src/features/text-to-video/presentation/components/HeroSection.tsx

@@ -0,0 +1,67 @@
+/**
+ * HeroSection Component
+ * Single Responsibility: Display hero banner for text-to-video feature
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { HeroSectionProps } from "../../domain/types";
+
+export const HeroSection: React.FC<HeroSectionProps> = ({
+  title,
+  subtitle,
+  icon,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <LinearGradient
+      colors={[tokens.colors.secondary, tokens.colors.primary]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={[styles.container, style]}
+    >
+      <View style={styles.iconContainer}>
+        <AtomicIcon
+          name={icon || "sparkles-outline"}
+          size="xl"
+          color="textInverse"
+        />
+      </View>
+      <AtomicText type="headlineSmall" color="textInverse" style={styles.title}>
+        {title}
+      </AtomicText>
+      <AtomicText type="bodyMedium" color="textInverse" style={styles.subtitle}>
+        {subtitle}
+      </AtomicText>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    padding: 24,
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  iconContainer: {
+    marginBottom: 12,
+  },
+  title: {
+    fontWeight: "700",
+    textAlign: "center",
+    marginBottom: 8,
+  },
+  subtitle: {
+    textAlign: "center",
+    opacity: 0.9,
+  },
+});

package/src/features/text-to-video/presentation/components/HintCarousel.tsx

@@ -0,0 +1,96 @@
+/**
+ * HintCarousel Component
+ * Single Responsibility: Display scrollable hint images for inspiration
+ */
+
+import React from "react";
+import {
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+} from "react-native";
+import {
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { HintCarouselProps } from "../../domain/types";
+
+export const HintCarousel: React.FC<HintCarouselProps> = ({
+  hints,
+  onHintSelect,
+  onRefresh,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (hints.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {hints.map((hint) => (
+          <TouchableOpacity
+            key={hint.id}
+            style={[
+              styles.hintItem,
+              { backgroundColor: tokens.colors.surface },
+            ]}
+            onPress={() => onHintSelect(hint)}
+          >
+            <Image
+              source={{ uri: hint.imageUrl }}
+              style={styles.hintImage}
+              resizeMode="cover"
+            />
+          </TouchableOpacity>
+        ))}
+        {onRefresh && (
+          <TouchableOpacity
+            style={[
+              styles.refreshButton,
+              { backgroundColor: tokens.colors.surface },
+            ]}
+            onPress={onRefresh}
+          >
+            <AtomicIcon name="refresh-outline" size="md" color="primary" />
+          </TouchableOpacity>
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  scrollContent: {
+    paddingHorizontal: 4,
+    gap: 12,
+  },
+  hintItem: {
+    width: 80,
+    height: 80,
+    borderRadius: 12,
+    overflow: "hidden",
+  },
+  hintImage: {
+    width: "100%",
+    height: "100%",
+  },
+  refreshButton: {
+    width: 80,
+    height: 80,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/features/text-to-video/presentation/components/OptionsPanel.tsx

@@ -0,0 +1,123 @@
+/**
+ * OptionsPanel Component
+ * Single Responsibility: Display toggleable options for video generation
+ */
+
+import React from "react";
+import { View, StyleSheet, Switch, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { OptionsPanelProps } from "../../domain/types";
+
+export const OptionsPanel: React.FC<OptionsPanelProps> = ({
+  soundEnabled,
+  onSoundToggle,
+  professionalMode,
+  onProfessionalModeToggle,
+  duration,
+  soundLabel,
+  soundBadge,
+  professionalLabel,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.row}>
+        <View style={styles.labelContainer}>
+          <AtomicText type="labelMedium" style={styles.label}>
+            {soundLabel}
+          </AtomicText>
+          {soundBadge && (
+            <View
+              style={[styles.badge, { backgroundColor: tokens.colors.success }]}
+            >
+              <AtomicText type="labelSmall" style={styles.badgeText}>
+                {soundBadge}
+              </AtomicText>
+            </View>
+          )}
+        </View>
+        <Switch
+          value={soundEnabled}
+          onValueChange={onSoundToggle}
+          trackColor={{
+            false: tokens.colors.surface,
+            true: tokens.colors.success,
+          }}
+        />
+      </View>
+
+      <View style={styles.controlsRow}>
+        <TouchableOpacity
+          style={[
+            styles.controlButton,
+            professionalMode && { backgroundColor: tokens.colors.surface },
+          ]}
+          onPress={() => onProfessionalModeToggle(!professionalMode)}
+        >
+          <AtomicText
+            type="labelMedium"
+            color={professionalMode ? "textPrimary" : "textSecondary"}
+          >
+            {professionalLabel}
+          </AtomicText>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={[styles.controlButton, styles.durationButton]}>
+          <AtomicText type="labelMedium" color="textSecondary">
+            {duration}s
+          </AtomicText>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+    gap: 16,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  labelContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  label: {
+    fontWeight: "600",
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  badgeText: {
+    color: "#000",
+    fontWeight: "bold",
+    fontSize: 10,
+  },
+  controlsRow: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  controlButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8,
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  durationButton: {
+    minWidth: 60,
+  },
+});

package/src/features/text-to-video/presentation/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Text-to-Video Presentation Components
+ * Single Responsibility: Export all components
+ */
+
+export { GenerationTabs } from "./GenerationTabs";
+export { FrameSelector } from "./FrameSelector";
+export { OptionsPanel } from "./OptionsPanel";
+export { HeroSection } from "./HeroSection";
+export { HintCarousel } from "./HintCarousel";

package/src/features/text-to-video/presentation/hooks/index.ts

@@ -1,5 +1,16 @@
+/**
+ * Text-to-Video Presentation Hooks
+ * Single Responsibility: Export all hooks
+ */
+
 export { useTextToVideoFeature } from "./useTextToVideoFeature";
 export type {
   UseTextToVideoFeatureProps,
   UseTextToVideoFeatureReturn,
 } from "./useTextToVideoFeature";
+
+export { useTextToVideoForm } from "./useTextToVideoForm";
+export type {
+  UseTextToVideoFormProps,
+  UseTextToVideoFormReturn,
+} from "./useTextToVideoForm";