@fixefy/fixefy-ui-components 0.0.6 → 0.0.7

package/dist-cjs/FxStatusBar/FxStatusBar.jsx

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const FxChip_1 = require("../FxChip");
+const constants_1 = require("./helpers/constants");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const statusBar_styles_1 = require("./styles/statusBar.styles");
+const StatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options, chipsVariant = 'filled' }) => {
+    const [selectedStatus, setSelectedStatus] = (0, react_1.useState)([]);
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (defaultStatus) {
+            typeof defaultStatus === 'string' ? setSelectedStatus([defaultStatus]) : setSelectedStatus(defaultStatus);
+        }
+        else {
+            setSelectedStatus(['all']);
+        }
+    }, [defaultStatus]);
+    const onStatusClick = (status) => {
+        if (status === 'all') {
+            setSelectedStatus(() => {
+                if (selectedStatus.includes(status)) {
+                    return [];
+                }
+                else {
+                    return ['all'];
+                }
+            });
+        }
+        else {
+            setSelectedStatus((prevState) => {
+                if (selectedStatus.includes(status)) {
+                    const rv = prevState.filter((_status) => _status !== status && _status !== 'all');
+                    return rv.length == 0 ? ['all'] : rv;
+                }
+                else {
+                    const rv = prevState.filter((_status) => _status !== status && _status !== 'all');
+                    return [...rv, status];
+                }
+            });
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        onChangeStatus(selectedStatus);
+    }, [selectedStatus]);
+    (0, react_1.useEffect)(() => {
+        onSearch && onSearch(searchValue);
+    }, [searchValue]);
+    const __options = options !== null && options !== void 0 ? options : constants_1.statuses;
+    return (<statusBar_styles_1.StatusBarCard>
+      {title && <statusBar_styles_1.StatusBarTitle style={{ marginRight: '8px' }}>{(0, fixefy_ui_utils_1.titleCase)(title)}</statusBar_styles_1.StatusBarTitle>}
+
+      <material_1.Stack direction="row" spacing={1}>
+        <statusBar_styles_1.StatusChipStyled onClick={() => onStatusClick('all')} label="All" variant={selectedStatus.includes('all') ? 'filled' : 'outlined'}/>
+        {Object.keys(__options).map((key, index) => {
+            return <FxChip_1.FxChip onClick={() => onStatusClick(__options[key])} key={index} label={(0, fixefy_ui_utils_1.titleCase)(key)} variant={chipsVariant} status={selectedStatus.includes(__options[key]) ? __options[key] : ''}/>;
+        })}
+      </material_1.Stack>
+    </statusBar_styles_1.StatusBarCard>);
+};
+exports.StatusBar = StatusBar;

package/dist-cjs/FxStatusBar/helpers/constants.js

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

package/dist-cjs/FxStatusBar/index.js

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

package/dist-cjs/FxStatusBar/styles/statusBar.styles.jsx

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusChipStyled = exports.StatusBarTitle = exports.StatusBarCard = void 0;
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+exports.StatusBarCard = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: 4,
+    padding: 16,
+    boxShadow: "0px 0px 10px rgba(86, 135, 147, 0.3)",
+    display: "flex",
+    alignItems: "center",
+    width: "fit-content",
+}));
+exports.StatusBarTitle = (0, styles_1.styled)("span")(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { color: theme.palette.common.black })));
+exports.StatusChipStyled = (0, styles_1.styled)(material_1.Chip)(({ theme, variant }) => {
+    let backgroundColor, border, labelColor;
+    if (variant === "filled") {
+        backgroundColor = theme.palette.primary.light;
+        labelColor = theme.palette.common.white;
+    }
+    else {
+        backgroundColor = theme.palette.common.white;
+    }
+    border = "#F0F0F0";
+    return {
+        height: 20,
+        minWidth: 34,
+        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/FxTextField/FxTextField.jsx

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxTextField = 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 material_1 = require("@mui/material");
+const ErrorRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ErrorRounded"));
+const FxTextField = ({ autoFocus, droppedItem, defaultValue = '', onChange, structure, endAdornment, startAdornment, required, helperText, error = false, errorText, disabled }) => {
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const { input_type, extended: { placeholder, title_path }, title, } = structure;
+    (0, react_1.useEffect)(() => {
+        if (droppedItem) {
+            const { item, type } = droppedItem;
+            setValue(item[title_path]);
+        }
+    }, [droppedItem]);
+    const _onChange = (e) => {
+        onChange && onChange(e);
+        setValue(e.target.value);
+    };
+    return (<material_1.FormControl variant="standard" error={error}>
+      {title && (<material_1.InputLabel shrink htmlFor={title} sx={(theme) => (Object.assign(Object.assign(Object.assign({ color: theme.palette.greyscale.light, '&.Mui-focused': {
+                    color: theme.palette.greyscale.light,
+                } }, (disabled && { opacity: '0.3' })), { '&.Mui-error': { color: theme.palette.greyscale.light } }), (required && {
+                '&:before': {
+                    content: "'*'",
+                    color: theme.palette.redscale.main,
+                    display: 'inline-block',
+                    marginRight: '5px',
+                },
+            })))}>
+          {(0, fixefy_ui_utils_1.titleCase)(title)}
+        </material_1.InputLabel>)}
+      <material_1.InputBase endAdornment={endAdornment} startAdornment={startAdornment} id={title} autoFocus={autoFocus ? autoFocus : false} placeholder={(0, fixefy_ui_utils_1.titleCase)(placeholder)} onChange={_onChange} type={input_type && input_type.value} value={value} error={error}/>
+      {error && errorText ? (<material_1.FormHelperText sx={(theme) => ({
+                '&.Mui-error': {
+                    color: theme.palette.redscale.main,
+                },
+                display: 'grid',
+                gridAutoFlow: 'column',
+                alignItems: 'center',
+                justifyContent: 'left',
+                columnGap: theme.spacing(0.6),
+                fontSize: '11px',
+            })}>
+          <ErrorRounded_1.default sx={(theme) => ({
+                color: theme.palette.redscale.main,
+                width: 10,
+                height: 10,
+            })}/>
+          {(0, fixefy_ui_utils_1.titleCase)(errorText)}
+        </material_1.FormHelperText>) : (<material_1.FormHelperText sx={(theme) => ({
+                color: theme.palette.greyscale.light,
+                fontSize: '11px',
+            })}>
+          {helperText}
+        </material_1.FormHelperText>)}
+    </material_1.FormControl>);
+};
+exports.FxTextField = FxTextField;
+exports.default = exports.FxTextField;

package/dist-cjs/FxTextField/index.js

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

package/dist-cjs/FxTodo/FxTodo.jsx

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FxTodo = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const image_1 = tslib_1.__importDefault(require("next/image"));
+const FxAvatar_1 = require("../FxAvatar");
+const material_1 = require("@mui/material");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const todo_styles_1 = require("./styles/todo.styles");
+function FxTodo({ todo }) {
+    return (<todo_styles_1.TodoCard>
+      <todo_styles_1.TodoCardHeader>
+        <todo_styles_1.TodoCardPriority priority={todo.priority}>
+          <image_1.default alt={todo.title} width={16} height={16} loader={() => (0, fixefy_ui_utils_1.imageLoader)({
+            root: 'https://cdn-dev.fixefy.me/',
+            src: 'invoices/severity_low.svg',
+        })} src={`invoices/severity_${todo.priority}.svg`} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
+
+          {(0, fixefy_ui_utils_1.titleCase)(todo.priority)}
+        </todo_styles_1.TodoCardPriority>
+        {todo.isNew && <todo_styles_1.TodoCardTag>New</todo_styles_1.TodoCardTag>}
+      </todo_styles_1.TodoCardHeader>
+      <todo_styles_1.TodoCardContent>
+        <p>{(0, fixefy_ui_utils_1.titleCase)(todo.title)}</p>
+        <span>{(0, fixefy_ui_utils_1.titleCase)(todo.description)}</span>
+        {todo.actionTitle && (<todo_styles_1.TodoCardContentButton size="small" onClick={todo.action ? todo.action : () => { }}>
+            {todo.actionTitle}
+          </todo_styles_1.TodoCardContentButton>)}
+      </todo_styles_1.TodoCardContent>
+      <material_1.Divider sx={{ mb: '16px' }}/>
+      <todo_styles_1.TodoCardFooter>
+        <todo_styles_1.TodoCardFooterDueDate>
+          <span>Due Date</span>
+          <p>
+            {(0, fixefy_ui_utils_1.normalizeTimestamp)(todo.created_date, {
+            dateOnly: true,
+            format: 'dd.mm.yyyy',
+        })}
+          </p>
+        </todo_styles_1.TodoCardFooterDueDate>
+        <FxAvatar_1.FxAvatar max={4} isEditable={todo.isUserEditable} users={todo.users}/>
+      </todo_styles_1.TodoCardFooter>
+    </todo_styles_1.TodoCard>);
+}
+exports.FxTodo = FxTodo;

package/dist-cjs/FxTodo/index.js

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

package/dist-cjs/FxTodo/styles/todo.styles.jsx

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TodoCardFooterDueDate = exports.TodoCardFooter = exports.TodoCardContentButton = exports.TodoCardContent = exports.TodoCardTag = exports.TodoCardPriority = exports.TodoCardHeader = exports.TodoCard = void 0;
+const styles_1 = require("@mui/material/styles");
+const FxButton_1 = require("../../FxButton");
+exports.TodoCard = (0, styles_1.styled)('div')(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 4,
+}));
+exports.TodoCardHeader = (0, styles_1.styled)('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+}));
+exports.TodoCardPriority = (0, styles_1.styled)('div')(({ theme, priority }) => (Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center' }, theme.typography.table), { color: theme.palette.priority[priority], ['& img']: {
+        marginRight: 4,
+    } })));
+exports.TodoCardTag = (0, styles_1.styled)('div')(({ theme }) => (Object.assign(Object.assign({}, theme.typography.table), { color: theme.palette.common.white, width: 42, height: 18, background: '#6FCF97', borderRadius: 50, display: 'flex', alignItems: 'center', justifyContent: 'center' })));
+exports.TodoCardContent = (0, styles_1.styled)('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+    marginBottom: 16,
+    ['& p']: {
+        fontStyle: 'normal',
+        fontSize: 14,
+        letterSpacing: '0.15px',
+        color: theme.palette.typography.title,
+        fontWeight: 700,
+        lineHeight: '16px',
+        margin: 0,
+    },
+    ['& span']: {
+        fontStyle: 'normal',
+        fontSize: 14,
+        letterSpacing: '0.15px',
+        color: theme.palette.typography.title,
+        fontWeight: 400,
+        lineHeight: '20px',
+        marginBottom: 16,
+    },
+}));
+exports.TodoCardContentButton = (0, styles_1.styled)(FxButton_1.FxButton)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.button), { color: '#568793', fontSize: 12, maxHeight: 32, minHeight: 32, paddingLeft: 12, paddingRight: 12 })));
+exports.TodoCardFooter = (0, styles_1.styled)('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+}));
+exports.TodoCardFooterDueDate = (0, styles_1.styled)('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    ['& p']: {
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        letterSpacing: '0.1px',
+        color: theme.palette.typography.title,
+        margin: 0,
+    },
+    ['& span']: {
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontSize: 14,
+        lineHeight: '24px',
+        letterSpacing: '0.15px',
+        color: theme.palette.statistics.label,
+    },
+}));

package/dist-cjs/FxWizard/FxWizard.jsx

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wizard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const web_1 = require("@react-spring/web");
+const wizard_styles_1 = require("./styles/wizard.styles");
+const Animations = {
+    rightToLeft: {
+        from: {
+            opacity: 0,
+            position: 'absolute',
+            transform: 'translate3d(20%,0,0)',
+            width: '100%',
+        },
+        enter: {
+            opacity: 1,
+            transform: 'translate3d(0%,0,0)',
+        },
+        leave: {
+            opacity: 0,
+            transform: 'translate3d(-10%,0,0)',
+        },
+    },
+    leftToRight: {
+        from: { opacity: 0, position: 'absolute', width: '100%' },
+        enter: {
+            opacity: 1,
+            transform: 'translate3d(0%,0,0)',
+        },
+        leave: {
+            opacity: 0,
+            transform: 'translate3d(20%,0,0)',
+        },
+    },
+};
+function Wizard(_a) {
+    var { open, content = [], currentPage = 0, reverse = false, onCancel, title, actions, icon, componentStyles, divider = true } = _a, rest = tslib_1.__rest(_a, ["open", "content", "currentPage", "reverse", "onCancel", "title", "actions", "icon", "componentStyles", "divider"]);
+    const transitions = (0, web_1.useTransition)(content[currentPage], Object.assign(Object.assign({}, Animations[reverse ? 'leftToRight' : 'rightToLeft']), { keys: null }));
+    return (<wizard_styles_1.StyledModal {...rest} title={title} actions={actions} icon={icon} isOpen={Boolean(open)} isIconTitleInline onClose={(e) => onCancel(e, '')}>
+      {divider && <material_1.Divider sx={{ mb: '32px', mt: '16px' }}/>}
+      <wizard_styles_1.StyledContent style={Object.assign({}, componentStyles)}>
+        {transitions((style, item) => (<web_1.animated.div style={style}>{item}</web_1.animated.div>))}
+      </wizard_styles_1.StyledContent>
+      {divider && <material_1.Divider sx={{ mb: '8px', mt: '32px' }}/>}
+    </wizard_styles_1.StyledModal>);
+}
+exports.Wizard = Wizard;

package/dist-cjs/FxWizard/WizardContext.jsx

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardContextProvider = exports.WizardContext = void 0;
+const tslib_1 = require("tslib");
+const FxWizard_1 = require("./FxWizard");
+const react_1 = tslib_1.__importStar(require("react"));
+exports.WizardContext = (0, react_1.createContext)({});
+const WizardContextProvider = ({ children }) => {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [content, setContent] = (0, react_1.useState)([]);
+    const [reverse, setReverse] = (0, react_1.useState)(false);
+    const [options, setOptions] = (0, react_1.useState)({});
+    const [modalProps, _setModalProps] = (0, react_1.useState)({
+        shouldCloseOnBackdropClick: true,
+        shouldCloseOnEscapeKeyDown: true,
+    });
+    const [componentStyles, setComponentStyles] = (0, react_1.useState)({
+        width: '100%',
+        height: 500,
+        contain: 'content',
+        overflow: 'scroll',
+    });
+    const onCancel = (event, reason) => {
+        switch (reason) {
+            case 'escapeKeyDown': {
+                if (modalProps.shouldCloseOnEscapeKeyDown) {
+                    return setOpen(false);
+                }
+                else {
+                    return;
+                }
+            }
+            case 'backdropClick': {
+                if (modalProps.shouldCloseOnBackdropClick) {
+                    return setOpen(false);
+                }
+                else {
+                    return;
+                }
+            }
+            default: {
+            }
+        }
+    };
+    const onOpen = () => {
+        setOpen(true);
+    };
+    const nextPage = () => {
+        console.log('nextPage');
+    };
+    const prevPage = () => {
+        console.log('prevPage');
+    };
+    const setModalProps = (newState) => {
+        _setModalProps((prevState) => (Object.assign(Object.assign({}, prevState), newState)));
+    };
+    const setPage = (page, option) => {
+        if (option) {
+            setOptions(Object.assign(Object.assign({}, options), option));
+        }
+        setCurrentPage((prevCurrentPage) => {
+            setReverse(page < prevCurrentPage);
+            return page;
+        });
+    };
+    const _state = {
+        currentPage,
+        nextPage,
+        prevPage,
+        onOpen,
+        open,
+        setOpen,
+        setContent,
+        setPage,
+        options,
+        setModalProps,
+        setComponentStyles,
+        setOptions,
+    };
+    return (<exports.WizardContext.Provider value={_state}>
+      {children}
+      <FxWizard_1.Wizard {...modalProps} componentStyles={componentStyles} currentPage={currentPage} reverse={reverse} open={open} onCancel={onCancel} content={content}/>
+    </exports.WizardContext.Provider>);
+};
+exports.WizardContextProvider = WizardContextProvider;

package/dist-cjs/FxWizard/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardContextProvider = exports.WizardContext = exports.Wizard = void 0;
+var FxWizard_1 = require("./FxWizard");
+Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return FxWizard_1.Wizard; } });
+var WizardContext_1 = require("./WizardContext");
+Object.defineProperty(exports, "WizardContext", { enumerable: true, get: function () { return WizardContext_1.WizardContext; } });
+Object.defineProperty(exports, "WizardContextProvider", { enumerable: true, get: function () { return WizardContext_1.WizardContextProvider; } });

package/dist-cjs/FxWizard/styles/wizard.styles.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledModal = exports.StyledContent = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const FxModal_1 = require("../../FxModal");
+exports.StyledContent = (0, styles_1.styled)(material_1.Box) ``;
+exports.StyledModal = (0, styles_1.styled)(FxModal_1.FxModal)(({ theme }) => ({
+    '& #customized-dialog-title': Object.assign(Object.assign({}, theme.typography.h5), { color: theme.palette.typography.title, padding: 0 }),
+    '& .MuiDialog-paper': {
+        maxWidth: '74% !important',
+        position: 'relative',
+    },
+    '& .MuiDialogContent-root': {
+        position: 'relative',
+    },
+}));

package/dist-es/FxStatusBar/FxStatusBar.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { Stack } from '@mui/material';
+import { FxChip } from '../FxChip';
+import { statuses } from './helpers/constants';
+import { titleCase } from '@fixefy/fixefy-ui-utils';
+import { StatusBarCard, StatusBarTitle, StatusChipStyled } from './styles/statusBar.styles';
+export const StatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options, chipsVariant = 'filled' }) => {
+    const [selectedStatus, setSelectedStatus] = useState([]);
+    const [searchValue, setSearchValue] = useState('');
+    useEffect(() => {
+        if (defaultStatus) {
+            typeof defaultStatus === 'string' ? setSelectedStatus([defaultStatus]) : setSelectedStatus(defaultStatus);
+        }
+        else {
+            setSelectedStatus(['all']);
+        }
+    }, [defaultStatus]);
+    const onStatusClick = (status) => {
+        if (status === 'all') {
+            setSelectedStatus(() => {
+                if (selectedStatus.includes(status)) {
+                    return [];
+                }
+                else {
+                    return ['all'];
+                }
+            });
+        }
+        else {
+            setSelectedStatus((prevState) => {
+                if (selectedStatus.includes(status)) {
+                    const rv = prevState.filter((_status) => _status !== status && _status !== 'all');
+                    return rv.length == 0 ? ['all'] : rv;
+                }
+                else {
+                    const rv = prevState.filter((_status) => _status !== status && _status !== 'all');
+                    return [...rv, status];
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        onChangeStatus(selectedStatus);
+    }, [selectedStatus]);
+    useEffect(() => {
+        onSearch && onSearch(searchValue);
+    }, [searchValue]);
+    const __options = options ?? statuses;
+    return (<StatusBarCard>
+      {title && <StatusBarTitle style={{ marginRight: '8px' }}>{titleCase(title)}</StatusBarTitle>}
+
+      <Stack direction="row" spacing={1}>
+        <StatusChipStyled onClick={() => onStatusClick('all')} label="All" variant={selectedStatus.includes('all') ? 'filled' : 'outlined'}/>
+        {Object.keys(__options).map((key, index) => {
+            return <FxChip onClick={() => onStatusClick(__options[key])} key={index} label={titleCase(key)} variant={chipsVariant} status={selectedStatus.includes(__options[key]) ? __options[key] : ''}/>;
+        })}
+      </Stack>
+    </StatusBarCard>);
+};

package/dist-es/FxStatusBar/helpers/constants.js

@@ -0,0 +1,12 @@
+export const statuses = {
+    Declined: 'declined',
+    Pending: 'pending',
+    Approved: 'approved',
+    Active: 'active',
+    Challenge: 'challenged',
+    in_review: 'in_review',
+    Discrepancy: 'discrepancy',
+    no_pricing: 'no_pricing',
+    in_progress: 'in_progress',
+    Duplicated: 'duplicated',
+};

package/dist-es/FxStatusBar/index.js

@@ -0,0 +1 @@
+export { StatusBar } from "./FxStatusBar";

package/dist-es/FxStatusBar/styles/statusBar.styles.jsx

@@ -0,0 +1,39 @@
+import { styled } from "@mui/material/styles";
+import { Box, Chip as MuiChip } from "@mui/material";
+export const StatusBarCard = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: 4,
+    padding: 16,
+    boxShadow: "0px 0px 10px rgba(86, 135, 147, 0.3)",
+    display: "flex",
+    alignItems: "center",
+    width: "fit-content",
+}));
+export const StatusBarTitle = styled("span")(({ theme }) => ({
+    ...theme.typography.body1,
+    color: theme.palette.common.black,
+}));
+export const StatusChipStyled = styled(MuiChip)(({ theme, variant }) => {
+    let backgroundColor, border, labelColor;
+    if (variant === "filled") {
+        backgroundColor = theme.palette.primary.light;
+        labelColor = theme.palette.common.white;
+    }
+    else {
+        backgroundColor = theme.palette.common.white;
+    }
+    border = "#F0F0F0";
+    return {
+        height: 20,
+        minWidth: 34,
+        maxWidth: 120,
+        ["& .MuiChip-label"]: {
+            fontSize: 9,
+            fontWeight: 600,
+            lineHeight: "12px",
+            color: labelColor ? labelColor : theme.palette["statistics"].label,
+        },
+        backgroundColor,
+        border: `1px solid ${border}`,
+    };
+});

package/dist-es/FxTextField/FxTextField.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { titleCase } from '@fixefy/fixefy-ui-utils';
+import { FormControl, FormHelperText, InputBase, InputLabel } from '@mui/material';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+export const FxTextField = ({ autoFocus, droppedItem, defaultValue = '', onChange, structure, endAdornment, startAdornment, required, helperText, error = false, errorText, disabled }) => {
+    const [value, setValue] = useState(defaultValue);
+    const { input_type, extended: { placeholder, title_path }, title, } = structure;
+    useEffect(() => {
+        if (droppedItem) {
+            const { item, type } = droppedItem;
+            setValue(item[title_path]);
+        }
+    }, [droppedItem]);
+    const _onChange = (e) => {
+        onChange && onChange(e);
+        setValue(e.target.value);
+    };
+    return (<FormControl variant="standard" error={error}>
+      {title && (<InputLabel shrink htmlFor={title} sx={(theme) => ({
+                color: theme.palette.greyscale.light,
+                '&.Mui-focused': {
+                    color: theme.palette.greyscale.light,
+                },
+                ...(disabled && { opacity: '0.3' }),
+                '&.Mui-error': { color: theme.palette.greyscale.light },
+                ...(required && {
+                    '&:before': {
+                        content: "'*'",
+                        color: theme.palette.redscale.main,
+                        display: 'inline-block',
+                        marginRight: '5px',
+                    },
+                }),
+            })}>
+          {titleCase(title)}
+        </InputLabel>)}
+      <InputBase endAdornment={endAdornment} startAdornment={startAdornment} id={title} autoFocus={autoFocus ? autoFocus : false} placeholder={titleCase(placeholder)} onChange={_onChange} type={input_type && input_type.value} value={value} error={error}/>
+      {error && errorText ? (<FormHelperText sx={(theme) => ({
+                '&.Mui-error': {
+                    color: theme.palette.redscale.main,
+                },
+                display: 'grid',
+                gridAutoFlow: 'column',
+                alignItems: 'center',
+                justifyContent: 'left',
+                columnGap: theme.spacing(0.6),
+                fontSize: '11px',
+            })}>
+          <ErrorRoundedIcon sx={(theme) => ({
+                color: theme.palette.redscale.main,
+                width: 10,
+                height: 10,
+            })}/>
+          {titleCase(errorText)}
+        </FormHelperText>) : (<FormHelperText sx={(theme) => ({
+                color: theme.palette.greyscale.light,
+                fontSize: '11px',
+            })}>
+          {helperText}
+        </FormHelperText>)}
+    </FormControl>);
+};
+export default FxTextField;

package/dist-es/FxTextField/index.js

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

package/dist-es/FxTodo/FxTodo.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Image from 'next/image';
+import { FxAvatar } from '../FxAvatar';
+import { Divider } from '@mui/material';
+import { imageLoader, normalizeTimestamp, titleCase } from '@fixefy/fixefy-ui-utils';
+import { TodoCard, TodoCardHeader, TodoCardContent, TodoCardPriority, TodoCardTag, TodoCardFooter, TodoCardFooterDueDate, TodoCardContentButton } from './styles/todo.styles';
+export function FxTodo({ todo }) {
+    return (<TodoCard>
+      <TodoCardHeader>
+        <TodoCardPriority priority={todo.priority}>
+          <Image alt={todo.title} width={16} height={16} loader={() => imageLoader({
+            root: 'https://cdn-dev.fixefy.me/',
+            src: 'invoices/severity_low.svg',
+        })} src={`invoices/severity_${todo.priority}.svg`} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
+
+          {titleCase(todo.priority)}
+        </TodoCardPriority>
+        {todo.isNew && <TodoCardTag>New</TodoCardTag>}
+      </TodoCardHeader>
+      <TodoCardContent>
+        <p>{titleCase(todo.title)}</p>
+        <span>{titleCase(todo.description)}</span>
+        {todo.actionTitle && (<TodoCardContentButton size="small" onClick={todo.action ? todo.action : () => { }}>
+            {todo.actionTitle}
+          </TodoCardContentButton>)}
+      </TodoCardContent>
+      <Divider sx={{ mb: '16px' }}/>
+      <TodoCardFooter>
+        <TodoCardFooterDueDate>
+          <span>Due Date</span>
+          <p>
+            {normalizeTimestamp(todo.created_date, {
+            dateOnly: true,
+            format: 'dd.mm.yyyy',
+        })}
+          </p>
+        </TodoCardFooterDueDate>
+        <FxAvatar max={4} isEditable={todo.isUserEditable} users={todo.users}/>
+      </TodoCardFooter>
+    </TodoCard>);
+}

package/dist-es/FxTodo/index.js

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

package/dist-es/FxTodo/styles/todo.styles.jsx

@@ -0,0 +1,97 @@
+import { styled } from '@mui/material/styles';
+import { FxButton } from '../../FxButton';
+export const TodoCard = styled('div')(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 4,
+}));
+export const TodoCardHeader = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+}));
+export const TodoCardPriority = styled('div')(({ theme, priority }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...theme.typography.table,
+    color: theme.palette.priority[priority],
+    ['& img']: {
+        marginRight: 4,
+    },
+}));
+export const TodoCardTag = styled('div')(({ theme }) => ({
+    ...theme.typography.table,
+    color: theme.palette.common.white,
+    width: 42,
+    height: 18,
+    background: '#6FCF97',
+    borderRadius: 50,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const TodoCardContent = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+    marginBottom: 16,
+    ['& p']: {
+        fontStyle: 'normal',
+        fontSize: 14,
+        letterSpacing: '0.15px',
+        color: theme.palette.typography.title,
+        fontWeight: 700,
+        lineHeight: '16px',
+        margin: 0,
+    },
+    ['& span']: {
+        fontStyle: 'normal',
+        fontSize: 14,
+        letterSpacing: '0.15px',
+        color: theme.palette.typography.title,
+        fontWeight: 400,
+        lineHeight: '20px',
+        marginBottom: 16,
+    },
+}));
+export const TodoCardContentButton = styled(FxButton)(({ theme }) => ({
+    ...theme.typography.button,
+    color: '#568793',
+    fontSize: 12,
+    maxHeight: 32,
+    minHeight: 32,
+    paddingLeft: 12,
+    paddingRight: 12,
+}));
+export const TodoCardFooter = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+}));
+export const TodoCardFooterDueDate = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    ['& p']: {
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        letterSpacing: '0.1px',
+        color: theme.palette.typography.title,
+        margin: 0,
+    },
+    ['& span']: {
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontSize: 14,
+        lineHeight: '24px',
+        letterSpacing: '0.15px',
+        color: theme.palette.statistics.label,
+    },
+}));

package/dist-es/FxWizard/FxWizard.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Divider } from '@mui/material';
+import { useTransition, animated } from '@react-spring/web';
+import { StyledModal, StyledContent } from './styles/wizard.styles';
+const Animations = {
+    rightToLeft: {
+        from: {
+            opacity: 0,
+            position: 'absolute',
+            transform: 'translate3d(20%,0,0)',
+            width: '100%',
+        },
+        enter: {
+            opacity: 1,
+            transform: 'translate3d(0%,0,0)',
+        },
+        leave: {
+            opacity: 0,
+            transform: 'translate3d(-10%,0,0)',
+        },
+    },
+    leftToRight: {
+        from: { opacity: 0, position: 'absolute', width: '100%' },
+        enter: {
+            opacity: 1,
+            transform: 'translate3d(0%,0,0)',
+        },
+        leave: {
+            opacity: 0,
+            transform: 'translate3d(20%,0,0)',
+        },
+    },
+};
+export function Wizard({ open, content = [], currentPage = 0, reverse = false, onCancel, title, actions, icon, componentStyles, divider = true, ...rest }) {
+    const transitions = useTransition(content[currentPage], {
+        ...Animations[reverse ? 'leftToRight' : 'rightToLeft'],
+        keys: null,
+    });
+    return (<StyledModal {...rest} title={title} actions={actions} icon={icon} isOpen={Boolean(open)} isIconTitleInline onClose={(e) => onCancel(e, '')}>
+      {divider && <Divider sx={{ mb: '32px', mt: '16px' }}/>}
+      <StyledContent style={{ ...componentStyles }}>
+        {transitions((style, item) => (<animated.div style={style}>{item}</animated.div>))}
+      </StyledContent>
+      {divider && <Divider sx={{ mb: '8px', mt: '32px' }}/>}
+    </StyledModal>);
+}

package/dist-es/FxWizard/WizardContext.jsx

@@ -0,0 +1,84 @@
+import { Wizard } from './FxWizard';
+import React, { createContext, useState } from 'react';
+export const WizardContext = createContext({});
+export const WizardContextProvider = ({ children }) => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [open, setOpen] = useState(false);
+    const [content, setContent] = useState([]);
+    const [reverse, setReverse] = useState(false);
+    const [options, setOptions] = useState({});
+    const [modalProps, _setModalProps] = useState({
+        shouldCloseOnBackdropClick: true,
+        shouldCloseOnEscapeKeyDown: true,
+    });
+    const [componentStyles, setComponentStyles] = useState({
+        width: '100%',
+        height: 500,
+        contain: 'content',
+        overflow: 'scroll',
+    });
+    const onCancel = (event, reason) => {
+        switch (reason) {
+            case 'escapeKeyDown': {
+                if (modalProps.shouldCloseOnEscapeKeyDown) {
+                    return setOpen(false);
+                }
+                else {
+                    return;
+                }
+            }
+            case 'backdropClick': {
+                if (modalProps.shouldCloseOnBackdropClick) {
+                    return setOpen(false);
+                }
+                else {
+                    return;
+                }
+            }
+            default: {
+            }
+        }
+    };
+    const onOpen = () => {
+        setOpen(true);
+    };
+    const nextPage = () => {
+        console.log('nextPage');
+    };
+    const prevPage = () => {
+        console.log('prevPage');
+    };
+    const setModalProps = (newState) => {
+        _setModalProps((prevState) => ({
+            ...prevState,
+            ...newState,
+        }));
+    };
+    const setPage = (page, option) => {
+        if (option) {
+            setOptions({ ...options, ...option });
+        }
+        setCurrentPage((prevCurrentPage) => {
+            setReverse(page < prevCurrentPage);
+            return page;
+        });
+    };
+    const _state = {
+        currentPage,
+        nextPage,
+        prevPage,
+        onOpen,
+        open,
+        setOpen,
+        setContent,
+        setPage,
+        options,
+        setModalProps,
+        setComponentStyles,
+        setOptions,
+    };
+    return (<WizardContext.Provider value={_state}>
+      {children}
+      <Wizard {...modalProps} componentStyles={componentStyles} currentPage={currentPage} reverse={reverse} open={open} onCancel={onCancel} content={content}/>
+    </WizardContext.Provider>);
+};

package/dist-es/FxWizard/index.js

@@ -0,0 +1,2 @@
+export { Wizard } from "./FxWizard";
+export { WizardContext, WizardContextProvider } from "./WizardContext";

package/dist-es/FxWizard/styles/wizard.styles.jsx

@@ -0,0 +1,18 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { FxModal } from '../../FxModal';
+export const StyledContent = styled(Box) ``;
+export const StyledModal = styled(FxModal)(({ theme }) => ({
+    '& #customized-dialog-title': {
+        ...theme.typography.h5,
+        color: theme.palette.typography.title,
+        padding: 0,
+    },
+    '& .MuiDialog-paper': {
+        maxWidth: '74% !important',
+        position: 'relative',
+    },
+    '& .MuiDialogContent-root': {
+        position: 'relative',
+    },
+}));

package/dist-types/FxStatusBar/FxStatusBar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { StatusBarProps } from './status_bar_types';
+export declare const StatusBar: ({ onChangeStatus, onSearch, defaultStatus, title, options, chipsVariant }: StatusBarProps) => React.JSX.Element;

package/dist-types/FxStatusBar/helpers/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const statuses: {
+    Declined: string;
+    Pending: string;
+    Approved: string;
+    Active: string;
+    Challenge: string;
+    in_review: string;
+    Discrepancy: string;
+    no_pricing: string;
+    in_progress: string;
+    Duplicated: string;
+};

package/dist-types/FxStatusBar/index.d.ts

@@ -0,0 +1 @@
+export { StatusBar } from "./FxStatusBar";

package/dist-types/FxStatusBar/styles/statusBar.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StatusBarCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const StatusBarTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const StatusChipStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

package/dist-types/FxTextField/FxTextField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextFieldPropsType } from './text_field_types';
+export declare const FxTextField: ({ autoFocus, droppedItem, defaultValue, onChange, structure, endAdornment, startAdornment, required, helperText, error, errorText, disabled }: TextFieldPropsType) => React.JSX.Element;
+export default FxTextField;

package/dist-types/FxTextField/index.d.ts

@@ -0,0 +1,2 @@
+export { FxTextField } from './FxTextField';
+export type { TextFieldPropsType } from './text_field_types';

package/dist-types/FxTodo/FxTodo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TodoPropsType } from './todo_types';
+export declare function FxTodo({ todo }: TodoPropsType): React.JSX.Element;

package/dist-types/FxTodo/index.d.ts

@@ -0,0 +1,2 @@
+export { FxTodo } from './FxTodo';
+export { PriorityPropsType, TodoPropsType } from './todo_types';

package/dist-types/FxTodo/styles/todo.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const TodoCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const TodoCardHeader: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const TodoCardPriority: StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
+export declare const TodoCardTag: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const TodoCardContent: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const TodoCardContentButton: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const TodoCardFooter: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const TodoCardFooterDueDate: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

package/dist-types/FxWizard/FxWizard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WizardPropsType } from './wizard_types';
+export declare function Wizard({ open, content, currentPage, reverse, onCancel, title, actions, icon, componentStyles, divider, ...rest }: WizardPropsType): React.JSX.Element;

package/dist-types/FxWizard/WizardContext.d.ts

@@ -0,0 +1,6 @@
+import { ContextType } from './wizard_types';
+import React from 'react';
+export declare const WizardContext: React.Context<Partial<ContextType>>;
+export declare const WizardContextProvider: ({ children }: {
+    children: JSX.Element;
+}) => React.JSX.Element;

package/dist-types/FxWizard/index.d.ts

@@ -0,0 +1,3 @@
+export { Wizard } from "./FxWizard";
+export type { WizardPropsType } from "./wizard_types";
+export { WizardContext, WizardContextProvider } from "./WizardContext";

package/dist-types/FxWizard/styles/wizard.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledContent: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const StyledModal: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

package/package.json

@@ -5,11 +5,12 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.8.4",
-		"@fixefy/fixefy-ui-utils": "^0.0.5",
+		"@fixefy/fixefy-ui-utils": "^0.0.6",
 		"@mui/icons-material": "^5.14.11",
 		"@mui/material": "^5.14.11",
 		"@mui/styled-engine": "^5.14.11",
 		"@mui/styles": "^5.14.11",
+		"@react-spring/web": "^9.7.3",
 		"graphql-tag": "^2.12.6",
 		"next": "^13.5.3",
 		"react": "^18.2.0",
@@ -61,5 +62,5 @@
 		}
 	},
 	"types": "./dist-types/index.d.ts",
-	"version": "0.0.6"
+	"version": "0.0.7"
 }