frst-components 0.20.1 → 0.20.2

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

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

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

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

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

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

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

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

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

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

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

@@ -1,36 +0,0 @@
-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>
-    }]
-}