@fixefy/fixefy-ui-utils 0.2.3 → 0.2.4

package/dist/page_context/index.js

@@ -0,0 +1,764 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return getPageContext;
+    }
+});
+const _styles = require("@mui/material/styles");
+const _styles1 = require("@mui/styles");
+const _jss = require("jss");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const theme = (0, _styles.createTheme)({
+    palette: {
+        background: {
+            paper: '#fff'
+        },
+        common: {
+            black: '#323232',
+            white: '#FFFFFF'
+        },
+        colors: {
+            red: '#EB5757',
+            lightRed: '#FEF6F6',
+            orange: '#F2994A',
+            lightOrange: '#FEF7F1',
+            orangeHover: '#EC7A30',
+            orangeFocused: '#E65C15',
+            gold: '#C4A603',
+            lightGold: '#FAF7E6',
+            yellow: '#F2D74C',
+            lightYellow: '#FEFCEE',
+            yellowHover: '#ECC631',
+            yellowFocused: '#E6B517',
+            green1: '#88C00D',
+            lightGreen1: '#F6FAEC',
+            green2: '#27AE60',
+            lightGreen2: '#EEF9F2',
+            green2Hover: '#169242',
+            green2Focused: '#067724',
+            green3: '#6FCF97',
+            blue: '#2D9CDB',
+            lightBlue: '#F3F9FD',
+            blueHover: '#2D9CDB',
+            blueFocused: '#085FBC',
+            blue1: '#56CCF2',
+            lightBlue1: '#F1FBFE',
+            blue1Hover: '#39B8EC',
+            blue1Focused: '#1DA3E6',
+            purple: '#BB6BD9',
+            lightPurple: '#FBF6FD'
+        },
+        greyscale: {
+            dark: '#636363',
+            main: '#ababab',
+            light: '#e2e2e2',
+            contrastText: '#f7f7f7',
+            '500': '#5C6467',
+            '400': '#8B9092',
+            '300': '#C5C8C9',
+            '200': '#F0F0F0',
+            '100': '#F7F7F7'
+        },
+        redscale: {
+            main: '#EB5757',
+            '500': '#EE6868',
+            '400': '#F08989',
+            '300': '#F4AAAA',
+            '200': '#F8CCCC',
+            '100': '#FEF6F6'
+        },
+        orangescale: {
+            '700': '#E65C15',
+            '600': '#EC7A30',
+            main: '#F2994A',
+            '100': '#FEF7F1'
+        },
+        goldscale: {
+            main: '#C4A603',
+            '100': '#FAF7E6'
+        },
+        yellowscale: {
+            '700': '#E6B517',
+            '600': '#ECC631',
+            main: '#F2D74C',
+            '100': '#FEFCEE'
+        },
+        purplescale: {
+            main: '#BB6BD9',
+            '100': '#FBF6FD'
+        },
+        green1scale: {
+            main: '#88C00D',
+            '100': '#F6FAEC'
+        },
+        green2scale: {
+            '700': '#067724',
+            '600': '#169242',
+            main: '#27AE60',
+            '100': '#EEF9F2'
+        },
+        green3scale: {
+            main: '#6FCF97'
+        },
+        blue1scale: {
+            '700': '#1DA3E6',
+            '600': '#39B8EC',
+            main: '#56CCF2',
+            '100': '#F1FBFE'
+        },
+        blue2scale: {
+            '700': '#085FBC',
+            '600': '#1A7ECC',
+            main: '#2D9CDB',
+            '100': '#F3F9FD'
+        },
+        error: {
+            main: '#f44336'
+        },
+        pending: {
+            main: '#e7cc0e',
+            dark: '#B09000'
+        },
+        primary: {
+            main: '#365c65',
+            '100': '#C6DDE2',
+            '300': '#87ACB6',
+            '500': '#568793',
+            '700': '#3C636C',
+            '800': '#2F4F57'
+        },
+        priority: {
+            critical: '#EB5757',
+            high: '#F2994A',
+            low: '#2D9CDB',
+            medium: '#88C00D',
+            marginal: '#56CCF2'
+        },
+        typography: {
+            title: '#172326',
+            delete: '#EB5757'
+        },
+        statistics: {
+            value: '#568793',
+            label: '#8B9092'
+        },
+        success: {
+            main: '#88c00d'
+        },
+        uploader: {
+            processing: {
+                border: '',
+                bg: ''
+            },
+            pause: {
+                border: '',
+                bg: ''
+            }
+        },
+        score: {
+            excellent: '#27AE60',
+            high: '#88C00D',
+            medium: '#F2C94C',
+            low: '#F2994A',
+            bad: '#ED323B'
+        },
+        status: {
+            active: {
+                border: '#96B5BC',
+                background: '#F7F9FA'
+            },
+            approve: {
+                border: '#88C00D',
+                background: '#F9FCF3'
+            },
+            approved: {
+                border: '#27AE60',
+                background: '#EEF9F2'
+            },
+            challenge: {
+                border: '#F7C08F',
+                background: '#FEFAF6'
+            },
+            challenged: {
+                border: '#F7C08F',
+                background: '#FEFAF6'
+            },
+            declined: {
+                border: '#F48085',
+                background: '#FEF5F5'
+            },
+            discrepancy: {
+                border: '#CEBA61',
+                background: '#FBFAF2'
+            },
+            duplicate: {
+                border: '#CEBA61',
+                background: '#FBFAF2'
+            },
+            duplicated: {
+                border: '#CEBA61',
+                background: '#FBFAF2'
+            },
+            gold: {
+                border: '#C4A603',
+                background: '#FEFDF3'
+            },
+            in_dispute: {
+                border: '#F2994A',
+                background: '#FEF7F1'
+            },
+            in_progress: {
+                border: '#56CCF2',
+                background: '#F1FBFE'
+            },
+            in_review: {
+                border: '#BB6BD9',
+                background: '#FAF6FE'
+            },
+            no_pricing: {
+                border: '#BBBBBB',
+                background: '#FAFAFA'
+            },
+            pending: {
+                border: '#ECC631',
+                background: '#FEFDF3'
+            }
+        },
+        tag: {
+            approved: {
+                border: '#27AE60',
+                background: '#27AE60'
+            },
+            pending: {
+                border: '#ECC631',
+                background: '#ECC631'
+            },
+            created: {
+                border: '#87ACB6',
+                background: '#87ACB6'
+            },
+            declined: {
+                border: '#EB5757',
+                background: '#EB5757'
+            },
+            in_dispute: {
+                border: '#EC6AC8',
+                background: '#EC6AC8'
+            },
+            in_progress: {
+                border: '#56CCF2',
+                background: '#56CCF2'
+            },
+            paid: {
+                border: '#BB6BD9',
+                background: '#BB6BD9'
+            },
+            closed: {
+                border: '#8B9092',
+                background: '#8B9092'
+            },
+            refunded: {
+                border: '#BB6BD9',
+                background: '#BB6BD9'
+            },
+            low: {
+                border: '#56CCF2',
+                background: '#88C00D'
+            }
+        },
+        invoiceState: {
+            approved: {
+                border: '#27AE60',
+                background: '#27AE60',
+                light: '#D4EFDF'
+            },
+            created: {
+                border: '#87ACB6',
+                background: '#87ACB6'
+            },
+            declined: {
+                border: '#EB5757',
+                background: '#EB5757'
+            },
+            in_dispute: {
+                border: '#F2994A',
+                background: '#F2994A',
+                light: '#FCEBDB'
+            },
+            in_progress: {
+                border: '#56CCF2',
+                background: '#56CCF2'
+            },
+            paid: {
+                border: '#BB6BD9',
+                background: '#BB6BD9'
+            },
+            closed: {
+                border: '#8B9092',
+                background: '#8B9092'
+            }
+        },
+        reconcilationState: {
+            created: {
+                border: '#87ACB6',
+                background: '#87ACB6'
+            },
+            in_progress: {
+                border: '#56CCF2',
+                background: '#56CCF2'
+            },
+            approved: {
+                border: '#27AE60',
+                background: '#27AE60'
+            },
+            declined: {
+                border: '#EB5757',
+                background: '#EB5757'
+            },
+            approved: {
+                border: '#27AE60',
+                background: '#27AE60'
+            },
+            declined: {
+                border: '#EB5757',
+                background: '#EB5757'
+            },
+            refunded: {
+                border: '#BB6BD9',
+                background: '#BB6BD9'
+            },
+            closed: {
+                border: '#8B9092',
+                background: '#8B9092'
+            }
+        },
+        trends: {
+            positive: '#88C00D',
+            negative: '#F2994A',
+            critical: '#ED323B',
+            percent: '#56CCF2',
+            sum: '#BB6BD9'
+        },
+        invoiceAnalysis: {
+            underCharges: '#87ACB6',
+            overCharges: '#C6DDE2',
+            matching: '#568793',
+            invalid: '#EB5757'
+        },
+        snackbar: {
+            info: {
+                icon: '#56CCF2',
+                border: '#56CCF2'
+            },
+            success: {
+                icon: '#27AE60',
+                border: '#27AE60'
+            },
+            error: {
+                icon: '#ED323B',
+                border: '#ED323B'
+            },
+            warn: {
+                icon: '#F7DD8D',
+                border: '#F2C94C'
+            },
+            critical: {
+                icon: '#ED323B',
+                border: '#ED323B'
+            },
+            silent: {
+                icon: '#56CCF2',
+                border: '#56CCF2'
+            },
+            alert: {
+                icon: '#56CCF2',
+                border: '#56CCF2'
+            }
+        },
+        notificationStatus: {
+            unread: '#F7F9FA'
+        }
+    },
+    components: {
+        MuiButton: {
+            defaultProps: {
+                disableRipple: true
+            },
+            variants: [
+                {
+                    props: {
+                        variant: 'contained'
+                    },
+                    style: ({ theme })=>({
+                            background: theme.palette.primary[500],
+                            color: theme.palette.common.white,
+                            boxShadow: 'none',
+                            '&:hover': {
+                                background: theme.palette.primary['700'],
+                                boxShadow: 'none'
+                            },
+                            '&:focus': {
+                                background: theme.palette.primary['800'],
+                                boxShadow: 'none'
+                            },
+                            '&:disabled': {
+                                background: theme.palette.primary[500],
+                                color: theme.palette.common.white
+                            }
+                        })
+                },
+                {
+                    props: {
+                        variant: 'contained:rounded'
+                    },
+                    style: ({ theme })=>({
+                            borderRadius: 100,
+                            background: theme.palette.primary[500],
+                            color: theme.palette.common.white,
+                            '&:hover': {
+                                background: theme.palette.primary['700']
+                            },
+                            '&:focus': {
+                                background: theme.palette.primary['800']
+                            },
+                            '&:disabled': {
+                                background: theme.palette.primary[500],
+                                color: theme.palette.common.white
+                            }
+                        })
+                },
+                {
+                    props: {
+                        variant: 'outlined'
+                    },
+                    style: ({ theme })=>({
+                            borderRadius: 100,
+                            color: theme.palette.primary[500],
+                            borderColor: theme.palette.primary[500],
+                            '&:hover': {
+                                color: theme.palette.primary['700'],
+                                borderColor: theme.palette.primary['700'],
+                                background: 'transparent'
+                            },
+                            '&:focus': {
+                                color: theme.palette.primary['800'],
+                                borderColor: theme.palette.primary['800'],
+                                background: 'transparent'
+                            },
+                            '&:disabled': {
+                                color: theme.palette.primary[500],
+                                border: `1px solid ${theme.palette.primary[500]}`
+                            }
+                        })
+                },
+                {
+                    props: {
+                        variant: 'text'
+                    },
+                    style: ({ theme })=>({
+                            color: theme.palette.primary[500],
+                            '&:hover': {
+                                color: theme.palette.primary['700'],
+                                background: 'transparent'
+                            },
+                            '&:focus': {
+                                color: theme.palette.primary['800'],
+                                borderColor: theme.palette.primary['800'],
+                                background: 'transparent'
+                            },
+                            '&:disabled': {
+                                color: theme.palette.primary[500]
+                            }
+                        })
+                }
+            ],
+            styleOverrides: {
+                root: {
+                    fontWeight: 600,
+                    fontSize: 12,
+                    lineHeight: '24px',
+                    letterSpacing: '0.5px',
+                    height: 40
+                }
+            }
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                //@ts-ignore
+                root: ({ theme })=>({
+                        background: theme.palette.common.white,
+                        padding: theme.spacing(1, 2),
+                        height: 40,
+                        boxSizing: 'border-box',
+                        borderRadius: 4,
+                        border: '1px solid transparent',
+                        transition: '.2s',
+                        '&:focus-within': {
+                            borderColor: theme.palette.primary[100],
+                            '& input': {
+                                caretColor: theme.palette.primary[500]
+                            }
+                        },
+                        '&.Mui-error': {
+                            borderColor: theme.palette.redscale.main
+                        },
+                        'label + &': {
+                            marginTop: theme.spacing(2.2),
+                            background: theme.palette.common.white
+                        },
+                        '& input': {
+                            color: theme.palette.typography.title,
+                            '&:placeholder': {
+                                color: theme.palette.greyscale[400]
+                            }
+                        },
+                        '&.MuiInputBase-adornedStart': {
+                            '& input': {
+                                paddingLeft: theme.spacing(2)
+                            }
+                        },
+                        '&.MuiInputBase-adornedEnd': {
+                            '& input': {
+                                paddingRight: theme.spacing(2)
+                            }
+                        }
+                    })
+            }
+        }
+    },
+    typography: {
+        fontFamily: [
+            'Open Sans',
+            'OpenSans'
+        ].join(','),
+        body1: {
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            fontSize: 14,
+            lineHeight: '24px',
+            letterSpacing: '0.15px'
+        },
+        button: {
+            paddingLeft: 24,
+            paddingRight: 24,
+            color: 'white',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: 14,
+            lineHeight: '24px',
+            letterSpacing: '0.5px'
+        },
+        table: {
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            fontSize: 12,
+            lineHeight: '16px',
+            letterSpacing: '0.1px'
+        },
+        table2: {
+            fontWeight: 900,
+            fontStyle: 'normal',
+            fontSize: 12,
+            lineHeight: '16px',
+            letterSpacing: '0.1px'
+        },
+        overLineCaption: {
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            fontSize: 11,
+            lineHeight: '16px',
+            letterSpacing: '0.1px'
+        },
+        link: {
+            fontWeight: 'normal',
+            fontStyle: 'italic',
+            fontSize: 12,
+            lineHeight: '20px',
+            letterSpacing: '0.15px'
+        },
+        h1: {
+            fontWeight: 300,
+            fontStyle: 'normal',
+            fontSize: 59,
+            lineHeight: '80px',
+            letterSpacing: '-0.5px'
+        },
+        h2: {
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            fontSize: 44,
+            lineHeight: '64px',
+            letterSpacing: '0px'
+        },
+        h3: {
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            fontSize: 33,
+            lineHeight: '48px',
+            letterSpacing: '0.25px'
+        },
+        h4: {
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            fontSize: 25,
+            lineHeight: '40px',
+            letterSpacing: '0px'
+        },
+        h5: {
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: 19,
+            lineHeight: '28px',
+            letterSpacing: '0.15px'
+        },
+        subtitle1: {
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            fontSize: 16,
+            lineHeight: '24px',
+            letterSpacing: '0.15px'
+        },
+        subtitle2: {
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: 14,
+            lineHeight: '24px',
+            letterSpacing: '0.1px'
+        }
+    },
+    sizes: {
+        sideMenu: {
+            width: 70,
+            itemHeight: 60,
+            logoHeight: 60,
+            paddingTop: 20,
+            marginBottom: 20
+        },
+        hex: 80,
+        hex_node: 60,
+        hex_event: 60,
+        hex_service: 60,
+        hex_structure: 30,
+        header: {
+            iconTray: 200,
+            height: 60
+        }
+    }
+});
+const lightTheme = (0, _styles.createTheme)(_object_spread_props(_object_spread({}, theme), {
+    //@ts-ignore
+    palette: _object_spread_props(_object_spread({}, theme.palette), {
+        mode: 'light',
+        text: {
+            primary: 'rgba(0, 0, 0, 0.87)',
+            secondary: 'rgba(0, 0, 0, 0.54)',
+            disabled: 'rgba(0, 0, 0, 0.38)'
+        },
+        divider: '#F0F0F0',
+        background: {
+            paper: '#fff',
+            default: '#fafafa'
+        }
+    })
+}));
+const darkTheme = (0, _styles.createTheme)(_object_spread_props(_object_spread({}, theme), {
+    //@ts-ignore
+    palette: _object_spread_props(_object_spread({}, theme.palette), {
+        mode: 'dark',
+        text: {
+            primary: '#fff',
+            secondary: 'rgba(255, 255, 255, 0.7)',
+            disabled: 'rgba(255, 255, 255, 0.5)'
+        },
+        divider: 'rgba(255, 255, 255, 0.12)',
+        background: {
+            paper: '#323232',
+            default: '#303030'
+        }
+    })
+}));
+// A theme with custom primary and secondary color.
+// It's optional.
+function createPageContext(darkMode = false) {
+    // const theme = darkMode ? darkTheme : lightTheme;
+    return {
+        theme: darkMode ? darkTheme : lightTheme,
+        darkMode,
+        // This is needed in order to deduplicate the injection of CSS in the page.
+        sheetsManager: new Map(),
+        // This is needed in order to inject the critical CSS.
+        jss: (0, _jss.create)(_object_spread({}, (0, _styles1.jssPreset)())),
+        sheetsRegistry: new _jss.SheetsRegistry(),
+        // The standard class name generator.
+        generateClassName: (0, _styles1.createGenerateClassName)()
+    };
+}
+let pageContext;
+function getPageContext(darkMode) {
+    // Make sure to create a new context for every server-side request so that data
+    // isn't shared between connections (which would be bad).
+    //@ts-ignore
+    if (!process.browser) {
+        return createPageContext(darkMode);
+    }
+    // Reuse context on the client-side.
+    if (!pageContext) {
+        pageContext = createPageContext(darkMode);
+    }
+    return pageContext;
+}