@umituz/react-native-ai-generation-content 1.27.8 → 1.27.10

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

@@ -0,0 +1,135 @@
+/**
+ * Animation Style Selector Component
+ * Generic component for animation style selection
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { AnimationStyle, AnimationStyleId } from "../../domain/types";
+
+export interface AnimationStyleSelectorProps {
+  styles: AnimationStyle[];
+  selectedStyle: AnimationStyleId;
+  onStyleSelect: (styleId: AnimationStyleId) => void;
+  label: string;
+}
+
+export const AnimationStyleSelector: React.FC<AnimationStyleSelectorProps> = ({
+  styles,
+  selectedStyle,
+  onStyleSelect,
+  label,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      {styles.map((style) => {
+        const isSelected = selectedStyle === style.id;
+        return (
+          <TouchableOpacity
+            key={style.id}
+            style={[
+              componentStyles.card,
+              {
+                backgroundColor: isSelected
+                  ? tokens.colors.primary + "20"
+                  : tokens.colors.surface,
+                borderColor: isSelected
+                  ? tokens.colors.primary
+                  : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onStyleSelect(style.id)}
+            activeOpacity={0.7}
+          >
+            <View style={componentStyles.cardContent}>
+              <View
+                style={[
+                  componentStyles.iconContainer,
+                  {
+                    backgroundColor: isSelected
+                      ? tokens.colors.primary
+                      : tokens.colors.primary + "20",
+                  },
+                ]}
+              >
+                <AtomicIcon
+                  name={style.icon as never}
+                  size="md"
+                  color={isSelected ? "onSurface" : "primary"}
+                />
+              </View>
+              <View style={componentStyles.textContainer}>
+                <AtomicText
+                  type="bodyMedium"
+                  style={[
+                    componentStyles.styleName,
+                    { color: tokens.colors.textPrimary },
+                  ]}
+                >
+                  {style.name}
+                </AtomicText>
+                <AtomicText
+                  type="labelSmall"
+                  style={{ color: tokens.colors.textSecondary }}
+                >
+                  {style.description}
+                </AtomicText>
+              </View>
+              {isSelected && (
+                <AtomicIcon name="checkmark-outline" size="md" color="primary" />
+              )}
+            </View>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+    marginBottom: 12,
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  textContainer: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  styleName: {
+    fontWeight: "600",
+  },
+});

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/EmptyGridState.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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

@@ -0,0 +1,64 @@
+/**
+ * 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

@@ -0,0 +1,84 @@
+/**
+ * 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

@@ -0,0 +1,77 @@
+/**
+ * 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

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