@umituz/react-native-ai-generation-content 1.17.46 → 1.17.48

package/src/features/text-to-image/presentation/components/AspectRatioSelector.tsx

@@ -1,98 +0,0 @@
-/**
- * Aspect Ratio Selector Component
- * Button group for selecting image aspect ratio
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { AspectRatio } from "../../domain/types/form.types";
-
-export interface AspectRatioOption {
-  value: AspectRatio;
-  label: string;
-}
-
-export interface AspectRatioSelectorProps {
-  value: AspectRatio;
-  onChange: (ratio: AspectRatio) => void;
-  options: AspectRatioOption[];
-  label: string;
-}
-
-export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
-  value,
-  onChange,
-  options,
-  label,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.container}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {label}
-      </AtomicText>
-      <View style={styles.optionsRow}>
-        {options.map((option) => {
-          const isSelected = value === option.value;
-          return (
-            <TouchableOpacity
-              key={option.value}
-              style={[
-                styles.option,
-                {
-                  backgroundColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                  borderColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-                },
-              ]}
-              onPress={() => onChange(option.value)}
-              activeOpacity={0.7}
-            >
-              <AtomicText
-                type="bodySmall"
-                style={{
-                  color: isSelected ? "#FFFFFF" : tokens.colors.textPrimary,
-                  fontWeight: isSelected ? "600" : "400",
-                }}
-              >
-                {option.label}
-              </AtomicText>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 20,
-  },
-  label: {
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  optionsRow: {
-    flexDirection: "row",
-    gap: 8,
-  },
-  option: {
-    flex: 1,
-    padding: 12,
-    borderRadius: 8,
-    borderWidth: 1,
-    alignItems: "center",
-  },
-});

package/src/features/text-to-image/presentation/components/ExamplePrompts.tsx

@@ -1,88 +0,0 @@
-/**
- * Example Prompts Component
- * Horizontal scrollable list of example prompts
- */
-
-import React from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-
-export interface ExamplePromptsProps {
-  prompts: string[];
-  onSelectPrompt: (prompt: string) => void;
-  label: string;
-  cardWidth?: number;
-}
-
-export const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
-  prompts,
-  onSelectPrompt,
-  label,
-  cardWidth = 180,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  if (prompts.length === 0) {
-    return null;
-  }
-
-  return (
-    <View style={styles.container}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {label}
-      </AtomicText>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.scrollContent}
-      >
-        {prompts.map((prompt, index) => (
-          <TouchableOpacity
-            key={`prompt-${index}`}
-            style={[
-              styles.card,
-              {
-                backgroundColor: tokens.colors.surface,
-                width: cardWidth,
-              },
-            ]}
-            onPress={() => onSelectPrompt(prompt)}
-            activeOpacity={0.7}
-          >
-            <AtomicText
-              type="bodySmall"
-              style={{ color: tokens.colors.textPrimary }}
-              numberOfLines={2}
-            >
-              {prompt}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 24,
-  },
-  label: {
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  scrollContent: {
-    paddingRight: 16,
-  },
-  card: {
-    padding: 12,
-    borderRadius: 8,
-    marginRight: 12,
-  },
-});

package/src/features/text-to-image/presentation/components/ImageSizeSelector.tsx

@@ -1,98 +0,0 @@
-/**
- * Image Size Selector Component
- * Selection for image output size
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { ImageSize } from "../../domain/types/form.types";
-
-export interface ImageSizeOption {
-  value: ImageSize;
-  label: string;
-}
-
-export interface ImageSizeSelectorProps {
-  value: ImageSize;
-  onChange: (size: ImageSize) => void;
-  options: ImageSizeOption[];
-  label: string;
-}
-
-export const ImageSizeSelector: React.FC<ImageSizeSelectorProps> = ({
-  value,
-  onChange,
-  options,
-  label,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.container}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {label}
-      </AtomicText>
-      <View style={styles.optionsGrid}>
-        {options.map((option) => {
-          const isSelected = value === option.value;
-          return (
-            <TouchableOpacity
-              key={option.value}
-              style={[
-                styles.option,
-                {
-                  backgroundColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                  borderColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-                },
-              ]}
-              onPress={() => onChange(option.value)}
-              activeOpacity={0.7}
-            >
-              <AtomicText
-                type="bodySmall"
-                style={{
-                  color: isSelected ? "#FFFFFF" : tokens.colors.textPrimary,
-                  fontWeight: isSelected ? "600" : "400",
-                }}
-              >
-                {option.label}
-              </AtomicText>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 20,
-  },
-  label: {
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  optionsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-  },
-  option: {
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    borderWidth: 1,
-  },
-});

package/src/features/text-to-image/presentation/components/NumImagesSelector.tsx

@@ -1,93 +0,0 @@
-/**
- * Number of Images Selector Component
- * Grid of buttons to select number of images to generate
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { NumImages } from "../../domain/types/form.types";
-
-export interface NumImagesSelectorProps {
-  value: NumImages;
-  onChange: (num: NumImages) => void;
-  options: NumImages[];
-  label: string;
-}
-
-export const NumImagesSelector: React.FC<NumImagesSelectorProps> = ({
-  value,
-  onChange,
-  options,
-  label,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.container}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {label}
-      </AtomicText>
-      <View style={styles.grid}>
-        {options.map((num) => {
-          const isSelected = value === num;
-          return (
-            <TouchableOpacity
-              key={num}
-              style={[
-                styles.button,
-                {
-                  backgroundColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                  borderColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-                },
-              ]}
-              onPress={() => onChange(num)}
-              activeOpacity={0.7}
-            >
-              <AtomicText
-                type="bodyLarge"
-                style={{
-                  color: isSelected ? "#FFFFFF" : tokens.colors.textPrimary,
-                  fontWeight: isSelected ? "700" : "400",
-                }}
-              >
-                {num}
-              </AtomicText>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 24,
-  },
-  label: {
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  grid: {
-    flexDirection: "row",
-    gap: 12,
-  },
-  button: {
-    flex: 1,
-    padding: 16,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: "center",
-  },
-});

package/src/features/text-to-image/presentation/components/OutputFormatSelector.tsx

@@ -1,98 +0,0 @@
-/**
- * Output Format Selector Component
- * Selection for image output format
- */
-
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { OutputFormat } from "../../domain/types/form.types";
-
-export interface OutputFormatOption {
-  value: OutputFormat;
-  label: string;
-}
-
-export interface OutputFormatSelectorProps {
-  value: OutputFormat;
-  onChange: (format: OutputFormat) => void;
-  options: OutputFormatOption[];
-  label: string;
-}
-
-export const OutputFormatSelector: React.FC<OutputFormatSelectorProps> = ({
-  value,
-  onChange,
-  options,
-  label,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.container}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {label}
-      </AtomicText>
-      <View style={styles.optionsRow}>
-        {options.map((option) => {
-          const isSelected = value === option.value;
-          return (
-            <TouchableOpacity
-              key={option.value}
-              style={[
-                styles.option,
-                {
-                  backgroundColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                  borderColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-                },
-              ]}
-              onPress={() => onChange(option.value)}
-              activeOpacity={0.7}
-            >
-              <AtomicText
-                type="bodyMedium"
-                style={{
-                  color: isSelected ? "#FFFFFF" : tokens.colors.textPrimary,
-                  fontWeight: isSelected ? "600" : "400",
-                }}
-              >
-                {option.label}
-              </AtomicText>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 20,
-  },
-  label: {
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  optionsRow: {
-    flexDirection: "row",
-    gap: 12,
-  },
-  option: {
-    flex: 1,
-    padding: 14,
-    borderRadius: 8,
-    borderWidth: 1,
-    alignItems: "center",
-  },
-});

package/src/features/text-to-image/presentation/components/StyleSelector.tsx

@@ -1,110 +0,0 @@
-/**
- * Style Selector Component
- * Horizontal scrollable list of style options
- */
-
-import React from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import type { StyleOption } from "../../domain/types/form.types";
-
-export interface StyleSelectorProps {
-  options: StyleOption[];
-  value: string;
-  onChange: (styleId: string) => void;
-  label: string;
-}
-
-export const StyleSelector: React.FC<StyleSelectorProps> = ({
-  options,
-  value,
-  onChange,
-  label,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.container}>
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
-      >
-        {label}
-      </AtomicText>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.scrollContent}
-      >
-        {options.map((style) => {
-          const isSelected = value === style.id;
-          return (
-            <TouchableOpacity
-              key={style.id}
-              style={[
-                styles.card,
-                {
-                  backgroundColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                  borderColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-                },
-              ]}
-              onPress={() => onChange(style.id)}
-              activeOpacity={0.7}
-            >
-              <AtomicText
-                type="bodyMedium"
-                style={{
-                  color: isSelected ? "#FFFFFF" : tokens.colors.textPrimary,
-                  fontWeight: isSelected ? "600" : "400",
-                }}
-              >
-                {style.name}
-              </AtomicText>
-              {style.description && (
-                <AtomicText
-                  type="labelSmall"
-                  style={{
-                    color: isSelected
-                      ? "rgba(255,255,255,0.8)"
-                      : tokens.colors.textSecondary,
-                    marginTop: 4,
-                  }}
-                  numberOfLines={1}
-                >
-                  {style.description}
-                </AtomicText>
-              )}
-            </TouchableOpacity>
-          );
-        })}
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 24,
-  },
-  label: {
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  scrollContent: {
-    paddingRight: 16,
-  },
-  card: {
-    padding: 12,
-    borderRadius: 12,
-    borderWidth: 2,
-    marginRight: 12,
-    minWidth: 100,
-  },
-});

package/src/features/text-to-image/presentation/components/TextToImageGenerateButton.tsx

@@ -1,84 +0,0 @@
-/**
- * Text-to-Image Generate Button Component
- * Button to trigger image generation with cost display
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicButton,
-  AtomicIcon,
-} from "@umituz/react-native-design-system";
-
-export interface TextToImageGenerateButtonProps {
-  onPress: () => void;
-  onSettingsPress?: () => void;
-  disabled: boolean;
-  label: string;
-  costLabel?: string;
-  showSettings?: boolean;
-}
-
-export const TextToImageGenerateButton: React.FC<TextToImageGenerateButtonProps> = ({
-  onPress,
-  onSettingsPress,
-  disabled,
-  label,
-  costLabel,
-  showSettings = true,
-}) => {
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonRow}>
-        <AtomicButton
-          onPress={onPress}
-          disabled={disabled}
-          variant="primary"
-          size="md"
-          style={styles.generateButton}
-        >
-          <AtomicText type="bodyLarge" style={styles.buttonText}>
-            {label}
-            {costLabel && ` (${costLabel})`}
-          </AtomicText>
-        </AtomicButton>
-
-        {showSettings && onSettingsPress && (
-          <AtomicButton
-            onPress={onSettingsPress}
-            variant="secondary"
-            size="md"
-            style={styles.settingsButton}
-          >
-            <AtomicIcon name="settings-outline" size="md" color="primary" />
-          </AtomicButton>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 24,
-  },
-  buttonRow: {
-    flexDirection: "row",
-    gap: 12,
-  },
-  generateButton: {
-    flex: 1,
-    paddingVertical: 16,
-  },
-  buttonText: {
-    color: "#FFFFFF",
-    fontWeight: "600",
-  },
-  settingsButton: {
-    width: 56,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});