@originallyus/feedback-rn-sdk 4.0.0-beta.2 → 4.0.0-beta.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.

Potentially problematic release.

This version of @originallyus/feedback-rn-sdk might be problematic. Click here for more details.

Files changed (36) hide show
  1. package/lib/typescript/AIAFeedback.d.ts +1 -1
  2. package/lib/typescript/AIAFeedback.d.ts.map +1 -1
  3. package/lib/typescript/index.d.ts +16 -16
  4. package/lib/typescript/index.d.ts.map +1 -1
  5. package/lib/typescript/service/feedbackService.d.ts +1 -1
  6. package/lib/typescript/service/feedbackService.d.ts.map +1 -1
  7. package/lib/typescript/utils/networking.d.ts +2 -2
  8. package/lib/typescript/utils/networking.d.ts.map +1 -1
  9. package/package.json +5 -3
  10. package/src/AIAContentUsefulness.tsx +0 -296
  11. package/src/AIAFeedback.tsx +0 -354
  12. package/src/AIAFeedbackForm.tsx +0 -267
  13. package/src/AIAFeedbackSplash.tsx +0 -49
  14. package/src/AIAFeedbackStyles.ts +0 -311
  15. package/src/AIAFeedbackSuccess.tsx +0 -67
  16. package/src/assets/CheckIcon.tsx +0 -18
  17. package/src/assets/CloseIcon.tsx +0 -18
  18. package/src/assets/ErrorIcon.tsx +0 -18
  19. package/src/assets/PlusIcon.tsx +0 -18
  20. package/src/assets/StarIcon.tsx +0 -18
  21. package/src/component/Button.tsx +0 -68
  22. package/src/component/ButtonSubmit.tsx +0 -335
  23. package/src/component/Input.tsx +0 -288
  24. package/src/component/MultiSelectButtons.tsx +0 -272
  25. package/src/component/README.md +0 -215
  26. package/src/component/READMEVI.md +0 -192
  27. package/src/component/Rating.tsx +0 -248
  28. package/src/component/RatingNumber.tsx +0 -421
  29. package/src/component/Textarea.tsx +0 -282
  30. package/src/component/YesNoButtons.tsx +0 -236
  31. package/src/index.tsx +0 -33
  32. package/src/service/feedbackService.ts +0 -108
  33. package/src/utils/common.ts +0 -241
  34. package/src/utils/constants.ts +0 -60
  35. package/src/utils/index.ts +0 -167
  36. package/src/utils/networking.ts +0 -134
package/src/component/READMEVI.md DELETED
@@ -1,192 +0,0 @@
1
- # Components – Tài liệu props
2
-
3
- Tài liệu các component và props của `@originallyus/feedback-rn-sdk`. Props dạng bảng: **Prop** | **Type** | **Default** | **Mô tả**.
4
-
5
- ---
6
-
7
- ## Button
8
-
9
- Nút bấm cơ bản (Pressable + Text).
10
-
11
- | Prop | Type | Default | Mô tả |
12
- | ----------- | ------------ | ------- | ----------------------------------------- |
13
- | `title` | `string` | — | **Bắt buộc.** Nội dung hiển thị trên nút. |
14
- | `onPress` | `() => void` | — | **Bắt buộc.** Callback khi bấm nút. |
15
- | `disabled` | `boolean` | `false` | Vô hiệu hóa nút. |
16
- | `style` | `ViewStyle` | — | Style cho container nút. |
17
- | `textStyle` | `TextStyle` | — | Style cho chữ. |
18
-
19
- ---
20
-
21
- ## ButtonSubmit
22
-
23
- Nút submit dùng trong form: primary (nền đỏ) hoặc secondary (viền + chữ đỏ, nền hồng nhạt). Hỗ trợ loading, icon trái, full width / dynamic width.
24
-
25
- | Prop | Type | Default | Mô tả |
26
- | ------------------------- | -------------------------- | ----------- | ----------------------------------------------------------- |
27
- | `onPress` | `() => void` | — | **Bắt buộc.** Callback khi bấm. |
28
- | `title` | `string` | — | **Bắt buộc.** Nội dung nút. |
29
- | `leftIcon` | `string` | — | Ký tự hiển thị bên trái title (vd: `"+"`, `"✓"`). |
30
- | `variant` | `'primary' \| 'secondary'` | `'primary'` | primary = nền đỏ; secondary = viền + chữ đỏ, nền hồng nhạt. |
31
- | `fullWidth` | `boolean` | `true` | `true` = full width, `false` = rộng theo nội dung. |
32
- | `disabled` | `boolean` | `false` | Vô hiệu hóa nút. |
33
- | `loading` | `boolean` | `false` | Hiển thị ActivityIndicator, chặn bấm. |
34
- | `appWidth` | `number` | — | **Bắt buộc.** Chiều rộng màn hình (để tính margin). |
35
- | `isTabletInstrusive` | `boolean` | — | Tablet: nút cố định 200px thay vì full width. |
36
- | `fontFamily` | `string` | — | Font chữ. |
37
- | `fontSize` | `number` | `16` | Cỡ chữ. |
38
- | `textColor` | `string` | — | Màu chữ (primary = trắng, secondary = đỏ). |
39
- | `backgroundColor` | `string` | — | Màu nền. |
40
- | `pressedColor` | `string` | — | Màu khi bấm giữ. |
41
- | `disabledBackgroundColor` | `string` | — | Màu nền khi disabled. |
42
- | `disabledTextColor` | `string` | — | Màu chữ khi disabled. |
43
- | `borderColor` | `string` | — | Màu viền (secondary). |
44
- | `containerStyle` | `ViewStyle` | — | Style container bọc nút. |
45
- | `style` | `ViewStyle` | — | Style cho Pressable. |
46
- | `textStyle` | `TextStyle` | — | Style cho Text. |
47
-
48
- ---
49
-
50
- ## RatingNumber
51
-
52
- Thang đánh giá số: hàng nút từ `rating_min` đến `rating_max`, có label trái/phải. Nút full width theo device, hỗ trợ size preset và compact.
53
-
54
- | Prop | Type | Default | Mô tả |
55
- | ------------------------------------- | -------------------------------- | ----------- | ------------------------------------------------------------ |
56
- | `scale_label_color` | `string` | — | **Bắt buộc.** Màu chữ label trái/phải. |
57
- | `scale_label_left` | `string` | — | Label bên trái (vd: "Strongly disagree"). |
58
- | `scale_label_right` | `string` | — | Label bên phải (vd: "Strongly agree"). |
59
- | `scale_label_font` | `string` | — | Font label. |
60
- | `scale_label_fontsize` | `number` | — | Cỡ chữ label. |
61
- | `handlePressRating` | `(rating: number) => void` | — | **Bắt buộc.** Callback khi chọn số (rating_min..rating_max). |
62
- | `numStar` | `number` | — | **Bắt buộc.** Giá trị đang chọn. |
63
- | `rating_min` | `number` | — | **Bắt buộc.** Số nhỏ nhất. |
64
- | `rating_max` | `number` | — | **Bắt buộc.** Số lớn nhất. |
65
- | `appWidth` | `number` | — | **Bắt buộc.** Chiều rộng app (tính layout). |
66
- | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Preset chiều cao & spacing. |
67
- | `compact` | `boolean` | `true` | `true` = nút dính khít (không gap); `false` = có gap. |
68
- | `error` | `string` | — | Thông báo lỗi; viền đỏ nút + text dưới. |
69
- | `errorBorderColor` | `string` | `'#D32F2F'` | Màu viền khi có error. |
70
- | `rating_number_font` | `string` | — | Font số trong nút. |
71
- | `rating_number_fontsize` | `number` | — | Cỡ chữ số. |
72
- | `rating_number_bg_color` | `string` | — | Màu nền nút (chưa chọn). |
73
- | `rating_number_border_color` | `string` | — | Màu viền nút (chưa chọn). |
74
- | `rating_number_selected_bg_color` | `string` | — | Màu nền khi chọn (mặc định #082065). |
75
- | `rating_number_selected_border_color` | `string` | — | Màu viền khi chọn. |
76
- | `rating_number_selected_text_color` | `string` | — | Màu chữ khi chọn. |
77
- | `rating_number_text_color` | `string` | — | Màu chữ khi chưa chọn. |
78
- | `errorStyle` | `TextStyle` | — | Style dòng lỗi. |
79
-
80
- ---
81
-
82
- ## Textarea
83
-
84
- Ô nhập nhiều dòng: label trên, note dưới, placeholder, tùy chọn đếm ký tự (maxLength). Có trạng thái focus và error.
85
-
86
- | Prop | Type | Default | Mô tả |
87
- | ---------------------- | ------------------------ | --------------- | -------------------------------------------------------- |
88
- | `value` | `string` | — | **Bắt buộc.** Giá trị hiện tại. |
89
- | `onChangeText` | `(text: string) => void` | — | **Bắt buộc.** Callback khi text thay đổi. |
90
- | `placeholder` | `string` | `'Placeholder'` | Placeholder trong ô. |
91
- | `label` | `string` | — | Label phía trên. |
92
- | `note` | `string` | — | Ghi chú nhỏ phía dưới ô. |
93
- | `error` | `string` | — | Thông báo lỗi; viền đỏ + text dưới. |
94
- | `maxLength` | `number` | — | Số ký tự tối đa; hiển thị đếm 0/maxLength góc phải dưới. |
95
- | `appWidth` | `number` | — | **Bắt buộc.** Chiều rộng app (padding). |
96
- | `minHeight` | `number` | `120` | Chiều cao tối thiểu ô nhập. |
97
- | `backgroundColor` | `string` | — | Màu nền ô. |
98
- | `borderColor` | `string` | — | Màu viền (chưa focus). |
99
- | `focusBackgroundColor` | `string` | — | Màu nền khi focus. |
100
- | `focusBorderColor` | `string` | — | Màu viền khi focus. |
101
- | `errorBorderColor` | `string` | `'#D32F2F'` | Màu viền khi có error. |
102
- | `fontFamily` | `string` | — | Font. |
103
- | `fontSize` | `number` | `16` | Cỡ chữ. |
104
- | `placeholderTextColor` | `string` | — | Màu placeholder. |
105
- | `textColor` | `string` | — | Màu chữ. |
106
- | `labelStyle` | `TextStyle` | — | Style label. |
107
- | `captionStyle` | `TextStyle` | — | Style caption. |
108
- | `noteStyle` | `TextStyle` | — | Style note. |
109
- | `errorStyle` | `TextStyle` | — | Style lỗi. |
110
- | `counterStyle` | `TextStyle` | — | Style đếm ký tự. |
111
- | `style` | `ViewStyle` | — | Style wrapper. |
112
-
113
- ---
114
-
115
- ## Input
116
-
117
- Ô nhập một dòng: cấu trúc giống Textarea (label, note, error), có tùy chọn đếm ký tự (counter) khi có `maxLength`.
118
-
119
- | Prop | Type | Default | Mô tả |
120
- | ---------------------- | ------------------------ | --------------- | ---------------------------------------------------- |
121
- | `value` | `string` | — | **Bắt buộc.** Giá trị hiện tại. |
122
- | `onChangeText` | `(text: string) => void` | — | **Bắt buộc.** Callback khi text thay đổi. |
123
- | `placeholder` | `string` | `'Placeholder'` | Placeholder. |
124
- | `label` | `string` | — | Label phía trên. |
125
- | `note` | `string` | — | Ghi chú phía dưới. |
126
- | `error` | `string` | — | Thông báo lỗi; viền đỏ + text dưới. |
127
- | `maxLength` | `number` | — | Số ký tự tối đa. |
128
- | `showCounter` | `boolean` | `true` | Hiện đếm 0/maxLength khi có maxLength; `false` = ẩn. |
129
- | `appWidth` | `number` | — | **Bắt buộc.** Chiều rộng app (padding). |
130
- | `backgroundColor` | `string` | — | Màu nền. |
131
- | `borderColor` | `string` | — | Màu viền. |
132
- | `focusBackgroundColor` | `string` | — | Màu nền khi focus. |
133
- | `focusBorderColor` | `string` | — | Màu viền khi focus. |
134
- | `errorBorderColor` | `string` | `'#D32F2F'` | Màu viền khi error. |
135
- | `fontFamily` | `string` | — | Font. |
136
- | `fontSize` | `number` | `16` | Cỡ chữ. |
137
- | `placeholderTextColor` | `string` | — | Màu placeholder. |
138
- | `textColor` | `string` | — | Màu chữ. |
139
- | `labelStyle` | `TextStyle` | — | Style label. |
140
- | `noteStyle` | `TextStyle` | — | Style note. |
141
- | `errorStyle` | `TextStyle` | — | Style lỗi. |
142
- | `counterStyle` | `TextStyle` | — | Style counter. |
143
- | `style` | `ViewStyle` | — | Style wrapper. |
144
-
145
- ---
146
-
147
- ## YesNoButtons
148
-
149
- Hai nút Yes / No dùng ButtonSubmit. Chọn một trong hai; có thể tùy kiểu selected (primary = nền đỏ, secondary = nền nhạt + viền đậm).
150
-
151
- | Prop | Type | Default | Mô tả |
152
- | ------------------------- | -------------------------------- | ----------- | ------------------------------------------------------------ |
153
- | `question` | `string` | — | **Bắt buộc.** Câu hỏi phía trên. |
154
- | `value` | `'yes' \| 'no' \| null` | — | **Bắt buộc.** Giá trị đang chọn. |
155
- | `onSelect` | `(value: 'yes' \| 'no') => void` | — | **Bắt buộc.** Callback khi chọn. |
156
- | `selectedVariant` | `'primary' \| 'secondary'` | `'primary'` | primary = nền đỏ chữ trắng; secondary = nền nhạt + viền đậm. |
157
- | `yesLabel` | `string` | `'Yes'` | Nhãn nút Yes. |
158
- | `noLabel` | `string` | `'No'` | Nhãn nút No. |
159
- | `error` | `string` | — | Thông báo lỗi; hiển thị dưới 2 nút với "!". |
160
- | `appWidth` | `number` | — | **Bắt buộc.** Chiều rộng app (cho ButtonSubmit). |
161
- | `selectedBackgroundColor` | `string` | — | Override màu nền khi chọn (secondary). |
162
- | `selectedBorderColor` | `string` | — | Override màu viền khi chọn (secondary). |
163
- | `selectedTextColor` | `string` | — | Override màu chữ khi chọn (secondary). |
164
- | `questionStyle` | `TextStyle` | — | Style câu hỏi. |
165
- | `errorStyle` | `TextStyle` | — | Style dòng lỗi. |
166
- | `errorColor` | `string` | — | Màu lỗi (mặc định đỏ). |
167
- | `style` | `ViewStyle` | — | Style wrapper. |
168
-
169
- ---
170
-
171
- ## MultiSelectButtons
172
-
173
- Nhiều nút lựa chọn (tag): chọn nhiều option, layout wrap. Dùng ButtonSubmit; icon "+" / "✓" bên trái. Có variant selected: primary (nền đỏ) hoặc secondary (nền nhạt + viền đậm, chữ đen).
174
-
175
- | Prop | Type | Default | Mô tả |
176
- | ------------------------- | ------------------------------ | ------------- | ---------------------------------------------------------------------------------- |
177
- | `question` | `string` | — | **Bắt buộc.** Câu hỏi phía trên. |
178
- | `options` | `MultiSelectOption[]` | — | **Bắt buộc.** Danh sách lựa chọn. Mỗi phần tử: `{ value: string, label: string }`. |
179
- | `value` | `string[]` | — | **Bắt buộc.** Mảng value đang chọn. |
180
- | `onSelect` | `(selected: string[]) => void` | — | **Bắt buộc.** Callback khi thay đổi (toggle từng option). |
181
- | `appWidth` | `number` | — | **Bắt buộc.** Chiều rộng app. |
182
- | `selectedVariant` | `'primary' \| 'secondary'` | `'secondary'` | primary = nền đỏ chữ trắng; secondary = nền nhạt + viền xanh chữ đen. |
183
- | `error` | `string` | — | Thông báo lỗi; hiển thị dưới các nút. |
184
- | `selectedBackgroundColor` | `string` | — | Override màu nền khi chọn. |
185
- | `selectedBorderColor` | `string` | — | Override màu viền khi chọn. |
186
- | `selectedTextColor` | `string` | — | Override màu chữ khi chọn. |
187
- | `questionStyle` | `TextStyle` | — | Style câu hỏi. |
188
- | `errorStyle` | `TextStyle` | — | Style dòng lỗi. |
189
- | `errorColor` | `string` | — | Màu lỗi. |
190
- | `style` | `ViewStyle` | — | Style wrapper. |
191
-
192
- **MultiSelectOption:** `{ value: string; label: string }`
package/src/component/Rating.tsx DELETED
@@ -1,248 +0,0 @@
1
- import {memo, useMemo, useRef} from 'react'
2
- import {View, Text, StyleSheet, TouchableOpacity, Animated, type TextStyle, type ViewStyle} from 'react-native'
3
- import * as Haptics from 'expo-haptics'
4
- import * as f from '@utils/common'
5
- import {COLOR_STAR_NORMAL, COLOR_STAR_SELECTED, ERROR_COLOR, TEXT_DARK} from '@utils/constants'
6
- import StarIcon from '@/assets/StarIcon'
7
- import ErrorIcon from '@/assets/ErrorIcon'
8
-
9
- let pressRatingTimestamp: number | null = null
10
-
11
- interface ButtonStarProps {
12
- disabled: boolean
13
- onRate: () => void
14
- active?: boolean
15
- normalStarColor: string
16
- selectedStarColor: string
17
- }
18
-
19
- /**
20
- * Props for the star rating component.
21
- *
22
- * Renders a title, question and a row of tappable stars with optional error text.
23
- */
24
- export interface RatingProps {
25
- /**
26
- * Main title shown above the question.
27
- *
28
- * @default 'Help us get better'
29
- */
30
- title?: string
31
- /**
32
- * Question or subtitle shown above the stars.
33
- *
34
- * @default 'How was your experience today?'
35
- */
36
- question?: string
37
- /**
38
- * Current star value (1..`rating_max`).
39
- */
40
- value: number
41
- /**
42
- * Called when a star is selected.
43
- *
44
- * @param rating Selected value.
45
- */
46
- onRate: (rating: number) => void
47
- /**
48
- * Minimum star value.
49
- *
50
- * @default 1
51
- */
52
- rating_min?: number
53
- /**
54
- * Maximum star value.
55
- *
56
- * @default 5
57
- */
58
- rating_max?: number
59
- /**
60
- * When true, disables all star presses.
61
- *
62
- * @default false
63
- */
64
- disabled?: boolean
65
- /**
66
- * Error message; when present, shown below the stars.
67
- */
68
- error?: string
69
- /**
70
- * Color for unselected stars.
71
- *
72
- * @default '#D0D0D0'
73
- */
74
- normalStarColor?: string
75
- /**
76
- * Color for selected stars.
77
- *
78
- * @default '#F7C926'
79
- */
80
- selectedStarColor?: string
81
- /**
82
- * Style for the title text.
83
- */
84
- titleStyle?: TextStyle
85
- /**
86
- * Style for the question text.
87
- */
88
- questionStyle?: TextStyle
89
- /**
90
- * Style for the error text.
91
- */
92
- errorStyle?: TextStyle
93
- /**
94
- * Style for the outer wrapper.
95
- */
96
- style?: ViewStyle
97
- }
98
-
99
- const ButtonStar = memo((props: ButtonStarProps) => {
100
- const {disabled, onRate, active = false, normalStarColor, selectedStarColor} = props
101
-
102
- const springAnimated = useRef(new Animated.Value(0)).current
103
-
104
- const onPressStar = () => {
105
- const nowTimestamp = Date.now()
106
- if (pressRatingTimestamp && nowTimestamp - pressRatingTimestamp < 200) {
107
- return
108
- }
109
- pressRatingTimestamp = nowTimestamp
110
-
111
- Animated.sequence([
112
- Animated.timing(springAnimated, {
113
- toValue: 1,
114
- duration: 80,
115
- useNativeDriver: true,
116
- }),
117
- Animated.timing(springAnimated, {
118
- toValue: 0,
119
- duration: 80,
120
- useNativeDriver: true,
121
- }),
122
- ]).start()
123
- Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
124
- onRate()
125
- }
126
-
127
- const scaleStar = useMemo(
128
- () =>
129
- springAnimated.interpolate({
130
- inputRange: [0, 1],
131
- outputRange: [1, 1.5],
132
- }),
133
- [springAnimated],
134
- )
135
-
136
- const starColor = active ? selectedStarColor : normalStarColor
137
- const size = f.isTablet ? 42 : 34
138
- const marginH = f.isTablet ? 12 : 8
139
-
140
- const starWrapStyle = useMemo(
141
- () => [
142
- styles.starWrap,
143
- {
144
- transform: [{scale: scaleStar}],
145
- marginHorizontal: marginH,
146
- },
147
- ],
148
- [scaleStar, marginH],
149
- )
150
-
151
- return (
152
- <Animated.View style={starWrapStyle}>
153
- <TouchableOpacity disabled={disabled} onPress={onPressStar} activeOpacity={0.8}>
154
- <StarIcon size={size} color={starColor} />
155
- </TouchableOpacity>
156
- </Animated.View>
157
- )
158
- })
159
-
160
- function Rating({
161
- title = 'Help us get better',
162
- question = 'How was your experience today?',
163
- value,
164
- onRate,
165
- rating_min = 1,
166
- rating_max = 5,
167
- disabled = false,
168
- error,
169
- normalStarColor = COLOR_STAR_NORMAL,
170
- selectedStarColor = COLOR_STAR_SELECTED,
171
- titleStyle,
172
- questionStyle,
173
- errorStyle,
174
- style,
175
- }: RatingProps) {
176
- const hasError = useMemo(() => error != null && error !== '', [error])
177
-
178
- const stars = useMemo(() => {
179
- const listStar = []
180
- for (let i = rating_min; i <= rating_max; i++) {
181
- listStar.push(
182
- <ButtonStar
183
- key={`ButtonStar-${i}`}
184
- normalStarColor={normalStarColor}
185
- selectedStarColor={selectedStarColor}
186
- disabled={disabled || value === i}
187
- onRate={() => onRate(i)}
188
- active={i <= value}
189
- />,
190
- )
191
- }
192
- return listStar
193
- }, [rating_min, rating_max, disabled, value, normalStarColor, selectedStarColor, onRate])
194
-
195
- const titleCombinedStyle = useMemo(() => [styles.title, {color: TEXT_DARK}, titleStyle], [titleStyle])
196
- const questionCombinedStyle = useMemo(() => [styles.question, {color: TEXT_DARK}, questionStyle], [questionStyle])
197
- const errorTextStyle = useMemo(() => [styles.error, {color: ERROR_COLOR}, errorStyle], [errorStyle])
198
-
199
- return (
200
- <View style={[styles.wrapper, style]}>
201
- {title != null && title !== '' && <Text style={titleCombinedStyle}>{title}</Text>}
202
- {question != null && question !== '' && <Text style={questionCombinedStyle}>{question}</Text>}
203
- <View style={styles.starsWrap}>{stars}</View>
204
- {hasError && (
205
- <View style={styles.errorWrap}>
206
- <ErrorIcon size={20} color={ERROR_COLOR} />
207
- <Text style={errorTextStyle}>{error}</Text>
208
- </View>
209
- )}
210
- </View>
211
- )
212
- }
213
-
214
- export default Rating
215
-
216
- const styles = StyleSheet.create({
217
- wrapper: {
218
- width: '100%',
219
- },
220
- title: {
221
- fontSize: 18,
222
- fontWeight: '700',
223
- marginBottom: 8,
224
- },
225
- question: {
226
- fontSize: 16,
227
- marginBottom: 16,
228
- },
229
- starsWrap: {
230
- flexDirection: 'row',
231
- justifyContent: 'center',
232
- alignItems: 'center',
233
- width: '100%',
234
- },
235
- errorWrap: {
236
- flexDirection: 'row',
237
- alignItems: 'center',
238
- marginTop: 8,
239
- gap: 6,
240
- },
241
- error: {
242
- fontSize: 14,
243
- lineHeight: 20,
244
- flex: 1,
245
- fontWeight: '400',
246
- },
247
- starWrap: {},
248
- })