@fixefy/fixefy-ui-components 0.0.10 → 0.0.13

package/dist-es/FxIcon/FxIcon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DynamicIcon, LazyIcon } from './content';
+import { toPascalCase } from '@fixefy/fixefy-ui-utils';
+import * as MUIIcons from '@mui/icons-material';
+// importing all the local icons - in the future should be removed to CDN server
+const iconsModule = [];
+export const FxIcon = ({ className, color, fontSize, icon, height, sx, width }) => {
+    if (!icon)
+        throw Error('Provide a property `icon`');
+    let rv;
+    const splittedPath = icon.split('/');
+    const iconWithoutPath = toPascalCase(splittedPath[splittedPath.length - 1]);
+    // const name = toPascalCase(icon)
+    if (iconsModule[iconWithoutPath]) {
+        rv = React.createElement(DynamicIcon, { icon: iconsModule[iconWithoutPath], sx: sx });
+        // @ts-ignore
+    }
+    else if (MUIIcons[iconWithoutPath]) {
+        // @ts-ignore
+        const MUIIcon = MUIIcons[iconWithoutPath];
+        rv = React.createElement(MUIIcon, { className: className, color: color, sx: { ...sx, fontSize } });
+    }
+    else {
+        rv = React.createElement(LazyIcon, { icon: icon, sx: sx, width: width, height: height });
+    }
+    return rv;
+};
+//# sourceMappingURL=FxIcon.js.map

package/dist-es/FxIcon/FxIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FxIcon.js","sourceRoot":"","sources":["../../src/FxIcon/FxIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAA;AAE/C,gFAAgF;AAChF,MAAM,WAAW,GAAU,EAAE,CAAA;AAE7B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAiB,EAAE,EAAE;IAC/F,IAAI,CAAC,IAAI;QAAE,MAAM,KAAK,CAAC,2BAA2B,CAAC,CAAA;IAEnD,IAAI,EAAe,CAAA;IAEnB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACpC,MAAM,eAAe,GAAQ,YAAY,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;IAEhF,kCAAkC;IAElC,IAAI,WAAW,CAAC,eAAe,CAAC,EAAE;QAChC,EAAE,GAAG,oBAAC,WAAW,IAAC,IAAI,EAAE,WAAW,CAAC,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,GAAI,CAAA;QAChE,aAAa;KACd;SAAM,IAAI,QAAQ,CAAC,eAAe,CAAC,EAAE;QACpC,aAAa;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;QACzC,EAAE,GAAG,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAI,CAAA;KAC9E;SAAM;QACL,EAAE,GAAG,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CAAA;KACpE;IAED,OAAO,EAAE,CAAA;AACX,CAAC,CAAA"}

package/dist-es/FxIcon/content/dynamic_icon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const DynamicIcon: ({ icon: IconComponent, sx }: {
+    icon: any;
+    sx: any;
+}) => React.JSX.Element | null;

package/dist-es/FxIcon/content/dynamic_icon.js

@@ -0,0 +1,4 @@
+import React from 'react';
+// @ts-ignore
+export const DynamicIcon = ({ icon: IconComponent, sx }) => (IconComponent ? React.createElement(IconComponent, { sx: sx }) : null);
+//# sourceMappingURL=dynamic_icon.js.map

package/dist-es/FxIcon/content/dynamic_icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic_icon.js","sourceRoot":"","sources":["../../../src/FxIcon/content/dynamic_icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,aAAa;AACb,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,EAAE,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA"}

package/dist-es/FxIcon/content/index.d.ts

@@ -0,0 +1,2 @@
+export { DynamicIcon } from "./dynamic_icon";
+export { LazyIcon } from "./lazy_icon";

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

@@ -0,0 +1,3 @@
+export { DynamicIcon } from "./dynamic_icon";
+export { LazyIcon } from "./lazy_icon";
+//# sourceMappingURL=index.js.map

package/dist-es/FxIcon/content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FxIcon/content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist-es/FxIcon/content/lazy_icon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SxProps } from '@mui/system';
+export declare const LazyIcon: ({ icon, root, width, height, }: {
+    icon: string;
+    root?: string | undefined;
+    width?: number | `${number}` | undefined;
+    height?: number | `${number}` | undefined;
+    sx?: SxProps | undefined;
+}) => React.JSX.Element;

package/dist-es/FxIcon/content/lazy_icon.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { Avatar, Typography } from '@mui/material';
+import { imageLoader, toInitials } from '@fixefy/fixefy-ui-utils';
+import Image from 'next/image';
+// importing all the local icons - in the future should be removed to CDN server
+// const iconsModule = []
+export const LazyIcon = ({ icon, root, width, height, }) => {
+    const [isError, setError] = useState(false);
+    const handleError = (isError) => setError(isError);
+    if (isError) {
+        return (React.createElement(Avatar, null,
+            React.createElement(Typography, { fontSize: 29, fontWeight: 600 }, toInitials(icon))));
+    }
+    return (React.createElement(Image, { alt: icon, width: width, height: height, loader: (obj) => imageLoader({ ...obj, root }), src: icon, onLoad: () => handleError(false), onError: () => handleError(true) }));
+};
+//# sourceMappingURL=lazy_icon.js.map

package/dist-es/FxIcon/content/lazy_icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy_icon.js","sourceRoot":"","sources":["../../../src/FxIcon/content/lazy_icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEjE,OAAO,KAAK,MAAM,YAAY,CAAA;AAE9B,gFAAgF;AAChF,yBAAyB;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,GAOP,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAE3D,IAAI,OAAO,EAAE;QACX,OAAO,CACL,oBAAC,MAAM;YACL,oBAAC,UAAU,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,IACtC,UAAU,CAAC,IAAI,CAAC,CACN,CACN,CACV,CAAA;KACF;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC,EAC9C,GAAG,EAAE,IAAI,EACT,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,GAChC,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist-es/FxIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { FxIcon } from './FxIcon';
+export { IconPropsType } from './icon_types';

package/dist-es/FxIcon/index.js

@@ -0,0 +1,2 @@
+export { FxIcon } from './FxIcon';
+//# sourceMappingURL=index.js.map

package/dist-es/FxIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FxIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}

package/dist-es/FxModal/FxModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalPropsType } from '.';
+export declare const FxModal: ({ isOpen, isIconTitleInline, icon, onClose, children, title, actions, ...rest }: ModalPropsType) => React.JSX.Element;

package/dist-es/FxModal/FxModal.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box, DialogContent } from '@mui/material';
+import { FxDialog, DialogActionsStyled, StyledDialogTitle, StyledInlineDialogTitle } from './styles/modal.style';
+//////////////
+const FxDialogTitle = (props) => {
+    const { children, ...other } = props;
+    return React.createElement(StyledDialogTitle, { ...other }, children);
+};
+const FxInlineDialogTitle = (props) => {
+    const { children, ...other } = props;
+    return React.createElement(StyledInlineDialogTitle, { ...other }, children);
+};
+const IconTitle = ({ icon, title, inline }) => {
+    const renderObject = inline ? (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+        icon,
+        React.createElement(FxInlineDialogTitle, { id: "customized-dialog-title" }, title))) : (React.createElement(React.Fragment, null,
+        icon && icon,
+        title && React.createElement(FxDialogTitle, { id: "customized-dialog-title" }, title)));
+    return renderObject;
+};
+export const FxModal = ({ isOpen = false, isIconTitleInline = false, icon, onClose, children, title, actions, ...rest }) => {
+    return (React.createElement("div", null,
+        React.createElement(FxDialog, { ...rest, fullWidth: true, onClose: onClose, "aria-labelledby": "customized-dialog-title", open: isOpen },
+            React.createElement(IconTitle, { icon: icon, title: title, inline: isIconTitleInline }),
+            React.createElement(DialogContent, null, children),
+            actions && React.createElement(DialogActionsStyled, null, actions))));
+};
+//# sourceMappingURL=FxModal.js.map

package/dist-es/FxModal/FxModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FxModal.js","sourceRoot":"","sources":["../../src/FxModal/FxModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AAEhH,cAAc;AAEd,MAAM,aAAa,GAAG,CAAC,KAAU,EAAE,EAAE;IACnC,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,oBAAC,iBAAiB,OAAK,KAAK,IAAG,QAAQ,CAAqB,CAAA;AACrE,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,KAAU,EAAE,EAAE;IACzC,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,oBAAC,uBAAuB,OAAK,KAAK,IAAG,QAAQ,CAA2B,CAAA;AACjF,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAqD,EAAE,EAAE;IAC/F,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,CAC5B,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;QAC/C,IAAI;QACL,oBAAC,mBAAmB,IAAC,EAAE,EAAC,yBAAyB,IAAE,KAAK,CAAuB,CAC3E,CACP,CAAC,CAAC,CAAC,CACF;QACG,IAAI,IAAI,IAAI;QACZ,KAAK,IAAI,oBAAC,aAAa,IAAC,EAAE,EAAC,yBAAyB,IAAE,KAAK,CAAiB,CAC5E,CACJ,CAAA;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,iBAAiB,GAAG,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,EAAkB,EAAE,EAAE;IACzI,OAAO,CACL;QACE,oBAAC,QAAQ,OAAK,IAAI,EAAE,SAAS,QAAC,OAAO,EAAE,OAAO,qBAAkB,yBAAyB,EAAC,IAAI,EAAE,MAAM;YACpG,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,GAAI;YAClE,oBAAC,aAAa,QAAE,QAAQ,CAAiB;YACxC,OAAO,IAAI,oBAAC,mBAAmB,QAAE,OAAO,CAAuB,CACvD,CACP,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist-es/FxModal/index.d.ts

@@ -0,0 +1,2 @@
+export { FxModal } from './FxModal';
+export type { ModalPropsType } from './modal_types.d';

package/dist-es/FxModal/index.js

@@ -0,0 +1,2 @@
+export { FxModal } from './FxModal';
+//# sourceMappingURL=index.js.map

package/dist-es/FxModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FxModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist-es/FxModal/styles/modal.style.d.ts

@@ -0,0 +1,4 @@
+export declare const FxDialog: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const StyledDialogTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const StyledInlineDialogTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const DialogActionsStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

package/dist-es/FxModal/styles/modal.style.js

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles';
+import { Dialog, DialogActions, DialogTitle } from '@mui/material';
+export const FxDialog = styled(Dialog)(() => ({
+    '& .MuiDialog-paper': {
+        borderRadius: 8,
+        padding: '24px',
+        // minWidth: "370px",
+        maxWidth: 'fit-content',
+        // height: "262px",
+    },
+    '& .MuiDialogContent-root': {
+        padding: 0,
+    },
+    // "& .MuiDialogTitle-root": {
+    //   margin: "8px 0",
+    // },
+    '& .MuiDialogActions-root': {
+        margin: '24px 0 0 0',
+        padding: 0,
+    },
+}));
+export const StyledDialogTitle = styled(DialogTitle)(() => ({
+    fontSize: 14,
+    fontWeight: 900,
+    margin: '8px 0',
+}));
+export const StyledInlineDialogTitle = styled(DialogTitle)(() => ({
+    fontSize: 19,
+    fontWeight: 600,
+    color: '#568793',
+    margin: '8px 16px',
+    padding: 0,
+}));
+export const DialogActionsStyled = styled(DialogActions)(({}) => ({
+    justifyContent: 'flex-start',
+}));
+//# sourceMappingURL=modal.style.js.map

package/dist-es/FxModal/styles/modal.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../src/FxModal/styles/modal.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAElE,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5C,oBAAoB,EAAE;QACpB,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,MAAM;QACf,qBAAqB;QACrB,QAAQ,EAAE,aAAa;QACvB,mBAAmB;KACpB;IACD,0BAA0B,EAAE;QAC1B,OAAO,EAAE,CAAC;KACX;IACD,8BAA8B;IAC9B,qBAAqB;IACrB,KAAK;IACL,0BAA0B,EAAE;QAC1B,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC1D,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,MAAM,EAAE,OAAO;CAChB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAChE,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,CAAC;CACX,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAChE,cAAc,EAAE,YAAY;CAC7B,CAAC,CAAC,CAAA"}

package/dist-es/FxNotes/FxNotes.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NotesPropsType } from './note_types';
+export declare const FxNotes: ({ notes, onChange, onSend }: NotesPropsType) => React.JSX.Element;

package/dist-es/FxNotes/FxNotes.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { StyledAvatar, CommentWrapper, CommentInput, CommentsWrapper, UserComment, CommentUserTitle, CommentDate, CommentDesc, CommentsContainer, UserCommentWrapper, CommentsScrollWrapper, } from './styles/notes.styles';
+import { ME } from './operations/queries';
+import { useQuery } from '@apollo/client';
+import { stringToColor } from './helpers/stringToColor';
+import { normalizeTimestamp, titleCase } from '@fixefy/fixefy-ui-utils';
+export const FxNotes = ({ notes, onChange, onSend }) => {
+    const [comment, setComment] = useState('');
+    const [backgroundcolors, setBackgroundColors] = useState({});
+    // const [anchorEl] = React.useState<HTMLButtonElement | null>(null)
+    const inputRef = useRef();
+    const { data } = useQuery(ME);
+    const { me } = data;
+    // const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    //   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 '';
+        });
+    };
+    useEffect(() => {
+        onChange && onChange(comment);
+    }, [comment]);
+    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 (React.createElement(CommentsContainer, null,
+        React.createElement(CommentWrapper, null,
+            React.createElement(StyledAvatar, { sx: {
+                    backgroundColor: backgroundcolors[me.username]
+                        ? backgroundcolors[me.username]
+                        : stringToColor(me.username, (color) => {
+                            setBackgroundColors({
+                                ...backgroundcolors,
+                                [me.username]: color,
+                            });
+                        }),
+                }, src: me && me.image_url }, me && titleCase(me.username.slice(0, 1))),
+            React.createElement(CommentInput, { type: 'text', value: comment, ref: inputRef, onChange: (e) => {
+                    setComment(e.currentTarget.value);
+                } })),
+        notes && notes.length ? (React.createElement(CommentsWrapper, null,
+            React.createElement(CommentsScrollWrapper, null, notes
+                .slice()
+                .reverse()
+                .map((comment, index) => {
+                return (React.createElement(UserCommentWrapper, { key: index },
+                    React.createElement(StyledAvatar, { sx: {
+                            backgroundColor: backgroundcolors[comment.created_by]
+                                ? backgroundcolors[comment.created_by]
+                                : stringToColor(comment.created_by, (color) => {
+                                    setBackgroundColors({
+                                        ...backgroundcolors,
+                                        [comment.created_by]: color,
+                                    });
+                                }),
+                        } }, titleCase(comment.created_by.slice(0, 1))),
+                    React.createElement(UserComment, null,
+                        React.createElement(CommentUserTitle, null, comment.created_by),
+                        React.createElement(CommentDate, null, normalizeTimestamp(comment.created_at, {
+                            dateOnly: true,
+                        })),
+                        React.createElement(CommentDesc, null, comment.text))));
+            })))) : null));
+};
+//# sourceMappingURL=FxNotes.js.map

package/dist-es/FxNotes/FxNotes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FxNotes.js","sourceRoot":"","sources":["../../src/FxNotes/FxNotes.tsx"],"names":[],"mappings":"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"}

package/dist-es/FxNotes/helpers/stringToColor.d.ts

@@ -0,0 +1 @@
+export declare const stringToColor: (string: string, callBack?: ((color: string) => void) | undefined) => string;

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

@@ -0,0 +1,19 @@
+export const stringToColor = (string, callBack) => {
+    let hash = 0;
+    let color = '#';
+    if (!string) {
+        return '#000';
+    }
+    /* eslint-disable no-bitwise */
+    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);
+    }
+    /* eslint-enable no-bitwise */
+    callBack && callBack(color);
+    return color;
+};
+//# sourceMappingURL=stringToColor.js.map

package/dist-es/FxNotes/helpers/stringToColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringToColor.js","sourceRoot":"","sources":["../../../src/FxNotes/helpers/stringToColor.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,QAAkC,EAAE,EAAE;IAClF,IAAI,IAAI,GAAG,CAAC,CAAA;IACZ,IAAI,KAAK,GAAG,GAAG,CAAA;IACf,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,MAAM,CAAA;KACd;IACD,+BAA+B;IAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;QACzC,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;KACnD;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE;QAC7B,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;QACtC,KAAK,IAAI,KAAK,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;KAC9C;IACD,8BAA8B;IAC9B,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3B,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist-es/FxNotes/index.d.ts

@@ -0,0 +1,2 @@
+export { FxNotes } from './FxNotes';
+export type { NotesPropsType } from './note_types';

package/dist-es/FxNotes/index.js

@@ -0,0 +1,2 @@
+export { FxNotes } from './FxNotes';
+//# sourceMappingURL=index.js.map

package/dist-es/FxNotes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FxNotes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist-es/FxNotes/operations/queries.d.ts

@@ -0,0 +1 @@
+export declare const ME: import("graphql").DocumentNode;

package/dist-es/FxNotes/operations/queries.js

@@ -0,0 +1,21 @@
+import gql from 'graphql-tag';
+export const ME = gql `
+  query ME {
+    me {
+      _id
+      username
+      first_name
+      last_name
+      email
+      workspaces {
+        ...InsideWorkspace
+      }
+    }
+  }
+
+  fragment InsideWorkspace on Workspace {
+    _id
+    title
+  }
+`;
+//# sourceMappingURL=queries.js.map

package/dist-es/FxNotes/operations/queries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queries.js","sourceRoot":"","sources":["../../../src/FxNotes/operations/queries.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,MAAM,CAAC,MAAM,EAAE,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;CAkBpB,CAAA"}

package/dist-es/FxNotes/styles/notes.styles.d.ts

@@ -0,0 +1,13 @@
+import '@fixefy/fxutils.page_context';
+export declare const CommentsContainer: any;
+export declare const CommentsWrapper: any;
+export declare const CommentsScrollWrapper: any;
+export declare const UserCommentWrapper: any;
+export declare const CommentWrapper: any;
+export declare const CommentInput: any;
+export declare const StyledAvatar: any;
+export declare const UserComment: any;
+export declare const CommentUserTitle: any;
+export declare const CommentDate: any;
+export declare const CommentDesc: any;
+export declare const StyledPopover: any;

package/dist-es/FxNotes/styles/notes.styles.js

@@ -0,0 +1,117 @@
+import Popover from '@mui/material/Popover';
+import { styled } from '@mui/material/styles';
+import { Avatar as _Avatar } from '@mui/material';
+import '@fixefy/fxutils.page_context';
+export const CommentsContainer = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: 16,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+}));
+export const CommentsWrapper = styled('div')(({}) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: '100%',
+}));
+export const CommentsScrollWrapper = styled('div')(({}) => ({
+    maxHeight: 170,
+    overflow: 'auto',
+    width: '100%',
+}));
+export const UserCommentWrapper = styled('div')(({}) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    marginTop: 16,
+    '&:first-of-type': {
+        marginTop: 0,
+    },
+}));
+export const CommentWrapper = styled('div')(({}) => ({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: 16,
+}));
+export const CommentInput = styled('input')(({ theme }) => ({
+    background: theme.palette.common.white,
+    border: '1px solid #F0F0F0',
+    borderRadius: '4px',
+    height: 36,
+    padding: '0 16px',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+    width: '100%',
+    '&::focus-visible': {
+        outline: 'unset',
+    },
+}));
+export const StyledAvatar = styled(_Avatar)(({ theme }) => ({
+    width: 32,
+    height: 32,
+    border: `2px solid ${theme.palette.common.white}`,
+    marginRight: '8px',
+    fontFamily: 'Open Sans',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+}));
+export const UserComment = styled('div')(({ theme }) => ({
+    background: theme.palette.greyscale.contrastText,
+    border: '1px solid #F0F0F0',
+    borderRadius: '4px',
+    padding: '8px 16px',
+    minWidth: 300,
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+}));
+export const CommentUserTitle = styled('div')(({}) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+}));
+export const CommentDate = styled('div')(({}) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.15px',
+    color: '#898989',
+}));
+export const CommentDesc = styled('div')(({}) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+}));
+export const StyledPopover = styled(Popover)(({ theme }) => ({
+    position: 'absolute',
+    right: 12,
+    width: 80,
+    height: 16,
+    background: '#F7F7F7',
+    borderRadius: 4,
+    fontFamily: 'Open Sans',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.1px',
+    color: theme.palette.primary.light,
+}));
+//# sourceMappingURL=notes.styles.js.map

package/dist-es/FxNotes/styles/notes.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notes.styles.js","sourceRoot":"","sources":["../../../src/FxNotes/styles/notes.styles.tsx"],"names":[],"mappings":"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"}

package/dist-es/FxNumberField/FxNumberField.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NumberfieldPropsType } from './number_field_types';
+export declare function FxNumberField({ placeholder, defaultValue, label, hint, onChange }: NumberfieldPropsType): React.JSX.Element;

package/dist-es/FxNumberField/FxNumberField.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { useStyles } from './styles/number_field.styles';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+export function FxNumberField({ placeholder, defaultValue, label, hint, onChange }) {
+    const _classes = useStyles();
+    const [value, setValue] = useState(defaultValue || 0);
+    useEffect(() => {
+        onChange && onChange(value);
+    }, [value]);
+    return (React.createElement("div", { className: _classes.container },
+        label && React.createElement("span", { className: _classes.label }, label),
+        React.createElement("div", { className: _classes.inputWrapper },
+            React.createElement("input", { type: "number", placeholder: placeholder, value: value, 
+                //@ts-ignore
+                onChange: (e) => setValue(e.target.value) }),
+            React.createElement("div", { className: _classes.inputActions },
+                React.createElement("button", { className: _classes.inputActionsPlus, onClick: () => setValue(value + 1) },
+                    React.createElement(KeyboardArrowRightIcon, null)),
+                React.createElement("button", { className: _classes.inputActionsMinus, onClick: () => setValue(value - 1) },
+                    React.createElement(KeyboardArrowRightIcon, null)))),
+        hint && React.createElement("span", { className: _classes.hint }, hint)));
+}
+//# sourceMappingURL=FxNumberField.js.map

package/dist-es/FxNumberField/FxNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FxNumberField.js","sourceRoot":"","sources":["../../src/FxNumberField/FxNumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGxD,OAAO,sBAAsB,MAAM,wCAAwC,CAAA;AAE3E,MAAM,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAwB;IACtG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAA;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,CAAC,CAAC,CAAA;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACX,OAAO,CACL,6BAAK,SAAS,EAAE,QAAQ,CAAC,SAAS;QAC/B,KAAK,IAAI,8BAAM,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAG,KAAK,CAAQ;QACzD,6BAAK,SAAS,EAAE,QAAQ,CAAC,YAAY;YACnC,+BACE,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK;gBACZ,YAAY;gBACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACzC;YACF,6BAAK,SAAS,EAAE,QAAQ,CAAC,YAAY;gBACnC,gCAAQ,SAAS,EAAE,QAAQ,CAAC,gBAAgB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;oBAC9E,oBAAC,sBAAsB,OAAG,CACnB;gBACT,gCAAQ,SAAS,EAAE,QAAQ,CAAC,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;oBAC/E,oBAAC,sBAAsB,OAAG,CACnB,CACL,CACF;QACL,IAAI,IAAI,8BAAM,SAAS,EAAE,QAAQ,CAAC,IAAI,IAAG,IAAI,CAAQ,CAClD,CACP,CAAA;AACH,CAAC"}

package/dist-es/FxNumberField/index.d.ts

@@ -0,0 +1,2 @@
+export { FxNumberField } from './FxNumberField';
+export type { NumberfieldPropsType } from './number_field_types';

package/dist-es/FxNumberField/index.js

@@ -0,0 +1,2 @@
+export { FxNumberField } from './FxNumberField';
+//# sourceMappingURL=index.js.map

package/dist-es/FxNumberField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FxNumberField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}

package/dist-es/FxNumberField/styles/number_field.styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "container" | "hint" | "inputWrapper" | "inputActions" | "inputActionsPlus" | "inputActionsMinus">;