@fixefy/fixefy-ui-components 0.0.40 → 0.0.42

package/build/FxShowMore/styles/show_more.styles.js

@@ -0,0 +1,134 @@
+// import React from 'react'
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ShowMoreBtn: function() {
+        return ShowMoreBtn;
+    },
+    ShowMoreIcon: function() {
+        return ShowMoreIcon;
+    },
+    ShowMoreWrapper: function() {
+        return ShowMoreWrapper;
+    },
+    StyledDivider: function() {
+        return StyledDivider;
+    },
+    StyledLabel: function() {
+        return StyledLabel;
+    },
+    StyledPopover: function() {
+        return StyledPopover;
+    }
+});
+const _styles = require("@mui/material/styles");
+const _material = require("@mui/material");
+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 ShowMoreWrapper = (0, _styles.styled)(_material.Box)(({})=>({
+        borderRadius: '8px'
+    }));
+const ShowMoreBtn = (0, _styles.styled)(_material.Button)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.button), {
+        fontWeight: 600,
+        fontSize: 12,
+        textTransform: 'uppercase',
+        color: theme.palette.primary[800],
+        padding: 0,
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center'
+    }));
+const ShowMoreIcon = (0, _styles.styled)(_material.Box)(({ theme, isOpen })=>({
+        width: 16,
+        height: 16,
+        color: theme.palette.primary[800],
+        borderRadius: '50%',
+        border: '1px solid',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 8,
+        ['& svg']: {
+            width: 14,
+            height: 14,
+            color: theme.palette.primary[800],
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'all 0.5s'
+        }
+    }));
+const StyledPopover = (0, _styles.styled)(_material.Popover)(({ theme })=>({
+        ['.MuiPaper-root']: {
+            background: theme.palette.common.white,
+            boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.3)',
+            borderRadius: 8,
+            padding: 24,
+            marginTop: 8,
+            minWidth: 226,
+            maxWidth: 328
+        }
+    }));
+const StyledDivider = (0, _styles.styled)(_material.Divider)(({})=>({
+        marginTop: 8,
+        marginBottom: 8
+    }));
+const StyledLabel = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.overLineCaption), {
+        color: '#8B9092'
+    }));

package/build/FxSlider/FxSlider.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxSlider", {
+    enumerable: true,
+    get: function() {
+        return FxSlider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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 FxSlider(props) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, _object_spread({}, props));
+}

package/build/FxSlider/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxSlider", {
+    enumerable: true,
+    get: function() {
+        return _FxSlider.FxSlider;
+    }
+});
+const _FxSlider = require("./FxSlider");

package/build/FxSlider/slider_types.d.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/build/FxStatisticsBar/FxStatisticsBar.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxStatisticsBar", {
+    enumerable: true,
+    get: function() {
+        return FxStatisticsBar;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _graphqltag = require("graphql-tag");
+const _client = require("@apollo/client");
+const _material = require("@mui/material");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _statisticsstyles = require("./styles/statistics.styles");
+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 _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+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 FxStatisticsBar({ value, type = 'currency', label, structure, collapsed, filter }) {
+    const _classes = (0, _statisticsstyles.useStyles)();
+    const { extended, input_type, title } = structure || {};
+    const { gql_operation, object_path, filter: structurefilter, variables } = extended || {};
+    const gqlOperation = gql_operation !== null && gql_operation !== void 0 ? gql_operation : 'query GET_SCORE($where: Json) { score: chargesAvg( where: $where data: { fields: ["score"], fragment: "{ score }" } ) }';
+    let _filter = structurefilter;
+    if (filter) {
+        _filter = _object_spread({}, _filter, filter);
+    }
+    const [fetchData, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(gqlOperation));
+    const convertValue = (value)=>{
+        var _getCurrency;
+        let newValue = '';
+        let sign = '';
+        if (value < 1000) {
+            newValue = value;
+        } else if (value >= 1000 && value < 1000000) {
+            newValue = (value / 1000).toFixed(2);
+            sign = 'K';
+        } else {
+            newValue = (value / 1000000).toFixed(2);
+            sign = 'M';
+        }
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: ((_getCurrency = (0, _fixefyuiutils.getCurrency)(null)) === null || _getCurrency === void 0 ? void 0 : _getCurrency.code.toUpperCase()) || 'USD'
+        }).format(Number(newValue)) + sign;
+    };
+    const checkIsCollapsed = ()=>{
+        let collapsedFromStructureIsDefined = false;
+        if (variables && variables.collapsed !== undefined && variables.collapsed !== null) {
+            collapsedFromStructureIsDefined = true;
+        }
+        if (collapsedFromStructureIsDefined) {
+            return variables.collapsed;
+        } else {
+            return collapsed;
+        }
+    };
+    const getValue = (value)=>{
+        const statisticsType = (input_type === null || input_type === void 0 ? void 0 : input_type.value) || type;
+        switch(statisticsType){
+            case 'percentage':
+                {
+                    return new Intl.NumberFormat('en-US', {
+                        style: 'percent'
+                    }).format(Number(value));
+                }
+            case 'currency':
+                {
+                    if (checkIsCollapsed()) {
+                        return convertValue(value);
+                    } else {
+                        var _getCurrency;
+                        return new Intl.NumberFormat('en-US', {
+                            style: 'currency',
+                            currency: ((_getCurrency = (0, _fixefyuiutils.getCurrency)(null)) === null || _getCurrency === void 0 ? void 0 : _getCurrency.code.toUpperCase()) || 'USD'
+                        }).format(Number(value));
+                    }
+                }
+            default:
+                return value;
+        }
+    };
+    (0, _react.useEffect)(()=>{
+        if (!value && structure) {
+            fetchData({
+                variables: {
+                    where: _object_spread({}, _filter)
+                }
+            });
+        }
+    }, []);
+    const statisticsTitle = label ? label : title;
+    const statisticsValue = data && data[object_path] != null ? getValue(data[object_path]) : getValue(value);
+    return loading ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            width: 100
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+                animation: "wave",
+                width: 100,
+                height: 30
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+                animation: "wave",
+                width: 100,
+                height: 20
+            })
+        ]
+    }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: _classes.container,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: (variables === null || variables === void 0 ? void 0 : variables.contrast) ? _classes.contrastValue : _classes.value,
+                children: statisticsValue
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: (variables === null || variables === void 0 ? void 0 : variables.contrast) ? _classes.contrastLabel : _classes.label,
+                children: (0, _fixefyuiutils.titleCase)(statisticsTitle)
+            })
+        ]
+    });
+}

package/build/FxStatisticsBar/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxStatisticsBar", {
+    enumerable: true,
+    get: function() {
+        return _FxStatisticsBar.FxStatisticsBar;
+    }
+});
+const _FxStatisticsBar = require("./FxStatisticsBar");

package/build/FxStatisticsBar/statistics_bar_types.d.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/build/FxStatisticsBar/styles/statistics.styles.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useStyles", {
+    enumerable: true,
+    get: function() {
+        return useStyles;
+    }
+});
+const _styles = require("@mui/styles");
+require("@fixefy/fixefy-ui-utils");
+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 useStyles = (0, _styles.makeStyles)((theme)=>({
+        container: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            minHeight: 56
+        },
+        contrastLabel: {
+            fontWeight: 'normal',
+            fontSize: 11,
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+            opacity: 0.7,
+            color: theme.palette.common.white,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+        contrastValue: {
+            fontWeight: 600,
+            fontSize: 19,
+            lineHeight: '28px',
+            letterSpacing: '0.15px',
+            color: theme.palette.common.white
+        },
+        label: _object_spread_props(_object_spread({}, theme.typography.table), {
+            color: theme.palette.statistics.label,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }),
+        value: _object_spread_props(_object_spread({}, theme.typography.h5), {
+            color: theme.palette.statistics.value
+        })
+    }));

package/build/FxStatusBar/FxStatusBar.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxStatusBar", {
+    enumerable: true,
+    get: function() {
+        return FxStatusBar;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _material = require("@mui/material");
+const _FxChip = require("../FxChip");
+const _constants = require("./helpers/constants");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _statusBarstyles = require("./styles/statusBar.styles");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const FxStatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options, chipsVariant = 'filled' })=>{
+    const [selectedStatus, setSelectedStatus] = (0, _react.useState)([]);
+    const [searchValue] = (0, _react.useState)('');
+    (0, _react.useEffect)(()=>{
+        if (defaultStatus) {
+            typeof defaultStatus === 'string' ? setSelectedStatus([
+                defaultStatus
+            ]) : setSelectedStatus(defaultStatus);
+        } else {
+            setSelectedStatus([
+                'all'
+            ]);
+        }
+    }, [
+        defaultStatus
+    ]);
+    const onStatusClick = (status)=>{
+        if (status === 'all') {
+            setSelectedStatus(()=>{
+                if (selectedStatus.includes(status)) {
+                    return [];
+                } else {
+                    return [
+                        'all'
+                    ];
+                }
+            });
+        } else {
+            setSelectedStatus((prevState)=>{
+                if (selectedStatus.includes(status)) {
+                    const rv = prevState.filter((_status)=>_status !== status && _status !== 'all');
+                    return rv.length == 0 ? [
+                        'all'
+                    ] : rv;
+                } else {
+                    const rv = prevState.filter((_status)=>_status !== status && _status !== 'all');
+                    return [
+                        ...rv,
+                        status
+                    ];
+                }
+            });
+        }
+    };
+    (0, _react.useEffect)(()=>{
+        onChangeStatus(selectedStatus);
+    }, [
+        selectedStatus
+    ]);
+    (0, _react.useEffect)(()=>{
+        onSearch && onSearch(searchValue);
+    }, [
+        searchValue
+    ]);
+    const __options = options !== null && options !== void 0 ? options : _constants.statuses;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_statusBarstyles.StatusBarCard, {
+        children: [
+            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_statusBarstyles.StatusBarTitle, {
+                style: {
+                    marginRight: '8px'
+                },
+                children: (0, _fixefyuiutils.titleCase)(title)
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_statusBarstyles.StatusChipStyled, {
+                        onClick: ()=>onStatusClick('all'),
+                        label: "All",
+                        variant: selectedStatus.includes('all') ? 'filled' : 'outlined'
+                    }),
+                    Object.keys(__options).map((key, index)=>{
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
+                            onClick: ()=>onStatusClick(__options[key]),
+                            label: (0, _fixefyuiutils.titleCase)(key),
+                            variant: chipsVariant,
+                            status: selectedStatus.includes(__options[key]) ? __options[key] : ''
+                        }, index);
+                    })
+                ]
+            })
+        ]
+    });
+};

package/build/FxStatusBar/helpers/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "statuses", {
+    enumerable: true,
+    get: function() {
+        return statuses;
+    }
+});
+const statuses = {
+    Declined: 'declined',
+    Pending: 'pending',
+    Approved: 'approved',
+    Active: 'active',
+    Challenge: 'challenged',
+    in_review: 'in_review',
+    Discrepancy: 'discrepancy',
+    no_pricing: 'no_pricing',
+    in_progress: 'in_progress',
+    Duplicated: 'duplicated'
+};

package/build/FxStatusBar/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FxStatusBar: function() {
+        return _FxStatusBar.FxStatusBar;
+    },
+    StatusBarPropsType: function() {
+        return _status_bar_types.StatusBarPropsType;
+    }
+});
+const _FxStatusBar = require("./FxStatusBar");
+const _status_bar_types = require("./status_bar_types");