frst-components 0.20.0 → 0.20.2

package/src/components/item-lateral-menu/itemLateralMenu.stories.tsx

@@ -1,159 +0,0 @@
-import React from 'react'
-
-import ItemLateralMenu from './index'
-import Avatar from '../../components/avatar'
-import * as Icons from '../../shared/icons'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Header/Item Lateral Menu',
-    component: ItemLateralMenu,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ItemLateralMenu {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    label: 'Label',
-    onClick: () => alert('label'),
-    beginComponent: <Icons.Noun/>,
-    style: {
-        width: '280px' 
-    }
-}
-
-export const normalSelected = Template.bind({})
-normalSelected.args = {
-    label: 'Label',
-    onClick: () => alert('label'),
-    selected: true,
-    beginComponent: <Icons.Noun/>,
-    style: {
-        width: '280px' 
-    }
-}
-
-export const compound = Template.bind({})
-compound.args = {
-    label: 'Label',
-    onClick: () => alert('label'),
-    selected: false,
-    beginComponent: <Icons.Noun/>,
-    subItems: [
-        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-    ],
-    style: {
-        width: '280px' 
-    }
-}
-
-export const compoundHiddenArrow = Template.bind({})
-compoundHiddenArrow.args = {
-    label: 'Label',
-    hiddenIconDropArrow: true,
-    onClick: () => alert('label'),
-    selected: false,
-    beginComponent: <Icons.Noun/>,
-    subItems: [
-        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-    ],
-    style: {
-        width: '280px' 
-    }
-}
-
-export const withButton = Template.bind({})
-withButton.args = {
-    label: 'Label',
-    onClick: () => alert('label'),
-    selected: false,
-    button: {
-        label: 'Entrar',
-        variant: 'primary',
-        onClick: () => alert('Click')
-    },
-    beginComponent: <Icons.Noun/>,
-    style: {
-        width: '280px' 
-    }
-}
-
-export const buttonCompound = Template.bind({})
-buttonCompound.args = {
-    label: 'Label',
-    onClick: () => alert('label'),
-    selected: false,
-    button: {
-        label: 'Entrar',
-        variant: 'primary',
-        onClick: () => alert('Click')
-    },
-    beginComponent: <Icons.Noun/>,
-    subItems: [
-        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-    ],
-    style: {
-        width: '280px' 
-    }
-}
-
-
-export const withAvatar = Template.bind({})
-withAvatar.args = {
-    label: 'Label',
-    onClick: () => alert('label'),
-    selected: false,
-    beginComponent: <Avatar size={'20px'} src={null}/>,
-    style: {
-        width: '280px' 
-    }
-}
-
-export const avatarCompound = Template.bind({})
-avatarCompound.args = {
-    label: 'Label',
-    onClick: () => alert('label'),
-    selected: false,
-    beginComponent: <Avatar size={'20px'} src={null}/>,
-    subItems: [
-        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-    ],
-    style: {
-        width: '280px' 
-    }
-}
-
-export const avatarButtonCompound = Template.bind({})
-avatarButtonCompound.args = {
-    label: 'Label',
-    onClick: () => alert('label'),
-    selected: false,
-    beginComponent: <Avatar size={'20px'} src={null}/>,
-    button: {
-        label: 'Entrar',
-        variant: 'primary',
-        onClick: () => alert('Click')
-    },
-    subItems: [
-        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-    ],
-    style: {
-        width: '280px' 
-    }
-}

package/src/components/item-lateral-menu/itemLateralMenuStyles.ts

@@ -1,131 +0,0 @@
-    import styled from 'styled-components'
-
-interface AvatarI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-interface IWrapperItem {
-    disabled?: boolean,
-    active?: boolean
-}
-
-interface IWrapperMainLabel {
-    active?: boolean
-}
-
-export const WrapperItem = styled.div<IWrapperItem>`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    cursor: pointer;
-    padding: 8px;
-    background: ${({ theme }) =>  theme.colors.shadeWhite};
-    border-left: 4px solid ${({ active, theme }) => active ? theme.colors.primary1 : 'transparent'};
-
-    &:hover {
-        background: ${({ theme }) =>  theme.colors.neutralsGrey8};
-    }
-`
-
-export const WrapperMainLabel = styled.span<IWrapperMainLabel>`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: ${({ active }) => active ? '700' : '400'};
-    font-size: 18px;
-    line-height: 23px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    margin-left: 8px;
-
-    color: ${({ theme, active }) => active ? theme.colors.primary1 : theme.colors.neutralsGrey1};
-`
-
-export const WrapperComponent = styled.div<IWrapperMainLabel>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 10px;
-    & > svg {
-        width: 24px;
-        height: 24px;
-    }
-`
-// & > path {
-//     fill: ${({ theme, active }) => active ? theme.colors.primary1 : theme.colors.neutralsGrey1};
-// }
-
-export const WrapperButton = styled.div`
-    margin-right: 8px;
-    
-    & > button {
-        display: flex;
-        height: 24px;
-        flex-direction: row;
-        align-items: flex-start;
-        padding: 6px 8px;
-        gap: 10px;
-        border-radius: 4px;
-        
-        font-family: 'Work Sans';
-        font-style: normal;
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 12px;
-        z-index: 2;
-    }
-`
-
-export const WrapperIconDrop = styled.div<{isOpen}>`
-    margin-right: 24px;
-    & > svg {
-        transition: all 0.3s ease-out;
-        transform: rotate(${({isOpen}) => isOpen ? '0' : '0.5turn'});
-        & > path {
-            stroke: ${({ theme, isOpen }) => isOpen ? theme.colors.primary1 : theme.colors.neutralsGrey1};
-        }
-    }
-`
-
-
-export const WrapperCompound = styled.div<{isOpen}>`
-    display: flex;
-    transition: max-height 0.3s ease-in-out;
-    flex-direction: column;
-`
-
-export const WrapperSubItems = styled.div<{isOpen}>`
-    display: flex;
-    flex-direction: column;
-    height: auto;
-    transform-origin:top;
-    transform:scaleY(${({isOpen}) => isOpen ?  '1' : '0'});
-    transition: transform 0.3s ease-in-out;
-    overflow: hidden;
-`
-
-export const SubItem = styled.div<IWrapperItem>`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    cursor: pointer;
-    padding: 10px;
-    padding-left: 16px;
-    background: ${({ theme }) =>  theme.colors.neutralsGrey8};
-    border-bottom: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-        background: ${({ theme }) =>  theme.colors.neutralsGrey6};
-    }
-`

package/src/components/item-menu-global/index.tsx

@@ -1,36 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './itemMenuGlobalStyles'
-import { IItemMenuGlobal } from './itemMenuGlobal'
-
-import { FRSTLogo } from '@shared/icons'
-
-export default function ItemGlobalMenu({
-  variant,
-  type,
-  label,
-  handleOnClick,
-  wrapText,
-  pressed,
-  style,
-  icon,
-  customMenu
-}: IItemMenuGlobal) {
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      <Styles.Wrapper
-        variant={variant}
-        pressed={pressed}
-        typeItem={type}
-        wrapText={wrapText}
-        style={{ ...style }}
-        onClick={handleOnClick}
-      >
-        <span style={{ marginRight: customMenu ? 10 : 0 }}>{icon}</span>
-        <span style={{ marginTop: customMenu ? -8 : 0 }}>{label}</span>
-      </Styles.Wrapper>
-    </ThemeProvider>
-  )
-}

package/src/components/item-menu-global/itemMenuGlobal.d.ts

@@ -1,16 +0,0 @@
-import React from 'react'
-
-export type enumVariant = 'default' | 'LXP'
-export type enumType = 'menu' | 'submenu'
-
-export interface IItemMenuGlobal {
-  variant?: enumVariant
-  type?: enumType
-  label?: string
-  handleOnClick?: (e) => void
-  style?: React.CSSProperties
-  wrapText?: boolean
-  pressed?: boolean
-  icon?: any
-  customMenu?: any
-}

package/src/components/item-menu-global/itemMenuGlobal.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import ItemGlobalMenu from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Base/Item Global Menu',
-    component: ItemGlobalMenu,
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['default', 'LXP']
-        },
-        type: {
-            control: 'select',
-            options: ['menu', 'submenu']
-        }
-    }
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ItemGlobalMenu {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    variant: 'default',
-    type: 'menu',
-    label: 'Início',
-    onClick: (e) => alert('Click'),
-    style: { height: '40px' }
-}
-
-export const LXP = Template.bind({})
-LXP.args = {
-    variant: 'LXP',
-    type: 'menu',
-    label: 'Início',
-    onClick: (e) => alert('Click'),
-    style: { height: '40px' }
-}

package/src/components/item-menu-global/itemMenuGlobalStyles.ts

@@ -1,73 +0,0 @@
-import styled from "styled-components"
-
-export const Wrapper =  styled.button<{variant, typeItem, wrapText, pressed}>`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 2px;
-    cursor: pointer;
-    border: 0;
-    border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
-    border-top: ${({typeItem}) => typeItem == 'menu'? '10px': '2px'} solid transparent;
-
-    background-color: ${({variant, theme, typeItem}) => typeItem == 'submenu' ? 'transparent' : variant == 'LXP' ? theme.colors.neutralsGrey1 : theme.colors.primary1};
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-
-    color: #FFFFFF;
-
-    white-space: ${({wrapText}) => wrapText ? 'wrap': 'nowrap'};
-
-    &:hover {
-        background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey3 : '#F5792A'};
-        border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
-    }
-    ${({pressed, variant, typeItem, theme}) => pressed && `
-        font-weight: 700;
-        border-bottom: ${ typeItem == 'menu'? '4px': '2px'} solid 
-        ${variant == 'LXP' && typeItem == 'menu' ? theme.colors.primary1: theme.colors.shadeWhite};
-    `}
-    &:focus {
-        font-weight: 700;
-        border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid 
-        ${({variant, typeItem, theme}) => variant == 'LXP' && typeItem == 'menu' ? theme.colors.primary1: theme.colors.shadeWhite};
-    }
-`
-export const WrapperSubItem =  styled.button<{variant, typeItem, wrapText}>`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border: 0;
-    border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
-    border-top: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
-
-    background-color: transparent;
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-
-    color: #FFFFFF;
-
-    white-space: ${({wrapText}) => wrapText ? 'wrap': 'nowrap'};
-
-    &:hover {
-        background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey3 : '#F5792A'};
-        border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid 
-        ${({variant, typeItem, theme}) => variant == 'LXP' && typeItem == 'menu' ? theme.colors.primary1: theme.colors.shadeWhite};
-    }
-
-    &:focus {
-        font-weight: 700;
-    }
-`
-

package/src/components/languages-dropdown/index.tsx

@@ -1,102 +0,0 @@
-
-import React,{ useState, useEffect } from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './languagesDropdownStyles'
-import { ILanguagesDropdown } from './languagesDropdown'
-
-import { FRSTLogo } from '@shared/icons'
-
-export default function LanguagesDropdown({ variant, languages, selected, onSelect, style, distanceBtnDrop}: ILanguagesDropdown) {
-    const imgES = 'https://i.gyazo.com/1cfa904ea1d492ace9dc67c2a37a10e4.png'
-    const imgBR = 'https://i.gyazo.com/ee7e65d12345200b8c3dd12670f85881.png'
-    const imgEN = 'https://i.gyazo.com/06a0ea969c48c12589d5d5565cf834df.png'
-    const imgPT = 'https://i.gyazo.com/cb567fc306928d02d31bc876df58be40.png'
-    
-    const [ isOpenDrop, setIsOpenDrop ] = useState(false);
-    const [ activeArea, setActiveArea ] = useState(false);
-    const [ activeImgFlag, setActiveImgFlag ] = useState(imgBR);
-
-    
-    useEffect(() => {
-        switch(selected) {
-            case 'pt-BR': return setActiveImgFlag(imgBR);
-            case 'en-US': return setActiveImgFlag(imgEN);
-            case 'es': return setActiveImgFlag(imgES);
-            case 'pt-PT': return setActiveImgFlag(imgPT);
-        }
-    }, [selected])
-    
-
-    useEffect(() => {
-        const checksAnyClickOnScreen = () => {
-            if(isOpenDrop) {
-                document.body.removeEventListener("click",  checksAnyClickOnScreen, false);
-                setIsOpenDrop(false);
-            }
-        }
-        
-        if(isOpenDrop) {
-            (document.body.addEventListener("click",  checksAnyClickOnScreen, false));
-        }
-    }, [isOpenDrop]);
-
-    const handleChangeSelect = (value) => {
-        onSelect(value)
-        switch(value) {
-            case 'pt-BR': return setActiveImgFlag(imgBR);
-            case 'en-US': return setActiveImgFlag(imgEN);
-            case 'es': return setActiveImgFlag(imgES);
-            case 'pt-PT': return setActiveImgFlag(imgPT);
-        }
-        setIsOpenDrop(false)
-        setActiveArea(false)
-    }
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.Wrapper 
-                onClick={() => setIsOpenDrop(!isOpenDrop)}
-                onBlur={() => setIsOpenDrop(activeArea)}
-                variant={variant} 
-                style={{...style}}
-            >
-                <Styles.Image 
-                    src={activeImgFlag}
-                    style={{padding: '10px'}}
-                />
-
-            <Styles.WrapperDrop variant={variant} isVisible={isOpenDrop}
-                onMouseOver={() => setActiveArea(true)}
-                onMouseOut={() => setActiveArea(false)}
-                style={{marginTop: distanceBtnDrop ? distanceBtnDrop : '45px'}}
-            >
-                {isOpenDrop && languages && languages.length > 0 && languages?.map((item, index) => {
-                    return( <div key={index}>
-                        { item == 'pt-BR' ?
-                            <Styles.Image key={index} onClick={() => handleChangeSelect('pt-BR')} src={imgBR} 
-                                style={{padding: '9px', paddingTop: '6px', paddingBottom: '6px'}}
-                            />
-                        : item == 'en-US' ?
-                            <Styles.Image key={index} onClick={() => handleChangeSelect('en-US')} src={imgEN} 
-                                style={{padding: '9px', paddingTop: '6px', paddingBottom: '6px'}}
-                            />
-                        : item == 'pt-PT' ?
-                            <Styles.Image key={index} onClick={() => handleChangeSelect('pt-PT')} src={imgPT} 
-                                style={{padding: '9px', paddingTop: '6px', paddingBottom: '6px'}}
-                            />
-                        : item == 'es' &&
-                            <Styles.Image key={index} onClick={() => handleChangeSelect('es')} src={imgES} 
-                                style={{padding: '9px', paddingTop: '6px', paddingBottom: '6px'}}
-                            />
-                        }
-                    </div>)
-                    })
-                }
-            </Styles.WrapperDrop> 
-            </Styles.Wrapper>
-            {/* {isOpenDrop && languages && languages.length > 0 && languages.map} */}
-        </ThemeProvider>
-    )
-}

package/src/components/languages-dropdown/languagesDropdown.d.ts

@@ -1,13 +0,0 @@
-import React from "react"
-
-export type enumVariant = 'default' | 'LXP';
-export type enumLanguages = 'pt-BR' | 'es' | 'en-US' | 'pt-PT';
-
-export interface ILanguagesDropdown {
-    variant?: enumVariant,
-    languages?: Array<enumLanguages>,
-    selected: enumLanguages,
-    onSelect: (e) => void,
-    distanceBtnDrop?: string,
-    style?: React.CSSProperties,
-}

package/src/components/languages-dropdown/languagesDropdown.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import ItemGlobalMenu from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Base/Language Select',
-    component: ItemGlobalMenu,
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['default', 'LXP']
-        },
-        type: {
-            control: 'languages',
-            options: ['pt-BR', 'es', 'en-US', 'pt-PT']
-        }
-    }
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ItemGlobalMenu {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    variant: 'default',
-    languages: ['pt-BR', 'es', 'en-US', 'pt-PT'],
-    selected: 'pt-BR',
-    onSelect: (e) => alert(e)
-}
-
-export const LXP = Template.bind({})
-LXP.args = {
-    variant: 'LXP',
-    languages: ['pt-BR', 'es', 'en-US', 'pt-PT'],
-    selected: 'pt-PT',
-    onSelect: (e) => alert(e)
-}

package/src/components/languages-dropdown/languagesDropdownStyles.ts

@@ -1,66 +0,0 @@
-import styled from "styled-components"
-
-export const sdsdsa =  styled.button<{variant, typeItem}>`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border: 0;
-    border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
-    border-top: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
-
-    background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey1 : theme.colors.primary1};
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-
-    color: #FFFFFF;
-
-
-    &:hover {
-        background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey3 : '#F5792A'};
-        border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid 
-        ${({variant, typeItem, theme}) => variant == 'LXP' && typeItem == 'menu' ? theme.colors.primary1: theme.colors.shadeWhite};
-    }
-
-    &:focus {
-        font-weight: 700;
-    }
-`
-
-export const Wrapper =  styled.div<{variant}>`
-    width: 50px;
-    object-fit: contain;
-    display: flex;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-    background: transparent;
-    border: 0;
-`
-
-export const Image =  styled.img`
-    width: 50px;
-    user-select: none;
-    cursor: pointer;
-    object-fit: contain;
-`
-
-export const WrapperDrop =  styled.div<{variant, isVisible}>`
-    user-select: none;
-    width: 50px;
-
-    position: absolute;
-    margin-top: 45px;
-    z-index: 10000;
-
-    border: 0;
-    display: ${({isVisible}) => isVisible ? 'flex' : 'none'};
-    flex-direction: column;
-    background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey1 : '#F5792A'};
-`