frst-components 0.20.0 → 0.20.2

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

@@ -1,160 +0,0 @@
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './sessionFiltersStyle'
-import * as Icons from '../../../shared/icons'
-import { ISessionFilters } from './sessionFilters'
-import { useEffect, useState } from 'react'
-import { ListItemText, MenuItem, Select, Checkbox, autocompleteClasses } from '@mui/material'
-
-type enumVariant = 'myBusiness' | 'mission' |  'trail'
-
-interface IFilterButton{
-    /**
-     * @prop {string} variant: As variants dos botões dos filtros:(myBusiness, mission, trail)
-     */  
-    variant: enumVariant
-    label: string
-    id: string
-    handleClick ?: () => void
-}
-
-const MenuProps = {
-    PaperProps: {
-    style: {
-        overflow: 'auto',
-        maxHeight: 255,
-        borderRadius: 8,
-    },
-    },
-};
-
-
-export default function SessionFilters(props: ISessionFilters) {
-    const [selectedFilter, setSelectedFilter] = useState(props.selectedFilter);
-    const [selectFilterContent, setSelectFilterContent] = useState([]);
-    const [isVisibleSelect, setIsVisibleSelect] = useState(false)
-    const [isVisiblePlaceholderSelect, setIsVisiblePlaceholderSelect] = useState(true)
-   
-    useEffect(() => {
-        setSelectedFilter(props.selectedFilter)
-    }, [props.selectedFilter]);
-
-    useEffect(() => {
-        setIsVisiblePlaceholderSelect(props.isVisiblePlaceholderSelect)
-    }, [props.isVisiblePlaceholderSelect]);
-
-    useEffect(() => {
-        setIsVisibleSelect(props.isVisibleSelect)
-    }, [props.isVisibleSelect]);
-
-    const selectItem = (item) => {
-        let index = selectFilterContent.indexOf(item.title)
-        let newArray = [].concat(selectFilterContent)
-        if(selectFilterContent.includes(item.title) ){
-            newArray.splice(index, 1)
-            setSelectFilterContent(currentValue => currentValue = newArray )
-        }
-        else{
-            newArray.push(item.title)
-            setSelectFilterContent(currentValue => currentValue = newArray)
-        }
-    }
-
-    function FilterButton(props: IFilterButton) {
-        return (
-            <>
-                {props.variant === 'myBusiness' ?
-                    <Styles.ButtonSessionFilters active={selectedFilter === props.id} onClick={props.handleClick}>                    
-                        <Icons.Handshake />                                    
-                        {props.label}
-                    </Styles.ButtonSessionFilters>  
-                :  props.variant === 'mission' ?
-                    <Styles.ButtonSessionFilters active={selectedFilter === props.id} onClick={props.handleClick}>                    
-                        <Icons.Mission />                                        
-                        {props.label}
-                    </Styles.ButtonSessionFilters> 
-                : props.variant ===  'trail' ?
-                    <Styles.ButtonSessionFilters active={selectedFilter === props.id} onClick={props.handleClick}>                    
-                        <Icons.Lamp />                                        
-                        {props.label}
-                    </Styles.ButtonSessionFilters>
-                : null}
-            </>
-            
-        );
-    }
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.ContainerFilter style={{...props.style}}>
-                {props.labelFilters}
-                <Styles.ButtonList>
-                    {props.filterList.map((item,index) => {
-                        return(
-                            <div style={{marginRight: 24}} key={index}>
-                                {FilterButton({variant:item.variant, label: item.label, id: item.id, handleClick: item.handleClick})}
-                            </div>
-                        )
-                    })}
-                </Styles.ButtonList>
-                {props.selectedFilterContentList ?
-                <>
-                    { isVisibleSelect &&  <>{props.labelSelectItens}</> }
-                    <Styles.SelectedItens>
-                    { isVisibleSelect ?
-                        <>
-                            {isVisiblePlaceholderSelect && <Styles.LabelSelect isVisible={true}>{props.textLabelSelect}</Styles.LabelSelect>}
-                            <Select  
-                                multiple
-                                labelId='selectedFilterInfoLabel'
-                                id='selectedFilterInfo'
-                                value={selectFilterContent} 
-                                // renderValue={(selected) =>`${selected.length} ${selected.length > 1 ? props.textMultipleSelected : props.textSingleSelected}`}
-                                renderValue={() => props.textSelectedItems}
-                                style={{height: 48, width: 384}}
-                                MenuProps={MenuProps}
-                                onChange={props.handleSelectedFilterData(selectFilterContent)}
-                            >
-                                {
-                                    props.selectedFilterContentList.map((item) => (
-                                        <MenuItem
-                                            onClick={() => selectItem(item)} 
-                                            defaultValue={item.title} key={item.id} 
-                                            style={{borderBottom: `1px solid ${FRSTTheme['colors'].neutralsGrey7}`}}
-                                        >
-                                            
-                                            <Checkbox
-                                                checked={selectFilterContent.indexOf(item.title) > -1}
-                                                sx={{
-                                                    color: FRSTTheme['colors'].neutralsGrey5,
-                                                    '&.Mui-checked': {
-                                                        color: FRSTTheme['colors'].primary1,
-                                                    },
-                                                }}
-                                            />
-                                            <ListItemText style={{color: FRSTTheme['colors'].neutralsGrey1, fontSize: 16, fontWeight: 400}} primary={item.title} />
-                                        </MenuItem>
-                                    ))
-                                }
-                            </Select>
-                            </>
-                            :
-                            <div></div>
-                        
-                    }
-                            <div style={{color: FRSTTheme['colors'].linkOnfocus, marginRight: 24, cursor: 'pointer', display: 'flex', justifyContent: 'flex-end'}} 
-                            // onClick={props.handleDeleteFilter}
-                            onClick={() => setSelectFilterContent(currentValue => currentValue = [])} 
-                        >
-                            <Icons.Trash fill={FRSTTheme['colors'].linkOnfocus} />
-                            &nbsp;
-                            {props.textDeleteFilter}
-                        </div>
-                    </Styles.SelectedItens>
-                </>
-                : null
-                }
-            </Styles.ContainerFilter>
-        </ThemeProvider>
-    );
-}

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

@@ -1,35 +0,0 @@
-import React from "react"
-
-type enumVariant = 'myBusiness' | 'mission' |  'trail'
-
-export type typeContentList = {
-    title: string
-    id: string
-}
-
-export type typeFilter = {
-    variant: enumVariant
-    label: string
-    id: string
-    handleClick?: () => void
-}
-
-export interface ISessionFilters {
-    filterList : Array<typeFilter>
-    selectedFilter : string
-    selectedFilterContentList : Array<typeContentList>
-    labelFilters?: string
-    labelSelectItens ?: string
-    textDeleteFilter ?: string
-    textMultipleSelected ?: string
-    textSingleSelected ?: string
-    textSelectedItems ?: string
-    textLabelSelect ?: string
-    isVisibleSelect ?: boolean
-    isVisiblePlaceholderSelect ?: boolean
-
-    handleSelectedFilter : () => void
-    handleDeleteFilter : () => void
-    handleSelectedFilterData : any
-    style?: React.CSSProperties
-}

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

@@ -1,74 +0,0 @@
-import React from 'react'
-
-import SessionFilters from './index'
-import * as Icons from '../../../shared/icons'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/SessionFilters',
-    component: SessionFilters,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SessionFilters {...args} />
-
-export const Filters = Template.bind({})
-Filters.args = {
-    labelFilters: 'Filtros:',
-    labelSelectItens: 'Escolha abaixo:',
-    textDeleteFilter: 'Excluir filtro',
-    style: {backgroundColor: '#ebebeb'} ,
-    textMultipleSelected: 'itens selecionados',
-    textSingleSelected: 'item selecionado',
-    selectedFilter: 'businessId',
-    selectedFilterContentList: [
-        {
-            title: 'Missão 1: Marte - Definição do Problema',
-            id: '1',
-        },
-        {
-            title: 'Missão 2: Júpiter - Levantamento das Hipóteses',
-            id: '2',
-        },
-        {
-            title: 'Missão 3: Saturno - Testes Realizados',
-            id: '3',
-        },
-        {
-            title: 'Missão 4: Urano - Resultados e Aprendizados',
-            id: '4',
-        },
-        {
-            title: 'Missão 5: Netuno - Próximos Passos',
-            id: '5',
-        }
-    ],
-    filterList: [
-        {
-            variant: 'myBusiness',
-            label: 'Minha empresa',
-            id: 'businessId',
-            handleClick: () => alert('Minha empresa!'),
-            
-        },
-        {
-            variant: 'mission',
-            label: 'Missão',
-            id: 'missionId',
-            handleClick: () => alert('Missão!'),
-        },
-        {
-            variant: 'trail',
-            label: 'Trilha',
-            id: 'trailId',
-            handleClick: () => alert('Trilha!'),
-        },
-    ],
-    textSelectedItems: "n itens selecionados",
-    textLabelSelect: 'Selecione:',
-    isVisibleSelect: true,
-    isVisiblePlaceholderSelect: true,
-    handleDeleteFilter: () => alert('delete'),
-    handleSelectedFilterData: (e) => console.log(e),
-    handleSelectedFilter: () => console.log('Filter Seleted')
-}

package/src/components/FI/sessionFilters/sessionFiltersStyle.ts

@@ -1,86 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface IFilterButton {
-    active: boolean
-}
-
-export const ButtonSessionFilters = styled.button<IFilterButton>`
-    max-width: 180px;
-    height: 72px;
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    padding: 19px;
-    background-color: ${( props ) => props.active ? props.theme.colors.primary1 : props.theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-    border-radius: 8px;
-    font-family: PT Sans;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 21px;
-    cursor: pointer;
-    color: ${( props ) => props.active ? props.theme.colors.shadeWhite : props.theme.colors.neutralsGrey1};
-
-`
-
-export const ContainerFilter = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-    width: fit-content;
-
-    color: ${({ theme }) => theme.colors.neutralsGrey1};
-    ${({ theme }) => theme.fonts.textMessageComponentsBodyRegular};
-    
-`
-
-export const ButtonList = styled.div`
-    display:flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-
-    margin-top: 8px;
-    margin-bottom: 24px;
-`
-
-export const SelectedItens = styled.div`
-    display:flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-
-    width: 100%;
-
-
-    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
-
-    margin-top: 8px;
-    margin-bottom: 24px;
-
-    & :nth-child(1) {
-      z-index: 1;
-    }
-
-    & :nth-child(3) {
-        z-index: 1;
-      }
-
-    & :nth-child(4) {
-        background: #FFF;
-    }
-`
-
-export const LabelSelect = styled.div<{isVisible: Boolean}>`
-    padding-left: 20px;
-    margin-right: -115px;
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 18px;
-    color: #9C9C9C;
-
-`

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

@@ -1,24 +0,0 @@
-import Button from '@components/buttons'
-import * as Styles from './smallSRGBannerStyles'
-import {AddIcon} from '@shared/icons'
-
-interface ISmallSRGBanner {
-    style: React.CSSProperties
-    textButton: string
-    handleClick: () => void
-}
-
-export default function SmallSRGBanner( props : ISmallSRGBanner ){
-    return(
-        <Styles.Container style={{...props.style}} onClick={props.handleClick} >
-            <Styles.mask>   
-                <Styles.SrgLogo>
-                    <img src='https://i.gyazo.com/eb084ab35cbd9ad52b24148afba59950.png' alt='SRG Logo' />
-                </Styles.SrgLogo>
-                <Styles.Button>
-                    <Button variant='primary' label={props.textButton} startIcon={<AddIcon fill='#FFF' />} />
-                </Styles.Button>
-            </Styles.mask>
-        </Styles.Container>
-    )
-}

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

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import SmallSRGBanner from './index'
-
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/SmallSRGBanner',
-    component: SmallSRGBanner,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SmallSRGBanner {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    textButton: 'Criar novo desafio',
-    handleClick: () => alert('Clicado!'),
-}

package/src/components/FI/smallSRGBanner/smallSRGBannerStyles.ts

@@ -1,34 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    cursor: pointer;
-    border-radius: 8px;
-    width: 282px;
-    height: 336px;
-    background: url('https://i.gyazo.com/bc4a52062b79d16e1840ed274b436684.png');
-    
-`
-export const mask = styled.div`
-    background: linear-gradient(180deg, rgba(17, 17, 17, 0.6) 0%, #111111 100%);
-    width: 100%;
-    height: 100%;
-    padding: 48px 32px;
-    border-radius: 8px;
-`
-
-export const SrgLogo = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`
-
-export const Button = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 24px;
-`

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

@@ -1,56 +0,0 @@
-import React from 'react'
-
-export type IContentCycleProps = {
-  /**
-   * @prop {string} id: Identificação
-   */
-  id: string
-  /**
-   * @prop {string} title: Titulo do conteudo
-   */
-  title: string
-  /**
-   * @prop {string} description: Descrição do conteudo
-   */
-  description: string
-  /**
-   * @prop {boolean} selected: Se o componente esta selecionado ou não
-   */
-  selected: boolean
-  /**
-   * @prop {(value?: boolean)=>void } onSelect: Func para selecionar o componente
-   */
-  onSelect: (value?: boolean) => void
-  /**
-   * @prop {string[]} listSkils: Lista de competencias relacionadas ao conteudo
-   */
-  listSkils?: string[]
-  /**
-   * @prop {string} urlPhoto: Foto/Banner de identificação do conteudo
-   */
-  urlPhoto?: string
-  /**
-   * @prop {string} urlVideo: link do teaser
-   */
-  urlVideo?: string
-  /**
-   * @prop {titleVideo} urlVideo: url do teaser
-   */
-  titleVideo?: string
-  /**
-   * @prop {boolean} started: Validação para saber se o aluno ja começou a consguir o conteudo
-   */
-  started?: boolean
-  /**
-   * @prop {number} progress: titulo do teaser
-   */
-  progress?: number
-  /**
-   * @prop {boolean} stepContent: Validação para saber se o passo de add conteudos ao ciclo foi finalizado
-   */
-  stepContent?: boolean
-  /**
-   * @prop {'video' | 'text' | 'podcast'} typeContent: Tipo do conteúdo Video, text ou podcast
-   */
-  typeContent: 'video' | 'text' | 'podcast'
-}

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

@@ -1,30 +0,0 @@
-import React from 'react'
-
-import ContentCycle from './index'
-
-export default {
-  title: 'IJ/ContentCycle',
-  component: ContentCycle
-}
-
-const Template = (args) => <ContentCycle {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  id: 'cttLQI01',
-  title: 'Liderança que inspira',
-  description: `Description bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. 
-     Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger. Short
-     loin hamburger tri-tip, chuck flank pork chop doner porchetta.  Tenderloin tri-tip meatloaf cow brisket
-     `,
-  selected: false,
-  listSkils: ['Liderança', 'colaboração'],
-  urlPhoto: '',
-  urlVideo: 'https://vimeo.com/367756121',
-  titleVideo: 'Um video Legal',
-  progress: 0,
-  started: false,
-  onSelect: () => alert('selecionei'),
-  stepContent: false,
-  typeContent: 'video'
-}

package/src/components/IJ/ContentCycle/ContentCycleStyles.ts

@@ -1,152 +0,0 @@
-import styled from 'styled-components'
-
-interface IProgressProps {
-  progress: number
-}
-
-export const Container = styled.div`
-  width: auto;
-  height: 218px;
-  min-width: 720px;
-  padding: 25px 26px 20px 26px;
-  background: #ffffff;
-  border: 1px solid #bdbdbd;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 14px;
-  cursor: pointer;
-  &.selected {
-    background: #fce4cc;
-    border: 1px solid #ff8a15;
-  }
-  :hover {
-    background: #fcf3eb;
-    border: 1px solid #ff8a15;
-  }
-`
-
-export const Thumbnail = styled.section`
-  height: 100%;
-  width: 88px;
-  border-radius: 8px;
-
-  > img {
-    width: 100%;
-    height: 120px;
-    object-fit: cover;
-    object-position: 50% 50%;
-    border-radius: 8px;
-  }
-`
-export const Content = styled.section`
-  width: calc(100% - 88px - 14px);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-`
-
-export const Article = styled.article`
-  width: 100%;
-  height: 120px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-`
-export const Options = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
-
-export const Title = styled.h3`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 21px;
-  color: #6a3f86;
-`
-
-export const Description = styled.p`
-  font-family: 'PT Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 110%;
-  color: #757575;
-  width: 60%;
-`
-export const SkillsList = styled.ul`
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  padding-left: 0;
-  gap: 8px;
-
-  > .title {
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-    color: #757575;
-  }
-`
-export const Skill = styled.li`
-  text-decoration: none;
-  list-style: none;
-  text-transform: capitalize;
-  padding: 2px 4px;
-  font-family: 'PT Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-
-  color: #ffffff;
-  background: #6a3f86;
-  border-radius: 4px;
-`
-export const ContentBarProgess = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  > p {
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 18px;
-    display: flex;
-    align-items: center;
-    color: #222222;
-  }
-`
-export const BarProgress = styled.div`
-  width: 160px;
-  height: 20px;
-  padding: 2px;
-  border: 1px solid #9c9c9c;
-  border-radius: 100px;
-  background: #e0e0e0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-`
-export const Progress = styled.span<IProgressProps>`
-  height: 100%;
-  background-color: #ff4d0d;
-  width: ${(p) => p.progress}%;
-  z-index: 2;
-  border-radius: 100px;
-`