@ornikar/bumper 2.13.0 → 2.14.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 (63) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +90 -0
  3. package/dist/definitions/index.d.ts +2 -1
  4. package/dist/definitions/index.d.ts.map +1 -1
  5. package/dist/definitions/storybook.d.ts +2 -0
  6. package/dist/definitions/storybook.d.ts.map +1 -0
  7. package/dist/definitions/system/loading/loader/Loader.d.ts +19 -0
  8. package/dist/definitions/system/loading/loader/Loader.d.ts.map +1 -0
  9. package/dist/definitions/system/loading/loader/LoaderBackgroundCircle.d.ts +5 -0
  10. package/dist/definitions/system/loading/loader/LoaderBackgroundCircle.d.ts.map +1 -0
  11. package/dist/definitions/system/loading/loader/LoaderCircleWrapper.d.ts +6 -0
  12. package/dist/definitions/system/loading/loader/LoaderCircleWrapper.d.ts.map +1 -0
  13. package/dist/definitions/system/loading/loader/LoaderForegroundCircle.d.ts +11 -0
  14. package/dist/definitions/system/loading/loader/LoaderForegroundCircle.d.ts.map +1 -0
  15. package/dist/definitions/system/loading/loader/loaderConfig.d.ts +16 -0
  16. package/dist/definitions/system/loading/loader/loaderConfig.d.ts.map +1 -0
  17. package/dist/index-metro.es.android.js +162 -14
  18. package/dist/index-metro.es.android.js.map +1 -1
  19. package/dist/index-metro.es.ios.js +162 -14
  20. package/dist/index-metro.es.ios.js.map +1 -1
  21. package/dist/index-node-22.22.cjs.js +165 -12
  22. package/dist/index-node-22.22.cjs.js.map +1 -1
  23. package/dist/index-node-22.22.cjs.web.js +165 -12
  24. package/dist/index-node-22.22.cjs.web.js.map +1 -1
  25. package/dist/index-node-22.22.es.mjs +162 -14
  26. package/dist/index-node-22.22.es.mjs.map +1 -1
  27. package/dist/index-node-22.22.es.web.mjs +162 -14
  28. package/dist/index-node-22.22.es.web.mjs.map +1 -1
  29. package/dist/index.es.js +157 -14
  30. package/dist/index.es.js.map +1 -1
  31. package/dist/index.es.web.js +157 -14
  32. package/dist/index.es.web.js.map +1 -1
  33. package/dist/storybook-metro.es.android.js +402 -0
  34. package/dist/storybook-metro.es.android.js.map +1 -0
  35. package/dist/storybook-metro.es.ios.js +402 -0
  36. package/dist/storybook-metro.es.ios.js.map +1 -0
  37. package/dist/storybook-node-22.22.cjs.js +406 -0
  38. package/dist/storybook-node-22.22.cjs.js.map +1 -0
  39. package/dist/storybook-node-22.22.cjs.web.js +406 -0
  40. package/dist/storybook-node-22.22.cjs.web.js.map +1 -0
  41. package/dist/storybook-node-22.22.es.mjs +402 -0
  42. package/dist/storybook-node-22.22.es.mjs.map +1 -0
  43. package/dist/storybook-node-22.22.es.web.mjs +402 -0
  44. package/dist/storybook-node-22.22.es.web.mjs.map +1 -0
  45. package/dist/storybook.es.js +399 -0
  46. package/dist/storybook.es.js.map +1 -0
  47. package/dist/storybook.es.web.js +399 -0
  48. package/dist/storybook.es.web.js.map +1 -0
  49. package/dist/tsbuildinfo +1 -1
  50. package/package.json +42 -5
  51. package/src/index.ts +4 -1
  52. package/src/storybook.ts +1 -0
  53. package/src/system/loading/loader/Loader.features.stories.tsx +45 -0
  54. package/src/system/loading/loader/Loader.stories.tsx +28 -0
  55. package/src/system/loading/loader/Loader.tsx +65 -0
  56. package/src/system/loading/loader/LoaderBackgroundCircle.tsx +15 -0
  57. package/src/system/loading/loader/LoaderCircleWrapper.tsx +19 -0
  58. package/src/system/loading/loader/LoaderForegroundCircle.tsx +39 -0
  59. package/src/system/loading/loader/__snapshots__/Loader.features.stories.tsx.snap +703 -0
  60. package/src/system/loading/loader/__snapshots__/Loader.stories.tsx.snap +159 -0
  61. package/src/system/loading/loader/__snapshots_web__/Loader.features.stories.tsx.snap +225 -0
  62. package/src/system/loading/loader/__snapshots_web__/Loader.stories.tsx.snap +60 -0
  63. package/src/system/loading/loader/loaderConfig.ts +36 -0
package/src/system/loading/loader/__snapshots__/Loader.features.stories.tsx.snap ADDED
@@ -0,0 +1,703 @@
1
+ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
+
3
+ exports[`Bumper/Loading/Loader/Features OnContrasted 1`] = `
4
+ <RNCSafeAreaProvider
5
+ onInsetsChange={[Function]}
6
+ style={
7
+ [
8
+ {
9
+ "flex": 1,
10
+ },
11
+ undefined,
12
+ ]
13
+ }
14
+ >
15
+ <View
16
+ style={
17
+ {
18
+ "alignItems": "center",
19
+ "flexDirection": "row",
20
+ "gap": 16,
21
+ }
22
+ }
23
+ >
24
+ <View
25
+ style={
26
+ {
27
+ "backgroundColor": "#F1ECE4",
28
+ "borderBottomLeftRadius": 4,
29
+ "borderBottomRightRadius": 4,
30
+ "borderTopLeftRadius": 4,
31
+ "borderTopRightRadius": 4,
32
+ "paddingBottom": 16,
33
+ "paddingLeft": 16,
34
+ "paddingRight": 16,
35
+ "paddingTop": 16,
36
+ }
37
+ }
38
+ >
39
+ <View
40
+ style={
41
+ {
42
+ "height": 20,
43
+ "position": "relative",
44
+ "transform": [
45
+ {
46
+ "rotate": "-90deg",
47
+ },
48
+ ],
49
+ "width": 20,
50
+ }
51
+ }
52
+ >
53
+ <RNSVGSvgView
54
+ align="xMidYMid"
55
+ bbHeight={20}
56
+ bbWidth={20}
57
+ focusable={false}
58
+ meetOrSlice={0}
59
+ minX={0}
60
+ minY={0}
61
+ style={
62
+ [
63
+ {
64
+ "backgroundColor": "transparent",
65
+ "borderWidth": 0,
66
+ },
67
+ {
68
+ "height": 20,
69
+ "width": 20,
70
+ },
71
+ {
72
+ "flex": 0,
73
+ "height": 20,
74
+ "width": 20,
75
+ },
76
+ ]
77
+ }
78
+ vbHeight={20}
79
+ vbWidth={20}
80
+ >
81
+ <RNSVGGroup
82
+ fill={
83
+ {
84
+ "payload": 4278190080,
85
+ "type": 0,
86
+ }
87
+ }
88
+ >
89
+ <RNSVGCircle
90
+ cx={0}
91
+ cy={0}
92
+ fill={null}
93
+ propList={
94
+ [
95
+ "fill",
96
+ "stroke",
97
+ "strokeWidth",
98
+ ]
99
+ }
100
+ r={0}
101
+ stroke={
102
+ {
103
+ "payload": 4293583830,
104
+ "type": 0,
105
+ }
106
+ }
107
+ strokeWidth={1.5}
108
+ />
109
+ </RNSVGGroup>
110
+ </RNSVGSvgView>
111
+ <RNSVGSvgView
112
+ align="xMidYMid"
113
+ bbHeight={20}
114
+ bbWidth={20}
115
+ focusable={false}
116
+ meetOrSlice={0}
117
+ minX={0}
118
+ minY={0}
119
+ style={
120
+ [
121
+ {
122
+ "backgroundColor": "transparent",
123
+ "borderWidth": 0,
124
+ },
125
+ {
126
+ "height": 20,
127
+ "position": "absolute",
128
+ "width": 20,
129
+ },
130
+ {
131
+ "flex": 0,
132
+ "height": 20,
133
+ "width": 20,
134
+ },
135
+ ]
136
+ }
137
+ vbHeight={20}
138
+ vbWidth={20}
139
+ >
140
+ <RNSVGGroup
141
+ fill={
142
+ {
143
+ "payload": 4278190080,
144
+ "type": 0,
145
+ }
146
+ }
147
+ >
148
+ <RNSVGCircle
149
+ cx={10}
150
+ cy={10}
151
+ fill={null}
152
+ propList={
153
+ [
154
+ "fill",
155
+ "stroke",
156
+ "strokeWidth",
157
+ "strokeDasharray",
158
+ "strokeDashoffset",
159
+ "strokeLinecap",
160
+ ]
161
+ }
162
+ r={8.5}
163
+ stroke={
164
+ {
165
+ "payload": 4294967295,
166
+ "type": 0,
167
+ }
168
+ }
169
+ strokeDasharray={
170
+ [
171
+ 53.40707511102649,
172
+ 53.40707511102649,
173
+ ]
174
+ }
175
+ strokeDashoffset={53.40707511102649}
176
+ strokeLinecap={1}
177
+ strokeWidth={1.5}
178
+ />
179
+ </RNSVGGroup>
180
+ </RNSVGSvgView>
181
+ </View>
182
+ </View>
183
+ <View
184
+ style={
185
+ {
186
+ "backgroundColor": "#F1ECE4",
187
+ "borderBottomLeftRadius": 4,
188
+ "borderBottomRightRadius": 4,
189
+ "borderTopLeftRadius": 4,
190
+ "borderTopRightRadius": 4,
191
+ "paddingBottom": 16,
192
+ "paddingLeft": 16,
193
+ "paddingRight": 16,
194
+ "paddingTop": 16,
195
+ }
196
+ }
197
+ >
198
+ <View
199
+ style={
200
+ {
201
+ "height": 48,
202
+ "position": "relative",
203
+ "transform": [
204
+ {
205
+ "rotate": "-90deg",
206
+ },
207
+ ],
208
+ "width": 48,
209
+ }
210
+ }
211
+ >
212
+ <RNSVGSvgView
213
+ align="xMidYMid"
214
+ bbHeight={48}
215
+ bbWidth={48}
216
+ focusable={false}
217
+ meetOrSlice={0}
218
+ minX={0}
219
+ minY={0}
220
+ style={
221
+ [
222
+ {
223
+ "backgroundColor": "transparent",
224
+ "borderWidth": 0,
225
+ },
226
+ {
227
+ "height": 48,
228
+ "width": 48,
229
+ },
230
+ {
231
+ "flex": 0,
232
+ "height": 48,
233
+ "width": 48,
234
+ },
235
+ ]
236
+ }
237
+ vbHeight={48}
238
+ vbWidth={48}
239
+ >
240
+ <RNSVGGroup
241
+ fill={
242
+ {
243
+ "payload": 4278190080,
244
+ "type": 0,
245
+ }
246
+ }
247
+ >
248
+ <RNSVGCircle
249
+ cx={0}
250
+ cy={0}
251
+ fill={null}
252
+ propList={
253
+ [
254
+ "fill",
255
+ "stroke",
256
+ "strokeWidth",
257
+ ]
258
+ }
259
+ r={0}
260
+ stroke={
261
+ {
262
+ "payload": 4293583830,
263
+ "type": 0,
264
+ }
265
+ }
266
+ strokeWidth={3}
267
+ />
268
+ </RNSVGGroup>
269
+ </RNSVGSvgView>
270
+ <RNSVGSvgView
271
+ align="xMidYMid"
272
+ bbHeight={48}
273
+ bbWidth={48}
274
+ focusable={false}
275
+ meetOrSlice={0}
276
+ minX={0}
277
+ minY={0}
278
+ style={
279
+ [
280
+ {
281
+ "backgroundColor": "transparent",
282
+ "borderWidth": 0,
283
+ },
284
+ {
285
+ "height": 48,
286
+ "position": "absolute",
287
+ "width": 48,
288
+ },
289
+ {
290
+ "flex": 0,
291
+ "height": 48,
292
+ "width": 48,
293
+ },
294
+ ]
295
+ }
296
+ vbHeight={48}
297
+ vbWidth={48}
298
+ >
299
+ <RNSVGGroup
300
+ fill={
301
+ {
302
+ "payload": 4278190080,
303
+ "type": 0,
304
+ }
305
+ }
306
+ >
307
+ <RNSVGCircle
308
+ cx={24}
309
+ cy={24}
310
+ fill={null}
311
+ propList={
312
+ [
313
+ "fill",
314
+ "stroke",
315
+ "strokeWidth",
316
+ "strokeDasharray",
317
+ "strokeDashoffset",
318
+ "strokeLinecap",
319
+ ]
320
+ }
321
+ r={21}
322
+ stroke={
323
+ {
324
+ "payload": 4294967295,
325
+ "type": 0,
326
+ }
327
+ }
328
+ strokeDasharray={
329
+ [
330
+ 131.94689145077132,
331
+ 131.94689145077132,
332
+ ]
333
+ }
334
+ strokeDashoffset={131.94689145077132}
335
+ strokeLinecap={1}
336
+ strokeWidth={3}
337
+ />
338
+ </RNSVGGroup>
339
+ </RNSVGSvgView>
340
+ </View>
341
+ </View>
342
+ </View>
343
+ </RNCSafeAreaProvider>
344
+ `;
345
+
346
+ exports[`Bumper/Loading/Loader/Features Sizes 1`] = `
347
+ <RNCSafeAreaProvider
348
+ onInsetsChange={[Function]}
349
+ style={
350
+ [
351
+ {
352
+ "flex": 1,
353
+ },
354
+ undefined,
355
+ ]
356
+ }
357
+ >
358
+ <View
359
+ style={
360
+ {
361
+ "alignItems": "center",
362
+ "flexDirection": "row",
363
+ "gap": 16,
364
+ }
365
+ }
366
+ >
367
+ <View
368
+ style={
369
+ {
370
+ "alignItems": "center",
371
+ "flexDirection": "column",
372
+ "gap": 8,
373
+ }
374
+ }
375
+ >
376
+ <View
377
+ style={
378
+ {
379
+ "height": 20,
380
+ "position": "relative",
381
+ "transform": [
382
+ {
383
+ "rotate": "-90deg",
384
+ },
385
+ ],
386
+ "width": 20,
387
+ }
388
+ }
389
+ >
390
+ <RNSVGSvgView
391
+ align="xMidYMid"
392
+ bbHeight={20}
393
+ bbWidth={20}
394
+ focusable={false}
395
+ meetOrSlice={0}
396
+ minX={0}
397
+ minY={0}
398
+ style={
399
+ [
400
+ {
401
+ "backgroundColor": "transparent",
402
+ "borderWidth": 0,
403
+ },
404
+ {
405
+ "height": 20,
406
+ "width": 20,
407
+ },
408
+ {
409
+ "flex": 0,
410
+ "height": 20,
411
+ "width": 20,
412
+ },
413
+ ]
414
+ }
415
+ vbHeight={20}
416
+ vbWidth={20}
417
+ >
418
+ <RNSVGGroup
419
+ fill={
420
+ {
421
+ "payload": 4278190080,
422
+ "type": 0,
423
+ }
424
+ }
425
+ >
426
+ <RNSVGCircle
427
+ cx={0}
428
+ cy={0}
429
+ fill={null}
430
+ propList={
431
+ [
432
+ "fill",
433
+ "stroke",
434
+ "strokeWidth",
435
+ ]
436
+ }
437
+ r={0}
438
+ stroke={
439
+ {
440
+ "payload": 4293583830,
441
+ "type": 0,
442
+ }
443
+ }
444
+ strokeWidth={1.5}
445
+ />
446
+ </RNSVGGroup>
447
+ </RNSVGSvgView>
448
+ <RNSVGSvgView
449
+ align="xMidYMid"
450
+ bbHeight={20}
451
+ bbWidth={20}
452
+ focusable={false}
453
+ meetOrSlice={0}
454
+ minX={0}
455
+ minY={0}
456
+ style={
457
+ [
458
+ {
459
+ "backgroundColor": "transparent",
460
+ "borderWidth": 0,
461
+ },
462
+ {
463
+ "height": 20,
464
+ "position": "absolute",
465
+ "width": 20,
466
+ },
467
+ {
468
+ "flex": 0,
469
+ "height": 20,
470
+ "width": 20,
471
+ },
472
+ ]
473
+ }
474
+ vbHeight={20}
475
+ vbWidth={20}
476
+ >
477
+ <RNSVGGroup
478
+ fill={
479
+ {
480
+ "payload": 4278190080,
481
+ "type": 0,
482
+ }
483
+ }
484
+ >
485
+ <RNSVGCircle
486
+ cx={10}
487
+ cy={10}
488
+ fill={null}
489
+ propList={
490
+ [
491
+ "fill",
492
+ "stroke",
493
+ "strokeWidth",
494
+ "strokeDasharray",
495
+ "strokeDashoffset",
496
+ "strokeLinecap",
497
+ ]
498
+ }
499
+ r={8.5}
500
+ stroke={
501
+ {
502
+ "payload": 4283841366,
503
+ "type": 0,
504
+ }
505
+ }
506
+ strokeDasharray={
507
+ [
508
+ 53.40707511102649,
509
+ 53.40707511102649,
510
+ ]
511
+ }
512
+ strokeDashoffset={53.40707511102649}
513
+ strokeLinecap={1}
514
+ strokeWidth={1.5}
515
+ />
516
+ </RNSVGGroup>
517
+ </RNSVGSvgView>
518
+ </View>
519
+ <Text
520
+ style={
521
+ {
522
+ "color": "#505050",
523
+ "fontFamily": "GTStandard",
524
+ "fontSize": 12,
525
+ "letterSpacing": 0.3,
526
+ "lineHeight": 16,
527
+ }
528
+ }
529
+ suppressHighlighting={true}
530
+ >
531
+ icon (20)
532
+ </Text>
533
+ </View>
534
+ <View
535
+ style={
536
+ {
537
+ "alignItems": "center",
538
+ "flexDirection": "column",
539
+ "gap": 8,
540
+ }
541
+ }
542
+ >
543
+ <View
544
+ style={
545
+ {
546
+ "height": 48,
547
+ "position": "relative",
548
+ "transform": [
549
+ {
550
+ "rotate": "-90deg",
551
+ },
552
+ ],
553
+ "width": 48,
554
+ }
555
+ }
556
+ >
557
+ <RNSVGSvgView
558
+ align="xMidYMid"
559
+ bbHeight={48}
560
+ bbWidth={48}
561
+ focusable={false}
562
+ meetOrSlice={0}
563
+ minX={0}
564
+ minY={0}
565
+ style={
566
+ [
567
+ {
568
+ "backgroundColor": "transparent",
569
+ "borderWidth": 0,
570
+ },
571
+ {
572
+ "height": 48,
573
+ "width": 48,
574
+ },
575
+ {
576
+ "flex": 0,
577
+ "height": 48,
578
+ "width": 48,
579
+ },
580
+ ]
581
+ }
582
+ vbHeight={48}
583
+ vbWidth={48}
584
+ >
585
+ <RNSVGGroup
586
+ fill={
587
+ {
588
+ "payload": 4278190080,
589
+ "type": 0,
590
+ }
591
+ }
592
+ >
593
+ <RNSVGCircle
594
+ cx={0}
595
+ cy={0}
596
+ fill={null}
597
+ propList={
598
+ [
599
+ "fill",
600
+ "stroke",
601
+ "strokeWidth",
602
+ ]
603
+ }
604
+ r={0}
605
+ stroke={
606
+ {
607
+ "payload": 4293583830,
608
+ "type": 0,
609
+ }
610
+ }
611
+ strokeWidth={3}
612
+ />
613
+ </RNSVGGroup>
614
+ </RNSVGSvgView>
615
+ <RNSVGSvgView
616
+ align="xMidYMid"
617
+ bbHeight={48}
618
+ bbWidth={48}
619
+ focusable={false}
620
+ meetOrSlice={0}
621
+ minX={0}
622
+ minY={0}
623
+ style={
624
+ [
625
+ {
626
+ "backgroundColor": "transparent",
627
+ "borderWidth": 0,
628
+ },
629
+ {
630
+ "height": 48,
631
+ "position": "absolute",
632
+ "width": 48,
633
+ },
634
+ {
635
+ "flex": 0,
636
+ "height": 48,
637
+ "width": 48,
638
+ },
639
+ ]
640
+ }
641
+ vbHeight={48}
642
+ vbWidth={48}
643
+ >
644
+ <RNSVGGroup
645
+ fill={
646
+ {
647
+ "payload": 4278190080,
648
+ "type": 0,
649
+ }
650
+ }
651
+ >
652
+ <RNSVGCircle
653
+ cx={24}
654
+ cy={24}
655
+ fill={null}
656
+ propList={
657
+ [
658
+ "fill",
659
+ "stroke",
660
+ "strokeWidth",
661
+ "strokeDasharray",
662
+ "strokeDashoffset",
663
+ "strokeLinecap",
664
+ ]
665
+ }
666
+ r={21}
667
+ stroke={
668
+ {
669
+ "payload": 4283841366,
670
+ "type": 0,
671
+ }
672
+ }
673
+ strokeDasharray={
674
+ [
675
+ 131.94689145077132,
676
+ 131.94689145077132,
677
+ ]
678
+ }
679
+ strokeDashoffset={131.94689145077132}
680
+ strokeLinecap={1}
681
+ strokeWidth={3}
682
+ />
683
+ </RNSVGGroup>
684
+ </RNSVGSvgView>
685
+ </View>
686
+ <Text
687
+ style={
688
+ {
689
+ "color": "#505050",
690
+ "fontFamily": "GTStandard",
691
+ "fontSize": 12,
692
+ "letterSpacing": 0.3,
693
+ "lineHeight": 16,
694
+ }
695
+ }
696
+ suppressHighlighting={true}
697
+ >
698
+ page (48)
699
+ </Text>
700
+ </View>
701
+ </View>
702
+ </RNCSafeAreaProvider>
703
+ `;