frst-components 0.20.1 → 0.20.2

package/src/components/IJ/listSelector/index.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useState } from "react";
-import * as Styles from './listSelectorStyles'
-import { CheckboxChecked, CheckboxEmpty } from "@shared/icons";
-import { ThemeProvider } from "styled-components";
-import { FRSTTheme } from "../../../theme";
-import Button from "@components/buttons";
-
-interface ItemList{
-    id: string
-    description: string
-}
-
-interface IListSelector{
-    listTitle: string
-    textViewMore: string
-    textViewLess: string
-/**
- * @prop {Array<ItemList>} contentList: um array do objeto a ser exibido na lista( um ID e uma descrição)
- */    
-    contentList: Array<ItemList>
-/**
- * @prop {number} minShowList: A quantidade minima a ser exibida da lista
- */    
-    minShowList: number
-    selectedItens: (itens) => void
-    style: React.CSSProperties
-}
-
-export default function ListSelector( props : IListSelector ) {
-    const [selectedItens, setSelectedItens] = useState([]);
-    const [showSize, setShowSize] = useState(props.minShowList);
-
-    useEffect(() => {
-        props.selectedItens(selectedItens)
-    }, [selectedItens]);
-
-    const handleSelect = (id) => {
-        let indexId = selectedItens.indexOf(id)
-        if(indexId === -1){
-            setSelectedItens(value => [...value, id])
-            
-        }
-        else{
-            setSelectedItens(selectedItens.filter( item => item !== id))
-            
-        }
-    }
-
-    const handleView = () => {
-        if( showSize === props.minShowList)    setShowSize(props.contentList.length)
-        else setShowSize(props.minShowList)
-    }
-    return(
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.containerList style={{...props.style}}>
-                <Styles.titleList> {props.listTitle} </Styles.titleList>
-                <Styles.listContent>
-                    {props.contentList.map((item,index) => {
-                        return(
-                            index < showSize ?
-                                <Styles.itemList key={index} >
-                                    <div onClick={ () => handleSelect(item.id)}>
-                                        {selectedItens.includes(item.id) ? <CheckboxChecked/> : <CheckboxEmpty/>}
-                                    </div>
-                                    {item.description}
-                                </Styles.itemList>
-                            : null
-                        )}
-                    )}
-                </Styles.listContent>
-                { props.minShowList < props.contentList.length ?
-                    <Styles.viewMoreContent>
-                        
-                            <Button variant='link' 
-                                label={showSize === props.minShowList ? props.textViewMore : props.textViewLess } 
-                                handleClick={handleView}
-                            />
-                        
-                    </Styles.viewMoreContent>
-                    : null
-                }
-            </Styles.containerList>
-        </ThemeProvider>
-    )
-}

package/src/components/IJ/listSelector/listSelector.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-
-import ListSelector from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'IJ/ListSelector',
-    component: ListSelector,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ListSelector {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    listTitle: 'Selecione o(s) desafio(s)',
-    textViewMore: 'Ver mais...',
-    textViewLess: 'Ver menos',
-    minShowList: 5,
-    style: {backgroundColor: '#F5F5F5'},
-    selectedItens: (itens) => console.log(itens),
-    contentList: [
-        {
-            id: '1',
-            description: 'Aumentar o engajamento dos alunos na plataforma.'
-        },
-        {
-            id: '2',
-            description: 'A redução do tempo médio de resposta por e-mail.'
-        },
-        {
-            id: '3',
-            description: 'Melhor a performance do time de vendas no período de férias.'
-        },
-        {
-            id: '4',
-            description: 'Dar visibilidade dos Gaps encontrados no sistema de vendas Online'
-        },
-        {
-            id: '5',
-            description: 'Aumentar a venda de produtos adicionais em lojas físicas.'
-        },
-        {
-            id: '6',
-            description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
-        },
-        {
-            id: '7',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        },
-        {
-            id: '8',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        },
-        {
-            id: '9',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        },
-        {
-            id: '10',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        },
-    ]
-}

package/src/components/IJ/listSelector/listSelectorStyles.ts

@@ -1,49 +0,0 @@
-import { style } from "@mui/system";
-import styled from "styled-components";
-
-export const containerList = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 12px;
-    padding: 8px;
-    
-`
-
-export const titleList = styled.span`
-    font-family: 'PT Sans';
-    font-weight: 400;
-    font-size: 16px;
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-`
-
-export const listContent = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 8px;
-    flex-direction: column;
-`
-
-export const itemList = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: row;
-    gap: 8px;
-
-    font-family: 'PT Sans';
-    font-weight: 400;
-    font-size: 14px;
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-`
-
-export const viewMoreContent = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex-direction: row;
-    width: 100%;
-    user-select: none;
-`

package/src/components/IJ/pagination/index.tsx

@@ -1,155 +0,0 @@
-import { FRSTTheme } from '../../../theme'
-import { ThemeProvider } from "styled-components";
-import { useEffect, useState } from 'react';
-import * as Styles from './paginationStyles'
-import { BackArrow, FowardArrow } from '@shared/icons';
-
-interface IPagination{
-    /**
-     * @prop {number} totalRegistry: Quantidade total de registros a serem paginados
-     */ 
-    totalRegistry: number
-    /**
-     * @prop {number} registryPerPage: Quantidade de registros a serem exibidos por página
-     */ 
-    registryPerPage: number
-    /**
-     * @prop {number} qtdNumberShowPagination: Quantidade de botões a serem exibidos na paginação 
-     */ 
-    qtdNumberShowPagination: number
-    showFirstLastButton?: boolean
-    isLoading?: boolean
-
-    textFirstButton?: string
-    textLastButton?: string
-
-    children: React.ReactNode
-    onLoadPage: (page : number) => void
-    
-    style?: React.CSSProperties
-
-}
-
-export default function Pagination( props : IPagination ) {
-    const [activePage, setActivePage] = useState(0)
-    const [TotalRegistry, setTotalRegistry] = useState(props.totalRegistry)
-    const [totalPages, setTotalPages] = useState(Math.ceil(props.totalRegistry / props.registryPerPage));
-    const [paginationElements, setPaginationElements] = useState([]);
-    const [IsLoading, setIsLoading] = useState(props.isLoading);
-    const [Refresh, setRefresh] = useState(0);
-
-    const handleSwitchPage = (page : number) => {
-        if(page < 0){
-            setActivePage(0)
-            props.onLoadPage(0)
-        }else if(page > totalPages - 1){
-            setActivePage(totalPages-1)
-            if (page === 0) {
-                props.onLoadPage(totalPages-1)
-            }
-        }
-        else{
-            setActivePage(page)
-            props.onLoadPage(page)
-        }
-    }
-
-    useEffect(() => {
-        setIsLoading(props.isLoading)        
-    }, [props.isLoading])  
-
-
-    useEffect(() => {
-        if (props.totalRegistry === 0) {
-            setActivePage(0)
-        }
-        setTotalRegistry(props.totalRegistry)
-        setTotalPages(Math.ceil(props.totalRegistry / props.registryPerPage));
-        CalcPaginations(Math.ceil(props.totalRegistry / props.registryPerPage))
-        setRefresh(Refresh+1)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.totalRegistry])        
-
-    useEffect(() => {
-        CalcPaginations(totalPages)
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activePage]);
-
-    const CalcPaginations = (totalPages) => {
-        let elements = []
-        let start = 1
-        let finish = 0
-        let showEllipsis = true
-        if(totalPages <= props.qtdNumberShowPagination){
-            start = 1
-            finish = totalPages
-        }
-        else{
-            if(activePage + props.qtdNumberShowPagination + 1 > totalPages){
-                start = totalPages - props.qtdNumberShowPagination + 1
-                finish = totalPages
-                showEllipsis = false
-            }
-            else{
-                start = activePage + 1
-                finish = activePage + props.qtdNumberShowPagination 
-            }
-        }
-
-        for(let i = start; i <= finish; i++ ){
-            if(showEllipsis && i === finish){
-                elements.push('...')
-                elements.push(totalPages)
-            }else{
-                elements.push(i)
-            }
-        }
-
-        setPaginationElements(elements)
-    }
-    
-    return(
-        <ThemeProvider theme={FRSTTheme} >
-            <Styles.containerPagination style={{...props.style}}>
-                <Styles.contentPagination>
-                    {props.children}
-                </Styles.contentPagination>
-
-                {
-                    !IsLoading && Refresh > 0 &&
-                        <Styles.pageButtonList>
-                            {props.showFirstLastButton ?
-                                <Styles.buttonPage disabled={activePage === 0} onClick={() => activePage > 0 && handleSwitchPage(0)} selected={false}>
-                                    {props.textFirstButton ? props.textFirstButton : 'Primeiro'}
-                                </Styles.buttonPage>
-                                : null
-                            }
-                            
-                            <Styles.buttonPage disabled={activePage === 0} onClick={() => activePage > 0 && handleSwitchPage(activePage-1)} selected={false}>
-                                <BackArrow width='16' height='16' fill='currentColor'/>
-                            </Styles.buttonPage>
-
-                            { paginationElements.map((item, index)=>
-                                <Styles.buttonPage disabled={item === '...'} key={index} onClick={() => item != '...' && handleSwitchPage(item - 1)} selected={ activePage === item - 1 }>
-                                    {item}
-                                </Styles.buttonPage>
-                            )}
-
-                            
-                            <Styles.buttonPage disabled={activePage === totalPages - 1} onClick={() => activePage < totalPages-1 &&  handleSwitchPage(activePage+1)} selected={false}>
-                                <FowardArrow width='18' height='18' fill='currentColor'/>
-                            </Styles.buttonPage>
-                                
-                            {props.showFirstLastButton ?
-                                <Styles.buttonPage disabled={activePage === totalPages-1} onClick={() => activePage < totalPages-1 && handleSwitchPage(totalPages-1)} selected={false}>
-                                    {props.textLastButton ? props.textLastButton : 'Último'}
-                                </Styles.buttonPage>
-                                : null
-                            }
-                        </Styles.pageButtonList>
-                }
-                                                
-            </Styles.containerPagination>
-        </ThemeProvider>
-    )
-}

package/src/components/IJ/pagination/pagination.stories.tsx

@@ -1,112 +0,0 @@
-import React from 'react'
-
-import Pagination from './index'
-import ThumbListContent from '../thumbListContent'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'IJ/Pagination',
-    component: Pagination,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Pagination {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    totalRegistry: 100,
-    registryPerPage: 10,
-    qtdNumberShowPagination: 5,
-    showFirstLastButton: false,
-
-    onLoadPage: (page) => console.log(`Página ${page}`),
-
-    children: 
-        <>
-            
-        </>
-}
-export const lastFirst = Template.bind({})
-lastFirst.args = {
-    totalRegistry: 100,
-    registryPerPage: 10,
-    qtdNumberShowPagination: 5,
-    showFirstLastButton: true,
-
-    textFirstButton: 'First',
-    textLastButton: 'Last',
-
-    onLoadPage: (page) => console.log(`Página ${page}`),
-
-    children: 
-        <>
-            
-        </>
-}
-export const withChildren = Template.bind({})
-withChildren.args = {
-    totalRegistry: 100,
-    registryPerPage: 10,
-    qtdNumberShowPagination: 5,
-    showFirstLastButton: false,
-
-    onLoadPage: (page) => console.log(`Página ${page}`),
-
-    children: 
-        <>
-            <ThumbListContent 
-                description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.' 
-                imageSrc='https://i.gyazo.com/9024cb0195e65b9f4fc269d29b0a38f4.png'
-                textViewLessButton='Ver menos'
-                textViewMoreButton='Ver mais'
-                typeThumbContent='video'
-                onClickThumb={() => alert('clicado!')}
-                style= {{width: 375}}
-            />
-            <ThumbListContent 
-                description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.' 
-                imageSrc='https://i.gyazo.com/9024cb0195e65b9f4fc269d29b0a38f4.png'
-                textViewLessButton='Ver menos'
-                textViewMoreButton='Ver mais'
-                typeThumbContent='video'
-                onClickThumb={() => alert('clicado!')}
-                style= {{width: 375}}
-            />
-            <ThumbListContent 
-                description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.' 
-                imageSrc='https://i.gyazo.com/9024cb0195e65b9f4fc269d29b0a38f4.png'
-                textViewLessButton='Ver menos'
-                textViewMoreButton='Ver mais'
-                typeThumbContent='video'
-                onClickThumb={() => alert('clicado!')}
-                style= {{width: 375}}
-            />
-            <ThumbListContent 
-                description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.' 
-                imageSrc='https://i.gyazo.com/9024cb0195e65b9f4fc269d29b0a38f4.png'
-                textViewLessButton='Ver menos'
-                textViewMoreButton='Ver mais'
-                typeThumbContent='video'
-                onClickThumb={() => alert('clicado!')}
-                style= {{width: 375}}
-            />
-            <ThumbListContent 
-                description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.' 
-                imageSrc='https://i.gyazo.com/9024cb0195e65b9f4fc269d29b0a38f4.png'
-                textViewLessButton='Ver menos'
-                textViewMoreButton='Ver mais'
-                typeThumbContent='video'
-                onClickThumb={() => alert('clicado!')}
-                style= {{width: 375}}
-            />
-            <ThumbListContent 
-                description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.' 
-                imageSrc='https://i.gyazo.com/9024cb0195e65b9f4fc269d29b0a38f4.png'
-                textViewLessButton='Ver menos'
-                textViewMoreButton='Ver mais'
-                typeThumbContent='video'
-                onClickThumb={() => alert('clicado!')}
-                style= {{width: 375}}
-            />
-        </>
-}

package/src/components/IJ/pagination/paginationStyles.ts

@@ -1,61 +0,0 @@
-import styled, { css } from "styled-components";
-
-interface buttonProps{
-    selected: boolean
-    disabled: boolean
-}
-
-export const containerPagination = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-`
-
-export const contentPagination = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-    padding-bottom: 12px;
-`
-
-export const pageButtonList = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: row;
-    gap: 8px;
-`
-
-export const buttonPage = styled.div<buttonProps>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 40px;
-    height: 40px;
-
-    padding: 12px;
-    border-radius: 6px;
-    cursor: pointer;
-
-    user-select: none;
-    font-family: 'PT Sans';
-    font-size: 16px;
-    font-weight: 700;
-    color: ${(props) => props.selected ? props.theme.colors.shadeWhite : props.theme.colors.neutralsGrey1};
-    background-color: ${(props) => props.selected ? props.theme.colors.primary1 : props.theme.colors.neutralsGrey6};
-    
-    ${(props) => !props.disabled && css`
-        &:hover{
-            color: ${({theme}) => theme.colors.shadeWhite};
-            background-color: ${({theme}) => theme.colors.primary3};
-        }
-    `};
-
-    ${(props) => props.disabled && css`
-        color: ${({ theme }) => theme.colors.linkDisabled};
-        cursor: not-allowed
-    `};
-    
-`

package/src/components/IJ/participantCard/index.tsx

@@ -1,111 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './participantCardStyle'
-import { ParticipantCardI } from './participantCard'
-
-import Avatar from '@components/avatar'
-import { IconUp, IconDown, IconGaps, IconModules } from '@shared/icons'
-import { useState } from 'react'
-import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material'
-
-export default function ParticipantCard({
-  userInfo,
-  labels,
-  competencesList,
-  modulesList,
-  disabled,
-  style
-}: ParticipantCardI) {
-  const [selectedItem, setSelectedItem] = useState(null)
-  const [typeDetails, setTypeDetails] = useState(null)
-  const [isAccordionOpen, setIsAccordionOpen] = useState(false)
-  const [isPressed, setIsPressed] = useState(false)
-  const [accordionState, setAccordionState] = useState({
-    competences: false,
-    modules: false
-  })
-
-  const IS_TYPE_COMPETENCES = typeDetails === 'competences'
-  const IS_TYPE_MODULES = typeDetails === 'modules'
-
-  const handleSelectedItem = (id: string, type: string) => {
-    setIsAccordionOpen(!isAccordionOpen)
-    setSelectedItem(id)
-    setTypeDetails(type)
-    handleAccordionState(type, !accordionState[type])
-  }
-
-  const handleAccordionState = (type, value) => {
-    setAccordionState({
-      ...accordionState,
-      [type]: value
-    })
-  }
-
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      <Styles.WrapperCard status={labels?.tag} style={{ ...style }}>
-        <Styles.ClickArea status={labels?.tag} isPressed={isPressed} onClick={() => setIsPressed(true)}>
-          <Styles.TagArea>
-            <Styles.TagStatus isPressed={isPressed} status={labels?.tag}>
-              {labels?.tag}
-            </Styles.TagStatus>
-          </Styles.TagArea>
-          <Styles.UserInfo>
-            <Avatar size="40px" src={userInfo?.avatar} />
-            <Styles.DescriptionUser>
-              <Styles.NameUser>{userInfo?.name}</Styles.NameUser>
-              <Styles.EmailUser>{userInfo?.email}</Styles.EmailUser>
-            </Styles.DescriptionUser>
-          </Styles.UserInfo>
-
-          <Styles.UserAdditionalInfo>
-            <Styles.Area>{`${labels?.area}: ${userInfo?.area}`}</Styles.Area>
-            <Styles.Position>{`${labels?.position}: ${userInfo?.position}`}</Styles.Position>
-          </Styles.UserAdditionalInfo>
-        </Styles.ClickArea>
-        {!disabled && (
-          <Styles.AccordionList>
-            <Accordion
-              expanded={selectedItem === userInfo?.id && IS_TYPE_COMPETENCES && isAccordionOpen}
-              onChange={() => handleSelectedItem(userInfo?.id, 'competences')}
-            >
-              <AccordionSummary expandIcon={<IconUp />} aria-controls="panel1bh-content" id="panel1bh-header">
-                <Styles.AccortionTitle>
-                  <IconGaps />
-                  {labels?.competences}
-                </Styles.AccortionTitle>
-              </AccordionSummary>
-              <AccordionDetails>
-                <Styles.DataList>
-                  {competencesList?.map((item, index) => (
-                    <Styles.DataListItem key={index}>{item.name}</Styles.DataListItem>
-                  ))}
-                </Styles.DataList>
-              </AccordionDetails>
-            </Accordion>
-            <Accordion
-              expanded={selectedItem === userInfo?.id && IS_TYPE_MODULES && isAccordionOpen}
-              onChange={() => handleSelectedItem(userInfo?.id, 'modules')}
-            >
-              <AccordionSummary expandIcon={<IconUp />} aria-controls="panel2bh-content" id="panel2bh-header">
-                <Styles.AccortionTitle>
-                  <IconModules />
-                  {labels?.modules}
-                </Styles.AccortionTitle>
-              </AccordionSummary>
-              <AccordionDetails>
-                <Styles.DataList>
-                  {modulesList?.map((item, index) => (
-                    <Styles.DataListItem key={index}>{item.name}</Styles.DataListItem>
-                  ))}
-                </Styles.DataList>
-              </AccordionDetails>
-            </Accordion>
-          </Styles.AccordionList>
-        )}
-      </Styles.WrapperCard>
-    </ThemeProvider>
-  )
-}

package/src/components/IJ/participantCard/participantCard.d.ts

@@ -1,24 +0,0 @@
-import React from 'react'
-
-export interface ParticipantCardI {
-  userInfo: {
-    id: string
-    name: string
-    avatar: string
-    email: string
-    area: string
-    position: string
-  }
-  labels?: {
-    competences: string
-    modules: string
-    tag: string
-    area: string
-    position: string
-  }
-  competencesList: [{ id: number | string; name: string }]
-  modulesList: [{ id: number | string; name: string }]
-  successfullInvite?: boolean
-  disabled?: boolean
-  style: React.CSSProperties
-}