frst-components 0.20.1 → 0.20.2

package/src/components/FI/interactionsModal/InteractionsModal.stories.tsx

@@ -1,123 +0,0 @@
-import React from 'react'
-
-import InteractionModal from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/InteractionModal',
-    component: InteractionModal,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <InteractionModal {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-    textTitle: 'Este desafio foi visualizado por 12 pessoas.',
-    textSubtitle: 'Veja quem são elas:',
-    listUsers: [
-        {
-            id: '1',
-            name: 'Carol Rodrigues',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '2',
-            name: 'Luciana Souza',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '3',
-            name: 'Ricardo Barbosa',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '4',
-            name: 'Pamela Tavares',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '5',
-            name: 'Marcos Pereira',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-    ],
-    isOpen: false,
-    handleClickClose: () => alert('click')
-}
-
-export const DefaultInfiniteScroll = Template.bind({})
-DefaultInfiniteScroll.args = {
-    textTitle: 'Este desafio foi visualizado por 12 pessoas.',
-    textSubtitle: 'Veja quem são elas:',
-    listUsers: [
-        {
-            id: '1',
-            name: 'Carol Rodrigues',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '2',
-            name: 'Luciana Souza',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '3',
-            name: 'Ricardo Barbosa',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '4',
-            name: 'Pamela Tavares',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '5',
-            name: 'Marcos Pereira',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-    ],
-    isOpen: false,
-    handleClickClose: () => alert('click'),
-    checkScrollEnd: () => alert('Final do scroll'),
-    newListUsers: [
-        {
-            id: '5',
-            name: 'Carol Rodrigues',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-        {
-            id: '6',
-            name: 'Luciana Souza',
-            position: 'Tecnologia da Informação',
-            organization: 'FRST Falconi',
-            avatar: 'https://i.gyazo.com/3a59a7139631b386a8043095b207949c.png'
-        },
-    ],
-    trackClick: () => alert('Track click mix painel'),
-}
-
-
-

package/src/components/FI/interactionsModal/InteractionsModalStyles.ts

@@ -1,164 +0,0 @@
-import styled from 'styled-components'
-import { Grid, Box, Modal } from '@mui/material'
-
-// <{image, notstarted}>
-export const Container = styled(Box)`
-    background-color: #FFF;
-    width: 488px !important;
-    max-width: 80%;
-    height: 488px !important;
-    max-height: 80%;
-
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    position: relative;
-
-    border-radius: 16px;
-
-    font-family: 'Work Sans';
-    overflow: hidden;
-`
-export const Typography = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 21px;
-
-    /* neutrals/neutral_1 */
-
-    color: ${({ theme }) => theme.colors.neutral_1};
-    margin-left: 25px;
-`
-export const CloseButton = styled.div`
-    cursor: pointer;    
-    align-self: flex-end;
-    width: 20px;
-    margin-top: 20px;
-    margin-right: 15px;
-`
-
-export const HeaderDiv = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    width: 100%;
-    border-bottom: 1px solid #BDBDBD;
-    padding-bottom: 24px;
-`
-
-export const ContentDiv = styled.div`
-    width: 100%;
-    heigth: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    overflow-y: scroll;
-    overflow-x: hidden;
-
-    ::-webkit-scrollbar {
-        width: 7px;
-    }
-    
-    /* Track */
-    ::-webkit-scrollbar-track {
-        background: #0000;
-        border-radius: 10px;
-        margin: 16px;
-    }
-    
-    /* Handle */
-    ::-webkit-scrollbar-thumb {
-        background: #BDBDBD; 
-        border-radius: 10px;
-    }
-    
-    /* Handle on hover */
-    ::-webkit-scrollbar-thumb:hover {
-        background: #888; 
-    }
-
-`
-
-export const ScrollContentContainer = styled.div`
-    position: relative;
-`
-
-
-export const ContentScroll = styled.div`
-    width: 100%;
-    heigth: fit-content;
-`
-
-export const CardItemUser = styled.div`
-    width: calc(100% + 10px);
-    height: 86px;
-    border-bottom: 1px solid #BDBDBD;
-    padding: 16px;
-    padding-left: 24px;
-
-    display: flex;
-    flex-direction: row;
-`
-
-
-export const UserInfoContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    margin-left: 16px;
-`
-
-export const NameUser = styled.div`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 110%;
-    /* or 18px */
-
-    display: flex;
-    align-items: center;
-
-    /* neutrals/neutral_1 */
-
-    color: #222222;
-`
-
-export const PositionUser = styled.div`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 110%;
-    /* or 18px */
-
-    display: flex;
-    align-items: center;
-
-    /* neutrals/neutral_1 */
-
-    color: #222222;
-
-`
-
-export const OrgUser = styled.div`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 110%;
-    /* or 18px */
-
-    display: flex;
-    align-items: center;
-
-    /* neutrals/neutral_1 */
-
-    color: #222222;
-`

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

@@ -1,106 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import { Grid, Box, Modal } from '@mui/material'
-import { IInteractionsModal, IUser } from './interactionsModal'
-import { 
-    Container, 
-    Typography, 
-    CloseButton,
-    HeaderDiv, 
-    ContentDiv, 
-    CardItemUser, 
-    ContentScroll, 
-    ScrollContentContainer, 
-    UserInfoContainer,
-    NameUser,
-    PositionUser,
-    OrgUser } from './InteractionsModalStyles'
-import { CloseIcon } from '@shared/icons'
-import Avatar from '@components/avatar'
-
-export default function InteractionsModal({
-    textTitle, 
-    textSubtitle, 
-    listUsers, 
-    isOpen, 
-    handleClickClose, 
-    newListUsers,
-    checkScrollEnd,
-    trackClick,
-    style }: IInteractionsModal) {
-    
-    const scrollContainerRef = useRef(null);
-    const handleScroll = (e) => {
-        const { scrollTop, scrollHeight, clientHeight } = e.target;
-
-        if (scrollTop + clientHeight >= scrollHeight) {
-            if(checkScrollEnd) checkScrollEnd()
-        }
-    }
-    useEffect(() => {
-        const scrollContainer = scrollContainerRef.current;
-        if (scrollContainer) {
-          scrollContainer.addEventListener('scroll', handleScroll);
-        }
-    
-        return () => {
-          if (scrollContainer) {
-            scrollContainer.removeEventListener('scroll', handleScroll);
-          }
-        };
-    }, []);
-
-    const [listUsersState, setListUsersState]  = useState(listUsers)
-    useEffect(() => {
-        if(newListUsers) {
-            setListUsersState((listUsersState) => [...listUsersState, ...newListUsers])
-        }
-    }, [newListUsers])
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Modal open={isOpen} onClose={() => handleClickClose()} >
-                    <Container 
-                        style={{
-                            top: '50%', 
-                            left: '50%', 
-                            transform: 'translate(-50%, -50%)', 
-                            ...style 
-                        }
-                    }>
-                        <HeaderDiv>
-                            <div style={{width:'100%', display:'flex', justifyContent: 'flex-end'}}>
-                                <CloseButton onClick={() => handleClickClose()}> 
-                                    <CloseIcon width='11'/> 
-                                </CloseButton>
-                            </div>
-                            <Typography>{textTitle}</Typography>
-                            <Typography>{textSubtitle}</Typography>
-                        </HeaderDiv>
-                        <ContentDiv 
-                            ref={scrollContainerRef}
-                            onScroll={handleScroll}
-                            onClick={trackClick ? () => trackClick() : () => {}}
-                        >
-                            <ContentScroll>
-                                { listUsersState && listUsersState.map((item: IUser) => {
-                                        return (<>
-                                            <CardItemUser key={item?.id}>
-                                                <Avatar size='50px' src={item?.avatar}/>
-                                                <UserInfoContainer>
-                                                    <NameUser> {item?.name} </NameUser>
-                                                    <PositionUser> {item?.position}  </PositionUser>
-                                                    <OrgUser> {item?.organization} </OrgUser>
-                                                </UserInfoContainer>
-                                            </CardItemUser>
-                                        </>)
-                                    })
-                                }
-                            </ContentScroll>
-                        </ContentDiv>
-                    </Container>
-            </Modal>
-        </ThemeProvider>
-    )
-}

package/src/components/FI/interactionsModal/interactionsModal.d.ts

@@ -1,23 +0,0 @@
-import React from "react"
-
-export interface IUser {
-    id: string
-    name: string
-    position: string
-    organization: string
-    avatar: string
-}
-
-export interface IInteractionsModal {
-    textTitle?: string
-    textSubtitle?: string 
-    listUsers: Array<IUser>
-    isOpen: boolean
-    handleClickClose?: () => void
-    style?: React.CSSProperties
-    
-    newListUsers?: Array<IUser>
-    checkScrollEnd: () => void
-    trackClick?: () => void
-}
-

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

@@ -1,66 +0,0 @@
-import Avatar from '@components/avatar'
-import Markdown from 'markdown-to-jsx'
-import { useEffect, useState } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './notificationCardStyles'
-
-interface INotificationCard {
-    notificationAvatar: string
-    notificationDescription: string
-    isNewNotification: boolean
-    notificationDate: string
-
-    textNew: string
-    style?: React.CSSProperties
-
-    handleClick: () => void
-}
-
-const Divider = () => {
-    return(
-        <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="2.5" cy="2.5" r="2.5" fill="#757575"/>
-        </svg>
-    )
-}
-
-export default function NotificationCard ( props : INotificationCard ) {
-    const [descriptionNotification, setDescriptionNotification] = useState(props.notificationDescription);
-
-    useEffect(() => {
-        setDescriptionNotification(props.notificationDescription)
-    }, [props.notificationDescription])
-
-    return (
-        <ThemeProvider theme={FRSTTheme} >
-            
-            <Styles.notificationContainer 
-                onClick={props.handleClick}
-                style={{...props.style, backgroundColor: props.isNewNotification ? '#FEF0D0' : FRSTTheme['colors'].shadeWhite}} 
-            >
-                
-                <Avatar src={props.notificationAvatar} size='40px' />
-                <Styles.notificationInfo>    
-                    <Styles.notificationDescription>
-                        <Markdown>
-                            {descriptionNotification}
-                        </Markdown>
-                    </Styles.notificationDescription>
-                    {props.isNewNotification ?
-                        <Styles.notificationDate>
-                            <span style={{fontWeight: 700, color: FRSTTheme['colors'].primary1}} >{props.textNew}</span>
-                            <Divider />
-                            {props.notificationDate}
-                        </Styles.notificationDate>
-                        :
-                        <Styles.notificationDate>
-                            {props.notificationDate}
-                        </Styles.notificationDate>
-                    }
-                </Styles.notificationInfo>
-
-            </Styles.notificationContainer>
-        </ThemeProvider>
-    )
-}

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

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import NotificationCard from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/Notification Card',
-    component: NotificationCard,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <NotificationCard {...args} />
-
-export const newNotification = Template.bind({})
-newNotification.args = {
-    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!')
-}
-
-export const oldNotification = Template.bind({})
-oldNotification.args = {
-    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!')
-}

package/src/components/FI/notificationCard/notificationCardStyles.ts

@@ -1,41 +0,0 @@
-import styled from "styled-components";
-
-export const notificationContainer = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-
-    width: 375px;
-    height: 120px;
-    padding: 16px;
-    gap: 16px;
-    cursor: pointer;
-`
-
-export const notificationInfo = styled.div`
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-`
-
-export const notificationDescription = styled.div`
-    font-family: 'PT Sans';
-    font-size: 16px;
-    font-weight: 400;
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-`
-
-export const notificationDate = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    margin-top: 8px;
-
-    font-family: 'PT Sans';
-    font-size: 14px;
-    font-weight: 400;
-    color: ${({theme}) => theme.colors.neutralsGrey3};
-`