@umituz/react-native-ai-generation-content 1.17.3 → 1.17.4

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/presentation/components/GenerationProgressContent.tsx +137 -99
  3. package/src/presentation/components/GenerationProgressModal.tsx +62 -52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-ai-generation-content",
3
- "version": "1.17.3",
3
+ "version": "1.17.4",
4
4
  "description": "Provider-agnostic AI generation orchestration for React Native",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
package/src/presentation/components/GenerationProgressContent.tsx CHANGED
@@ -1,123 +1,161 @@
1
1
  /**
2
2
  * GenerationProgressContent
3
3
  * Content for the AI generation progress modal
4
+ * Props-driven for 100+ apps compatibility
4
5
  */
5
6
 
6
7
  import React from "react";
7
8
  import { View, TouchableOpacity, StyleSheet } from "react-native";
8
- import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
9
+ import {
10
+ AtomicText,
11
+ AtomicIcon,
12
+ useAppDesignTokens,
13
+ } from "@umituz/react-native-design-system";
9
14
  import { GenerationProgressBar } from "./GenerationProgressBar";
10
15
 
11
16
  export interface GenerationProgressContentProps {
12
- progress: number;
13
- title?: string;
14
- message?: string;
15
- hint?: string;
16
- dismissLabel?: string;
17
- onDismiss?: () => void;
18
- backgroundColor?: string;
19
- textColor?: string;
20
- progressColor?: string;
21
- progressBackgroundColor?: string;
22
- dismissButtonColor?: string;
17
+ readonly progress: number;
18
+ readonly icon?: string;
19
+ readonly title?: string;
20
+ readonly message?: string;
21
+ readonly hint?: string;
22
+ readonly dismissLabel?: string;
23
+ readonly onDismiss?: () => void;
24
+ readonly backgroundColor?: string;
25
+ readonly textColor?: string;
26
+ readonly hintColor?: string;
27
+ readonly progressColor?: string;
28
+ readonly progressBackgroundColor?: string;
29
+ readonly dismissButtonColor?: string;
23
30
  }
24
31
 
25
32
  export const GenerationProgressContent: React.FC<
26
- GenerationProgressContentProps
33
+ GenerationProgressContentProps
27
34
  > = ({
28
- progress,
29
- title,
30
- message,
31
- hint,
32
- dismissLabel,
33
- onDismiss,
34
- backgroundColor,
35
- textColor,
36
- progressColor,
37
- progressBackgroundColor,
38
- dismissButtonColor,
35
+ progress,
36
+ icon,
37
+ title,
38
+ message,
39
+ hint,
40
+ dismissLabel,
41
+ onDismiss,
42
+ backgroundColor,
43
+ textColor,
44
+ hintColor,
45
+ progressColor,
46
+ progressBackgroundColor,
47
+ dismissButtonColor,
39
48
  }) => {
40
- const tokens = useAppDesignTokens();
49
+ const tokens = useAppDesignTokens();
41
50
 
42
- const activeTextColor = textColor || tokens.colors.textPrimary;
43
- const activeBgColor = backgroundColor || tokens.colors.surface;
51
+ const activeTextColor = textColor || tokens.colors.textPrimary;
52
+ const activeBgColor = backgroundColor || tokens.colors.surface;
53
+ const activeHintColor = hintColor || tokens.colors.textTertiary;
44
54
 
45
- return (
46
- <View style={[styles.modal, { backgroundColor: activeBgColor }]}>
47
- {title && (
48
- <AtomicText style={[styles.title, { color: activeTextColor }]}>{title}</AtomicText>
49
- )}
55
+ return (
56
+ <View
57
+ style={[
58
+ styles.modal,
59
+ {
60
+ backgroundColor: activeBgColor,
61
+ borderColor: tokens.colors.borderLight,
62
+ },
63
+ ]}
64
+ >
65
+ {icon && (
66
+ <View style={styles.iconContainer}>
67
+ <AtomicIcon name={icon} size="xl" color="primary" />
68
+ </View>
69
+ )}
50
70
 
51
- {message && (
52
- <AtomicText style={[styles.message, { color: activeTextColor }]}>
53
- {message}
54
- </AtomicText>
55
- )}
71
+ {title && (
72
+ <AtomicText
73
+ type="headlineSmall"
74
+ style={[styles.title, { color: activeTextColor }]}
75
+ >
76
+ {title}
77
+ </AtomicText>
78
+ )}
56
79
 
57
- <GenerationProgressBar
58
- progress={progress}
59
- textColor={activeTextColor}
60
- progressColor={progressColor}
61
- backgroundColor={progressBackgroundColor}
62
- />
80
+ {message && (
81
+ <AtomicText
82
+ type="bodyMedium"
83
+ style={[styles.message, { color: tokens.colors.textSecondary }]}
84
+ >
85
+ {message}
86
+ </AtomicText>
87
+ )}
63
88
 
64
- {hint && (
65
- <AtomicText style={[styles.hint, { color: activeTextColor }]}>{hint}</AtomicText>
66
- )}
89
+ <GenerationProgressBar
90
+ progress={progress}
91
+ textColor={tokens.colors.primary}
92
+ progressColor={progressColor}
93
+ backgroundColor={progressBackgroundColor}
94
+ />
67
95
 
68
- {onDismiss && (
69
- <TouchableOpacity
70
- style={[
71
- styles.dismissButton,
72
- { backgroundColor: dismissButtonColor || tokens.colors.primary },
73
- ]}
74
- onPress={onDismiss}
75
- >
76
- <AtomicText style={styles.dismissText}>{dismissLabel || "OK"}</AtomicText>
77
- </TouchableOpacity>
78
- )}
79
- </View>
80
- );
81
- };
96
+ {hint && (
97
+ <AtomicText
98
+ type="bodySmall"
99
+ style={[styles.hint, { color: activeHintColor }]}
100
+ >
101
+ {hint}
102
+ </AtomicText>
103
+ )}
104
+
105
+ {onDismiss && (
106
+ <TouchableOpacity
107
+ style={[
108
+ styles.dismissButton,
109
+ { backgroundColor: dismissButtonColor || tokens.colors.primary },
110
+ ]}
111
+ onPress={onDismiss}
112
+ >
113
+ <AtomicText type="bodyMedium" style={styles.dismissText}>
114
+ {dismissLabel || "OK"}
115
+ </AtomicText>
116
+ </TouchableOpacity>
117
+ )}
118
+ </View>
119
+ );
120
+ };
82
121
 
83
122
  const styles = StyleSheet.create({
84
- modal: {
85
- width: "100%",
86
- maxWidth: 400,
87
- borderRadius: 24,
88
- padding: 32,
89
- alignItems: "center",
90
- },
91
- title: {
92
- fontSize: 20,
93
- fontWeight: "700",
94
- marginBottom: 12,
95
- textAlign: "center",
96
- },
97
- message: {
98
- fontSize: 16,
99
- marginBottom: 24,
100
- textAlign: "center",
101
- opacity: 0.8,
102
- },
103
- hint: {
104
- fontSize: 14,
105
- textAlign: "center",
106
- fontStyle: "italic",
107
- opacity: 0.6,
108
- marginBottom: 16,
109
- },
110
- dismissButton: {
111
- marginTop: 8,
112
- paddingVertical: 14,
113
- paddingHorizontal: 32,
114
- borderRadius: 12,
115
- minWidth: 140,
116
- alignItems: "center",
117
- },
118
- dismissText: {
119
- color: "#FFFFFF",
120
- fontSize: 16,
121
- fontWeight: "600",
122
- },
123
+ modal: {
124
+ width: "100%",
125
+ maxWidth: 380,
126
+ borderRadius: 24,
127
+ padding: 32,
128
+ borderWidth: 1,
129
+ alignItems: "center",
130
+ },
131
+ iconContainer: {
132
+ marginBottom: 20,
133
+ },
134
+ title: {
135
+ fontWeight: "700",
136
+ marginBottom: 8,
137
+ textAlign: "center",
138
+ },
139
+ message: {
140
+ marginBottom: 28,
141
+ textAlign: "center",
142
+ lineHeight: 20,
143
+ },
144
+ hint: {
145
+ textAlign: "center",
146
+ lineHeight: 18,
147
+ paddingHorizontal: 8,
148
+ },
149
+ dismissButton: {
150
+ marginTop: 16,
151
+ paddingVertical: 14,
152
+ paddingHorizontal: 32,
153
+ borderRadius: 12,
154
+ minWidth: 140,
155
+ alignItems: "center",
156
+ },
157
+ dismissText: {
158
+ color: "#FFFFFF",
159
+ fontWeight: "600",
160
+ },
123
161
  });
package/src/presentation/components/GenerationProgressModal.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * GenerationProgressModal
3
3
  * Generic AI generation progress modal with customizable rendering
4
+ * Props-driven for 100+ apps compatibility
4
5
  */
5
6
 
6
7
  import React from "react";
@@ -8,23 +9,26 @@ import { Modal, View, StyleSheet } from "react-native";
8
9
  import { useAppDesignTokens } from "@umituz/react-native-design-system";
9
10
  import {
10
11
  GenerationProgressContent,
11
- GenerationProgressContentProps,
12
+ type GenerationProgressContentProps,
12
13
  } from "./GenerationProgressContent";
13
14
 
14
15
  export interface GenerationProgressRenderProps {
15
- progress: number;
16
- title?: string;
17
- message?: string;
18
- hint?: string;
19
- onDismiss?: () => void;
16
+ readonly progress: number;
17
+ readonly icon?: string;
18
+ readonly title?: string;
19
+ readonly message?: string;
20
+ readonly hint?: string;
21
+ readonly onDismiss?: () => void;
20
22
  }
21
23
 
22
24
  export interface GenerationProgressModalProps
23
25
  extends Omit<GenerationProgressContentProps, "backgroundColor"> {
24
- visible: boolean;
25
- overlayColor?: string;
26
- modalBackgroundColor?: string;
27
- renderContent?: (props: GenerationProgressRenderProps) => React.ReactNode;
26
+ readonly visible: boolean;
27
+ readonly overlayColor?: string;
28
+ readonly modalBackgroundColor?: string;
29
+ readonly renderContent?: (
30
+ props: GenerationProgressRenderProps
31
+ ) => React.ReactNode;
28
32
  }
29
33
 
30
34
  export const GenerationProgressModal: React.FC<
@@ -32,67 +36,73 @@ export const GenerationProgressModal: React.FC<
32
36
  > = ({
33
37
  visible,
34
38
  progress,
39
+ icon,
35
40
  title,
36
41
  message,
37
42
  hint,
38
43
  dismissLabel,
39
44
  onDismiss,
40
- overlayColor = "rgba(0, 0, 0, 0.7)",
45
+ overlayColor = "rgba(0, 0, 0, 0.75)",
41
46
  modalBackgroundColor,
42
47
  textColor,
48
+ hintColor,
43
49
  progressColor,
44
50
  progressBackgroundColor,
45
51
  dismissButtonColor,
46
52
  renderContent,
47
53
  }) => {
48
- const tokens = useAppDesignTokens();
49
- const clampedProgress = Math.max(0, Math.min(100, progress));
54
+ const tokens = useAppDesignTokens();
55
+ const clampedProgress = Math.max(0, Math.min(100, progress));
50
56
 
51
- const content = renderContent ? (
52
- renderContent({
53
- progress: clampedProgress,
54
- title,
55
- message,
56
- hint,
57
- onDismiss,
58
- })
59
- ) : (
60
- <GenerationProgressContent
61
- progress={clampedProgress}
62
- title={title}
63
- message={message}
64
- hint={hint}
65
- dismissLabel={dismissLabel}
66
- onDismiss={onDismiss}
67
- backgroundColor={modalBackgroundColor || tokens.colors.surface}
68
- textColor={textColor || tokens.colors.textPrimary}
69
- progressColor={progressColor || tokens.colors.primary}
70
- progressBackgroundColor={
71
- progressBackgroundColor || tokens.colors.borderLight
72
- }
73
- dismissButtonColor={dismissButtonColor || tokens.colors.primary}
74
- />
75
- );
57
+ const content = renderContent ? (
58
+ renderContent({
59
+ progress: clampedProgress,
60
+ icon,
61
+ title,
62
+ message,
63
+ hint,
64
+ onDismiss,
65
+ })
66
+ ) : (
67
+ <GenerationProgressContent
68
+ progress={clampedProgress}
69
+ icon={icon}
70
+ title={title}
71
+ message={message}
72
+ hint={hint}
73
+ dismissLabel={dismissLabel}
74
+ onDismiss={onDismiss}
75
+ backgroundColor={modalBackgroundColor || tokens.colors.surface}
76
+ textColor={textColor || tokens.colors.textPrimary}
77
+ hintColor={hintColor || tokens.colors.textTertiary}
78
+ progressColor={progressColor || tokens.colors.primary}
79
+ progressBackgroundColor={
80
+ progressBackgroundColor || tokens.colors.surfaceVariant
81
+ }
82
+ dismissButtonColor={dismissButtonColor || tokens.colors.primary}
83
+ />
84
+ );
76
85
 
77
- return (
78
- <Modal
79
- visible={visible}
80
- transparent
81
- animationType="fade"
82
- statusBarTranslucent
83
- >
84
- <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
85
- {content}
86
- </View>
87
- </Modal>
88
- );
89
- };
86
+ return (
87
+ <Modal
88
+ visible={visible}
89
+ transparent
90
+ animationType="fade"
91
+ statusBarTranslucent
92
+ onRequestClose={onDismiss}
93
+ >
94
+ <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
95
+ {content}
96
+ </View>
97
+ </Modal>
98
+ );
99
+ };
90
100
 
91
101
  const styles = StyleSheet.create({
92
102
  overlay: {
93
103
  flex: 1,
94
104
  justifyContent: "center",
95
105
  alignItems: "center",
96
- padding: 20,
106
+ padding: 24,
97
107
  },
98
108
  });