frst-components 0.20.0

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

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

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

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

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

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

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

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

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

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