frst-components 0.20.0

package/src/components/commentary-box/index.tsx

@@ -0,0 +1,260 @@
+import React,{useEffect, useState, useLayoutEffect} from 'react'
+import '../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import * as Styles from './commentaryBoxStyles'
+import { ICommentaryBox } from './commentaryBox'
+import { MoreDotsHorizontal, Dot, EyeOff, RocketIconCommentaryBox, ThumbsUpCovered } from '@shared/icons'
+
+import SpeechBubble from '@components/speech-bubble'
+import Button from '@components/buttons'
+
+import { buildStringWithLinkHTML, randID, buildShortName } from './commentaryBox.utils'
+
+
+const WIDTH_MOBILE = 550;
+
+
+export default function CommentaryBox({
+    name, className, styles, position, value, date, actionLike, actionAnswer, isMe, isAuthor,
+    actionDeleteComment, actionEditComment, actionMakePrivate, actionUpdateValue,
+    detectLinks, idTextComment, wasEdited, hasAnswer, hasDropdown, isLiked, totalLikes, textSaveButton, textSaveButtonMobile,
+    textCancelButton, textYou, textPrivateComment, textEdited, textLiked, textUnliked, textAnswer, textMakePrivate, 
+    textMakePublic, textEditComment, textDeleteComment, isPrivateMe, isPrivateAuthor }: ICommentaryBox) {
+    
+
+    // Identify Screen Resizing
+    const [size, setSize] = useState([0, 0])
+    useLayoutEffect(() => {
+        function updateSize() {
+        setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+
+    const [ isOpenDrop, setIsOpenDrop ] = useState(false)
+    const [ onEditing, setOnEditing ] = useState(false)
+    const [ enableSaveEdit, setEnableSaveEdit ] = useState(false)
+    const [ actionArea, setActionArea] = useState(false)
+    
+    const [ iDCommentPosted , setIDCommentPosted ] = 
+            useState(idTextComment ? idTextComment : `IDCommentPosted-${randID()}`);
+    const [ iDCommentInEditing , setIDCommentInEditing ] = 
+            useState(idTextComment ? `idBoxCommentEditing-${idTextComment}` : `idBoxCommentEditing-${randID()}`);
+    const [ iDButtonMore , setIDButtonMore ] = 
+            useState(idTextComment ? `iDButtonMore-${idTextComment}` : `iDButtonMore-${randID()}`);
+
+    useEffect(() =>  {
+        (!onEditing) &&
+        (document.getElementById(iDCommentPosted)) &&
+        (detectLinks ? 
+            document.getElementById(iDCommentPosted).innerHTML = buildStringWithLinkHTML({ value }) : 
+            document.getElementById(iDCommentPosted).innerHTML = value)
+    }, [detectLinks, onEditing])
+
+    useEffect(() =>  {
+        (onEditing) &&
+        (document.getElementById(iDCommentInEditing)) && 
+        (document.getElementById(iDCommentInEditing).addEventListener("keyup",  changedInputComment, false));
+
+        (!onEditing) &&
+        (document.getElementById(iDCommentInEditing)) && 
+        (document.getElementById(iDCommentInEditing).removeEventListener("keyup",  changedInputComment, false));
+
+        function changedInputComment() {
+            let textInEditing = document.getElementById(iDCommentInEditing).innerText;
+            setEnableSaveEdit(textInEditing != value);
+        }
+    }, [onEditing])
+
+    useEffect(() => {
+        if(isOpenDrop) {
+            (document.body.addEventListener("click",  checksAnyClickOnScreen, false));
+        }
+    }, [isOpenDrop]);
+
+    function editingComment() {
+        setOnEditing(true)
+        actionEditComment()
+    }
+
+    function cancelEditComment() {
+        setOnEditing(false)
+        setEnableSaveEdit(false)
+    }
+    
+    function saveEditComment() {
+        let finalText = '';
+        (document.getElementById(iDCommentInEditing)) &&
+        (finalText = document.getElementById(iDCommentInEditing).innerText);
+
+        setOnEditing(false)
+        setEnableSaveEdit(false)
+        actionUpdateValue(finalText)
+    }
+
+    const checksAnyClickOnScreen = () => {
+        if(isOpenDrop) {
+            document.body.removeEventListener("click",  checksAnyClickOnScreen, false);
+            setIsOpenDrop(false);
+        }
+    }
+
+    const verifyClick = () => {
+        if(!actionArea) {
+            setIsOpenDrop(false);
+        }
+    }
+
+    const getColorIconMore = () => {
+        let finalColor = '#757575'; // Default
+        (actionArea) && (finalColor = "#222222"); // Hover
+        (isOpenDrop) && (finalColor = '#ff4d0d'); // Selected
+        return finalColor;
+    }
+
+    return (
+        <div style={{width: 'auto', ...styles}} >
+        <SpeechBubble className={ className } highlight={ onEditing } >
+
+            <Styles.HeaderWrapper>
+                <Styles.IdentificationWrapper>
+                    <Styles.NameWrapper>
+                        <Styles.Name> { size[0] > WIDTH_MOBILE ? name : buildShortName(name)} </Styles.Name>
+                        { isMe && 
+                            <>  
+                                <Styles.DividerDot>
+                                    <Dot fill={ '#757575' }/>
+                                </Styles.DividerDot>
+                                <Styles.IsMe> { textYou } </Styles.IsMe>  
+                            </>
+                        }
+                        {size[0] > WIDTH_MOBILE ? 
+                        (
+                            ( isPrivateAuthor || isPrivateMe) &&
+                            <>
+                                <Styles.DividerDot>
+                                    <Dot fill={ '#757575' }/>
+                                </Styles.DividerDot>   
+                                <Styles.EyeOffIcon>                                     
+                                    <EyeOff fill={  '#757575' }/>
+                                </Styles.EyeOffIcon>
+                                <Styles.CommentPrivate> 
+                                    {textPrivateComment} 
+                                </Styles.CommentPrivate>
+                            </>
+                        ): null
+                        }
+                    </Styles.NameWrapper>
+                    <Styles.Position> { position } </Styles.Position>
+                </Styles.IdentificationWrapper>
+                
+                <Styles.OptionsWrapper>
+                    {size[0] > WIDTH_MOBILE &&
+                    <Styles.Date> { date } {wasEdited && `(${textEdited})`} </Styles.Date>}
+                    { hasDropdown && (isAuthor || isMe) &&
+                    <Styles.Dropdown>
+                        <Styles.ButtonMore 
+                            onClick={ () => setIsOpenDrop(!isOpenDrop) } 
+                            onMouseOver={() => setActionArea(true)}
+                            onMouseOut={() => setActionArea(false)}
+                        >
+                            <MoreDotsHorizontal fill={ getColorIconMore() } />
+                        </Styles.ButtonMore>
+                        <Styles.DropdownWrapper isVisible={isOpenDrop} isMe={isMe}>
+                            {isMe && isAuthor && 
+                                <>
+                                    <Styles.ItemDrop onClick={ actionMakePrivate }> { (!isPrivateAuthor && !isPrivateMe)  ? textMakePrivate : textMakePublic }  </Styles.ItemDrop>
+                                    <Styles.ItemDrop onClick={ () => editingComment() } > { textEditComment } </Styles.ItemDrop>
+                                    <Styles.ItemDrop isLastItem={true} onClick={ actionDeleteComment }> { textDeleteComment } </Styles.ItemDrop>
+                                </> 
+                            } 
+                            {isMe && !isAuthor &&
+                                <>
+                                    { (!isPrivateAuthor) &&
+                                        <Styles.ItemDrop onClick={ actionMakePrivate }> {!isPrivateMe ? textMakePrivate : textMakePublic}  </Styles.ItemDrop> }
+                                    <Styles.ItemDrop onClick={ () => editingComment() } > {textEditComment} </Styles.ItemDrop>
+                                    <Styles.ItemDrop isLastItem={true} onClick={ actionDeleteComment }> {textDeleteComment} </Styles.ItemDrop>
+                                </> 
+                            } 
+                            {isAuthor && !isMe  &&
+                                <>
+                                    <Styles.ItemDrop onClick={ actionMakePrivate } > {(!isPrivateAuthor && !isPrivateMe) ? textMakePrivate : textMakePublic} </Styles.ItemDrop>
+                                    <Styles.ItemDrop isLastItem={true} onClick={ actionDeleteComment }> {textDeleteComment} </Styles.ItemDrop>
+                                </>
+                            }
+                         </Styles.DropdownWrapper>
+                    </Styles.Dropdown>}
+                </Styles.OptionsWrapper>
+            </Styles.HeaderWrapper>
+
+            {size[0] <= WIDTH_MOBILE &&
+            <div style={{display:'flex', marginLeft:'14px', marginTop: '5px', alignItems: 'center'}}>
+                { (isPrivateAuthor || isPrivateMe) &&
+                    <div style={{marginRight: '10px'}}>
+                        <Styles.EyeOffIcon>                                     
+                            <EyeOff fill={  '#757575' }/>
+                        </Styles.EyeOffIcon>
+                    </div>
+                }
+                <Styles.Date> { date } {wasEdited && `(${textEdited})`} </Styles.Date>
+            </div>}
+
+            {onEditing ?
+                <>
+                    <Styles.CommentaryEditingContent
+                        id={iDCommentInEditing}
+                        data-gramm="false" 
+                        contentEditable="true" 
+                        role="textbox" 
+                        aria-multiline="true"
+                        suppressContentEditableWarning={true}
+                    >
+                        { value }
+                    </Styles.CommentaryEditingContent>
+                    <Styles.FooterEditingWrapper width={size[0]} >
+                        <Button 
+                            handleClick={() => { saveEditComment() }} 
+                            label={size[0] > WIDTH_MOBILE ? textSaveButton : textSaveButtonMobile } 
+                            disabled={!enableSaveEdit} 
+                            variant="primary" 
+                            style={{marginRight: '20px' }}
+                        />
+                        <Button 
+                            handleClick={() => { cancelEditComment() }} 
+                            label={textCancelButton}  
+                            variant="secondary"
+                        />
+                    </Styles.FooterEditingWrapper>
+                </>
+                :  
+                <>
+                    <Styles.CommentaryContent id={iDCommentPosted}>{ value }</Styles.CommentaryContent>
+                    <Styles.IterationsWrapper>
+                        <Styles.LikesStatistics>
+                            {isLiked ? 
+                                <ThumbsUpCovered width='16px' height='16px'/> 
+                                : 
+                                <ThumbsUpCovered width='16px' height='16px' customColor_1="#CCCCCC"/>
+                            }
+                            <Styles.TextTotalLikes>{ totalLikes }</Styles.TextTotalLikes>
+                        </Styles.LikesStatistics>
+                        <Styles.IterationsButtonsWrapper>
+                            {actionLike && (
+                                <Styles.LinkButton onClick={ actionLike }>
+                                    { isLiked ? textLiked : textUnliked }
+                                </Styles.LinkButton>
+                            )}
+                            { hasAnswer &&
+                            <Styles.LinkButton onClick={ actionAnswer }>  { textAnswer }  </Styles.LinkButton> }
+                        </Styles.IterationsButtonsWrapper>
+                    </Styles.IterationsWrapper>
+                </> 
+            }
+            
+        </SpeechBubble>
+        </div>
+    )
+}

package/src/components/conquistaCarrossel/conquistaCarrossel.d.ts

@@ -0,0 +1,13 @@
+import React from "react"
+
+
+export interface IConquistaCarrossel {
+    objectCards?: any,
+    onSelected?: (n: any) => void,
+    marginsArrowButton?: number,
+    sizeArrowButton?: number,
+    horizontalMarginInternScroll?: string,
+    positionArrowButton?: string,    
+    marginTopArrrowButton?: string,    
+    textMoreDetails?: string,    
+}

package/src/components/conquistaCarrossel/conquistaCarrossel.stories.tsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import ConquistaCarrossel from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Learning Tech/Conquista carrossel',
+    component: ConquistaCarrossel,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <ConquistaCarrossel {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    onSelected: (e : any) => { alert("Item Selecionado: " + e)},
+    objectCards: [
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil, um teste para ver se o funcionamento do texto de descrição está certo.',
+                        problemId: '123',
+                        statusCard: 1,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Descobri fatores que estão contribuindo negativamente para que os alunos não engajem na plataforma',
+                        problemId: '1234',
+                        statusCard: 2,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 1,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 2,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 2,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil, com mais texto para ver o comportamento do card.',
+                        problemId: '1234',
+                        statusCard: 2,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 1,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 1,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                ],
+    textMoreDetails: 'Mais detalhes',
+    marginsArrowButton: 50,
+    sizeArrowButton: 80,
+    horizontalMarginInternScroll: '50px',
+}
+
+export const bottom = Template.bind({})
+bottom.args = {
+    onSelected: (e : any) => { alert("Item Selecionado: " + e)},
+    objectCards: [
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil, um teste para ver se o funcionamento do texto de descrição está certo.',
+                        problemId: '123',
+                        statusCard: 1,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Descobri fatores que estão contribuindo negativamente para que os alunos não engajem na plataforma',
+                        problemId: '1234',
+                        statusCard: 2,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 1,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 2,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 2,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil, com mais texto para ver o comportamento do card.',
+                        problemId: '1234',
+                        statusCard: 2,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 1,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                    {
+                        description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil',
+                        problemId: '1234',
+                        statusCard: 1,
+                        userArea: 'Customer Experience',
+                        userName: 'Érika Heim',
+                        
+                    },
+                ],
+    textMoreDetails: 'Mais detalhes',
+    marginsArrowButton: 10,
+    sizeArrowButton: 40,
+    horizontalMarginInternScroll: '15px',
+    positionArrowButton: 'bottom',
+    marginTopArrrowButton: '20px',
+}

package/src/components/conquistaCarrossel/index.tsx

@@ -0,0 +1,56 @@
+import React,{ useState, useEffect } from 'react'
+import '../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import {IConquistaCarrossel} from './conquistaCarrossel'
+
+import ScrollContainer from '@components/scroll-container'
+import CardResultConquista from '@components/cards/cardResultConquista'
+
+export default function ConquistaCarrossel({ onSelected, objectCards, marginsArrowButton, 
+    sizeArrowButton, horizontalMarginInternScroll, positionArrowButton, marginTopArrrowButton, textMoreDetails }: IConquistaCarrossel ) {
+    const [ itemSelected, setItemSelected ] = useState(-1);
+
+    const onItemSelect = (n: number) => {
+        setItemSelected(n)
+        onSelected(n)
+    }
+    const [btnViewMore, setBtnViewMore] = useState('')
+
+    useEffect(() => {
+        setBtnViewMore(textMoreDetails)
+    }, [textMoreDetails]);
+    
+    function renderCard(item, index) {
+        return (
+            <CardResultConquista 
+                key={index}
+                textMoreDetails={btnViewMore ? btnViewMore : 'Mais detalhes'}
+                description={item.description}
+                problemId={item.problemId}
+                statusCard={item.statusCard}
+                userArea={item.userArea}
+                userName={item.userName}
+                userAvatar={item.userAvatar}
+                onClick={() => onSelected(item.problemId)}
+                style={{marginRight: '24px', whiteSpace:'pre-wrap'}}
+            />
+        )
+    }
+
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+            <ScrollContainer 
+                stepMove={380} 
+                isVisibleControlsButtons 
+                sizeArrowButton={sizeArrowButton} 
+                marginsArrowButton={marginsArrowButton}
+                horizontalMarginInternScroll={horizontalMarginInternScroll}
+                positionArrowButton={positionArrowButton ? positionArrowButton : ''}
+                marginTopArrrowButton={marginTopArrrowButton ? marginTopArrrowButton :'20px'}
+            >
+                {objectCards.map(renderCard)}
+            </ScrollContainer>
+        </ThemeProvider>
+    )
+}

package/src/components/demo/stepController/StepControllerStyle.ts

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+
+export const ContainerStepController = styled.div`
+  width: 100%;
+  height: 51px;
+  background: #efeded;
+  padding: 10px;
+  position: relative;
+  top: 25px;
+  display: flex;
+  justify-content: space-between;
+  color: #272727;
+  font-weight: lighter;
+  border-radius: 0 0 10px 10px;
+  border-top: 1px solid #bdbdbd;
+  font-size: 14px;
+  font-weight: 600;
+  > div {
+    font-size: 0.8rem;
+    cursor: pointer;
+    display: inline-flex;
+    vertical-align: text-bottom;
+    box-sizing: inherit;
+    text-align: center;
+    align-items: center;
+  }
+`
+
+export const StepControllerArrow = styled.span`
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  color: #272727;
+  transition: all 0.2s;
+  margin: 5px;
+
+  :hover {
+    opacity: 0.5;
+    background-color: #272727;
+    color: #bdbdbd;
+  }
+`

package/src/components/demo/stepController/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import * as S from './StepControllerStyle'
+import ComputerIcon from '@mui/icons-material/Computer'
+import PersonAddIcon from '@mui/icons-material/PersonAdd'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+
+export default function StepController({
+  top = '25px',
+  numberCurrentStep,
+  numberTotalSteps,
+  labelHome,
+  labelContact,
+  prevStep,
+  nextStep,
+  goToStart,
+  goToContact
+}: {
+  top?: string
+  numberCurrentStep: number
+  numberTotalSteps: number
+  labelHome: string
+  labelContact: string
+  prevStep: () => void
+  nextStep: () => void
+  goToStart: () => void
+  goToContact: () => void
+}) {
+  return (
+    <S.ContainerStepController style={{ top: top }}>
+      <div onClick={goToStart}>
+        <ComputerIcon sx={{ color: '#242424', fontSize: '0.9rem', marginRight: '8px' }} />
+        {labelHome}
+      </div>
+
+      <div>
+        <S.StepControllerArrow onClick={prevStep}>
+          <ArrowBackIosIcon sx={{ fontSize: '0.8rem', marginLeft: '2px' }} />
+        </S.StepControllerArrow>
+        <span style={{ fontSize: '0.8rem', margin: '0 3px' }}>{numberCurrentStep}</span>
+        <span style={{ fontSize: '0.8rem', margin: '0 3px' }}>de</span>
+        <span style={{ fontSize: '0.8rem', margin: '0 3px' }}>{numberTotalSteps}</span>
+        <S.StepControllerArrow onClick={nextStep}>
+          <ArrowForwardIosIcon sx={{ fontSize: '0.8rem' }} />
+        </S.StepControllerArrow>
+      </div>
+      <div onClick={goToContact}>
+        <PersonAddIcon sx={{ color: 'inherit', fontSize: '0.8rem', marginRight: '8px' }} />
+        {labelContact}
+      </div>
+    </S.ContainerStepController>
+  )
+}

package/src/components/demo/stepController/stepController.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import StepController from './index'
+
+export default {
+  title: 'Demo/StepController',
+  component: StepController
+}
+
+const Template = (args: any) => <StepController {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+  numberCurrentStep: 1,
+  numberTotalSteps: 64,
+  prevStep: () => console.log('prevStep'),
+  nextStep: () => console.log('nextStep'),
+  goToStart: () => console.log('goToStart'),
+  goToContact: () => console.log('goToContact'),
+  labelHome: 'Inicio',
+  labelContact: 'Contato'
+}

package/src/components/dropdown-profile-menu/dropdownProfileMenu.d.ts

@@ -0,0 +1,28 @@
+import React from "react"
+import { typeUser } from "../global-menu/globalMenu";
+
+
+export type enumVariant = 'default' | 'LXP';
+
+export type typeSubItens = {
+    id: string, 
+    label: string, 
+    onClick: (e) => void
+}
+
+export type typeMenuItens = {
+    label: string, 
+    iconBegin?: any,
+    onClick?: (e) => void,
+    subItens?: Array<typeSubItens>
+}
+
+export interface IDropdownProfileMenu {
+    variant?: enumVariant,
+    user?: typeUser,
+    isMobileVersion: boolean,
+    profileMenuText: string,
+    handleProfileMenuClick ?: () => void,
+    menuItems?: Array<typeMenuItens>,
+    style?: React.CSSProperties
+}