@fixefy/fixefy-ui-components 0.0.4 → 0.0.6

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

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledListBox = exports.StyledClose = exports.Listbox = exports.InputWrapper = exports.Loading = exports.Label = exports.Root = void 0;
+const styles_1 = require("@mui/material/styles");
+exports.Root = (0, styles_1.styled)('div')(() => ({
+    color: 'rgba(0,0,0,.85)',
+    fontSize: 14,
+}));
+exports.Label = (0, styles_1.styled)('label')(() => ({
+    padding: '0 0 4px',
+    lineHeight: '1.5',
+    display: 'block',
+}));
+exports.Loading = (0, styles_1.styled)('div')(() => ({
+    width: 30,
+    height: 30,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ['& span']: {
+        width: '20px !important',
+        height: '20px !important',
+    },
+}));
+exports.InputWrapper = (0, styles_1.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']: Object.assign(Object.assign({ 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],
+            } }),
+    };
+});
+exports.Listbox = (0, styles_1.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',
+    },
+}));
+exports.StyledClose = (0, styles_1.styled)('div')(() => ({
+    position: 'absolute',
+    bottom: 0,
+}));
+exports.StyledListBox = (0, styles_1.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-cjs/FxAvatar/FxAvatar.jsx

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxAvatar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const stringToColor_1 = require("./helpers/stringToColor");
+const avatar_styles_1 = require("./styles/avatar.styles");
+function FxAvatar({ users, max = 5, isEditable = false, onEdit }) {
+    const [backgroundcolors, setBackgroundColors] = (0, react_1.useState)({});
+    const avatars = users.length > max ? users.slice(0, max - 1) : users;
+    const isMoreThanMax = users.length > max;
+    return (<avatar_styles_1.AvatarWrapper>
+      <avatar_styles_1.AvatarGroup>
+        {avatars.map((user, index) => {
+            const userName = user.first_name + ' ' + user.last_name;
+            return (<avatar_styles_1.FxTooltip key={index} title={(0, fixefy_ui_utils_1.titleCase)(userName)}>
+              <avatar_styles_1.StyledAvatar sx={{
+                    backgroundColor: backgroundcolors[userName]
+                        ? backgroundcolors[userName]
+                        : (0, stringToColor_1.stringToColor)(userName, (color) => {
+                            setBackgroundColors(Object.assign(Object.assign({}, backgroundcolors), { [userName]: color }));
+                        }),
+                }} src={user.image_url} alt={userName}>
+                {(0, fixefy_ui_utils_1.titleCase)(userName.slice(0, 1))}
+              </avatar_styles_1.StyledAvatar>
+            </avatar_styles_1.FxTooltip>);
+        })}
+        {isMoreThanMax && <avatar_styles_1.StyledMoreAvatar>{`+${users.length - max + 1}`}</avatar_styles_1.StyledMoreAvatar>}
+      </avatar_styles_1.AvatarGroup>
+      {isEditable && <avatar_styles_1.EditIcon onClick={onEdit && onEdit}/>}
+    </avatar_styles_1.AvatarWrapper>);
+}
+exports.FxAvatar = FxAvatar;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringToColor = void 0;
+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;
+};
+exports.stringToColor = stringToColor;

package/dist-cjs/FxAvatar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxAvatar = void 0;
+var FxAvatar_1 = require("./FxAvatar");
+Object.defineProperty(exports, "FxAvatar", { enumerable: true, get: function () { return FxAvatar_1.FxAvatar; } });

package/dist-cjs/FxAvatar/styles/avatar.styles.jsx

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxTooltip = exports.EditIcon = exports.StyledMoreAvatar = exports.StyledAvatar = exports.AvatarGroup = exports.AvatarWrapper = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const material_2 = require("@mui/material");
+const Tooltip_1 = tslib_1.__importDefault(require("@mui/material/Tooltip"));
+const EditOutlined_1 = tslib_1.__importDefault(require("@mui/icons-material/EditOutlined"));
+require("@fixefy/fxutils.page_context");
+exports.AvatarWrapper = (0, styles_1.styled)("div")(() => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: "row",
+}));
+exports.AvatarGroup = (0, styles_1.styled)("div")(() => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    "&>:first-of-type": {
+        marginLeft: 0,
+    },
+}));
+exports.StyledAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
+    width: 32,
+    height: 32,
+    border: `2px solid ${theme.palette.common.white}`,
+    marginLeft: "-8px",
+    fontFamily: "Open Sans",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: 14,
+    lineHeight: "20px",
+    letterSpacing: "0.15px",
+}));
+exports.StyledMoreAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
+    width: 32,
+    height: 32,
+    border: `2px solid ${theme.palette.common.white}`,
+    marginLeft: "-8px",
+    fontFamily: "Open Sans",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: 11,
+    lineHeight: "16px",
+    letterSpacing: "0.1px",
+    color: theme.palette.greyscale.dark,
+    backgroundColor: theme.palette.greyscale.light,
+}));
+exports.EditIcon = (0, styles_1.styled)(EditOutlined_1.default)(({ theme }) => ({
+    cursor: "pointer",
+    color: theme.palette.primary.light,
+}));
+exports.FxTooltip = (0, styles_1.styled)((_a) => {
+    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
+    return (<Tooltip_1.default {...props} placement="top" arrow classes={{ popper: className }}/>);
+})(({ theme }) => ({
+    [`& .${material_2.tooltipClasses.arrow}`]: {
+        color: theme.palette.primary.main,
+    },
+    [`& .${material_2.tooltipClasses.tooltip}`]: {
+        backgroundColor: theme.palette.primary.main,
+        padding: 12,
+        fontFamily: "Open Sans",
+        fontStyle: "normal",
+        fontWeight: "normal",
+        fontSize: 14,
+        lineHeight: "20px",
+        textAlign: "center",
+        letterSpacing: "0.15px",
+    },
+}));

package/dist-cjs/FxButton/{button.jsx → FxButton.jsx}

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+exports.FxButton = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const button_styles_1 = require("./styles/button.styles");
-function Button(_a) {
+function FxButton(_a) {
     var { type = 'primary', children } = _a, rest = tslib_1.__rest(_a, ["type", "children"]);
     return <button_styles_1.ButtonStyled {...rest}>{children}</button_styles_1.ButtonStyled>;
 }
-exports.Button = Button;
+exports.FxButton = FxButton;

package/dist-cjs/FxButton/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-var button_1 = require("./button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+exports.FxButton = void 0;
+var FxButton_1 = require("./FxButton");
+Object.defineProperty(exports, "FxButton", { enumerable: true, get: function () { return FxButton_1.FxButton; } });

package/dist-cjs/FxChip/FxChip.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxChip = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const chip_styles_1 = require("./styles/chip.styles");
+const FxChip = (props) => {
+    const { status, label, type = 'status', scoreValue = 0, minimized = false, variant = 'outlined', onClick } = props;
+    const newStatus = status ? status.split(' ').join('_') : status;
+    const value = typeof label === 'number' ? label.toFixed(2) : label;
+    return type === 'status' ? <chip_styles_1.StatusChipStyled status={newStatus} label={(0, fixefy_ui_utils_1.titleCase)(value)} variant={variant} onClick={onClick}/> : <chip_styles_1.ScoreChipStyled score={scoreValue} scoreLabel={(0, fixefy_ui_utils_1.getScoreColor)(scoreValue)} label={(0, fixefy_ui_utils_1.titleCase)(value)} minimized={minimized} variant={variant} onClick={onClick}/>;
+};
+exports.FxChip = FxChip;

package/dist-cjs/FxChip/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxChip = void 0;
+var FxChip_1 = require("./FxChip");
+Object.defineProperty(exports, "FxChip", { enumerable: true, get: function () { return FxChip_1.FxChip; } });

package/dist-cjs/FxChip/styles/chip.styles.jsx

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusChipStyled = exports.ScoreChipStyled = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+require("@fixefy/fxutils.page_context");
+exports.ScoreChipStyled = (0, styles_1.styled)(material_1.Chip)(({ theme, scoreLabel, minimized }) => {
+    const color = theme.palette.score[scoreLabel];
+    return {
+        height: 20,
+        minWidth: minimized ? 35 : 80,
+        maxWidth: 120,
+        backgroundColor: color,
+        ['& .MuiChip-label']: {
+            color: theme.palette.common.white,
+            fontSize: 9,
+            fontWeight: 600,
+            paddingLeft: minimized ? 0 : 'inherit',
+            paddingRight: minimized ? 0 : 'inherit',
+        },
+    };
+});
+exports.StatusChipStyled = (0, styles_1.styled)(material_1.Chip)(({ theme, status, variant }) => {
+    let backgroundColor, border, labelColor;
+    if (theme.palette.status[status]) {
+        if (variant === 'filled') {
+            backgroundColor = theme.palette.status[status]['border'];
+            labelColor = theme.palette.common.white;
+        }
+        else {
+            backgroundColor = theme.palette.status[status]['background'];
+        }
+        border = theme.palette.status[status]['border'];
+    }
+    return {
+        height: 20,
+        minWidth: 80,
+        maxWidth: 120,
+        ['& .MuiChip-label']: {
+            fontSize: 9,
+            fontWeight: 600,
+            lineHeight: '12px',
+            color: labelColor ? labelColor : theme.palette.statistics.label,
+        },
+        backgroundColor,
+        border: `1px solid ${border}`,
+    };
+});

package/dist-cjs/FxIcon/FxIcon.jsx

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const content_1 = require("./content");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const MUIIcons = tslib_1.__importStar(require("@mui/icons-material"));
+const iconsModule = [];
+const FxIcon = ({ className, color, fontSize, icon, height, sx, root, width }) => {
+    if (!icon)
+        throw Error('Provide a property `icon`');
+    let rv;
+    const splittedPath = icon.split('/');
+    const iconWithoutPath = (0, fixefy_ui_utils_1.toPascalCase)(splittedPath[splittedPath.length - 1]);
+    const name = (0, fixefy_ui_utils_1.toPascalCase)(icon);
+    if (iconsModule[iconWithoutPath]) {
+        rv = <content_1.DynamicIcon icon={iconsModule[iconWithoutPath]} sx={sx}/>;
+    }
+    else if (MUIIcons[iconWithoutPath]) {
+        const MUIIcon = MUIIcons[iconWithoutPath];
+        rv = <MUIIcon className={className} color={color} sx={Object.assign(Object.assign({}, sx), { fontSize })}/>;
+    }
+    else {
+        rv = <content_1.LazyIcon icon={icon} sx={sx} width={width} height={height}/>;
+    }
+    return rv;
+};
+exports.FxIcon = FxIcon;

package/dist-cjs/FxIcon/content/dynamic_icon.jsx

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const DynamicIcon = ({ icon: IconComponent, sx }) => (IconComponent ? <IconComponent sx={sx}/> : null);
+exports.DynamicIcon = DynamicIcon;

package/dist-cjs/FxIcon/content/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyIcon = exports.DynamicIcon = void 0;
+var dynamic_icon_1 = require("./dynamic_icon");
+Object.defineProperty(exports, "DynamicIcon", { enumerable: true, get: function () { return dynamic_icon_1.DynamicIcon; } });
+var lazy_icon_1 = require("./lazy_icon");
+Object.defineProperty(exports, "LazyIcon", { enumerable: true, get: function () { return lazy_icon_1.LazyIcon; } });

package/dist-cjs/FxIcon/content/lazy_icon.jsx

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const image_1 = tslib_1.__importDefault(require("next/image"));
+const iconsModule = [];
+const LazyIcon = ({ icon, root, sx, width, height }) => {
+    const [isError, setError] = (0, react_1.useState)(false);
+    const handleError = (isError) => setError(isError);
+    if (isError) {
+        return (<material_1.Avatar>
+        <material_1.Typography fontSize={29} fontWeight={600}>
+          {(0, fixefy_ui_utils_1.toInitials)(icon)}
+        </material_1.Typography>
+      </material_1.Avatar>);
+    }
+    return <image_1.default alt={icon} width={width} height={height} loader={(obj) => (0, fixefy_ui_utils_1.imageLoader)(Object.assign(Object.assign({}, obj), { root }))} src={icon} onLoad={() => handleError(false)} onError={() => handleError(true)}/>;
+};
+exports.LazyIcon = LazyIcon;

package/dist-cjs/FxIcon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var FxIcon_1 = require("./FxIcon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return FxIcon_1.FxIcon; } });

package/dist-cjs/FxModal/FxModal.jsx

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxModal = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const modal_style_1 = require("./styles/modal.style");
+const FxDialogTitle = (props) => {
+    const { children } = props, other = tslib_1.__rest(props, ["children"]);
+    return <modal_style_1.StyledDialogTitle {...other}>{children}</modal_style_1.StyledDialogTitle>;
+};
+const FxInlineDialogTitle = (props) => {
+    const { children } = props, other = tslib_1.__rest(props, ["children"]);
+    return <modal_style_1.StyledInlineDialogTitle {...other}>{children}</modal_style_1.StyledInlineDialogTitle>;
+};
+const IconTitle = ({ icon, title, inline }) => {
+    const renderObject = inline ? (<material_1.Box sx={{ display: 'flex', alignItems: 'center' }}>
+      {icon}
+      <FxInlineDialogTitle id="customized-dialog-title">{title}</FxInlineDialogTitle>
+    </material_1.Box>) : (<>
+      {icon && icon}
+      {title && <FxDialogTitle id="customized-dialog-title">{title}</FxDialogTitle>}
+    </>);
+    return renderObject;
+};
+const FxModal = (_a) => {
+    var { isOpen = false, isIconTitleInline = false, icon, onClose, children, title, actions } = _a, rest = tslib_1.__rest(_a, ["isOpen", "isIconTitleInline", "icon", "onClose", "children", "title", "actions"]);
+    return (<div>
+      <modal_style_1.FxDialog {...rest} fullWidth onClose={onClose} aria-labelledby="customized-dialog-title" open={isOpen}>
+        <IconTitle icon={icon} title={title} inline={isIconTitleInline}/>
+        <material_1.DialogContent>{children}</material_1.DialogContent>
+        {actions && <modal_style_1.DialogActionsStyled>{actions}</modal_style_1.DialogActionsStyled>}
+      </modal_style_1.FxDialog>
+    </div>);
+};
+exports.FxModal = FxModal;

package/dist-cjs/FxModal/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxModal = void 0;
+var FxModal_1 = require("./FxModal");
+Object.defineProperty(exports, "FxModal", { enumerable: true, get: function () { return FxModal_1.FxModal; } });

package/dist-cjs/FxModal/styles/modal.style.jsx

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogActionsStyled = exports.StyledInlineDialogTitle = exports.StyledDialogTitle = exports.FxDialog = void 0;
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+exports.FxDialog = (0, styles_1.styled)(material_1.Dialog)(() => ({
+    '& .MuiDialog-paper': {
+        borderRadius: 8,
+        padding: '24px',
+        maxWidth: 'fit-content',
+    },
+    '& .MuiDialogContent-root': {
+        padding: 0,
+    },
+    '& .MuiDialogActions-root': {
+        margin: '24px 0 0 0',
+        padding: 0,
+    },
+}));
+exports.StyledDialogTitle = (0, styles_1.styled)(material_1.DialogTitle)(() => ({
+    fontSize: 14,
+    fontWeight: 900,
+    margin: '8px 0',
+}));
+exports.StyledInlineDialogTitle = (0, styles_1.styled)(material_1.DialogTitle)(() => ({
+    fontSize: 19,
+    fontWeight: 600,
+    color: '#568793',
+    margin: '8px 16px',
+    padding: 0,
+}));
+exports.DialogActionsStyled = (0, styles_1.styled)(material_1.DialogActions)(({ theme }) => ({
+    justifyContent: 'flex-start',
+}));

package/dist-cjs/FxNotes/FxNotes.jsx

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxNotes = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const notes_styles_1 = require("./styles/notes.styles");
+const queries_1 = require("./operations/queries");
+const client_1 = require("@apollo/client");
+const stringToColor_1 = require("./helpers/stringToColor");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const FxNotes = ({ notes, onChange, sendOnEnter = true, onSend }) => {
+    const [comment, setComment] = (0, react_1.useState)('');
+    const [backgroundcolors, setBackgroundColors] = (0, react_1.useState)({});
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const inputRef = (0, react_1.useRef)();
+    const { data, loading } = (0, client_1.useQuery)(queries_1.ME);
+    const { me } = data;
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleEnterKeyPressed = () => {
+        setComment((prevState) => {
+            if (prevState) {
+                onSend &&
+                    onSend({
+                        created_at: new Date().getTime(),
+                        created_by: me.username,
+                        text: prevState,
+                    });
+            }
+            return '';
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        onChange && onChange(comment);
+    }, [comment]);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current) {
+            inputRef.current.addEventListener('keyup', (event) => {
+                if (event.keyCode === 13) {
+                    event.preventDefault();
+                    handleEnterKeyPressed();
+                }
+            });
+        }
+        return inputRef && inputRef.current && inputRef.current.removeEventListener('keyup', handleEnterKeyPressed);
+    }, []);
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popover' : undefined;
+    return (<notes_styles_1.CommentsContainer>
+      
+      <notes_styles_1.CommentWrapper>
+        <notes_styles_1.StyledAvatar sx={{
+            backgroundColor: backgroundcolors[me.username]
+                ? backgroundcolors[me.username]
+                : (0, stringToColor_1.stringToColor)(me.username, (color) => {
+                    setBackgroundColors(Object.assign(Object.assign({}, backgroundcolors), { [me.username]: color }));
+                }),
+        }} src={me && me.image_url}>
+          {me && (0, fixefy_ui_utils_1.titleCase)(me.username.slice(0, 1))}
+        </notes_styles_1.StyledAvatar>
+        <notes_styles_1.CommentInput type="text" value={comment} ref={inputRef} onChange={(e) => {
+            setComment(e.currentTarget.value);
+        }}/>
+        
+      </notes_styles_1.CommentWrapper>
+      {notes && notes.length ? (<notes_styles_1.CommentsWrapper>
+          <notes_styles_1.CommentsScrollWrapper>
+            {notes
+                .slice()
+                .reverse()
+                .map((comment, index) => {
+                return (<notes_styles_1.UserCommentWrapper key={index}>
+                    <notes_styles_1.StyledAvatar sx={{
+                        backgroundColor: backgroundcolors[comment.created_by]
+                            ? backgroundcolors[comment.created_by]
+                            : (0, stringToColor_1.stringToColor)(comment.created_by, (color) => {
+                                setBackgroundColors(Object.assign(Object.assign({}, backgroundcolors), { [comment.created_by]: color }));
+                            }),
+                    }}>
+                      {(0, fixefy_ui_utils_1.titleCase)(comment.created_by.slice(0, 1))}
+                    </notes_styles_1.StyledAvatar>
+                    <notes_styles_1.UserComment>
+                      <notes_styles_1.CommentUserTitle>{comment.created_by}</notes_styles_1.CommentUserTitle>
+                      <notes_styles_1.CommentDate>
+                        {(0, fixefy_ui_utils_1.normalizeTimestamp)(comment.created_at, {
+                        dateOnly: true,
+                    })}
+                      </notes_styles_1.CommentDate>
+                      <notes_styles_1.CommentDesc>{comment.text}</notes_styles_1.CommentDesc>
+                    </notes_styles_1.UserComment>
+                  </notes_styles_1.UserCommentWrapper>);
+            })}
+          </notes_styles_1.CommentsScrollWrapper>
+        </notes_styles_1.CommentsWrapper>) : null}
+    </notes_styles_1.CommentsContainer>);
+};
+exports.FxNotes = FxNotes;

package/dist-cjs/FxNotes/helpers/stringToColor.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringToColor = void 0;
+const stringToColor = (string, callBack) => {
+    let hash = 0;
+    let color = '#';
+    if (!string) {
+        return '#000';
+    }
+    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;
+};
+exports.stringToColor = stringToColor;

package/dist-cjs/FxNotes/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxNotes = void 0;
+var FxNotes_1 = require("./FxNotes");
+Object.defineProperty(exports, "FxNotes", { enumerable: true, get: function () { return FxNotes_1.FxNotes; } });