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

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,
+  },
+});

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

@@ -0,0 +1,30 @@
+/**
+ * Image-to-Video Components Index
+ */
+
+// Animation Style Selector
+export { AnimationStyleSelector as ImageToVideoAnimationStyleSelector } from "./AnimationStyleSelector";
+export type { AnimationStyleSelectorProps as ImageToVideoAnimationStyleSelectorProps } from "./AnimationStyleSelector";
+
+// Duration Selector
+export { DurationSelector as ImageToVideoDurationSelector } from "./DurationSelector";
+export type { DurationSelectorProps as ImageToVideoDurationSelectorProps } from "./DurationSelector";
+
+// Music Mood Selector
+export { MusicMoodSelector as ImageToVideoMusicMoodSelector } from "./MusicMoodSelector";
+export type { MusicMoodSelectorProps as ImageToVideoMusicMoodSelectorProps } from "./MusicMoodSelector";
+
+// Image Selection Grid
+export { ImageSelectionGrid as ImageToVideoSelectionGrid } from "./ImageSelectionGrid";
+export type {
+  ImageSelectionGridProps as ImageToVideoSelectionGridProps,
+  ImageSelectionGridTranslations as ImageToVideoSelectionGridTranslations,
+} from "./ImageSelectionGrid";
+
+// Hero Section
+export { HeroSection as ImageToVideoHeroSection } from "./HeroSection";
+export type { HeroSectionProps as ImageToVideoHeroSectionProps } from "./HeroSection";
+
+// Generate Button
+export { GenerateButton as ImageToVideoGenerateButton } from "./GenerateButton";
+export type { GenerateButtonProps as ImageToVideoGenerateButtonProps } from "./GenerateButton";

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

@@ -1,3 +1,25 @@
+// Form State Hook
+export { useFormState as useImageToVideoFormState } from "./useFormState";
+export type {
+  UseFormStateOptions as UseImageToVideoFormStateOptions,
+  UseFormStateReturn as UseImageToVideoFormStateReturn,
+} from "./useFormState";
+
+// Generation Hook
+export { useGeneration as useImageToVideoGeneration } from "./useGeneration";
+export type {
+  UseGenerationOptions as UseImageToVideoGenerationOptions,
+  UseGenerationReturn as UseImageToVideoGenerationReturn,
+} from "./useGeneration";
+
+// Combined Form Hook
+export { useImageToVideoForm } from "./useImageToVideoForm";
+export type {
+  UseImageToVideoFormOptions,
+  UseImageToVideoFormReturn,
+} from "./useImageToVideoForm";
+
+// Provider-based Feature Hook
 export { useImageToVideoFeature } from "./useImageToVideoFeature";
 export type {
   UseImageToVideoFeatureProps,