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

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

@@ -0,0 +1,116 @@
+/**
+ * StepPartner Component
+ */
+
+import React from "react";
+import { View, Pressable, Switch, StyleSheet, ImageBackground } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { PartnerInput } from "./PartnerInput";
+
+interface StepPartnerProps {
+  partnerName: string;
+  setPartnerName: (name: string) => void;
+  useProfile: boolean;
+  setUseProfile: (val: boolean) => void;
+  hasProfile: boolean;
+  onEditProfile: () => void;
+}
+
+export const StepPartner: React.FC<StepPartnerProps> = ({
+  partnerName,
+  setPartnerName,
+  useProfile,
+  setUseProfile,
+  hasProfile,
+  onEditProfile,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  return (
+    <View>
+      <PartnerInput value={partnerName} onChangeText={setPartnerName} />
+      
+      <Pressable 
+        onPress={onEditProfile}
+        style={[styles.profileCard, { backgroundColor: tokens.colors.surfaceSecondary }]}
+      >
+        <View style={styles.profileLeft}>
+          <View style={[styles.profileIconCircle, { backgroundColor: `${tokens.colors.primary}20` }]}>
+            <AtomicIcon name="heart" color="primary" size="sm" />
+          </View>
+          <View>
+            <AtomicText type="labelMedium" color="textPrimary">
+              {hasProfile ? t("loveMessage.editPartnerProfile") : t("loveMessage.partnerProfile.title")}
+            </AtomicText>
+            <AtomicText type="bodySmall" color="textTertiary">
+              {t("loveMessage.partnerProfile.subtitle")}
+            </AtomicText>
+          </View>
+        </View>
+        <Switch 
+          value={useProfile} 
+          onValueChange={setUseProfile}
+          trackColor={{ false: tokens.colors.borderLight, true: tokens.colors.primary }}
+          thumbColor="#fff"
+        />
+      </Pressable>
+
+      <ImageBackground
+        source={{ uri: 'https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?q=80&w=600&auto=format&fit=crop' }}
+        style={styles.decorativeCard}
+        imageStyle={{ borderRadius: 24, opacity: 0.6 }}
+      >
+        <View style={styles.decorativeOverlay}>
+          <AtomicText type="bodySmall" color="onPrimary" style={styles.decorativeQuote}>
+            {`"Words are the keys to the heart."`}
+          </AtomicText>
+        </View>
+      </ImageBackground>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  profileCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 16,
+    borderRadius: 20,
+    marginBottom: 24,
+  },
+  profileLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  profileIconCircle: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  decorativeCard: {
+    width: '100%',
+    height: 160,
+    justifyContent: 'flex-end',
+    marginBottom: 24,
+  },
+  decorativeOverlay: {
+    padding: 20,
+    alignItems: 'center',
+  },
+  decorativeQuote: {
+    fontStyle: 'italic',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+});

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

@@ -0,0 +1,30 @@
+/**
+ * StepVibe Component
+ */
+
+import React from "react";
+import { View } from "react-native";
+import { MessageType, MessageTone } from "../../domain/types";
+import { TypeSelector } from "./TypeSelector";
+import { ToneSelector } from "./ToneSelector";
+
+interface StepVibeProps {
+  selectedType: MessageType;
+  setSelectedType: (type: MessageType) => void;
+  selectedTone: MessageTone;
+  setSelectedTone: (tone: MessageTone) => void;
+}
+
+export const StepVibe: React.FC<StepVibeProps> = ({
+  selectedType,
+  setSelectedType,
+  selectedTone,
+  setSelectedTone,
+}) => {
+  return (
+    <View>
+      <TypeSelector selectedType={selectedType} onSelectType={setSelectedType} />
+      <ToneSelector selectedTone={selectedTone} onSelectTone={setSelectedTone} />
+    </View>
+  );
+};

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

@@ -0,0 +1,100 @@
+/**
+ * Message Tone Selector Component
+ * Premium icon-based selector
+ */
+
+import type { FC } from "react";
+import { View, Pressable, StyleSheet, ScrollView } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  type IconName,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { MESSAGE_TONES } from "../../domain/constants";
+import type { MessageTone } from "../../domain/types";
+
+interface ToneSelectorProps {
+  selectedTone: MessageTone;
+  onSelectTone: (tone: MessageTone) => void;
+}
+
+export const ToneSelector: FC<ToneSelectorProps> = ({
+  selectedTone,
+  onSelectTone,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="labelLarge" color="textPrimary" style={styles.label}>
+        {t("loveMessage.tone")}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {MESSAGE_TONES.map((config) => {
+          const isSelected = selectedTone === config.tone;
+          return (
+            <Pressable
+              key={config.tone}
+              onPress={() => onSelectTone(config.tone)}
+              style={[
+                styles.item,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surfaceSecondary,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+            >
+              <AtomicIcon
+                name={config.icon as IconName}
+                color={isSelected ? "onPrimary" : "secondary"}
+                size="sm"
+                style={styles.icon}
+              />
+              <AtomicText
+                type="labelSmall"
+                color={isSelected ? "onPrimary" : "textSecondary"}
+              >
+                {t(config.labelKey)}
+              </AtomicText>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  label: {
+    marginBottom: 12,
+  },
+  scrollContent: {
+    gap: 8,
+    paddingRight: 20,
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+    borderWidth: 1.5,
+  },
+  icon: {
+    marginRight: 6,
+  },
+});

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

@@ -0,0 +1,130 @@
+/**
+ * Trending 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";
+
+interface TrendingSectionProps {
+  onViewAll: () => void;
+}
+
+export const TrendingSection: React.FC<TrendingSectionProps> = ({ onViewAll }) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  return (
+    <View>
+      <View style={styles.sectionHeader}>
+        <AtomicText type="headlineSmall" color="textPrimary" style={styles.sectionTitle}>
+          {t("loveMessage.explore.trending")}
+        </AtomicText>
+        <Pressable onPress={onViewAll}>
+          <AtomicText type="labelMedium" color="primary">{t("loveMessage.explore.viewAll")}</AtomicText>
+        </Pressable>
+      </View>
+
+      <View style={styles.trendingContainer}>
+        <Pressable 
+          onPress={onViewAll}
+          style={[styles.trendingCard, { backgroundColor: tokens.colors.surface, borderColor: tokens.colors.borderLight }]}
+        >
+          <ImageBackground 
+            source={{ uri: 'https://images.unsplash.com/photo-1516589174184-c68526614488?q=80&w=200&auto=format&fit=crop' }} 
+            style={styles.trendingThumb}
+            imageStyle={{ borderRadius: 12 }}
+          />
+          <View style={styles.trendingContent}>
+            <AtomicText type="labelLarge" color="textPrimary">Deep Connection</AtomicText>
+            <AtomicText type="bodySmall" color="textTertiary" numberOfLines={1}>
+              Thoughtful AI generated notes for partners.
+            </AtomicText>
+            <View style={styles.trendingTagRow}>
+              <View style={[styles.trendingTag, { backgroundColor: `${tokens.colors.primary}20` }]}>
+                <AtomicText type="bodySmall" color="primary" style={styles.tagText}>5K SENT</AtomicText>
+              </View>
+            </View>
+          </View>
+          <AtomicIcon name="chevron-forward" color="textTertiary" size="sm" />
+        </Pressable>
+
+        <Pressable 
+          onPress={onViewAll}
+          style={[styles.trendingCard, { backgroundColor: tokens.colors.surface, borderColor: tokens.colors.borderLight }]}
+        >
+          <ImageBackground 
+            source={{ uri: 'https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?q=80&w=200&auto=format&fit=crop' }} 
+            style={styles.trendingThumb}
+            imageStyle={{ borderRadius: 12 }}
+          />
+          <View style={styles.trendingContent}>
+            <AtomicText type="labelLarge" color="textPrimary">Short & Sweet</AtomicText>
+            <AtomicText type="bodySmall" color="textTertiary" numberOfLines={1}>
+              Quick texts to make their heart skip a beat.
+            </AtomicText>
+            <View style={styles.trendingTagRow}>
+              <View style={[styles.trendingTag, { backgroundColor: `${tokens.colors.primary}20` }]}>
+                <AtomicText type="bodySmall" color="primary" style={styles.tagText}>12K SENT</AtomicText>
+              </View>
+            </View>
+          </View>
+          <AtomicIcon name="chevron-forward" color="textTertiary" size="sm" />
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontWeight: 'bold',
+  },
+  trendingContainer: {
+    paddingHorizontal: 16,
+    gap: 12,
+  },
+  trendingCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 20,
+    borderWidth: 1,
+  },
+  trendingThumb: {
+    width: 64,
+    height: 64,
+    borderRadius: 12,
+    backgroundColor: '#333',
+    marginRight: 12,
+  },
+  trendingContent: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  trendingTagRow: {
+    flexDirection: 'row',
+    marginTop: 6,
+  },
+  trendingTag: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 6,
+  },
+  tagText: {
+    fontSize: 9,
+    fontWeight: 'bold',
+  },
+});

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

@@ -0,0 +1,99 @@
+/**
+ * Message Type Selector Component
+ * Premium icon-based selector
+ */
+
+import type { FC } from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  type IconName,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { MESSAGE_TYPES } from "../../domain/constants";
+import type { MessageType } from "../../domain/types";
+
+interface TypeSelectorProps {
+  selectedType: MessageType;
+  onSelectType: (type: MessageType) => void;
+}
+
+export const TypeSelector: FC<TypeSelectorProps> = ({
+  selectedType,
+  onSelectType,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="labelLarge" color="textPrimary" style={styles.label}>
+        {t("loveMessage.messageType")}
+      </AtomicText>
+      <View style={styles.grid}>
+        {MESSAGE_TYPES.map((config) => {
+          const isSelected = selectedType === config.type;
+          return (
+            <Pressable
+              key={config.type}
+              onPress={() => onSelectType(config.type)}
+              style={[
+                styles.item,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surfaceSecondary,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+            >
+              <AtomicIcon
+                name={config.icon as IconName}
+                color={isSelected ? "onPrimary" : "secondary"}
+                size="md"
+                style={styles.icon}
+              />
+              <AtomicText
+                type="labelSmall"
+                color={isSelected ? "onPrimary" : "textSecondary"}
+              >
+                {t(config.labelKey)}
+              </AtomicText>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  label: {
+    marginBottom: 12,
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10,
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    minWidth: "47%",
+    flex: 1,
+  },
+  icon: {
+    marginRight: 8,
+  },
+});

package/src/domains/love-message/presentation/hooks/useLoveMessageGenerator.ts

@@ -0,0 +1,114 @@
+/**
+ * useLoveMessageGenerator Hook
+ * Business logic for Love Message Generation
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import { useAppIsFocused } from "@umituz/react-native-design-system";
+import { MessageType, MessageTone } from "../../domain/types";
+import { generateLoveMessage } from "../../infrastructure/services/LoveMessageService";
+import { PartnerProfileRepository } from "../../infrastructure/persistence/PartnerProfileRepository";
+
+export enum GeneratorStep {
+  PARTNER = 0,
+  VIBE = 1,
+  DETAILS = 2,
+  RESULT = 3
+}
+
+export const useLoveMessageGenerator = (config: {
+  onBack: () => void;
+  initialType?: MessageType;
+  onSuccess?: () => void;
+  onError?: () => void;
+}) => {
+  const isFocused = useAppIsFocused();
+
+  const [currentStep, setCurrentStep] = useState<GeneratorStep>(GeneratorStep.PARTNER);
+  const [partnerName, setPartnerName] = useState("");
+  const [selectedType, setSelectedType] = useState(config.initialType || MessageType.ROMANTIC);
+  const [selectedTone, setSelectedTone] = useState(MessageTone.ROMANTIC);
+  const [details, setDetails] = useState("");
+  const [useProfile, setUseProfile] = useState(true);
+  const [hasProfile, setHasProfile] = useState(false);
+  const [generatedMessage, setGeneratedMessage] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  useEffect(() => {
+    if (isFocused) {
+      const checkProfile = async () => {
+        const profile = await PartnerProfileRepository.getProfile();
+        if (profile) {
+          setHasProfile(true);
+          if (!partnerName) setPartnerName(profile.name);
+        } else {
+          setHasProfile(false);
+        }
+      };
+      checkProfile();
+    }
+  }, [isFocused, partnerName]);
+
+  const handleNext = useCallback(() => {
+    if (currentStep < GeneratorStep.DETAILS) {
+      setCurrentStep(currentStep + 1);
+    }
+  }, [currentStep]);
+
+  const handleBack = useCallback(() => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    } else {
+      config.onBack();
+    }
+  }, [currentStep, config]);
+
+  const handleGenerate = useCallback(async () => {
+    if (!partnerName.trim() || isGenerating) return;
+
+    try {
+      setIsGenerating(true);
+      const message = await generateLoveMessage({
+        partnerName,
+        type: selectedType,
+        tone: selectedTone,
+        details,
+        usePartnerProfile: useProfile,
+      });
+
+      setGeneratedMessage(message);
+      setCurrentStep(GeneratorStep.RESULT);
+      config.onSuccess?.();
+    } catch {
+      config.onError?.();
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [partnerName, selectedType, selectedTone, details, useProfile, isGenerating, config]);
+
+  const startOver = useCallback(() => {
+    setCurrentStep(GeneratorStep.PARTNER);
+    setGeneratedMessage("");
+  }, []);
+
+  return {
+    currentStep,
+    partnerName,
+    setPartnerName,
+    selectedType,
+    setSelectedType,
+    selectedTone,
+    setSelectedTone,
+    details,
+    setDetails,
+    useProfile,
+    setUseProfile,
+    hasProfile,
+    generatedMessage,
+    isGenerating,
+    handleNext,
+    handleBack,
+    handleGenerate,
+    startOver,
+  };
+};

package/src/domains/love-message/presentation/hooks/usePartnerProfile.ts

@@ -0,0 +1,43 @@
+/**
+ * usePartnerProfile Hook
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { PartnerProfile } from "../../domain/types";
+import { PartnerProfileRepository } from "../../infrastructure/persistence/PartnerProfileRepository";
+
+export const usePartnerProfile = (onBack: () => void) => {
+  const [profile, setProfile] = useState<PartnerProfile>({
+    name: "",
+    nickname: "",
+    hobbies: "",
+    traits: "",
+    quirks: "",
+  });
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadProfile = async () => {
+      const savedProfile = await PartnerProfileRepository.getProfile();
+      if (savedProfile) {
+        setProfile(savedProfile);
+      }
+      setIsLoading(false);
+    };
+    loadProfile();
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    const success = await PartnerProfileRepository.saveProfile(profile);
+    if (success) {
+      onBack();
+    }
+  }, [profile, onBack]);
+
+  return {
+    profile,
+    setProfile,
+    isLoading,
+    handleSave,
+  };
+};

package/src/domains/love-message/presentation/navigation/LoveMessageStack.tsx

@@ -0,0 +1,39 @@
+/**
+ * Love Message Stack
+ * Navigation for Love Message domain
+ */
+
+import React from "react";
+import {
+  StackNavigator,
+  type StackNavigatorConfig,
+} from "@umituz/react-native-design-system";
+import { LoveMessageExploreScreen } from "../screens/LoveMessageExploreScreen";
+import { MessageListScreen } from "../screens/MessageListScreen";
+import { LoveMessageGeneratorScreen } from "../screens/LoveMessageGeneratorScreen";
+import { PartnerProfileScreen } from "../screens/PartnerProfileScreen";
+import type { MessageType } from "../../domain/types";
+
+export type LoveMessageStackParamList = {
+  LoveMessageExplore: undefined;
+  MessageList: { categoryId: string };
+  MessageGenerator: { initialType?: MessageType };
+  PartnerProfile: undefined;
+};
+
+const stackConfig: StackNavigatorConfig<LoveMessageStackParamList> = {
+  initialRouteName: "LoveMessageExplore",
+  screenOptions: {
+    headerShown: false,
+  },
+  screens: [
+    { name: "LoveMessageExplore", component: LoveMessageExploreScreen },
+    { name: "MessageList", component: MessageListScreen },
+    { name: "MessageGenerator", component: LoveMessageGeneratorScreen },
+    { name: "PartnerProfile", component: PartnerProfileScreen },
+  ],
+};
+
+export const LoveMessageStack: React.FC = () => {
+  return <StackNavigator config={stackConfig} />;
+};