frst-components 0.20.0 → 0.20.2

package/src/components/learning-steps/learningSteps.stories.tsx

@@ -1,123 +0,0 @@
-import React from 'react'
-
-import LearningSteps from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Learning Tech/Learning Steps',
-    component: LearningSteps,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <LearningSteps {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    title: "Etapas do ciclo de aprendizagem",
-    onSelected: (e : any) => { alert("Item Selecionado: " + e)},
-    textViewMore: 'Ver mais',
-    textClearFilter: 'Excluir Filtro',
-    objectCards: [
-                    {
-                        id: 0,
-                        title: '0. Não iniciou',
-                        numberPeople: 15,
-                    },
-                    {
-                        id: 1,
-                        title: '1. Problema definido',
-                        numberPeople: 3,
-                        photos:
-                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
-                    },
-                    {
-                        id: 2,
-                        title: '2. Hipóteses levantadas',
-                        numberPeople: 10,
-                        photos:
-                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
-                    },
-                    {
-                        id: 3,
-                        title: '3. Testes realizados',
-                        numberPeople: 4,
-                        photos:
-                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
-                    },
-                    {
-                        id: 4,
-                        title: '4. Resultados e aprendizados',
-                        numberPeople: 13,
-                        photos:
-                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
-                    },
-                    {
-                        id: 5,
-                        title: '5. Próximos passos',
-                        numberPeople: 105,
-                        photos:
-                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
-                    },
-                    {
-                        id: 6,
-                        title: '6. Finalizado',
-                        numberPeople: 2,
-                        photos:
-                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
-                    },
-                ],
-    marginLeftTitle: '0px',
-    marginRightClear: '0px',
-    marginsArrowButton: 50,
-    sizeArrowButton: 80,
-    widthCard: '343px',
-    horizontalMarginInternScroll: '100px',
-}
-
-
-export const minimo = Template.bind({})
-minimo.args = {
-    onSelected: (e : any) => { alert("Item Selecionado: " + e)},
-    objectCards: [
-            {
-                id: 0,
-                title: '0. Não iniciou',
-            },
-            {
-                id: 1,
-                title: '1. Problema definido',
-            },
-            {
-                id: 2,
-                title: '2. Hipóteses levantadas',
-            },
-            {
-                id: 3,
-                title: '3. Testes realizados',
-            },
-            {
-                id: 4,
-                title: '4. Resultados e aprendizados',
-            },
-            {
-                id: 5,
-                title: '5. Próximos passos',
-            },
-            {
-                id: 6,
-                title: '6. Finalizado',
-            },
-        ],
-}

package/src/components/learning-steps/learningStepsStyles.ts

@@ -1,46 +0,0 @@
-import styled from 'styled-components'
-
-interface AvatarI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-export const HeaderWrapper = styled.div<{marginLeft?:string, marginRight?:string}>`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    margin-left: ${({marginLeft})=> marginLeft};
-    margin-right: ${({marginRight})=> marginRight};
-
-    margin-bottom: 5px;
-`
-
-export const ClearComponent = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    color: #0645AD;
-    cursor: pointer;
-`
-
-export const TitleComponent = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 23px;
-    letter-spacing: -0.02em;
-`
-
-export const TextClear =  styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-    display: flex;
-    align-items: center;
-    margin-left: 18px;
-`

package/src/components/menu-more/index.tsx

@@ -1,79 +0,0 @@
-import { useEffect, useState, MouseEvent } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import '../../shared/global.css'
-
-import {
-    MoreDotsVertical,
-} from './../../shared/icons'
-
-import { 
-    ButtonMore,
-    MenuCustom,
-    MenuItemCustom,
-    TextOption,
-    IconOption } from './menuMoreStyles'
-import { IMenuMore } from './menuMore'
-
-
-export default function MenuMore({iconButton, options, style}: IMenuMore) {
-    const [ listOptions, setListOptions ] = useState(options)
-    
-    useEffect(() => {
-      setListOptions(options)
-    }, [options])
-
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-    const open = Boolean(anchorEl)
-    
-    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-      setAnchorEl(event.currentTarget)
-    }
-    const handleClose = () => {
-      setAnchorEl(null)
-    }
-    
-    return (
-    <ThemeProvider theme={FRSTTheme}>
-      <div style={{...style}}>
-        <ButtonMore
-          id="basic-button"
-          aria-controls="basic-menu"
-          aria-haspopup="true"
-          aria-expanded={open ? 'true' : undefined}
-          onClick={handleClick}
-        >
-            {iconButton ? iconButton : <MoreDotsVertical/>}
-        </ButtonMore>
-        {listOptions && listOptions?.length > 0 && 
-            <MenuCustom
-                id="basic-menu"
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-                anchorEl={anchorEl}
-                open={open}
-                onClose={handleClose}
-            > 
-                { listOptions.map((itemOption, index)=> {
-                    return <>
-                        <MenuItemCustom 
-                            key={index}
-                            onClick={() =>  itemOption?.onClick()}
-                            style={{borderBottom: ((listOptions?.length -1) == index) ? '' : '1px solid #EBEBEB',
-                                color: itemOption?.color ? itemOption?.color : '#222'
-                            }}
-                            disableRipple
-                        >
-                            <IconOption>{itemOption?.startIcon ? itemOption?.startIcon : ''}</IconOption>
-                            <TextOption>{itemOption?.description}</TextOption>
-                        </MenuItemCustom>
-                    </>
-                  })
-                }
-            </MenuCustom>
-        }
-      </div>
-      </ThemeProvider>
-    )
-}
-  

package/src/components/menu-more/menuMore.d.ts

@@ -1,15 +0,0 @@
-
-import React from 'react'
-
-export interface IOptionItem {
-    description: string
-    startIcon: any
-    onClick: (e?:any) => void
-    color?:  string
-}
-
-export interface IMenuMore {
-    iconButton: any
-    options:  Array<IOptionItem>
-    style?: React.CSSProperties;
-}

package/src/components/menu-more/menuMore.stories.tsx

@@ -1,76 +0,0 @@
-import React from 'react'
-import MenuMore from './index'
-
-
-import {
-    MoreDotsHorizontal,
-    EditIcon,
-    TrashIconNew,
-    CheckInCicle,
-    Plus,
-    FowardArrow
-} from './../../shared/icons'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Components/Menu More',
-    component: MenuMore,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <MenuMore {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    options: [
-        {
-            description: 'Continuar',
-            startIcon: <FowardArrow fill='#222'/>,
-            onClick: (e) => alert('click continue')
-        },
-        {
-            description: 'Editar',
-            startIcon: <EditIcon fill='#222'/>,
-            onClick: (e) => alert('click edit')
-        },
-        {
-            description: 'Excluir',
-            startIcon: <TrashIconNew fill='#C1341A'/>,
-            onClick: (e) => alert('click delete'),
-            color: '#C1341A'
-        },
-    ],
-    style: {marginLeft: '200px'}
-}
-
-export const twoItems = Template.bind({})
-twoItems.args = {
-    options: [
-        {
-            description: 'Editar',
-            startIcon: <EditIcon fill='#222'/>,
-            onClick: (e) => alert('click edit')
-        },
-        {
-            description: 'Excluir',
-            startIcon: <TrashIconNew fill='#C1341A'/>,
-            onClick: (e) => alert('click delete'),
-            color: '#C1341A'
-        },
-    ],
-    style: {marginLeft: '200px'}
-}
-
-export const oneItem = Template.bind({})
-oneItem.args = {
-    iconButton: <MoreDotsHorizontal fill='#222'/>,
-    options: [
-        {
-            description: 'Excluir',
-            startIcon: <TrashIconNew fill='#C1341A'/>,
-            onClick: (e) => alert('click delete'),
-            color: '#C1341A'
-        },
-    ],
-    style: {marginLeft: '200px'}
-}

package/src/components/menu-more/menuMoreStyles.ts

@@ -1,123 +0,0 @@
-import styled from 'styled-components'
-import MenuItem from '@mui/material/MenuItem'
-import Menu from '@mui/material/Menu'
-import Button from '@mui/material/Button'
-
-export const UserName = styled.p`
-  color: white;
-  padding-left: 5px;
-  font-size: 16px;
-`
-
-export const ButtonMore = styled(Button)`
-    width: 30px !important;
-    min-width: 30px !important;
-    max-width: 30px !important;
-    height: 30px !important;
-    margin: 0px !important;
-    padding: 0px !important;
-    display: flex !important;
-    justify-content: center !important;
-    border-radius: 12px !important;
-
-    &:hover {
-        background-color: #FFF9 !important;
-    }
-
-`
-
-export const MenuCustom = styled(Menu)`
-  margin-top: 10px;
-  margin-left: 30px;
-  overflow: hidden;
-  border-radius: 8px;
-
-  & .MuiPaper-root {
-    border-radius: 0px;
-    box-shadow: none !important;
-    overflow: visible;
-    background: #00000000;
-
-    &:before {
-        content: "";
-        position: absolute;
-        top: -15px;
-        right: 8.5px;
-        border-top: 6px solid transparent;
-        border-bottom: 10px solid #EBEBEB;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-    }
-  
-    &:after {
-        content: "";
-        position: absolute;
-        top: -14px;
-        right: 8.5px;
-        border-top: 6px solid transparent;
-        border-bottom: 10px solid #FFF;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-    }
-  }
-  ul {
-    box-shadow:  0px 3px 10px rgba(0, 0, 0, 0.15), 0px 15px 20px -20px rgba(34, 34, 34, 0.15);;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    border: 1px solid #EBEBEB !important;
-    border-radius: 8px !important;
-    overflow: hidden;
-    background: #FFF;
-    width: 160px;
-
-
-  li {
-    padding-left: 25px;
-  }
-  }
-`
-
-export const MenuItemCustom = styled(MenuItem)`
-  background-color: ${({theme}) => theme.colors.shadeWhite} !important;
-  padding-right: 45px !important;
-  margin: 1px !important;
-  transition: none !important;
-  animation: none !important;
-  &:hover {
-    background-color: #F7F9FC !important;
-  }
-  &:active {    
-    background-color: #FCF3EB !important;
-  }
-
-  
-`
-
-export const SubMenuItemCustom = styled(MenuItem)`
-  color: white !important;
-  background-color: #F5792A !important;
-
-  display: flex;
-  flex-direction: row;
-  &:hover {
-    background-color: #FD9350 !important;
-  }
-`
-
-export const TextOption = styled.div`
-  margin-left: 10px;
-  padding-top: 1px;
-  font-family: 'PT Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 21px;
-`
-
-export const IconOption = styled.div`
-  width: 20px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`

package/src/components/modal/modalLearningTech/index.tsx

@@ -1,67 +0,0 @@
-import { Grid, Box, Modal } from '@mui/material'
-import style from './modalLearningTech.module.css'
-import Button from '../../buttons/index'
-import { CloseIcon } from '@shared/icons'
-
-
-type enumTypeButton = 'primary' | 'secondary' | 'link'
-interface ModalLearningTechProps {
-    open: boolean
-    title?: string
-
-    confirmationButton?: string
-    cancelButton?: string
-    /**
-   * @prop {number} tipeButton: Tipos de botão (primary, secondary, link)
-    */
-    typeButtonConfirmation?: enumTypeButton
-
-    language?: 'pt-BR' | 'pt-PT' | 'en-US' | 'es' 
-
-    children: React.ReactNode
-
-    handleClose: () => void
-
-    handleConfirmation: () => void
-
-    style?: React.CSSProperties
-    
-}
-
-export default function ModalLearningTech(props: ModalLearningTechProps) {
-    
-    
-    return (
-        <Modal open={props.open} onClose={props.handleClose} >
-            
-            <Box className={style.modalBox} style={{top: '50%', left: '50%', transform: 'translate(-50%, -50%)', ...props.style}}>
-                <div className={style.fechar} onClick={props.handleClose}>
-                    <CloseIcon />
-                </div>
-                <div className={style.titulo}>
-                    {props.title}
-                </div>
-                <div className={style.container} >
-                    {props.children}
-                </div>
-                <div className={style.conclusao}>
-                    {
-                        props.confirmationButton ?
-                            props.cancelButton ?
-                                <>
-                                    <Button variant='link' label={props.cancelButton} handleClick={props.handleClose} />
-                                    <span style={{marginRight: 8, marginLeft: 8}}>{props.language === 'en-US' ? 'or' : 'ou'}</span>
-                                    <Button variant={props.typeButtonConfirmation} label={props.confirmationButton} handleClick={props.handleConfirmation} />
-                                </>
-                            :
-                                <Button variant={props.typeButtonConfirmation} label={props.confirmationButton} handleClick={props.handleConfirmation} />
-                        :
-                        <></>
-                    }
-
-                </div>
-                        
-            </Box>
-        </Modal>
-    )
-}

package/src/components/modal/modalLearningTech/modalLearningTech.module.css

@@ -1,79 +0,0 @@
-.modalBox{
-    background-color: #FFF;
-    max-width: 900px;
-    min-height: 300px;
-    max-height: 80%;
-    padding-top: 30px;
-    padding-bottom: 30px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    position: relative;
-
-    border-radius: 10px;
-
-    font-family: 'Work Sans';
-    
-
-}
-
-.fechar{
-    font-size: 12px;
-    color: #222222;
-    padding: 12px;
-    background-color: transparent;
-    border-top-right-radius: 10px;
-
-    display: flex;
-    justify-content: right;
-    align-items: center;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-
-    margin-top: 0px;
-    cursor: pointer;
-}
-
-.titulo{
-    
-    width: 100%;
-
-    margin-top: 10px;
-    
-    font-size: 24px;
-    font-weight: 700;
-    
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    
-}
-
-.container {
-    overflow: auto;
-    width: 100%;
-
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-    flex-wrap: noWrap;
-
-    margin-top: 10px;
-
-}
-
-.conclusao{
-    margin-top: 30px;
-
-    display: inline-flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-
-}

package/src/components/modal/modalLearningTech/modalLearningTech.stories.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-
-import ModalLearningTech from './index'
-import ComentaryBox from '../../commentary-box/index'
-import Avatar from '../../avatar/index'
-import { textAlign } from '@mui/system'
-import { ArrowForwardIosOutlined } from '@mui/icons-material'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Modal/ModalLearningTech',
-    component: ModalLearningTech,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ModalLearningTech {...args} />
-
-export const ModalTornarComentarioPrivado = Template.bind({})
-ModalTornarComentarioPrivado.args = {
-    open: true,
-    title: 'Tem certeza de que quer tornar privado o comentário?',
-    cancelButton: 'Cancelar',
-    confirmationButton: 'Tornar privado',
-    children: 'Dessa forma, só o criador do comentário e o autor do problema (você) poderão visualizar e interagir com o comentário.',
-    style: {textAlign:'center', padding: 20},
-    typeButtonConfirmation: 'primary',
-    language: 'en-US'
-    
-}
-
-export const ModalExcluirComentario = Template.bind({})
-ModalExcluirComentario.args = {
-    open: true,
-    title: 'Tem certeza de que quer excluir comentário?',
-    cancelButton: 'Cancelar',
-    confirmationButton: 'Excluir',
-    typeButtonConfirmation: 'primary',
-    children: 
-    <>
-        <div style={{borderTop: '1px solid #BDBDBD', borderBottom: '1px solid #BDBDBD', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'flexStart', padding: 20}}> 
-            <Avatar size='40px' src={'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg'}/>
-            <ComentaryBox 
-                name='Rayana Gama' 
-                date='8 horas atrás' 
-                position='Estudante/Universitário(a) de Designer'
-                value="Olá, Roberto! Tudo bem?
-                Estou iniciando a trilha Digital Business Mindest e achei que o desenvolvimento do seu projeto foi muito bem estruturado. Parabéns!"
-                className='Comentario Rayana'
-                styles={{}}
-                textLiked='Curtir'
-                textAnswer='Responder'
-                hasAnswer={true}
-                actionLike={() => {}}
-                onChange={() => {}}
-            />
-        </div>
-        <span style={{fontSize: 16, fontWeight: 600, paddingTop: 20}}> Todas as interações com o comentário também serão removidas</span>
-    </>
-      
-}