@umituz/react-native-ai-generation-content 1.26.2 → 1.26.4

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

@@ -1,110 +0,0 @@
-/**
- * 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/EmptyGridState.tsx

@@ -1,69 +0,0 @@
-/**
- * EmptyGridState Component
- * Displays empty state when no images are selected
- */
-
-import React from "react";
-import { View, TouchableOpacity } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { ImageSelectionGridStyles } from "./ImageSelectionGrid.styles";
-import type { ImageSelectionGridTranslations } from "./ImageSelectionGrid.types";
-
-interface EmptyGridStateProps {
-  styles: ImageSelectionGridStyles;
-  maxImages: number;
-  translations: ImageSelectionGridTranslations;
-  onSelectImages: () => void;
-}
-
-export function EmptyGridState({
-  styles,
-  maxImages,
-  translations,
-  onSelectImages,
-}: EmptyGridStateProps) {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.section}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {translations.selectedImages} (0/{maxImages})
-      </AtomicText>
-      <TouchableOpacity
-        style={[
-          styles.uploadBox,
-          {
-            backgroundColor: tokens.colors.surface,
-            borderColor: tokens.colors.borderLight,
-          },
-        ]}
-        onPress={onSelectImages}
-        activeOpacity={0.7}
-      >
-        <AtomicIcon name="cloud-upload-outline" size="xl" color="primary" />
-        <AtomicText
-          type="bodyMedium"
-          style={[
-            styles.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>
-  );
-}

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

@@ -1,64 +0,0 @@
-/**
- * GridImageItem Component
- * Displays a single image in the grid with remove button and badge
- */
-
-import React from "react";
-import { View, TouchableOpacity, Image } from "react-native";
-import {
-  AtomicIcon,
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { ImageSelectionGridStyles } from "./ImageSelectionGrid.styles";
-
-interface GridImageItemProps {
-  styles: ImageSelectionGridStyles;
-  uri: string;
-  index: number;
-  onRemove: () => void;
-}
-
-export function GridImageItem({
-  styles,
-  uri,
-  index,
-  onRemove,
-}: GridImageItemProps) {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.imageCard}>
-      <Image
-        source={{ uri }}
-        style={styles.imagePreview}
-        resizeMode="cover"
-      />
-      <TouchableOpacity
-        style={[
-          styles.removeButton,
-          { backgroundColor: tokens.colors.error },
-        ]}
-        onPress={onRemove}
-      >
-        <AtomicIcon name="close-circle" size="sm" color="onSurface" />
-      </TouchableOpacity>
-      <View
-        style={[
-          styles.imageBadge,
-          { backgroundColor: tokens.colors.primary },
-        ]}
-      >
-        <AtomicText
-          type="labelSmall"
-          style={[
-            styles.badgeText,
-            { color: tokens.colors.textInverse },
-          ]}
-        >
-          {index + 1}
-        </AtomicText>
-      </View>
-    </View>
-  );
-}

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

@@ -1,84 +0,0 @@
-/**
- * ImageSelectionGrid Styles
- */
-
-import { StyleSheet } from "react-native";
-import type { DesignTokens } from "@umituz/react-native-design-system";
-
-export function createImageSelectionGridStyles(_tokens: DesignTokens) {
-  return 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,
-    },
-  });
-}
-
-export type ImageSelectionGridStyles = ReturnType<typeof createImageSelectionGridStyles>;

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

@@ -1,77 +0,0 @@
-/**
- * Image Selection Grid Component
- * Generic component for image selection display
- */
-
-import React, { useMemo } from "react";
-import { View, ScrollView } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { EmptyGridState } from "./EmptyGridState";
-import { GridImageItem } from "./GridImageItem";
-import { AddMoreCard } from "./AddMoreCard";
-import { createImageSelectionGridStyles } from "./ImageSelectionGrid.styles";
-import type { ImageSelectionGridProps } from "./ImageSelectionGrid.types";
-
-export const ImageSelectionGrid: React.FC<ImageSelectionGridProps> = ({
-  images,
-  maxImages,
-  onSelectImages,
-  onRemoveImage,
-  translations,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(
-    () => createImageSelectionGridStyles(tokens),
-    [tokens]
-  );
-
-  if (images.length === 0) {
-    return (
-      <EmptyGridState
-        styles={styles}
-        maxImages={maxImages}
-        translations={translations}
-        onSelectImages={onSelectImages}
-      />
-    );
-  }
-
-  return (
-    <View style={styles.section}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {translations.selectedImages} ({images.length}/{maxImages})
-      </AtomicText>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={styles.scroll}
-      >
-        {images.map((uri, index) => (
-          <GridImageItem
-            key={index}
-            styles={styles}
-            uri={uri}
-            index={index}
-            onRemove={() => onRemoveImage(index)}
-          />
-        ))}
-
-        {images.length < maxImages && (
-          <AddMoreCard
-            styles={styles}
-            addMoreText={translations.addMore}
-            onPress={onSelectImages}
-          />
-        )}
-      </ScrollView>
-    </View>
-  );
-};
-
-export type { ImageSelectionGridProps, ImageSelectionGridTranslations } from "./ImageSelectionGrid.types";

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

@@ -1,18 +0,0 @@
-/**
- * ImageSelectionGrid Type Definitions
- */
-
-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;
-}

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

@@ -1,181 +0,0 @@
-/**
- * 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
-                      ? tokens.colors.modalOverlay
-                      : tokens.colors.surface,
-                  },
-                ]}
-              >
-                <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.surfaceVariant },
-          ]}
-        >
-          <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

@@ -1,30 +0,0 @@
-/**
- * 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 - Using AIGenerationHero from common components
-// export { HeroSection as ImageToVideoHeroSection } from "./HeroSection";
-// export type { HeroSectionProps as ImageToVideoHeroSectionProps } from "./HeroSection";
-
-// Action Components
-export { GenerateButton as ImageToVideoGenerateButton } from "../../../../presentation/components/buttons";
-export type { GenerateButtonProps as ImageToVideoGenerateButtonProps } from "../../../../presentation/components/buttons";

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

@@ -1,27 +0,0 @@
-// 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,
-  UseImageToVideoFeatureReturn,
-} from "./useImageToVideoFeature";