frst-components 0.20.0

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

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

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

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

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

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

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

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

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