@hero-design/rn-work-uikit 1.1.0 → 1.2.0-alpha.0

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 (40) hide show
  1. package/.cursorrules +57 -0
  2. package/CHANGELOG.md +6 -0
  3. package/DEVELOPMENT.md +118 -0
  4. package/eslint.config.js +20 -0
  5. package/lib/index.js +871 -5
  6. package/package.json +4 -1
  7. package/src/__tests__/__snapshots__/index.spec.tsx.snap +90 -115
  8. package/src/__tests__/theme-export-override.spec.ts +6 -0
  9. package/src/components/TextInput/ErrorOrHelpText.tsx +58 -0
  10. package/src/components/TextInput/FloatingLabel.tsx +120 -0
  11. package/src/components/TextInput/InputComponent.tsx +61 -0
  12. package/src/components/TextInput/InputRow.tsx +103 -0
  13. package/src/components/TextInput/MaxLengthMessage.tsx +66 -0
  14. package/src/components/TextInput/PrefixComponent.tsx +77 -0
  15. package/src/components/TextInput/StyledTextInput.tsx +134 -0
  16. package/src/components/TextInput/SuffixComponent.tsx +73 -0
  17. package/src/components/TextInput/__tests__/ErrorOrHelpText.spec.tsx +20 -0
  18. package/src/components/TextInput/__tests__/FloatingLabel.spec.tsx +203 -0
  19. package/src/components/TextInput/__tests__/InputComponent.spec.tsx +39 -0
  20. package/src/components/TextInput/__tests__/InputRow.spec.tsx +275 -0
  21. package/src/components/TextInput/__tests__/MaxLengthMessage.spec.tsx +17 -0
  22. package/src/components/TextInput/__tests__/PrefixComponent.spec.tsx +14 -0
  23. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +114 -0
  24. package/src/components/TextInput/__tests__/SuffixComponent.spec.tsx +20 -0
  25. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +571 -0
  26. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +5671 -0
  27. package/src/components/TextInput/__tests__/getState.spec.tsx +89 -0
  28. package/src/components/TextInput/__tests__/index.spec.tsx +699 -0
  29. package/src/components/TextInput/constants.ts +1 -0
  30. package/src/components/TextInput/index.tsx +327 -0
  31. package/src/components/TextInput/types.ts +95 -0
  32. package/src/emotion.d.ts +15 -0
  33. package/src/index.ts +3 -0
  34. package/src/jest.d.ts +24 -0
  35. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +15 -8
  36. package/src/theme/components/textInput.ts +33 -0
  37. package/src/utils/__tests__/helpers.spec.ts +92 -0
  38. package/src/utils/helpers.ts +113 -0
  39. package/testUtils/renderWithTheme.tsx +6 -3
  40. package/stats/1.1.0/rn-work-uikit-stats.html +0 -4842
@@ -0,0 +1,571 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`StyledBorder renders correctly when focused 1`] = `
4
+ <View
5
+ style={
6
+ [
7
+ [
8
+ {
9
+ "borderColor": "#001f23",
10
+ "borderRadius": 8,
11
+ "borderWidth": 2,
12
+ },
13
+ ],
14
+ undefined,
15
+ ]
16
+ }
17
+ themeFocused={true}
18
+ themeState="error"
19
+ />
20
+ `;
21
+
22
+ exports[`StyledBorder renders correctly with themeState default 1`] = `
23
+ <View
24
+ style={
25
+ [
26
+ [
27
+ {
28
+ "borderColor": "#e8e9ea",
29
+ "borderRadius": 8,
30
+ "borderWidth": 2,
31
+ },
32
+ ],
33
+ undefined,
34
+ ]
35
+ }
36
+ themeFocused={false}
37
+ themeState="default"
38
+ />
39
+ `;
40
+
41
+ exports[`StyledBorder renders correctly with themeState disabled 1`] = `
42
+ <View
43
+ style={
44
+ [
45
+ [
46
+ {
47
+ "borderColor": "#bfc1c5",
48
+ "borderRadius": 8,
49
+ "borderWidth": 2,
50
+ },
51
+ ],
52
+ undefined,
53
+ ]
54
+ }
55
+ themeFocused={false}
56
+ themeState="disabled"
57
+ />
58
+ `;
59
+
60
+ exports[`StyledBorder renders correctly with themeState error 1`] = `
61
+ <View
62
+ style={
63
+ [
64
+ [
65
+ {
66
+ "borderColor": "#cb300a",
67
+ "borderRadius": 8,
68
+ "borderWidth": 2,
69
+ },
70
+ ],
71
+ undefined,
72
+ ]
73
+ }
74
+ themeFocused={false}
75
+ themeState="error"
76
+ />
77
+ `;
78
+
79
+ exports[`StyledBorder renders correctly with themeState filled 1`] = `
80
+ <View
81
+ style={
82
+ [
83
+ [
84
+ {
85
+ "borderColor": "#e8e9ea",
86
+ "borderRadius": 8,
87
+ "borderWidth": 2,
88
+ },
89
+ ],
90
+ undefined,
91
+ ]
92
+ }
93
+ themeFocused={false}
94
+ themeState="filled"
95
+ />
96
+ `;
97
+
98
+ exports[`StyledBorder renders correctly with themeState readonly 1`] = `
99
+ <View
100
+ style={
101
+ [
102
+ [
103
+ {
104
+ "borderColor": "#bfc1c5",
105
+ "borderRadius": 8,
106
+ "borderWidth": 2,
107
+ },
108
+ ],
109
+ undefined,
110
+ ]
111
+ }
112
+ themeFocused={false}
113
+ themeState="readonly"
114
+ />
115
+ `;
116
+
117
+ exports[`StyledCharacterCount renders correctly with themeState default 1`] = `
118
+ <Text
119
+ allowFontScaling={false}
120
+ style={
121
+ [
122
+ [
123
+ {
124
+ "color": "#001f23",
125
+ "fontFamily": "BeVietnamPro-Regular",
126
+ "fontSize": 11.76923076923077,
127
+ "letterSpacing": 0.36,
128
+ "lineHeight": 15.76923076923077,
129
+ },
130
+ ],
131
+ [
132
+ [
133
+ {
134
+ "color": "#001f23",
135
+ "flex": 1,
136
+ "flexGrow": 1,
137
+ "textAlign": "right",
138
+ },
139
+ ],
140
+ undefined,
141
+ ],
142
+ ]
143
+ }
144
+ themeFontWeight="regular"
145
+ themeIntent="body"
146
+ themeState="default"
147
+ >
148
+ 100/255
149
+ </Text>
150
+ `;
151
+
152
+ exports[`StyledCharacterCount renders correctly with themeState disabled 1`] = `
153
+ <Text
154
+ allowFontScaling={false}
155
+ style={
156
+ [
157
+ [
158
+ {
159
+ "color": "#001f23",
160
+ "fontFamily": "BeVietnamPro-Regular",
161
+ "fontSize": 11.76923076923077,
162
+ "letterSpacing": 0.36,
163
+ "lineHeight": 15.76923076923077,
164
+ },
165
+ ],
166
+ [
167
+ [
168
+ {
169
+ "color": "#bfc1c5",
170
+ "flex": 1,
171
+ "flexGrow": 1,
172
+ "textAlign": "right",
173
+ },
174
+ ],
175
+ undefined,
176
+ ],
177
+ ]
178
+ }
179
+ themeFontWeight="regular"
180
+ themeIntent="body"
181
+ themeState="disabled"
182
+ >
183
+ 100/255
184
+ </Text>
185
+ `;
186
+
187
+ exports[`StyledCharacterCount renders correctly with themeState error 1`] = `
188
+ <Text
189
+ allowFontScaling={false}
190
+ style={
191
+ [
192
+ [
193
+ {
194
+ "color": "#001f23",
195
+ "fontFamily": "BeVietnamPro-Regular",
196
+ "fontSize": 11.76923076923077,
197
+ "letterSpacing": 0.36,
198
+ "lineHeight": 15.76923076923077,
199
+ },
200
+ ],
201
+ [
202
+ [
203
+ {
204
+ "color": "#cb300a",
205
+ "flex": 1,
206
+ "flexGrow": 1,
207
+ "textAlign": "right",
208
+ },
209
+ ],
210
+ undefined,
211
+ ],
212
+ ]
213
+ }
214
+ themeFontWeight="regular"
215
+ themeIntent="body"
216
+ themeState="error"
217
+ >
218
+ 100/255
219
+ </Text>
220
+ `;
221
+
222
+ exports[`StyledCharacterCount renders correctly with themeState filled 1`] = `
223
+ <Text
224
+ allowFontScaling={false}
225
+ style={
226
+ [
227
+ [
228
+ {
229
+ "color": "#001f23",
230
+ "fontFamily": "BeVietnamPro-Regular",
231
+ "fontSize": 11.76923076923077,
232
+ "letterSpacing": 0.36,
233
+ "lineHeight": 15.76923076923077,
234
+ },
235
+ ],
236
+ [
237
+ [
238
+ {
239
+ "color": "#001f23",
240
+ "flex": 1,
241
+ "flexGrow": 1,
242
+ "textAlign": "right",
243
+ },
244
+ ],
245
+ undefined,
246
+ ],
247
+ ]
248
+ }
249
+ themeFontWeight="regular"
250
+ themeIntent="body"
251
+ themeState="filled"
252
+ >
253
+ 100/255
254
+ </Text>
255
+ `;
256
+
257
+ exports[`StyledCharacterCount renders correctly with themeState readonly 1`] = `
258
+ <Text
259
+ allowFontScaling={false}
260
+ style={
261
+ [
262
+ [
263
+ {
264
+ "color": "#001f23",
265
+ "fontFamily": "BeVietnamPro-Regular",
266
+ "fontSize": 11.76923076923077,
267
+ "letterSpacing": 0.36,
268
+ "lineHeight": 15.76923076923077,
269
+ },
270
+ ],
271
+ [
272
+ [
273
+ {
274
+ "color": "#808f91",
275
+ "flex": 1,
276
+ "flexGrow": 1,
277
+ "textAlign": "right",
278
+ },
279
+ ],
280
+ undefined,
281
+ ],
282
+ ]
283
+ }
284
+ themeFontWeight="regular"
285
+ themeIntent="body"
286
+ themeState="readonly"
287
+ >
288
+ 100/255
289
+ </Text>
290
+ `;
291
+
292
+ exports[`StyledError renders correctly 1`] = `
293
+ <Text
294
+ allowFontScaling={false}
295
+ style={
296
+ [
297
+ [
298
+ {
299
+ "color": "#001f23",
300
+ "fontFamily": "BeVietnamPro-Regular",
301
+ "fontSize": 11.76923076923077,
302
+ "letterSpacing": 0.36,
303
+ "lineHeight": 15.76923076923077,
304
+ },
305
+ ],
306
+ [
307
+ [
308
+ {
309
+ "color": "#cb300a",
310
+ "marginLeft": 3.9230769230769234,
311
+ },
312
+ ],
313
+ undefined,
314
+ ],
315
+ ]
316
+ }
317
+ themeFontWeight="regular"
318
+ themeIntent="body"
319
+ >
320
+ must not exceed character limit
321
+ </Text>
322
+ `;
323
+
324
+ exports[`StyledErrorRow renders correctly 1`] = `
325
+ <View
326
+ style={
327
+ [
328
+ [
329
+ {
330
+ "alignItems": "center",
331
+ "flex": 1,
332
+ "flexDirection": "row",
333
+ "flexGrow": 4,
334
+ "marginRight": 3.9230769230769234,
335
+ },
336
+ ],
337
+ undefined,
338
+ ]
339
+ }
340
+ />
341
+ `;
342
+
343
+ exports[`StyledHelperText renders correctly 1`] = `
344
+ <Text
345
+ allowFontScaling={false}
346
+ style={
347
+ [
348
+ [
349
+ {
350
+ "color": "#001f23",
351
+ "fontFamily": "BeVietnamPro-Regular",
352
+ "fontSize": 11.76923076923077,
353
+ "letterSpacing": 0.36,
354
+ "lineHeight": 15.76923076923077,
355
+ },
356
+ ],
357
+ undefined,
358
+ ]
359
+ }
360
+ themeFontWeight="regular"
361
+ themeIntent="body"
362
+ >
363
+ helper text
364
+ </Text>
365
+ `;
366
+
367
+ exports[`StyledLabel renders correctly with themeState default 1`] = `
368
+ <Text
369
+ allowFontScaling={false}
370
+ style={
371
+ [
372
+ [
373
+ {
374
+ "color": "#001f23",
375
+ "fontFamily": "BeVietnamPro-Regular",
376
+ "fontSize": 11.76923076923077,
377
+ "letterSpacing": 0.36,
378
+ "lineHeight": 15.76923076923077,
379
+ },
380
+ ],
381
+ [
382
+ [
383
+ {
384
+ "color": "#808f91",
385
+ },
386
+ ],
387
+ undefined,
388
+ ],
389
+ ]
390
+ }
391
+ themeFontWeight="regular"
392
+ themeIntent="body"
393
+ themeState="default"
394
+ >
395
+ Label
396
+ </Text>
397
+ `;
398
+
399
+ exports[`StyledLabel renders correctly with themeState disabled 1`] = `
400
+ <Text
401
+ allowFontScaling={false}
402
+ style={
403
+ [
404
+ [
405
+ {
406
+ "color": "#001f23",
407
+ "fontFamily": "BeVietnamPro-Regular",
408
+ "fontSize": 11.76923076923077,
409
+ "letterSpacing": 0.36,
410
+ "lineHeight": 15.76923076923077,
411
+ },
412
+ ],
413
+ [
414
+ [
415
+ {
416
+ "color": "#bfc1c5",
417
+ },
418
+ ],
419
+ undefined,
420
+ ],
421
+ ]
422
+ }
423
+ themeFontWeight="regular"
424
+ themeIntent="body"
425
+ themeState="disabled"
426
+ >
427
+ Label
428
+ </Text>
429
+ `;
430
+
431
+ exports[`StyledLabel renders correctly with themeState error 1`] = `
432
+ <Text
433
+ allowFontScaling={false}
434
+ style={
435
+ [
436
+ [
437
+ {
438
+ "color": "#001f23",
439
+ "fontFamily": "BeVietnamPro-Regular",
440
+ "fontSize": 11.76923076923077,
441
+ "letterSpacing": 0.36,
442
+ "lineHeight": 15.76923076923077,
443
+ },
444
+ ],
445
+ [
446
+ [
447
+ {
448
+ "color": "#cb300a",
449
+ },
450
+ ],
451
+ undefined,
452
+ ],
453
+ ]
454
+ }
455
+ themeFontWeight="regular"
456
+ themeIntent="body"
457
+ themeState="error"
458
+ >
459
+ Label
460
+ </Text>
461
+ `;
462
+
463
+ exports[`StyledLabel renders correctly with themeState filled 1`] = `
464
+ <Text
465
+ allowFontScaling={false}
466
+ style={
467
+ [
468
+ [
469
+ {
470
+ "color": "#001f23",
471
+ "fontFamily": "BeVietnamPro-Regular",
472
+ "fontSize": 11.76923076923077,
473
+ "letterSpacing": 0.36,
474
+ "lineHeight": 15.76923076923077,
475
+ },
476
+ ],
477
+ [
478
+ [
479
+ {
480
+ "color": "#808f91",
481
+ },
482
+ ],
483
+ undefined,
484
+ ],
485
+ ]
486
+ }
487
+ themeFontWeight="regular"
488
+ themeIntent="body"
489
+ themeState="filled"
490
+ >
491
+ Label
492
+ </Text>
493
+ `;
494
+
495
+ exports[`StyledLabel renders correctly with themeState readonly 1`] = `
496
+ <Text
497
+ allowFontScaling={false}
498
+ style={
499
+ [
500
+ [
501
+ {
502
+ "color": "#001f23",
503
+ "fontFamily": "BeVietnamPro-Regular",
504
+ "fontSize": 11.76923076923077,
505
+ "letterSpacing": 0.36,
506
+ "lineHeight": 15.76923076923077,
507
+ },
508
+ ],
509
+ [
510
+ [
511
+ {
512
+ "color": "#808f91",
513
+ },
514
+ ],
515
+ undefined,
516
+ ],
517
+ ]
518
+ }
519
+ themeFontWeight="regular"
520
+ themeIntent="body"
521
+ themeState="readonly"
522
+ >
523
+ Label
524
+ </Text>
525
+ `;
526
+
527
+ exports[`StyledTextInput renders correctly with $themeState state 1`] = `
528
+ <TextInput
529
+ style={
530
+ [
531
+ [
532
+ {
533
+ "flexGrow": 2,
534
+ "fontFamily": "BeVietnamPro-Regular",
535
+ "fontSize": 15.692307692307693,
536
+ "height": undefined,
537
+ "maxHeight": 141.23076923076923,
538
+ "minHeight": 23.53846153846154,
539
+ "paddingVertical": 0,
540
+ "textAlignVertical": "center",
541
+ },
542
+ ],
543
+ undefined,
544
+ ]
545
+ }
546
+ themeVariant="text"
547
+ />
548
+ `;
549
+
550
+ exports[`StyledTextInput renders correctly with $themeState state 2`] = `
551
+ <TextInput
552
+ style={
553
+ [
554
+ [
555
+ {
556
+ "flexGrow": 2,
557
+ "fontFamily": "BeVietnamPro-Regular",
558
+ "fontSize": 15.692307692307693,
559
+ "height": 141.23076923076923,
560
+ "maxHeight": 141.23076923076923,
561
+ "minHeight": 23.53846153846154,
562
+ "paddingVertical": 0,
563
+ "textAlignVertical": "top",
564
+ },
565
+ ],
566
+ undefined,
567
+ ]
568
+ }
569
+ themeVariant="textarea"
570
+ />
571
+ `;