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

package/src/features/image-to-video/presentation/components/DurationSelector.tsx

@@ -0,0 +1,110 @@
+/**
+ * Duration Selector Component
+ * Generic component for video duration selection
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { VideoDuration, DurationOption } from "../../domain/types";
+
+export interface DurationSelectorProps {
+  options: DurationOption[];
+  selectedDuration: VideoDuration;
+  onDurationSelect: (duration: VideoDuration) => void;
+  label: string;
+  imageCount: number;
+  totalVideoLabel: string;
+}
+
+export const DurationSelector: React.FC<DurationSelectorProps> = ({
+  options,
+  selectedDuration,
+  onDurationSelect,
+  label,
+  imageCount,
+  totalVideoLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <View style={componentStyles.grid}>
+        {options.map((option) => {
+          const isSelected = selectedDuration === option.value;
+          return (
+            <TouchableOpacity
+              key={option.value}
+              style={[
+                componentStyles.button,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onDurationSelect(option.value)}
+              activeOpacity={0.7}
+            >
+              <AtomicText
+                type="bodyMedium"
+                style={{
+                  color: isSelected
+                    ? tokens.colors.textInverse
+                    : tokens.colors.textPrimary,
+                  fontWeight: isSelected ? "600" : "400",
+                }}
+              >
+                {option.label ?? `${option.value}s`}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      <AtomicText
+        type="labelSmall"
+        style={[componentStyles.hint, { color: tokens.colors.textSecondary }]}
+      >
+        {totalVideoLabel.replace("{duration}", String(imageCount * selectedDuration))}
+      </AtomicText>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  grid: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  hint: {
+    marginTop: 8,
+  },
+});

package/src/features/image-to-video/presentation/components/GenerateButton.tsx

@@ -0,0 +1,95 @@
+/**
+ * Generate Button Component
+ * Generic generate button with loading state
+ */
+
+import React from "react";
+import { View, TouchableOpacity, ActivityIndicator, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface GenerateButtonProps {
+  onPress: () => void;
+  isGenerating: boolean;
+  isDisabled?: boolean;
+  buttonText: string;
+  generatingText: string;
+}
+
+export const GenerateButton: React.FC<GenerateButtonProps> = ({
+  onPress,
+  isGenerating,
+  isDisabled = false,
+  buttonText,
+  generatingText,
+}) => {
+  const tokens = useAppDesignTokens();
+  const disabled = isGenerating || isDisabled;
+
+  return (
+    <View style={componentStyles.container}>
+      <TouchableOpacity
+        style={[
+          componentStyles.button,
+          {
+            backgroundColor: disabled
+              ? tokens.colors.primary + "60"
+              : tokens.colors.primary,
+          },
+        ]}
+        onPress={onPress}
+        disabled={disabled}
+        activeOpacity={0.8}
+      >
+        {isGenerating ? (
+          <>
+            <ActivityIndicator
+              size="small"
+              color={tokens.colors.textInverse}
+              style={componentStyles.loader}
+            />
+            <AtomicText
+              type="bodyMedium"
+              style={[componentStyles.text, { color: tokens.colors.textInverse }]}
+            >
+              {generatingText}
+            </AtomicText>
+          </>
+        ) : (
+          <>
+            <AtomicIcon name="videocam-outline" size="md" color="onSurface" />
+            <AtomicText
+              type="bodyMedium"
+              style={[componentStyles.text, { color: tokens.colors.textInverse }]}
+            >
+              {buttonText}
+            </AtomicText>
+          </>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 16,
+    borderRadius: 16,
+  },
+  loader: {
+    marginRight: 8,
+  },
+  text: {
+    fontWeight: "600",
+    marginLeft: 8,
+  },
+});

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

@@ -0,0 +1,89 @@
+/**
+ * Hero Section Component
+ * Generic hero section with gradient background
+ */
+
+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";
+
+export interface HeroSectionProps {
+  title: string;
+  subtitle: string;
+  iconName?: string;
+}
+
+export const HeroSection: React.FC<HeroSectionProps> = ({
+  title,
+  subtitle,
+  iconName = "image-outline",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.container}>
+      <LinearGradient
+        colors={[
+          tokens.colors.secondary ?? tokens.colors.info,
+          tokens.colors.primary,
+        ]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={componentStyles.gradient}
+      >
+        <View style={componentStyles.iconContainer}>
+          <AtomicIcon name={iconName as never} size="xl" color="onSurface" />
+        </View>
+        <AtomicText
+          type="headlineSmall"
+          style={[componentStyles.title, { color: tokens.colors.textInverse }]}
+        >
+          {title}
+        </AtomicText>
+        <AtomicText
+          type="bodyMedium"
+          style={[componentStyles.subtitle, { color: tokens.colors.textInverse }]}
+        >
+          {subtitle}
+        </AtomicText>
+      </LinearGradient>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  container: {
+    marginHorizontal: 16,
+    marginBottom: 24,
+    borderRadius: 20,
+    overflow: "hidden",
+  },
+  gradient: {
+    padding: 32,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  title: {
+    textAlign: "center",
+    marginTop: 16,
+    fontWeight: "700",
+  },
+  subtitle: {
+    textAlign: "center",
+    marginTop: 8,
+    opacity: 0.9,
+  },
+});

package/src/features/image-to-video/presentation/components/ImageSelectionGrid.tsx

@@ -0,0 +1,234 @@
+/**
+ * Image Selection Grid Component
+ * Generic component for image selection display
+ */
+
+import React from "react";
+import {
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface ImageSelectionGridTranslations {
+  selectedImages: string;
+  selectImages: string;
+  chooseUpTo: string;
+  addMore: string;
+}
+
+export interface ImageSelectionGridProps {
+  images: string[];
+  maxImages: number;
+  onSelectImages: () => void;
+  onRemoveImage: (index: number) => void;
+  translations: ImageSelectionGridTranslations;
+}
+
+export const ImageSelectionGrid: React.FC<ImageSelectionGridProps> = ({
+  images,
+  maxImages,
+  onSelectImages,
+  onRemoveImage,
+  translations,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (images.length === 0) {
+    return (
+      <View style={componentStyles.section}>
+        <AtomicText
+          type="bodyMedium"
+          style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+        >
+          {translations.selectedImages} (0/{maxImages})
+        </AtomicText>
+        <TouchableOpacity
+          style={[
+            componentStyles.uploadBox,
+            {
+              backgroundColor: tokens.colors.surface,
+              borderColor: tokens.colors.borderLight,
+            },
+          ]}
+          onPress={onSelectImages}
+          activeOpacity={0.7}
+        >
+          <AtomicIcon name="Upload" size="xl" color="primary" />
+          <AtomicText
+            type="bodyMedium"
+            style={[
+              componentStyles.uploadText,
+              { color: tokens.colors.primary },
+            ]}
+          >
+            {translations.selectImages}
+          </AtomicText>
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textSecondary }}
+          >
+            {translations.chooseUpTo.replace("{max}", String(maxImages))}
+          </AtomicText>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {translations.selectedImages} ({images.length}/{maxImages})
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={componentStyles.scroll}
+      >
+        {images.map((uri, index) => (
+          <View key={index} style={componentStyles.imageCard}>
+            <Image
+              source={{ uri }}
+              style={componentStyles.imagePreview}
+              resizeMode="cover"
+            />
+            <TouchableOpacity
+              style={[
+                componentStyles.removeButton,
+                { backgroundColor: tokens.colors.error },
+              ]}
+              onPress={() => onRemoveImage(index)}
+            >
+              <AtomicIcon name="close-circle" size="sm" color="onSurface" />
+            </TouchableOpacity>
+            <View
+              style={[
+                componentStyles.imageBadge,
+                { backgroundColor: tokens.colors.primary },
+              ]}
+            >
+              <AtomicText
+                type="labelSmall"
+                style={[
+                  componentStyles.badgeText,
+                  { color: tokens.colors.textInverse },
+                ]}
+              >
+                {index + 1}
+              </AtomicText>
+            </View>
+          </View>
+        ))}
+
+        {images.length < maxImages && (
+          <TouchableOpacity
+            style={[
+              componentStyles.addMoreCard,
+              {
+                backgroundColor: tokens.colors.surface,
+                borderColor: tokens.colors.borderLight,
+              },
+            ]}
+            onPress={onSelectImages}
+            activeOpacity={0.7}
+          >
+            <AtomicIcon name="add" size="lg" color="primary" />
+            <AtomicText
+              type="labelSmall"
+              style={[
+                componentStyles.addMoreText,
+                { color: tokens.colors.primary },
+              ]}
+            >
+              {translations.addMore}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  uploadBox: {
+    padding: 48,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 2,
+    borderStyle: "dashed",
+  },
+  uploadText: {
+    fontWeight: "600",
+    marginTop: 12,
+  },
+  scroll: {
+    marginHorizontal: -16,
+    paddingHorizontal: 16,
+  },
+  imageCard: {
+    width: 120,
+    height: 120,
+    borderRadius: 12,
+    marginRight: 12,
+    position: "relative",
+  },
+  imagePreview: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 12,
+  },
+  removeButton: {
+    position: "absolute",
+    top: 6,
+    right: 6,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  imageBadge: {
+    position: "absolute",
+    bottom: 6,
+    left: 6,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  badgeText: {
+    fontSize: 10,
+  },
+  addMoreCard: {
+    width: 120,
+    height: 120,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 2,
+    borderStyle: "dashed",
+  },
+  addMoreText: {
+    marginTop: 4,
+  },
+});

package/src/features/image-to-video/presentation/components/MusicMoodSelector.tsx

@@ -0,0 +1,181 @@
+/**
+ * Music Mood Selector Component
+ * Generic component for music mood selection
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { MusicMood, MusicMoodId } from "../../domain/types";
+
+export interface MusicMoodSelectorProps {
+  moods: MusicMood[];
+  selectedMood: MusicMoodId;
+  onMoodSelect: (moodId: MusicMoodId) => void;
+  label: string;
+  hasCustomAudio?: boolean;
+  customAudioLabel?: string;
+}
+
+export const MusicMoodSelector: React.FC<MusicMoodSelectorProps> = ({
+  moods,
+  selectedMood,
+  onMoodSelect,
+  label,
+  hasCustomAudio = false,
+  customAudioLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={componentStyles.scroll}
+      >
+        {moods.map((mood) => {
+          const isSelected = selectedMood === mood.id;
+          return (
+            <TouchableOpacity
+              key={mood.id}
+              style={[
+                componentStyles.card,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onMoodSelect(mood.id)}
+              activeOpacity={0.7}
+            >
+              <View
+                style={[
+                  componentStyles.iconContainer,
+                  {
+                    backgroundColor: isSelected
+                      ? "rgba(255, 255, 255, 0.2)"
+                      : "rgba(0, 0, 0, 0.05)",
+                  },
+                ]}
+              >
+                <AtomicIcon
+                  name={mood.icon as never}
+                  size="lg"
+                  color={isSelected ? "onSurface" : "primary"}
+                />
+              </View>
+              <AtomicText
+                type="bodySmall"
+                style={[
+                  componentStyles.moodName,
+                  {
+                    color: isSelected
+                      ? tokens.colors.textInverse
+                      : tokens.colors.textPrimary,
+                  },
+                ]}
+              >
+                {mood.name}
+              </AtomicText>
+              <AtomicText
+                type="labelSmall"
+                style={[
+                  componentStyles.moodDescription,
+                  {
+                    color: isSelected
+                      ? tokens.colors.textInverse
+                      : tokens.colors.textSecondary,
+                    opacity: isSelected ? 0.9 : 0.7,
+                  },
+                ]}
+              >
+                {mood.description}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+      {selectedMood === "custom" && hasCustomAudio && customAudioLabel && (
+        <View
+          style={[
+            componentStyles.customBadge,
+            { backgroundColor: tokens.colors.primary + "20" },
+          ]}
+        >
+          <AtomicIcon name="checkmark-circle-outline" size="sm" color="primary" />
+          <AtomicText
+            type="labelSmall"
+            style={[componentStyles.customBadgeText, { color: tokens.colors.primary }]}
+          >
+            {customAudioLabel}
+          </AtomicText>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  scroll: {
+    marginHorizontal: -16,
+    paddingHorizontal: 16,
+  },
+  card: {
+    width: 140,
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 2,
+    marginRight: 12,
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  moodName: {
+    fontWeight: "600",
+    marginTop: 8,
+    textAlign: "center",
+  },
+  moodDescription: {
+    marginTop: 4,
+    textAlign: "center",
+  },
+  customBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 12,
+  },
+  customBadgeText: {
+    marginLeft: 8,
+    flex: 1,
+  },
+});