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