frst-components 0.20.0

package/src/components/dropdown-profile-menu/dropdownProfileMenu.stories.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+
+import DropdownProfileMenu 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: 'LXP/DropdownProfileMenu',
+    component: DropdownProfileMenu,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <DropdownProfileMenu {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    profileMenuText: 'Ver Perfil',
+    handleProfileMenuClick: () => alert('Clicado Perfil') ,
+    variant: 'default',
+    language: 'en',
+    user: {
+        name: 'Student name',
+        textIsMe: 'Eu',
+        avatar: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+        company: 'Company name',
+        handleClickProfile: () => alert('Click Profile')
+    },
+    menuItems: [
+        {
+            label:  'Perfil',
+            onClick: (e) => alert('Perfil')
+        },
+        {
+            label:  'Configurações',
+            onClick: (e) => alert('Configurações')
+        },
+        {
+            label:  'Alternar conta',
+            beginIcon: <Icons.ChangeAccount />,
+            subItens: [
+                { id: '1', label: 'submenu-1', onClick: (e) => alert('submenu-1')},
+                { id: '2', label: 'submenu-2', onClick: (e) => alert('submenu-2')},
+                { id: '3', label: 'submenu-3', onClick: (e) => alert('submenu-3')}
+            ]
+        },
+        {
+            label:  'Sair',
+            beginIcon: <Icons.ExitArrow />,
+            onClick: () => alert('Sair')
+        },
+    ]
+}
+
+export const lxp = Template.bind({})
+lxp.args = {
+    profileMenuText: 'Ver Perfil',
+    handleProfileMenuClick: () => alert('Clicado Perfil') ,
+    variant: 'LXP',
+    user: {
+        name: 'Student name',
+        textIsMe: 'Eu',
+        avatar: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
+        company: 'Company name',
+        handleClickProfile: () => alert('Click Profile')
+    },
+    menuItems: [
+        {
+            label:  'Perfil',
+            onClick: (e) => alert('Perfil')
+        },
+        {
+            label:  'Configurações',
+            onClick: (e) => alert('Configurações')
+        },
+        {
+            label:  'Alternar conta',
+            iconBegin: <Icons.ChangeAccount />,
+            subItens: [
+                { id: '1', label: 'submenu-1', onClick: (e) => alert('submenu-1')},
+                { id: '2', label: 'submenu-2', onClick: (e) => alert('submenu-2')},
+                { id: '3', label: 'submenu-3', onClick: (e) => alert('submenu-3')}
+            ]
+        },
+        {
+            label:  'Sair',
+            iconBegin: <Icons.ExitArrow />,
+            onClick: () => alert('Sair')
+        },
+    ],
+    isMobileVersion: false
+}

package/src/components/dropdown-profile-menu/dropdownProfileMenuStyle.ts

@@ -0,0 +1,171 @@
+import styled from 'styled-components'
+import Avatar from '@mui/material/Avatar'
+import MenuItem from '@mui/material/MenuItem'
+import Menu from '@mui/material/Menu'
+
+
+export const Container = styled.div`
+  width: auto;
+  height: auto;
+`
+export const ProfileInfos = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 290px;
+  background-color: #222;
+  padding: 12px;
+`
+  export const WrapperRightProfileInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    margin-left: 16px;
+  `
+  export const ProfileNameInfo = styled.span`
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 21px;
+    
+    display: flex;
+    align-items: center;
+    
+    color: #FFFFFF;
+  `
+  export const ProfileCompanyInfo = styled.span`
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+    /* identical to box height */
+    
+    display: flex;
+    align-items: center;
+    
+    color: #FFFFFF;
+  `
+
+  export const WrapperButtonFrst = styled.div`
+    & > button {
+      margin-top: 16px;
+      
+      font-family: 'Work Sans';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 19px;
+      /* identical to box height */
+
+      display: flex;
+      align-items: center;
+
+      color: #FFF; 
+      border: 1px solid #FFF;
+      width: fit-content;
+      height: 48px;
+      border-radius: 8px;
+      white-space: nowrap;
+
+      &:hover {
+        color: #FFF; 
+        border: 1.8px solid #FFF;        
+      }
+      &:focus {
+        color: #FFF; 
+        border: 2px solid #FFF;        
+      }
+    }
+  `
+
+export const UserName = styled.span`
+  color: white;
+  padding-left: 8px;
+  padding-right: 8px;
+
+  text-transform: none;
+
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
+
+  display: flex;
+  align-items: center;
+  text-align: right;
+
+  color: #FFFFFF;
+`
+
+export const AvatarCustomUser = styled(Avatar)`
+  height: 32px;
+  width: 32px;
+`
+
+export const MenuCustom = styled(Menu)<{variantstyle: any}>`
+  & .MuiPaper-root{
+    border-radius: 0px;
+    ${({variantstyle}) => variantstyle == 'LXP' &&`border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+      box-shadow: none !important;`
+    }
+  }
+  ul {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`
+
+export const LoginMenuCustom = styled(Menu)`
+  & .MuiPaper-root{
+    border-radius: 0px;
+    box-shadow: none !important;
+    background: linear-gradient(359.72deg, rgba(166, 166, 166, 0.4) 69.54%, rgba(0, 0, 0, 0.4) 88.63%), #000000 !important;
+  }
+  ul {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`
+
+export const MenuItemCustom = styled(MenuItem)<{variantstyle: any}>`
+  color: white !important;
+  border: 0;
+
+  ${({variantstyle}) => variantstyle == 'LXP' ?
+    `background-color: #222222 !important;
+     border-top: 0.5px solid #757575 !important;` 
+  :
+    `
+     width: 185px;
+     background-color: #FF4D0D !important;
+     border-top: 0.5px solid #F5792A !important;`
+  }
+
+  &:hover {
+
+    ${({variantstyle}) => variantstyle == 'LXP' ?
+    `background-color: #444444 !important;`
+    :
+    `background-color: #F5792A !important;` }
+    
+  }
+`
+
+export const SubMenuItemCustom = styled(MenuItem)<{variantstyle}>`
+  color: white !important;
+
+  ${({variantstyle}) => variantstyle == 'LXP' ?
+    `background-color: #222222 !important;`
+    :
+    `background-color: #FF4D0D !important;`
+  }
+
+  &:hover {
+    ${({variantstyle}) => variantstyle == 'LXP' ?
+    `background-color: #444444 !important;`
+    :
+    `background-color: #F5792A !important;` }
+  }
+`

package/src/components/dropdown-profile-menu/index.tsx

@@ -0,0 +1,203 @@
+import * as React from 'react'
+import * as Styles from './dropdownProfileMenuStyle'
+import Button from '@mui/material/Button'
+import { DropdownIcon, DropdownSideIconWhite } from '@shared/icons'
+import {default as ButtonFrst} from '@components/buttons'
+
+import { IDropdownProfileMenu } from './dropdownProfileMenu'
+
+
+export default function DropdownProfileMenu({variant, user, menuItems, profileMenuText, isMobileVersion, handleProfileMenuClick, style}: IDropdownProfileMenu) {
+    const [ anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+    const [ anchorSub, setAnchorSub] = React.useState<null | HTMLElement>(null)
+    const [ subMenu, setSubMenu] = React.useState(null)
+    const [ isMobile, setIsMobile ] = React.useState(isMobileVersion);
+    const open = Boolean(anchorEl)
+    const openSub = Boolean(anchorSub)
+    
+    React.useEffect(() => {
+        setIsMobile(isMobileVersion)
+    }, [isMobileVersion])
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget)
+    }
+    
+    const handleClose = () => {
+        setAnchorEl(null)
+        setAnchorSub(null)
+    }
+
+    const handleSubitens = (subItens) => (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorSub(event.currentTarget)
+        setSubMenu(subItens)
+    }
+
+    return (
+        <Styles.Container style={{...style}}>
+            { variant == 'LXP' ?
+            <>
+                <Button
+                    id="profile-dropdown"
+                    aria-controls="basic-menu"
+                    aria-haspopup="true"
+                    aria-expanded={open ? 'true' : undefined}
+                    style={{ padding: 0 }}
+                    onClick={handleClick}
+                >
+                    <Styles.AvatarCustomUser alt="User Photo" 
+                        src={user.avatar || "https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png"}
+                    />
+                    { !isMobileVersion && <>
+                        <Styles.UserName> {user.textIsMe} </Styles.UserName>
+                        <DropdownIcon fill="white" /> 
+                    </>}
+                </Button>
+                <Styles.MenuCustom
+                    id="basic-menu"
+                    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+                    transformOrigin={{ vertical: 'top', horizontal: 'center', }}
+                    anchorEl={anchorEl}
+                    open={open}
+                    onClose={handleClose}
+                    variantstyle={'LXP'}
+                >
+                    <Styles.ProfileInfos>
+                        <Styles.AvatarCustomUser alt="User Photo" 
+                            src={user.avatar || "https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png"}
+                            style={{width: '70px', height: '70px'}}
+                        />
+                        <Styles.WrapperRightProfileInfo>
+                            <Styles.ProfileNameInfo> {user.name} </Styles.ProfileNameInfo>
+                            <Styles.ProfileCompanyInfo> {user.company} </Styles.ProfileCompanyInfo>
+                            <Styles.WrapperButtonFrst>
+                                <ButtonFrst
+                                    variant={'secondary'}
+                                    label={profileMenuText}
+                                    handleClick={handleProfileMenuClick }
+                                />
+                            </Styles.WrapperButtonFrst>
+                        </Styles.WrapperRightProfileInfo>
+                    </Styles.ProfileInfos>
+
+                    { menuItems && menuItems.length > 0 && menuItems.map((item, index) => {
+                        if (item.subItens) {
+                            if (item.subItens.length > 1) return (
+                                <Styles.MenuItemCustom key={index} onClick={handleSubitens(item.subItens)} variantstyle={'LXP'}>
+                                    {item.iconBegin && item.iconBegin}
+                                    {item.iconBegin && <span>&nbsp;</span>}
+                                    <div style={{width: '100%',display: 'flex', flexDirection:'row', alignItems: 'center', justifyContent: 'space-between'}}>
+                                        <div style={{marginLeft: '7px'}}>{item.label}</div><DropdownSideIconWhite />
+                                    </div>
+                                </Styles.MenuItemCustom>
+                            )
+                        }
+                        else return (
+                            <Styles.MenuItemCustom key={index} onClick={item.onClick || handleClose} variantstyle={'LXP'}>
+                                {item.iconBegin && item.iconBegin}
+                                <div style={{width: '100%',display: 'flex', flexDirection:'row', alignItems: 'center', justifyContent: 'space-between'}}>
+                                    <div style={{marginLeft: item.iconBegin ? '9px': '0px'}}>{item.label}</div>
+                                </div>
+                            </Styles.MenuItemCustom>
+                        )
+                    })}
+                </Styles.MenuCustom>
+                <Styles.MenuCustom
+                    id="sub-menu"
+                    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+                    transformOrigin={{ vertical: 'top', horizontal: 'right', }}
+                    anchorEl={anchorSub}
+                    open={openSub}
+                    onClose={handleClose}
+                    variantstyle={'default'}
+                >
+                    {subMenu && subMenu.map((item, index) => {
+                        return <Styles.SubMenuItemCustom 
+                                key={item.id} 
+                                onClick={(e) => item.onClick(e)}
+                                variantstyle={'LXP'}
+                            >
+                                {item.label}
+                            </Styles.SubMenuItemCustom>                        
+                    })}
+                </Styles.MenuCustom>
+            </>
+            :
+            <>
+            <Button
+                id="profile-dropdown"
+                aria-controls="basic-menu"
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                style={{ background: '#FF4D0D', borderRadius: '0px', padding: '5px', width: '185px', whiteSpace: 'nowrap' }}
+                onClick={handleClick}
+            >
+                <Styles.AvatarCustomUser alt="User Photo" 
+                    src={user.avatar || "https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png"}
+                />
+                <Styles.UserName> {user.textIsMe} </Styles.UserName>
+                <DropdownIcon fill="white" />
+            </Button>
+                <Styles.MenuCustom
+                    id="basic-menu"
+                    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+                    transformOrigin={{ vertical: 'top', horizontal: 'center', }}
+                    anchorEl={anchorEl}
+                    open={open}
+                    onClose={handleClose}
+                    variantstyle={'default'}
+                >
+                { menuItems && menuItems.length > 0 && menuItems.map((item, index) => {
+                    if (item.subItens) {
+                        if (item.subItens.length > 1) return (
+                            <Styles.MenuItemCustom 
+                                key={index} 
+                                onClick={handleSubitens(item.subItens)}
+                                variantstyle={'default'}
+                            >
+                                {item.iconBegin && item.iconBegin}
+                                {item.iconBegin && <span>&nbsp;</span>}
+                                <div style={{width: '100%',display: 'flex', flexDirection:'row', alignItems: 'center', justifyContent: 'space-between'}}>
+                                    <div style={{marginLeft: '7px'}}>{item.label}</div><DropdownSideIconWhite />
+                                </div>
+                            </Styles.MenuItemCustom>
+                        )
+                    }
+                    else return (
+                        <Styles.MenuItemCustom 
+                            key={index} onClick={item.onClick || handleClose}
+                            variantstyle={'default'}>
+                            {item.iconBegin && item.iconBegin}
+                            <div style={{width: '100%',display: 'flex', flexDirection:'row', alignItems: 'center', justifyContent: 'space-between'}}>
+                                <div style={{marginLeft: item.iconBegin ? '9px': '0px'}}>{item.label}</div>
+                            </div>
+                        </Styles.MenuItemCustom>
+                    )
+                })}
+            </Styles.MenuCustom>
+
+            <Styles.MenuCustom
+                    id="sub-menu"
+                    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+                    transformOrigin={{ vertical: 'top', horizontal: 'right', }}
+                    anchorEl={anchorSub}
+                    open={openSub}
+                    onClose={handleClose}
+                    variantstyle={'default'}
+            >
+                {subMenu && subMenu.map((item, index) => {
+                    return <Styles.SubMenuItemCustom 
+                            key={item.id} 
+                            onClick={(e) => item.onClick(e)}
+                            variantstyle={'default'}
+                        >
+                            {item.label}
+                        </Styles.SubMenuItemCustom>                        
+                })}
+            </Styles.MenuCustom>
+                
+            </>
+            }
+        </Styles.Container>
+    )
+}

package/src/components/emoji-picker/emojiPicker.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import EmojiPicker from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Learning Tech/Emoji Picker',
+    component: EmojiPicker,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <EmojiPicker {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    language: '',
+    emojiSize: '24',
+    emojiPerLine: 8,
+    sheetSize: 16,
+}

package/src/components/emoji-picker/index.tsx

@@ -0,0 +1,60 @@
+// @ts-nocheck
+import React,{useEffect, useRef} from 'react'
+
+import data from '@emoji-mart/data'
+import { Picker } from 'emoji-mart'
+
+import * as de from '@emoji-mart/data/i18n/de.json'
+import * as en from '@emoji-mart/data/i18n/en.json'
+import * as fr from '@emoji-mart/data/i18n/fr.json'
+import * as it from '@emoji-mart/data/i18n/it.json'
+import * as pl from '@emoji-mart/data/i18n/pl.json'
+import * as pt from '@emoji-mart/data/i18n/pt.json'
+import * as ru from '@emoji-mart/data/i18n/ru.json'
+import * as zh from '@emoji-mart/data/i18n/zh.json'
+
+export default function EmojiPicker(props: any) {
+    const ref = useRef()
+    
+    useEffect(() => {
+        let title = 'FRST FALCONI'
+        let emojiSize = props.emojiSize;
+        let perLine = props.emojiPerLine;
+        let SheetSize = props.sheetSize;
+        let i18n = choseLanguage(props.language);
+        // let filteredEmoji = excludeEmojiCode();
+
+      new Picker({ ...props, title, data, ref, i18n, emojiSize, perLine, SheetSize })
+    }, [props.language])
+  
+    return <div ref={ref} />
+}
+
+function choseLanguage(props: any) { 
+    switch(props) {
+        case 'de':
+            return de;
+        case 'en':
+            return en;
+        case 'fr':
+            return fr;
+        case 'it':
+            return it;
+        case 'pl':
+            return pl;
+        case 'pt':
+            return pt;
+        case 'ru':
+            return ru;
+        case 'zh':
+            return zh;
+        default:
+            return en;
+    }
+}
+// https://kapeli.com/cheat_sheets/Emoji.docset/Contents/Resources/Documents/index
+function excludeEmojiCode() {
+    return ({
+        "263A": false
+    })
+}

package/src/components/exclusive-class/exclusiveClass.d.ts

@@ -0,0 +1,8 @@
+import React from "react"
+
+export interface IExclusiveClass {
+    titleClass?: string,
+    labelButton?: string,
+    className?: string,
+    handleClick?: () => void,
+}

package/src/components/exclusive-class/exclusiveClass.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import ExclusiveClassCard from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Base/Exclusive Class Card',
+    component: ExclusiveClassCard,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <ExclusiveClassCard {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    titleClass: 'Turma exclusiva 1',
+    labelButton: 'Editar trilhas',
+    handleClick: () => alert('Click')
+}

package/src/components/exclusive-class/exclusiveClassStyles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+interface AvatarI {
+    size?: string,
+    src?: any,
+    disabled?: boolean,
+}
+
+export const WrapperCard = styled.div`
+    width: 343px;
+    min-height: 136px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey4};
+    border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+    border-radius: 8px;
+
+    &:hover { 
+        background-color: ${({ theme }) => theme.colors.shadeWhite};
+    }
+`
+
+export const WrapperTitle = styled.div`
+    margin-top: 26px;
+    margin-left: 26px;
+    display: flex;
+    align-items: center;
+`
+
+export const TitleCard = styled.p`
+    ${({theme}) => theme.fonts.textMessageComponentsBodyBold};
+`
+
+export const WrapperButton = styled.div`
+    margin-top: 26px;
+    margin-left: 26px;
+    display: flex;
+    align-items: center;
+    ${({theme}) => theme.fonts.textMessageComponentsBodyBold};
+    color: ${({theme}) => theme.colors.linkOnfocus} !important;
+`

package/src/components/exclusive-class/index.tsx

@@ -0,0 +1,33 @@
+import '../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import * as Styles from './exclusiveClassStyles'
+import { IExclusiveClass } from './exclusiveClass'
+
+import { PeopleIcon, EditIcon } from '@shared/icons'
+
+import Button from '@components/buttons/index'
+
+export default function ExclusiveClassCard({ titleClass, labelButton, className, handleClick }: IExclusiveClass) {
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+            <Styles.WrapperCard>
+                <Styles.WrapperTitle >
+                    <PeopleIcon/>
+                    <Styles.TitleCard style={{ marginLeft: '14.67px'}}>
+                        {titleClass}
+                    </Styles.TitleCard>
+                </Styles.WrapperTitle>
+                
+                <Styles.WrapperButton style={{display:'flex', justifyContent: 'end', marginRight: '26px' }}>
+                    <Button
+                        label={labelButton}
+                        startIcon={<EditIcon />}
+                        variant="link"
+                        handleClick={handleClick}
+                    />
+                </Styles.WrapperButton>
+            </Styles.WrapperCard>
+        </ThemeProvider>
+    )
+}

package/src/components/field-search-dropdown/fieldSearch.d.ts

@@ -0,0 +1,36 @@
+import React from "react"
+
+
+export type enumVariant = 'default' | 'LXP';
+
+export type itemClick = {
+    id: string, 
+    label: string, 
+    onClick: (e) => void
+}
+
+export interface IFieldSearch {
+    variant?: enumVariant,
+    loading?: boolean,
+    textLoading?: string,
+    placeholder?: string,
+    value?: string, 
+    onChange?: (e) => void,
+    onFilter?: (term) => void,
+    hasListResult?: boolean, 
+    listResults?: Array<itemClick>,
+    hasOptionSeeAll?: boolean,
+    seeAll?: itemClick,
+    style?:  React.CSSProperties,
+    isMobileVersion?: boolean,
+    setFieldSearchIsOpen?: (e) => void,
+    fieldSearchIsOpen?: boolean,
+    enableAnimationField?: boolean,
+    historicResults?: Array<itemClick>
+    isLabeledResult?: boolean
+    labeledResultList?:[
+    {
+        label: string
+        listResult: Array<itemClick>
+    }]
+}