@hero-design/rn-work-uikit 1.5.0 → 1.6.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 (20) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/lib/index.js +276 -314
  3. package/package.json +2 -2
  4. package/src/components/DatePicker/__tests__/__snapshots__/index.spec.tsx.snap +33 -0
  5. package/src/components/FormGroup/__tests__/index.spec.tsx +62 -49
  6. package/src/components/RichTextEditor/RichTextEditor.tsx +15 -24
  7. package/src/components/RichTextEditor/StyledRichTextEditor.tsx +9 -3
  8. package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx +81 -0
  9. package/src/components/RichTextEditor/index.tsx +2 -4
  10. package/src/components/RichTextEditor/types.ts +12 -1
  11. package/src/components/TextInput/index.tsx +1 -4
  12. package/stats/1.6.1/rn-work-uikit-stats.html +4844 -0
  13. package/testUtils/setup.tsx +19 -1
  14. package/src/components/RichTextEditor/__mocks__/hero-editor.js +0 -3
  15. package/src/components/TextInput/Group/__tests__/__snapshots__/index.spec.tsx.snap +0 -880
  16. package/src/components/TextInput/Group/__tests__/index.spec.tsx +0 -179
  17. package/src/components/TextInput/Group/__tests__/utils.spec.ts +0 -73
  18. package/src/components/TextInput/Group/index.tsx +0 -107
  19. package/src/components/TextInput/Group/utils.ts +0 -67
  20. package/stats/1.5.0/rn-work-uikit-stats.html +0 -4844
package/src/components/TextInput/Group/__tests__/__snapshots__/index.spec.tsx.snap DELETED
@@ -1,880 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`TextInputGroup should render: xxx 1`] = `
4
- <View
5
- style={
6
- [
7
- [
8
- {},
9
- ],
10
- undefined,
11
- ]
12
- }
13
- >
14
- <Pressable
15
- accessibilityState={
16
- {
17
- "disabled": false,
18
- }
19
- }
20
- disabled={false}
21
- onPress={[Function]}
22
- style={
23
- [
24
- [
25
- {
26
- "flexDirection": "row",
27
- "marginTop": 7.846153846153847,
28
- "minHeight": 54.92307692307692,
29
- "paddingHorizontal": 15.692307692307693,
30
- "width": "100%",
31
- "zIndex": 0,
32
- },
33
- ],
34
- {
35
- "marginTop": 0,
36
- },
37
- ]
38
- }
39
- themeFocused={false}
40
- themeGroupStyleEnabled={true}
41
- themeHasError={false}
42
- >
43
- <View
44
- pointerEvents="none"
45
- style={
46
- [
47
- [
48
- {
49
- "borderColor": "#e8e9ea",
50
- "borderRadius": 8,
51
- "borderWidth": 2,
52
- },
53
- ],
54
- [
55
- {
56
- "backgroundColor": "#ffffff",
57
- },
58
- {
59
- "borderBottomLeftRadius": 0,
60
- "borderBottomRightRadius": 0,
61
- },
62
- ],
63
- ]
64
- }
65
- testID="text-input-border"
66
- themeFocused={false}
67
- themeState="filled"
68
- />
69
- <View
70
- style={
71
- [
72
- [
73
- {
74
- "backgroundColor": "transparent",
75
- "borderRadius": 8,
76
- "flex": 1,
77
- "flexDirection": "column",
78
- "marginBottom": 7.846153846153847,
79
- "marginTop": 7.846153846153847,
80
- "overflow": "hidden",
81
- },
82
- ],
83
- undefined,
84
- ]
85
- }
86
- >
87
- <AnimatedView
88
- style={
89
- [
90
- [
91
- {
92
- "alignItems": "center",
93
- "backgroundColor": "transparent",
94
- "flexDirection": "row",
95
- },
96
- ],
97
- [
98
- {
99
- "transformOrigin": "left center",
100
- },
101
- {
102
- "transform": [
103
- {
104
- "translateY": {
105
- "addListener": [MockFunction],
106
- "removeListener": [MockFunction],
107
- "setValue": [MockFunction],
108
- },
109
- },
110
- {
111
- "scale": {
112
- "addListener": [MockFunction],
113
- "removeListener": [MockFunction],
114
- "setValue": [MockFunction],
115
- },
116
- },
117
- ],
118
- },
119
- ],
120
- ]
121
- }
122
- testID="input-label"
123
- themeVariant="text"
124
- >
125
- <AnimatedView
126
- style={
127
- {
128
- "flexDirection": "row",
129
- }
130
- }
131
- >
132
- <Text
133
- allowFontScaling={false}
134
- numberOfLines={1}
135
- style={
136
- [
137
- [
138
- {
139
- "color": "#001f23",
140
- "fontFamily": "BeVietnamPro-Regular",
141
- "fontSize": 11.76923076923077,
142
- "letterSpacing": 0.36,
143
- "lineHeight": 15.76923076923077,
144
- },
145
- ],
146
- [
147
- [
148
- {
149
- "color": "#808f91",
150
- },
151
- ],
152
- {
153
- "backgroundColor": "transparent",
154
- },
155
- ],
156
- ]
157
- }
158
- testID="input-label-text"
159
- themeFontWeight="regular"
160
- themeIntent="body"
161
- themeState="filled"
162
- >
163
- Text Input 1
164
- </Text>
165
- </AnimatedView>
166
- </AnimatedView>
167
- <Pressable
168
- style={
169
- [
170
- [
171
- {
172
- "alignItems": "center",
173
- "flexDirection": "row",
174
- "flexGrow": 2,
175
- "flexShrink": 1,
176
- "opacity": 1,
177
- },
178
- ],
179
- undefined,
180
- ]
181
- }
182
- themeOpacity={1}
183
- >
184
- <View />
185
- <View
186
- accessibilityLabel="Text input field"
187
- style={
188
- {
189
- "flex": 1,
190
- }
191
- }
192
- testID="input-row-input-wrapper"
193
- >
194
- <TextInput
195
- accessibilityState={
196
- {
197
- "disabled": false,
198
- }
199
- }
200
- allowFontScaling={false}
201
- editable={true}
202
- onBlur={[Function]}
203
- onChangeText={[Function]}
204
- onFocus={[Function]}
205
- placeholder=" "
206
- placeholderTextColor="#4d6265"
207
- style={
208
- [
209
- [
210
- {
211
- "flexGrow": 2,
212
- "fontFamily": "BeVietnamPro-Regular",
213
- "fontSize": 15.692307692307693,
214
- "height": undefined,
215
- "maxHeight": 141.23076923076923,
216
- "minHeight": 23.53846153846154,
217
- "paddingVertical": 0,
218
- "textAlignVertical": "center",
219
- },
220
- ],
221
- [
222
- {
223
- "backgroundColor": "#ffffff",
224
- "color": "#001f23",
225
- },
226
- {},
227
- ],
228
- ]
229
- }
230
- testID="text-input"
231
- themeVariant="text"
232
- value="Text Input 1"
233
- />
234
- </View>
235
- </Pressable>
236
- <View
237
- style={
238
- [
239
- [
240
- {
241
- "alignItems": "flex-start",
242
- "flexDirection": "row",
243
- "justifyContent": "space-between",
244
- },
245
- ],
246
- undefined,
247
- ]
248
- }
249
- />
250
- </View>
251
- <View
252
- style={
253
- [
254
- [
255
- {
256
- "alignItems": "center",
257
- "flexDirection": "row",
258
- "justifyContent": "flex-end",
259
- },
260
- ],
261
- undefined,
262
- ]
263
- }
264
- />
265
- </Pressable>
266
- <Pressable
267
- accessibilityState={
268
- {
269
- "disabled": false,
270
- }
271
- }
272
- disabled={false}
273
- onPress={[Function]}
274
- style={
275
- [
276
- [
277
- {
278
- "flexDirection": "row",
279
- "marginTop": 7.846153846153847,
280
- "minHeight": 54.92307692307692,
281
- "paddingHorizontal": 15.692307692307693,
282
- "width": "100%",
283
- "zIndex": 1,
284
- },
285
- ],
286
- {
287
- "marginTop": -2,
288
- },
289
- ]
290
- }
291
- testID="text-input-2"
292
- themeFocused={false}
293
- themeGroupStyleEnabled={true}
294
- themeHasError={true}
295
- >
296
- <View
297
- pointerEvents="none"
298
- style={
299
- [
300
- [
301
- {
302
- "borderColor": "#cb300a",
303
- "borderRadius": 8,
304
- "borderWidth": 2,
305
- },
306
- ],
307
- [
308
- {
309
- "backgroundColor": "#ffffff",
310
- },
311
- {
312
- "borderRadius": 0,
313
- },
314
- ],
315
- ]
316
- }
317
- testID="text-input-border"
318
- themeFocused={false}
319
- themeState="error"
320
- />
321
- <View
322
- style={
323
- [
324
- [
325
- {
326
- "backgroundColor": "transparent",
327
- "borderRadius": 8,
328
- "flex": 1,
329
- "flexDirection": "column",
330
- "marginBottom": 7.846153846153847,
331
- "marginTop": 7.846153846153847,
332
- "overflow": "hidden",
333
- },
334
- ],
335
- undefined,
336
- ]
337
- }
338
- >
339
- <AnimatedView
340
- style={
341
- [
342
- [
343
- {
344
- "alignItems": "center",
345
- "backgroundColor": "transparent",
346
- "flexDirection": "row",
347
- },
348
- ],
349
- [
350
- {
351
- "transformOrigin": "left center",
352
- },
353
- {
354
- "transform": [
355
- {
356
- "translateY": {
357
- "addListener": [MockFunction],
358
- "removeListener": [MockFunction],
359
- "setValue": [MockFunction],
360
- },
361
- },
362
- {
363
- "scale": {
364
- "addListener": [MockFunction],
365
- "removeListener": [MockFunction],
366
- "setValue": [MockFunction],
367
- },
368
- },
369
- ],
370
- },
371
- ],
372
- ]
373
- }
374
- testID="input-label-text-input-2"
375
- themeVariant="text"
376
- >
377
- <AnimatedView
378
- style={
379
- {
380
- "flexDirection": "row",
381
- }
382
- }
383
- >
384
- <Text
385
- allowFontScaling={false}
386
- numberOfLines={1}
387
- style={
388
- [
389
- [
390
- {
391
- "color": "#001f23",
392
- "fontFamily": "BeVietnamPro-Regular",
393
- "fontSize": 11.76923076923077,
394
- "letterSpacing": 0.36,
395
- "lineHeight": 15.76923076923077,
396
- },
397
- ],
398
- [
399
- [
400
- {
401
- "color": "#cb300a",
402
- },
403
- ],
404
- {
405
- "backgroundColor": "transparent",
406
- },
407
- ],
408
- ]
409
- }
410
- testID="input-label-text-text-input-2"
411
- themeFontWeight="regular"
412
- themeIntent="body"
413
- themeState="error"
414
- >
415
- Text Input 2
416
- </Text>
417
- <Text
418
- allowFontScaling={false}
419
- style={
420
- [
421
- [
422
- {
423
- "color": "#001f23",
424
- "fontFamily": "BeVietnamPro-Regular",
425
- "fontSize": 11.76923076923077,
426
- "letterSpacing": 0.36,
427
- "lineHeight": 15.76923076923077,
428
- },
429
- ],
430
- [
431
- [
432
- {
433
- "color": "#cb300a",
434
- },
435
- ],
436
- undefined,
437
- ],
438
- ]
439
- }
440
- themeFontWeight="regular"
441
- themeIntent="body"
442
- themeState="error"
443
- >
444
- (Optional)
445
- </Text>
446
- </AnimatedView>
447
- </AnimatedView>
448
- <Pressable
449
- style={
450
- [
451
- [
452
- {
453
- "alignItems": "center",
454
- "flexDirection": "row",
455
- "flexGrow": 2,
456
- "flexShrink": 1,
457
- "opacity": 1,
458
- },
459
- ],
460
- undefined,
461
- ]
462
- }
463
- themeOpacity={1}
464
- >
465
- <View />
466
- <View
467
- accessibilityLabel="Text input field"
468
- style={
469
- {
470
- "flex": 1,
471
- }
472
- }
473
- testID="input-row-input-wrapper"
474
- >
475
- <TextInput
476
- accessibilityState={
477
- {
478
- "disabled": false,
479
- }
480
- }
481
- allowFontScaling={false}
482
- editable={true}
483
- onBlur={[Function]}
484
- onChangeText={[Function]}
485
- onFocus={[Function]}
486
- placeholder=" "
487
- placeholderTextColor="#4d6265"
488
- style={
489
- [
490
- [
491
- {
492
- "flexGrow": 2,
493
- "fontFamily": "BeVietnamPro-Regular",
494
- "fontSize": 15.692307692307693,
495
- "height": undefined,
496
- "maxHeight": 141.23076923076923,
497
- "minHeight": 23.53846153846154,
498
- "paddingVertical": 0,
499
- "textAlignVertical": "center",
500
- },
501
- ],
502
- [
503
- {
504
- "backgroundColor": "#ffffff",
505
- "color": "#001f23",
506
- },
507
- {},
508
- ],
509
- ]
510
- }
511
- testID="text-input-text-input-2"
512
- themeVariant="text"
513
- value="Text Input 2"
514
- />
515
- </View>
516
- </Pressable>
517
- <View
518
- style={
519
- [
520
- [
521
- {
522
- "alignItems": "flex-start",
523
- "flexDirection": "row",
524
- "justifyContent": "space-between",
525
- },
526
- ],
527
- undefined,
528
- ]
529
- }
530
- >
531
- <View
532
- style={
533
- [
534
- [
535
- {
536
- "alignItems": "center",
537
- "flex": 1,
538
- "flexDirection": "row",
539
- "flexGrow": 4,
540
- "marginRight": 3.9230769230769234,
541
- },
542
- ],
543
- undefined,
544
- ]
545
- }
546
- >
547
- <Text
548
- allowFontScaling={false}
549
- selectable={false}
550
- style={
551
- [
552
- {
553
- "color": undefined,
554
- "fontSize": 12,
555
- },
556
- [
557
- [
558
- {
559
- "color": "#cb300a",
560
- "fontSize": 15.692307692307693,
561
- },
562
- ],
563
- undefined,
564
- ],
565
- {
566
- "fontFamily": "hero-icons-mobile",
567
- "fontStyle": "normal",
568
- "fontWeight": "normal",
569
- },
570
- {},
571
- ]
572
- }
573
- testID="input-error-icon"
574
- themeIntent="danger"
575
- themeSize="xsmall"
576
- >
577
-
578
- </Text>
579
- <Text
580
- allowFontScaling={false}
581
- style={
582
- [
583
- [
584
- {
585
- "color": "#001f23",
586
- "fontFamily": "BeVietnamPro-Regular",
587
- "fontSize": 11.76923076923077,
588
- "letterSpacing": 0.36,
589
- "lineHeight": 15.76923076923077,
590
- },
591
- ],
592
- [
593
- [
594
- {
595
- "color": "#cb300a",
596
- "marginLeft": 3.9230769230769234,
597
- },
598
- ],
599
- undefined,
600
- ],
601
- ]
602
- }
603
- testID="input-error-message"
604
- themeFontWeight="regular"
605
- themeIntent="body"
606
- >
607
- This is an error
608
- </Text>
609
- </View>
610
- </View>
611
- </View>
612
- <View
613
- style={
614
- [
615
- [
616
- {
617
- "alignItems": "center",
618
- "flexDirection": "row",
619
- "justifyContent": "flex-end",
620
- },
621
- ],
622
- undefined,
623
- ]
624
- }
625
- />
626
- </Pressable>
627
- <Pressable
628
- accessibilityState={
629
- {
630
- "disabled": false,
631
- }
632
- }
633
- disabled={false}
634
- onPress={[Function]}
635
- style={
636
- [
637
- [
638
- {
639
- "flexDirection": "row",
640
- "marginTop": 7.846153846153847,
641
- "minHeight": 54.92307692307692,
642
- "paddingHorizontal": 15.692307692307693,
643
- "width": "100%",
644
- "zIndex": 0,
645
- },
646
- ],
647
- {
648
- "marginTop": -2,
649
- },
650
- ]
651
- }
652
- themeFocused={false}
653
- themeGroupStyleEnabled={true}
654
- themeHasError={false}
655
- >
656
- <View
657
- pointerEvents="none"
658
- style={
659
- [
660
- [
661
- {
662
- "borderColor": "#e8e9ea",
663
- "borderRadius": 8,
664
- "borderWidth": 2,
665
- },
666
- ],
667
- [
668
- {
669
- "backgroundColor": "#ffffff",
670
- },
671
- {
672
- "borderTopLeftRadius": 0,
673
- "borderTopRightRadius": 0,
674
- },
675
- ],
676
- ]
677
- }
678
- testID="text-input-border"
679
- themeFocused={false}
680
- themeState="filled"
681
- />
682
- <View
683
- style={
684
- [
685
- [
686
- {
687
- "backgroundColor": "transparent",
688
- "borderRadius": 8,
689
- "flex": 1,
690
- "flexDirection": "column",
691
- "marginBottom": 7.846153846153847,
692
- "marginTop": 7.846153846153847,
693
- "overflow": "hidden",
694
- },
695
- ],
696
- undefined,
697
- ]
698
- }
699
- >
700
- <AnimatedView
701
- style={
702
- [
703
- [
704
- {
705
- "alignItems": "center",
706
- "backgroundColor": "transparent",
707
- "flexDirection": "row",
708
- },
709
- ],
710
- [
711
- {
712
- "transformOrigin": "left center",
713
- },
714
- {
715
- "transform": [
716
- {
717
- "translateY": {
718
- "addListener": [MockFunction],
719
- "removeListener": [MockFunction],
720
- "setValue": [MockFunction],
721
- },
722
- },
723
- {
724
- "scale": {
725
- "addListener": [MockFunction],
726
- "removeListener": [MockFunction],
727
- "setValue": [MockFunction],
728
- },
729
- },
730
- ],
731
- },
732
- ],
733
- ]
734
- }
735
- testID="input-label"
736
- themeVariant="text"
737
- >
738
- <AnimatedView
739
- style={
740
- {
741
- "flexDirection": "row",
742
- }
743
- }
744
- >
745
- <Text
746
- allowFontScaling={false}
747
- numberOfLines={1}
748
- style={
749
- [
750
- [
751
- {
752
- "color": "#001f23",
753
- "fontFamily": "BeVietnamPro-Regular",
754
- "fontSize": 11.76923076923077,
755
- "letterSpacing": 0.36,
756
- "lineHeight": 15.76923076923077,
757
- },
758
- ],
759
- [
760
- [
761
- {
762
- "color": "#808f91",
763
- },
764
- ],
765
- {
766
- "backgroundColor": "transparent",
767
- },
768
- ],
769
- ]
770
- }
771
- testID="input-label-text"
772
- themeFontWeight="regular"
773
- themeIntent="body"
774
- themeState="filled"
775
- >
776
- Text Input 3
777
- </Text>
778
- </AnimatedView>
779
- </AnimatedView>
780
- <Pressable
781
- style={
782
- [
783
- [
784
- {
785
- "alignItems": "center",
786
- "flexDirection": "row",
787
- "flexGrow": 2,
788
- "flexShrink": 1,
789
- "opacity": 1,
790
- },
791
- ],
792
- undefined,
793
- ]
794
- }
795
- themeOpacity={1}
796
- >
797
- <View />
798
- <View
799
- accessibilityLabel="Text input field"
800
- style={
801
- {
802
- "flex": 1,
803
- }
804
- }
805
- testID="input-row-input-wrapper"
806
- >
807
- <TextInput
808
- accessibilityState={
809
- {
810
- "disabled": false,
811
- }
812
- }
813
- allowFontScaling={false}
814
- editable={true}
815
- onBlur={[Function]}
816
- onChangeText={[Function]}
817
- onFocus={[Function]}
818
- placeholder=" "
819
- placeholderTextColor="#4d6265"
820
- style={
821
- [
822
- [
823
- {
824
- "flexGrow": 2,
825
- "fontFamily": "BeVietnamPro-Regular",
826
- "fontSize": 15.692307692307693,
827
- "height": undefined,
828
- "maxHeight": 141.23076923076923,
829
- "minHeight": 23.53846153846154,
830
- "paddingVertical": 0,
831
- "textAlignVertical": "center",
832
- },
833
- ],
834
- [
835
- {
836
- "backgroundColor": "#ffffff",
837
- "color": "#001f23",
838
- },
839
- {},
840
- ],
841
- ]
842
- }
843
- testID="text-input"
844
- themeVariant="text"
845
- value="Text Input 3"
846
- />
847
- </View>
848
- </Pressable>
849
- <View
850
- style={
851
- [
852
- [
853
- {
854
- "alignItems": "flex-start",
855
- "flexDirection": "row",
856
- "justifyContent": "space-between",
857
- },
858
- ],
859
- undefined,
860
- ]
861
- }
862
- />
863
- </View>
864
- <View
865
- style={
866
- [
867
- [
868
- {
869
- "alignItems": "center",
870
- "flexDirection": "row",
871
- "justifyContent": "flex-end",
872
- },
873
- ],
874
- undefined,
875
- ]
876
- }
877
- />
878
- </Pressable>
879
- </View>
880
- `;