frst-components 0.20.1 → 0.20.2

package/src/components/LXP/permission/permissionStyle.ts

@@ -1,52 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const Container = styled.div`
-    width: 100%;
-    display: flex;
-    min-height: 400px;
-    flex-direction: column;        
-`
-export const Typography = styled.p`
-   font-family: 'PT Sans' ;
-   font-style: normal;
-   font-weight: 400;
-   font-size: 16px;
-   line-height: 21px;
-   color: ${({ theme }) => theme.colors.shadeBlack};
-   margin: 20px; 
-`
-export const ContainerPermission = styled.div`
-   width: 42%;
-   display: flex;
-   flex-direction: row;
-   flex-wrap: nowrap;
-   justify-content: space-between;
-   align-items: center;
-   margin: 20px;   
-   border-bottom: 1px solid ${({ theme }) => theme.colors.shadeBlack};
-   padding-bottom: 13px;
-`
-export const ContainerTypography = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 8px; 
-`
-export const TypographyTitle = styled.p`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 21px;
-    color: ${({ theme }) => theme.colors.shadeBlack};
-`
-export const TypographyPermission = styled.div`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-    color: ${({ theme }) => theme.colors.shadeBlack};
-`
-export const ContainerSwitch = styled.div`
-   
-`

package/src/components/LXP/popOver/index.tsx

@@ -1,111 +0,0 @@
-import '../../../shared/global.css'
-import { useState, useEffect } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './popOverStyle'
-import { IPopOver, IPopOverItems } from './popOver'
-import Popover from '@material-ui/core/Popover';
-
-const ArrowPopover = () => {
-    return (<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8.5 1L1 11.5H8.5H16L8.5 1Z" fill="white" stroke="#BDBDBD"/>
-                <path d="M1.21997 12L2.33 10.5H14.67L15.75 12H1.21997Z" fill="white"/>
-            </svg>)
-}
-export function PopOverItem(props: IPopOverItems) {
-
-    return (
-        
-        <div style={{
-                width: '100%',
-                padding: 8,
-                margin: 0,
-                fontSize: 16,
-                borderBottom: props.noBorder ? 'none' : '1px solid #EBEBEB',
-                display: 'flex',
-                flexDirection: 'row',
-                gap: 8,
-                fontFamily: 'PT Sans',
-                cursor: 'pointer',
-                color: props.color ? props.color : '#000000',
-                fontWeight: props.isFontBold ? '700' : 'normal'
-            }}        
-            onClick={props.onClick}
-        >
-            {props.icon}
-            {props.label}                                  
-        </div>
-        
-    )
-}
-
-export default function PopOver({ variant, children, element, onClosePopover, anchorOrigin, transformOrigin }: IPopOver) {
-
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [AnchorVertical, setAnchorVertical] = useState('');
-    const [AnchorHorizontal, setAnchorHorizontal] = useState(anchorOrigin ? anchorOrigin : {vertical: 'bottom', horizontal: 'right'});
-    const [TransformVertical, setTransformVertical] = useState(transformOrigin ? transformOrigin : {vertical: 'top', horizontal: 'right'});
-    const [Horizontal, setHorizontal] = useState('');
-
-    useEffect(() => {
-        setAnchorEl(element);
-    }, [element])
-
-    const handleClose = () => {
-        setAnchorEl(null);
-        onClosePopover()
-    };
-
-    const open = Boolean(anchorEl);
-    const id = open ? 'simple-popover' : undefined;
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>            
-            <Popover                
-                id={id}
-                open={open}
-                anchorEl={anchorEl}
-                onClose={handleClose}
-                anchorOrigin={AnchorHorizontal}
-                transformOrigin={TransformVertical}
-                PaperProps={{
-                    style: {
-                      backgroundColor: "transparent",
-                      boxShadow: "none",
-                      borderRadius: 8,
-                    }
-                }}
-                style={{
-                    borderRadius: 8
-                }}
-            >
-                <div style={{marginTop: variant.search('up') === -1? 0 : 12, marginBottom: variant.search('low') === -1? 0 : 20}}>
-                <Styles.PopOver>
-                    {
-                        variant === 'upLeft' ?        
-                            <Styles.RectangleUpLeft variant={variant = 'upLeft'}/>
-                        : variant === 'upRight' ?
-                            <Styles.RectangleUpRight variant={variant = 'upRight'}>
-                               <ArrowPopover/>
-                            </Styles.RectangleUpRight>
-                        : variant === 'lowRight' ?
-                            <Styles.RectangleLowRight variant={variant = 'lowRight'} />
-                        : variant === 'lowLeft' ?
-                            <Styles.RectangleLowLeft variant={variant = 'lowLeft'} />                        
-                            : variant === 'lowCenter' ?
-                            <Styles.RectangleLowCenter variant={variant = 'lowCenter'} />
-                        : variant === 'sideLeft' ?
-                            <Styles.RectangleLeft variant={variant = 'sideLeft'} />
-                        : variant === 'sideRight' ?
-                            <Styles.RectangleRight variant={variant = 'sideRight'} />
-                        : null
-                    }
-                    <div style={{zIndex: 9}}>
-                        {children}
-                    </div>
-                </Styles.PopOver>   
-                </div>
-            </Popover> 
-        </ThemeProvider>
-    );
-}

package/src/components/LXP/popOver/popOver.d.ts

@@ -1,30 +0,0 @@
-import React from 'react'
-
-type enumVariant = string
-
-export interface IPopOver {
-  /**
-   * @prop {enumVariant} variant: variant do popOver(upLeft, upRight, LowRight, LowLeft, sideLeft, sideRight)
-   */
-
-  variant?: enumVariant
-  /**
-   * @prop {React.ReactNode} children: valor de exibição dentro do componente popOver
-   */
-  children?: React.ReactNode
-  element: any
-  onClosePopover: () => void
-  style?: React.CSSProperties
-  anchorOrigin?: any
-  transformOrigin?: any
-}
-
-export interface IPopOverItems {
-  onClick?: () => void
-  label: string
-  icon?: any
-  style?: React.CSSProperties
-  noBorder?: boolean
-  color?: string
-  isFontBold?: boolean
-}

package/src/components/LXP/popOver/popOver.stories.tsx

@@ -1,128 +0,0 @@
-import React, { useState } from 'react'
-
-import PopOver from './index'
-import Button from '../../buttons'
-
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/PopOver',
-    component: PopOver,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-
-
-const Template = (args) => {
-    const [AnchorEl, setAnchorEl] = useState(null);
-    return (
-        <>
-            <Button
-                handleClick={(event: any) => {
-                    setAnchorEl(event.currentTarget)
-                }}
-                label={"Exemplo Popover"}
-                variant={"primary"}
-
-            />
-            <PopOver 
-                {...args} 
-                element={AnchorEl} 
-                onClosePopover={() => {
-                    setAnchorEl(null)
-                }}
-            />
-        </>
-    )
-}
-
-
-export const upLeft = Template.bind({})
-upLeft.args = {
-    variant: 'upLeft',
-    children: <>
-        <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
-
-        <h2>Indicador:</h2>
-        <h3>Tempo de uso da plataforma</h3>
-
-        <h2>Situação atual do indicador:</h2>
-        <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
-
-        <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
-        <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
-
-        <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
-        <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
-
-        <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
-        <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
-
-    </>,
-}
-
-export const upRight = Template.bind({})
-upRight.args = {
-    variant: 'upRight',    
-    children: <>
-    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
-
-    <h2>Indicador:</h2>
-    <h3>Tempo de uso da plataforma</h3>
-
-    <h2>Situação atual do indicador:</h2>
-    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
-
-    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
-    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
-
-    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
-    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
-
-    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
-    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
-
-</>,
-}
-
-export const lowRight = Template.bind({})
-lowRight.args = {
-    variant: 'lowRight',
-    children: <>Teste de children</>,    
-}
-
-export const lowLeft = Template.bind({})
-lowLeft.args = {
-    variant: 'lowLeft',
-    children: <> <span>Teste de children </span> </>,    
-}
-
-export const sideLeft = Template.bind({})
-sideLeft.args = {
-    variant: 'sideLeft',
-    children: <>
-    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
-
-    <h2>Indicador:</h2>
-    <h3>Tempo de uso da plataforma</h3>
-
-    <h2>Situação atual do indicador:</h2>
-    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
-
-    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
-    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
-
-    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
-    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
-
-    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
-    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
-
-</>,    
-}
-
-export const sideRight = Template.bind({})
-sideRight.args = {
-    variant: 'sideRight',
-    children: <> <span>Teste de children </span> </>,    
-}

package/src/components/LXP/popOver/popOverStyle.ts

@@ -1,130 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const RectangleUpLeft = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: -7px 0 32px 27px;
-    left: 0;
-    top: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-bottom: none;
-    border-right: none;
-    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
-
-    ${({ variant }) => (variant)}
-`
-export const RectangleUpRight = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    margin: -15px 16px 0 27px;}
-`
-export const RectangleLowRight = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 27px 32px -7px 0px;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-left: none;   
-    border-top: none;
-    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
-    
-    ${({ variant }) => (variant)}
-`
-export const RectangleLowLeft = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 27px 0 -7px 32px;
-    left: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-left: none;   
-    border-top: none;
-    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
-    
-    ${({ variant }) => (variant)}
-`
-export const RectangleLowCenter = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 27px 0 -7px calc(50% - 7px);
-    left: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-left: none;   
-    border-top: none;
-    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
-    
-    ${({ variant }) => (variant)}
-`
-
-export const RectangleLeft = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 39px 0px 32px -7px;
-    left: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-right: none;
-    border-bottom: none;
-    transform: matrix(0.91, -0.51, 0.91, 0.61, 0, 0);    
-    
-    ${({ variant }) => (variant)}
-`
-export const RectangleRight = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 39px -7px 13px 0;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-left: none;   
-    border-top: none;
-    transform: matrix(0.91, -0.51, 0.91, 0.61, 0, 0);    
-    
-    ${({ variant }) => (variant)}
-`
-export const PopOver = styled.div`
-    z-index: 999;
-    width: 100%;
-    min-height: 31px;
-    border-radius: 8px;
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    box-shadow: 0px 18px 20px -15px #222222;
-    position: relative;
-    padding: 8px;
-`
-export const PopOverLeftRight = styled.div`
-    width: 100%;
-    min-height: 67px;
-    border-radius: 8px;
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    box-shadow: 0px 18px 40px -15px #d3d3d3;
-    position: relative;
-    margin: 0% 0% 0% 0%;
-    padding: 8px;    
-`
-

package/src/components/LXP/popOverLXP-antigo/index.tsx

@@ -1,48 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './popOverLXPStyles'
-import { IPopOverLXP } from './popOverLXP'
-
-export default function PopOverLXP({ variant, children }: IPopOverLXP) {
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-
-            {
-                variant === 'upLeft' ?
-                    <Styles.PopOver>
-                        <Styles.RectangleUpLeft variant={variant = 'upLeft'}/>
-                        {children}
-                    </Styles.PopOver>
-                : variant === 'upRight' ?
-                    <Styles.PopOver>
-                        <Styles.RectangleUpRight variant={variant = 'upRight'} />
-                        {children}
-                    </Styles.PopOver>
-                : variant === 'lowRight' ?
-                    <Styles.PopOver>
-                        <Styles.RectangleLowRight variant={variant = 'lowRight'} />
-                        {children}
-                    </Styles.PopOver>
-                : variant === 'lowLeft' ?
-                    <Styles.PopOver>
-                        <Styles.RectangleLowLeft variant={variant = 'lowLeft'} />
-                        {children}
-                    </Styles.PopOver>
-                : variant === 'sideLeft' ?
-                    <Styles.PopOverLeftRight>
-                        <Styles.RectangleLeft variant={variant = 'sideLeft'} />
-                        {children}
-                    </Styles.PopOverLeftRight>
-                : variant === 'sideRight' ?
-                    <Styles.PopOverLeftRight>
-                        <Styles.RectangleRight variant={variant = 'sideRight'} />
-                        {children}
-                    </Styles.PopOverLeftRight>
-
-                : null
-            }
-
-        </ThemeProvider>
-    );
-}

package/src/components/LXP/popOverLXP-antigo/popOverLXP.d.ts

@@ -1,9 +0,0 @@
-import React from "react"
-
-type enumVariant = 'upLeft' | 'upRight' | 'lowRight' | 'lowLeft' | 'sideLeft' | 'sideRight' | any
-
-export interface IPopOverLXP {
-    variant?: enumVariant;
-    children: React.ReactNode,
-    element?: any
-}

package/src/components/LXP/popOverLXP-antigo/popOverLXP.stories.tsx

@@ -1,103 +0,0 @@
-import React from 'react'
-
-import PopOverLXP from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/PopOverLXP',
-    component: PopOverLXP,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <PopOverLXP {...args} />
-
-export const upLeft = Template.bind({})
-upLeft.args = {
-    variant: 'upLeft',
-    disabled: false,
-    children: <>
-    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
-
-    <h2>Indicador:</h2>
-    <h3>Tempo de uso da plataforma</h3>
-
-    <h2>Situação atual do indicador:</h2>
-    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
-
-    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
-    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
-
-    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
-    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
-
-    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
-    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
-
-</>,
-}
-
-export const upRight = Template.bind({})
-upRight.args = {
-    variant: 'upRight',    
-    children: <>
-    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
-
-    <h2>Indicador:</h2>
-    <h3>Tempo de uso da plataforma</h3>
-
-    <h2>Situação atual do indicador:</h2>
-    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
-
-    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
-    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
-
-    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
-    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
-
-    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
-    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
-
-</>,
-}
-
-export const lowRight = Template.bind({})
-lowRight.args = {
-    variant: 'lowRight',
-    children: <> <span>Teste de children </span> </>,    
-}
-
-export const lowLeft = Template.bind({})
-lowLeft.args = {
-    variant: 'lowLeft',
-    children: <> <span>Teste de children </span> </>,    
-}
-
-export const sideLeft = Template.bind({})
-sideLeft.args = {
-    variant: 'sideLeft',
-    children: <>
-    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
-
-    <h2>Indicador:</h2>
-    <h3>Tempo de uso da plataforma</h3>
-
-    <h2>Situação atual do indicador:</h2>
-    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
-
-    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
-    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
-
-    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
-    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
-
-    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
-    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
-
-</>,    
-}
-
-export const sideRight = Template.bind({})
-sideRight.args = {
-    variant: 'sideRight',
-    children: <> <span>Teste de children </span> </>,    
-}