@fixefy/fixefy-ui-utils 0.0.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.
@@ -0,0 +1,494 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const styles_1 = require("@mui/material/styles");
4
+ const styles_2 = require("@mui/styles");
5
+ const jss_1 = require("jss");
6
+ const theme = (0, styles_1.createTheme)({
7
+ palette: {
8
+ background: { paper: '#fff' },
9
+ common: {
10
+ black: '#323232',
11
+ white: '#FFFFFF',
12
+ },
13
+ colors: {
14
+ red: '#EB5757',
15
+ lightRed: '#FEF6F6',
16
+ orange: '#F2994A',
17
+ lightOrange: '#FEF7F1',
18
+ orangeHover: '#EC7A30',
19
+ orangeFocused: '#E65C15',
20
+ gold: '#C4A603',
21
+ lightGold: '#FAF7E6',
22
+ yellow: '#F2D74C',
23
+ lightYellow: '#FEFCEE',
24
+ yellowHover: '#ECC631',
25
+ yellowFocused: '#E6B517',
26
+ green1: '#88C00D',
27
+ lightGreen1: '#F6FAEC',
28
+ green2: '#27AE60',
29
+ lightGreen2: '#EEF9F2',
30
+ green2Hover: '#169242',
31
+ green2Focused: '#067724',
32
+ green3: '#6FCF97',
33
+ blue: '#2D9CDB',
34
+ lightBlue: '#F3F9FD',
35
+ blueHover: '#2D9CDB',
36
+ blueFocused: '#085FBC',
37
+ blue1: '#56CCF2',
38
+ lightBlue1: '#F1FBFE',
39
+ blue1Hover: '#39B8EC',
40
+ blue1Focused: '#1DA3E6',
41
+ purple: '#BB6BD9',
42
+ lightPurple: '#FBF6FD',
43
+ },
44
+ greyscale: {
45
+ dark: '#636363',
46
+ main: '#ababab',
47
+ light: '#e2e2e2',
48
+ contrastText: '#f7f7f7',
49
+ '500': '#5C6467',
50
+ '400': '#8B9092',
51
+ '300': '#C5C8C9',
52
+ '200': '#F0F0F0',
53
+ '100': '#F7F7F7',
54
+ },
55
+ redscale: {
56
+ main: '#EB5757',
57
+ '500': '#EE6868',
58
+ '400': '#F08989',
59
+ '300': '#F4AAAA',
60
+ '200': '#F8CCCC',
61
+ '100': '#FEF6F6',
62
+ },
63
+ orangescale: {
64
+ '700': '#E65C15',
65
+ '600': '#EC7A30',
66
+ main: '#F2994A',
67
+ '100': '#FEF7F1',
68
+ },
69
+ goldscale: {
70
+ main: '#C4A603',
71
+ '100': '#FAF7E6',
72
+ },
73
+ yellowscale: {
74
+ '700': '#E6B517',
75
+ '600': '#ECC631',
76
+ main: '#F2D74C',
77
+ '100': '#FEFCEE',
78
+ },
79
+ purplescale: {
80
+ main: '#BB6BD9',
81
+ '100': '#FBF6FD',
82
+ },
83
+ green1scale: {
84
+ main: '#88C00D',
85
+ '100': '#F6FAEC',
86
+ },
87
+ green2scale: {
88
+ '700': '#067724',
89
+ '600': '#169242',
90
+ main: '#27AE60',
91
+ '100': '#EEF9F2',
92
+ },
93
+ green3scale: {
94
+ main: '#6FCF97',
95
+ },
96
+ blue1scale: {
97
+ '700': '#1DA3E6',
98
+ '600': '#39B8EC',
99
+ main: '#56CCF2',
100
+ '100': '#F1FBFE',
101
+ },
102
+ blue2scale: {
103
+ '700': '#085FBC',
104
+ '600': '#1A7ECC',
105
+ main: '#2D9CDB',
106
+ '100': '#F3F9FD',
107
+ },
108
+ error: { main: '#f44336' },
109
+ pending: { main: '#e7cc0e', dark: '#B09000' },
110
+ primary: {
111
+ main: '#365c65',
112
+ '100': '#C6DDE2',
113
+ '300': '#87ACB6',
114
+ '500': '#568793',
115
+ '700': '#3C636C',
116
+ '800': '#2F4F57',
117
+ },
118
+ priority: {
119
+ critical: '#EB5757',
120
+ high: '#F2994A',
121
+ low: '#56CCF2',
122
+ medium: '#88C00D',
123
+ },
124
+ typography: { title: '#172326', delete: '#EB5757' },
125
+ statistics: { value: '#568793', label: '#8B9092' },
126
+ success: { main: '#88c00d' },
127
+ uploader: {
128
+ processing: { border: '', bg: '' },
129
+ pause: { border: '', bg: '' },
130
+ },
131
+ score: {
132
+ excellent: '#27AE60',
133
+ high: '#88C00D',
134
+ medium: '#F2C94C',
135
+ low: '#F2994A',
136
+ bad: '#ED323B',
137
+ },
138
+ status: {
139
+ active: { border: '#96B5BC', background: '#F7F9FA' },
140
+ approve: { border: '#88C00D', background: '#F9FCF3' },
141
+ challenge: { border: '#F7C08F', background: '#FEFAF6' },
142
+ challenged: { border: '#F7C08F', background: '#FEFAF6' },
143
+ declined: { border: '#F48085', background: '#FEF5F5' },
144
+ discrepancy: { border: '#CEBA61', background: '#FBFAF2' },
145
+ duplicate: { border: '#CEBA61', background: '#FBFAF2' },
146
+ duplicated: { border: '#CEBA61', background: '#FBFAF2' },
147
+ gold: { border: '#C4A603', background: '#FEFDF3' },
148
+ in_progress: { border: '#56CCF2', background: '#F1FBFE' },
149
+ in_review: { border: '#BB6BD9', background: '#FAF6FE' },
150
+ no_pricing: { border: '#BBBBBB', background: '#FAFAFA' },
151
+ pending: { border: '#ECC631', background: '#FEFDF3' },
152
+ },
153
+ invoiceState: {
154
+ approved: { border: '#27AE60', background: '#27AE60' },
155
+ created: { border: '#87ACB6', background: '#87ACB6' },
156
+ declined: { border: '#EB5757', background: '#EB5757' },
157
+ in_dispute: { border: '#56CCF2', background: '#56CCF2' },
158
+ in_progress: { border: '#56CCF2', background: '#56CCF2' },
159
+ paid: { border: '#BB6BD9', background: '#BB6BD9' },
160
+ closed: { border: '#8B9092', background: '#8B9092' },
161
+ },
162
+ reconcilationState: {
163
+ created: { border: '#87ACB6', background: '#87ACB6' },
164
+ in_progress: { border: '#56CCF2', background: '#56CCF2' },
165
+ approved: { border: '#27AE60', background: '#27AE60' },
166
+ declined: { border: '#EB5757', background: '#EB5757' },
167
+ refunded: { border: '#BB6BD9', background: '#BB6BD9' },
168
+ closed: { border: '#8B9092', background: '#8B9092' },
169
+ },
170
+ trends: {
171
+ positive: '#88C00D',
172
+ negative: '#F2994A',
173
+ critical: '#ED323B',
174
+ percent: '#56CCF2',
175
+ sum: '#BB6BD9',
176
+ },
177
+ invoiceAnalysis: {
178
+ underCharges: '#87ACB6',
179
+ overCharges: '#C6DDE2',
180
+ matching: '#568793',
181
+ invalid: '#EB5757',
182
+ },
183
+ snackbar: {
184
+ info: { icon: '#56CCF2', border: '#56CCF2' },
185
+ success: { icon: '#27AE60', border: '#27AE60' },
186
+ error: { icon: '#ED323B', border: '#ED323B' },
187
+ warn: { icon: '#F7DD8D', border: '#F2C94C' },
188
+ critical: { icon: '#ED323B', border: '#ED323B' },
189
+ silent: { icon: '#56CCF2', border: '#56CCF2' },
190
+ alert: { icon: '#56CCF2', border: '#56CCF2' },
191
+ },
192
+ notificationStatus: {
193
+ unread: '#F7F9FA',
194
+ },
195
+ },
196
+ components: {
197
+ MuiButton: {
198
+ defaultProps: {
199
+ disableRipple: true,
200
+ },
201
+ variants: [
202
+ {
203
+ props: {
204
+ variant: 'contained',
205
+ },
206
+ style: ({ theme }) => ({
207
+ background: theme.palette.primary[500],
208
+ color: theme.palette.common.white,
209
+ boxShadow: 'none',
210
+ '&:hover': {
211
+ background: theme.palette.primary['700'],
212
+ boxShadow: 'none',
213
+ },
214
+ '&:focus': {
215
+ background: theme.palette.primary['800'],
216
+ boxShadow: 'none',
217
+ },
218
+ '&:disabled': {
219
+ background: theme.palette.primary[500],
220
+ color: theme.palette.common.white,
221
+ },
222
+ }),
223
+ },
224
+ {
225
+ props: {
226
+ variant: 'contained:rounded',
227
+ },
228
+ style: ({ theme }) => ({
229
+ borderRadius: 100,
230
+ background: theme.palette.primary[500],
231
+ color: theme.palette.common.white,
232
+ '&:hover': {
233
+ background: theme.palette.primary['700'],
234
+ },
235
+ '&:focus': {
236
+ background: theme.palette.primary['800'],
237
+ },
238
+ '&:disabled': {
239
+ background: theme.palette.primary[500],
240
+ color: theme.palette.common.white,
241
+ },
242
+ }),
243
+ },
244
+ {
245
+ props: {
246
+ variant: 'outlined',
247
+ },
248
+ style: ({ theme }) => ({
249
+ borderRadius: 100,
250
+ color: theme.palette.primary[500],
251
+ borderColor: theme.palette.primary[500],
252
+ '&:hover': {
253
+ color: theme.palette.primary['700'],
254
+ borderColor: theme.palette.primary['700'],
255
+ background: 'transparent',
256
+ },
257
+ '&:focus': {
258
+ color: theme.palette.primary['800'],
259
+ borderColor: theme.palette.primary['800'],
260
+ background: 'transparent',
261
+ },
262
+ '&:disabled': {
263
+ color: theme.palette.primary[500],
264
+ border: `1px solid ${theme.palette.primary[500]}`,
265
+ },
266
+ }),
267
+ },
268
+ {
269
+ props: {
270
+ variant: 'text',
271
+ },
272
+ style: ({ theme }) => ({
273
+ color: theme.palette.primary[500],
274
+ '&:hover': {
275
+ color: theme.palette.primary['700'],
276
+ background: 'transparent',
277
+ },
278
+ '&:focus': {
279
+ color: theme.palette.primary['800'],
280
+ borderColor: theme.palette.primary['800'],
281
+ background: 'transparent',
282
+ },
283
+ '&:disabled': {
284
+ color: theme.palette.primary[500],
285
+ },
286
+ }),
287
+ },
288
+ ],
289
+ styleOverrides: {
290
+ root: {
291
+ fontWeight: 600,
292
+ fontSize: 12,
293
+ lineHeight: '24px',
294
+ letterSpacing: '0.5px',
295
+ height: 40,
296
+ },
297
+ },
298
+ },
299
+ MuiInputBase: {
300
+ styleOverrides: {
301
+ root: ({ theme }) => ({
302
+ background: theme.palette.common.white,
303
+ padding: theme.spacing(1, 2),
304
+ height: 40,
305
+ boxSizing: 'border-box',
306
+ borderRadius: 4,
307
+ border: '1px solid transparent',
308
+ transition: '.2s',
309
+ '&:focus-within': {
310
+ borderColor: theme.palette.primary[100],
311
+ '& input': {
312
+ caretColor: theme.palette.primary[500],
313
+ },
314
+ },
315
+ '&.Mui-error': {
316
+ borderColor: theme.palette.redscale.main,
317
+ },
318
+ 'label + &': {
319
+ marginTop: theme.spacing(2.2),
320
+ background: theme.palette.common.white,
321
+ },
322
+ '& input': {
323
+ color: theme.palette.typography.title,
324
+ '&:placeholder': {
325
+ color: theme.palette.greyscale[400],
326
+ },
327
+ },
328
+ '&.MuiInputBase-adornedStart': {
329
+ '& input': {
330
+ paddingLeft: theme.spacing(2),
331
+ },
332
+ },
333
+ '&.MuiInputBase-adornedEnd': {
334
+ '& input': {
335
+ paddingRight: theme.spacing(2),
336
+ },
337
+ },
338
+ }),
339
+ },
340
+ },
341
+ },
342
+ typography: {
343
+ fontFamily: ['Open Sans', 'OpenSans'].join(','),
344
+ body1: {
345
+ fontWeight: 'normal',
346
+ fontStyle: 'normal',
347
+ fontSize: 14,
348
+ lineHeight: '24px',
349
+ letterSpacing: '0.15px',
350
+ },
351
+ button: {
352
+ paddingLeft: 24,
353
+ paddingRight: 24,
354
+ color: 'white',
355
+ fontWeight: 500,
356
+ fontStyle: 'normal',
357
+ fontSize: 14,
358
+ lineHeight: '24px',
359
+ letterSpacing: '0.5px',
360
+ },
361
+ table: {
362
+ fontWeight: 'normal',
363
+ fontStyle: 'normal',
364
+ fontSize: 12,
365
+ lineHeight: '16px',
366
+ letterSpacing: '0.1px',
367
+ },
368
+ table2: {
369
+ fontWeight: 900,
370
+ fontStyle: 'normal',
371
+ fontSize: 12,
372
+ lineHeight: '16px',
373
+ letterSpacing: '0.1px',
374
+ },
375
+ overLineCaption: {
376
+ fontWeight: 'normal',
377
+ fontStyle: 'normal',
378
+ fontSize: 11,
379
+ lineHeight: '16px',
380
+ letterSpacing: '0.1px',
381
+ },
382
+ link: {
383
+ fontWeight: 'normal',
384
+ fontStyle: 'italic',
385
+ fontSize: 12,
386
+ lineHeight: '20px',
387
+ letterSpacing: '0.15px',
388
+ },
389
+ h1: {
390
+ fontWeight: 300,
391
+ fontStyle: 'normal',
392
+ fontSize: 59,
393
+ lineHeight: '80px',
394
+ letterSpacing: '-0.5px',
395
+ },
396
+ h2: {
397
+ fontWeight: 'normal',
398
+ fontStyle: 'normal',
399
+ fontSize: 44,
400
+ lineHeight: '64px',
401
+ letterSpacing: '0px',
402
+ },
403
+ h3: {
404
+ fontWeight: 'normal',
405
+ fontStyle: 'normal',
406
+ fontSize: 33,
407
+ lineHeight: '48px',
408
+ letterSpacing: '0.25px',
409
+ },
410
+ h4: {
411
+ fontWeight: 'normal',
412
+ fontStyle: 'normal',
413
+ fontSize: 25,
414
+ lineHeight: '40px',
415
+ letterSpacing: '0px',
416
+ },
417
+ h5: {
418
+ fontWeight: 500,
419
+ fontStyle: 'normal',
420
+ fontSize: 19,
421
+ lineHeight: '28px',
422
+ letterSpacing: '0.15px',
423
+ },
424
+ subtitle1: {
425
+ fontWeight: 'normal',
426
+ fontStyle: 'normal',
427
+ fontSize: 16,
428
+ lineHeight: '24px',
429
+ letterSpacing: '0.15px',
430
+ },
431
+ subtitle2: {
432
+ fontWeight: 500,
433
+ fontStyle: 'normal',
434
+ fontSize: 14,
435
+ lineHeight: '24px',
436
+ letterSpacing: '0.1px',
437
+ },
438
+ },
439
+ sizes: {
440
+ sideMenu: {
441
+ width: 70,
442
+ itemHeight: 60,
443
+ logoHeight: 60,
444
+ paddingTop: 20,
445
+ marginBottom: 20,
446
+ },
447
+ hex: 80,
448
+ hex_node: 60,
449
+ hex_event: 60,
450
+ hex_service: 60,
451
+ hex_structure: 30,
452
+ header: {
453
+ iconTray: 200,
454
+ height: 60,
455
+ },
456
+ },
457
+ });
458
+ const lightTheme = (0, styles_1.createTheme)(Object.assign(Object.assign({}, theme), { palette: Object.assign(Object.assign({}, theme.palette), { mode: 'light', text: {
459
+ primary: 'rgba(0, 0, 0, 0.87)',
460
+ secondary: 'rgba(0, 0, 0, 0.54)',
461
+ disabled: 'rgba(0, 0, 0, 0.38)',
462
+ }, divider: '#F0F0F0', background: {
463
+ paper: '#fff',
464
+ default: '#fafafa',
465
+ } }) }));
466
+ const darkTheme = (0, styles_1.createTheme)(Object.assign(Object.assign({}, theme), { palette: Object.assign(Object.assign({}, theme.palette), { mode: 'dark', text: {
467
+ primary: '#fff',
468
+ secondary: 'rgba(255, 255, 255, 0.7)',
469
+ disabled: 'rgba(255, 255, 255, 0.5)',
470
+ }, divider: 'rgba(255, 255, 255, 0.12)', background: {
471
+ paper: '#323232',
472
+ default: '#303030',
473
+ } }) }));
474
+ function createPageContext(darkMode = false) {
475
+ return {
476
+ theme: darkMode ? darkTheme : lightTheme,
477
+ darkMode,
478
+ sheetsManager: new Map(),
479
+ jss: (0, jss_1.create)(Object.assign({}, (0, styles_2.jssPreset)())),
480
+ sheetsRegistry: new jss_1.SheetsRegistry(),
481
+ generateClassName: (0, styles_2.createGenerateClassName)(),
482
+ };
483
+ }
484
+ let pageContext;
485
+ function getPageContext(darkMode) {
486
+ if (!process.browser) {
487
+ return createPageContext(darkMode);
488
+ }
489
+ if (!pageContext) {
490
+ pageContext = createPageContext(darkMode);
491
+ }
492
+ return pageContext;
493
+ }
494
+ exports.default = getPageContext;