frst-components 0.20.0

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

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

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

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

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

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

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

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

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

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

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

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

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