@visns-studio/visns-components 5.15.21 → 5.15.23

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.
@@ -0,0 +1,622 @@
1
+ .importWizardModal {
2
+ .modalContent {
3
+ display: flex;
4
+ flex-direction: column;
5
+ height: 80vh;
6
+ max-height: 800px;
7
+ }
8
+ }
9
+
10
+ .stepIndicator {
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ padding: 2rem 0;
15
+ border-bottom: 1px solid #e5e7eb;
16
+ margin-bottom: 2rem;
17
+
18
+ .stepContainer {
19
+ display: flex;
20
+ align-items: center;
21
+ position: relative;
22
+
23
+ &:not(:last-child) {
24
+ margin-right: 2rem;
25
+ }
26
+ }
27
+
28
+ .step {
29
+ width: 48px;
30
+ height: 48px;
31
+ border-radius: 50%;
32
+ border: 2px solid #d1d5db;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ background: white;
37
+ color: #6b7280;
38
+ transition: all 0.3s ease;
39
+
40
+ &.active {
41
+ border-color: #3b82f6;
42
+ background: #3b82f6;
43
+ color: white;
44
+ }
45
+ }
46
+
47
+ .stepInfo {
48
+ margin-left: 1rem;
49
+
50
+ .stepTitle {
51
+ font-weight: 600;
52
+ font-size: 0.95rem;
53
+ color: #111827;
54
+ }
55
+
56
+ .stepDescription {
57
+ font-size: 0.85rem;
58
+ color: #6b7280;
59
+ }
60
+ }
61
+
62
+ .stepConnector {
63
+ width: 40px;
64
+ height: 2px;
65
+ background: #d1d5db;
66
+ margin: 0 1rem;
67
+ transition: background-color 0.3s ease;
68
+
69
+ &.completed {
70
+ background: #3b82f6;
71
+ }
72
+ }
73
+ }
74
+
75
+ .stepContent {
76
+ flex: 1;
77
+ overflow-y: auto;
78
+ padding: 0 1rem;
79
+ }
80
+
81
+ // Upload Step
82
+ .uploadStep {
83
+ .dropzone {
84
+ border: 2px dashed #d1d5db;
85
+ border-radius: 12px;
86
+ padding: 3rem 2rem;
87
+ text-align: center;
88
+ cursor: pointer;
89
+ transition: all 0.3s ease;
90
+ background: #fafafa;
91
+
92
+ &:hover, &.active {
93
+ border-color: #3b82f6;
94
+ background: #f0f8ff;
95
+ }
96
+
97
+ .uploadIcon {
98
+ color: #6b7280;
99
+ margin-bottom: 1rem;
100
+ }
101
+
102
+ h3 {
103
+ margin: 0 0 0.5rem 0;
104
+ color: #111827;
105
+ font-size: 1.25rem;
106
+ }
107
+
108
+ p {
109
+ margin: 0;
110
+ color: #6b7280;
111
+ font-size: 0.95rem;
112
+ }
113
+
114
+ .fileInfo {
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ gap: 0.5rem;
119
+ margin-top: 1rem;
120
+ padding: 0.75rem 1rem;
121
+ background: #e0f2fe;
122
+ border-radius: 8px;
123
+ color: #0369a1;
124
+ }
125
+ }
126
+
127
+ .templateSection {
128
+ margin-top: 2rem;
129
+ padding: 1.5rem;
130
+ background: #f9fafb;
131
+ border-radius: 8px;
132
+ text-align: center;
133
+
134
+ h4 {
135
+ margin: 0 0 0.5rem 0;
136
+ color: #111827;
137
+ }
138
+
139
+ p {
140
+ margin: 0 0 1rem 0;
141
+ color: #6b7280;
142
+ font-size: 0.9rem;
143
+ }
144
+
145
+ .templateButton {
146
+ display: inline-flex;
147
+ align-items: center;
148
+ gap: 0.5rem;
149
+ padding: 0.75rem 1.25rem;
150
+ background: #3b82f6;
151
+ color: white;
152
+ border: none;
153
+ border-radius: 6px;
154
+ cursor: pointer;
155
+ font-size: 0.9rem;
156
+ transition: background-color 0.2s ease;
157
+
158
+ &:hover {
159
+ background: #2563eb;
160
+ }
161
+ }
162
+ }
163
+ }
164
+
165
+ // Mapping Step
166
+ .mappingStep {
167
+ .mappingHeader {
168
+ margin-bottom: 2rem;
169
+
170
+ h3 {
171
+ margin: 0 0 0.5rem 0;
172
+ color: #111827;
173
+ }
174
+
175
+ p {
176
+ margin: 0;
177
+ color: #6b7280;
178
+ font-size: 0.95rem;
179
+ }
180
+ }
181
+
182
+ .mappingContainer {
183
+ display: grid;
184
+ grid-template-columns: 1fr 300px;
185
+ gap: 2rem;
186
+ }
187
+
188
+ .mappingList {
189
+ .mappingRow {
190
+ display: grid;
191
+ grid-template-columns: 1fr auto 1fr;
192
+ gap: 1rem;
193
+ align-items: center;
194
+ padding: 1rem;
195
+ border: 1px solid #e5e7eb;
196
+ border-radius: 8px;
197
+ margin-bottom: 1rem;
198
+ background: white;
199
+
200
+ .fileColumn {
201
+ strong {
202
+ display: block;
203
+ color: #111827;
204
+ margin-bottom: 0.25rem;
205
+ }
206
+
207
+ .sampleValue {
208
+ font-size: 0.8rem;
209
+ color: #6b7280;
210
+ font-style: italic;
211
+ }
212
+ }
213
+
214
+ .arrow {
215
+ color: #6b7280;
216
+ }
217
+
218
+ .fieldColumn {
219
+ select, .select-container {
220
+ width: 100%;
221
+ }
222
+ }
223
+ }
224
+ }
225
+
226
+ .mappingSummary {
227
+ background: #f9fafb;
228
+ border-radius: 8px;
229
+ padding: 1.5rem;
230
+
231
+ h4 {
232
+ margin: 0 0 1rem 0;
233
+ color: #111827;
234
+ }
235
+
236
+ .summaryItem {
237
+ display: flex;
238
+ justify-content: space-between;
239
+ padding: 0.5rem 0;
240
+ border-bottom: 1px solid #e5e7eb;
241
+
242
+ &:last-child {
243
+ border-bottom: none;
244
+ }
245
+ }
246
+
247
+ .missingFields {
248
+ margin-top: 1rem;
249
+ padding: 1rem;
250
+ background: #fef2f2;
251
+ border-radius: 6px;
252
+ color: #dc2626;
253
+
254
+ display: flex;
255
+ align-items: flex-start;
256
+ gap: 0.5rem;
257
+
258
+ ul {
259
+ margin: 0.5rem 0 0 0;
260
+ padding-left: 1rem;
261
+
262
+ li {
263
+ margin-bottom: 0.25rem;
264
+ }
265
+ }
266
+ }
267
+ }
268
+ }
269
+
270
+ // Preview Step
271
+ .previewStep {
272
+ .previewHeader {
273
+ margin-bottom: 2rem;
274
+
275
+ h3 {
276
+ margin: 0 0 0.5rem 0;
277
+ color: #111827;
278
+ }
279
+
280
+ p {
281
+ margin: 0;
282
+ color: #6b7280;
283
+ font-size: 0.95rem;
284
+ }
285
+ }
286
+
287
+ .validationSummary {
288
+ margin-bottom: 2rem;
289
+
290
+ .summaryCards {
291
+ display: grid;
292
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
293
+ gap: 1rem;
294
+ margin-bottom: 1rem;
295
+
296
+ .summaryCard {
297
+ display: flex;
298
+ align-items: center;
299
+ gap: 1rem;
300
+ padding: 1.5rem;
301
+ background: white;
302
+ border-radius: 8px;
303
+ border: 1px solid #e5e7eb;
304
+
305
+ .number {
306
+ font-size: 1.75rem;
307
+ font-weight: bold;
308
+ color: #111827;
309
+ }
310
+
311
+ .label {
312
+ font-size: 0.9rem;
313
+ color: #6b7280;
314
+ }
315
+
316
+ .successIcon {
317
+ color: #059669;
318
+ }
319
+
320
+ .warningIcon {
321
+ color: #d97706;
322
+ }
323
+ }
324
+ }
325
+
326
+ .errorList {
327
+ background: #fef2f2;
328
+ border-radius: 8px;
329
+ padding: 1rem;
330
+
331
+ h4 {
332
+ margin: 0 0 1rem 0;
333
+ color: #dc2626;
334
+ }
335
+
336
+ .errors {
337
+ max-height: 200px;
338
+ overflow-y: auto;
339
+
340
+ .errorItem {
341
+ margin-bottom: 1rem;
342
+
343
+ strong {
344
+ color: #dc2626;
345
+ }
346
+
347
+ ul {
348
+ margin: 0.5rem 0 0 1rem;
349
+
350
+ li {
351
+ color: #991b1b;
352
+ font-size: 0.9rem;
353
+ }
354
+ }
355
+ }
356
+
357
+ .moreErrors {
358
+ color: #6b7280;
359
+ font-style: italic;
360
+ text-align: center;
361
+ padding-top: 1rem;
362
+ border-top: 1px solid #f3f4f6;
363
+ }
364
+ }
365
+ }
366
+ }
367
+
368
+ .previewTable {
369
+ border: 1px solid #e5e7eb;
370
+ border-radius: 8px;
371
+ overflow: hidden;
372
+
373
+ .tableContainer {
374
+ overflow-x: auto;
375
+ max-height: 400px;
376
+
377
+ table {
378
+ width: 100%;
379
+ border-collapse: collapse;
380
+
381
+ th, td {
382
+ padding: 0.75rem;
383
+ text-align: left;
384
+ border-bottom: 1px solid #e5e7eb;
385
+ font-size: 0.9rem;
386
+ }
387
+
388
+ th {
389
+ background: #f9fafb;
390
+ font-weight: 600;
391
+ color: #111827;
392
+ position: sticky;
393
+ top: 0;
394
+ z-index: 10;
395
+ }
396
+
397
+ .validRow {
398
+ &:hover {
399
+ background: #f0fdf4;
400
+ }
401
+ }
402
+
403
+ .invalidRow {
404
+ background: #fef2f2;
405
+
406
+ &:hover {
407
+ background: #fecaca;
408
+ }
409
+ }
410
+
411
+ .successIcon {
412
+ color: #059669;
413
+ }
414
+
415
+ .errorIcon {
416
+ color: #dc2626;
417
+ }
418
+ }
419
+ }
420
+ }
421
+ }
422
+
423
+ // Import Step
424
+ .importStep {
425
+ display: flex;
426
+ align-items: center;
427
+ justify-content: center;
428
+ min-height: 400px;
429
+
430
+ .importing {
431
+ text-align: center;
432
+
433
+ .spinner {
434
+ animation: spin 1s linear infinite;
435
+ color: #3b82f6;
436
+ margin-bottom: 1rem;
437
+ }
438
+
439
+ h3 {
440
+ margin: 0 0 0.5rem 0;
441
+ color: #111827;
442
+ }
443
+
444
+ p {
445
+ margin: 0;
446
+ color: #6b7280;
447
+ }
448
+ }
449
+
450
+ .importResults {
451
+ text-align: center;
452
+ width: 100%;
453
+
454
+ .successIcon {
455
+ color: #059669;
456
+ margin-bottom: 1rem;
457
+ }
458
+
459
+ h3 {
460
+ margin: 0 0 2rem 0;
461
+ color: #111827;
462
+ }
463
+
464
+ .resultsSummary {
465
+ .resultsGrid {
466
+ display: grid;
467
+ grid-template-columns: repeat(3, 1fr);
468
+ gap: 1rem;
469
+ margin-bottom: 2rem;
470
+
471
+ .resultItem {
472
+ padding: 1.5rem;
473
+ background: white;
474
+ border: 1px solid #e5e7eb;
475
+ border-radius: 8px;
476
+
477
+ .resultNumber {
478
+ font-size: 2rem;
479
+ font-weight: bold;
480
+ color: #111827;
481
+ margin-bottom: 0.25rem;
482
+ }
483
+
484
+ .resultLabel {
485
+ color: #6b7280;
486
+ font-size: 0.9rem;
487
+ }
488
+ }
489
+ }
490
+
491
+ .importErrors {
492
+ background: #fef2f2;
493
+ border-radius: 8px;
494
+ padding: 1rem;
495
+ text-align: left;
496
+
497
+ h4 {
498
+ margin: 0 0 1rem 0;
499
+ color: #dc2626;
500
+ }
501
+
502
+ .errorList {
503
+ max-height: 200px;
504
+ overflow-y: auto;
505
+
506
+ .errorItem {
507
+ margin-bottom: 1rem;
508
+
509
+ strong {
510
+ color: #dc2626;
511
+ }
512
+
513
+ ul {
514
+ margin: 0.5rem 0 0 1rem;
515
+
516
+ li {
517
+ color: #991b1b;
518
+ font-size: 0.9rem;
519
+ }
520
+ }
521
+ }
522
+ }
523
+ }
524
+ }
525
+ }
526
+ }
527
+
528
+ // Footer
529
+ .modalFooter {
530
+ display: flex;
531
+ justify-content: space-between;
532
+ align-items: center;
533
+ padding: 1.5rem 0 0 0;
534
+ border-top: 1px solid #e5e7eb;
535
+ margin-top: 2rem;
536
+
537
+ .footerLeft, .footerRight {
538
+ display: flex;
539
+ gap: 1rem;
540
+ }
541
+
542
+ .backButton, .nextButton, .finishButton {
543
+ display: inline-flex;
544
+ align-items: center;
545
+ gap: 0.5rem;
546
+ padding: 0.75rem 1.5rem;
547
+ border-radius: 6px;
548
+ cursor: pointer;
549
+ font-weight: 500;
550
+ transition: all 0.2s ease;
551
+ border: none;
552
+
553
+ &:disabled {
554
+ opacity: 0.6;
555
+ cursor: not-allowed;
556
+ }
557
+
558
+ .spinner {
559
+ animation: spin 1s linear infinite;
560
+ }
561
+ }
562
+
563
+ .backButton {
564
+ background: #f3f4f6;
565
+ color: #374151;
566
+
567
+ &:hover:not(:disabled) {
568
+ background: #e5e7eb;
569
+ }
570
+ }
571
+
572
+ .nextButton, .finishButton {
573
+ background: #3b82f6;
574
+ color: white;
575
+
576
+ &:hover:not(:disabled) {
577
+ background: #2563eb;
578
+ }
579
+ }
580
+ }
581
+
582
+ @keyframes spin {
583
+ from {
584
+ transform: rotate(0deg);
585
+ }
586
+ to {
587
+ transform: rotate(360deg);
588
+ }
589
+ }
590
+
591
+ // Responsive
592
+ @media (max-width: 768px) {
593
+ .stepIndicator {
594
+ flex-direction: column;
595
+ gap: 1rem;
596
+
597
+ .stepContainer {
598
+ margin-right: 0;
599
+ }
600
+
601
+ .stepConnector {
602
+ display: none;
603
+ }
604
+ }
605
+
606
+ .mappingContainer {
607
+ grid-template-columns: 1fr;
608
+ }
609
+
610
+ .mappingRow {
611
+ grid-template-columns: 1fr;
612
+ gap: 0.5rem;
613
+
614
+ .arrow {
615
+ transform: rotate(90deg);
616
+ }
617
+ }
618
+
619
+ .resultsGrid {
620
+ grid-template-columns: 1fr;
621
+ }
622
+ }
package/src/index.js CHANGED
@@ -38,6 +38,7 @@ import AudioPlayer from './components/controls/AudioPlayer';
38
38
  import GalleryModal from './components/modals/GalleryModal';
39
39
  import ImageModal from './components/ImageModal';
40
40
  import DatePickerPortal from './components/utils/DatePickerPortal';
41
+ import ImportWizardModal from './components/ImportWizardModal';
41
42
  export * from './components/columns/ColumnRenderers.jsx';
42
43
 
43
44
  /** Auth Specific Components */
@@ -137,6 +138,7 @@ export {
137
138
  GenericQuote,
138
139
  GenericReport,
139
140
  GenericSort,
141
+ ImportWizardModal,
140
142
  Loader,
141
143
  Login,
142
144
  MergeEntity,