frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/DS/hypotesisAndImpediment/Voting/index.js

@@ -0,0 +1,40 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { ExcludeVoteIcon } from '../../../../../public/customIcons/ExcludeVoteIcon.js';
+import { NewVoteIcon } from '../../../../../public/customIcons/newVoteIcon.js';
+import { SwitchVoteIcon } from '../../../../../public/customIcons/SwitchVoteIcon.js';
+import { ContainerVoting, VotingList, IconContainer, ContainerListUsers, ContainerScroll, VoterItem, VoterName, VotesCount, ContainerTitleVoting, TitleVoting } from './voting.styles.js';
+import { useState, useMemo } from 'react';
+import Avatar from '../../../avatar/index.js';
+import { Popper } from '@mui/material';
+
+const Voting = ({ type, voteText, onDeleteVote, onChangeVote, votersList, onVote, voteHasAlreadyBeenRegistered, isVotedByUserLogged, popperStyle }) => {
+    const [isVotingListHover, setIsVotingListHover] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleDeleteVote = () => {
+        onDeleteVote();
+    };
+    const handleChangeVote = () => {
+        onChangeVote();
+    };
+    const handleHoverVoteList = () => {
+        setAnchorEl(null);
+        setIsVotingListHover(true);
+    };
+    const handleLeaveVoteList = () => {
+        setIsVotingListHover(false);
+    };
+    const handleClickVotingList = (event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+    };
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popper' : undefined;
+    const votersToDisplay = useMemo(() => {
+        return votersList?.slice(0, 2);
+    }, [votersList]);
+    return (jsx(Fragment, { children: (isVotedByUserLogged || voteHasAlreadyBeenRegistered) ? (jsxs(ContainerVoting, { type: type, children: [(isVotedByUserLogged || voteHasAlreadyBeenRegistered) && (jsx(VotingList, { onClick: handleClickVotingList, children: jsxs(Fragment, { children: [votersToDisplay?.map((i, index) => (jsx("div", { children: jsx(Avatar, { src: i.avatar, size: "24px", border: "1px solid #fff", style: { cursor: 'pointer', zIndex: index === 1 ? 4 : 6 } }) }, index))), votersList?.length > 2 && (jsx("div", { style: { position: 'relative', display: 'inline-block' }, children: jsx(IconContainer, { children: "+" }) }))] }) })), jsx(Popper, { id: id, open: open, anchorEl: anchorEl, sx: { paddingTop: 1.5, paddingRight: 6.5, ...popperStyle }, children: jsx(ContainerListUsers, { children: jsx(ContainerScroll, { children: votersList?.map((voter, index) => (jsxs(VoterItem, { children: [jsx(Avatar, { src: voter.avatar, size: "24px" }), jsx(VoterName, { children: voter.name })] }, index))) }) }) }), jsx(VotesCount, { onMouseEnter: handleHoverVoteList, onMouseLeave: handleLeaveVoteList, children: isVotingListHover ? (jsxs(Fragment, { children: [" ", isVotedByUserLogged ?
+                                jsxs("div", { onClick: handleDeleteVote, children: [jsx(ExcludeVoteIcon, {}), "Excluir voto"] })
+                                :
+                                    jsxs("div", { onClick: handleChangeVote, children: [jsx(SwitchVoteIcon, {}), "Trocar voto"] })] })) : (jsxs("span", { children: [votersList?.length, " ", votersList?.length > 1 ? 'votos' : 'voto'] })) })] })) : (jsx(ContainerVoting, { type: type, children: jsxs(ContainerTitleVoting, { onClick: onVote, children: [jsx(NewVoteIcon, {}), jsx(TitleVoting, { children: voteText })] }) })) }));
+};
+
+export { Voting };

package/dist/esm/src/components/DS/hypotesisAndImpediment/Voting/voting.styles.js

@@ -0,0 +1,126 @@
+import styled, { css } from 'styled-components';
+
+const backgroundColors = {
+    prioritize: '#EE9F08',
+    owner: '#F1C24A',
+    suggested: '#F9DF9F',
+};
+const ContainerVoting = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* min-width: 68px; */
+    width: fit-content;
+    height: 36px;
+    padding: 4px;
+    cursor: pointer;
+    border-radius: 8px;
+    white-space: nowrap;
+    ${({ type }) => {
+    const backgroundColor = backgroundColors[type];
+    return css `
+            background-color: ${backgroundColor};
+        `;
+}}
+`;
+const VotingList = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    div {
+        flex-direction: row;
+        display: flex;
+        :nth-child(n+2){
+            margin-left: -8px;
+        }
+    }
+`;
+const ContainerListUsers = styled.div `
+    min-width: 225px;
+    height: 192px;
+    background: #FFFFFF;
+    padding-top: 12px; 
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 8px 0px;
+    padding-right: 8px;
+    padding-bottom: 12px;
+
+`;
+const ContainerScroll = styled.div `
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    width: 100%;
+
+    ::-webkit-scrollbar {
+        width: 3px; /* Largura da barra de rolagem */
+        height: 25px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #757575; /* Cor da parte deslizante da barra de rolagem */
+        border-radius: 15px;
+    }
+`;
+const VotesCount = styled.div `
+    margin-left: 4px;
+    margin-right: 4px;
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+    }
+`;
+const ContainerTitleVoting = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content:center;
+    gap: 4px;
+`;
+const TitleVoting = styled.p `
+    font-family: PT Sans;
+    font-size: 14px;
+    font-weight: 700;
+    color: #222222;
+`;
+const VoterItem = styled.div `
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    gap: 8px;
+
+    width: calc(100% + 8px);
+
+    border-bottom: 1px solid #EBEBEB;
+    &:last-child {
+        border-bottom: none;
+    }
+
+`;
+const VoterName = styled.span `
+    font-size: 14px;
+    color: #333;
+`;
+const IconContainer = styled.div `
+    position: relative;
+    display: flex;
+    font-family: PT Sans;
+    justify-content: end;
+    align-items: center;
+    align-content:center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #444444;
+    border: 1.5px solid #F2F2F2;
+    color:  #F2F2F2;
+    box-sizing: border-box;
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 16.82px;
+    padding-right: 6px;
+`;
+
+export { ContainerListUsers, ContainerScroll, ContainerTitleVoting, ContainerVoting, IconContainer, TitleVoting, VoterItem, VoterName, VotesCount, VotingList };

package/dist/esm/src/components/DS/hypotesisAndImpediment/hypothesisAndImpediment.style.js

@@ -0,0 +1,115 @@
+import styled, { css } from 'styled-components';
+
+const backgroundColors = {
+    hypothesis: {
+        prioritize: '#FAB637',
+        owner: '#f8d784',
+        suggested: '#FBEECF'
+    },
+    impediment: {
+        prioritize: '#D2ADE3',
+        owner: '#E5CBF1',
+        suggested: '#EFE1F6'
+    }
+};
+const separatorColors = {
+    hypothesis: {
+        prioritize: '#CF8E11',
+        owner: '#C8A561',
+        suggested: '#E1CCA5'
+    },
+    impediment: {
+        prioritize: '#AA83C3',
+        owner: '#BF9AD6',
+        suggested: '#DAB4EC'
+    }
+};
+const borderAvatar = {
+    hypothesis: {
+        prioritize: '#C48000',
+        owner: '#EE9F08',
+        suggested: '#EE9F08'
+    },
+    impediment: {
+        prioritize: '#AD46FF',
+        owner: '#AD46FF',
+        suggested: '#AD46FF'
+    }
+};
+const MainContainer = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 56px;
+    color: #222222;
+    box-sizing: border-box;
+`;
+const ContainerHypotheis = styled.div `
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-family: PT Sans;
+    font-size: 14px;
+    border-radius: 8px;
+
+    ${({ type, variant }) => {
+    const backgroundColor = backgroundColors[variant][type];
+    return css `
+            background: ${backgroundColor};
+        `;
+}}
+`;
+const SplitContainerDescription = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 10px 16px 10px 0px;
+    gap: 16px;
+    height: 100%;
+    width: 100%;
+`;
+styled.div `
+    height: 24px;
+    width: 1px;
+    margin-left: 14px;
+    margin-right: 14px;
+    ${({ type, variant }) => {
+    const border = separatorColors[variant][type];
+    return css `
+            border: 1px solid ${border};
+        `;
+}}
+`;
+const Title = styled.span `
+    font-weight: 700;
+    white-space: nowrap;
+`;
+const Description = styled.span `
+    font-weight: 400;
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 6px 16px 6px 16px;
+
+    ${({ type, variant }) => {
+    const border = separatorColors[variant][type];
+    return css `
+            border-left: 1px solid ${border};
+        `;
+}}
+`;
+const LimitCharsContainer = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 4px;
+`;
+const LimitCharsExceededMessage = styled.span `
+    color: #a50000;
+    font-size: 12px;
+    margin-left: 5px;
+`;
+
+export { ContainerHypotheis, Description, LimitCharsContainer, LimitCharsExceededMessage, MainContainer, SplitContainerDescription, Title, borderAvatar };

package/dist/esm/src/components/DS/hypotesisAndImpediment/index.js

@@ -0,0 +1,161 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { borderAvatar, MainContainer, ContainerHypotheis, SplitContainerDescription, Title, Description, LimitCharsContainer, LimitCharsExceededMessage } from './hypothesisAndImpediment.style.js';
+import Avatar from '../../avatar/index.js';
+import MenuMore from '../../menu-more/index.js';
+import { StarPrioritize, EditHipoteses, AddAction, TrashHipoteses } from '../../../shared/icons.js';
+import Tooltip from '../tooltip/index.js';
+import UpDownButtons from './UpDownButtons/index.js';
+import { Voting } from './Voting/index.js';
+import { TextField } from '@mui/material';
+import { TagAlert } from '../../../../public/customIcons/TagAlert.js';
+
+const HypothesisAndImpediment = ({ description, variant, type, avatar, id, index, authorGoalId, userLoggedId, authorName, handleViewProfile, authorId, hasVoting, voteHasAlreadyBeenRegistered, isVotedByUserLogged, voteText, onDeleteVote, onChangeVote, votersList, onDeleteHipotesisOrImpediment, onSaveEditHipotesisOrImpediment, hasEditHipotesisOrImpediment, onVote, onPrioritize, onDown, onUp, hasUpdownButtons, onClickAction, onAddActions, hasAddActions, popperStyle }) => {
+    const [editDescription, setEditDescription] = useState(description);
+    const [isEditing, setIsEditing] = useState(false);
+    const isOwnerGoal = authorGoalId === authorId;
+    const limitCaraterers = variant === 'impediment' ? 365 : 200;
+    const [isLimitExceeded, setIsLimitExceeded] = useState(false);
+    let options = [
+        hasUpdownButtons &&
+            userLoggedId === authorGoalId && {
+            startIcon: jsx(StarPrioritize, { stroke: type === 'prioritize' ? '#9C9C9C' : '#222222' }),
+            description: 'Priorizar',
+            onClick: () => onPrioritize(id),
+            disabled: type === 'prioritize',
+            color: type === 'prioritize' ? '#9C9C9C' : '#222222'
+        },
+        {
+            startIcon: jsx(EditHipoteses, {}),
+            description: 'Editar',
+            onClick: (e) => setIsEditing(true)
+        },
+        hasAddActions && {
+            startIcon: jsx(AddAction, {}),
+            description: 'Adicionar ações',
+            onClick: () => onAddActions(id),
+            color: '#222222'
+        },
+        {
+            startIcon: jsx(TrashHipoteses, {}),
+            description: 'Excluir',
+            onClick: () => onDeleteHipotesisOrImpediment(id),
+            color: '#C00F00'
+        }
+    ].filter((item) => item);
+    //if the type is prioritize, the option to delete is not available, just edit
+    // options = type === 'prioritize' ? options.filter((item) => item.description !== 'Excluir') : options
+    useEffect(() => {
+        setEditDescription(description);
+    }, [description]);
+    useEffect(() => {
+        editDescription?.length >= limitCaraterers ? setIsLimitExceeded(true) : setIsLimitExceeded(false);
+    }, [editDescription]);
+    const title = useMemo(() => {
+        if (type === 'prioritize' && variant === 'hypothesis')
+            return 'HIPÓTESE PRIORIZADA';
+        if (type === 'prioritize' && variant === 'impediment')
+            return 'CAUSA PRIORIZADA';
+        if (variant == 'hypothesis')
+            return `HIPÓTESE ${index}`;
+        return `CAUSA ${index}`;
+    }, [type, variant, index]);
+    const avatarBorder = isOwnerGoal ? `2px solid ${borderAvatar[variant][type]}` : 'none';
+    const handleSaveDescription = () => {
+        if (isEditing) {
+            onSaveEditHipotesisOrImpediment(editDescription);
+            setIsEditing(false);
+        }
+    };
+    const handleCancel = () => {
+        setEditDescription(description);
+        setIsEditing(false);
+    };
+    const validHasEditHipotesisOrImpediment = useMemo(() => {
+        if (!hasEditHipotesisOrImpediment)
+            return false;
+        //author of the goal can edit but also owner of the hipotesis or impediment if it's priorized
+        if (authorGoalId === userLoggedId || (type === 'prioritize' && hasEditHipotesisOrImpediment))
+            return true;
+        if (type !== 'prioritize') {
+            return authorId === userLoggedId;
+        }
+        return false;
+    }, [type, hasEditHipotesisOrImpediment, authorGoalId, authorId, userLoggedId]);
+    const clickTimeoutRef = useRef(null);
+    const handleClickAction = (event) => {
+        if (clickTimeoutRef.current) {
+            clearTimeout(clickTimeoutRef.current);
+        }
+        clickTimeoutRef.current = setTimeout(() => {
+            if (!isEditing) {
+                event.stopPropagation();
+                onClickAction();
+            }
+        }, 300);
+    };
+    const inputRef = useRef(null);
+    const handleChange = (event) => {
+        if (limitCaraterers > editDescription?.length || event.target.value?.length < editDescription?.length) {
+            let newValue = event.target.value;
+            if (newValue.length > limitCaraterers) {
+                newValue = newValue.substring(0, limitCaraterers);
+            }
+            setEditDescription(newValue);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            handleSaveDescription();
+        }
+        else if (event.key === 'Escape') {
+            handleCancel();
+        }
+    };
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            setTimeout(() => {
+                inputRef.current.focus();
+            }, 200);
+        }
+    }, [isEditing]);
+    return (jsxs(Fragment, { children: [jsx(MainContainer, { children: jsxs(ContainerHypotheis, { type: type, variant: variant, children: [hasUpdownButtons && (jsx(UpDownButtons, { type: type, variant: variant, onDownClick: () => onDown(id, index), onUpClick: () => onUp(id, index) })), jsxs(SplitContainerDescription, { children: [jsx(Tooltip, { content: authorName, direction: 'bottom', style: {
+                                        fontFamily: 'PT Sans',
+                                        fontWeight: 400,
+                                        fontSize: '14px',
+                                        color: 'rgba(117, 117, 117, 1)',
+                                        width: 'fit-content',
+                                        height: '31px',
+                                        top: '8px',
+                                        left: '4px',
+                                        whiteSpace: 'nowrap',
+                                        boxShadow: ' 0px 0px 18px 0px rgba(34, 34, 34, 0.2)'
+                                    }, children: jsx(Avatar, { src: avatar, size: isOwnerGoal ? '24px' : '24px', border: avatarBorder, style: { cursor: 'pointer', marginLeft: '16px' }, onClick: () => handleViewProfile(authorId) }) }), jsx(Title, { children: title }), jsx(Description, { type: type, variant: variant, onClick: handleClickAction, onDoubleClick: () => {
+                                        if (clickTimeoutRef.current) {
+                                            clearTimeout(clickTimeoutRef.current);
+                                        }
+                                        if (hasEditHipotesisOrImpediment)
+                                            setIsEditing(true);
+                                    }, style: { height: isEditing ? 'auto' : 'fit-content' }, children: isEditing ? (jsx(TextField, { inputRef: inputRef, value: editDescription, onBlur: handleSaveDescription, onChange: handleChange, onKeyDown: handleKeyDown, multiline: true, fullWidth: true, variant: "standard", InputProps: {
+                                            disableUnderline: true,
+                                            style: {
+                                                fontFamily: 'PT Sans',
+                                                fontSize: '14px',
+                                                lineHeight: 1.3
+                                            }
+                                        }, onFocus: (e) => e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length) })) : (jsx(Tooltip, { content: 'Clique na hipótese para ver as ações vinculadas', direction: 'bottom', wrapperWidth: "100%", style: {
+                                            fontFamily: 'PT Sans',
+                                            fontWeight: 400,
+                                            fontSize: '14px',
+                                            color: '#757575',
+                                            width: '171px',
+                                            height: '52px',
+                                            top: '8px',
+                                            left: '4px',
+                                            whiteSpace: 'wrap',
+                                            boxShadow: ' 0px 25px 18px -20px #22222233;',
+                                            display: variant === 'impediment' || isEditing ? 'none' : 'block'
+                                        }, children: jsx("div", { style: { width: '100%', overflow: 'hidden' }, children: editDescription }) })) }), !isEditing && hasVoting && (jsx(Voting, { voteText: voteText, type: type, onDeleteVote: onDeleteVote, votersList: votersList, onVote: () => onVote(id), onChangeVote: () => onChangeVote(id), isVotedByUserLogged: isVotedByUserLogged, voteHasAlreadyBeenRegistered: voteHasAlreadyBeenRegistered, popperStyle: popperStyle })), !isEditing && validHasEditHipotesisOrImpediment && (jsx(MenuMore, { options: options, isContainerOptions: true, closeAfterClick: true }))] })] }) }), isEditing && isLimitExceeded && (jsxs(LimitCharsContainer, { children: [jsx(TagAlert, { color: "#A50000" }), jsx(LimitCharsExceededMessage, { children: 'Você atingiu a quantidade máxima de caracteres' })] }))] }));
+};
+
+export { HypothesisAndImpediment };

package/dist/esm/src/components/DS/impedimentosTab/addImpedimentoModal/index.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Button from '../../../buttons/index.js';
+import { ContainerModal } from './styles.js';
+import { Popover } from '@mui/material';
+import { useState } from 'react';
+import TextField from '../../../form-elements/textfield/index.js';
+import { LimitCharsExceededMessage } from '../../hypotesisAndImpediment/hypothesisAndImpediment.style.js';
+import { TagAlert } from '../../../../../public/customIcons/TagAlert.js';
+
+function AddImpedimentoModal({ isOpen, onClose, onSaveBtn, anchor }) {
+    const [text, setText] = useState('');
+    const limitCaraterersImpediments = 365;
+    const handleClose = () => {
+        setText('');
+        onClose();
+    };
+    const handleSave = () => {
+        onSaveBtn(text);
+        handleClose();
+    };
+    return (jsx(Popover, { open: isOpen, onClose: handleClose, anchorEl: anchor, anchorOrigin: {
+            horizontal: 'right',
+            vertical: 'bottom'
+        }, transformOrigin: {
+            horizontal: 'right',
+            vertical: 'top'
+        }, children: jsxs(ContainerModal, { children: [jsxs("div", { style: { width: '100%' }, children: [jsx(TextField, { value: text, onChange: (e) => setText(e.target.value), placeholder: "Sugira a causa aqui", maxLength: limitCaraterersImpediments }), text?.length >= limitCaraterersImpediments && (jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'flex-start',
+                                marginTop: '4px',
+                                justifyContent: 'flex-start'
+                            }, children: [jsx(TagAlert, { color: "#A50000" }), jsx(LimitCharsExceededMessage, { children: 'Você atingiu a quantidade máxima de caracteres' })] }))] }), jsx(Button, { label: "Salvar", variant: "expandedPrimary", disabled: text === '', handleClick: handleSave })] }) }));
+}
+
+export { AddImpedimentoModal as default };

package/dist/esm/src/components/DS/impedimentosTab/addImpedimentoModal/styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const ContainerModal = styled('div') `
+    width: 280px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: #FFFFFF;
+    box-shadow: 0px 5px 15px 0px #00000040;
+`;
+
+export { ContainerModal };

package/dist/esm/src/components/DS/impedimentosTab/dropDown/index.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover } from '@mui/material';
+import { ContainerDropdown, DropdownRow } from './styles.js';
+
+function Dropdown({ isOpen, anchor, onClose, impedimentoList, onClickImpedimento }) {
+    const render = () => {
+        return (impedimentoList.map((item, index) => {
+            return (jsx(DropdownRow, { onClick: () => onClickImpedimento(item), children: jsxs("p", { children: [item.title, ": ", item.description] }) }, index));
+        }));
+    };
+    return (jsx(Popover, { open: isOpen, onClose: onClose, anchorEl: anchor, anchorOrigin: {
+            horizontal: 'right',
+            vertical: 'bottom'
+        }, transformOrigin: {
+            horizontal: 'right',
+            vertical: 'top'
+        }, children: jsx(ContainerDropdown, { children: render() }) }));
+}
+
+export { Dropdown as default };

package/dist/esm/src/components/DS/impedimentosTab/dropDown/styles.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const ContainerDropdown = styled('div') `
+    display: flex;
+    flex-direction: column;
+    padding: 4px 8px;
+    border-radius: 8px;
+    box-shadow: 0px 5px 15px 0px #00000040;
+    background-color: #FFFFFF;
+    width: 300px;
+`;
+const DropdownRow = styled('div') `
+    padding: 10px 4px;
+    border-top: 1px solid #E0E0E0;
+    cursor: default;
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 16px;
+        line-height: 1.1;
+        font-weight: 400;
+        color: ${({ theme }) => theme.colors.neutralsGrey1};
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden
+    }
+
+    :first-child {
+        border: none;
+    }
+
+    :hover {
+        background-color: ${({ theme }) => theme.colors.neutralsGrey8};
+    }
+    
+`;
+
+export { ContainerDropdown, DropdownRow };