@fixefy/fixefy-ui-components 0.0.5 → 0.0.7

package/dist-cjs/index.js

@@ -1,7 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = exports.Button = void 0;
-var FxButton_1 = require("./FxButton/");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return FxButton_1.Button; } });
+exports.Tag = exports.FxProgressCounter = exports.FxModal = exports.FxChip = exports.FxButton = exports.FxAvatar = exports.AsyncDropdown = exports.AggregationsBar = void 0;
+var AggregationsBar_1 = require("./AggregationsBar");
+Object.defineProperty(exports, "AggregationsBar", { enumerable: true, get: function () { return AggregationsBar_1.AggregationsBar; } });
+var AsyncDropdown_1 = require("./AsyncDropdown");
+Object.defineProperty(exports, "AsyncDropdown", { enumerable: true, get: function () { return AsyncDropdown_1.AsyncDropdown; } });
+var FxAvatar_1 = require("./FxAvatar");
+Object.defineProperty(exports, "FxAvatar", { enumerable: true, get: function () { return FxAvatar_1.FxAvatar; } });
+var FxButton_1 = require("./FxButton");
+Object.defineProperty(exports, "FxButton", { enumerable: true, get: function () { return FxButton_1.FxButton; } });
+var FxChip_1 = require("./FxChip");
+Object.defineProperty(exports, "FxChip", { enumerable: true, get: function () { return FxChip_1.FxChip; } });
+var FxModal_1 = require("./FxModal");
+Object.defineProperty(exports, "FxModal", { enumerable: true, get: function () { return FxModal_1.FxModal; } });
+var FxProgressCounter_1 = require("./FxProgressCounter");
+Object.defineProperty(exports, "FxProgressCounter", { enumerable: true, get: function () { return FxProgressCounter_1.FxProgressCounter; } });
 var Tag_1 = require("./Tag/");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });

package/dist-es/ActionsTray/{actions_tray.jsx → ActionsTray.jsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import { Slide } from '@mui/material';
 import { imageLoader } from '@fixefy/fixefy-ui-utils';
-import { ActionBtn, ActionTitle, ChargesCount, ChargesTitle, Close, Container, Divider, TitleWrapper } from './styles/actionsTray.styles';
+import { ActionBtn, ActionTitle, ChargesCount, ChargesTitle, Close, Container, Divider, TitleWrapper } from './styles/actions_tray.styles';
 export function ActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
     const renderActions = () => {
         switch (type) {

package/dist-es/ActionsTray/index.js

@@ -1 +1 @@
-"use strict";
+export { ActionsTray } from './ActionsTray';

package/dist-es/ActionsTray/styles/{actionsTray.styles.jsx → actions_tray.styles.jsx}

@@ -1,4 +1,4 @@
-import { Button } from '../../FxButton';
+import { FxButton } from '../../FxButton';
 import { Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 const filterWhite = 'invert(99%) sepia(74%) saturate(0%) hue-rotate(253deg) brightness(108%) contrast(100%)';
@@ -46,7 +46,7 @@ export const Divider = styled('div')(({ theme }) => ({
     marginRight: 24,
     marginLeft: 24,
 }));
-export const ActionBtn = styled(Button)(({ theme, type }) => ({
+export const ActionBtn = styled(FxButton)(({ theme, type }) => ({
     height: 40,
     maxHeight: 40,
     borderRadius: 100,

package/dist-es/AggregationsBar/Aggregations.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import { structureReader } from './helpers/structureReader';
+export const AggregationsBar = (props) => {
+    const { structure, minWidth, mb, filter, initialValues } = props;
+    const { children, extended } = structure;
+    const { variables } = extended;
+    const { collapsed } = variables;
+    return (<Stack direction="row" spacing={1.5} sx={{
+            mb: mb ? mb : 0,
+            ['& div']: {
+                minWidth: minWidth,
+            },
+            ['& > span']: {
+                minWidth: minWidth,
+            },
+        }}>
+      {children.map((child, index) => {
+            return structureReader(child, filter, collapsed, initialValues);
+        })}
+    </Stack>);
+};

package/dist-es/AggregationsBar/helpers/structureReader.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Box, Stack, Divider } from '@mui/material';
+import { Score } from '../../Score';
+import { StatisticsBar } from '../../StatisticsBar';
+import { FxProgressCounter } from '../../FxProgressCounter';
+export const structureReader = (structure, filter, collapsed, initialValues) => {
+    const { extended, type } = structure;
+    switch (type) {
+        case 'aggregations_primary_container':
+            return structure.children.map((child, index) => child.input_type?.value === 'percentage' ? (<Score structure={child} key={index} filter={filter} value={initialValues?.score}/>) : child.input_type?.value === 'progress' ? (<FxProgressCounter structure={child} filter={filter} key={index} values={initialValues}/>) : (<Box sx={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: 'fit-content',
+                    padding: 2,
+                    borderRadius: 2,
+                    backgroundColor: extended?.variables?.bg || '#FFFFFF',
+                }}>
+            <StatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>
+          </Box>));
+        case 'aggregations_secondary_container':
+            return (<Stack direction="row" divider={<Divider orientation="vertical" flexItem/>} spacing={2} sx={{
+                    backgroundColor: extended?.variables?.bg || '#FFFFFF',
+                    borderRadius: '8px',
+                    padding: '24px 16px',
+                }}>
+          {structure.children.map((child, index) => {
+                    return <StatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>;
+                })}
+        </Stack>);
+    }
+};

package/dist-es/AggregationsBar/index.js

@@ -0,0 +1 @@
+export { AggregationsBar } from './Aggregations';

package/dist-es/AggregationsBar/operations/query.js

@@ -0,0 +1,63 @@
+import { gql } from 'graphql-tag';
+export const STRUCTURES = gql `
+  query STRUCTURES {
+    structure(where: { name: "aggregations_invoice" }) {
+      _id
+      bundle_name
+      name
+      title
+      type
+      input_type {
+        name
+        value
+      }
+      readable_id
+      extended {
+        format
+        gql_operation
+        title_path
+        object_path
+        filter
+        variables
+      }
+      children(sort: { index: 1 }) {
+        _id
+        name
+        title
+        type
+        input_type {
+          name
+          value
+        }
+        readable_id
+        extended {
+          format
+          gql_operation
+          title_path
+          object_path
+          filter
+          variables
+        }
+        children(sort: { index: 1 }) {
+          _id
+          name
+          title
+          type
+          input_type {
+            name
+            value
+          }
+          readable_id
+          extended {
+            format
+            gql_operation
+            title_path
+            object_path
+            filter
+            variables
+          }
+        }
+      }
+    }
+  }
+`;

package/dist-es/AsyncDropdown/AsyncDropdown.jsx

@@ -0,0 +1,228 @@
+import _ from 'lodash';
+import { Close as CloseIcon, CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon, KeyboardArrowDown as ArrowIcon } from '@mui/icons-material';
+import { gql } from 'graphql-tag';
+import { useLazyQuery } from '@apollo/client';
+import { titleCase } from '@fixefy/fixefy-ui-utils';
+import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
+import { Button, Checkbox, CircularProgress, useAutocomplete, useTheme, Typography } from '@mui/material';
+import { Root, InputWrapper, Listbox, StyledClose, StyledListBox, Loading } from './styles/dropdown.styles';
+const icon = <CheckBoxOutlineBlankIcon fontSize="small"/>;
+const checkedIcon = <CheckBoxIcon fontSize="small"/>;
+export const AsyncDropdown = React.forwardRef((props, parentRef) => {
+    const ref = useRef(null);
+    const theme = useTheme();
+    const [options, setOptions] = useState([]);
+    const [loadingData, setLoadingData] = useState(false);
+    const [isLastPage, setIsLastPage] = useState(false);
+    const [searchValue, setSearchValue] = useState(null);
+    const [hasClearBtn, setHasClearBtn] = useState(false);
+    const [page, setPage] = useState(1);
+    const [prevPage, setPrevPage] = useState(0);
+    const [pageSize, setPageSize] = useState(20);
+    const { debug, structure, onChange, onClear, renderOptions, fetcher, initialValue = {}, multiple, disabled, type = 'text', showSelectedValue, ...rest } = props;
+    const { name, extended, children } = structure;
+    const { search_path, variables } = extended;
+    const { method_name } = variables;
+    const [fetch, { data, error, loading }] = useLazyQuery(gql(fetcher.query), {
+        ...fetcher.queryOptions,
+        variables: {
+            ...fetcher.queryOptions.variables,
+            where: searchValue
+                ? {
+                    ...fetcher.queryOptions.variables.where,
+                    [search_path]: searchValue,
+                }
+                : {
+                    ...fetcher.queryOptions.variables.where,
+                },
+            skip: page * pageSize - pageSize,
+            limit: pageSize,
+        },
+    });
+    const labelOption = structure?.extended?.title_path ?? 'title';
+    const { getRootProps, getInputProps, getClearProps, getListboxProps, getOptionProps, groupedOptions, value, popupOpen, focused, setAnchorEl } = useAutocomplete({
+        ...rest,
+        defaultValue: initialValue,
+        options: options,
+        disableCloseOnSelect: !!multiple,
+        multiple,
+        disabled: disabled,
+        isOptionEqualToValue: (option, value) => {
+            return option._id === value._id;
+        },
+        getOptionLabel: (option) => titleCase(option[labelOption] ?? option.title),
+    });
+    const onPopupScroll = _.debounce(() => {
+        if (ref && ref.current) {
+            const threshHold = ref.current.scrollHeight / 2;
+            if (ref.current.scrollTop > threshHold && !loadingData && !isLastPage) {
+                setLoadingData(true);
+                setPage((prevPage) => prevPage + 1);
+                setPrevPage((prevPage) => prevPage + 1);
+            }
+        }
+    }, 800);
+    const createTitle = () => {
+        if (Array.isArray(value)) {
+            if (value && value.length) {
+                return `${titleCase(name)} (${value.length})`;
+            }
+        }
+        return titleCase(name);
+    };
+    const handleSearch = _.debounce((e) => {
+        setSearchValue(e.target.value);
+        setPage(1);
+    }, 300);
+    const handleChildrens = ({ structure, ...rest }) => {
+        const { type, children } = structure;
+        debug === true && console.log('handleChildrens', structure);
+        switch (type) {
+            case 'dropdownOptions':
+            case 'dropdown_options': {
+                children.map((child) => {
+                    return handleChildrens({
+                        structure: child,
+                        ...rest,
+                    });
+                });
+                break;
+            }
+            case 'clear': {
+                if (!hasClearBtn) {
+                    setHasClearBtn(true);
+                }
+                return <Button {...rest}>{structure.title}</Button>;
+            }
+            default: {
+                break;
+            }
+        }
+    };
+    const handleRenderOptions = () => {
+        debug === true && console.log('renderOptions: ', renderOptions);
+        if (renderOptions) {
+            return groupedOptions.map((option, index) => {
+                const CustomeComponent = renderOptions(option, index);
+                return React.cloneElement(CustomeComponent, {
+                    ...getOptionProps({ option, index }),
+                });
+            });
+        }
+        else {
+            switch (type) {
+                case 'checkbox': {
+                    return groupedOptions.map((option, index) => {
+                        const isSelected = getOptionProps({
+                            option,
+                            index,
+                        })['aria-selected'];
+                        return (<li {...getOptionProps({ option, index })}>
+                <Checkbox icon={icon} checked={Boolean(isSelected)} checkedIcon={checkedIcon} sx={{
+                                mr: 1,
+                                minWidth: 24,
+                                minHeight: 24,
+                                p: 0,
+                                ['& svg']: { fill: theme.palette.primary.light },
+                            }}/>
+                <Typography variant="table" color={theme.palette.typography.title}>
+                  {titleCase(option?.title)}
+                </Typography>
+              </li>);
+                    });
+                }
+                case 'text': {
+                    return groupedOptions.map((option, index) => {
+                        debug === true && console.log('renderOptions: ', structure?.extended?.title_path, option[structure?.extended?.title_path], options);
+                        return (<li {...getOptionProps({ option, index })}>
+                <Typography variant="table" color={theme.palette.typography.title}>
+                  {titleCase(option[structure?.extended?.title_path] ?? option.title)}
+                </Typography>
+              </li>);
+                    });
+                }
+                default: {
+                    return groupedOptions.map((option, index) => {
+                        debug === true && console.log('renderOptions: ', structure?.extended?.title_path, option[structure?.extended?.title_path], options);
+                        return (<li {...getOptionProps({ option, index })}>
+                <Typography variant="table" color={theme.palette.typography.title}>
+                  {titleCase(option[structure?.extended?.title_path] ?? option.title)}
+                </Typography>
+              </li>);
+                    });
+                }
+            }
+        }
+    };
+    useImperativeHandle(parentRef, () => ({
+        clearDDL: () => {
+            getClearProps()?.onClick(null);
+        },
+    }));
+    useEffect(() => {
+        if (ref && ref.current) {
+            ref.current.addEventListener('scroll', () => onPopupScroll());
+        }
+        return () => {
+            if (ref && ref.current) {
+                ref.current.removeEventListener('scroll', () => onPopupScroll());
+            }
+        };
+    }, [groupedOptions]);
+    useEffect(() => {
+        onChange && onChange(value, name);
+    }, [value]);
+    useEffect(() => {
+        if (popupOpen && !isLastPage && prevPage < page && !disabled) {
+            fetch();
+        }
+    }, [popupOpen]);
+    useEffect(() => {
+        if (!disabled) {
+            fetch();
+        }
+    }, []);
+    useEffect(() => {
+        if (data && !isLastPage && prevPage < page) {
+            const newOptions = data[method_name];
+            if (newOptions.length === 0 || newOptions.length < pageSize) {
+                setIsLastPage(true);
+            }
+            setOptions([...newOptions, ...options]);
+            setLoadingData(false);
+        }
+    }, [data]);
+    return (<Root>
+      <InputWrapper hasValue={!!(value && Object.keys(value).length)} disabled={disabled} sx={{
+            width: props.styles?.width ?? 180,
+            maxWidth: props.styles?.maxWidth ?? 300,
+        }} {...getRootProps()} ref={setAnchorEl} className={focused ? 'focused' : ''}>
+        <input {...getInputProps()} readOnly onChange={(e) => {
+            getInputProps()?.onChange(e);
+            handleSearch(e);
+        }} placeholder={createTitle()} value={showSelectedValue ? titleCase(value.title) : undefined}/>
+        {loading ? (<Loading>
+            <CircularProgress />
+          </Loading>) : (<ArrowIcon />)}
+      </InputWrapper>
+
+      {groupedOptions.length > 0 && !disabled ? (<Listbox {...getListboxProps()}>
+          <StyledListBox sx={{
+                ...props.styles?.menuSx,
+            }} hasClearBtn={children?.length} ref={ref}>
+            {handleRenderOptions()}
+          </StyledListBox>
+
+          {children && children.length ? (<StyledClose>
+              {handleChildrens({
+                    structure: children[0],
+                    onClick: (e) => {
+                        onClear && onClear();
+                        getClearProps()?.onClick(e);
+                    },
+                    startIcon: <CloseIcon />,
+                })}
+            </StyledClose>) : null}
+        </Listbox>) : null}
+    </Root>);
+});

package/dist-es/AsyncDropdown/helpers/helpers.js

@@ -0,0 +1,77 @@
+export const getJPart = (j, jsonPath, defaultValue) => {
+    if (isObjectValid(j) === false)
+        return defaultValue;
+    jsonPath = jsonPath.replace(/\[(\w+)\]/g, '.$1');
+    jsonPath = jsonPath.replace(/^\./, '');
+    let _isArrayValid = false;
+    let _isStringValid = false;
+    let currentPathPart;
+    let pathParts = jsonPath.split('.');
+    let isLoop = true;
+    for (let i = 0, n = pathParts.length; isLoop && i < n; ++i) {
+        currentPathPart = pathParts[i];
+        _isStringValid = isStringValid(j);
+        _isArrayValid = isArrayValid(j);
+        if (_isStringValid === true || _isArrayValid === true) {
+            if (_isStringValid === true) {
+                j = JSON.parse(j);
+            }
+            else {
+                j = j.reduce((acc, cur, idx, src) => {
+                    const innerJ = getJPart(cur, pathParts.slice(i).join('.'), defaultValue);
+                    if (isArrayValid(innerJ)) {
+                        acc.push(...innerJ);
+                    }
+                    else {
+                        acc.push({
+                            ...innerJ,
+                            value: innerJ._id,
+                        });
+                    }
+                    return acc;
+                }, []);
+                isLoop = false;
+            }
+        }
+        else {
+            if (currentPathPart in j) {
+                j = j[currentPathPart];
+            }
+            else {
+                j = defaultValue;
+                isLoop = false;
+            }
+        }
+    }
+    return j;
+};
+export const isArrayValid = (arr, minLength = 1, maxLength = 0) => {
+    let rv = isObjectValid(arr) &&
+        arr.length >= minLength &&
+        Object.prototype.toString.call(arr) == '[object Array]';
+    if (maxLength > 0) {
+        rv = rv && arr.length <= maxLength;
+    }
+    return rv;
+};
+export const isObjectValid = (obj, isCheckKeys = false) => {
+    let rv = typeof obj !== 'undefined' && obj !== null;
+    if (isCheckKeys) {
+        rv = rv && Object.keys(obj).length > 0;
+    }
+    return rv;
+};
+export const isStringValid = (str, minLength = null, maxLength = null, isValidateType = true) => {
+    let rv = isObjectValid(str) && str.toString().length > 0 && (isValidateType ? typeof str === 'string' : true);
+    if (rv === false)
+        return false;
+    if (minLength && isNaN(minLength) === false && minLength > 0) {
+        rv = rv && str.toString().length >= minLength;
+    }
+    if (rv === false)
+        return false;
+    if (maxLength && isNaN(maxLength) === false && maxLength > 0) {
+        rv = rv && str.toString().length <= maxLength;
+    }
+    return rv;
+};

package/dist-es/AsyncDropdown/index.js

@@ -0,0 +1 @@
+export { AsyncDropdown } from './AsyncDropdown';

package/dist-es/AsyncDropdown/styles/dropdown.styles.jsx

@@ -0,0 +1,143 @@
+import { styled } from '@mui/material/styles';
+export const Root = styled('div')(() => ({
+    color: 'rgba(0,0,0,.85)',
+    fontSize: 14,
+}));
+export const Label = styled('label')(() => ({
+    padding: '0 0 4px',
+    lineHeight: '1.5',
+    display: 'block',
+}));
+export const Loading = styled('div')(() => ({
+    width: 30,
+    height: 30,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ['& span']: {
+        width: '20px !important',
+        height: '20px !important',
+    },
+}));
+export const InputWrapper = styled('div')(({ theme, hasValue, disabled }) => {
+    const defaultBorder = `1px solid ${theme.palette.greyscale[200]}`;
+    const hasValueBorder = `1px solid ${theme.palette.primary[500]}`;
+    const disabledBorder = `1px solid ${theme.palette.greyscale[200]}`;
+    const activeBorder = `1px solid ${theme.palette.primary[500]}`;
+    return {
+        border: disabled ? disabledBorder : hasValue ? hasValueBorder : defaultBorder,
+        backgroundColor: theme.palette.common.white,
+        borderRadius: 4,
+        padding: 1,
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        ['&:hover']: {
+            border: disabled ? disabledBorder : activeBorder,
+            borderRadius: 4,
+        },
+        ['&:focus']: {
+            border: disabled ? disabledBorder : activeBorder,
+            borderRadius: 4,
+        },
+        ['& > svg']: {
+            color: disabled ? theme.palette.greyscale[300] : theme.palette.primary['500'],
+            marginRight: 8,
+        },
+        ['& input']: {
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            backgroundColor: theme.palette.common.white,
+            color: theme.palette.typography.title,
+            height: 36,
+            boxSizing: 'border-box',
+            padding: '4px 6px 4px 16px',
+            width: 0,
+            minWidth: 30,
+            flexGrow: 1,
+            border: 0,
+            margin: 0,
+            outline: 0,
+            ...theme.typography.body1,
+            lineHeight: '20px',
+            ['& ::placeholder']: {
+                color: hasValue ? theme.palette.typography.title : theme.palette.greyscale[400],
+            },
+        },
+    };
+});
+export const Listbox = styled('ul')(({ theme }) => ({
+    margin: 0,
+    padding: 0,
+    position: 'absolute',
+    listStyle: 'none',
+    backgroundColor: theme.palette.common.white,
+    overflow: 'auto',
+    maxHeight: 250,
+    minHeight: 250,
+    borderRadius: 4,
+    boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
+    zIndex: 1,
+    maxWidth: 270,
+    minWidth: 270,
+    top: 48,
+    left: -42,
+    ['& div']: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+    },
+}));
+export const StyledClose = styled('div')(() => ({
+    position: 'absolute',
+    bottom: 0,
+}));
+export const StyledListBox = styled('ul')(({ theme, hasClearBtn }) => ({
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+    backgroundColor: theme.palette.common.white,
+    overflow: 'auto',
+    maxHeight: hasClearBtn ? 190 : 230,
+    zIndex: 1,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflowX: 'hidden',
+    paddingTop: 8,
+    paddingBottom: 8,
+    maxWidth: 270,
+    minWidth: 270,
+    ['& div']: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+    },
+    ['& li']: {
+        paddingRight: 16,
+        paddingLeft: 16,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        height: 40,
+        cursor: 'pointer',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        maxWidth: 270,
+        minWidth: 270,
+    },
+    ['& li:hover']: {
+        backgroundColor: '#F6F9FA',
+    },
+    ["& li[aria-selected='true']"]: {
+        fontWeight: 900,
+        backgroundColor: '#F6F9FA',
+    },
+    ["& li[data-focus='true']"]: {
+        backgroundColor: '#F6F9FA',
+        cursor: 'pointer',
+        ['& svg ']: {
+            color: 'currentColor',
+        },
+    },
+}));

package/dist-es/FxAvatar/FxAvatar.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { titleCase } from '@fixefy/fixefy-ui-utils';
+import { stringToColor } from './helpers/stringToColor';
+import { AvatarWrapper, StyledAvatar, StyledMoreAvatar, AvatarGroup, EditIcon, FxTooltip } from './styles/avatar.styles';
+export function FxAvatar({ users, max = 5, isEditable = false, onEdit }) {
+    const [backgroundcolors, setBackgroundColors] = useState({});
+    const avatars = users.length > max ? users.slice(0, max - 1) : users;
+    const isMoreThanMax = users.length > max;
+    return (<AvatarWrapper>
+      <AvatarGroup>
+        {avatars.map((user, index) => {
+            const userName = user.first_name + ' ' + user.last_name;
+            return (<FxTooltip key={index} title={titleCase(userName)}>
+              <StyledAvatar sx={{
+                    backgroundColor: backgroundcolors[userName]
+                        ? backgroundcolors[userName]
+                        : stringToColor(userName, (color) => {
+                            setBackgroundColors({
+                                ...backgroundcolors,
+                                [userName]: color,
+                            });
+                        }),
+                }} src={user.image_url} alt={userName}>
+                {titleCase(userName.slice(0, 1))}
+              </StyledAvatar>
+            </FxTooltip>);
+        })}
+        {isMoreThanMax && <StyledMoreAvatar>{`+${users.length - max + 1}`}</StyledMoreAvatar>}
+      </AvatarGroup>
+      {isEditable && <EditIcon onClick={onEdit && onEdit}/>}
+    </AvatarWrapper>);
+}

package/dist-es/FxAvatar/helpers/stringToColor.js

@@ -0,0 +1,13 @@
+export const stringToColor = (string, callBack) => {
+    let hash = 0;
+    let color = '#';
+    for (let i = 0; i < string.length; i += 1) {
+        hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    for (let i = 0; i < 3; i += 1) {
+        const value = (hash >> (i * 8)) & 0xff;
+        color += `00${value.toString(16)}`.substr(-2);
+    }
+    callBack && callBack(color);
+    return color;
+};

package/dist-es/FxAvatar/index.js

@@ -0,0 +1 @@
+export { FxAvatar } from './FxAvatar';