frst-components 0.20.0 → 0.20.2

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

@@ -1,313 +0,0 @@
-import React from 'react'
-
-import PostFeed from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/Post Feed',
-    component: PostFeed,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <PostFeed {...args} />
-
-export const Text = Template.bind({})
-Text.args = {
-    title: 'O título do post será escrito aqui e seu limite máximo será de 125 caracteres de texto.',
-    description: "Você já conhece a nossa ferramenta guia de resolução de problemas, o **Space Race Game**? \n\nEla será utilizada em um ciclo ágil de aprendizado, colaboração e experimentação, aonde você selecionará um problema real da sua empresa para solucionar. Essa jornada contará com cinco etapas: **Definição do problema, Levantamento de hipóteses, Testes realizados, Resultados e aprendizados e Próximos passos**.\n\nQue tal testar na prática? Clique no botão abaixo para criar seu primeiro problema:",
-    isVisibleComments: true,
-    textPostButton: 'Botão CTA',
-    handlePostButtonClick: () => alert('Clicado!'),
-
-    isCompletePost: false,
-    
-    userAvatar: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-    postId: 'abc',
-    qtdLikes: '23 pessoas',
-    qtdComments: '2 comentários',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isPostLiked: false,
-    textAvaluationTitle: 'Este conteúdo foi útil para você?',
-    ratingPostReview: 0,
-
-    fixPostButton: {
-        isVisibleButton: true,
-        textFixed: 'Concluir',
-        textUnfix: '',
-        textTooltip: 'Ao concluir, posts mais recentes aparecerão primeiro na tela',
-        actionClick: () => alert('Click')
-    },
-
-    userCommentPlaceholder: 'Comente aqui sobre este projeto...',
-    commentList: [
-        {
-            name: 'Roberto Lima',
-            date: '1 minuto atrás',
-            position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-            value: `Muito bom este conteúdo! Vai me ajudar bastante ao longo da minha jornada com a FRST.`,
-            onChange: () => alert('mudança!'),
-            actionLike: () => alert('Liked'),
-            textLike: 'Curtir',
-            textDeslike: 'Descurtir',
-            isLiked: false,
-            totalLikes: 3,
-            isAuthor: false,
-            isMe: false,
-            hasDropdown: true,
-            detectLinks: true,
-            actionEditComment: () => alert('Edit'),
-            textEditComment: 'Editar Comentário',
-            actionMakePrivate: () => alert('Privado'),
-            textMakePrivate: 'Tornar Privado',
-            textMakePublic: 'Tornar Público',
-            textEdited: 'editado',
-            actionDeleteComment: () => alert('Delete'),
-            textDeleteComment: 'Excluir Comentário',
-            actionUpdateValue: (e) => alert('update: ' + e),
-            textSaveButton: 'Save changes',
-            textSaveButtonMobile: 'Save',
-            textCancelButton: 'Cancel',
-        },
-        {
-            name: 'Marlon Pereira',
-            date: '1 minuto atrás',
-            position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-            value: `Oi, Rayana!
-Muito bom o seu projeto! No momento estou lidando com um problema bem parecido e estava com dúvidas na etapa de testes. Os seus foram bem definidos e me deram ideias de como posso me organizar por aqui.`,
-            onChange: () => alert('mudança!'),
-            actionLike: () => alert('Liked'),
-            textLike: 'Curtir',
-            textDeslike: 'Descurtir',
-            isLiked: true,
-            totalLikes: 3,
-            isAuthor: true,
-            isMe: true,
-            hasDropdown: true,
-            detectLinks: true,
-            actionEditComment: () => alert('Edit'),
-            textEditComment: 'Editar Comentário',
-            actionMakePrivate: () => alert('Privado'),
-            textMakePrivate: 'Tornar Privado',
-            textMakePublic: 'Tornar Público',
-            textEdited: 'editado',
-            actionDeleteComment: () => alert('Delete'),
-            textDeleteComment: 'Excluir Comentário',
-            actionUpdateValue: (e) => alert('update: ' + e),
-            textSaveButton: 'Save changes',
-            textSaveButtonMobile: 'Save',
-            textCancelButton: 'Cancel',
-        },
-    ],
-    textLoadMoreComments: 'Carregar mais comentários',
-    textSaveCommentBtn: 'Salvar',
-
-    handleSaveCommentBtn: (comment) => alert(comment),
-    handlePostReviewChange: (e) => alert(e),
-    handleLikeClick: () => alert('Liked!'),
-    onCommentChange: (e) => console.log(e.target.value)
-}
-
-export const Image = Template.bind({})
-Image.args = {
-    title: 'O título do post será escrito aqui e seu limite máximo será de 125 caracteres de texto.',
-    description: 'Esse espaço está destinado para o conteúdo textual do post, que será limitado a 800 caracteres.',
-    
-    isCompletePost: false,
-
-    textPostButton: 'Botão CTA',
-    handlePostButtonClick: () => alert('Clicado!'),
-
-    postImage: 'https://i.gyazo.com/865239e98e9e1e30976f1c78506093a5.png',
-
-    fixPostButton: {
-        isVisibleButton: true,
-        textFixed: 'Concluir',
-        textUnfix: '',
-        textTooltip: 'Ao concluir, posts mais recentes aparecerão primeiro na tela',
-        actionClick: () => alert('Click')
-    },
-
-    userAvatar: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-    postId: 'abc',
-    qtdLikes: '23 pessoas',
-    qtdComments: '2 comentários',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isPostLiked: false,
-    textAvaluationTitle: 'Este conteúdo foi útil para você?',
-    ratingPostReview: 0,
-
-    userCommentPlaceholder: 'Comente aqui sobre este projeto...',
-    commentList: [
-        {
-            name: 'Roberto Lima',
-            date: '1 minuto atrás',
-            position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-            value: `Muito bom este conteúdo! Vai me ajudar bastante ao longo da minha jornada com a FRST.`,
-            onChange: () => alert('mudança!'),
-            actionLike: () => alert('Liked'),
-            textLike: 'Curtir',
-            textDeslike: 'Descurtir',
-            isLiked: false,
-            totalLikes: 3,
-            isAuthor: true,
-            isMe: true,
-            hasDropdown: true,
-            detectLinks: true,
-            actionEditComment: () => alert('Edit'),
-            textEditComment: 'Editar Comentário',
-            actionMakePrivate: () => alert('Privado'),
-            textMakePrivate: 'Tornar Privado',
-            textMakePublic: 'Tornar Público',
-            textEdited: 'editado',
-            actionDeleteComment: () => alert('Delete'),
-            textDeleteComment: 'Excluir Comentário',
-            actionUpdateValue: (e) => alert('update: ' + e),
-            textSaveButton: 'Save changes',
-            textSaveButtonMobile: 'Save',
-            textCancelButton: 'Cancel',
-        },
-        {
-            name: 'Marlon Pereira',
-            date: '1 minuto atrás',
-            position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-            value: `Oi, Rayana!
-Muito bom o seu projeto! No momento estou lidando com um problema bem parecido e estava com dúvidas na etapa de testes. Os seus foram bem definidos e me deram ideias de como posso me organizar por aqui.`,
-            onChange: () => alert('mudança!'),
-            actionLike: () => alert('Liked'),
-            textLike: 'Curtir',
-            textDeslike: 'Descurtir',
-            isLiked: true,
-            totalLikes: 3,
-            isAuthor: true,
-            isMe: true,
-            hasDropdown: true,
-            detectLinks: true,
-            actionEditComment: () => alert('Edit'),
-            textEditComment: 'Editar Comentário',
-            actionMakePrivate: () => alert('Privado'),
-            textMakePrivate: 'Tornar Privado',
-            textMakePublic: 'Tornar Público',
-            textEdited: 'editado',
-            actionDeleteComment: () => alert('Delete'),
-            textDeleteComment: 'Excluir Comentário',
-            actionUpdateValue: (e) => alert('update: ' + e),
-            textSaveButton: 'Save changes',
-            textSaveButtonMobile: 'Save',
-            textCancelButton: 'Cancel',
-        },
-    ],
-    textLoadMoreComments: 'Carregar mais comentários',
-    textSaveCommentBtn: 'Salvar',
-
-    handleSaveCommentBtn: (comment) => alert(comment),
-    handlePostReviewChange: (e) => alert(e),
-    handleLikeClick: () => alert('Liked!'),
-    onCommentChange: (e) => console.log(e.target.value)
-}
-
-export const Video = Template.bind({})
-Video.args = {
-    title: 'O título do post será escrito aqui e seu limite máximo será de 125 caracteres de texto.',
-    description: 'Esse espaço está destinado para o conteúdo textual do post, que será limitado a 800 caracteres.',
-    
-    textPostButton: 'Botão CTA',
-    handlePostButtonClick: () => alert('Clicado!'),
-
-    fixPostButton: {
-        isVisibleButton: true,
-        textFixed: 'Fixado',
-        textUnfix: 'Desfixar',
-        actionClick: () => alert('Click')
-    },
-    
-    postVideoId: 'sY63f5aJy4M',
-    videoSource: 'youtube',
-    videoWidth: '800',
-    videoHeight: '400',
-
-    userAvatar: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-    postId: 'abc',
-    qtdLikes: '23 pessoas',
-    qtdComments: '2 comentários',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isPostLiked: false,
-    textAvaluationTitle: 'Este conteúdo foi útil para você?',
-    ratingPostReview: 0,
-
-    userCommentPlaceholder: 'Comente aqui sobre este projeto...',
-    commentList: [
-        {
-            name: 'Roberto Lima',
-            date: '1 minuto atrás',
-            position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-            value: `Muito bom este conteúdo! Vai me ajudar bastante ao longo da minha jornada com a FRST.`,
-            onChange: () => alert('mudança!'),
-            actionLike: () => alert('Liked'),
-            textLike: 'Curtir',
-            textDeslike: 'Descurtir',
-            isLiked: false,
-            totalLikes: 3,
-            isAuthor: true,
-            isMe: true,
-            hasDropdown: true,
-            detectLinks: true,
-            actionEditComment: () => alert('Edit'),
-            textEditComment: 'Editar Comentário',
-            actionMakePrivate: () => alert('Privado'),
-            textMakePrivate: 'Tornar Privado',
-            textMakePublic: 'Tornar Público',
-            textEdited: 'editado',
-            actionDeleteComment: () => alert('Delete'),
-            textDeleteComment: 'Excluir Comentário',
-            actionUpdateValue: (e) => alert('update: ' + e),
-            textSaveButton: 'Save changes',
-            textSaveButtonMobile: 'Save',
-            textCancelButton: 'Cancel',
-        },
-        {
-            name: 'Marlon Pereira',
-            date: '1 minuto atrás',
-            position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-            value: `Oi, Rayana!
-Muito bom o seu projeto! No momento estou lidando com um problema bem parecido e estava com dúvidas na etapa de testes. Os seus foram bem definidos e me deram ideias de como posso me organizar por aqui.`,
-            onChange: () => alert('mudança!'),
-            actionLike: () => alert('Liked'),
-            textLike: 'Curtir',
-            textDeslike: 'Descurtir',
-            isLiked: true,
-            totalLikes: 3,
-            isAuthor: true,
-            isMe: true,
-            hasDropdown: true,
-            detectLinks: true,
-            actionEditComment: () => alert('Edit'),
-            textEditComment: 'Editar Comentário',
-            actionMakePrivate: () => alert('Privado'),
-            textMakePrivate: 'Tornar Privado',
-            textMakePublic: 'Tornar Público',
-            textEdited: 'editado',
-            actionDeleteComment: () => alert('Delete'),
-            textDeleteComment: 'Excluir Comentário',
-            actionUpdateValue: (e) => alert('update: ' + e),
-            textSaveButton: 'Save changes',
-            textSaveButtonMobile: 'Save',
-            textCancelButton: 'Cancel',
-        },
-    ],
-    textLoadMoreComments: 'Carregar mais comentários',
-    textSaveCommentBtn: 'Salvar',
-
-    handleSaveCommentBtn: (comment) => alert(comment),
-    handlePostReviewChange: (e) => alert(e),
-    handleLikeClick: () => alert('Liked!'),
-    onCommentChange: (e) => console.log(e.target.value)
-}

package/src/components/FI/postFeed/postFeedStyles.ts

@@ -1,188 +0,0 @@
-import styled from "styled-components";
-
-export const Wrapper = styled.div<({isCompletePost})>`
-  opacity: ${({isCompletePost}) => isCompletePost ? '0' : '1'};
-  transition: opacity 0.5s ease-in-out;
-`
-
-export const postContainer = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-
-    border: 1px solid ${({theme}) => theme.colors.borderPrimary};
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    background-color: ${({theme}) => theme.colors.shadeWhite};
-    padding-top: 24px;
-    padding-bottom: 24px;
-    
-    &>img{
-        max-width: 100%;
-        max-height: 100%;
-    }
-
-`
-
-export const postHeader = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-`
-
-export const postTitle = styled.span`
-    font-family: 'Work Sans';
-    font-weight: 600;
-    font-size: 24px;
-    text-align: center;
-    color: ${({theme}) => theme.colors.primary1};
-    margin-top: 32px;
-    padding-left: 22px;
-    padding-right: 22px;
-`
-
-export const postDescription = styled.span`
-    font-family: 'PT Sans';
-    font-weight: 400;
-    font-size: 16px;
-    text-align: left;
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-    margin-top: 32px;
-    width: 100% !important;
-`
-
-export const postImage = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin-top: 32px;
-    width: 100%;
-    object-fit: cover;
-
-    & img{
-        max-width: 100%;
-        width: 100%;
-        max-height: 100%;
-    }
-`
-
-export const postVideo = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin-top: 32px;
-    width: 100%;
-`
-
-export const buttonCheck = styled.span`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 110%;
-    /* identical to box height, or 18px */
-
-    display: flex;
-    align-items: center;
-
-    /* link/onfocus */
-
-    color: #0645AD;
-`
-
-
-export const TooltipText = styled.div`
-  color: #757575;
-  text-align: center;
-  line-height: 44px;
-  border-radius: 3px;
-  cursor: pointer;
-`;
-export const TooltipBox = styled.div`
-  position: absolute;
-  top: calc(100% + 10px);
-  left: -10px;
-  visibility: hidden;
-  
-  font-family: 'PT Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 18px;
-  color: #757575;
-
-  background-color: #FFF;
-  width: 150px;
-  padding: 5px 5px;
-  border-radius: 4px;
-  border: 1px solid #BDBDBD;
-  -webkit-box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
-  -moz-box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
-  box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
-
-  &:after {
-    content: "";
-    width: 0;
-    height: 0;
-    left: 40px;
-    top: -7px;
-    position: absolute;
-
-    border: 7px solid #fff;
-    transform: rotate(135deg);
-    transition: border 0.3s ease-in-out;
-  }
-
-  &:before {
-    content: "";
-    width: 0;
-    height: 0;
-    left: 40px;
-    top: -8px;
-    position: absolute;
-
-    border: 7px solid #BDBDBD;
-    transform: rotate(135deg);
-  }
-  
-`;
-export const TooltipCard = styled.div`
-  position: relative;
-  & ${TooltipText}:hover + ${TooltipBox} {
-    visibility: visible;
-    color: #757575;
-    background-color: #FFFFFF;
-    width: 230px;
-    padding: 8px 8px;
-
-
-    &:after {
-        content: "";
-        width: 0;
-        height: 0;
-        left: 40px;
-        top: -7px;
-        position: absolute;
-    
-        border-color: transparent transparent #FFF #FFF;
-        transform: rotate(135deg);
-      }
-    
-      &:before {
-        content: "";
-        width: 0;
-        height: 0;
-        left: 40px;
-        top: -8px;
-        position: absolute;
-    
-        border-color: transparent transparent #BDBDBD #BDBDBD;
-        transform: rotate(135deg);
-      }
-    
-  }
-`;

package/src/components/FI/searchBox/SearchBox.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import SearchBox from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/SearchBox',
-    component: SearchBox,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SearchBox {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-    textTitle: 'Biblioteca de projetos',
-    textPlaceholder: 'Busque aqui.',
-    textButton: 'Pesquisar',
-    handleClickSearchButton: () => alert('busque aqui'),
-    onChange: (e) => console.log(e.target.value),
-    style: {width:'800px'}
-}
-
-export const DefaultTranslate = Template.bind({})
-DefaultTranslate.args = {
-    textTitle: 'Project library',
-    textPlaceholder: 'Search here.',
-    textButton: 'Search',
-    handleClickSearchButton: () => alert('search here'),
-    onChange: (e) => console.log(e.target.value)
-}
-
-
-

package/src/components/FI/searchBox/SearchBoxStyles.ts

@@ -1,21 +0,0 @@
-import styled from 'styled-components'
-
-export const Container = styled.div`
-    width: 100%;
-    min-height: 127px;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-    border-radius: 8px;
-`
-export const Typography = styled.div`
-    font-family: Work Sans;
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 23px;
-    color: ${({ theme }) => theme.colors.primary1};
-    margin-top: 16px;
-    margin-left: 16px;
-`
-export const ContainerSearch = styled.div`
-    margin: 24px 16px 16px 16px;
-`

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

@@ -1,25 +0,0 @@
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import { ISearchBox } from './searchBox'
-import * as Styles from './SearchBoxStyles'
-import SearchField from '@components/search-field'
-
-export default function SearchBox(props: ISearchBox) {      
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.Container style={{...props.style}}>
-                <Styles.Typography>{props.textTitle ? props.textTitle : props.textTitle}</Styles.Typography>
-                <Styles.ContainerSearch >
-                    <SearchField 
-                    hasSearchIcon={true} 
-                    textButton={props.textButton ? props.textButton : ''} 
-                    placeholder={props.textPlaceholder ? props.textPlaceholder : ''} 
-                    handleClickButton={props.handleClickSearchButton}
-                    onChange={props.onChange}
-                    />
-                </Styles.ContainerSearch>
-            </Styles.Container>            
-        </ThemeProvider>
-    )
-}

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

@@ -1,11 +0,0 @@
-import React from "react"
-
-export interface ISearchBox{ 
-    textTitle?: string
-    textPlaceholder?: string 
-    textButton?: string
-    handleClickSearchButton?: () => void 
-    onChange?: () => void,
-    style: React.CSSProperties
-}
-