npm - @umituz/react-native-ai-generation-content - Versions diffs - 1.27.26 → 1.27.28 - Mend

@umituz/react-native-ai-generation-content 1.27.26 → 1.27.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json CHANGED Viewed

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

package/src/domains/generation/wizard/presentation/screens/SelectionScreen.tsx CHANGED Viewed

@@ -1,17 +1,19 @@
 /**
  * SelectionScreen
  * Generic selection step for wizard flows (duration, style, etc.)
+ * Uses design system: NavigationHeader + ScreenLayout
  */
-import React, { useState, useCallback } from "react";
-import { View, ScrollView, TouchableOpacity } from "react-native";
+import React, { useState, useCallback, useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicText,
-  AtomicButton,
   AtomicIcon,
   useAppDesignTokens,
+  ScreenLayout,
+  NavigationHeader,
+  type DesignTokens,
 } from "@umituz/react-native-design-system";
-import { styles } from "./SelectionScreen.styles";
 import type { SelectionScreenProps } from "./SelectionScreen.types";
 export type {
@@ -78,28 +80,55 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
     [isMultiSelect, selected],
   );
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <View style={[styles.header, { paddingHorizontal: tokens.spacing.md }]}>
-        <AtomicButton variant="text" size="sm" onPress={onBack}>
-          <View style={styles.backButtonContent}>
-            <AtomicIcon name="arrow-back" size="sm" color="textPrimary" />
-            {translations.backButton ? (
-              <AtomicText type="labelMedium" color="textPrimary" style={styles.backButtonText}>
-                {translations.backButton}
-              </AtomicText>
-            ) : null}
-          </View>
-        </AtomicButton>
-      </View>
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
-      <ScrollView style={styles.scrollView} contentContainerStyle={{ padding: tokens.spacing.md }}>
+  return (
+    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+      <NavigationHeader
+        title=""
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinue}
+            activeOpacity={0.7}
+            disabled={!canContinue}
+            style={[
+              styles.continueButton,
+              {
+                backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                opacity: canContinue ? 1 : 0.5,
+              },
+            ]}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.continueText,
+                { color: canContinue ? tokens.colors.onPrimary : tokens.colors.textSecondary },
+              ]}
+            >
+              {translations.continueButton}
+            </AtomicText>
+            <AtomicIcon
+              name="arrow-forward"
+              size="sm"
+              color={canContinue ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={true}
+        edges={["left", "right"]}
+        hideScrollIndicator={true}
+        contentContainerStyle={styles.scrollContent}
+      >
         <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>
           {translations.title}
         </AtomicText>
         {translations.subtitle ? (
-          <AtomicText type="bodyMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.lg }}>
+          <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>
             {translations.subtitle}
           </AtomicText>
         ) : null}
@@ -115,7 +144,6 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
                   {
                     backgroundColor: isSelected ? tokens.colors.primaryContainer : tokens.colors.backgroundSecondary,
                     borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-                    borderRadius: tokens.borders.radius.md,
                   },
                 ]}
                 onPress={() => handleSelect(option.id)}
@@ -136,13 +164,61 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
             );
           })}
         </View>
-      </ScrollView>
-      <View style={[styles.footer, { padding: tokens.spacing.md }]}>
-        <AtomicButton variant="primary" size="lg" onPress={handleContinue} disabled={!canContinue} style={styles.continueButton}>
-          {translations.continueButton}
-        </AtomicButton>
-      </View>
+      </ScreenLayout>
     </View>
   );
 };
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    scrollContent: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingBottom: 40,
+    },
+    title: {
+      marginBottom: tokens.spacing.sm,
+    },
+    subtitle: {
+      marginBottom: tokens.spacing.lg,
+    },
+    optionsGrid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: tokens.spacing.sm,
+    },
+    optionCard: {
+      flex: 1,
+      minWidth: "45%",
+      padding: tokens.spacing.md,
+      borderWidth: 2,
+      borderRadius: tokens.borders.radius.md,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: tokens.spacing.xs,
+      position: "relative",
+    },
+    optionLabel: {
+      textAlign: "center",
+    },
+    checkmark: {
+      position: "absolute",
+      top: tokens.spacing.xs,
+      right: tokens.spacing.xs,
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    continueButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.full,
+    },
+    continueText: {
+      fontWeight: "800",
+      marginRight: 4,
+    },
+  });

package/src/domains/generation/wizard/presentation/screens/TextInputScreen.tsx CHANGED Viewed

@@ -1,16 +1,19 @@
 /**
  * TextInputScreen
  * Generic text input step for wizard flows
- * Header: Back on left, Continue on right
+ * Uses design system: NavigationHeader + ScreenLayout
  */
-import React, { useState, useCallback } from "react";
-import { View, ScrollView, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import React, { useState, useCallback, useMemo } from "react";
+import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicButton,
   AtomicIcon,
   useAppDesignTokens,
+  ScreenLayout,
+  NavigationHeader,
+  type DesignTokens,
 } from "@umituz/react-native-design-system";
 import type { TextInputScreenProps } from "./TextInputScreen.types";
@@ -46,64 +49,63 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
     setText(example);
   }, []);
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      {/* Header with Back on left, Continue on right */}
-      <View style={[styles.header, { paddingHorizontal: tokens.spacing.md }]}>
-        <TouchableOpacity onPress={onBack} style={styles.backButton}>
-          <AtomicIcon name="chevron-left" size="md" color="textPrimary" />
-        </TouchableOpacity>
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
-        <TouchableOpacity
-          onPress={handleContinue}
-          disabled={!canContinue}
-          style={[
-            styles.continueButton,
-            {
-              backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceSecondary,
-              borderRadius: tokens.radius.md,
-            },
-          ]}
-        >
-          <AtomicText
-            type="labelLarge"
-            style={{
-              color: canContinue ? tokens.colors.textInverse : tokens.colors.textSecondary,
-              fontWeight: "600",
-            }}
+  return (
+    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+      <NavigationHeader
+        title=""
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinue}
+            activeOpacity={0.7}
+            disabled={!canContinue}
+            style={[
+              styles.continueButton,
+              {
+                backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                opacity: canContinue ? 1 : 0.5,
+              },
+            ]}
           >
-            {translations.continueButton}
-          </AtomicText>
-        </TouchableOpacity>
-      </View>
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={{ padding: tokens.spacing.md }}
-        keyboardShouldPersistTaps="handled"
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.continueText,
+                { color: canContinue ? tokens.colors.onPrimary : tokens.colors.textSecondary },
+              ]}
+            >
+              {translations.continueButton}
+            </AtomicText>
+            <AtomicIcon
+              name="arrow-forward"
+              size="sm"
+              color={canContinue ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={true}
+        edges={["left", "right"]}
+        hideScrollIndicator={true}
+        keyboardAvoiding={true}
+        contentContainerStyle={styles.scrollContent}
       >
         <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>
           {translations.title}
         </AtomicText>
         {translations.subtitle ? (
-          <AtomicText type="bodyMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.lg }}>
+          <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>
             {translations.subtitle}
           </AtomicText>
         ) : null}
-        <View
-          style={[
-            styles.inputContainer,
-            {
-              backgroundColor: tokens.colors.backgroundSecondary,
-              borderRadius: tokens.borders.radius.md,
-              borderColor: tokens.colors.border,
-            },
-          ]}
-        >
+        <View style={styles.inputContainer}>
           <TextInput
-            style={[styles.textInput, { color: tokens.colors.textPrimary, minHeight: config?.multiline ? 120 : 48 }]}
+            style={[styles.textInput, { minHeight: config?.multiline ? 120 : 48 }]}
             placeholder={translations.placeholder}
             placeholderTextColor={tokens.colors.textTertiary}
             value={text}
@@ -118,8 +120,8 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
         </View>
         {examplePrompts.length > 0 && translations.examplesTitle ? (
-          <View style={{ marginTop: tokens.spacing.lg }}>
-            <AtomicText type="labelLarge" color="textSecondary" style={{ marginBottom: tokens.spacing.sm }}>
+          <View style={styles.examplesSection}>
+            <AtomicText type="labelLarge" color="textSecondary" style={styles.examplesTitle}>
               {translations.examplesTitle}
             </AtomicText>
             {examplePrompts.slice(0, 4).map((example, index) => (
@@ -128,53 +130,64 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
                 variant="outline"
                 size="sm"
                 onPress={() => handleExampleSelect(example)}
-                style={{ marginBottom: tokens.spacing.xs }}
+                style={styles.exampleButton}
               >
                 {example.length > 50 ? `${example.slice(0, 50)}...` : example}
               </AtomicButton>
             ))}
           </View>
         ) : null}
-      </ScrollView>
+      </ScreenLayout>
     </View>
   );
 };
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: 12,
-  },
-  backButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-  },
-  continueButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  title: {
-    marginBottom: 8,
-  },
-  inputContainer: {
-    borderWidth: 1,
-    padding: 12,
-  },
-  textInput: {
-    fontSize: 16,
-    lineHeight: 22,
-  },
-  charCount: {
-    textAlign: "right",
-    marginTop: 8,
-  },
-});
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    scrollContent: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingBottom: 40,
+    },
+    title: {
+      marginBottom: tokens.spacing.sm,
+    },
+    subtitle: {
+      marginBottom: tokens.spacing.lg,
+    },
+    inputContainer: {
+      backgroundColor: tokens.colors.backgroundSecondary,
+      borderRadius: tokens.borders.radius.md,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+      padding: tokens.spacing.md,
+    },
+    textInput: {
+      fontSize: 16,
+      lineHeight: 22,
+      color: tokens.colors.textPrimary,
+    },
+    charCount: {
+      textAlign: "right",
+      marginTop: tokens.spacing.sm,
+    },
+    examplesSection: {
+      marginTop: tokens.spacing.lg,
+    },
+    examplesTitle: {
+      marginBottom: tokens.spacing.sm,
+    },
+    exampleButton: {
+      marginBottom: tokens.spacing.xs,
+    },
+    continueButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.full,
+    },
+    continueText: {
+      fontWeight: "800",
+      marginRight: 4,
+    },
+  });

package/src/domains/generation/wizard/presentation/screens/SelectionScreen.styles.ts DELETED Viewed

@@ -1,63 +0,0 @@
-/**
- * SelectionScreen Styles
- */
-import { StyleSheet } from "react-native";
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 8,
-  },
-  backButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  backButtonText: {
-    marginLeft: 4,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  title: {
-    marginBottom: 8,
-  },
-  optionsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 12,
-  },
-  optionCard: {
-    flex: 1,
-    minWidth: "45%",
-    padding: 16,
-    borderWidth: 2,
-    alignItems: "center",
-    position: "relative",
-  },
-  optionLabel: {
-    marginTop: 8,
-    textAlign: "center",
-  },
-  checkmark: {
-    position: "absolute",
-    top: 8,
-    right: 8,
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  footer: {
-    borderTopWidth: 1,
-    borderTopColor: "rgba(0,0,0,0.1)",
-  },
-  continueButton: {
-    width: "100%",
-  },
-});