frst-components 0.20.0 → 0.20.2

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

@@ -1,190 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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>
-    </>
-}