frst-components 0.20.0 → 0.20.2

package/src/components/headerChallenge/headerChallenge.stories.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import HeaderChallenge from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'The Product/HeaderChallenge',
-    component: HeaderChallenge,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <HeaderChallenge {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    firstLine: 'Gente que soluciona',
-    secondLine: 'desafios transforma o jogo',
-    desktopBackground: 'https://cdn-images.dev.frstfalconi.cloud/headerChallenge_bg.png',
-    mobileBackground: 'https://cdn-images.dev.frstfalconi.cloud/headerChallengeMobile_bg.png',
-}
-

package/src/components/headerChallenge/headerChallengeStyle.ts

@@ -1,102 +0,0 @@
-import styled from 'styled-components'
-
-export const Div = styled.div<any>`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 300px;
-    background-color: #fff;
-    padding: 50px 50px 50px 124px;
-    margin: 0;
-    background-image: ${props => `url(${props.desktopBackgroundProps})`};
-    background-position: bottom 0px right 0px; 
-    background-repeat: no-repeat;
-    h1 {
-        font-size: 3.25rem;
-        line-height: 67.6px;
-        font-weight: 700;
-        background-image: linear-gradient(to right, rgb(255, 98, 0), rgb(255, 176, 0));
-        background: linear-gradient(-45deg, rgb(255, 98, 0), rgb(255, 176, 0), rgb(255, 98, 0), rgb(255, 176, 0));
-	    background-size: 400% 400%;
-	    animation: gradient 10s ease infinite;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        @keyframes gradient {
-            0% {
-                background-position: 0% 50%;
-            }
-            50% {
-                background-position: 100% 50%;
-            }
-            100% {
-                background-position: 0% 50%;
-            }
-        }
-    }
-    @media (max-width: 1880px) {
-        background-position: bottom 0px right -220px;
-        h1 {
-            font-size: 3.0rem;
-            line-height: 60px;
-            }
-    }
-    @media (max-width: 1650px) {
-        padding: 50px 50px 50px 130px;
-        background-position: bottom 0px right -280px; 
-        h1 {
-            font-size: 2.4rem;
-            line-height: 50px;
-        }
-    }
-    @media (max-width: 1400px) {
-        padding: 50px 50px 50px 40px;
-    }
-    @media (max-width: 1350px) {
-        height: 250px;
-        background-size:contain;
-        background-position: bottom 0px right -220px; 
-    }
-    @media (max-width: 1230px) {
-        background-size:contain;
-        background-position: bottom 0px right -250px; 
-        h1 {
-           font-size: 1.8rem;
-           line-height: 36px;
-        }
-    }
-    @media (max-width: 1100px) {
-        height: 200px;
-        background-size:contain;
-        background-position: bottom 0px right -220px;
-    }
-    @media (max-width: 860px) {
-        background-position: bottom 0px right -250px;
-        h1 {
-           font-size: 1.4rem;
-           line-height: 30px;
-        }
-    }
-    @media (max-width: 750px) {
-        background-image:  ${props => `url(${props.mobileBackgroundProps})`};
-        background-position: top -20px right 0px;
-        h1 {
-           max-width: 345px;
-           font-size: 1.5rem;
-           line-height: 31.2px;
-        }
-    }
-    @media (max-width: 520px) {
-        padding: 10px;
-        background-size:unset;
-        height: 200px;
-        h1 {
-           max-width: 260px;
-           font-size: 16px;
-           line-height: 21.11px;
-        }
-    }
-    @media (max-width: 410px) {
-        background-position: top 0px right -20px;
-        height: 180px
-    }
-`;

package/src/components/headerChallenge/index.tsx

@@ -1,17 +0,0 @@
-import '../../shared/global.css'
-import * as Styles from './headerChallengeStyle'
-
-interface HeaderChallengeProps {
-    firstLine?: string,
-    secondLine?: string,
-    desktopBackground?: any,
-    mobileBackground?: any,
-}
-
-export default function HeaderChallenge({ firstLine, secondLine, desktopBackground, mobileBackground }: HeaderChallengeProps) {
-    return (
-        <Styles.Div desktopBackgroundProps={desktopBackground} mobileBackgroundProps={mobileBackground} > 
-            <h1>{firstLine}<br /> {secondLine}</h1>
-        </Styles.Div>
-    );
-}

package/src/components/index.tsx

@@ -1,46 +0,0 @@
-import UserCard from '@components/cards/user'
-
-
-export interface PageProps {
-    pageHeight: string,
-    pageWidth: string,
-}
-
-export default function PageSandbox(props: PageProps) {
-
-    return (
-        <div style={{ width: props.pageWidth, height: props.pageHeight }}>
-            <UserCard loading={false}
-                selected={false}
-                handleSelect={(id) => { alert(`Select (or not) ${id}`) }}
-                userID={"bla-blu-fla"}
-                userName={"Nome Sobrenome Só que muito grande "}
-                userEmail={"superdupermegauberhugeemail@frst.com"}
-                userStatus={"complete"}
-                userArea={"Desenvolvimento"}
-                userPosition={"FullFull Strack"}
-                licenses={[]}
-                editAction={() => { alert('Edit') }} 
-                newFormat={true} 
-                newLicenses={[
-                    {hasLicense: true, hasTrail: false, hasEnrollment: false, isCurrent: true, name: 'Produto 1'},
-                    {hasLicense: true, hasTrail: false, hasEnrollment: false, isCurrent: true, name: 'Produto 2'},
-                    {hasLicense: true, hasTrail: true, hasEnrollment: false, isCurrent: true, name: 'Produto 3'},
-                    {hasLicense: true, hasTrail: true, hasEnrollment: false, isCurrent: true, name: 'Produto 4'},
-                    {hasLicense: true, hasTrail: true, hasEnrollment: true, isCurrent: true, name: 'Produto 5'},
-                    {hasLicense: true, hasTrail: true, hasEnrollment: true, isCurrent: true, name: 'Produto 6'},
-                    {hasLicense: true, hasTrail: true, hasEnrollment: true, isCurrent: false, name: 'Produto 7'},
-                    {hasLicense: true, hasTrail: true, hasEnrollment: true, isCurrent: false, name: 'Produto 8'},
-                ]}
-                newTexts={{ 
-                    current: 'Atual',
-                    assignedLicense: 'Licença atribuida',
-                    definedTrail: 'Trilha definida',
-                    enrollments: 'Matriculado',
-                    previus: 'Anteriores',
-                }}
-                />
-
-        </div >
-    )
-}

package/src/components/input-comment/index.tsx

@@ -1,178 +0,0 @@
-import React,{ useEffect,  useState, useRef }  from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './inputCommentStyles'
-import { IInputComment } from './inputComment'
-
-import { SmileOutlined } from '@shared/icons'
-// import EmojiPicker from '@components/emoji-picker'
-
-import { randID } from './inputComment.utils'
-
-export default function InputComment({ placeholder, value, onChange, remain, limit, hasEmoji, showCharacterCounter, IDInput, styles, disabled, emojiWindowlanguage }: IInputComment) {
-    const [ focus, setFocus ] = useState(false)
-
-    // Emoji Window States
-    const [ isVisibleEmojiWindow, setIsVisibleEmojiWindow ] = useState(false)
-    const [ actionAreaEmojiButton, setActionAreaEmojiButton] = useState(false)
-    const [ colorEmojiButton, setColorEmojiButton ] = useState('')
-    const [ heightPositionWindowEmoji, setHeightPositionWindowEmoji ] = useState('')
-    const [ newEmojiIncluded, setNewEmojiIncluded ] = useState(false)
-    const [ lastPositionCursorTextTextArea, setLastPositionCursorTextTextArea ] = useState({})
-    const [ lenghtLastEmoji, setLenghtLastEmoji ] = useState()
-
-    // TextArea states
-    const [ stringValueTextArea, setStringValueTextArea ] = useState(value)
-    
-    // IDs
-    const [ iDInputComment , setIDInputComment ] = 
-            useState(IDInput ? IDInput : `InputComment-${randID()}`);
-    const [ iDEmojiButton , setIDEmojiButton ] = 
-        useState(IDInput ? IDInput : `IDEmojiButton-${randID()}`);
-    
-    // Emoji window actions
-    useEffect(() => {
-        (isVisibleEmojiWindow) ? configsWhenOpenWindowEmoji() : configsWhenCloseWindowEmoji()
-    }, [isVisibleEmojiWindow])
-    
-    useEffect(() => {
-        {newEmojiIncluded && repositionCursorAfterNewEmojiInTextArea()}
-        resizeTextArea()
-    }, [stringValueTextArea]);
-
-    useEffect(() => {
-        setStringValueTextArea(value)
-    }, [value]);
-
-    function inputInChanging(e: any) {
-        setStringValueTextArea(e.target.value)
-        onChange(e)
-    }
-    
-    const onEmojiClick = (emojiObject: any) => {
-        let textAreaRef = document.getElementById(iDInputComment)
-        
-        // @ts-ignore
-        if(textAreaRef.innerHTML.length < limit || textAreaRef.selectionStart != textAreaRef.selectionEnd) {
-            let currentPositonCursorTextArea = getAndSavePositionsInTextArea(textAreaRef, emojiObject.native)
-            let newStringWithEmoji = handleStringToIncluedEmoji(currentPositonCursorTextArea, emojiObject.native, textAreaRef.innerHTML)
-
-            setNewEmojiIncluded(true)
-            setStringValueTextArea(newStringWithEmoji)
-        }
-    };
-    
-    const verifyClick = () => {
-        if(!actionAreaEmojiButton)
-            setIsVisibleEmojiWindow(false);
-    }
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-        <div style={{...styles}} onClick={verifyClick}>
-            <Styles.InputWrapper focus={focus}>
-                <Styles.InputText
-                    id={iDInputComment}
-                    onFocus={() => setFocus(true)}
-                    onBlur={() => setFocus(false)}
-                    onChange={inputInChanging}
-                    value={stringValueTextArea}
-                    placeholder={placeholder}
-                    maxLength={limit}
-                    disabled={disabled}
-                />
-                {/* { hasEmoji && 
-                    <>
-                        <Styles.EmojiWindow 
-                            visible={isVisibleEmojiWindow} 
-                            positionEmojiWindow={heightPositionWindowEmoji}
-                            onMouseOver={() => setActionAreaEmojiButton(true)}
-                            onMouseOut={() => setActionAreaEmojiButton(false)}
-                        >                            
-                            <EmojiPicker 
-                                language={emojiWindowlanguage} 
-                                onEmojiSelect={onEmojiClick}
-                                emojiPerLine={8}
-                                sheetSize={8}
-                            />
-                        </Styles.EmojiWindow>
-                        <Styles.SmileIcon 
-                            id={iDEmojiButton}
-                            onMouseOver={() => setActionAreaEmojiButton(true)}
-                            onMouseOut={() => setActionAreaEmojiButton(false)}
-                            onClick={() => setIsVisibleEmojiWindow(!isVisibleEmojiWindow)}
-                        >
-                            <SmileOutlined fill={colorEmojiButton}/>
-                        </Styles.SmileIcon>
-                    </>
-                } */}
-            </Styles.InputWrapper>
-            { showCharacterCounter &&
-                <Styles.HelperText>
-                    {limit - remain}/{limit}
-                </Styles.HelperText>
-            }
-        </div>
-        </ThemeProvider>
-    )
-
-    function resizeTextArea() {
-        let tx = document.getElementById(iDInputComment);
-        
-        const txResize = (tx) => {   
-            tx.style.height = '20px';
-            tx.style.height = tx.scrollHeight + 'px';
-            setHeightPositionWindowEmoji(tx.scrollHeight - 440 + 'px')
-        }  
-
-        { tx && tx.style && txResize(tx) }
-    }
-
-    function configsWhenOpenWindowEmoji() {
-        setColorEmojiButton(FRSTTheme['colors'].primary1);
-        // document.body.addEventListener("click", (e: any) => verifyClick(), true);
-        // document.getElementById(iDEmojiButton).removeEventListener("click", (e: any) => setIsVisibleEmojiWindow(!isVisibleEmojiWindow), false);
-    }
-    
-    function configsWhenCloseWindowEmoji() {
-        setColorEmojiButton(FRSTTheme['colors'].neutralsGrey2);
-        // document.body.removeEventListener("click", (e: any) => verifyClick(), true);
-        // document.getElementById(iDEmojiButton).addEventListener("click", (e: any) => setIsVisibleEmojiWindow(!isVisibleEmojiWindow), false);
-    }
-
-    function getAndSavePositionsInTextArea(textAreaRef: any, emoji: any) {
-        let positionsCursorText = [textAreaRef.selectionStart, textAreaRef.selectionEnd];
-
-        setLenghtLastEmoji(emoji.length);
-        setLastPositionCursorTextTextArea(positionsCursorText);
-        return positionsCursorText;
-    }
-
-    function handleStringToIncluedEmoji(pos, emojiObject, stringValueTextArea) {
-        if(stringValueTextArea) {
-            if(pos[0] == pos[1]) {
-                return stringValueTextArea.substr(0, pos[0]) + emojiObject + stringValueTextArea.substr(pos[1])
-            } else if(pos[0] < pos[1]) {
-                return stringValueTextArea.substr(0, pos[0]) + emojiObject + stringValueTextArea.substr(pos[1], stringValueTextArea.length);
-            } else {
-                return stringValueTextArea + emojiObject;
-            }
-        } else {
-            return emojiObject;
-        }
-    }
-
-    function repositionCursorAfterNewEmojiInTextArea() {            
-        let tx = document.getElementById(iDInputComment);
-
-        if(lastPositionCursorTextTextArea[1] != lastPositionCursorTextTextArea[0]) { // Cursor in multiple chars selected
-            // @ts-ignore
-            tx.selectionEnd = lastPositionCursorTextTextArea[0] + lenghtLastEmoji;
-        } else { // Cursor text in specific point
-            // @ts-ignore
-            tx.selectionEnd = lastPositionCursorTextTextArea[1] + lenghtLastEmoji;
-        }
-        setNewEmojiIncluded(false);
-    }
-}

package/src/components/input-comment/inputComment.d.ts

@@ -1,16 +0,0 @@
-import React from "react"
-
-export interface IInputComment {
-    placeholder?: string,
-    value?: any,
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
-    remain?: number,
-    limit?: number,
-    disabled?: boolean,
-    className: string,
-    hasEmoji: boolean,
-    showCharacterCounter: boolean,
-    IDInput: string,
-    styles: any,
-    emojiWindowlanguage: string,
-}

package/src/components/input-comment/inputComment.stories.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import InputComment from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Learning Tech/Input Comment',
-    component: InputComment,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <InputComment {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    placeholder: 'Enter text here...',
-    disabled: false,
-    remain: 20,
-    limit: 1000,
-    onChange: (e : any) => { console.log(e) },
-    className: null,
-    hasEmoji: true,
-    showCharacterCounter: true,
-    styles: { margin: '0 0 0 0'},
-    emojiWindowlanguage: 'pt'
-}

package/src/components/input-comment/inputComment.utils.ts

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

package/src/components/input-comment/inputCommentStyles.ts

@@ -1,116 +0,0 @@
-import styled from 'styled-components'
-
-interface AvatarI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-interface Wrapper {
-    disabled?: boolean,
-    focus?: boolean
-}
-
-interface IEmojiWindow {
-    visible?: boolean
-    positionEmojiWindow?: any
-}
-interface TextArea {
-    height?: string
-}
-
-export const InputWrapper = styled.div<Wrapper>`
-    display: flex;
-    align-items:flex-end;
-    width: 100%;
-    min-height: 48px;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-radius: 24px;
-
-    transition: all 0.2s ease-in-out;
-
-    &:hover {
-        border: 1px solid ${({ theme }) => theme.colors.shadeBlack};
-    }
-
-    ${({ focus, theme }) => focus &&  
-        `border: 1px solid` + theme.colors.primary1 + " !important;"
-    }
-`
-
-export const InputText = styled.textarea<TextArea>`
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-    height: ${({height}) => height || '20px' };
-    outline: 0;
-    
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 20px;
-    letter-spacing: -0.02em;
-    
-    overflow: hidden;
-    resize: none;
-
-    padding: 0;
-    margin: 14px;
-    border: none;    
-`
-
-export const SmileIcon = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: 40px;
-    height: 40px;
-    
-    min-width: 40px;
-    border-radius: 50%;
-    background-color: transparent;
-    margin: 4px;
-    &:hover {
-        background-color: ${({ theme }) => theme.colors.neutralsGrey6};
-    }
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-`
-
-export const HelperText = styled.span`
-    display: flex;
-    position: absolute;
-    align-items: center;
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 14px;
-
-    letter-spacing: -0.02em;
-
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
-
-    margin-top: 8px;
-    margin-left: 13px;
-`
-
-export const EmojiWindow = styled.div<IEmojiWindow>`
-    width: 310px;
-    height: 432px;
-    overflow: hidden;
-    display:${({ visible }) => visible ? 'flex' : 'none'};
-    justify-content: center;
-    top: ${({ positionEmojiWindow }) => positionEmojiWindow};
-    right: 25px;
-    background-color:  ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid  ${({ theme }) => theme.colors.neutralsGrey4};
-    position: absolute;
-`;
-// transform: scale(0.845);

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

@@ -1,87 +0,0 @@
-import React,{ useEffect, useState } from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './itemLateralMenuStyles'
-import { IItemLateralMenu } from './itemLateralMenu'
-import Button from '@components/buttons'
-import * as Icons from '@shared/icons'
-
-export default function LateralMenu({ label, onClick, button, beginComponent, activeBeginIcon, selected, subItems, hiddenIconDropArrow, style }: IItemLateralMenu) {
-    const [isActive, setIsActive] = useState(selected);
-
-    useEffect(() => {
-        setIsActive(selected)
-    }, [selected])
-
-    const getSizeCompound = () => {
-        if(!subItems.length ) return '40px';
-        let size = (subItems.length + 1 ) * 42;
-        
-        return size + 'px';
-    }
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            { subItems && subItems.length > 0 ? 
-                <Styles.WrapperCompound isOpen={isActive} style={{...style, maxHeight: isActive ? getSizeCompound(): '40px'}}>
-                    <Styles.WrapperItem active={isActive} onClick={(e) => setIsActive(!isActive)}
-                    style={{...style, margin: 0, padding: 0, justifyContent: 'space-between'}} >
-                        <Styles.WrapperItem style={{background: 'transparent', width: '100%'}}>
-                            { beginComponent && 
-                                <Styles.WrapperComponent active={isActive}>
-                                    {isActive ? activeBeginIcon ? activeBeginIcon : beginComponent : beginComponent}
-                                </Styles.WrapperComponent>
-                            }
-                            <Styles.WrapperMainLabel active={isActive} style={{marginLeft: beginComponent ? '8px': '0px'}}>
-                                { label }
-                            </Styles.WrapperMainLabel>
-                        </Styles.WrapperItem>
-                        { button && button?.label &&
-                            <Styles.WrapperButton>
-                                <Button 
-                                    label={button.label}
-                                    handleClick={(e) => button.onClick(e)}
-                                    variant={button?.variant ? button.variant : 'primary'}
-                                />
-                            </Styles.WrapperButton>
-                        }
-                        { !hiddenIconDropArrow &&
-                        <Styles.WrapperIconDrop isOpen={isActive}>
-                            <Icons.DropdownIconLine fill={'#000'}/>
-                        </Styles.WrapperIconDrop> }
-                    </Styles.WrapperItem>
-                    <Styles.WrapperSubItems isOpen={isActive}>
-                        {subItems.map((item, index) => {
-                            return <Styles.SubItem key={index} onClick={() => item.onClick(item.id)}>
-                                {item.label}
-                            </Styles.SubItem>
-                        })}
-                    </Styles.WrapperSubItems>
-                </Styles.WrapperCompound>
-            :
-                <Styles.WrapperItem active={isActive} style={{...style, margin: 0, padding: 0, justifyContent: 'space-between'}} >
-                    <Styles.WrapperItem style={{background: 'transparent', width: '100%'}} onClick={(e) => onClick(e)}>
-                        { beginComponent && 
-                            <Styles.WrapperComponent active={isActive}>
-                                {isActive ? activeBeginIcon ? activeBeginIcon : beginComponent : beginComponent}
-                            </Styles.WrapperComponent>
-                        }
-                        <Styles.WrapperMainLabel active={isActive} style={{marginLeft: beginComponent ? '8px': '0px'}}>
-                            { label }
-                        </Styles.WrapperMainLabel>
-                    </Styles.WrapperItem>
-                    { button && button?.label &&
-                        <Styles.WrapperButton>
-                            <Button 
-                                label={button.label}
-                                handleClick={(e) => button.onClick(e)}
-                                variant={button?.variant ? button.variant : 'primary'}
-                            />
-                        </Styles.WrapperButton>
-                    }
-                </Styles.WrapperItem>
-            }
-        </ThemeProvider>
-    )
-}

package/src/components/item-lateral-menu/itemLateralMenu.d.ts

@@ -1,30 +0,0 @@
-import { enumVariant } from "@components/LXP/popOver/popOver"
-import React from "react"
-
-
-type enumVariantButton = 'primary' | 'secondary' | 'link' | 'expandedPrimary' | 'expandedSecondary' 
-
-type typeSubItem = {
-    id?: string,
-    label: string,
-    beginComponent?: any,
-    onClick?: (e) => void
-}
-
-type typeButton= {
-    label: string,
-    variant?: enumVariantButton,
-    onClick?: (e) => void
-}
-
-export interface IItemLateralMenu {
-    label: string,
-    onClick?: (e) => void,
-    beginComponent?: any,
-    activeBeginIcon?: any,
-    button?: typeButton,
-    selected?: boolean,
-    subItems?: Array<typeSubItem>,
-    hiddenIconDropArrow?: boolean,
-    style?: React.CSSProperties
-}