@umituz/react-native-ai-generation-content 1.26.16 → 1.26.17

package/src/domains/love-message/presentation/components/ExploreHeader.tsx

@@ -1,67 +0,0 @@
-/**
- * Explore Header Component
- */
-
-import React from "react";
-import { View, Pressable, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-  useSafeAreaInsets,
-} from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-
-interface ExploreHeaderProps {
-  onMagicPress: () => void;
-}
-
-export const ExploreHeader: React.FC<ExploreHeaderProps> = ({ onMagicPress }) => {
-  const tokens = useAppDesignTokens();
-  const { top } = useSafeAreaInsets();
-  const { t } = useLocalization();
-
-  return (
-    <View style={[styles.header, { paddingTop: top + tokens.spacing.md }]}>
-      <View>
-        <AtomicText type="labelSmall" color="textTertiary" style={styles.welcomeText}>
-          {t("loveMessage.explore.welcomeBack")}
-        </AtomicText>
-        <AtomicText type="headlineSmall" color="textPrimary" style={styles.brandTitle}>
-          {t("loveMessage.explore.title")}
-        </AtomicText>
-      </View>
-      <Pressable 
-        onPress={onMagicPress}
-        style={[styles.magicBtn, { backgroundColor: `${tokens.colors.primary}20` }]}
-      >
-        <AtomicIcon name="sparkles" color="primary" size="sm" />
-      </Pressable>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingBottom: 20,
-  },
-  welcomeText: {
-    letterSpacing: 1,
-    fontWeight: 'bold',
-    marginBottom: 2,
-  },
-  brandTitle: {
-    fontWeight: '900',
-  },
-  magicBtn: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/domains/love-message/presentation/components/FieldInput.tsx

@@ -1,83 +0,0 @@
-/**
- * FieldInput Component
- */
-
-import React from "react";
-import { View, TextInput, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-
-interface FieldInputProps {
-  label: string;
-  value: string | undefined;
-  onChange: (text: string) => void;
-  placeholder: string;
-  multiline?: boolean;
-}
-
-export const FieldInput: React.FC<FieldInputProps> = ({
-  label,
-  value,
-  onChange,
-  placeholder,
-  multiline = false,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.field}>
-      <AtomicText type="labelLarge" color="textPrimary" style={styles.label}>
-        {label}
-      </AtomicText>
-      <View
-        style={[
-          styles.inputContainer,
-          multiline && styles.textAreaContainer,
-          {
-            backgroundColor: tokens.colors.surface,
-            borderColor: tokens.colors.borderLight,
-          },
-        ]}
-      >
-        <TextInput
-          value={value}
-          onChangeText={onChange}
-          placeholder={placeholder}
-          placeholderTextColor={tokens.colors.textTertiary}
-          multiline={multiline}
-          numberOfLines={multiline ? 4 : 1}
-          style={[styles.input, { color: tokens.colors.textPrimary }]}
-          selectionColor={tokens.colors.primary}
-          textAlignVertical={multiline ? "top" : "center"}
-        />
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  field: {
-    marginBottom: 24,
-  },
-  label: {
-    marginBottom: 10,
-    marginLeft: 4,
-  },
-  inputContainer: {
-    borderRadius: 16,
-    borderWidth: 1.5,
-    paddingHorizontal: 16,
-    height: 56,
-    justifyContent: "center",
-  },
-  textAreaContainer: {
-    height: 120,
-    paddingVertical: 12,
-  },
-  input: {
-    fontSize: 16,
-    padding: 0,
-  },
-});

package/src/domains/love-message/presentation/components/GeneratorHeader.tsx

@@ -1,88 +0,0 @@
-/**
- * Generator Header Component
- */
-
-import React from "react";
-import { View, Pressable, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useSafeAreaInsets,
-} from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-
-interface GeneratorHeaderProps {
-  currentStep: number;
-  partnerName: string;
-  onBack: () => void;
-  onNext: () => void;
-  onGenerate: () => void;
-  isGenerating: boolean;
-}
-
-export const GeneratorHeader: React.FC<GeneratorHeaderProps> = ({
-  currentStep,
-  partnerName,
-  onBack,
-  onNext,
-  onGenerate,
-  isGenerating,
-}) => {
-  const { top } = useSafeAreaInsets();
-  const { t } = useLocalization();
-
-  const isResultStep = currentStep === 3;
-  const isDetailsStep = currentStep === 2;
-  const isPartnerStep = currentStep === 0;
-
-  return (
-    <View style={[styles.header, { paddingTop: top + 10 }]}>
-      <Pressable onPress={onBack} style={styles.backBtn}>
-        <AtomicIcon name="arrow-back" color="textPrimary" size="sm" />
-      </Pressable>
-      
-      <AtomicText type="labelLarge" color="textPrimary" style={styles.headerTitle}>
-        AI Generator
-      </AtomicText>
-
-      {!isResultStep ? (
-        <Pressable 
-          onPress={isDetailsStep ? onGenerate : onNext}
-          disabled={(isPartnerStep && !partnerName.trim()) || isGenerating}
-          style={styles.headerActionBtn}
-        >
-          <AtomicText 
-            type="labelMedium" 
-            color={(isPartnerStep && !partnerName.trim()) ? "textTertiary" : "primary"}
-            style={{ fontWeight: 'bold' }}
-          >
-            {isDetailsStep ? t("loveMessage.generate") : t("common.continue") || "Continue"}
-          </AtomicText>
-        </Pressable>
-      ) : (
-        <View style={{ width: 44 }} />
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    paddingBottom: 10,
-  },
-  backBtn: {
-    padding: 10,
-  },
-  headerTitle: {
-    fontWeight: "800",
-  },
-  headerActionBtn: {
-    padding: 10,
-    minWidth: 44,
-    alignItems: 'flex-end',
-  },
-});

package/src/domains/love-message/presentation/components/LoveMessageHeroSection.tsx

@@ -1,114 +0,0 @@
-/**
- * Hero Section Component
- */
-
-import React from "react";
-import { View, Pressable, ImageBackground, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-
-export const LoveMessageHeroSection: React.FC = () => {
-  const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-
-  return (
-    <View style={styles.heroSection}>
-      <ImageBackground
-        source={{ uri: 'https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?q=80&w=600&auto=format&fit=crop' }}
-        style={styles.heroImage}
-        imageStyle={styles.heroImageBorder}
-      >
-        <View style={styles.heroOverlay}>
-          <View style={[styles.glassCard, { backgroundColor: `${tokens.colors.surface}B0` }]}>
-            <View style={styles.quoteHeader}>
-              <AtomicText type="labelSmall" color="primary" style={styles.quoteTag}>
-                {t("loveMessage.explore.heroTag")}
-              </AtomicText>
-              <AtomicIcon name="chatbubble-outline" color="primary" size="xs" />
-            </View>
-            <AtomicText type="bodyMedium" color="textPrimary" style={styles.quoteText}>
-              {`"Love is not about how many days, months, or years you have been together, but about how much you love each other every single day."`}
-            </AtomicText>
-            <View style={styles.heroActions}>
-              <Pressable style={[styles.shareBtn, { backgroundColor: tokens.colors.primary }]}>
-                <AtomicIcon name="share-social-outline" color="onPrimary" size="xs" />
-                <AtomicText type="labelSmall" color="onPrimary" style={styles.shareText}>
-                  {t("loveMessage.explore.shareNow")}
-                </AtomicText>
-              </Pressable>
-              <Pressable style={[styles.favBtn, { backgroundColor: `${tokens.colors.textPrimary}15` }]}>
-                <AtomicIcon name="heart-outline" color="textPrimary" size="xs" />
-              </Pressable>
-            </View>
-          </View>
-        </View>
-      </ImageBackground>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  heroSection: {
-    paddingHorizontal: 16,
-    marginBottom: 32,
-  },
-  heroImage: {
-    width: '100%',
-    height: 300,
-    justifyContent: 'flex-end',
-  },
-  heroImageBorder: {
-    borderRadius: 24,
-  },
-  heroOverlay: {
-    padding: 12,
-  },
-  glassCard: {
-    borderRadius: 20,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.1)',
-  },
-  quoteHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  quoteTag: {
-    fontWeight: 'bold',
-    letterSpacing: 1,
-  },
-  quoteText: {
-    fontStyle: 'italic',
-    lineHeight: 22,
-    marginBottom: 16,
-  },
-  heroActions: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-  shareBtn: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 40,
-    borderRadius: 20,
-    gap: 8,
-  },
-  shareText: {
-    fontWeight: 'bold',
-  },
-  favBtn: {
-    width: 44,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/domains/love-message/presentation/components/MessageListItem.tsx

@@ -1,77 +0,0 @@
-/**
- * Message List Item Component
- */
-
-import React from "react";
-import { View, Pressable, ImageBackground, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicButton,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-import type { TemplateMessage } from "../../domain/constants";
-
-interface MessageListItemProps {
-  item: TemplateMessage;
-  onShare: (text: string) => void;
-}
-
-export const MessageListItem: React.FC<MessageListItemProps> = ({ item, onShare }) => {
-  const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-
-  return (
-    <View style={[styles.card, { backgroundColor: tokens.colors.surface, borderColor: tokens.colors.borderLight }]}>
-      {item.imageUrl && (
-        <ImageBackground 
-          source={{ uri: item.imageUrl }} 
-          style={styles.cardImage}
-          imageStyle={{ borderTopLeftRadius: 16, borderTopRightRadius: 16 }}
-        />
-      )}
-      <View style={styles.cardContent}>
-        <AtomicText type="bodyLarge" color="textPrimary" style={styles.messageText}>
-          {`"${item.text}"`}
-        </AtomicText>
-        
-        <View style={[styles.cardFooter, { borderTopColor: tokens.colors.borderLight }]}>
-          <View style={styles.actionRow}>
-            <Pressable style={[styles.iconBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-              <AtomicIcon name="copy-outline" color="textSecondary" size="xs" />
-            </Pressable>
-            <Pressable 
-              onPress={() => onShare(item.text)}
-              style={[styles.iconBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
-            >
-              <AtomicIcon name="share-social-outline" color="textSecondary" size="xs" />
-            </Pressable>
-            <Pressable style={[styles.iconBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-              <AtomicIcon name="heart-outline" color="textSecondary" size="xs" />
-            </Pressable>
-          </View>
-          
-          <AtomicButton
-            title={t("loveMessage.generator.sendNow")}
-            onPress={() => {}}
-            variant="primary"
-            size="sm"
-            style={styles.sendBtn}
-          />
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  card: { borderRadius: 16, borderWidth: 1, marginBottom: 20, overflow: 'hidden' },
-  cardImage: { width: '100%', height: 180 },
-  cardContent: { padding: 20 },
-  messageText: { fontStyle: 'italic', lineHeight: 24, marginBottom: 20 },
-  cardFooter: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 16, borderTopWidth: 1 },
-  actionRow: { flexDirection: 'row', gap: 8 },
-  iconBtn: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
-  sendBtn: { minWidth: 100, height: 36, borderRadius: 18 },
-});

package/src/domains/love-message/presentation/components/MessageResult.tsx

@@ -1,105 +0,0 @@
-/**
- * Generated Message Result Component
- */
-
-import type { FC } from "react";
-import { View, StyleSheet, Share } from "react-native";
-import {
-  AtomicText,
-  AtomicButton,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-
-interface MessageResultProps {
-  message: string;
-}
-
-export const MessageResult: FC<MessageResultProps> = ({ message }) => {
-  const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-
-  if (!message) return null;
-
-  const handleShare = async () => {
-    try {
-      await Share.share({
-        message: message,
-      });
-    } catch {
-      // Handle error if needed
-    }
-  };
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: tokens.colors.surface,
-          borderColor: tokens.colors.primary,
-        },
-      ]}
-    >
-      <View style={styles.header}>
-        <View style={styles.titleRow}>
-          <AtomicIcon name="sparkles" color="primary" size="sm" />
-          <AtomicText type="labelLarge" color="primary" style={styles.title}>
-            {t("loveMessage.yourMessage")}
-          </AtomicText>
-        </View>
-        <AtomicButton
-          icon="share-social-outline"
-          onPress={handleShare}
-          variant="text"
-          size="sm"
-        />
-      </View>
-      <View
-        style={[styles.divider, { backgroundColor: tokens.colors.borderLight }]}
-      />
-      <AtomicText
-        type="bodyLarge"
-        color="textPrimary"
-        style={styles.messageText}
-      >
-        {message}
-      </AtomicText>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 32,
-    borderRadius: 24,
-    padding: 24,
-    borderWidth: 2,
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 16,
-  },
-  titleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  title: {
-    marginLeft: 8,
-    fontWeight: "bold",
-    letterSpacing: 0.5,
-  },
-  divider: {
-    height: 1,
-    marginBottom: 20,
-    opacity: 0.5,
-  },
-  messageText: {
-    lineHeight: 26,
-    fontStyle: "italic",
-    textAlign: "center",
-  },
-});

package/src/domains/love-message/presentation/components/PartnerInput.tsx

@@ -1,78 +0,0 @@
-/**
- * Partner Name Input Component
- * Updated with Icon support to match premium design
- */
-
-import type { FC } from "react";
-import { View, TextInput, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-
-interface PartnerInputProps {
-  value: string;
-  onChangeText: (text: string) => void;
-}
-
-export const PartnerInput: FC<PartnerInputProps> = ({
-  value,
-  onChangeText,
-}) => {
-  const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-
-  return (
-    <View style={styles.container}>
-      <AtomicText
-        type="labelSmall"
-        color="textTertiary"
-        style={styles.label}
-      >
-        {t("loveMessage.partnerName").toUpperCase()}
-      </AtomicText>
-      <View style={[styles.inputWrapper, { 
-        backgroundColor: tokens.colors.surfaceSecondary,
-      }]}>
-        <AtomicIcon name="heart" color="primary" size="sm" style={styles.icon} />
-        <TextInput
-          value={value}
-          onChangeText={onChangeText}
-          placeholder={t("loveMessage.partnerNamePlaceholder")}
-          placeholderTextColor={tokens.colors.textTertiary}
-          style={[styles.input, { color: tokens.colors.textPrimary }]}
-          selectionColor={tokens.colors.primary}
-        />
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 24,
-  },
-  label: {
-    marginBottom: 8,
-    marginLeft: 4,
-    fontWeight: 'bold',
-    letterSpacing: 1,
-  },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 16,
-    paddingHorizontal: 16,
-    height: 56,
-  },
-  icon: {
-    marginRight: 12,
-  },
-  input: {
-    flex: 1,
-    fontSize: 16,
-    padding: 0,
-  },
-});

package/src/domains/love-message/presentation/components/ProgressDots.tsx

@@ -1,48 +0,0 @@
-/**
- * Step Progress Indicator
- * Simple and premium dot-based progress
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-interface ProgressDotsProps {
-  currentStep: number;
-  totalSteps: number;
-}
-
-export const ProgressDots: React.FC<ProgressDotsProps> = ({ currentStep, totalSteps }) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.container}>
-      {Array.from({ length: totalSteps }).map((_, index) => (
-        <View
-          key={index}
-          style={[
-            styles.dot,
-            { 
-              backgroundColor: index <= currentStep ? tokens.colors.primary : tokens.colors.surfaceSecondary,
-              width: index === currentStep ? 24 : 8,
-              opacity: index <= currentStep ? 1 : 0.5
-            }
-          ]}
-        />
-      ))}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 6,
-    marginBottom: 24,
-  },
-  dot: {
-    height: 8,
-    borderRadius: 4,
-  },
-});

package/src/domains/love-message/presentation/components/StepDetails.tsx

@@ -1,23 +0,0 @@
-/**
- * StepDetails Component
- */
-
-import React from "react";
-import { View } from "react-native";
-import { DetailsInput } from "./DetailsInput";
-
-interface StepDetailsProps {
-  details: string;
-  setDetails: (text: string) => void;
-}
-
-export const StepDetails: React.FC<StepDetailsProps> = ({
-  details,
-  setDetails,
-}) => {
-  return (
-    <View>
-      <DetailsInput value={details} onChangeText={setDetails} />
-    </View>
-  );
-};