@terreno/ui 0.7.0 → 0.7.1

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 (31) hide show
  1. package/dist/AiSuggestionBox.d.ts +6 -0
  2. package/dist/AiSuggestionBox.js +87 -0
  3. package/dist/AiSuggestionBox.js.map +1 -0
  4. package/dist/Common.d.ts +12 -0
  5. package/dist/Common.js.map +1 -1
  6. package/dist/TextField.js +46 -41
  7. package/dist/TextField.js.map +1 -1
  8. package/dist/index.d.ts +1 -0
  9. package/dist/index.js +1 -0
  10. package/dist/index.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/AiSuggestionBox.test.tsx +373 -0
  13. package/src/AiSuggestionBox.tsx +233 -0
  14. package/src/Common.ts +14 -0
  15. package/src/TextField.tsx +87 -70
  16. package/src/__snapshots__/AddressField.test.tsx.snap +208 -156
  17. package/src/__snapshots__/AiSuggestionBox.test.tsx.snap +1031 -0
  18. package/src/__snapshots__/CustomSelectField.test.tsx.snap +51 -38
  19. package/src/__snapshots__/EmailField.test.tsx.snap +111 -85
  20. package/src/__snapshots__/Field.test.tsx.snap +616 -460
  21. package/src/__snapshots__/MobileAddressAutoComplete.test.tsx.snap +51 -38
  22. package/src/__snapshots__/NumberField.test.tsx.snap +51 -38
  23. package/src/__snapshots__/PhoneNumberField.test.tsx.snap +264 -199
  24. package/src/__snapshots__/TapToEdit.test.tsx.snap +51 -38
  25. package/src/__snapshots__/TextArea.test.tsx.snap +255 -190
  26. package/src/__snapshots__/TextField.test.tsx.snap +264 -199
  27. package/src/__snapshots__/UnifiedAddressAutoComplete.test.tsx.snap +204 -152
  28. package/src/__snapshots__/WebAddressAutocomplete.test.tsx.snap +153 -114
  29. package/src/index.tsx +1 -0
  30. package/src/login/__snapshots__/LoginScreen.test.tsx.snap +104 -78
  31. package/src/signUp/__snapshots__/SignUpScreen.test.tsx.snap +156 -117
package/src/TextField.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  View,
11
11
  } from "react-native";
12
12
 
13
+ import {AiSuggestionBox} from "./AiSuggestionBox";
13
14
  import type {TextFieldProps, TextStyleWithOutline} from "./Common";
14
15
  import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
15
16
  import {Icon} from "./Icon";
@@ -79,6 +80,7 @@ export const TextField: FC<TextFieldProps> = ({
79
80
  onSubmitEditing,
80
81
  testID,
81
82
  id,
83
+ aiSuggestion,
82
84
  }) => {
83
85
  const {theme} = useTheme();
84
86
 
@@ -147,87 +149,102 @@ export const TextField: FC<TextFieldProps> = ({
147
149
  {Boolean(errorText) && <FieldError text={errorText!} />}
148
150
  <View
149
151
  style={{
150
- alignItems: "center",
151
152
  backgroundColor: disabled ? theme.surface.neutralLight : theme.surface.base,
152
153
  borderColor,
153
154
  borderRadius: 4,
154
155
  borderWidth: focused ? 3 : 1,
155
- flexDirection: "row",
156
+ flexDirection: "column",
157
+ gap: aiSuggestion ? 10 : 0,
156
158
  overflow: "hidden",
157
159
  paddingHorizontal: focused ? 10 : 12,
158
160
  paddingVertical: focused ? 6 : 8,
159
161
  }}
160
162
  >
161
- <TextInput
162
- accessibilityHint="Enter text here"
163
- accessibilityState={{disabled}}
164
- aria-label="Text input field"
165
- autoCapitalize={type === "text" ? "sentences" : "none"}
166
- autoCorrect={shouldAutocorrect}
167
- blurOnSubmit={blurOnSubmit}
168
- enterKeyHint={returnKeyType}
169
- keyboardType={keyboardType as KeyboardTypeOptions}
170
- multiline={multiline}
171
- nativeID={id}
172
- numberOfLines={rows || 4}
173
- onBlur={() => {
174
- if (disabled) return;
175
- let finalValue = value ?? "";
163
+ {Boolean(aiSuggestion) && (
164
+ <AiSuggestionBox
165
+ testID={testID ? `${testID}-ai-suggestion` : undefined}
166
+ {...aiSuggestion!}
167
+ />
168
+ )}
169
+ <View
170
+ style={{
171
+ alignItems: "center",
172
+ flexDirection: "row",
173
+ }}
174
+ >
175
+ <TextInput
176
+ accessibilityHint="Enter text here"
177
+ accessibilityState={{disabled}}
178
+ aria-label="Text input field"
179
+ autoCapitalize={type === "text" ? "sentences" : "none"}
180
+ autoCorrect={shouldAutocorrect}
181
+ blurOnSubmit={blurOnSubmit}
182
+ enterKeyHint={returnKeyType}
183
+ keyboardType={keyboardType as KeyboardTypeOptions}
184
+ multiline={multiline}
185
+ nativeID={id}
186
+ numberOfLines={rows || 4}
187
+ onBlur={() => {
188
+ if (disabled) {
189
+ return;
190
+ }
191
+ let finalValue = value ?? "";
176
192
 
177
- if (trimOnBlur && value) {
178
- finalValue = finalValue.trim();
179
- if (finalValue !== value) {
180
- onChange(finalValue);
193
+ if (trimOnBlur && value) {
194
+ finalValue = finalValue.trim();
195
+ if (finalValue !== value) {
196
+ onChange(finalValue);
197
+ }
181
198
  }
182
- }
183
- if (onBlur) {
184
- onBlur(finalValue);
185
- }
186
- setFocused(false);
187
- }}
188
- onChangeText={onChange}
189
- onContentSizeChange={(event) => {
190
- if (!grow) {
191
- return;
192
- }
193
- setHeight(event.nativeEvent.contentSize.height);
194
- }}
195
- onFocus={() => {
196
- if (!disabled) {
197
- setFocused(true);
198
- }
199
- if (onFocus) {
200
- onFocus();
201
- }
202
- }}
203
- onSubmitEditing={() => {
204
- if (onEnter) {
205
- onEnter();
206
- }
207
- if (onSubmitEditing) {
208
- onSubmitEditing();
209
- }
210
- }}
211
- placeholder={placeholder}
212
- placeholderTextColor={theme.text.secondaryLight}
213
- readOnly={disabled}
214
- ref={(ref) => {
215
- if (inputRef) {
216
- inputRef(ref);
217
- }
218
- }}
219
- secureTextEntry={type === "password"}
220
- style={defaultTextInputStyles}
221
- testID={testID}
222
- textContentType={textContentType}
223
- underlineColorAndroid="transparent"
224
- value={value}
225
- />
226
- {Boolean(iconName) && (
227
- <Pressable aria-role="button" onPress={onIconClick}>
228
- <Icon iconName={iconName!} size="md" />
229
- </Pressable>
230
- )}
199
+ if (onBlur) {
200
+ onBlur(finalValue);
201
+ }
202
+ setFocused(false);
203
+ }}
204
+ onChangeText={onChange}
205
+ onContentSizeChange={(event) => {
206
+ if (!grow) {
207
+ return;
208
+ }
209
+ setHeight(event.nativeEvent.contentSize.height);
210
+ }}
211
+ onFocus={() => {
212
+ if (!disabled) {
213
+ setFocused(true);
214
+ }
215
+ if (onFocus) {
216
+ onFocus();
217
+ }
218
+ }}
219
+ onSubmitEditing={() => {
220
+ if (onEnter) {
221
+ onEnter();
222
+ }
223
+ if (onSubmitEditing) {
224
+ onSubmitEditing();
225
+ }
226
+ }}
227
+ placeholder={placeholder}
228
+ placeholderTextColor={theme.text.secondaryLight}
229
+ readOnly={disabled}
230
+ ref={(ref) => {
231
+ if (inputRef) {
232
+ inputRef(ref);
233
+ }
234
+ }}
235
+ secureTextEntry={type === "password"}
236
+ style={defaultTextInputStyles}
237
+ testID={testID}
238
+ textContentType={textContentType}
239
+ underlineColorAndroid="transparent"
240
+ value={value}
241
+ />
242
+ {Boolean(iconName) && (
243
+ <Pressable aria-role="button" onPress={onIconClick}>
244
+ <Icon iconName={iconName!} size="md" />
245
+ </Pressable>
246
+ )}
247
+ </View>
231
248
  </View>
232
249
  {Boolean(helperText) && <FieldHelperText text={helperText!} />}
233
250
  {/* {type === "numberRange" && value && (
package/src/__snapshots__/AddressField.test.tsx.snap CHANGED
@@ -28,57 +28,70 @@ exports[`AddressField renders correctly with default props 1`] = `
28
28
  "children": [
29
29
  {
30
30
  "$$typeof": Symbol(react.test.json),
31
- "children": null,
32
- "props": {
33
- "accessibilityHint": "Enter text here",
34
- "accessibilityState": {
35
- "disabled": undefined,
31
+ "children": [
32
+ {
33
+ "$$typeof": Symbol(react.test.json),
34
+ "children": null,
35
+ "props": {
36
+ "accessibilityHint": "Enter text here",
37
+ "accessibilityState": {
38
+ "disabled": undefined,
39
+ },
40
+ "aria-label": "Text input field",
41
+ "autoCapitalize": "sentences",
42
+ "autoCorrect": true,
43
+ "blurOnSubmit": true,
44
+ "enterKeyHint": undefined,
45
+ "keyboardType": "default",
46
+ "multiline": undefined,
47
+ "nativeID": undefined,
48
+ "numberOfLines": 1,
49
+ "onBlur": [Function],
50
+ "onChangeText": [Function],
51
+ "onContentSizeChange": [Function],
52
+ "onFocus": [Function],
53
+ "onSubmitEditing": [Function],
54
+ "placeholder": "Enter an address",
55
+ "placeholderTextColor": "#686868",
56
+ "readOnly": undefined,
57
+ "ref": [Function],
58
+ "secureTextEntry": false,
59
+ "style": {
60
+ "color": "#1C1C1C",
61
+ "flex": 1,
62
+ "fontFamily": "text",
63
+ "fontSize": 16,
64
+ "gap": 10,
65
+ "height": 20,
66
+ "paddingVertical": 0,
67
+ "width": "100%",
68
+ },
69
+ "testID": "test-address-address1",
70
+ "textContentType": "none",
71
+ "underlineColorAndroid": "transparent",
72
+ "value": "123 Main St",
73
+ },
74
+ "type": "TextInput",
36
75
  },
37
- "aria-label": "Text input field",
38
- "autoCapitalize": "sentences",
39
- "autoCorrect": true,
40
- "blurOnSubmit": true,
41
- "enterKeyHint": undefined,
42
- "keyboardType": "default",
43
- "multiline": undefined,
44
- "nativeID": undefined,
45
- "numberOfLines": 1,
46
- "onBlur": [Function],
47
- "onChangeText": [Function],
48
- "onContentSizeChange": [Function],
49
- "onFocus": [Function],
50
- "onSubmitEditing": [Function],
51
- "placeholder": "Enter an address",
52
- "placeholderTextColor": "#686868",
53
- "readOnly": undefined,
54
- "ref": [Function],
55
- "secureTextEntry": false,
76
+ ],
77
+ "props": {
56
78
  "style": {
57
- "color": "#1C1C1C",
58
- "flex": 1,
59
- "fontFamily": "text",
60
- "fontSize": 16,
61
- "gap": 10,
62
- "height": 20,
63
- "paddingVertical": 0,
64
- "width": "100%",
79
+ "alignItems": "center",
80
+ "flexDirection": "row",
65
81
  },
66
- "testID": "test-address-address1",
67
- "textContentType": "none",
68
- "underlineColorAndroid": "transparent",
69
- "value": "123 Main St",
82
+ "testID": undefined,
70
83
  },
71
- "type": "TextInput",
84
+ "type": "View",
72
85
  },
73
86
  ],
74
87
  "props": {
75
88
  "style": {
76
- "alignItems": "center",
77
89
  "backgroundColor": "#FFFFFF",
78
90
  "borderColor": "#9A9A9A",
79
91
  "borderRadius": 4,
80
92
  "borderWidth": 1,
81
- "flexDirection": "row",
93
+ "flexDirection": "column",
94
+ "gap": 0,
82
95
  "overflow": "hidden",
83
96
  "paddingHorizontal": 12,
84
97
  "paddingVertical": 8,
@@ -132,57 +145,70 @@ exports[`AddressField renders correctly with default props 1`] = `
132
145
  "children": [
133
146
  {
134
147
  "$$typeof": Symbol(react.test.json),
135
- "children": null,
136
- "props": {
137
- "accessibilityHint": "Enter text here",
138
- "accessibilityState": {
139
- "disabled": undefined,
148
+ "children": [
149
+ {
150
+ "$$typeof": Symbol(react.test.json),
151
+ "children": null,
152
+ "props": {
153
+ "accessibilityHint": "Enter text here",
154
+ "accessibilityState": {
155
+ "disabled": undefined,
156
+ },
157
+ "aria-label": "Text input field",
158
+ "autoCapitalize": "sentences",
159
+ "autoCorrect": true,
160
+ "blurOnSubmit": true,
161
+ "enterKeyHint": undefined,
162
+ "keyboardType": "default",
163
+ "multiline": undefined,
164
+ "nativeID": "address2",
165
+ "numberOfLines": 1,
166
+ "onBlur": [Function],
167
+ "onChangeText": [Function],
168
+ "onContentSizeChange": [Function],
169
+ "onFocus": [Function],
170
+ "onSubmitEditing": [Function],
171
+ "placeholder": undefined,
172
+ "placeholderTextColor": "#686868",
173
+ "readOnly": undefined,
174
+ "ref": [Function],
175
+ "secureTextEntry": false,
176
+ "style": {
177
+ "color": "#1C1C1C",
178
+ "flex": 1,
179
+ "fontFamily": "text",
180
+ "fontSize": 16,
181
+ "gap": 10,
182
+ "height": 20,
183
+ "paddingVertical": 0,
184
+ "width": "100%",
185
+ },
186
+ "testID": "test-address-address2",
187
+ "textContentType": "none",
188
+ "underlineColorAndroid": "transparent",
189
+ "value": "Apt 4B",
190
+ },
191
+ "type": "TextInput",
140
192
  },
141
- "aria-label": "Text input field",
142
- "autoCapitalize": "sentences",
143
- "autoCorrect": true,
144
- "blurOnSubmit": true,
145
- "enterKeyHint": undefined,
146
- "keyboardType": "default",
147
- "multiline": undefined,
148
- "nativeID": "address2",
149
- "numberOfLines": 1,
150
- "onBlur": [Function],
151
- "onChangeText": [Function],
152
- "onContentSizeChange": [Function],
153
- "onFocus": [Function],
154
- "onSubmitEditing": [Function],
155
- "placeholder": undefined,
156
- "placeholderTextColor": "#686868",
157
- "readOnly": undefined,
158
- "ref": [Function],
159
- "secureTextEntry": false,
193
+ ],
194
+ "props": {
160
195
  "style": {
161
- "color": "#1C1C1C",
162
- "flex": 1,
163
- "fontFamily": "text",
164
- "fontSize": 16,
165
- "gap": 10,
166
- "height": 20,
167
- "paddingVertical": 0,
168
- "width": "100%",
196
+ "alignItems": "center",
197
+ "flexDirection": "row",
169
198
  },
170
- "testID": "test-address-address2",
171
- "textContentType": "none",
172
- "underlineColorAndroid": "transparent",
173
- "value": "Apt 4B",
199
+ "testID": undefined,
174
200
  },
175
- "type": "TextInput",
201
+ "type": "View",
176
202
  },
177
203
  ],
178
204
  "props": {
179
205
  "style": {
180
- "alignItems": "center",
181
206
  "backgroundColor": "#FFFFFF",
182
207
  "borderColor": "#9A9A9A",
183
208
  "borderRadius": 4,
184
209
  "borderWidth": 1,
185
- "flexDirection": "row",
210
+ "flexDirection": "column",
211
+ "gap": 0,
186
212
  "overflow": "hidden",
187
213
  "paddingHorizontal": 12,
188
214
  "paddingVertical": 8,
@@ -236,57 +262,70 @@ exports[`AddressField renders correctly with default props 1`] = `
236
262
  "children": [
237
263
  {
238
264
  "$$typeof": Symbol(react.test.json),
239
- "children": null,
240
- "props": {
241
- "accessibilityHint": "Enter text here",
242
- "accessibilityState": {
243
- "disabled": undefined,
265
+ "children": [
266
+ {
267
+ "$$typeof": Symbol(react.test.json),
268
+ "children": null,
269
+ "props": {
270
+ "accessibilityHint": "Enter text here",
271
+ "accessibilityState": {
272
+ "disabled": undefined,
273
+ },
274
+ "aria-label": "Text input field",
275
+ "autoCapitalize": "sentences",
276
+ "autoCorrect": true,
277
+ "blurOnSubmit": true,
278
+ "enterKeyHint": undefined,
279
+ "keyboardType": "default",
280
+ "multiline": undefined,
281
+ "nativeID": "city",
282
+ "numberOfLines": 1,
283
+ "onBlur": [Function],
284
+ "onChangeText": [Function],
285
+ "onContentSizeChange": [Function],
286
+ "onFocus": [Function],
287
+ "onSubmitEditing": [Function],
288
+ "placeholder": undefined,
289
+ "placeholderTextColor": "#686868",
290
+ "readOnly": undefined,
291
+ "ref": [Function],
292
+ "secureTextEntry": false,
293
+ "style": {
294
+ "color": "#1C1C1C",
295
+ "flex": 1,
296
+ "fontFamily": "text",
297
+ "fontSize": 16,
298
+ "gap": 10,
299
+ "height": 20,
300
+ "paddingVertical": 0,
301
+ "width": "100%",
302
+ },
303
+ "testID": "test-address-city",
304
+ "textContentType": "none",
305
+ "underlineColorAndroid": "transparent",
306
+ "value": "Springfield",
307
+ },
308
+ "type": "TextInput",
244
309
  },
245
- "aria-label": "Text input field",
246
- "autoCapitalize": "sentences",
247
- "autoCorrect": true,
248
- "blurOnSubmit": true,
249
- "enterKeyHint": undefined,
250
- "keyboardType": "default",
251
- "multiline": undefined,
252
- "nativeID": "city",
253
- "numberOfLines": 1,
254
- "onBlur": [Function],
255
- "onChangeText": [Function],
256
- "onContentSizeChange": [Function],
257
- "onFocus": [Function],
258
- "onSubmitEditing": [Function],
259
- "placeholder": undefined,
260
- "placeholderTextColor": "#686868",
261
- "readOnly": undefined,
262
- "ref": [Function],
263
- "secureTextEntry": false,
310
+ ],
311
+ "props": {
264
312
  "style": {
265
- "color": "#1C1C1C",
266
- "flex": 1,
267
- "fontFamily": "text",
268
- "fontSize": 16,
269
- "gap": 10,
270
- "height": 20,
271
- "paddingVertical": 0,
272
- "width": "100%",
313
+ "alignItems": "center",
314
+ "flexDirection": "row",
273
315
  },
274
- "testID": "test-address-city",
275
- "textContentType": "none",
276
- "underlineColorAndroid": "transparent",
277
- "value": "Springfield",
316
+ "testID": undefined,
278
317
  },
279
- "type": "TextInput",
318
+ "type": "View",
280
319
  },
281
320
  ],
282
321
  "props": {
283
322
  "style": {
284
- "alignItems": "center",
285
323
  "backgroundColor": "#FFFFFF",
286
324
  "borderColor": "#9A9A9A",
287
325
  "borderRadius": 4,
288
326
  "borderWidth": 1,
289
- "flexDirection": "row",
327
+ "flexDirection": "column",
328
+ "gap": 0,
290
329
  "overflow": "hidden",
291
330
  "paddingHorizontal": 12,
292
331
  "paddingVertical": 8,
@@ -1119,57 +1158,70 @@ exports[`AddressField renders correctly with default props 1`] = `
1119
1158
  "children": [
1120
1159
  {
1121
1160
  "$$typeof": Symbol(react.test.json),
1122
- "children": null,
1123
- "props": {
1124
- "accessibilityHint": "Enter text here",
1125
- "accessibilityState": {
1126
- "disabled": undefined,
1161
+ "children": [
1162
+ {
1163
+ "$$typeof": Symbol(react.test.json),
1164
+ "children": null,
1165
+ "props": {
1166
+ "accessibilityHint": "Enter text here",
1167
+ "accessibilityState": {
1168
+ "disabled": undefined,
1169
+ },
1170
+ "aria-label": "Text input field",
1171
+ "autoCapitalize": "sentences",
1172
+ "autoCorrect": true,
1173
+ "blurOnSubmit": true,
1174
+ "enterKeyHint": undefined,
1175
+ "keyboardType": "default",
1176
+ "multiline": undefined,
1177
+ "nativeID": "zipcode",
1178
+ "numberOfLines": 1,
1179
+ "onBlur": [Function],
1180
+ "onChangeText": [Function],
1181
+ "onContentSizeChange": [Function],
1182
+ "onFocus": [Function],
1183
+ "onSubmitEditing": [Function],
1184
+ "placeholder": undefined,
1185
+ "placeholderTextColor": "#686868",
1186
+ "readOnly": undefined,
1187
+ "ref": [Function],
1188
+ "secureTextEntry": false,
1189
+ "style": {
1190
+ "color": "#1C1C1C",
1191
+ "flex": 1,
1192
+ "fontFamily": "text",
1193
+ "fontSize": 16,
1194
+ "gap": 10,
1195
+ "height": 20,
1196
+ "paddingVertical": 0,
1197
+ "width": "100%",
1198
+ },
1199
+ "testID": "test-address-zip",
1200
+ "textContentType": "none",
1201
+ "underlineColorAndroid": "transparent",
1202
+ "value": "62701",
1203
+ },
1204
+ "type": "TextInput",
1127
1205
  },
1128
- "aria-label": "Text input field",
1129
- "autoCapitalize": "sentences",
1130
- "autoCorrect": true,
1131
- "blurOnSubmit": true,
1132
- "enterKeyHint": undefined,
1133
- "keyboardType": "default",
1134
- "multiline": undefined,
1135
- "nativeID": "zipcode",
1136
- "numberOfLines": 1,
1137
- "onBlur": [Function],
1138
- "onChangeText": [Function],
1139
- "onContentSizeChange": [Function],
1140
- "onFocus": [Function],
1141
- "onSubmitEditing": [Function],
1142
- "placeholder": undefined,
1143
- "placeholderTextColor": "#686868",
1144
- "readOnly": undefined,
1145
- "ref": [Function],
1146
- "secureTextEntry": false,
1206
+ ],
1207
+ "props": {
1147
1208
  "style": {
1148
- "color": "#1C1C1C",
1149
- "flex": 1,
1150
- "fontFamily": "text",
1151
- "fontSize": 16,
1152
- "gap": 10,
1153
- "height": 20,
1154
- "paddingVertical": 0,
1155
- "width": "100%",
1209
+ "alignItems": "center",
1210
+ "flexDirection": "row",
1156
1211
  },
1157
- "testID": "test-address-zip",
1158
- "textContentType": "none",
1159
- "underlineColorAndroid": "transparent",
1160
- "value": "62701",
1212
+ "testID": undefined,
1161
1213
  },
1162
- "type": "TextInput",
1214
+ "type": "View",
1163
1215
  },
1164
1216
  ],
1165
1217
  "props": {
1166
1218
  "style": {
1167
- "alignItems": "center",
1168
1219
  "backgroundColor": "#FFFFFF",
1169
1220
  "borderColor": "#9A9A9A",
1170
1221
  "borderRadius": 4,
1171
1222
  "borderWidth": 1,
1172
- "flexDirection": "row",
1223
+ "flexDirection": "column",
1224
+ "gap": 0,
1173
1225
  "overflow": "hidden",
1174
1226
  "paddingHorizontal": 12,
1175
1227
  "paddingVertical": 8,