@fixefy/fixefy-ui-components 0.3.31 → 0.3.34

package/dist/src/FxProgressCircle/FxProgressCircle.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxProgressCircle", {
+    enumerable: true,
+    get: function() {
+        return FxProgressCircle;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _progress_circlestyles = require("./styles/progress_circle.styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const FxProgressCircle = ({ radius = 70, border = 70, value, hasLabel = true, max = 100, color, type = 'progress' })=>{
+    const _value = value ? value / max : 0;
+    const p = 2 * Math.PI * (radius - border / 2);
+    const strokeWidth = border;
+    const strokeDashoffset = p * (1 - _value);
+    const strokeDasharray = p;
+    const label = type === 'progress' ? `${value}/${max}` : `${value.toFixed()}%`;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_progress_circlestyles.Container, {
+        children: [
+            hasLabel && type === 'progress' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_circlestyles.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_progress_circlestyles.Slider, {
+                // ref={(potar) => (potar = potar)}
+                viewBox: `0 0 ${radius * 2} ${radius * 2}`,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_circlestyles.SliderCircle, {
+                        style: {
+                            strokeWidth
+                        },
+                        r: radius - border / 2,
+                        cx: radius,
+                        cy: radius,
+                        color: color
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_circlestyles.SliderBar, {
+                        style: {
+                            strokeWidth,
+                            strokeDashoffset,
+                            strokeDasharray
+                        },
+                        r: radius - border / 2,
+                        cx: radius,
+                        cy: radius,
+                        color: color
+                    })
+                ]
+            }),
+            hasLabel && type === 'percentage' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_circlestyles.Label, {
+                sx: {
+                    ml: 1
+                },
+                children: label
+            })
+        ]
+    });
+};

package/dist/src/FxProgressCircle/index.js

@@ -0,0 +1,19 @@
+"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, {
+    FxProgressCircle: function() {
+        return _FxProgressCircle.FxProgressCircle;
+    },
+    ProgressCirclePropsType: function() {
+        return _FxProgressCircle.ProgressCirclePropsType;
+    }
+});
+const _FxProgressCircle = require("./FxProgressCircle");

package/dist/src/FxProgressCircle/styles/progress_circle.styles.js

@@ -0,0 +1,106 @@
+"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, {
+    Container: function() {
+        return Container;
+    },
+    Label: function() {
+        return Label;
+    },
+    Slider: function() {
+        return Slider;
+    },
+    SliderBar: function() {
+        return SliderBar;
+    },
+    SliderCircle: function() {
+        return SliderCircle;
+    }
+});
+const _styles = require("@mui/material/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 _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 Container = (0, _styles.styled)("div")(({})=>({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    }));
+const Label = (0, _styles.styled)("span")(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+        color: theme.palette.typography.title,
+        marginRight: 8
+    }));
+const Slider = (0, _styles.styled)("svg")(({})=>({
+        display: "block",
+        width: 22,
+        height: 22,
+        transform: "rotate(-90deg)"
+    }));
+const SliderCircle = (0, _styles.styled)("circle")(({ theme, color })=>({
+        fill: "transparent",
+        stroke: color !== null && color !== void 0 ? color : theme.palette.green2scale.main,
+        opacity: 0.1
+    }));
+const SliderBar = (0, _styles.styled)("circle")(({ theme, color })=>({
+        fill: "transparent",
+        stroke: color !== null && color !== void 0 ? color : theme.palette.green2scale.main,
+        strokeDashoffset: 0,
+        strokeDasharray: 0
+    }));

package/dist/src/FxProgressCounter/ProgressCounter.js

@@ -0,0 +1,168 @@
+// @ts-nocheck
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxProgressCounter", {
+    enumerable: true,
+    get: function() {
+        return FxProgressCounter;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _progress_counterstyles = require("./styles/progress_counter.styles");
+const _image = /*#__PURE__*/ _interop_require_default(require("next/image"));
+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 _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function FxProgressCounter(_param) {
+    var { values, structure, filter } = _param, rest = _object_without_properties(_param, [
+        "values",
+        "structure",
+        "filter"
+    ]);
+    var _values_count, _values_current;
+    // const { extended, title } = structure ?? {};
+    // const {
+    // 	gql_operation,
+    // 	object_path: objectPath,
+    // 	title_path: titlePath,
+    // 	filter: structureFilter,
+    // } = extended ?? {};
+    const initialValues = {
+        count: (_values_count = values === null || values === void 0 ? void 0 : values.count) !== null && _values_count !== void 0 ? _values_count : 0,
+        current: (_values_current = values === null || values === void 0 ? void 0 : values.current) !== null && _values_current !== void 0 ? _values_current : 0
+    };
+    // let _filter = structureFilter;
+    // if (filter) {
+    //   _filter = {
+    //     ..._filter,
+    //     ...filter,
+    //   };
+    // }
+    // const { data, error, loading } = useQuery(gql(gql_operation), {
+    //   variables: {
+    //     where: { ..._filter },
+    //   },
+    // });
+    const normalizeNumber = (number)=>{
+        return number / initialValues.count * 100;
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_progress_counterstyles.Container, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                position: 'relative',
+                textAlign: 'center',
+                justifyContent: 'center',
+                mt: 1.2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_image.default, {
+                        alt: 'approve',
+                        width: 16,
+                        height: 16,
+                        loader: ()=>(0, _fixefyuiutils.imageLoader)({
+                                root: 'https://cdn-dev.fixefy.me/',
+                                src: 'invoices/approve-small-white.svg'
+                            }),
+                        src: 'invoices/approve-small-white.svg',
+                        onLoad: ()=>console.log('loaded'),
+                        onError: (e)=>console.log('error:', e)
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        mt: 0.5,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                            fontSize: 19,
+                            fontWeight: 600,
+                            children: [
+                                initialValues.current,
+                                "/",
+                                initialValues.count
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        fontSize: 11,
+                        sx: {
+                            opacity: 0.6
+                        },
+                        children: "Charges"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_progress_counterstyles.ProgressContainer, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_counterstyles.MainBar, _object_spread({
+                        variant: "determinate",
+                        value: normalizeNumber(initialValues.current),
+                        color: 'inherit'
+                    }, rest)),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_counterstyles.BackgroundBar, _object_spread({
+                        variant: "determinate",
+                        value: initialValues.count > 100 ? 100 : initialValues.count,
+                        color: 'inherit'
+                    }, rest))
+                ]
+            })
+        ]
+    });
+}

package/dist/src/FxProgressCounter/index.js

@@ -0,0 +1,19 @@
+"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, {
+    FxProgressCounter: function() {
+        return _ProgressCounter.FxProgressCounter;
+    },
+    ProgressCounterPropsType: function() {
+        return _ProgressCounter.ProgressCounterPropsType;
+    }
+});
+const _ProgressCounter = require("./ProgressCounter");

package/dist/src/FxProgressCounter/styles/progress_counter.styles.js

@@ -0,0 +1,61 @@
+// @ts-nocheck
+"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, {
+    BackgroundBar: function() {
+        return BackgroundBar;
+    },
+    BaseProgress: function() {
+        return BaseProgress;
+    },
+    Container: function() {
+        return Container;
+    },
+    MainBar: function() {
+        return MainBar;
+    },
+    ProgressContainer: function() {
+        return ProgressContainer;
+    }
+});
+const _styles = require("@mui/material/styles");
+const _material = require("@mui/material");
+const BaseProgress = (0, _styles.styled)(_material.LinearProgress)(({ theme })=>({
+        borderRadius: '8px',
+        width: '70%',
+        position: 'absolute',
+        zIndex: 2,
+        height: 3
+    }));
+const MainBar = (0, _styles.styled)(BaseProgress)(({ theme })=>({
+        opacity: 1
+    }));
+const BackgroundBar = (0, _styles.styled)(BaseProgress)(({ theme })=>({
+        opacity: 0.2
+    }));
+const ProgressContainer = (0, _styles.styled)(_material.Box)(({ theme })=>({
+        alignItems: 'center',
+        display: 'flex',
+        width: '100%',
+        margin: '8px 0',
+        position: 'relative',
+        justifyContent: 'center'
+    }));
+const Container = (0, _styles.styled)(_material.Box)(({ theme })=>({
+        width: 104,
+        height: 104,
+        minWidth: 104,
+        maxWidth: 104,
+        borderRadius: 8,
+        position: 'relative',
+        color: theme.palette.common.white,
+        backgroundColor: theme.palette.score.excellent
+    }));

package/dist/src/FxScore/FxScore.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxScore", {
+    enumerable: true,
+    get: function() {
+        return FxScore;
+    }
+});
+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 _scorestyles = require("./styles/score.styles");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+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 _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 _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const FxScore = (_param)=>{
+    var { value, structure, filter, variant = 'box', hasLabel = true, title: propsTitle = 'score', Sizes: propsSizes = {} } = _param, rest = _object_without_properties(_param, [
+        "value",
+        "structure",
+        "filter",
+        "variant",
+        "hasLabel",
+        "title",
+        "Sizes"
+    ]);
+    const Sizes = _object_spread({
+        box: {
+            boxWidth: 104,
+            progressWidth: 68
+        },
+        circle: {
+            boxWidth: 40,
+            progressWidth: 36
+        }
+    }, propsSizes);
+    const { extended, title } = structure || {};
+    const { gql_operation, object_path: objectPath, filter: structureFilter } = 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));
+    (0, _react.useEffect)(()=>{
+        if (!value && structure) {
+            fetchData({
+                variables: {
+                    where: _object_spread({}, _filter)
+                }
+            });
+        }
+    }, []);
+    const ScoreValue = data ? data[objectPath] * 100 : value;
+    const _classes = (0, _scorestyles.useStyles)({
+        scoreColor: (0, _fixefyuiutils.getScoreColor)(ScoreValue || 0),
+        variant
+    });
+    var _Math_round;
+    return loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        className: _classes.container,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+            animation: "wave",
+            variant: "circular",
+            width: 68,
+            height: 68
+        })
+    }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        className: _classes.container,
+        sx: {
+            width: Sizes[variant].boxWidth,
+            height: Sizes[variant].boxWidth,
+            minWidth: Sizes[variant].boxWidth,
+            maxWidth: Sizes[variant].boxWidth,
+            borderRadius: variant === 'box' ? '8px' : '50%'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, _object_spread({
+                size: Sizes[variant].progressWidth,
+                variant: "determinate",
+                value: ScoreValue,
+                color: "inherit",
+                thickness: 2,
+                className: _classes.mainCircle
+            }, rest)),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, _object_spread({
+                size: Sizes[variant].progressWidth,
+                variant: "determinate",
+                value: 100,
+                color: "inherit",
+                thickness: 2,
+                className: _classes.backgroundCircle
+            }, rest)),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                className: _classes.content,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        variant: variant === 'box' ? 'h5' : 'table',
+                        className: _classes.scoreNumber,
+                        children: `${(_Math_round = Math.round(Number(ScoreValue))) !== null && _Math_round !== void 0 ? _Math_round : 0}%`
+                    }),
+                    hasLabel && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        className: _classes.scoreText,
+                        children: (0, _fixefyuiutils.titleCase)(title !== null && title !== void 0 ? title : propsTitle)
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/src/FxScore/index.js

@@ -0,0 +1,19 @@
+"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, {
+    FxScore: function() {
+        return _FxScore.FxScore;
+    },
+    ScorePropsType: function() {
+        return _FxScore.ScorePropsType;
+    }
+});
+const _FxScore = require("./FxScore");