@umituz/react-native-ai-generation-content 1.24.1 → 1.24.2
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-ai-generation-content",
|
|
3
|
-
"version": "1.24.
|
|
3
|
+
"version": "1.24.2",
|
|
4
4
|
"description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"types": "src/index.ts",
|
|
@@ -52,6 +52,9 @@ export type {
|
|
|
52
52
|
PhotoUploadScreenTranslations,
|
|
53
53
|
} from "./presentation/screens/GenericPhotoUploadScreen";
|
|
54
54
|
|
|
55
|
+
export { GeneratingScreen } from "./presentation/screens/GeneratingScreen";
|
|
56
|
+
export type { GeneratingScreenProps } from "./presentation/screens/GeneratingScreen";
|
|
57
|
+
|
|
55
58
|
// Presentation - Hooks
|
|
56
59
|
export { usePhotoUploadState } from "./presentation/hooks/usePhotoUploadState";
|
|
57
60
|
export type {
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generic Generating Screen
|
|
3
|
+
* Shows progress while AI generates content
|
|
4
|
+
* Used by ALL features - NO feature-specific code!
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import React from "react";
|
|
8
|
+
import { View, StyleSheet, ActivityIndicator } from "react-native";
|
|
9
|
+
import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
|
|
10
|
+
|
|
11
|
+
export interface GeneratingScreenProps {
|
|
12
|
+
readonly progress: number;
|
|
13
|
+
readonly scenario?: {
|
|
14
|
+
readonly id: string;
|
|
15
|
+
readonly title?: string;
|
|
16
|
+
};
|
|
17
|
+
readonly t: (key: string) => string;
|
|
18
|
+
readonly onCancel?: () => void;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
|
|
22
|
+
progress,
|
|
23
|
+
scenario,
|
|
24
|
+
t,
|
|
25
|
+
onCancel,
|
|
26
|
+
}) => {
|
|
27
|
+
const tokens = useAppDesignTokens();
|
|
28
|
+
|
|
29
|
+
if (typeof __DEV__ !== "undefined" && __DEV__) {
|
|
30
|
+
console.log("[GeneratingScreen] Rendering", {
|
|
31
|
+
progress,
|
|
32
|
+
scenarioId: scenario?.id,
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
|
|
38
|
+
<View style={styles.content}>
|
|
39
|
+
<ActivityIndicator size="large" color={tokens.colors.primary} />
|
|
40
|
+
|
|
41
|
+
<AtomicText type="heading2" style={styles.title}>
|
|
42
|
+
{t("generator.title")}
|
|
43
|
+
</AtomicText>
|
|
44
|
+
|
|
45
|
+
<AtomicText type="body" style={[styles.message, { color: tokens.colors.textSecondary }]}>
|
|
46
|
+
{t("generator.waitMessage")}
|
|
47
|
+
</AtomicText>
|
|
48
|
+
|
|
49
|
+
{/* Progress Bar */}
|
|
50
|
+
<View style={styles.progressContainer}>
|
|
51
|
+
<View style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceVariant }]}>
|
|
52
|
+
<View
|
|
53
|
+
style={[
|
|
54
|
+
styles.progressFill,
|
|
55
|
+
{
|
|
56
|
+
backgroundColor: tokens.colors.primary,
|
|
57
|
+
width: `${Math.min(100, Math.max(0, progress))}%`,
|
|
58
|
+
},
|
|
59
|
+
]}
|
|
60
|
+
/>
|
|
61
|
+
</View>
|
|
62
|
+
<AtomicText type="caption" style={[styles.progressText, { color: tokens.colors.textSecondary }]}>
|
|
63
|
+
{Math.round(progress)}%
|
|
64
|
+
</AtomicText>
|
|
65
|
+
</View>
|
|
66
|
+
|
|
67
|
+
{/* Scenario Info */}
|
|
68
|
+
{scenario && (
|
|
69
|
+
<AtomicText type="caption" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
|
|
70
|
+
{scenario.title || scenario.id}
|
|
71
|
+
</AtomicText>
|
|
72
|
+
)}
|
|
73
|
+
|
|
74
|
+
{/* Hint */}
|
|
75
|
+
<AtomicText type="caption" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
|
|
76
|
+
{t("generator.hint")}
|
|
77
|
+
</AtomicText>
|
|
78
|
+
</View>
|
|
79
|
+
</View>
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
const styles = StyleSheet.create({
|
|
84
|
+
container: {
|
|
85
|
+
flex: 1,
|
|
86
|
+
justifyContent: "center",
|
|
87
|
+
alignItems: "center",
|
|
88
|
+
},
|
|
89
|
+
content: {
|
|
90
|
+
width: "80%",
|
|
91
|
+
maxWidth: 400,
|
|
92
|
+
alignItems: "center",
|
|
93
|
+
gap: 16,
|
|
94
|
+
},
|
|
95
|
+
title: {
|
|
96
|
+
textAlign: "center",
|
|
97
|
+
marginTop: 24,
|
|
98
|
+
},
|
|
99
|
+
message: {
|
|
100
|
+
textAlign: "center",
|
|
101
|
+
},
|
|
102
|
+
progressContainer: {
|
|
103
|
+
width: "100%",
|
|
104
|
+
marginTop: 24,
|
|
105
|
+
gap: 8,
|
|
106
|
+
},
|
|
107
|
+
progressBar: {
|
|
108
|
+
height: 8,
|
|
109
|
+
borderRadius: 4,
|
|
110
|
+
overflow: "hidden",
|
|
111
|
+
},
|
|
112
|
+
progressFill: {
|
|
113
|
+
height: "100%",
|
|
114
|
+
borderRadius: 4,
|
|
115
|
+
},
|
|
116
|
+
progressText: {
|
|
117
|
+
textAlign: "center",
|
|
118
|
+
},
|
|
119
|
+
hint: {
|
|
120
|
+
textAlign: "center",
|
|
121
|
+
marginTop: 8,
|
|
122
|
+
},
|
|
123
|
+
});
|