@originallyus/feedback-rn-sdk 4.0.0-beta.1 → 4.0.0-beta.3

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 (28) hide show
  1. package/package.json +2 -3
  2. package/src/AIAContentUsefulness.tsx +0 -296
  3. package/src/AIAFeedback.tsx +0 -354
  4. package/src/AIAFeedbackForm.tsx +0 -267
  5. package/src/AIAFeedbackSplash.tsx +0 -49
  6. package/src/AIAFeedbackStyles.ts +0 -311
  7. package/src/AIAFeedbackSuccess.tsx +0 -67
  8. package/src/assets/CheckIcon.tsx +0 -18
  9. package/src/assets/CloseIcon.tsx +0 -18
  10. package/src/assets/ErrorIcon.tsx +0 -18
  11. package/src/assets/PlusIcon.tsx +0 -18
  12. package/src/assets/StarIcon.tsx +0 -18
  13. package/src/component/Button.tsx +0 -68
  14. package/src/component/ButtonSubmit.tsx +0 -335
  15. package/src/component/Input.tsx +0 -288
  16. package/src/component/MultiSelectButtons.tsx +0 -272
  17. package/src/component/README.md +0 -215
  18. package/src/component/READMEVI.md +0 -192
  19. package/src/component/Rating.tsx +0 -248
  20. package/src/component/RatingNumber.tsx +0 -421
  21. package/src/component/Textarea.tsx +0 -282
  22. package/src/component/YesNoButtons.tsx +0 -236
  23. package/src/index.tsx +0 -33
  24. package/src/service/feedbackService.ts +0 -108
  25. package/src/utils/common.ts +0 -241
  26. package/src/utils/constants.ts +0 -60
  27. package/src/utils/index.ts +0 -167
  28. package/src/utils/networking.ts +0 -134
package/src/component/README.md DELETED
@@ -1,215 +0,0 @@
1
- # Components – Props reference
2
-
3
- Documentation for all components and their props in `@originallyus/feedback-rn-sdk`. Tables: **Prop** | **Type** | **Default** | **Description**.
4
-
5
- ---
6
-
7
- ## Button
8
-
9
- Basic pressable button (Pressable + Text).
10
-
11
- | Prop | Type | Default | Description |
12
- | ----------- | ------------ | ------- | --------------------------------------- |
13
- | `title` | `string` | — | **Required.** Text shown on the button. |
14
- | `onPress` | `() => void` | — | **Required.** Callback when pressed. |
15
- | `disabled` | `boolean` | `false` | Disables the button. |
16
- | `style` | `ViewStyle` | — | Style for the button container. |
17
- | `textStyle` | `TextStyle` | — | Style for the label text. |
18
-
19
- ---
20
-
21
- ## ButtonSubmit
22
-
23
- Submit button for forms: primary (red background) or secondary (red border + red text, light pink background). Supports loading state, left icon, and full width or content-based width.
24
-
25
- | Prop | Type | Default | Description |
26
- | ------------------------- | -------------------------- | ----------- | ----------------------------------------------------------------------- |
27
- | `onPress` | `() => void` | — | **Required.** Callback when pressed. |
28
- | `title` | `string` | — | **Required.** Button label. |
29
- | `leftIcon` | `string` | — | Character shown to the left of the title (e.g. `"+"`, `"✓"`). |
30
- | `variant` | `'primary' \| 'secondary'` | `'primary'` | primary = red background; secondary = red border + text, light pink bg. |
31
- | `fullWidth` | `boolean` | `true` | `true` = full width, `false` = width by content. |
32
- | `disabled` | `boolean` | `false` | Disables the button. |
33
- | `loading` | `boolean` | `false` | Shows ActivityIndicator and blocks press. |
34
- | `appWidth` | `number` | — | **Required.** Screen width (used for margin). |
35
- | `isTabletInstrusive` | `boolean` | — | On tablet: fixed 200px width instead of full width. |
36
- | `fontFamily` | `string` | — | Font family. |
37
- | `fontSize` | `number` | `16` | Font size. |
38
- | `textColor` | `string` | — | Text color (primary = white, secondary = red). |
39
- | `backgroundColor` | `string` | — | Background color. |
40
- | `pressedColor` | `string` | — | Color when pressed. |
41
- | `disabledBackgroundColor` | `string` | — | Background color when disabled. |
42
- | `disabledTextColor` | `string` | — | Text color when disabled. |
43
- | `borderColor` | `string` | — | Border color (secondary variant). |
44
- | `containerStyle` | `ViewStyle` | — | Style for the wrapper view. |
45
- | `style` | `ViewStyle` | — | Style for the Pressable. |
46
- | `textStyle` | `TextStyle` | — | Style for the text. |
47
-
48
- ---
49
-
50
- ## RatingNumber
51
-
52
- Numeric rating scale: a row of buttons from `rating_min` to `rating_max` with optional left/right labels. Buttons are full width per device; supports size presets and compact mode.
53
-
54
- | Prop | Type | Default | Description |
55
- | ------------------------------------- | -------------------------------- | ----------- | ------------------------------------------------------- |
56
- | `scale_label_color` | `string` | — | **Required.** Text color for left/right labels. |
57
- | `scale_label_left` | `string` | — | Left label (e.g. "Strongly disagree"). |
58
- | `scale_label_right` | `string` | — | Right label (e.g. "Strongly agree"). |
59
- | `scale_label_font` | `string` | — | Font for labels. |
60
- | `scale_label_fontsize` | `number` | — | Font size for labels. |
61
- | `handlePressRating` | `(rating: number) => void` | — | **Required.** Callback when a number is selected. |
62
- | `numStar` | `number` | — | **Required.** Currently selected value. |
63
- | `rating_min` | `number` | — | **Required.** Minimum value. |
64
- | `rating_max` | `number` | — | **Required.** Maximum value. |
65
- | `appWidth` | `number` | — | **Required.** App width (for layout). |
66
- | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Preset for height and spacing. |
67
- | `compact` | `boolean` | `true` | `true` = no gap between buttons; `false` = gap between. |
68
- | `error` | `string` | — | Error message; red border on buttons and text below. |
69
- | `errorBorderColor` | `string` | `'#D32F2F'` | Border color when error is set. |
70
- | `rating_number_font` | `string` | — | Font for the number inside each button. |
71
- | `rating_number_fontsize` | `number` | — | Font size for the number. |
72
- | `rating_number_bg_color` | `string` | — | Background color when not selected. |
73
- | `rating_number_border_color` | `string` | — | Border color when not selected. |
74
- | `rating_number_selected_bg_color` | `string` | — | Background color when selected (default #082065). |
75
- | `rating_number_selected_border_color` | `string` | — | Border color when selected. |
76
- | `rating_number_selected_text_color` | `string` | — | Text color when selected. |
77
- | `rating_number_text_color` | `string` | — | Text color when not selected. |
78
- | `errorStyle` | `TextStyle` | — | Style for the error text. |
79
-
80
- ---
81
-
82
- ## Rating
83
-
84
- Star rating block: title, question/subtitle, and a row of tappable stars (1–5 by default). Uses `RatingStar` internally. Selected stars are filled (e.g. golden), unselected are grey. Optional error message below.
85
-
86
- | Prop | Type | Default | Description |
87
- | ------------------- | -------------------------- | ---------------------------------- | ------------------------------------------------- |
88
- | `title` | `string` | `'Help us get better'` | Main heading above the question. |
89
- | `question` | `string` | `'How was your experience today?'` | Subtitle or question text. |
90
- | `value` | `number` | — | **Required.** Current star value (1..rating_max). |
91
- | `onRate` | `(rating: number) => void` | — | **Required.** Callback when user selects a star. |
92
- | `rating_min` | `number` | `1` | Minimum star value. |
93
- | `rating_max` | `number` | `5` | Maximum star value. |
94
- | `disabled` | `boolean` | `false` | Disables star taps. |
95
- | `error` | `string` | — | Error message; shown below the stars. |
96
- | `normalStarColor` | `string` | `'#D0D0D0'` | Color for unselected stars. |
97
- | `selectedStarColor` | `string` | `'#FFC107'` | Color for selected stars (e.g. golden). |
98
- | `titleStyle` | `TextStyle` | — | Style for the title. |
99
- | `questionStyle` | `TextStyle` | — | Style for the question. |
100
- | `errorStyle` | `TextStyle` | — | Style for the error text. |
101
- | `style` | `ViewStyle` | — | Style for the wrapper. |
102
-
103
- ---
104
-
105
- ## Textarea
106
-
107
- Multi-line text input: label on top, note below, placeholder, and optional character count (maxLength). Supports focus and error states.
108
-
109
- | Prop | Type | Default | Description |
110
- | ---------------------- | ------------------------ | --------------- | ----------------------------------------------------- |
111
- | `value` | `string` | — | **Required.** Current value. |
112
- | `onChangeText` | `(text: string) => void` | — | **Required.** Callback when text changes. |
113
- | `placeholder` | `string` | `'Placeholder'` | Placeholder text. |
114
- | `label` | `string` | — | Label above the field. |
115
- | `note` | `string` | — | Helper text below the field. |
116
- | `error` | `string` | — | Error message; red border and text below. |
117
- | `maxLength` | `number` | — | Max characters; shows count 0/maxLength bottom-right. |
118
- | `appWidth` | `number` | — | **Required.** App width (for padding). |
119
- | `minHeight` | `number` | `120` | Minimum height of the input area. |
120
- | `backgroundColor` | `string` | — | Background color of the field. |
121
- | `borderColor` | `string` | — | Border color (unfocused). |
122
- | `focusBackgroundColor` | `string` | — | Background color when focused. |
123
- | `focusBorderColor` | `string` | — | Border color when focused. |
124
- | `errorBorderColor` | `string` | `'#D32F2F'` | Border color when error is set. |
125
- | `fontFamily` | `string` | — | Font family. |
126
- | `fontSize` | `number` | `16` | Font size. |
127
- | `placeholderTextColor` | `string` | — | Placeholder text color. |
128
- | `textColor` | `string` | — | Text color. |
129
- | `labelStyle` | `TextStyle` | — | Style for the label. |
130
- | `captionStyle` | `TextStyle` | — | Style for caption. |
131
- | `noteStyle` | `TextStyle` | — | Style for the note. |
132
- | `errorStyle` | `TextStyle` | — | Style for the error text. |
133
- | `counterStyle` | `TextStyle` | — | Style for the character counter. |
134
- | `style` | `ViewStyle` | — | Style for the wrapper. |
135
-
136
- ---
137
-
138
- ## Input
139
-
140
- Single-line text input: same structure as Textarea (label, note, error), with optional character counter when `maxLength` is set.
141
-
142
- | Prop | Type | Default | Description |
143
- | ---------------------- | ------------------------ | --------------- | -------------------------------------------------------- |
144
- | `value` | `string` | — | **Required.** Current value. |
145
- | `onChangeText` | `(text: string) => void` | — | **Required.** Callback when text changes. |
146
- | `placeholder` | `string` | `'Placeholder'` | Placeholder text. |
147
- | `label` | `string` | — | Label above the field. |
148
- | `note` | `string` | — | Helper text below the field. |
149
- | `error` | `string` | — | Error message; red border and text below. |
150
- | `maxLength` | `number` | — | Max characters. |
151
- | `showCounter` | `boolean` | `true` | Show 0/maxLength when maxLength is set; `false` to hide. |
152
- | `appWidth` | `number` | — | **Required.** App width (for padding). |
153
- | `backgroundColor` | `string` | — | Background color. |
154
- | `borderColor` | `string` | — | Border color. |
155
- | `focusBackgroundColor` | `string` | — | Background color when focused. |
156
- | `focusBorderColor` | `string` | — | Border color when focused. |
157
- | `errorBorderColor` | `string` | `'#D32F2F'` | Border color when error is set. |
158
- | `fontFamily` | `string` | — | Font family. |
159
- | `fontSize` | `number` | `16` | Font size. |
160
- | `placeholderTextColor` | `string` | — | Placeholder text color. |
161
- | `textColor` | `string` | — | Text color. |
162
- | `labelStyle` | `TextStyle` | — | Style for the label. |
163
- | `noteStyle` | `TextStyle` | — | Style for the note. |
164
- | `errorStyle` | `TextStyle` | — | Style for the error text. |
165
- | `counterStyle` | `TextStyle` | — | Style for the counter. |
166
- | `style` | `ViewStyle` | — | Style for the wrapper. |
167
-
168
- ---
169
-
170
- ## YesNoButtons
171
-
172
- Two Yes / No buttons built with ButtonSubmit. Single selection; selected style can be primary (red background) or secondary (light background + bold border).
173
-
174
- | Prop | Type | Default | Description |
175
- | ------------------------- | -------------------------------- | ----------- | ----------------------------------------------------------------- |
176
- | `question` | `string` | — | **Required.** Question text above the buttons. |
177
- | `value` | `'yes' \| 'no' \| null` | — | **Required.** Current selection. |
178
- | `onSelect` | `(value: 'yes' \| 'no') => void` | — | **Required.** Callback when an option is selected. |
179
- | `selectedVariant` | `'primary' \| 'secondary'` | `'primary'` | primary = red bg, white text; secondary = light bg + bold border. |
180
- | `yesLabel` | `string` | `'Yes'` | Label for the Yes button. |
181
- | `noLabel` | `string` | `'No'` | Label for the No button. |
182
- | `error` | `string` | — | Error message; shown below the two buttons with "!". |
183
- | `appWidth` | `number` | — | **Required.** App width (for ButtonSubmit). |
184
- | `selectedBackgroundColor` | `string` | — | Override background when selected (secondary). |
185
- | `selectedBorderColor` | `string` | — | Override border when selected (secondary). |
186
- | `selectedTextColor` | `string` | — | Override text color when selected (secondary). |
187
- | `questionStyle` | `TextStyle` | — | Style for the question. |
188
- | `errorStyle` | `TextStyle` | — | Style for the error text. |
189
- | `errorColor` | `string` | — | Error text color (default red). |
190
- | `style` | `ViewStyle` | — | Style for the wrapper. |
191
-
192
- ---
193
-
194
- ## MultiSelectButtons
195
-
196
- Multiple choice (tag) buttons: select several options, wrap layout. Uses ButtonSubmit with "+" / "✓" icon on the left. Selected variant: primary (red background) or secondary (light background + bold border, black text).
197
-
198
- | Prop | Type | Default | Description |
199
- | ------------------------- | ------------------------------ | ------------- | ----------------------------------------------------------------------------- |
200
- | `question` | `string` | — | **Required.** Question text above the options. |
201
- | `options` | `MultiSelectOption[]` | — | **Required.** List of options. Each: `{ value: string, label: string }`. |
202
- | `value` | `string[]` | — | **Required.** Array of selected values. |
203
- | `onSelect` | `(selected: string[]) => void` | — | **Required.** Callback when selection changes (toggles per option). |
204
- | `appWidth` | `number` | — | **Required.** App width. |
205
- | `selectedVariant` | `'primary' \| 'secondary'` | `'secondary'` | primary = red bg, white text; secondary = light bg + blue border, black text. |
206
- | `error` | `string` | — | Error message; shown below the buttons. |
207
- | `selectedBackgroundColor` | `string` | — | Override background when selected. |
208
- | `selectedBorderColor` | `string` | — | Override border when selected. |
209
- | `selectedTextColor` | `string` | — | Override text color when selected. |
210
- | `questionStyle` | `TextStyle` | — | Style for the question. |
211
- | `errorStyle` | `TextStyle` | — | Style for the error text. |
212
- | `errorColor` | `string` | — | Error text color. |
213
- | `style` | `ViewStyle` | — | Style for the wrapper. |
214
-
215
- **MultiSelectOption:** `{ value: string; label: string }`
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 }`