@umituz/react-native-ai-generation-content 1.17.1 → 1.17.3

package/src/presentation/components/headers/FeatureHeader.tsx

@@ -0,0 +1,85 @@
+/**
+ * FeatureHeader Component
+ * Generic feature header with hero image and description
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet, ImageBackground } from "react-native";
+import type { ImageSourcePropType } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { LinearGradient } from "expo-linear-gradient";
+
+export interface FeatureHeaderProps {
+  readonly imageSource: ImageSourcePropType;
+  readonly description: string;
+  readonly gradientColors?: readonly [string, string, ...string[]];
+  readonly minHeight?: number;
+}
+
+export const FeatureHeader: React.FC<FeatureHeaderProps> = ({
+  imageSource,
+  description,
+  gradientColors = ["rgba(0,0,0,0.3)", "rgba(0,0,0,0.1)", "rgba(0,0,0,0.4)"],
+  minHeight = 200,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <>
+      <View style={styles.headerContainer}>
+        <ImageBackground
+          source={imageSource}
+          style={[styles.heroImage, { minHeight }]}
+          imageStyle={styles.heroImageStyle}
+        >
+          <LinearGradient
+            colors={gradientColors}
+            style={[styles.gradient, { minHeight }]}
+          />
+        </ImageBackground>
+      </View>
+      <AtomicText
+        type="bodyLarge"
+        style={[
+          styles.description,
+          {
+            color: tokens.colors.textSecondary,
+            marginTop: tokens.spacing.md,
+            marginBottom: tokens.spacing.md,
+          },
+        ]}
+      >
+        {description}
+      </AtomicText>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    marginBottom: 8,
+    borderRadius: 20,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+  },
+  heroImage: {
+    width: "100%",
+  },
+  heroImageStyle: {
+    borderRadius: 20,
+  },
+  gradient: {
+    flex: 1,
+  },
+  description: {
+    textAlign: "center",
+    lineHeight: 22,
+    paddingHorizontal: 16,
+    fontWeight: "500",
+  },
+});

package/src/presentation/components/headers/index.ts

@@ -0,0 +1 @@
+export { FeatureHeader, type FeatureHeaderProps } from "./FeatureHeader";

package/src/presentation/components/image-picker/DualImagePicker.tsx

@@ -0,0 +1,95 @@
+/**
+ * DualImagePicker Component
+ * Two-image picker for face swap, AI hug/kiss features
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ImagePickerBox, type ImagePickerBoxProps } from "./ImagePickerBox";
+
+export interface DualImagePickerProps {
+  readonly sourceImageUri: string | null;
+  readonly targetImageUri: string | null;
+  readonly isDisabled?: boolean;
+  readonly onSelectSource: () => void;
+  readonly onSelectTarget: () => void;
+  readonly sourcePlaceholder: string;
+  readonly targetPlaceholder: string;
+  readonly sourceGradient?: ImagePickerBoxProps["gradientColors"];
+  readonly targetGradient?: ImagePickerBoxProps["gradientColors"];
+  readonly variant?: ImagePickerBoxProps["variant"];
+  readonly layout?: "horizontal" | "vertical";
+}
+
+export const DualImagePicker: React.FC<DualImagePickerProps> = ({
+  sourceImageUri,
+  targetImageUri,
+  isDisabled = false,
+  onSelectSource,
+  onSelectTarget,
+  sourcePlaceholder,
+  targetPlaceholder,
+  sourceGradient = ["#667eea", "#764ba2"],
+  targetGradient = ["#f093fb", "#f5576c"],
+  variant = "portrait",
+  layout = "horizontal",
+}) => {
+  const tokens = useAppDesignTokens();
+  const isHorizontal = layout === "horizontal";
+
+  return (
+    <View
+      style={[
+        styles.container,
+        isHorizontal ? styles.horizontal : styles.vertical,
+        { gap: tokens.spacing.md },
+      ]}
+    >
+      <View style={isHorizontal ? styles.pickerHalf : styles.pickerFull}>
+        <ImagePickerBox
+          imageUri={sourceImageUri}
+          isDisabled={isDisabled}
+          onPress={onSelectSource}
+          placeholderText={sourcePlaceholder}
+          gradientColors={sourceGradient}
+          variant={variant}
+        />
+      </View>
+
+      <View style={isHorizontal ? styles.pickerHalf : styles.pickerFull}>
+        <ImagePickerBox
+          imageUri={targetImageUri}
+          isDisabled={isDisabled}
+          onPress={onSelectTarget}
+          placeholderText={targetPlaceholder}
+          gradientColors={targetGradient}
+          variant={variant}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  horizontal: {
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  vertical: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  pickerHalf: {
+    flex: 1,
+    alignItems: "center",
+  },
+  pickerFull: {
+    width: "100%",
+    alignItems: "center",
+  },
+});

package/src/presentation/components/image-picker/ImagePickerBox.tsx

@@ -0,0 +1,165 @@
+/**
+ * ImagePickerBox Component
+ * Generic image picker box with gradient design
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  type ViewStyle,
+} from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+import { LinearGradient } from "expo-linear-gradient";
+
+export interface ImagePickerBoxProps {
+  readonly imageUri: string | null;
+  readonly isDisabled?: boolean;
+  readonly onPress: () => void;
+  readonly placeholderText: string;
+  readonly gradientColors?: readonly [string, string, ...string[]];
+  readonly variant?: "portrait" | "square" | "landscape";
+  readonly size?: "sm" | "md" | "lg";
+  readonly uploadIcon?: string;
+  readonly editIcon?: string;
+}
+
+const VARIANT_STYLES: Record<string, ViewStyle> = {
+  portrait: { width: 200, height: 280, borderRadius: 20 },
+  square: { width: "100%", aspectRatio: 1, borderRadius: 24 },
+  landscape: { width: "100%", aspectRatio: 16 / 9, borderRadius: 16 },
+};
+
+const SIZE_MULTIPLIERS = { sm: 0.7, md: 1, lg: 1.3 };
+
+export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
+  imageUri,
+  isDisabled = false,
+  onPress,
+  placeholderText,
+  gradientColors = ["#667eea", "#764ba2"],
+  variant = "portrait",
+  size = "md",
+  uploadIcon = "cloud-upload-outline",
+  editIcon = "image-outline",
+}) => {
+  const tokens = useAppDesignTokens();
+  const multiplier = SIZE_MULTIPLIERS[size];
+  const baseStyle = VARIANT_STYLES[variant];
+  const iconSize = Math.round(32 * multiplier);
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={[
+          styles.box,
+          baseStyle,
+          { backgroundColor: tokens.colors.backgroundSecondary },
+        ]}
+        onPress={onPress}
+        disabled={isDisabled}
+        activeOpacity={0.8}
+      >
+        {imageUri ? (
+          <View style={styles.imageContainer}>
+            <Image source={{ uri: imageUri }} style={styles.image} />
+            <LinearGradient
+              colors={["transparent", "rgba(0,0,0,0.3)"]}
+              style={styles.imageOverlay}
+            >
+              <View
+                style={[
+                  styles.editBadge,
+                  { backgroundColor: `${gradientColors[1]}E6` },
+                ]}
+              >
+                <AtomicIcon
+                  name={editIcon}
+                  customSize={Math.round(16 * multiplier)}
+                  customColor="#FFFFFF"
+                />
+              </View>
+            </LinearGradient>
+          </View>
+        ) : (
+          <LinearGradient colors={gradientColors} style={styles.placeholder}>
+            <View style={styles.placeholderContent}>
+              <View style={styles.uploadIconContainer}>
+                <AtomicIcon
+                  name={uploadIcon}
+                  customSize={iconSize}
+                  customColor="#FFFFFF"
+                />
+              </View>
+              <AtomicText
+                type="bodyMedium"
+                style={[styles.placeholderText, { color: "#FFFFFF" }]}
+              >
+                {placeholderText}
+              </AtomicText>
+            </View>
+          </LinearGradient>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 16,
+    alignItems: "center",
+  },
+  box: {
+    overflow: "hidden",
+  },
+  imageContainer: {
+    flex: 1,
+    position: "relative",
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+  },
+  imageOverlay: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: "30%",
+    justifyContent: "flex-end",
+    alignItems: "flex-end",
+    padding: 12,
+  },
+  editBadge: {
+    borderRadius: 20,
+    padding: 8,
+  },
+  placeholder: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  placeholderContent: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 16,
+  },
+  uploadIconContainer: {
+    backgroundColor: "rgba(255,255,255,0.2)",
+    borderRadius: 40,
+    padding: 16,
+    marginBottom: 12,
+  },
+  placeholderText: {
+    textAlign: "center",
+    fontWeight: "600",
+  },
+});

package/src/presentation/components/image-picker/index.ts

@@ -0,0 +1,2 @@
+export { ImagePickerBox, type ImagePickerBoxProps } from "./ImagePickerBox";
+export { DualImagePicker, type DualImagePickerProps } from "./DualImagePicker";

package/src/presentation/components/index.ts

@@ -23,3 +23,7 @@ export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
 
 export * from "./result";
 export * from "./photo-step";
+export * from "./image-picker";
+export * from "./buttons";
+export * from "./display";
+export * from "./headers";

package/src/features/text-to-image/domain/entities.ts

@@ -1,58 +0,0 @@
-/**
- * Text-to-Image Domain Entities
- */
-
-export interface TextToImageConfig {
-    /**
-     * Width of the generated image
-     * @default 1024
-     */
-    width?: number;
-
-    /**
-     * Height of the generated image
-     * @default 1024
-     */
-    height?: number;
-
-    /**
-     * Number of inference steps
-     * @default 30
-     */
-    steps?: number;
-
-    /**
-     * Guidance scale
-     * @default 7.5
-     */
-    guidanceScale?: number;
-}
-
-export interface TextToImageRequest {
-    /**
-     * The description of the image to generate
-     */
-    prompt: string;
-
-    /**
-     * Negative prompt for what to avoid
-     */
-    negativePrompt?: string;
-
-    /**
-     * Optional configuration
-     */
-    options?: TextToImageConfig;
-}
-
-export interface TextToImageResult {
-    /**
-     * The generated image URL or Base64
-     */
-    imageUrl: string;
-
-    /**
-     * Metadata about the generation
-     */
-    metadata?: Record<string, unknown>;
-}

package/src/features/text-to-video/domain/entities.ts

@@ -1,52 +0,0 @@
-/**
- * Text to Video Domain Entities
- */
-
-export interface TextToVideoConfig {
-    /**
-     * Duration of the video in seconds
-     * @default 4
-     */
-    duration?: number;
-
-    /**
-     * FPS of the generated video
-     * @default 24
-     */
-    fps?: number;
-
-    /**
-     * Guidance scale
-     * @default 7.5
-     */
-    guidanceScale?: number;
-}
-
-export interface TextToVideoRequest {
-    /**
-     * The text prompt to generate video from
-     */
-    prompt: string;
-
-    /**
-     * Negative prompt
-     */
-    negativePrompt?: string;
-
-    /**
-     * Optional configuration
-     */
-    options?: TextToVideoConfig;
-}
-
-export interface TextToVideoResult {
-    /**
-     * The generated video URL
-     */
-    videoUrl: string;
-
-    /**
-     * Metadata about the generation
-     */
-    metadata?: Record<string, unknown>;
-}

package/src/types/jsx.d.ts

@@ -1,19 +0,0 @@
-/**
- * React 19 JSX Compatibility for React Native
- * Fixes JSX namespace issues between React 19 and react-native
- */
-
-import type { JSX as ReactJSX } from 'react';
-
-declare global {
-  namespace JSX {
-    interface Element extends ReactJSX.Element {}
-    interface ElementClass extends ReactJSX.ElementClass {}
-    interface ElementAttributesProperty extends ReactJSX.ElementAttributesProperty {}
-    interface ElementChildrenAttribute extends ReactJSX.ElementChildrenAttribute {}
-    interface IntrinsicAttributes extends ReactJSX.IntrinsicAttributes {}
-    interface IntrinsicClassAttributes<T> extends ReactJSX.IntrinsicClassAttributes<T> {}
-  }
-}
-
-export {};