frst-components 0.20.0

package/src/components/FI/feedInteraction/index.tsx

@@ -0,0 +1,343 @@
+import * as Styles from './feedInteractionStyles'
+import { FRSTTheme } from '../../../theme'
+import { ThemeProvider } from 'styled-components'
+import * as Icons from '@shared/icons'
+import { useState, useEffect } from 'react'
+import Rating from '@components/EBR/rating'
+import Avatar from '@components/avatar'
+import InputComment from '@components/input-comment'
+import CommentaryBox from '@components/commentary-box'
+import Button from '@components/buttons'
+
+interface IFeedInteraction {
+    id: string
+    qtdLikes: string
+    qtdComments: string
+    textLikes: string
+    textDeslike: string
+    textComments: string
+    textAvaluation: string
+    textAvaluationTitle: string
+    isLiked: boolean
+    isChallengeReview ?: boolean
+    ratingImpacto?: number
+    textImpacto?: string
+    ratingRelevancia?: number
+    textRelevancia ?: string
+    isPostReview ?: boolean
+    ratingPostReview ?: number
+
+    textLatestComment ?: string
+    userAvatar ?: string 
+    userCommentPlaceholder?: string
+    latestComment ?: any
+    commentList ?: any[]
+    textLoadMoreComments ?: string
+    textSaveCommentBtn ?: string
+    handleSaveCommentBtn ?: (comment) => void
+
+    isDisabledAvaluation ?: boolean
+
+    style ?: React.CSSProperties
+    onCommentChange ?: (e) => void
+    handleLikeClick ?: () => void
+    handleImpactoChange?: any
+    handleRelevanciaChange?: any
+    handlePostReviewChange ?: any
+
+    hideComments ?: any
+
+    textTotalView?: string
+    handleClickTextTotalViews?: () => void
+}
+
+export default function FeedInteraction ( props : IFeedInteraction ) {
+    const [openReview, setOpenReview] = useState(false);
+    const [openComments, setOpenComments] = useState(false);
+    const [loadCommentsText, setLoadCommentsText] = useState(props.commentList?.length < 2 ? false : true);
+    const [showMoreComments, setShowMoreComments] = useState(false);
+    const [focusComment, setFocusComment] = useState(false);
+    const [commentData, setCommentData] = useState('');
+
+    const [isVisibleComments, setIsVisibleComments] = useState(!props?.hideComments)
+
+    useEffect(() => {
+        setIsVisibleComments(!props?.hideComments)
+    }, [props?.hideComments])
+
+    const [stateLatestComment, setStateLatestComment] = useState(props.latestComment)
+    useEffect(() => {
+        setStateLatestComment(props.latestComment)
+    }, [props.latestComment]);
+
+    const OnReviewClick = () => {
+        setOpenReview(!openReview)
+        setOpenComments(false)
+    }
+
+    const OnCommentsClick = () => {
+        setOpenComments(!openComments)
+        setOpenReview(false)
+    }
+
+    const OnLoadCommentsClick = () => {
+        setLoadCommentsText(false)
+        setShowMoreComments(true)
+    }
+    const OnChangeComment = (e) => {
+        setCommentData(e.target.value)
+        setFocusComment(true)
+    }
+
+    const HandleSaveComment = () => {
+        props.handleSaveCommentBtn(commentData)
+        setCommentData('')
+        setFocusComment(false)
+    }
+
+
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+            <Styles.Container style={{...props.style}} id={props.id}>
+                {!props.textTotalView && (props.qtdLikes || props.qtdComments) ?
+                    <Styles.infoContent>
+                        {props.qtdLikes ?
+                            <Styles.info style={{left: 0}}> <Icons.ThumbsUpCovered /> &nbsp;{props.qtdLikes}</Styles.info>
+                            : null
+                        }
+                        {props.qtdComments ?
+                            <Styles.info style={{right: 0}}>{props.qtdComments}</Styles.info>
+                            : null
+                        }
+                    </Styles.infoContent> 
+                : <>
+                    {(props.textTotalView || props.qtdLikes || props.qtdComments) &&
+                        <Styles.infoContentWithView>
+                            <div style={{display: 'flex', flexDirection: 'row', gap: '5px'}}>
+                                {props.qtdLikes && <Styles.infoWithView> <Icons.ThumbsUpCovered /> &nbsp;{props.qtdLikes}</Styles.infoWithView> }
+                                {props.qtdLikes && props.qtdComments && <div>•</div>}
+                                {props.qtdComments && <Styles.infoWithView> {props.qtdComments} </Styles.infoWithView> }
+                            </div>
+                            {props.textTotalView && <Styles.infoWithView 
+                                style={{color: '#0645AD', fontWeight: 700 , cursor: 'pointer'}}
+                                onClick={() => props.handleClickTextTotalViews()}
+                            >{props.textTotalView}
+                            </Styles.infoWithView> }
+                        </Styles.infoContentWithView>
+                    }
+                </> }
+                <Styles.buttonsContent>
+                    {props.isLiked ?
+                        <Styles.buttons >
+                            <Button startIcon={<Icons.ThumbsUpIcon fill={'currentColor'} />} label={props.textDeslike} variant='link' handleClick={props.handleLikeClick}  />
+                        </Styles.buttons>
+                        :
+                        <Styles.buttons >
+                            <Button startIcon={<Icons.ThumbsUpIcon fill={'currentColor'} />} label={props.textLikes} variant='link' handleClick={props.handleLikeClick}  />
+                        </Styles.buttons>
+                    }
+                    { isVisibleComments &&
+                    <Styles.buttons onClick={OnCommentsClick} style={{color:openComments && FRSTTheme['colors'].linkPressed}}>
+                        <Icons.TalkIcon fill={'currentColor'} /> {props.textComments}
+                    </Styles.buttons>}
+                    <Styles.buttons onClick={OnReviewClick} style={{color:openReview && FRSTTheme['colors'].linkPressed}} >
+                        <Icons.StarOutlined fill={'currentColor'} /> {props.textAvaluation}
+                    </Styles.buttons>
+                </Styles.buttonsContent>
+                {openReview &&
+                    <Styles.reviewContainer>
+                        {props.textAvaluationTitle}
+                        <Styles.reviewContent>
+                            {props.isChallengeReview &&
+                                <div style={{display:'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column'}}>
+                                    <Rating isVisibleNumberRating={false} orientation='horizontal' qtdStars={5} sizeStars={20} marginStars={'3.5px'} disabled={props.isDisabledAvaluation} rating={props.ratingImpacto} handleRating={props?.handleImpactoChange} />
+                                    <span>{props.textImpacto}</span>
+                                </div>
+                            }
+                            {props.isChallengeReview &&
+                                <div style={{display:'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', marginLeft: 24}}>
+                                    <Rating isVisibleNumberRating={false} orientation='horizontal' qtdStars={5} sizeStars={20} marginStars={'3.5px'} disabled={props.isDisabledAvaluation} rating={props.ratingRelevancia} handleRating={props?.handleRelevanciaChange} />
+                                    <span>{props.textRelevancia}</span>
+                                </div>
+                            }
+                            {props.isPostReview &&
+                                <div style={{display:'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column'}}>
+                                    <Rating isVisibleNumberRating={false} orientation='horizontal' qtdStars={5} sizeStars={20} marginStars={'3.5px'} disabled={props.isDisabledAvaluation} rating={props.ratingPostReview} handleRating={props?.handlePostReviewChange} />
+                                </div>
+                            }
+                        </Styles.reviewContent>
+                    </Styles.reviewContainer>
+                }
+                {openComments &&
+                    <Styles.commentsContainer>
+                        <Styles.inputComment  >
+                            <Avatar size='40px' src={props.userAvatar}  />
+                            <InputComment styles={{width: '100%', marginLeft: 8}} 
+                                IDInput='userComment' 
+                                showCharacterCounter={false} 
+                                className='userComment'
+                                hasEmoji={true} 
+                                emojiWindowlanguage='pt'
+                                placeholder={props.userCommentPlaceholder? props.userCommentPlaceholder : ''} 
+                                onChange={OnChangeComment}
+                                value={commentData}
+                            />
+                            <Styles.submitButton style={{display: focusComment ? 'block' : 'none'}} >
+                                <Button variant='primary' label={props.textSaveCommentBtn} handleClick={HandleSaveComment} />
+                            </Styles.submitButton>
+                        </Styles.inputComment>
+                        {props.isChallengeReview ?
+                            stateLatestComment ?
+                                <Styles.commentList>
+                                    {props.textLatestComment}
+                                    <Styles.comment>
+                                        <Avatar size='40px' src={stateLatestComment.avatar} />
+                                        
+                                        <CommentaryBox styles={{width: '100%', marginLeft: 8}}
+                                            name={stateLatestComment.name}
+                                            date={stateLatestComment.date}
+                                            position={stateLatestComment.position}
+                                            value={stateLatestComment.value}
+                                            className={stateLatestComment.className}
+                                            onChange={stateLatestComment.onChange}
+                                            actionLike={stateLatestComment.actionLike}
+                                            textLiked={stateLatestComment.textLike}
+                                            textUnliked={stateLatestComment.textDeslike}
+                                            isLiked={stateLatestComment.isLiked}
+                                            totalLikes={stateLatestComment.totalLikes}
+                                            hasDropdown={stateLatestComment.hasDropdown}
+                                            isAuthor={stateLatestComment.isAuthor}
+                                            isMe={stateLatestComment.isMe}
+                                            actionDeleteComment={stateLatestComment.actionDeleteComment}
+                                            actionEditComment={stateLatestComment.actionEditComment}
+                                            actionAnswer={stateLatestComment.actionAnswer}
+                                            actionMakePrivate={stateLatestComment.actionMakePrivate}
+                                            actionUpdateValue={stateLatestComment.actionUpdateValue}
+                                            detectLinks={stateLatestComment.detectLinks}
+                                            hasAnswer={stateLatestComment.hasAnswer}
+                                            isPrivateAuthor={stateLatestComment.isPrivateAuthor}
+                                            isPrivateMe={stateLatestComment.isPrivateMe}
+                                            idTextComment={stateLatestComment.idTextComment}
+                                            textAnswer={stateLatestComment.textAnswer}
+                                            textCancelButton={stateLatestComment.textCancelButton}
+                                            textDeleteComment={stateLatestComment.textDeleteComment}
+                                            textEditComment={stateLatestComment.textEditComment}
+                                            textEdited={stateLatestComment.textEdited}
+                                            textMakePrivate={stateLatestComment.textMakePrivate}
+                                            textMakePublic={stateLatestComment.textMakePublic}
+                                            textPrivateComment={stateLatestComment.textPrivateComment}
+                                            textSaveButton={stateLatestComment.textSaveButton}
+                                            textSaveButtonMobile={stateLatestComment.textSaveButtonMobile}
+                                            textYou={stateLatestComment.textYou}
+                                            wasEdited={stateLatestComment.wasEdited}
+                                        />
+                                    </Styles.comment>
+                                </Styles.commentList>
+                                : null
+                            
+                            :
+                            props.commentList ?
+                                <Styles.commentList>
+                                    
+                                    <Styles.comment>
+                                        <Avatar size='40px' src={props.commentList[0].avatar} />
+                                        
+                                        <CommentaryBox styles={{width: '100%'}}
+                                            name={props.commentList[0].name}
+                                            date={props.commentList[0].date}
+                                            position={props.commentList[0].position}
+                                            value={props.commentList[0].value}
+                                            className={props.commentList[0].className}
+                                            onChange={props.commentList[0].onChange}
+                                            actionLike={props.commentList[0].actionLike}
+                                            textLiked={props.commentList[0].textLike}
+                                            textUnliked={props.commentList[0].textDeslike}
+                                            isLiked={props.commentList[0].isLiked}
+                                            totalLikes={props.commentList[0].totalLikes}
+                                            hasDropdown={props.commentList[0].hasDropdown}
+                                            isAuthor={props.commentList[0].isAuthor}
+                                            isMe={props.commentList[0].isMe}
+                                            actionDeleteComment={props.commentList[0].actionDeleteComment}
+                                            actionEditComment={props.commentList[0].actionEditComment}
+                                            actionAnswer={props.commentList[0].actionAnswer}
+                                            actionMakePrivate={props.commentList[0].actionMakePrivate}
+                                            actionUpdateValue={props.commentList[0].actionUpdateValue}
+                                            detectLinks={props.commentList[0].detectLinks}
+                                            hasAnswer={props.commentList[0].hasAnswer}
+                                            isPrivateAuthor={props.commentList[0].isPrivateAuthor}
+                                            isPrivateMe={props.commentList[0].isPrivateMe}
+                                            idTextComment={props.commentList[0].idTextComment}
+                                            textAnswer={props.commentList[0].textAnswer}
+                                            textCancelButton={props.commentList[0].textCancelButton}
+                                            textDeleteComment={props.commentList[0].textDeleteComment}
+                                            textEditComment={props.commentList[0].textEditComment}
+                                            textEdited={props.commentList[0].textEdited}
+                                            textMakePrivate={props.commentList[0].textMakePrivate}
+                                            textMakePublic={props.commentList[0].textMakePublic}
+                                            textPrivateComment={props.commentList[0].textPrivateComment}
+                                            textSaveButton={props.commentList[0].textSaveButton}
+                                            textSaveButtonMobile={props.commentList[0].textSaveButtonMobile}
+                                            textYou={props.commentList[0].textYou}
+                                            wasEdited={props.commentList[0].wasEdited}
+                                        />
+                                    </Styles.comment>
+                                    {loadCommentsText &&
+                                        <span style={{color: FRSTTheme['colors'].linkOnfocus, marginTop: 12, cursor: 'pointer'}} onClick={OnLoadCommentsClick}>{props.textLoadMoreComments}</span>
+                                    }
+                                    {showMoreComments &&
+                                        <Styles.comment>
+                                            <Avatar size='40px' src={props.commentList[1].avatar} />
+                                            
+                                            <CommentaryBox styles={{width: '100%'}}
+                                                name={props.commentList[1].name}
+                                                date={props.commentList[1].date}
+                                                position={props.commentList[1].position}
+                                                value={props.commentList[1].value}
+                                                className={props.commentList[1].className}
+                                                onChange={props.commentList[1].onChange}
+                                                actionLike={props.commentList[1].actionLike}
+                                                textLiked={props.commentList[1].textLike}
+                                                textUnliked={props.commentList[1].textDeslike}
+                                                isLiked={props.commentList[1].isLiked}
+                                                totalLikes={props.commentList[1].totalLikes}
+                                                hasDropdown={props.commentList[1].hasDropdown}
+                                                isAuthor={props.commentList[1].isAuthor}
+                                                isMe={props.commentList[1].isMe}
+                                                actionDeleteComment={props.commentList[1].actionDeleteComment}
+                                                actionEditComment={props.commentList[1].actionEditComment}
+                                                actionAnswer={props.commentList[1].actionAnswer}
+                                                actionMakePrivate={props.commentList[1].actionMakePrivate}
+                                                actionUpdateValue={props.commentList[1].actionUpdateValue}
+                                                detectLinks={props.commentList[1].detectLinks}
+                                                hasAnswer={props.commentList[1].hasAnswer}
+                                                isPrivateAuthor={props.commentList[1].isPrivateAuthor}
+                                                isPrivateMe={props.commentList[1].isPrivateMe}
+                                                idTextComment={props.commentList[1].idTextComment}
+                                                textAnswer={props.commentList[1].textAnswer}
+                                                textCancelButton={props.commentList[1].textCancelButton}
+                                                textDeleteComment={props.commentList[1].textDeleteComment}
+                                                textEditComment={props.commentList[1].textEditComment}
+                                                textEdited={props.commentList[1].textEdited}
+                                                textMakePrivate={props.commentList[1].textMakePrivate}
+                                                textMakePublic={props.commentList[1].textMakePublic}
+                                                textPrivateComment={props.commentList[1].textPrivateComment}
+                                                textSaveButton={props.commentList[1].textSaveButton}
+                                                textSaveButtonMobile={props.commentList[1].textSaveButtonMobile}
+                                                textYou={props.commentList[1].textYou}
+                                                wasEdited={props.commentList[1].wasEdited}
+                                            />
+                                        </Styles.comment>
+                                    }
+                                </Styles.commentList>
+                                : null
+                        }
+                        
+                        
+                    </Styles.commentsContainer>
+                }
+                    
+                
+            </Styles.Container>
+        </ThemeProvider>
+    )
+}

package/src/components/FI/follow/follow.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import Follow from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'FI/Follow',
+    component: Follow,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Follow {...args} />
+
+export const desafio = Template.bind({})
+desafio.args = {
+    textButtonFollow: 'Seguir',
+    style: {margin: 300},
+    followItemsChallenge:[
+        {
+            title: 'O desafio',
+            isFollowing: false,
+            handleChange: () => alert(`Alterado`)
+        },
+        {
+            title: 'A pessoa',
+            isFollowing: false,
+            handleChange: () => alert(`Alterado`)
+        },
+        {
+            title: 'Tag 1: Customer Success',
+            isFollowing: false,
+            handleChange: () => alert(`Alterado`)
+        },
+        {
+            title: 'Tag 2: Experiência do usuário',
+            isFollowing: false,
+            handleChange: () => alert(`Alterado`)
+        },
+        {
+            title: 'Tag 3: CSAT',
+            isFollowing: false,
+            handleChange: () => alert(`Alterado`)
+        },
+    ],
+    doNotFollowChallenge: {
+        title: 'Não quero ver isto',
+        isFollowing: false,
+        handleChange: () => alert(`Alterado`)
+    }
+}
+
+export const post = Template.bind({})
+post.args = {
+    textButtonFollow: 'Seguir',
+    style: {margin: 300},
+    
+    doNotFollowPostText: 'Não quero ver isto',
+    handleDoNotFollowPostClick: () => alert(`Unfollow!`)
+}

package/src/components/FI/follow/followStyles.ts

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+export const followButton = styled.div`
+    font-family: 'PT Sans';
+    font-size: 16px;
+    font-weight: 700;
+    color: ${({theme}) => theme.colors.linkOnfocus};
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    width: fit-content;
+
+    gap: 8px;
+    cursor: pointer;
+`
+
+export const followContainer = styled.div`
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    border-radius: 8px;
+    padding: 4px;
+    background-color: ${({theme}) => theme.colors.shadeWhite};
+`
+
+export const followItems = styled.div`
+    font-family: 'PT Sans';
+    font-size: 16px;
+    font-weight: 400;
+    color: ${({theme}) => theme.colors.shadeBlack};
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding: 12px;
+    width: 100%;
+    border-bottom: 1px solid ${({theme}) => theme.colors.borderPrimary};
+`

package/src/components/FI/follow/index.tsx

@@ -0,0 +1,144 @@
+import Button from "@components/buttons"
+import { Box, Popover, Switch } from "@mui/material";
+import { AddIcon, EyeOff } from "@shared/icons"
+import { useState } from "react";
+import { FRSTTheme } from "../../../theme";
+import { ThemeProvider } from "styled-components";
+import * as Styles from './followStyles'
+
+interface IFollow {
+    style: React.CSSProperties
+
+    textButtonFollow: string
+
+    followItemsChallenge?: Array<FollowInfo>
+    doNotFollowChallenge?: FollowInfo
+
+    doNotFollowPostText?: string
+    handleDoNotFollowPostClick ?: () => void
+}
+
+interface FollowInfo {
+    title: string
+    isFollowing: boolean
+    handleChange: () => void
+}
+
+export default function Follow ( props : IFollow){
+    const [openFollow, setOpenFollow] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+
+    const handleFollow = (event) => {
+        setOpenFollow(!openFollow)
+        setAnchor(event.currentTarget)
+    }
+
+    const handleClose = () => {
+        setOpenFollow(false)
+        setAnchor(null)
+    }
+
+    return(
+        <ThemeProvider theme={FRSTTheme}>
+            <Styles.followButton style={{...props.style}} onClick={handleFollow}>
+                <AddIcon fill="currentColor" /> 
+                {props.textButtonFollow} 
+            </Styles.followButton>
+            <Popover open={openFollow}
+                anchorEl={anchor}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                PaperProps={{
+                    style: {
+                        backgroundColor: "transparent",
+                        boxShadow: "none",
+                        borderRadius: 0
+                    }
+                }}
+                onClose={handleClose}
+            >
+                <Box
+                    sx={{
+                        position: "relative",
+                        mt: "10px",
+                        "&::before": {
+                            backgroundColor: "white",
+                            content: '""',
+                            display: "block",
+                            position: "absolute",
+                            width: 12,
+                            height: 12,
+                            top: -6,
+                            transform: "rotate(45deg)",
+                            left: "calc(100% - 30px)"
+                        }
+                    }}
+                />
+                <Styles.followContainer style={{width: props.doNotFollowPostText ? 'fit-content' : 300}}>
+                    {props.followItemsChallenge ? 
+                        props.followItemsChallenge.map((item, index) => {
+                            return(
+                                <Styles.followItems key={index}>
+                                    {item.title}
+                                    <Switch 
+                                        checked={item.isFollowing}
+                                        onChange={item.handleChange}
+                                        sx={{
+                                            '& .MuiSwitch-switchBase.Mui-checked': {
+                                                color: '#FFF', 
+                                            },
+                                            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                                                backgroundColor: '#FF4D0D !important',
+                                                opacity: 1,
+                                            },
+                                        }}
+                                    />
+                                </Styles.followItems>
+                            )
+                        })
+                        : null
+                    }
+                    {props.doNotFollowChallenge ?
+                        <Styles.followItems style={{border: 'none'}}>
+                            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#D60000', fontWeight: 700, gap: 8}}>
+                                <EyeOff width="24" height="24" fill="currentColor" />
+                                {props.doNotFollowChallenge.title}
+                            </div>
+                            <Switch 
+                                checked={props.doNotFollowChallenge.isFollowing}
+                                onChange={props.doNotFollowChallenge.handleChange}
+                                sx={{
+                                    '& .MuiSwitch-switchBase.Mui-checked': {
+                                        color: '#FFF', 
+                                    },
+                                    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                                        backgroundColor: '#FF4D0D !important',
+                                        opacity: 1,
+                                    },
+                                }}
+                            />
+                        </Styles.followItems>
+                        : null
+                    }
+                    {props.doNotFollowPostText ?
+                        <Styles.followItems style={{border: 'none'}}>
+                            <div onClick={props.handleDoNotFollowPostClick}
+                                style={{display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#D60000', fontWeight: 700, gap: 8, cursor: 'pointer'}}
+                                >
+                                <EyeOff width="24" height="24" fill="currentColor" />
+                                {props.doNotFollowPostText}
+                            </div>
+                        </Styles.followItems>
+                        : null
+                    }
+                </Styles.followContainer>
+            </Popover>
+        </ThemeProvider>
+    )
+}