@umituz/react-native-ai-generation-content 1.27.21 → 1.27.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.27.21",
+  "version": "1.27.22",
   "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/configs/text-to-image.config.ts

@@ -3,27 +3,22 @@
  * Config-driven wizard steps for text-to-image generation
  */
 
-import type { WizardFeatureConfig } from "../domain/entities/wizard-config.types";
+import type { WizardFeatureConfig, TextInputStepConfig } from "../domain/entities/wizard-config.types";
+
+const promptStep: TextInputStepConfig = {
+  id: "prompt",
+  type: "text_input",
+  required: true,
+  titleKey: "text2image.wizard.prompt.title",
+  subtitleKey: "text2image.wizard.prompt.subtitle",
+  placeholderKey: "text2image.wizard.prompt.placeholder",
+  minLength: 3,
+  maxLength: 1000,
+  multiline: true,
+};
 
 export const TEXT_TO_IMAGE_WIZARD_CONFIG: WizardFeatureConfig = {
   id: "text-to-image",
   name: "Text to Image",
-  steps: [
-    {
-      id: "prompt",
-      type: "text_input",
-      required: true,
-      placeholderKey: "textToImage.promptPlaceholder",
-      minLength: 3,
-      maxLength: 1000,
-      multiline: true,
-    },
-    {
-      id: "style",
-      type: "selection",
-      selectionType: "style",
-      options: [],
-      required: false,
-    },
-  ],
+  steps: [promptStep],
 };

package/src/domains/generation/wizard/index.ts

@@ -50,7 +50,12 @@ export { GenericWizardFlow } from "./presentation/components";
 export type { GenericWizardFlowProps } from "./presentation/components";
 
 // Presentation - Screens
-export { GeneratingScreen } from "./presentation/screens";
+export { GeneratingScreen, TextInputScreen } from "./presentation/screens";
+export type {
+  TextInputScreenTranslations,
+  TextInputScreenConfig,
+  TextInputScreenProps,
+} from "./presentation/screens";
 
 // Feature Configs
 export * from "./configs";

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.tsx

@@ -3,9 +3,10 @@ import { extractMediaUrl, getMediaTypeFromUrl } from "@umituz/react-native-desig
 import { StepType } from "../../../../../domain/entities/flow-config.types";
 import { GenericPhotoUploadScreen } from "../screens/GenericPhotoUploadScreen";
 import { GeneratingScreen } from "../screens/GeneratingScreen";
+import { TextInputScreen } from "../screens/TextInputScreen";
 import { ScenarioPreviewScreen } from "../../../../scenarios/presentation/screens/ScenarioPreviewScreen";
 import { ResultPreviewScreen } from "../../../../result-preview/presentation/components/ResultPreviewScreen";
-import { getWizardStepConfig, getUploadedImage } from "./WizardStepRenderer.utils";
+import { getWizardStepConfig, getTextInputConfig, getUploadedImage } from "./WizardStepRenderer.utils";
 import type { WizardStepRendererProps } from "./WizardStepRenderer.types";
 
 export type { WizardStepRendererProps } from "./WizardStepRenderer.types";
@@ -127,6 +128,44 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
       );
     }
 
+    case StepType.TEXT_INPUT: {
+      const textConfig = getTextInputConfig(step.config);
+      const titleKey = textConfig?.titleKey ?? `wizard.steps.${step.id}.title`;
+      const subtitleKey = textConfig?.subtitleKey ?? `wizard.steps.${step.id}.subtitle`;
+      const placeholderKey = textConfig?.placeholderKey ?? `wizard.steps.${step.id}.placeholder`;
+      const existingData = customData[step.id];
+      const existingText = typeof existingData === "string"
+        ? existingData
+        : typeof existingData === "object" && existingData !== null && "text" in existingData
+          ? String((existingData as { text: string }).text)
+          : "";
+
+      return (
+        <TextInputScreen
+          stepId={step.id}
+          translations={{
+            title: t(titleKey),
+            subtitle: subtitleKey ? t(subtitleKey) : undefined,
+            placeholder: t(placeholderKey),
+            continueButton: t("common.continue"),
+            backButton: t("common.back"),
+            examplesTitle: t("textInput.examplesTitle"),
+          }}
+          config={{
+            minLength: textConfig?.minLength ?? 3,
+            maxLength: textConfig?.maxLength ?? 1000,
+            multiline: textConfig?.multiline ?? true,
+          }}
+          initialValue={existingText}
+          onBack={onBack}
+          onContinue={(text) => {
+            // Store text in a structure compatible with existing handlers
+            onPhotoContinue(step.id, { uri: text, text, previewUrl: "" } as any);
+          }}
+        />
+      );
+    }
+
     default:
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.warn("[WizardStepRenderer] Unhandled step type", { stepType: step.type });

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.utils.ts

@@ -1,4 +1,8 @@
-import type { WizardStepConfig } from "../../domain/entities/wizard-config.types";
+import type {
+  WizardStepConfig,
+  TextInputStepConfig,
+  PhotoUploadStepConfig,
+} from "../../domain/entities/wizard-config.types";
 import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -19,6 +23,18 @@ export function getWizardStepConfig(config: unknown): WizardStepConfig | undefin
   return undefined;
 }
 
+export function getTextInputConfig(config: unknown): TextInputStepConfig | undefined {
+  if (!isRecord(config)) return undefined;
+  if (config.type === "text_input") return config as unknown as TextInputStepConfig;
+  return undefined;
+}
+
+export function getPhotoUploadConfig(config: unknown): PhotoUploadStepConfig | undefined {
+  if (!isRecord(config)) return undefined;
+  if (config.type === "photo_upload") return config as unknown as PhotoUploadStepConfig;
+  return undefined;
+}
+
 export function getUploadedImage(data: unknown): UploadedImage | undefined {
   if (isUploadedImage(data)) return data;
   return undefined;

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

@@ -0,0 +1,219 @@
+/**
+ * Text Input Screen
+ * Generic text input step for wizard flows
+ */
+
+import React, { useState, useCallback } from "react";
+import { View, ScrollView, TextInput, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface TextInputScreenTranslations {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly placeholder: string;
+  readonly continueButton: string;
+  readonly backButton?: string;
+  readonly examplesTitle?: string;
+}
+
+export interface TextInputScreenConfig {
+  readonly minLength?: number;
+  readonly maxLength?: number;
+  readonly multiline?: boolean;
+}
+
+export interface TextInputScreenProps {
+  readonly stepId: string;
+  readonly translations: TextInputScreenTranslations;
+  readonly config?: TextInputScreenConfig;
+  readonly examplePrompts?: string[];
+  readonly initialValue?: string;
+  readonly onBack: () => void;
+  readonly onContinue: (text: string) => void;
+}
+
+export const TextInputScreen: React.FC<TextInputScreenProps> = ({
+  stepId: _stepId,
+  translations,
+  config,
+  examplePrompts = [],
+  initialValue = "",
+  onBack,
+  onContinue,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [text, setText] = useState(initialValue);
+
+  const minLength = config?.minLength ?? 3;
+  const maxLength = config?.maxLength ?? 1000;
+  const canContinue = text.trim().length >= minLength;
+
+  const handleContinue = useCallback(() => {
+    if (canContinue) {
+      onContinue(text.trim());
+    }
+  }, [canContinue, text, onContinue]);
+
+  const handleExampleSelect = useCallback((example: string) => {
+    setText(example);
+  }, []);
+
+  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>
+
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={{ padding: tokens.spacing.md }}
+        keyboardShouldPersistTaps="handled"
+      >
+        <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>
+          {translations.title}
+        </AtomicText>
+
+        {translations.subtitle ? (
+          <AtomicText
+            type="bodyMedium"
+            color="textSecondary"
+            style={{ marginBottom: tokens.spacing.lg }}
+          >
+            {translations.subtitle}
+          </AtomicText>
+        ) : null}
+
+        <View
+          style={[
+            styles.inputContainer,
+            {
+              backgroundColor: tokens.colors.backgroundSecondary,
+              borderRadius: tokens.borders.radius.md,
+              borderColor: tokens.colors.border,
+            },
+          ]}
+        >
+          <TextInput
+            style={[
+              styles.textInput,
+              {
+                color: tokens.colors.textPrimary,
+                minHeight: config?.multiline ? 120 : 48,
+              },
+            ]}
+            placeholder={translations.placeholder}
+            placeholderTextColor={tokens.colors.textTertiary}
+            value={text}
+            onChangeText={setText}
+            multiline={config?.multiline ?? true}
+            maxLength={maxLength}
+            textAlignVertical="top"
+          />
+          <AtomicText
+            type="bodySmall"
+            color="textTertiary"
+            style={styles.charCount}
+          >
+            {text.length}/{maxLength}
+          </AtomicText>
+        </View>
+
+        {examplePrompts.length > 0 && translations.examplesTitle ? (
+          <View style={{ marginTop: tokens.spacing.lg }}>
+            <AtomicText
+              type="labelLarge"
+              color="textSecondary"
+              style={{ marginBottom: tokens.spacing.sm }}
+            >
+              {translations.examplesTitle}
+            </AtomicText>
+            {examplePrompts.slice(0, 4).map((example, index) => (
+              <AtomicButton
+                key={index}
+                variant="outline"
+                size="sm"
+                onPress={() => handleExampleSelect(example)}
+                style={{ marginBottom: tokens.spacing.xs }}
+              >
+                {example.length > 50 ? `${example.slice(0, 50)}...` : example}
+              </AtomicButton>
+            ))}
+          </View>
+        ) : null}
+      </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>
+    </View>
+  );
+};
+
+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,
+  },
+  inputContainer: {
+    borderWidth: 1,
+    padding: 12,
+  },
+  textInput: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  charCount: {
+    textAlign: "right",
+    marginTop: 4,
+  },
+  footer: {
+    borderTopWidth: 1,
+    borderTopColor: "rgba(0,0,0,0.1)",
+  },
+  continueButton: {
+    width: "100%",
+  },
+});

package/src/domains/generation/wizard/presentation/screens/index.ts

@@ -5,3 +5,9 @@ export type {
   PhotoUploadScreenConfig,
   PhotoUploadScreenProps,
 } from "./GenericPhotoUploadScreen";
+export { TextInputScreen } from "./TextInputScreen";
+export type {
+  TextInputScreenTranslations,
+  TextInputScreenConfig,
+  TextInputScreenProps,
+} from "./TextInputScreen";