frst-components 0.20.0 → 0.20.2

package/src/components/field-search-dropdown/fieldSearch.stories.tsx

@@ -1,92 +0,0 @@
-import React from 'react'
-
-import FieldSearch from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/FieldSearch',
-    component: FieldSearch,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <FieldSearch {...args} />
-
-export const labeledResult = Template.bind({})
-labeledResult.args = {
-    variant: 'LXP',
-    loading: true,
-    textLoading: 'Buscando...',
-    placeholder: 'O que você busca?', 
-    value: 'Default to show options',
-    hasListResult: true, 
-    isLabeledResult: true,
-    listResults: null,
-    labeledResultList: [
-        {
-            label: 'Conteúdos',
-            listResult: [
-                {id: '1', label: 'Conteúdo 1', onClick: (e) => alert(e)},
-                {id: '2', label: 'Conteúdo 2', onClick: (e) => alert(e)},
-                {id: '3', label: 'Conteúdo 3', onClick: (e) => alert(e)},
-                {id: '4', label: 'Conteúdo 4', onClick: (e) => alert(e)}
-            ]
-        },
-        {
-            label: 'Desafios',
-            listResult: [
-                {id: '1', label: 'Desafio 1', onClick: (e) => alert(e)},
-                {id: '2', label: 'Desafio 2', onClick: (e) => alert(e)},
-                {id: '3', label: 'Desafio 3', onClick: (e) => alert(e)},
-            ]
-        },
-        {
-            label: 'Pessoas',
-            listResult: [
-                {id: '1', label: 'Pessoa 1', onClick: (e) => alert(e)},
-                {id: '2', label: 'Pessoa 2', onClick: (e) => alert(e)},
-                {id: '3', label: 'Pessoa 3', onClick: (e) => alert(e)},
-            ]
-        }
-    ],
-    historicResults: [
-        {id: '1', label: 'pesquisa 1', onClick: (e) => alert(e)},
-        {id: '2', label: 'pesquisa 2', onClick: (e) => alert(e)},
-        {id: '3', label: 'pesquisa 3', onClick: (e) => alert(e)}
-    ],
-    isMobileVersion: true,
-    hasOptionSeeAll: true, 
-    setFieldSearchIsOpen: (e) => console.log("setFieldSearchIsOpen", e), 
-    fieldSearchIsOpen: false,
-    seeAll: {id: '9', label: 'Ver todos os resultados', onClick: () => alert("Ver todos!")},
-    style: { width: '332px' },
-    onFilter: (term) => console.log('Valor Pesquisado', term)
-}
-
-export const normal = Template.bind({})
-normal.args = {
-    variant: 'LXP',
-    loading: false,
-    textLoading: 'Carregando...',
-    placeholder: 'O que você busca?', 
-    value: 'Default to show options',
-    hasListResult: true, 
-    isLabeledResult: false,
-    listResults: [
-        {id: '1', label: 'List Entry 1', onClick: (e) => alert(e)},
-        {id: '2', label: 'List Entry 2', onClick: (e) => alert(e)},
-        {id: '3', label: 'List Entry 3', onClick: (e) => alert(e)},
-        {id: '4', label: 'List Entry 4', onClick: (e) => alert(e)}
-    ],
-    historicResults: [
-        {id: '1', label: 'pesquisa 1', onClick: (e) => alert(e)},
-        {id: '2', label: 'pesquisa 2', onClick: (e) => alert(e)},
-        {id: '3', label: 'pesquisa 3', onClick: (e) => alert(e)}
-    ],
-    isMobileVersion: true,
-    hasOptionSeeAll: true, 
-    setFieldSearchIsOpen: (e) => console.log("setFieldSearchIsOpen", e), 
-    fieldSearchIsOpen: false,
-    seeAll: {id: '9', label: 'Ver todos os resultados', onClick: () => alert("Ver todos!")},
-    style: { width: '332px' },
-    onFilter: (term) => console.log('Valor Pesquisado', term)
-}

package/src/components/field-search-dropdown/fieldSearchStyle.ts

@@ -1,150 +0,0 @@
-import styled from 'styled-components'
-
-interface ISearchField {
-    isHover?: boolean,
-    isOnFocus?: boolean,
-    isMobile?: boolean,
-}
-
-
-export const Container = styled.div`
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-`
-
-export const LabelField = styled.label<ISearchField>`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-
-    margin-bottom: 16px;
-
-    color: ${({ theme }) => theme.colors.shadeBlack};
-
-    color: ${({ theme, isHover }) => isHover && theme.colors.linkOnfocus};
-    
-    color: ${({ isOnFocus }) => isOnFocus &&  '#663366' }    
-`
-
-export const ContainerIcon = styled.div`
-    z-index: 10;
-    cursor: pointer;
-    min-height: 20px;
-    min-width: 40px;
-    padding-left: 15px;
-    padding-right: 10px;
-    padding-top: 3px;
-`
-
-export const InputSearchWrapper = styled.div<ISearchField>`
-    height: 48px;
-    background-color: ${({isOnFocus}) => isOnFocus ? '#757575' : '#444'};
-
-    border-radius: 8px;
-    
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    width: ${({isMobile}) => isMobile ? '0px !important' : 'auto'};
-    border: ${({isMobile}) => !isMobile ? '1px' : '0px'} solid ${({isHover, theme}) => isHover ? theme.colors.shadeBlack : '#000'};  
-    transition: width 1s ease-in-out;
-`
-
-export const InputText = styled.input`
-    margin-left:10px;
-    display: flex;
-    align-items: center;
-    height: 48px;
-    width: 100%;
-    border: none;
-    background: transparent;
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 18px;
-    color: ${({ theme }) => theme.colors.shadeWhite};
-
-    &::placeholder {
-        font-family: 'PT Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 18px;
-        color: ${({ theme }) => theme.colors.shadeWhite};
-    }
-
-    &[disabled] {
-        cursor: not-allowed;
-    }
-`
-
-export const WrapperResults = styled.div<{isVisibleResults}>`
-    position: absolute;
-    top: 48px;
-    display: ${({isVisibleResults}) => isVisibleResults ? 'flex': 'none'};
-    height: auto;
-    width: 100%;
-    flex-direction: column;
-    align-items: center;
-    border-radius: 8px;
-    background: ${({theme}) => theme.colors.shadeWhite};
-    border: 1px solid #BDBDBD;
-    box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.2);
-    z-index: 10000;
-    overflow: hidden;
-`
-    export const ItemResult = styled.div`
-        width: 100%;
-        cursor: pointer;
-        &:hover {
-            background: ${({theme}) => theme.colors.neutralsGrey9};
-        }
-    `
-    export const TextItem = styled.span<{isLastItem}>`
-        font-family: 'PT Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 21px;
-
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: #000000;
-
-        height: 42px;
-
-        padding-left: 16px;
-        margin-left: 5px;
-        margin-right: 5px;
-        border-bottom: 1px solid ${({isLastItem, theme}) => isLastItem ? 'transparent' : theme.colors.neutralsGrey7};
-
-    `
-
-    export const ItemSeeAll = styled.div`
-        width: 100%;
-        display: flex;
-        justify-content: center;   
-        align-items: center;
-        text-align: center;
-
-        cursor: pointer;
-
-        font-family: 'PT Sans';
-        font-style: normal;
-        font-weight: 700;
-        font-size: 16px;
-        line-height: 21px;
-
-        padding: 16px;
-        color: ${({theme}) => theme.colors.linkOnfocus};
-        &:hover {
-            background: ${({theme}) => theme.colors.neutralsGrey9};
-        }
-    `

package/src/components/field-search-dropdown/index.tsx

@@ -1,233 +0,0 @@
-import React,{ useState, useEffect, useLayoutEffect} from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-
-import { Container, ContainerIcon, LabelField, InputSearchWrapper, InputText, WrapperResults, ItemResult, TextItem, ItemSeeAll } from './fieldSearchStyle'
-import { IFieldSearch } from './fieldSearch'
-import { Clock, SearchIcon } from '@shared/icons'
-
-export default function FieldSearch({ variant, placeholder, onChange, listResults, 
-    hasOptionSeeAll, value, seeAll, style, loading, textLoading, enableAnimationField,
-    isMobileVersion, setFieldSearchIsOpen, fieldSearchIsOpen, onFilter, historicResults,
-    labeledResultList, isLabeledResult }: IFieldSearch
-) {
-    const [actionAreaInput, setActionAreaInput ] = useState(false)
-    const [inputOnFocus, setInputOnFocus ] = useState(false)
-    const [isMobile, setIsMobile ] = useState(isMobileVersion)
-    const [openSearchFieldMobile, setOpenSearchFieldMobile ] = useState(fieldSearchIsOpen)
-    const [isOpenDrop, setIsOpenDrop ] = useState(false)
-    const [ValueSearch, setValueSearch] = useState('');    
-    const [Loading, setLoading] = useState(loading);
-    const [resultList, setResultList] = useState([]);
-
-    useEffect(() => {
-        if(listResults && listResults.length > 0){
-            setResultList(listResults)
-            setIsOpenDrop(true)
-        }
-        if(labeledResultList && labeledResultList.length > 0){
-            setResultList(labeledResultList)
-            setIsOpenDrop(true)
-        }
-    }, [listResults, labeledResultList]);
-
-    useEffect(() => {
-        setLoading(loading)
-    }, [loading]);
-    
-    useEffect(() => {
-        setFieldSearchIsOpen(openSearchFieldMobile)
-    },[])
-
-    useEffect(() => {
-        if(fieldSearchIsOpen !== openSearchFieldMobile)
-            setOpenSearchFieldMobile(fieldSearchIsOpen)
-    }, [fieldSearchIsOpen]);
-
-    useEffect(() => {
-        setIsOpenDrop(false)
-        setFieldSearchIsOpen(openSearchFieldMobile)
-    },[openSearchFieldMobile])
-
-    // Handle Open list results
-
-    const handleFocusUp = () => {
-        
-        setInputOnFocus(true)
-        setIsOpenDrop(true)
-        if(historicResults){
-            setIsOpenDrop(historicResults.length > 0)
-        }
-        else{
-            setIsOpenDrop(ValueSearch && ValueSearch.length > 0 && resultList && resultList.length > 0)
-        }
-    }
-    const handleFocusDown = () => {
-        
-        setIsOpenDrop(actionAreaInput)
-    }
-
-    useEffect(() => {
-        const delayDebounceFn = setTimeout(() => {
-            onFilter(ValueSearch)
-            setIsOpenDrop(ValueSearch && ValueSearch.length > 0 && resultList && resultList.length > 0)
-          
-        }, 500)
-    
-        return () => clearTimeout(delayDebounceFn)
-      }, [ValueSearch])
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <div style={{position: 'relative'}} id='bar-search-global-menu'>
-            { variant == 'LXP' ?
-                <Container
-                    onMouseOver={() => setActionAreaInput(true)}
-                    onMouseOut={() => setActionAreaInput(false)}
-                    onFocus={() => handleFocusUp()}
-                    onBlur={() => handleFocusDown()}
-                >
-                    <InputSearchWrapper 
-                        isHover={actionAreaInput} 
-                        isOnFocus={inputOnFocus} 
-                        isMobile={!openSearchFieldMobile}
-                        style={{...style}}
-                    >
-                        <ContainerIcon onClick={() => isMobile && setOpenSearchFieldMobile( !openSearchFieldMobile )}>
-                            <SearchIcon  fill={'#fff'}/>
-                        </ContainerIcon>
-                        <InputText 
-                            placeholder={placeholder} 
-                            onChange={(e) => {
-                                setIsOpenDrop(false)
-                                setValueSearch(e.target.value)
-                            }}
-                            value={ValueSearch} 
-                        />
-                    </InputSearchWrapper>
-                    { Loading &&
-                        <WrapperResults style={{...style, marginTop: 8}}  isVisibleResults={true}>
-                            <ItemResult style={{cursor: 'default'}}>                                
-                                <TextItem isLastItem={true} style={{color: '#999'}}>{textLoading ? textLoading : 'Carregando...'}</TextItem>
-                            </ItemResult>
-                        </WrapperResults>
-                    }
-                    { labeledResultList && labeledResultList.length > 0 && inputOnFocus && isLabeledResult &&
-                        <WrapperResults style={{...style, marginTop: 8}} isVisibleResults={isOpenDrop}
-                            onMouseOver={() => setActionAreaInput(true)}
-                            onMouseOut={() => setActionAreaInput(false)}
-                        >
-                            {ValueSearch.length === 0 && inputOnFocus && historicResults && historicResults.length > 0 &&
-                                historicResults.map(item => {
-                                    return <ItemResult 
-                                        key={item.id} 
-                                        onClick={() => {
-                                            setIsOpenDrop(false)
-                                            return item.onClick(item.id)
-                                        }}
-                                    >
-                                        <TextItem isLastItem={false && !hasOptionSeeAll}>{<Clock />} {item.label}</TextItem>
-                                    </ItemResult>
-                                    
-                                })
-
-                            }
-                            {ValueSearch.length > 0 &&
-                                resultList.map((item, index) => (
-                                    <div key={index} style={{width: '100%', marginTop: 16}}>
-                                        <span style={{fontFamily: 'PT Sans', fontSize: 14, fontWeight: 400, color: '#757575', paddingLeft: 16, marginLeft: 5, marginRight: 5}}>
-                                            {item.label}
-                                        </span>
-                                        {item.listResult.map(item => (
-                                            <ItemResult 
-                                                key={item.id} 
-                                                onClick={() => {
-                                                    setIsOpenDrop(false)
-                                                    return item.onClick(item.id)
-                                                }}
-                                            >
-                                                <TextItem isLastItem={false && !hasOptionSeeAll}>{item.label}</TextItem>
-                                            </ItemResult>
-                                        ))
-                                        }
-                                    </div>
-                                
-                                ))
-                            }
-                            { hasOptionSeeAll && labeledResultList.length > 0 && ValueSearch.length > 0 &&
-                                <ItemSeeAll
-                                    onClick={(e) => { 
-                                        setIsOpenDrop(false)
-                                        return seeAll.onClick(e)
-                                    }}
-                                >
-                                    {seeAll.label}
-                                </ItemSeeAll>
-                            }
-                        </WrapperResults>
-                    }
-                    { listResults && listResults.length > 0  && inputOnFocus && !isLabeledResult &&
-                        <WrapperResults style={{...style, marginTop: 8}} isVisibleResults={isOpenDrop}
-                            onMouseOver={() => setActionAreaInput(true)}
-                            onMouseOut={() => setActionAreaInput(false)}
-                        >
-                            {ValueSearch.length === 0 && inputOnFocus && historicResults && historicResults.length > 0 &&
-                                historicResults.map(item => {
-                                    return <ItemResult 
-                                        key={item.id} 
-                                        onClick={() => {
-                                            setIsOpenDrop(false)
-                                            return item.onClick(item.id)
-                                        }}
-                                    >
-                                        <TextItem isLastItem={false && !hasOptionSeeAll}>{<Clock />} {item.label}</TextItem>
-                                    </ItemResult>
-                                    
-                                })
-
-                            }
-                            {ValueSearch.length > 0 &&
-                                resultList.map(item => {
-                                    return <ItemResult 
-                                        key={item.id} 
-                                        onClick={() => {
-                                            setIsOpenDrop(false)
-                                            return item.onClick(item.id)
-                                        }}
-                                    >
-                                        <TextItem isLastItem={false && !hasOptionSeeAll}> {item.label}</TextItem>
-                                    </ItemResult>
-                                    
-                                })
-                            }
-                            { hasOptionSeeAll && listResults.length > 0 && ValueSearch.length > 0 &&
-                                <ItemSeeAll
-                                    onClick={(e) => { 
-                                        setIsOpenDrop(false)
-                                        return seeAll.onClick(e)
-                                    }}
-                                >
-                                    {seeAll.label}
-                                </ItemSeeAll>
-                            }
-                        </WrapperResults>
-                    }
-                </Container>
-                :
-                <Container
-                    onMouseOver={() => setActionAreaInput(true)}
-                    onMouseOut={() => setActionAreaInput(false)}
-                    onFocus={() => setInputOnFocus(true)}
-                    onBlur={() => setInputOnFocus(false)}
-                >
-                    <InputSearchWrapper isHover={actionAreaInput} isOnFocus={inputOnFocus} style={{...style}}>
-                        <ContainerIcon> <SearchIcon fill={'#fff'} /> </ContainerIcon>
-                        <InputText placeholder={placeholder} onChange={onChange} value={value}/>
-                    </InputSearchWrapper>
-                </Container>
-            }
-            </div>
-        </ThemeProvider>
-    )
-}

package/src/components/filter-accordion-checkbox/filterAccordionCheckbox.d.ts

@@ -1,7 +0,0 @@
-import React from "react"
-
-export interface IFilterAccordion {
-    generalTitle?: string,
-    object?: any,
-    onSelected?: (e) => void
-}

package/src/components/filter-accordion-checkbox/filterAccordionCheckbox.stories.tsx

@@ -1,101 +0,0 @@
-import React from 'react'
-
-import FilterAccordionCheckbox from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Learning Tech/Filter Accordion Checkbox',
-    component: FilterAccordionCheckbox,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <FilterAccordionCheckbox {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    generalTitle: 'Escolha abaixo',
-    onSelected: (e) => alert(e),
-    object: [
-        {
-            category: "Etapa do Ciclo",
-            description: "Selecione a(s) etapa(s) do ciclo de aprendizagem:",
-            group: [
-                { id: '1', description: "Não Iniciou" },
-                { id: '2', description: "Problema definido" },
-                { id: '3', description: "Hipóteses levantadas" },
-                { id: '4', description: "Testes realizados" },
-                { id: '5', description: "Resultados e aprendizados" },
-                { id: '6', description: "Próximos Passos" },
-                { id: '7', description: "Finalizado" }
-            ]
-        },
-        {
-            category: "Trilha",
-            description: "Selecione a(s) trilha(s):",
-            group: [
-                { id: '8', description: "Colaboraçao" },
-                { id: '9', description: "Customer Centric" },
-                { id: '10', description: "Customer Experience" },
-                { id: '11', description: "Digital Business Mindset" },
-                { id: '12', description: "Liderança Que Inspira" },
-                { id: '13', description: "Visão Sistêmica" },
-            ]
-        },
-        {
-            category: "Avaliação 360º",
-            description: "Selecione:",
-            group: [
-                { id: '14', description: "Aguardando avaliação" },
-                { id: '15', description: "Problema aceito" },
-                { id: '16', description: "Problema em revisão" },
-            ]
-        },
-        {
-            category: "Cargo",
-            description: "Selecione o(s) cargo(s):",
-            group: [
-                { id: '17', description: "Estudante/Universitário(a)" },
-                { id: '18', description: "Estagiário(a)" },
-                { id: '19', description: "Recém-formado(a)" },
-                { id: '20', description: "Trainee" },
-                { id: '21', description: "Analista" },
-                { id: '22', description: "Supervisor(a)" },
-                { id: '23', description: "Coordenador(a)" },
-                { id: '24', description: "Gerente" },
-                { id: '25', description: "Diretor(a)/Head" },
-                { id: '26', description: "C-Level" },
-                { id: '27', description: "Fundador(a)/Sócio(a)" },
-                { id: '28', description: "Outro(a)" },
-            ]
-        },
-        {
-            category: "Área",
-            description: "Selecione o(s) cargo(s):",
-            group: [
-                { id: '29', description: "Administrativo" },
-                { id: '30', description: "Alta Direção" },
-                { id: '31', description: "Atendimento" },
-                { id: '32', description: "Comercial/Vendas" },
-                { id: '33', description: "Comunicação" },
-                
-                { id: '34', description: "Controladoria" },
-                { id: '35', description: "Data Science" },
-                { id: '36', description: "Design" },
-                { id: '37', description: "Financeiro" },
-                { id: '38', description: "Jurídico" },
-
-                { id: '39', description: "Logística" },
-                { id: '40', description: "Marketing" },
-                { id: '41', description: "Novos Negócios" },
-                { id: '42', description: "Operacional" },
-                { id: '43', description: "Produto" },
-
-                { id: '44', description: "Projetos" },
-                { id: '45', description: "Recursos Humanos" },
-                { id: '46', description: "Suprimentos" },
-                { id: '47', description: "Tecnologia da Informação" },
-                { id: '48', description: "Outro" },
-            ]
-        },
-    ]
-}

package/src/components/filter-accordion-checkbox/filterAccordionCheckbox.utils.ts

@@ -1,7 +0,0 @@
-import React from "react"
-
-export function randID() {
-    return Math.random()
-        .toString(36)
-        .substr(2, 9);
-};

package/src/components/filter-accordion-checkbox/filterAccordionCheckboxStyles.ts

@@ -1,2 +0,0 @@
-import styled from 'styled-components'
-