@umituz/react-native-ai-generation-content 1.17.247 → 1.17.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.247",
+  "version": "1.17.248",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/features/couple-future/index.ts

@@ -28,6 +28,8 @@ export type {
   ArtistStyleSelectorProps,
   WardrobeSelectorProps,
 } from "./presentation/components";
+export { CoupleFeatureScreen } from "./presentation/screens/CoupleFeatureScreen";
+export type { CoupleFeatureScreenProps } from "./presentation/screens/CoupleFeatureScreen";
 export {
   COUPLE_FEATURE_CONFIGS,
   ROMANTIC_MOOD_OPTIONS,

package/src/features/couple-future/infrastructure/couplePromptEnhancer.ts

@@ -31,6 +31,13 @@ const ARTIST_STYLE_DESCRIPTIONS: Record<string, string> = {
   daVinci: "Leonardo da Vinci's renaissance mastery with subtle sfumato and perfect proportion",
 };
 
+const WARDROBE_STYLE_DESCRIPTIONS: Record<string, string> = {
+  casual: "casual comfortable outfit with relaxed fit",
+  formal: "elegant formal attire with sophisticated style",
+  sporty: "athletic sporty wear with dynamic energy",
+  elegant: "refined elegant clothing with graceful details",
+};
+
 const getIntensityLabel = (intensity: number): string => {
   if (intensity >= 75) return "strong";
   if (intensity >= 50) return "moderate";
@@ -80,5 +87,14 @@ export const enhanceCouplePrompt = (
     }
   }
 
+  if (selections.wardrobeStyle) {
+    const wardrobeDescription = WARDROBE_STYLE_DESCRIPTIONS[selections.wardrobeStyle];
+    if (wardrobeDescription) {
+      const intensity = selections.wardrobeIntensity || 70;
+      const label = getIntensityLabel(intensity);
+      enhanced += `. Dress them in ${label} ${wardrobeDescription}`;
+    }
+  }
+
   return enhanced;
 };

package/src/features/couple-future/presentation/components/WardrobeSelector.tsx

@@ -1,10 +1,10 @@
 /**
  * Wardrobe Selector Component
- * Simplified placeholder for Phase 1
+ * Wardrobe style selector with intensity control
  */
 
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { View, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
 import {
   AtomicText,
   AtomicIcon,
@@ -12,6 +12,13 @@ import {
 } from "@umituz/react-native-design-system";
 import type { CoupleFeatureSelection } from "../../domain/types";
 
+const WARDROBE_STYLES = [
+  { id: "casual", iconKey: "shirt-outline" },
+  { id: "formal", iconKey: "briefcase-outline" },
+  { id: "sporty", iconKey: "fitness-outline" },
+  { id: "elegant", iconKey: "star-outline" },
+];
+
 export interface WardrobeSelectorProps {
   selection: CoupleFeatureSelection;
   onSelectionChange: (selection: CoupleFeatureSelection) => void;
@@ -20,68 +27,115 @@ export interface WardrobeSelectorProps {
 }
 
 export const WardrobeSelector: React.FC<WardrobeSelectorProps> = ({
+  selection,
+  onSelectionChange,
   translationPrefix,
   t,
 }) => {
   const tokens = useAppDesignTokens();
+  const selectedStyle = selection.wardrobeStyle;
+  const intensity = selection.wardrobeIntensity || 70;
 
-  return (
-    <View style={s.container}>
-      <View
-        style={[
-          s.card,
-          {
-            backgroundColor: tokens.colors.surface,
-            borderColor: tokens.colors.borderLight,
-          },
-        ]}
-      >
-        <View
-          style={[
-            s.iconContainer,
-            { backgroundColor: tokens.colors.surfaceVariant },
-          ]}
-        >
-          <AtomicIcon name="checkroom" size="xl" color="textSecondary" />
-        </View>
+  const handleStyleSelect = (styleId: string) => {
+    onSelectionChange({ ...selection, wardrobeStyle: styleId });
+  };
 
-        <AtomicText
-          type="headlineSmall"
-          style={[s.title, { color: tokens.colors.textPrimary }]}
-        >
-          {t(`${translationPrefix}.title`)}
-        </AtomicText>
+  const handleIntensityChange = (value: number) => {
+    onSelectionChange({ ...selection, wardrobeIntensity: value });
+  };
 
+  return (
+    <ScrollView style={s.container}>
+      <View style={s.section}>
         <AtomicText
           type="bodyMedium"
-          style={[s.subtitle, { color: tokens.colors.textSecondary }]}
+          style={[s.title, { color: tokens.colors.textPrimary }]}
         >
-          {t(`${translationPrefix}.comingSoon`)}
+          {t(`${translationPrefix}.selectStyle`)}
         </AtomicText>
 
-        <View
-          style={[
-            s.badge,
-            { backgroundColor: `${tokens.colors.primary}15` },
-          ]}
-        >
-          <AtomicText
-            type="labelSmall"
-            style={{ color: tokens.colors.primary, fontWeight: "600" }}
-          >
-            {t("common.comingSoon")}
-          </AtomicText>
+        <View style={s.grid}>
+          {WARDROBE_STYLES.map((style) => {
+            const isSelected = selectedStyle === style.id;
+            return (
+              <TouchableOpacity
+                key={style.id}
+                style={[
+                  s.card,
+                  {
+                    backgroundColor: isSelected
+                      ? `${tokens.colors.primary}15`
+                      : tokens.colors.surface,
+                    borderColor: isSelected
+                      ? tokens.colors.primary
+                      : tokens.colors.borderLight,
+                  },
+                ]}
+                onPress={() => handleStyleSelect(style.id)}
+              >
+                <AtomicIcon
+                  name={style.iconKey as never}
+                  size="lg"
+                  color={isSelected ? "primary" : "textSecondary"}
+                />
+                <AtomicText
+                  type="labelMedium"
+                  style={[
+                    s.label,
+                    {
+                      color: isSelected
+                        ? tokens.colors.primary
+                        : tokens.colors.textSecondary,
+                      fontWeight: isSelected ? "600" : "400",
+                    },
+                  ]}
+                >
+                  {t(`${translationPrefix}.styles.${style.id}`)}
+                </AtomicText>
+              </TouchableOpacity>
+            );
+          })}
         </View>
       </View>
-    </View>
+
+      {selectedStyle && (
+        <View style={s.section}>
+          <View style={s.header}>
+            <AtomicText type="bodyMedium" style={[s.title, { color: tokens.colors.textPrimary }]}>
+              {t(`${translationPrefix}.intensity`)}
+            </AtomicText>
+            <AtomicText type="bodyMedium" style={{ color: tokens.colors.primary, fontWeight: "600" }}>
+              {intensity}%
+            </AtomicText>
+          </View>
+
+          <View style={s.slider}>
+            {[25, 50, 75, 100].map((value) => (
+              <TouchableOpacity
+                key={value}
+                style={[s.button, { backgroundColor: intensity === value ? tokens.colors.primary : tokens.colors.surface, borderColor: intensity === value ? tokens.colors.primary : tokens.colors.borderLight }]}
+                onPress={() => handleIntensityChange(value)}
+              >
+                <AtomicText type="labelSmall" style={{ color: intensity === value ? tokens.colors.onPrimary : tokens.colors.textSecondary }}>
+                  {value}%
+                </AtomicText>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      )}
+    </ScrollView>
   );
 };
 
 const s = StyleSheet.create({
-  container: { flex: 1, padding: 16, justifyContent: "center" },
-  card: { padding: 24, borderRadius: 16, borderWidth: 2, alignItems: "center" },
-  iconContainer: { width: 80, height: 80, borderRadius: 40, alignItems: "center", justifyContent: "center", marginBottom: 16 },
-  title: { fontWeight: "600", marginBottom: 8, textAlign: "center" },
-  subtitle: { marginBottom: 16, textAlign: "center" },
-  badge: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 8 },
+  container: { flex: 1 },
+  section: { padding: 16, marginBottom: 8 },
+  title: { fontWeight: "600", marginBottom: 12 },
+  grid: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
+  card: { width: "47%", padding: 16, borderRadius: 12, borderWidth: 2, alignItems: "center", justifyContent: "center" },
+  label: { marginTop: 8, textAlign: "center" },
+  header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  slider: { flexDirection: "row", gap: 8, marginTop: 8 },
+  button: { flex: 1, padding: 12, borderRadius: 8, borderWidth: 2, alignItems: "center" },
 });

package/src/features/couple-future/presentation/screens/CoupleFeatureScreen.tsx

@@ -0,0 +1,125 @@
+/**
+ * Couple Feature Screen
+ * Generic screen for couple feature selection
+ */
+
+import React from "react";
+import { View, StyleSheet, ScrollView } from "react-native";
+import {
+  AtomicButton,
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { CoupleFeatureId, CoupleFeatureSelection } from "../../domain/types";
+import { COUPLE_FEATURE_CONFIGS } from "../../infrastructure/coupleFeatureRegistry";
+import { RomanticMoodSelector } from "../components/RomanticMoodSelector";
+import { ArtStyleSelector } from "../components/ArtStyleSelector";
+import { ArtistStyleSelector } from "../components/ArtistStyleSelector";
+import { WardrobeSelector } from "../components/WardrobeSelector";
+
+interface CoupleFeatureScreenProps {
+  featureId: CoupleFeatureId;
+  selection: CoupleFeatureSelection;
+  onSelectionChange: (selection: CoupleFeatureSelection) => void;
+  onContinue: () => void;
+  onBack: () => void;
+  t: (key: string) => string;
+}
+
+const FeatureComponentMap = {
+  "romantic-mood": RomanticMoodSelector,
+  "art-style": ArtStyleSelector,
+  "artist-style": ArtistStyleSelector,
+  "wardrobe": WardrobeSelector,
+};
+
+export const CoupleFeatureScreen: React.FC<CoupleFeatureScreenProps> = ({
+  featureId,
+  selection,
+  onSelectionChange,
+  onContinue,
+  onBack,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const config = COUPLE_FEATURE_CONFIGS[featureId];
+
+  if (!config) return null;
+
+  const FeatureComponent = FeatureComponentMap[featureId];
+  if (!FeatureComponent) return null;
+
+  const selectorProps = {
+    selection,
+    onSelectionChange,
+    translationPrefix: config.translationPrefix,
+    t,
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: tokens.colors.backgroundPrimary },
+      ]}
+    >
+      <View style={styles.header}>
+        <AtomicText
+          type="headlineMedium"
+          style={{ color: tokens.colors.textPrimary }}
+        >
+          {t(`${config.translationPrefix}.title`)}
+        </AtomicText>
+      </View>
+
+      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        <FeatureComponent {...selectorProps} />
+      </ScrollView>
+
+      <View
+        style={[
+          styles.footer,
+          { borderTopColor: tokens.colors.borderLight },
+        ]}
+      >
+        <AtomicButton
+          title={t("common.back")}
+          onPress={onBack}
+          variant="secondary"
+          style={styles.backButton}
+        />
+        <AtomicButton
+          title={t("common.continue")}
+          onPress={onContinue}
+          variant="primary"
+          style={styles.continueButton}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    padding: 16,
+    paddingTop: 20,
+  },
+  content: {
+    flex: 1,
+  },
+  footer: {
+    flexDirection: "row",
+    padding: 16,
+    borderTopWidth: 1,
+    gap: 12,
+  },
+  backButton: {
+    flex: 1,
+  },
+  continueButton: {
+    flex: 2,
+  },
+});