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

package/src/features/love-message/presentation/screens/LoveMessageExploreScreen.tsx

@@ -0,0 +1,89 @@
+/**
+ * Love Message Explore Screen
+ * Premium entry point for Love Message domain
+ */
+
+import { FC, useCallback } from "react";
+import { View, ScrollView, StyleSheet, Pressable } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  useSafeAreaInsets,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useNavigation } from "@react-navigation/native";
+import { ExploreHeader } from "../components/ExploreHeader";
+import { HeroSection } from "../components/HeroSection";
+import { CategoryGrid } from "../components/CategoryGrid";
+import { TrendingSection } from "../components/TrendingSection";
+
+interface LoveMessageExploreScreenProps {
+  onNavigateToGenerator: () => void;
+  onNavigateToCategory: (categoryId: string) => void;
+  onNavigateToTrending: () => void;
+}
+
+export const LoveMessageExploreScreen: FC<LoveMessageExploreScreenProps> = ({
+  onNavigateToGenerator,
+  onNavigateToCategory,
+  onNavigateToTrending,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { bottom } = useSafeAreaInsets();
+  const { t } = useLocalization();
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <ExploreHeader onMagicPress={onNavigateToGenerator} />
+
+      <ScrollView 
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: bottom + 100 }}
+      >
+        <HeroSection />
+        
+        <CategoryGrid 
+          onCategoryPress={onNavigateToCategory} 
+        />
+
+        <TrendingSection 
+          onViewAll={onNavigateToTrending} 
+        />
+      </ScrollView>
+
+      {/* Floating Action Button */}
+      <View style={[styles.fabContainer, { bottom: bottom + tokens.spacing.lg }]}>
+        <Pressable 
+          onPress={onNavigateToGenerator}
+          style={[styles.fab, { backgroundColor: tokens.colors.primary }]}
+        >
+          <AtomicIcon name="sparkles" color="onPrimary" size="sm" />
+          <AtomicText type="labelLarge" color="onPrimary" style={styles.fabText}>
+            {t("loveMessage.explore.generateMagic")}
+          </AtomicText>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  fabContainer: {
+    position: 'absolute',
+    left: 20,
+    right: 20,
+    alignItems: 'center',
+  },
+  fab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 18,
+    paddingHorizontal: 32,
+    borderRadius: 32,
+    gap: 12,
+  },
+  fabText: { fontWeight: 'bold', letterSpacing: 1 },
+});

package/src/features/love-message/presentation/screens/LoveMessageGeneratorScreen.tsx

@@ -0,0 +1,128 @@
+/**
+ * Love Message Generator Screen
+ * Optimized multi-step wizard flow
+ */
+
+import { FC, useMemo } from "react";
+import { View, ScrollView, StyleSheet, Animated } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  useAppDesignTokens,
+  useSafeAreaInsets,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useNavigation } from "@react-navigation/native";
+import { ProgressDots } from "../components/ProgressDots";
+import { MessageResult } from "../components/MessageResult";
+import { GeneratorHeader } from "../components/GeneratorHeader";
+import { StepPartner } from "../components/StepPartner";
+import { StepVibe } from "../components/StepVibe";
+import { StepDetails } from "../components/StepDetails";
+import { useLoveMessageGenerator, GeneratorStep } from "../hooks/useLoveMessageGenerator";
+
+interface LoveMessageGeneratorScreenProps {
+  onBack: () => void;
+  onNavigateToProfile: () => void;
+  initialType?: MessageType;
+}
+
+export const LoveMessageGeneratorScreen: FC<LoveMessageGeneratorScreenProps> = ({
+  onBack,
+  onNavigateToProfile,
+  initialType,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { bottom } = useSafeAreaInsets();
+  const { t } = useLocalization();
+  const gen = useLoveMessageGenerator({ onBack, initialType });
+
+  const stepTitle = useMemo(() => {
+    switch (gen.currentStep) {
+      case GeneratorStep.PARTNER: return t("loveMessage.generator.stepPartner");
+      case GeneratorStep.VIBE: return t("loveMessage.generator.stepVibe");
+      case GeneratorStep.DETAILS: return t("loveMessage.generator.stepDetails");
+      case GeneratorStep.RESULT: return t("loveMessage.generator.stepResult");
+      default: return "";
+    }
+  }, [gen.currentStep, t]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <GeneratorHeader 
+        currentStep={gen.currentStep}
+        partnerName={gen.partnerName}
+        onBack={gen.handleBack}
+        onNext={gen.handleNext}
+        onGenerate={gen.handleGenerate}
+        isGenerating={gen.isGenerating}
+      />
+
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: bottom + 120 }}>
+        <View style={styles.heroSection}>
+          <ProgressDots currentStep={gen.currentStep} totalSteps={4} />
+          <AtomicText type="headlineLarge" color="textPrimary" style={styles.heroTitle}>
+            {stepTitle}
+          </AtomicText>
+        </View>
+
+        <View style={styles.formContent}>
+          {gen.currentStep === GeneratorStep.PARTNER && (
+            <Animated.View>
+              <StepPartner 
+                partnerName={gen.partnerName}
+                setPartnerName={gen.setPartnerName}
+                useProfile={gen.useProfile}
+                setUseProfile={gen.setUseProfile}
+                hasProfile={gen.hasProfile}
+                onEditProfile={onNavigateToProfile}
+              />
+            </Animated.View>
+          )}
+
+          {gen.currentStep === GeneratorStep.VIBE && (
+            <Animated.View>
+              <StepVibe 
+                selectedType={gen.selectedType}
+                setSelectedType={gen.setSelectedType}
+                selectedTone={gen.selectedTone}
+                setSelectedTone={gen.setSelectedTone}
+              />
+            </Animated.View>
+          )}
+
+          {gen.currentStep === GeneratorStep.DETAILS && (
+            <Animated.View>
+              <StepDetails details={gen.details} setDetails={gen.setDetails} />
+            </Animated.View>
+          )}
+
+          {gen.currentStep === GeneratorStep.RESULT && (
+            <MessageResult message={gen.generatedMessage} />
+          )}
+        </View>
+      </ScrollView>
+
+      {gen.currentStep === GeneratorStep.RESULT && (
+        <View style={[styles.footer, { paddingBottom: bottom + 24 }]}>
+          <AtomicButton
+            title={t("loveMessage.generator.startOver")}
+            onPress={gen.startOver}
+            variant="outline"
+            fullWidth
+            style={styles.actionBtn}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  heroSection: { paddingVertical: 32, alignItems: 'center' },
+  heroTitle: { fontWeight: 'bold', textAlign: 'center', marginBottom: 8, paddingHorizontal: 20 },
+  formContent: { paddingHorizontal: 20 },
+  footer: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 24, backgroundColor: 'transparent' },
+  actionBtn: { height: 60, borderRadius: 30 },
+});

package/src/features/love-message/presentation/screens/MessageListScreen.tsx

@@ -0,0 +1,99 @@
+/**
+ * Message List Screen
+ */
+
+import { FC, useCallback, useMemo } from "react";
+import { View, ScrollView, StyleSheet, Pressable, Share } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  useSafeAreaInsets,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useNavigation, useRoute } from "@react-navigation/native";
+import { CATEGORY_TEMPLATES, MESSAGE_TYPES } from "../../domain/constants";
+import { MessageListItem } from "../components/MessageListItem";
+
+interface MessageListScreenProps {
+  categoryId: string;
+  onBack: () => void;
+  onNavigateToGenerator: (initialType?: string) => void;
+}
+
+export const MessageListScreen: FC<MessageListScreenProps> = ({
+  categoryId,
+  onBack,
+  onNavigateToGenerator,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { top, bottom } = useSafeAreaInsets();
+  const { t } = useLocalization();
+
+  const messages = useMemo(() => CATEGORY_TEMPLATES[categoryId] || [], [categoryId]);
+
+  const categoryTitle = useMemo(() => {
+    if (categoryId === "trending") return t("loveMessage.explore.trending");
+    const config = MESSAGE_TYPES.find(c => c.type === categoryId);
+    return config ? t(config.labelKey) : categoryId;
+  }, [categoryId, t]);
+
+  const handleShare = useCallback(async (text: string) => {
+    try {
+      await Share.share({ message: text });
+    } catch { /* Ignore */ }
+  }, []);
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <View style={[styles.header, { paddingTop: top + tokens.spacing.md }]}>
+        <Pressable onPress={onBack} style={styles.backBtn}>
+          <AtomicIcon name="arrow-back" color="textPrimary" size="sm" />
+        </Pressable>
+        <AtomicText type="headlineSmall" color="textPrimary" style={styles.headerTitle}>
+          {categoryTitle}
+        </AtomicText>
+        <View style={{ width: 44 }} />
+      </View>
+
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: bottom + 100, paddingHorizontal: 16 }}>
+        <View style={styles.headlineContainer}>
+          <AtomicText type="headlineMedium" color="textPrimary" style={styles.headline}>
+            {`${messages.length} messages`}
+          </AtomicText>
+          <AtomicText type="bodySmall" color="textTertiary">
+            AI-crafted for your special moments
+          </AtomicText>
+        </View>
+
+        {messages.map((item) => (
+          <MessageListItem key={item.id} item={item} onShare={handleShare} />
+        ))}
+      </ScrollView>
+
+      <View style={[styles.fabContainer, { bottom: bottom + tokens.spacing.lg }]}>
+        <Pressable 
+          onPress={() => onNavigateToGenerator(categoryId !== "trending" ? categoryId : undefined)}
+          style={[styles.fab, { backgroundColor: tokens.colors.primary }]}
+        >
+          <AtomicIcon name="sparkles" color="onPrimary" size="sm" />
+          <AtomicText type="labelLarge" color="onPrimary" style={styles.fabText}>
+            GENERATE MORE
+          </AtomicText>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 8, paddingBottom: 16 },
+  backBtn: { padding: 12 },
+  headerTitle: { fontWeight: 'bold' },
+  headlineContainer: { paddingVertical: 24 },
+  headline: { fontWeight: 'bold', marginBottom: 4 },
+  fabContainer: { position: "absolute", left: 20, right: 20, alignItems: "center" },
+  fab: { flexDirection: "row", alignItems: "center", justifyContent: "center", paddingVertical: 16, paddingHorizontal: 24, borderRadius: 32, gap: 12 },
+  fabText: { fontWeight: "bold", letterSpacing: 1 },
+});

package/src/features/love-message/presentation/screens/PartnerProfileScreen.tsx

@@ -0,0 +1,100 @@
+/**
+ * Partner Profile Screen
+ * Optimized version with hooks and components
+ */
+
+import { FC } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  useAppDesignTokens,
+  useSafeAreaInsets,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { LOVE_LANGUAGES } from "../../domain/constants";
+import { usePartnerProfile } from "../hooks/usePartnerProfile";
+import { FieldInput } from "../components/FieldInput";
+
+export const PartnerProfileScreen: FC = () => {
+  const tokens = useAppDesignTokens();
+  const { top, bottom } = useSafeAreaInsets();
+  const { t } = useLocalization();
+  const p = usePartnerProfile();
+
+  if (p.isLoading) return null;
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <View style={[styles.header, { paddingTop: top + tokens.spacing.md }]}>
+        <AtomicButton icon="arrow-back" onPress={() => p.navigation.goBack()} variant="text" size="sm" />
+        <View style={styles.headerTitle}>
+          <AtomicText type="headlineSmall" color="textPrimary" style={styles.headerText}>
+            {t("loveMessage.partnerProfile.title")}
+          </AtomicText>
+        </View>
+      </View>
+
+      <ScrollView 
+        contentContainerStyle={{ paddingBottom: bottom + tokens.spacing.xl, paddingHorizontal: tokens.spacing.lg }}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>
+          {t("loveMessage.partnerProfile.subtitle")}
+        </AtomicText>
+
+        <FieldInput 
+          label={t("loveMessage.partnerName")} value={p.profile.name} 
+          onChange={(text) => p.setProfile((prev) => ({ ...prev, name: text }))} 
+          placeholder={t("loveMessage.partnerNamePlaceholder")}
+        />
+
+        <View style={styles.field}>
+          <AtomicText type="labelLarge" color="textPrimary" style={styles.label}>
+            {t("loveMessage.partnerProfile.loveLanguage")}
+          </AtomicText>
+          <View style={styles.chipContainer}>
+            {LOVE_LANGUAGES.map((lang) => (
+              <AtomicButton
+                key={lang.language} title={t(lang.labelKey)}
+                onPress={() => p.setProfile((prev) => ({ ...prev, loveLanguage: lang.language }))}
+                variant={p.profile.loveLanguage === lang.language ? "primary" : "outline"}
+                size="sm" style={styles.chip}
+              />
+            ))}
+          </View>
+        </View>
+
+        <FieldInput 
+          label={t("loveMessage.partnerProfile.traits")} value={p.profile.traits} 
+          onChange={(text) => p.setProfile((prev) => ({ ...prev, traits: text }))} 
+          placeholder={t("loveMessage.partnerProfile.traitsPlaceholder")}
+        />
+
+        <FieldInput 
+          label={t("loveMessage.partnerProfile.quirks")} value={p.profile.quirks} 
+          onChange={(text) => p.setProfile((prev) => ({ ...prev, quirks: text }))} 
+          placeholder={t("loveMessage.partnerProfile.quirksPlaceholder")} multiline
+        />
+
+        <AtomicButton
+          title={t("loveMessage.partnerProfile.save")} onPress={p.handleSave}
+          disabled={!p.profile.name.trim()} variant="primary" fullWidth style={styles.saveBtn}
+        />
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: { flexDirection: "row", alignItems: "center", paddingHorizontal: 8, paddingBottom: 24 },
+  headerTitle: { flex: 1, marginRight: 40, alignItems: "center" },
+  headerText: { fontWeight: "bold" },
+  subtitle: { marginBottom: 32 },
+  field: { marginBottom: 24 },
+  label: { marginBottom: 10, marginLeft: 4 },
+  chipContainer: { flexDirection: "row", flexWrap: "wrap", gap: 10 },
+  chip: { borderRadius: 20 },
+  saveBtn: { height: 56, borderRadius: 16, marginTop: 16 },
+});

package/src/index.ts

@@ -151,6 +151,7 @@ export * from "./features/text-to-voice";
 export * from "./features/hd-touch-up";
 export * from "./features/meme-generator";
 export * from "./features/couple-future";
+export * from "./features/love-message";
 export * from "./infrastructure/orchestration";
 
 // Result Preview Domain