intelicoreact 0.0.6 → 0.0.9

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 (117) hide show
  1. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +6 -2
  2. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  3. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +2 -1
  4. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +84 -28
  5. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +27 -3
  6. package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +50 -7
  7. package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +20 -0
  8. package/dist/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
  9. package/dist/Atomic/FormElements/Input/Input.js +124 -50
  10. package/dist/Atomic/FormElements/Input/Input.stories.js +19 -15
  11. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +33 -31
  12. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +29 -19
  13. package/dist/Atomic/FormElements/InputDateRange/{components/InputDateRange.js → InputDateRange.js} +54 -62
  14. package/dist/Atomic/FormElements/InputDateRange/{components/InputDateRange.scss → InputDateRange.scss} +254 -228
  15. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +15 -160
  16. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +72 -34
  17. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +26 -11
  18. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +14 -6
  19. package/dist/Atomic/FormElements/InputDateRange/{index.js → dependencies.js} +19 -18
  20. package/dist/Atomic/FormElements/NumericInput/NumericInput.js +292 -0
  21. package/dist/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
  22. package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +117 -0
  23. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +10 -3
  24. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +4 -4
  25. package/dist/Atomic/FormElements/Table/Table.scss +1 -1
  26. package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  27. package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
  28. package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
  29. package/dist/Atomic/UI/Arrow/Arrow.js +6 -6
  30. package/dist/Atomic/UI/Arrow/Arrow.scss +0 -3
  31. package/dist/Atomic/UI/Calendar/Calendar.js +8 -5
  32. package/dist/Atomic/UI/Calendar/Calendar.scss +19 -3
  33. package/dist/Atomic/UI/Calendar/Calendar.stories.js +3 -2
  34. package/dist/Atomic/UI/Status/Status.scss +1 -1
  35. package/dist/Constants/index.constants.js +8 -0
  36. package/dist/Functions/inputExecutor.js +58 -0
  37. package/dist/Molecular/Datepicker/Datepicker.js +451 -0
  38. package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
  39. package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
  40. package/dist/{Atomic/FormElements/Calendar → Molecular/Datepicker/components}/Calendar.js +50 -39
  41. package/dist/scss/_vars.scss +3 -1
  42. package/dist/scss/main.scss +1 -1
  43. package/package.json +5 -4
  44. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
  45. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  46. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +4 -3
  47. package/src/Atomic/FormElements/Dropdown/Dropdown.js +104 -39
  48. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +27 -3
  49. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +42 -15
  50. package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js +16 -0
  51. package/src/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
  52. package/src/Atomic/FormElements/Input/Input.js +108 -37
  53. package/src/Atomic/FormElements/Input/Input.stories.js +43 -22
  54. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +18 -17
  55. package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +17 -14
  56. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +219 -0
  57. package/src/Atomic/FormElements/InputDateRange/{components/InputDateRange.scss → InputDateRange.scss} +254 -228
  58. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +38 -117
  59. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +92 -53
  60. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +14 -5
  61. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +5 -3
  62. package/src/Atomic/FormElements/InputDateRange/{index.js → dependencies.js} +16 -12
  63. package/src/Atomic/FormElements/NumericInput/NumericInput.js +263 -0
  64. package/src/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
  65. package/src/Atomic/FormElements/NumericInput/NumericInput.stories.js +78 -0
  66. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +6 -3
  67. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +4 -4
  68. package/src/Atomic/FormElements/Table/Table.scss +1 -1
  69. package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  70. package/src/Atomic/MainMenu/MainMenu.scss +2 -2
  71. package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
  72. package/src/Atomic/UI/Arrow/Arrow.js +4 -4
  73. package/src/Atomic/UI/Arrow/Arrow.scss +0 -3
  74. package/src/Atomic/UI/Calendar/Calendar.js +4 -4
  75. package/src/Atomic/UI/Calendar/Calendar.scss +19 -3
  76. package/src/Atomic/UI/Calendar/Calendar.stories.js +2 -1
  77. package/src/Atomic/UI/Status/Status.scss +1 -1
  78. package/src/Constants/index.constants.js +41 -0
  79. package/src/Functions/inputExecutor.js +53 -0
  80. package/src/Functions/utils.js +4 -1
  81. package/src/Molecular/Datepicker/Datepicker.js +346 -0
  82. package/src/Molecular/Datepicker/Datepicker.scss +8 -0
  83. package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
  84. package/src/Molecular/Datepicker/components/Calendar.js +118 -0
  85. package/src/scss/_vars.scss +3 -1
  86. package/src/scss/main.scss +1 -1
  87. package/dist/Atomic/FormElements/Calendar/Calendar.scss +0 -543
  88. package/dist/Atomic/FormElements/Calendar/Calendar.stories.js +0 -33
  89. package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
  90. package/dist/scss/anme/_anme-elements.scss +0 -269
  91. package/dist/scss/anme/_anme-grid.scss +0 -111
  92. package/dist/scss/anme/_anme-justify.scss +0 -111
  93. package/dist/scss/anme/_anme-mixins-media.scss +0 -116
  94. package/dist/scss/anme/_anme-mixins.scss +0 -166
  95. package/dist/scss/anme/_anme-normalize.scss +0 -8
  96. package/dist/scss/anme/_anme-overall.scss +0 -34
  97. package/dist/scss/anme/_anme-padding-margins.scss +0 -419
  98. package/dist/scss/anme/_anme-table.scss +0 -81
  99. package/dist/scss/anme/_anme-theme.scss +0 -275
  100. package/dist/scss/anme/_anme-vars.scss +0 -91
  101. package/dist/scss/anme/_code-styling.scss +0 -23
  102. package/dist/scss/anme/styles.scss +0 -12
  103. package/src/Atomic/FormElements/InputDateRange/components/InputDateRange.js +0 -230
  104. package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
  105. package/src/scss/anme/_anme-elements.scss +0 -269
  106. package/src/scss/anme/_anme-grid.scss +0 -111
  107. package/src/scss/anme/_anme-justify.scss +0 -111
  108. package/src/scss/anme/_anme-mixins-media.scss +0 -116
  109. package/src/scss/anme/_anme-mixins.scss +0 -166
  110. package/src/scss/anme/_anme-normalize.scss +0 -8
  111. package/src/scss/anme/_anme-overall.scss +0 -34
  112. package/src/scss/anme/_anme-padding-margins.scss +0 -419
  113. package/src/scss/anme/_anme-table.scss +0 -81
  114. package/src/scss/anme/_anme-theme.scss +0 -275
  115. package/src/scss/anme/_anme-vars.scss +0 -91
  116. package/src/scss/anme/_code-styling.scss +0 -23
  117. package/src/scss/anme/styles.scss +0 -12
@@ -1,543 +0,0 @@
1
- .form-select-options {
2
- position: absolute;
3
- font-weight: 400;
4
- left: 0;
5
- margin-top: 3px;
6
- background-color: #fff;
7
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
8
- max-height: 335px;
9
- overflow-y: auto;
10
- border: 1px solid #e2e5ec;
11
- z-index: 7;
12
-
13
- &--wide {
14
- min-width: 100%;
15
- overflow-x: hidden;
16
- }
17
-
18
- &--short {
19
- max-height: 195px;
20
- }
21
-
22
- &--hoverable {
23
- border: none;
24
- }
25
-
26
- &--options-top {
27
- bottom: 100%;
28
- box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
29
- }
30
-
31
- &__item {
32
- cursor: pointer;
33
- padding: 0 20px 0 30px;
34
- user-select: none;
35
- white-space: nowrap;
36
-
37
- &--active {
38
- //background: #f2f2f8 url(/media/images/check.svg) no-repeat center left 9px / 16px;
39
- }
40
-
41
- &--disabled {
42
- pointer-events: none;
43
- opacity: 0.3;
44
- }
45
-
46
- &:hover {
47
- background-color: #f2f2f8;
48
- }
49
- }
50
-
51
- &__group-name {
52
- cursor: default;
53
- padding: 0 20px 0 15px;
54
- margin-top: 4px;
55
- user-select: none;
56
- white-space: nowrap;
57
- color: #9aa0b9;
58
- font-size: 10px;
59
- font-weight: normal;
60
- text-transform: uppercase;
61
- }
62
- }
63
-
64
- .date-range-input {
65
- background-color: #ffff;
66
- min-width: 275px;
67
- flex-shrink: 0;
68
- display: flex;
69
-
70
- .select-form {
71
- flex-grow: 1;
72
- max-width: calc(100% - 72px);
73
- overflow: hidden;
74
- text-overflow: ellipsis;
75
- }
76
-
77
- button svg {
78
- margin: 0;
79
- }
80
-
81
- & > button:not(:last-child) {
82
- border-top-right-radius: 0;
83
- border-bottom-right-radius: 0;
84
- border-right: none;
85
- }
86
-
87
- & > button:not(:first-child),
88
- & > button:nth-child(n + 3) {
89
- border-top-left-radius: 0;
90
- border-bottom-left-radius: 0;
91
- border-right: none;
92
- }
93
-
94
- & button:not(:first-child),
95
- & button:not(:first-child) button {
96
- border-top-left-radius: 0;
97
- border-bottom-left-radius: 0;
98
- }
99
-
100
- &--compact {
101
- min-width: 130px;
102
-
103
- .form-select-options {
104
- width: 100%;
105
- }
106
- }
107
-
108
- &--focused {
109
- border: 1px solid #6b81dd;
110
- box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
111
- }
112
- }
113
-
114
- .form-label {
115
- //display: block;
116
- font-weight: 500;
117
- line-height: 24px;
118
- font-size: 12px;
119
- position: relative;
120
-
121
- &--error {
122
- color: #f06d8d;
123
- font-size: 10px;
124
- font-weight: normal;
125
- line-height: 20px;
126
- position: absolute;
127
- white-space: nowrap;
128
- }
129
-
130
- &--short {
131
- height: 68px;
132
- }
133
- }
134
-
135
- .form-label-title {
136
- &--left {
137
- margin-right: 10px;
138
- white-space: nowrap;
139
- }
140
- }
141
-
142
- .form-label-title-text-right {
143
- font-weight: normal;
144
- font-size: 11px;
145
- color: #9aa0b9;
146
- }
147
-
148
- .form-input {
149
- display: block;
150
- box-sizing: border-box;
151
- width: 100%;
152
- min-height: 28px;
153
- padding: 5px 8px;
154
- border: 1px solid #e2e5ec;
155
- font-family: Roboto, sans-serif;
156
- font-size: 13px;
157
- font-weight: 400;
158
- resize: none;
159
-
160
- &--btn-right {
161
- & input {
162
- padding-right: 75px;
163
- }
164
- }
165
-
166
- &--tall {
167
- height: 160px;
168
- }
169
-
170
- &--small {
171
- width: 100px;
172
- height: 20px;
173
- }
174
-
175
- &--error {
176
- border: 1px solid #f06d8d;
177
- }
178
-
179
- &--lock {
180
- padding-right: 25px;
181
- //background: #fff url(/media/images/lock.svg) no-repeat center right 4px / 16px;
182
- }
183
-
184
- &--login {
185
- padding-right: 25px;
186
- //background: #fff url(/media/images/user.svg) no-repeat center right 4px / 16px;
187
- }
188
-
189
- &--email {
190
- padding-right: 25px;
191
- //background: #fff url(/media/images/mail.svg) no-repeat center right 4px / 16px;
192
- }
193
-
194
- &--password {
195
- padding-right: 25px;
196
- //background: #fff url(/media/images/key.svg) no-repeat center right 4px / 16px;
197
- }
198
-
199
- &--promo {
200
- padding-right: 25px;
201
- //background: #fff url(/media/images/gift.svg) no-repeat center right 4px / 16px;
202
- }
203
-
204
- &--edit {
205
- padding-right: 25px;
206
- //background: #fff url(/media/images/edit.svg) no-repeat center right 4px / 16px;
207
- }
208
-
209
- &:disabled {
210
- background-color: #f7f8fa;
211
- border: 1px solid #bac2c9;
212
- pointer-events: none;
213
- }
214
-
215
- &:focus {
216
- border: 1px solid #6b81dd;
217
- }
218
-
219
- &::placeholder {
220
- color: #bac2c9;
221
- }
222
- }
223
-
224
- select.form-input {
225
- -webkit-appearance: none;
226
- -moz-appearance: none;
227
- appearance: none;
228
- padding-right: 25px;
229
- //background: #fff url(/media/images/chevron-down.svg) no-repeat center right 4px / 16px;
230
- }
231
-
232
- .select-form {
233
- position: relative;
234
- }
235
-
236
- .form-select {
237
- &__clear-btn {
238
- position: absolute;
239
- width: 22px;
240
- height: 26px;
241
- right: 1px;
242
- top: 1px;
243
- margin-right: 2px;
244
- cursor: pointer;
245
- display: flex;
246
- align-items: center;
247
- justify-content: center;
248
- border-left: 1px solid #e2e5ecff;
249
-
250
- & svg {
251
- width: 16px;
252
- height: 16px;
253
- color: #9aa0b9ff;
254
- }
255
-
256
- &:hover {
257
- & svg {
258
- color: #6b81ddff;
259
- }
260
- }
261
- }
262
-
263
- &__input {
264
- //background: #fff url(/media/images/chevron-down.svg) no-repeat center right 4px / 16px;
265
- padding-right: 25px;
266
- line-height: initial;
267
- cursor: default;
268
- min-width: 60px;
269
- min-height: 28px;
270
- user-select: none;
271
- border-radius: 3px;
272
- white-space: nowrap;
273
- display: block;
274
- overflow: hidden;
275
- text-overflow: ellipsis;
276
- text-align: left;
277
-
278
- &--fixed {
279
- min-height: 76px;
280
- }
281
-
282
- &--opened {
283
- //background: #fff url(/media/images/chevron-up.svg) no-repeat center right 4px / 16px;
284
- padding-right: 25px;
285
- }
286
-
287
- &--focused {
288
- border: 1px solid #6b81dd;
289
- box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
290
- }
291
-
292
- &--disabled {
293
- color: #9aa0b9;
294
- //background: #f7f8fa url(/media/images/chevron-down-disabled.svg) no-repeat center right 4px / 16px;
295
- border: 1px solid #bac2c9;
296
- padding-right: 25px;
297
- pointer-events: none;
298
- }
299
-
300
- &--placeholder {
301
- color: #9aa0b9;
302
- }
303
-
304
- &--searchable {
305
- padding: 0;
306
- }
307
-
308
- &--cleanable {
309
- background-position: center right 26px;
310
- padding-right: 45px;
311
- }
312
- }
313
-
314
- &__input-text {
315
- &--searchable {
316
- width: 100%;
317
- height: 24px;
318
- padding-left: 8px;
319
- font-family: Roboto, sans-serif;
320
- font-size: 13px;
321
- font-weight: 400;
322
- border: none;
323
- outline: none;
324
- box-shadow: none;
325
-
326
- &:focus {
327
- border: none;
328
- outline: none;
329
- box-shadow: none;
330
- }
331
- }
332
- }
333
- }
334
-
335
- .form-select-inner {
336
- position: absolute;
337
- left: 130px;
338
- font-weight: 400;
339
- margin-top: 3px;
340
- background-color: #fff;
341
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
342
- z-index: 6;
343
- }
344
-
345
- .date-picker {
346
- width: 444px;
347
- border: 1px solid #e2e5ec;
348
-
349
- &__header,
350
- &__footer {
351
- background: #f7fafc;
352
- padding: 10px 15px;
353
- display: flex;
354
-
355
- &--gray {
356
- color: #c4c4c4;
357
- display: flex;
358
- align-items: center;
359
- padding: 0 5px;
360
- }
361
- }
362
-
363
- &__previous-period {
364
- background: #f7fafc;
365
- font-size: 10px;
366
- line-height: 1.3;
367
- padding: 0 15px;
368
- min-height: 25px;
369
- color: #9aa0b9;
370
- }
371
-
372
- &__previous-period-interval {
373
- font-weight: 500;
374
- color: #000000;
375
- }
376
-
377
- &__calendars {
378
- display: flex;
379
- justify-content: space-between;
380
- padding: 10px 15px;
381
- }
382
- }
383
-
384
- .calendar-header {
385
- display: flex;
386
- height: 24px;
387
- margin: 0 6px;
388
-
389
- &__title {
390
- line-height: 20px;
391
- font-weight: 500;
392
- text-align: center;
393
- flex-grow: 1;
394
- color: #000000;
395
- display: flex;
396
- align-items: center;
397
- justify-content: center;
398
- }
399
-
400
- &__next,
401
- &__prev {
402
- width: 16px;
403
- color: #9aa0b9ff;
404
- display: flex;
405
- align-items: center;
406
- justify-content: center;
407
-
408
- & > div {
409
- display: flex;
410
- align-items: center;
411
- justify-content: center;
412
- cursor: pointer;
413
- height: 100%;
414
-
415
- &:hover {
416
- background: #e2e6f8;
417
- }
418
- }
419
- }
420
- }
421
-
422
- .date-picker-text-input {
423
- &--active input {
424
- border: 1px solid #6b81dd;
425
- box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
426
- }
427
- }
428
-
429
- .calendar {
430
- background: #ffffff;
431
- border: 1px solid #e2e5ec;
432
- box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
433
- margin-top: 4px;
434
- padding: 5px 0;
435
-
436
- min-height: 195px;
437
- display: flex;
438
- flex-direction: column;
439
- user-select: none;
440
-
441
- &__week {
442
- display: flex;
443
- }
444
-
445
- &__day {
446
- font-size: 13px;
447
- line-height: 20px;
448
- margin: 1px 0;
449
- flex-grow: 1;
450
- flex-basis: 0;
451
- text-align: center;
452
- padding: 1px 6px;
453
- user-select: none;
454
-
455
- &--clickable {
456
- cursor: pointer;
457
-
458
- &:hover {
459
- background: #e2e6f8;
460
- }
461
- }
462
-
463
- &--disabled {
464
- cursor: default;
465
- color: #9aa0b9;
466
- pointer-events: none;
467
-
468
- &:hover {
469
- background: inherit;
470
- }
471
- }
472
-
473
- &--range-end,
474
- &--selected {
475
- background: #6b81dd;
476
- color: white;
477
- border-radius: 4px;
478
-
479
- &:hover {
480
- background: #6b81dd;
481
- }
482
- }
483
-
484
- &--range-inside {
485
- background: #e2e6f8;
486
- }
487
-
488
- &--prev-range-end {
489
- background: #e2e5ec;
490
- border-radius: 4px;
491
- }
492
-
493
- &--prev-range-inside {
494
- background: #f7f8fa;
495
- }
496
-
497
- &--title {
498
- font-size: 10px;
499
- color: #9aa0b9;
500
- font-weight: normal;
501
-
502
- &:hover {
503
- background: inherit;
504
- }
505
- }
506
- }
507
-
508
- &-container {
509
- width: 200px;
510
- }
511
-
512
- &-dropdown {
513
- appearance: none;
514
- background-color: white;
515
- cursor: pointer;
516
- color: gray;
517
-
518
- width: 100%;
519
- height: 28px;
520
-
521
- display: flex;
522
- cursor: pointer;
523
- padding-left: 9px;
524
- font-weight: 400;
525
- overflow: hidden;
526
- align-items: center;
527
-
528
- border: 1px solid #e2e5ec;
529
- box-sizing: border-box;
530
- border-radius: 3px;
531
- user-select: none;
532
- }
533
- &-placeholder {
534
- width: 100%;
535
- background: none;
536
- border: none;
537
- padding: 0 15px 0 0;
538
- height: 16px;
539
- text-overflow: ellipsis;
540
- font-weight: 400;
541
- font-size: 13px;
542
- }
543
- }
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.CalendarTemplate = exports.default = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var _Calendar = _interopRequireDefault(require("./Calendar"));
13
-
14
- global.lng = 'en';
15
- var _default = {
16
- title: 'UI/Calendar',
17
- component: _Calendar.default
18
- };
19
- exports.default = _default;
20
-
21
- var Template = function Template(args) {
22
- return /*#__PURE__*/_react.default.createElement(_Calendar.default, args);
23
- };
24
-
25
- var CalendarTemplate = Template.bind({});
26
- exports.CalendarTemplate = CalendarTemplate;
27
- CalendarTemplate.args = {
28
- date: '12/03/2021',
29
- params: {},
30
- setDate: function setDate() {
31
- return null;
32
- }
33
- };