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

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

@@ -0,0 +1,53 @@
+/**
+ * Love Message Explore Screen
+ * Premium entry point for Love Message domain
+ */
+
+import { FC } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  useSafeAreaInsets,
+  useAppNavigation,
+} from "@umituz/react-native-design-system";
+import { ExploreHeader } from "../components/ExploreHeader";
+import { LoveMessageHeroSection } from "../components/LoveMessageHeroSection";
+import { CategoryGrid } from "../components/CategoryGrid";
+import { TrendingSection } from "../components/TrendingSection";
+
+export const LoveMessageExploreScreen: FC = () => {
+  const tokens = useAppDesignTokens();
+  const { bottom } = useSafeAreaInsets();
+  const navigation = useAppNavigation();
+
+  const handleNavigateToGenerator = () => {
+    navigation.navigate("MessageGenerator", {});
+  };
+
+  const handleNavigateToCategory = (categoryId: string) => {
+    navigation.navigate("MessageList", { categoryId });
+  };
+
+  const handleNavigateToTrending = () => {
+    navigation.navigate("MessageList", { categoryId: "trending" });
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <ExploreHeader onMagicPress={handleNavigateToGenerator} />
+
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: bottom + 120 }}
+      >
+        <LoveMessageHeroSection />
+        <CategoryGrid onCategoryPress={handleNavigateToCategory} />
+        <TrendingSection onViewAll={handleNavigateToTrending} />
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

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

@@ -0,0 +1,169 @@
+/**
+ * Love Message Generator Screen
+ * Multi-step wizard flow
+ */
+
+import { FC, useMemo, useCallback } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  useAppNavigation,
+  useAppRoute,
+  AlertService,
+  useAppDesignTokens,
+  useSafeAreaInsets,
+} from "@umituz/react-native-design-system";
+
+import { useLocalization } from "@umituz/react-native-localization";
+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 { MessageType } from "../../domain/types";
+import { useLoveMessageGenerator, GeneratorStep } from "../hooks/useLoveMessageGenerator";
+
+type RouteParams = { initialType?: MessageType };
+
+export const LoveMessageGeneratorScreen: FC = () => {
+  const tokens = useAppDesignTokens();
+  const { bottom } = useSafeAreaInsets();
+  const { t } = useLocalization();
+  const navigation = useAppNavigation();
+  const route = useAppRoute<{ params: RouteParams }, "params">();
+
+  const initialType = route.params?.initialType;
+
+  const handleSuccess = useCallback(() => {
+    AlertService.createSuccessAlert(
+      t("loveMessage.generator.successTitle"),
+      t("loveMessage.generator.successMessage")
+    );
+  }, [t]);
+
+  const handleError = useCallback(() => {
+    AlertService.createErrorAlert(
+      t("loveMessage.generator.errorTitle"),
+      t("loveMessage.generator.errorMessage")
+    );
+  }, [t]);
+
+  const gen = useLoveMessageGenerator({
+    onBack: () => navigation.goBack(),
+    initialType,
+    onSuccess: handleSuccess,
+    onError: handleError,
+  });
+
+  const handleNavigateToProfile = () => navigation.navigate("PartnerProfile");
+
+  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 && (
+            <View>
+              <StepPartner
+                partnerName={gen.partnerName}
+                setPartnerName={gen.setPartnerName}
+                useProfile={gen.useProfile}
+                setUseProfile={gen.setUseProfile}
+                hasProfile={gen.hasProfile}
+                onEditProfile={handleNavigateToProfile}
+              />
+            </View>
+          )}
+
+          {gen.currentStep === GeneratorStep.VIBE && (
+            <View>
+              <StepVibe
+                selectedType={gen.selectedType}
+                setSelectedType={gen.setSelectedType}
+                selectedTone={gen.selectedTone}
+                setSelectedTone={gen.setSelectedTone}
+              />
+            </View>
+          )}
+
+          {gen.currentStep === GeneratorStep.DETAILS && (
+            <View>
+              <StepDetails details={gen.details} setDetails={gen.setDetails} />
+            </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,
+  },
+  actionBtn: { height: 60, borderRadius: 30 },
+});

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

@@ -0,0 +1,127 @@
+/**
+ * Message List Screen
+ */
+
+import { FC, useCallback, useMemo } from "react";
+import { View, ScrollView, StyleSheet, Pressable, Share } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppNavigation,
+  useAppRoute,
+  useAppDesignTokens,
+  useSafeAreaInsets,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { CATEGORY_TEMPLATES, MESSAGE_TYPES } from "../../domain/constants";
+import { MessageListItem } from "../components/MessageListItem";
+import type { MessageType } from "../../domain/types";
+
+type RouteParams = { categoryId?: string };
+
+export const MessageListScreen: FC = () => {
+  const tokens = useAppDesignTokens();
+  const { top, bottom } = useSafeAreaInsets();
+  const { t } = useLocalization();
+  const navigation = useAppNavigation();
+  const route = useAppRoute<{ params: RouteParams }, "params">();
+
+  const categoryId = route.params?.categoryId ?? "romantic";
+  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 handleBack = () => navigation.goBack();
+
+  const handleNavigateToGenerator = (type?: string) => {
+    navigation.navigate("MessageGenerator", { initialType: type as MessageType });
+  };
+
+  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={handleBack} style={styles.backBtn}>
+          <AtomicIcon name="arrow-back" color="textPrimary" size="sm" />
+        </Pressable>
+        <AtomicText type="headlineSmall" color="textPrimary" style={styles.headerTitle}>
+          {categoryTitle}
+        </AtomicText>
+        <View style={styles.spacer} />
+      </View>
+
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: bottom + 100, paddingHorizontal: 16 }}
+      >
+        <View style={styles.headlineContainer}>
+          <AtomicText type="headlineMedium" color="textPrimary" style={styles.headline}>
+            {`${messages.length} ${t("loveMessage.messages")}`}
+          </AtomicText>
+          <AtomicText type="bodySmall" color="textTertiary">
+            {t("loveMessage.aiCrafted")}
+          </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={() => handleNavigateToGenerator(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}>
+            {t("loveMessage.generateMore")}
+          </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" },
+  spacer: { width: 44 },
+  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/domains/love-message/presentation/screens/PartnerProfileScreen.tsx

@@ -0,0 +1,119 @@
+/**
+ * Partner Profile Screen
+ */
+
+import { FC } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  useAppDesignTokens,
+  useSafeAreaInsets,
+  useAppNavigation,
+} 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 navigation = useAppNavigation();
+  const p = usePartnerProfile(() => navigation.goBack());
+
+  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={() => 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/domains/scenarios/domain/scenario.types.ts

@@ -139,6 +139,55 @@ export interface ScenarioConfig {
   readonly title: string;
 }
 
+/**
+ * Visual style option for prompt customization
+ */
+export interface VisualStyleOption {
+  readonly id: string;
+  readonly icon: string;
+  readonly labelKey: string;
+}
+
+/**
+ * Inspiration chip data for prompt customization
+ */
+export interface InspirationChipData {
+  readonly id: string;
+  readonly labelKey: string;
+  readonly promptKey: string;
+}
+
+/**
+ * Magic prompt configuration
+ */
+export interface MagicPromptConfig {
+  readonly headerKey: string;
+  readonly headlinePart1Key: string;
+  readonly headlinePart2Key: string;
+  readonly subtitleKey: string;
+  readonly inputLabelKey: string;
+  readonly surpriseButtonKey: string;
+  readonly placeholderKey: string;
+  readonly styleTitleKey: string;
+  readonly inspirationTitleKey: string;
+  readonly continueKey: string;
+  readonly maxLength: number;
+  readonly minLength: number;
+}
+
+/**
+ * Couple feature identifier
+ */
+export type CoupleFeatureId = string;
+
+/**
+ * Couple feature selection state
+ */
+export interface CoupleFeatureSelection {
+  readonly featureId: CoupleFeatureId | null;
+  readonly [key: string]: any;
+}
+
 export interface ScenarioData {
   readonly id: string;
   readonly category?: string;

package/src/domains/scenarios/index.ts

@@ -50,4 +50,9 @@ export type {
   ScenarioSelectorConfig,
   ScenarioPreviewTranslations,
   ScenarioConfig,
+  VisualStyleOption,
+  InspirationChipData,
+  MagicPromptConfig,
+  CoupleFeatureId,
+  CoupleFeatureSelection,
 } from "./domain/scenario.types";

package/src/index.ts

@@ -141,6 +141,7 @@ export * from "./domains/content-moderation";
 export * from "./domains/creations";
 export * from "./domains/face-detection";
 export * from "./domains/scenarios";
+export * from "./domains/love-message";
 export * from "./infrastructure/orchestration";
 
 // Generation Config Provider (App Configuration)