frst-components 0.20.0

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

@@ -0,0 +1,190 @@
+import Button from '@components/buttons'
+import { Box, Popover } from '@mui/material'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import NotificationCard from '../notificationCard'
+import * as Styles from './notificationPopOverStyles'
+import { BackArrow } from '@shared/icons'
+import { useState } from 'react'
+
+type notificationCard = {
+  notificationAvatar: string
+  notificationDescription: string
+  isNewNotification: boolean
+  notificationDate: string
+
+  textNew: string
+
+  handleClick: () => void
+}
+interface INotificationPopOver {
+  notificationList?: Array<notificationCard>
+
+  textBack: string
+  textNotification: string
+  textMarkAllAsRead: string
+  textEmptyState: string
+
+  isOpen: boolean
+  anchor: any
+  isMobile: boolean
+
+  handleClickMarkRead: () => void
+  setOnAreaPopOver?: (e) => void
+  handleClickBack: () => void
+}
+
+export default function NotificationPopOver(props: INotificationPopOver) {
+  const isNewNotification = props.notificationList
+    ? props.notificationList.filter((notification) => notification.isNewNotification)
+    : []
+  const emptyStateImage = 'https://i.gyazo.com/5551ed515f94a8b2502d2694d67633dc.png'
+  const notificationsLength = props?.notificationList?.length
+
+  return (
+    <ThemeProvider theme={FRSTTheme}>
+      {props.isMobile ? (
+        <div style={{ backgroundColor: '#E5E5E5' }}>
+          <div style={{ padding: 16 }}>
+            <Button
+              variant="link"
+              startIcon={<BackArrow fill="currentColor" />}
+              label={props.textBack}
+              handleClick={() => props.handleClickBack()}
+            />
+          </div>
+          <Styles.notificationContainerMobile>
+            <Styles.notificationHeader>
+              <span
+                style={{ fontFamily: 'Work Sans', fontSize: 20, fontWeight: 500, color: FRSTTheme['colors'].primary1 }}
+              >
+                {props.textNotification}
+              </span>
+              <Button
+                variant="link"
+                label={props.textMarkAllAsRead}
+                disabled={isNewNotification.length ? false : true}
+                handleClick={props.handleClickMarkRead}
+              />
+            </Styles.notificationHeader>
+            {props.notificationList ? (
+              <Styles.notificationCardList>
+                {props.notificationList.map((item, index) => {
+                  return (
+                    <div style={{ borderBottom: `1px solid ${FRSTTheme['colors'].borderPrimary}` }}>
+                      <NotificationCard
+                        style={{ width: '100%' }}
+                        notificationAvatar={item.notificationAvatar}
+                        notificationDescription={item.notificationDescription}
+                        notificationDate={item.notificationDate}
+                        textNew={item.textNew}
+                        isNewNotification={item.isNewNotification}
+                        handleClick={item.handleClick}
+                        key={index}
+                      />
+                    </div>
+                  )
+                })}
+              </Styles.notificationCardList>
+            ) : (
+              <Styles.emptyState>
+                <Styles.emptyStateInfo>
+                  <img src={emptyStateImage} alt="Empty notification list" />
+                  <span>{props.textEmptyState}</span>
+                </Styles.emptyStateInfo>
+              </Styles.emptyState>
+            )}
+          </Styles.notificationContainerMobile>
+        </div>
+      ) : (
+        <Styles.PopoverCustom
+          open={props.isOpen}
+          anchorEl={props.anchor}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center'
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center'
+          }}
+          PaperProps={{
+            style: {
+              backgroundColor: 'transparent',
+              boxShadow: 'none',
+              borderRadius: 0
+            }
+          }}
+        >
+          <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(50% - 6px)'
+              }
+            }}
+          />
+
+          <Styles.notificationContainer>
+            <Styles.notificationHeader
+              onMouseOver={() => props?.setOnAreaPopOver(true)}
+              onMouseOut={() => props?.setOnAreaPopOver(false)}
+            >
+              <span
+                style={{ fontFamily: 'Work Sans', fontSize: 20, fontWeight: 500, color: FRSTTheme['colors'].primary1 }}
+              >
+                {props.textNotification}
+              </span>
+              <Button
+                variant="link"
+                label={props.textMarkAllAsRead}
+                disabled={isNewNotification.length ? false : true}
+                handleClick={props.handleClickMarkRead}
+              />
+            </Styles.notificationHeader>
+            {props.notificationList ? (
+              <Styles.notificationCardList notificationsLength={notificationsLength}>
+                {props.notificationList.map((item, index) => {
+                  return (
+                    <div
+                      style={{ borderBottom: `1px solid ${FRSTTheme['colors'].borderPrimary}` }}
+                      onMouseOver={() => props?.setOnAreaPopOver(true)}
+                      onMouseOut={() => props?.setOnAreaPopOver(false)}
+                      key={index}
+                    >
+                      <NotificationCard
+                        notificationAvatar={item.notificationAvatar}
+                        notificationDescription={item.notificationDescription}
+                        notificationDate={item.notificationDate}
+                        textNew={item.textNew}
+                        isNewNotification={item.isNewNotification}
+                        handleClick={item.handleClick}
+                        key={index}
+                      />
+                    </div>
+                  )
+                })}
+              </Styles.notificationCardList>
+            ) : (
+              <Styles.emptyState>
+                <Styles.emptyStateInfo>
+                  <img src={emptyStateImage} alt="Empty notification list" />
+                  <span>{props.textEmptyState}</span>
+                </Styles.emptyStateInfo>
+              </Styles.emptyState>
+            )}
+          </Styles.notificationContainer>
+        </Styles.PopoverCustom>
+      )}
+    </ThemeProvider>
+  )
+}

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

@@ -0,0 +1,117 @@
+import React from 'react'
+
+import NotificationPopOver from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'FI/Notification PopOver',
+  component: NotificationPopOver
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <NotificationPopOver {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+  textBack: 'Voltar',
+  textNotification: 'Notificações',
+  textMarkAllAsRead: 'Marcar todas como lidas',
+  textEmptyState: 'No momento você não tem notificações.',
+
+  handleClickMarkRead: () => alert('Click!'),
+  handleClickBack: () => alert('Click!'),
+  isOpen: true,
+  isMobile: false,
+
+  notificationList: [
+    {
+      notificationAvatar:
+        'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+      notificationDescription: `Edson Corbari comentou no seu desafio “lataforma D2L”.`,
+      isNewNotification: true,
+      textNew: 'Nova',
+      notificationDate: 'Hoje',
+
+      handleClick: () => alert('Notificação clicada!')
+    },
+    {
+      notificationAvatar:
+        'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+      notificationDescription: `Edson Corbari comentou no seu desafio “Aumentar o engajamento dos alunos na plataforma D2L”.`,
+      isNewNotification: true,
+      textNew: 'Nova',
+      notificationDate: 'Hoje',
+
+      handleClick: () => alert('Notificação clicada!')
+    },
+    {
+      notificationAvatar:
+        'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+      notificationDescription: `Edson Corbari comentou no seu desafio “Aumentar o engajamento dos alunos na plataforma D2L”.`,
+      isNewNotification: true,
+      textNew: 'Nova',
+      notificationDate: 'Hoje',
+
+      handleClick: () => alert('Notificação clicada!')
+    },
+    {
+      notificationAvatar:
+        'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+      notificationDescription: `Edson Corbari comentou no seu desafio “lataforma D2L”.`,
+      isNewNotification: true,
+      textNew: 'Nova',
+      notificationDate: 'Hoje',
+
+      handleClick: () => alert('Notificação clicada!')
+    },
+    {
+      notificationAvatar:
+        'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+      notificationDescription: `Edson Corbari comentou no seu desafio “lataforma D2L”.`,
+      isNewNotification: true,
+      textNew: 'Nova',
+      notificationDate: 'Hoje',
+
+      handleClick: () => alert('Notificação clicada!')
+    },
+    {
+      notificationAvatar:
+        'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+      notificationDescription: `Edson Corbari comentou no seu desafio “lataforma D2L”.`,
+      isNewNotification: true,
+      textNew: 'Nova',
+      notificationDate: 'Hoje',
+
+      handleClick: () => alert('Notificação clicada!')
+    },
+    {
+      notificationAvatar:
+        'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+      notificationDescription: `Edson Corbari comentou no seu desafio “Aumentar o engajamento dos alunos na plataforma D2L”.`,
+      isNewNotification: false,
+      textNew: 'Nova',
+      notificationDate: 'Hoje',
+
+      handleClick: () => alert('Notificação clicada!')
+    },
+    {
+      notificationAvatar:
+        'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+      notificationDescription: `Edson Corbari comentou no seu desafio “Aumentar o engajamento dos alunos na plataforma D2L”.`,
+      isNewNotification: false,
+      textNew: 'Nova',
+      notificationDate: 'Hoje',
+
+      handleClick: () => alert('Notificação clicada!')
+    }
+  ]
+}
+export const emptyState = Template.bind({})
+emptyState.args = {
+  textNotification: 'Notificações',
+  textMarkAllAsRead: 'Marcar todas como lidas',
+  textEmptyState: 'No momento você não tem notificações.',
+
+  handleClickMarkRead: () => alert('Click!'),
+  isOpen: true
+}

package/src/components/FI/notificationPopOver/notificationPopOverStyles.ts

@@ -0,0 +1,109 @@
+import styled from 'styled-components'
+import { Box, Popover } from '@mui/material'
+
+type NotificationListProps = {
+  notificationsLength?: number
+}
+export const PopoverCustom = styled(Popover)`
+  & > div:nth-child(3) {
+    border-radius: 7px !important;
+    box-shadow: 0px 25px 62px -19px rgba(0, 0, 0, 0.37) !important;
+    -webkit-box-shadow: 0px 25px 62px -19px rgba(0, 0, 0, 0.47);
+    -moz-box-shadow: 0px 25px 62px -19px rgba(0, 0, 0, 0.47);
+  }
+`
+
+export const notificationContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  border-radius: 8px;
+  width: 376px;
+  height: 412px;
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+  border: 1px solid ${({ theme }) => theme.colors.borderPrimary} !important;
+  /* & > div:nth-child(2) > div:nth-child(3) {
+    display: none !important;
+  } */
+`
+
+export const notificationContainerMobile = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-top: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+  background-color: ${({ theme }) => theme.colors.shadeWhite};
+
+  & > div:nth-child(2) {
+    max-height: 80vh !important;
+    overflow-y: scroll !important;
+  }
+`
+
+export const notificationHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+  width: 100%;
+`
+
+export const notificationCardList = styled.div<NotificationListProps>`
+  height: 100%;
+  min-height: 300px;
+  min-width: 100%;
+  overflow: hidden;
+  overflow-y: ${(props) => props?.notificationsLength > 3 && 'scroll'};
+  width: 100%;
+
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 90%;
+    display: flex;
+    box-sizing: border-box;
+    margin-right: 5px !important;
+  }
+  &::-webkit-scrollbar-track {
+    background: ${({ theme }) => theme.colors.shadeWhite};
+    height: 30%;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.colors.borderPrimary};
+    height: 30%;
+    border-radius: 5px;
+    margin: 3px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ theme }) => theme.colors.borderPrimary};
+    height: 30%;
+  }
+`
+
+export const emptyState = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`
+
+export const emptyStateInfo = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 24px;
+
+  text-align: center;
+  font-family: 'PT Sans';
+  font-size: 16px;
+  font-weight: 700;
+  color: ${({ theme }) => theme.colors.neutralsGrey3};
+`

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

@@ -0,0 +1,188 @@
+import Avatar from '@components/avatar'
+import Button from '@components/buttons'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import FeedInteraction from '../feedInteraction'
+import * as Styles from './postFeedStyles' 
+
+import Markdown from 'markdown-to-jsx';
+import { useEffect, useState } from 'react'
+
+interface IPostFeed{
+    title: string
+    description: string
+    style?: React.CSSProperties
+
+    postImage?: string
+    postVideoId?: string
+    videoWidth?: string
+    videoHeight?: string
+
+    textPostButton?: string
+    handlePostButtonClick?: () => void
+
+/**
+ * Feed Interaction props
+ */
+    postId?: string
+    isPostLiked?: boolean
+    qtdComments?: string
+    qtdLikes?: string
+    userAvatar?: string
+    textAvaluation?: string
+    textAvaluationTitle?: string
+    textComments?: string
+    textLikes?: string
+    textDeslike?: string
+    userCommentPlaceholder?: string
+    textLoadMoreComments?: string
+    textSaveCommentBtn?: string
+    isDisabledAvaluation?: boolean
+    ratingPostReview?: number
+    commentList?: any
+    handleLikeClick?: () => void
+    handlePostReviewChange?: () => void
+    handleSaveCommentBtn?: (comment) => void
+    onCommentChange?: (e) => void,
+    isVisibleComments?: boolean,
+    videoSource?: string,
+    fixPostButton?: any,
+    isCompletePost?: boolean,
+}
+
+export default function PostFeed( props : IPostFeed ){
+    const FRSTAvatar = 'https://api-deimos-cdn.frstfalconi.cloud/logo_first.png'
+
+    const [isVisibleComments, setIsVisibleComments] = useState(props.isVisibleComments)
+    const [ actionArea, setActionArea] = useState(false)
+
+    useEffect(() => {
+        setIsVisibleComments(props.isVisibleComments)
+    }, [props.isVisibleComments])
+
+    return(
+        <Styles.Wrapper isCompletePost={props.isCompletePost}>
+        <ThemeProvider theme={FRSTTheme}>
+            <Styles.postContainer style={{...props.style}}>
+                <Styles.postHeader style={{width:'100%', justifyContent: 'space-between'}}>
+                    <div style={{width: props?.fixPostButton && props?.fixPostButton?.isVisibleButton ? '105px' : '0px'}}></div>
+                    <div style={{display: 'flex', flexDirection:'row', justifyContent: 'center', alignItems: 'center'}}>
+                        <div style={{marginRight: 16, paddingTop: '18px'}}> <Avatar src={FRSTAvatar} size='40px' /> </div>
+                        <span style={{fontFamily: 'Work Sans', fontWeight: 600, fontSize: 20, color: FRSTTheme['colors'].neutralsGrey1, paddingTop: '18px'}} > FRST Falconi </span>
+                    </div>
+
+                    { props?.fixPostButton && props?.fixPostButton?.isVisibleButton ?
+                            <Styles.TooltipCard>
+                                <Styles.TooltipText>
+                        <div 
+                            onClick={() => props?.fixPostButton?.actionClick()}
+                            onMouseOver={() => setActionArea(true)}
+                            onMouseOut={() => setActionArea(false)}
+                            style={{
+                                width: '105px',
+                                fontSize: '18px',
+                                color: '#0645ad', 
+                                cursor: 'pointer', 
+                                justifySelf:'end', 
+                                display: 'flex', 
+                                justifyContent: 'space-between', 
+                                alignItems: 'center',
+                                paddingRight: '22px', 
+                                marginTop: '-30px'}}>
+                            {/* <p style={{marginRight: '5px', paddingTop: '0px',fontSize: '17px'}}>
+                                {actionArea ? props?.fixPostButton?.textUnfix : props?.fixPostButton?.textFixed }
+                            </p> */}
+                                    
+                            <IconPin fill={actionArea ? '#0645ad' : '#ff4d0d'}/>
+                            <Styles.buttonCheck>{props.fixPostButton?.textFixed}</Styles.buttonCheck>
+
+                        </div>
+                        </Styles.TooltipText>
+                            <Styles.TooltipBox>
+                            <p>{props.fixPostButton?.textTooltip}</p>
+                            </Styles.TooltipBox>
+                        </Styles.TooltipCard>
+                    : <div></div>}
+                </Styles.postHeader>
+
+                <Styles.postTitle> {props.title} </Styles.postTitle>
+
+                {props.postImage ?
+                    <Styles.postImage>
+                        <img src={props.postImage} />
+                    </Styles.postImage>
+                    : null
+                }
+
+                <Styles.postDescription style={{paddingLeft: '24px', paddingRight: '24px', width: '100%'}}> 
+                    <Markdown>
+                        {props.description}
+                    </Markdown>
+                </Styles.postDescription>
+
+                {props.postVideoId ?
+                    <Styles.postVideo>
+                        { props.videoSource == 'youtube' &&
+                        <iframe 
+                            src= {`https://www.youtube.com/embed/${props.postVideoId}`}
+                            frameBorder= "0" 
+                            allow="autoplay; fullscreen; picture-in-picture"
+                            width={props.videoWidth ? props.videoWidth : '100%'}
+                            height={ props.videoHeight ? props.videoHeight : 430}
+                        /> }
+
+                        { props.videoSource == 'vimeo' &&
+                        <iframe 
+                            src={`https://player.vimeo.com/video/${props.postVideoId}?autoplay=0`}
+                            width={props.videoWidth ? props.videoWidth : '100%'}
+                            height={ props.videoHeight ? props.videoHeight : 430}
+                            allow="autoplay; fullscreen" 
+                        /> }
+                    </Styles.postVideo>
+                    : null
+                }
+{/* https://vimeo.com/475879762 */}
+                {props.handlePostButtonClick ?
+                    <div style={{marginTop: 32, width: '100%', paddingLeft: '24px', paddingRight: '24px'}}> 
+                        <Button variant='expandedPrimary' label={props.textPostButton} handleClick={props.handlePostButtonClick} />
+                    </div>
+                    : null
+                }
+
+            </Styles.postContainer>
+            <FeedInteraction 
+                hideComments={isVisibleComments}
+                isPostReview={true}
+                userAvatar={props.userAvatar}
+                id={props.postId}
+                isLiked={props.isPostLiked}
+                qtdComments={props.qtdComments}
+                qtdLikes={props.qtdLikes}
+                textAvaluation={props.textAvaluation}
+                textAvaluationTitle={props.textAvaluationTitle}
+                textComments={props.textComments}
+                textDeslike={props.textDeslike}
+                textLikes={props.textLikes}
+                commentList={props.commentList}
+                userCommentPlaceholder={props.userCommentPlaceholder}
+                textLoadMoreComments={props.textLoadMoreComments}
+                textSaveCommentBtn={props.textSaveCommentBtn}
+                ratingPostReview={props.ratingPostReview}
+                handleLikeClick={props.handleLikeClick}
+                handlePostReviewChange={props.handlePostReviewChange}
+                handleSaveCommentBtn={props.handleSaveCommentBtn}
+                onCommentChange={props.onCommentChange}
+                isDisabledAvaluation={props.isDisabledAvaluation}
+            />
+        </ThemeProvider>
+        </Styles.Wrapper>
+    )
+}
+
+function IconPin({fill}) {
+    return <>
+        <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17 1L6 12L1 7" stroke="#0645AD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    </>
+}