@umituz/react-native-ai-generation-content 1.17.252 → 1.17.254

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

@@ -0,0 +1,83 @@
+/**
+ * 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/features/love-message/presentation/components/GeneratorHeader.tsx

@@ -0,0 +1,90 @@
+/**
+ * Generator 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 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 tokens = useAppDesignTokens();
+  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/features/love-message/presentation/components/LoveMessageHeroSection.tsx

@@ -0,0 +1,114 @@
+/**
+ * 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 HeroSection: 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="quote-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/features/love-message/presentation/components/MessageListItem.tsx

@@ -0,0 +1,76 @@
+/**
+ * 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";
+
+interface MessageListItemProps {
+  item: any;
+  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/features/love-message/presentation/components/MessageResult.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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/features/love-message/presentation/components/PartnerInput.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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/features/love-message/presentation/components/ProgressDots.tsx

@@ -0,0 +1,48 @@
+/**
+ * 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/features/love-message/presentation/components/StepDetails.tsx

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