frst-components 0.20.1 → 0.20.3

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

@@ -1,121 +0,0 @@
-import Button from '@components/buttons'
-import ProgressBar from '@components/LXP/progressBar'
-import { useEffect, useState } from 'react'
-import { FRSTTheme } from '../../../theme'
-import * as styledHeaderContent from './headerContent'
-import { ArrowScrollRight } from './../../../shared/icons'
-import { ThemeProvider } from 'styled-components'
-
-interface objPropiedades {
-  title?: string
-  description?: string
-  bgImg?: string
-  typeOfHeader?: 'inProgress' | 'recomendation'
-  progresso?: number
-  channel?: string
-  onClick?: () => void
-  labelButton?: string
-}
-interface HeaderContentParams {
-  textViewMore?: string
-  textViewLess?: string
-  autoplayTime?: number
-  listaRecomendacao: Array<objPropiedades>
-  style?: React.CSSProperties
-}
-
-export default function HeaderContent(props: HeaderContentParams) {
-  const [selectedContent, setSelectedContent] = useState(0)
-  const [zeroHeigthDescription, setzeroHeigthDescription] = useState(false)
-  const [textView, setTextView] = useState(props.textViewMore)
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setSelectedContent(selectedContent < (props.listaRecomendacao.length - 1) ? selectedContent + 1 : 0)
-      setzeroHeigthDescription(false)
-      setTextView(props.textViewMore)
-    }, props.autoplayTime ? props.autoplayTime : 10000)
-    return () => clearTimeout(timer)
-  }, [selectedContent])
-
-  function addHeigthDescription() {
-    if (zeroHeigthDescription) {
-      setzeroHeigthDescription(false)
-      setTextView(props.textViewMore)
-    } else if (!zeroHeigthDescription) {
-      setzeroHeigthDescription(true)
-      setTextView(props.textViewLess)
-    }
-  }
-
-  function RecomendationHeader(item) {
-    return (
-      <>
-        <styledHeaderContent.Title>{item.title}</styledHeaderContent.Title>
-        <styledHeaderContent.Description zeroHeigthDescription={zeroHeigthDescription}>
-          {item.description}
-        </styledHeaderContent.Description>
-        <styledHeaderContent.SpaceButtonTopViewMore
-          zeroHeigthDescription={zeroHeigthDescription}
-          onClick={addHeigthDescription}
-        >
-          <Button label={textView} variant="link" style={{ color: '#649AF3', fontWeight: '900' }} />
-          <ArrowScrollRight fill="#649AF3" width="13px" height="13px" strokeWidth={'4'} />
-        </styledHeaderContent.SpaceButtonTopViewMore>
-        <styledHeaderContent.SpaceButtonTop onClick={item.onClick}>
-          <Button label={item.labelButton} variant="primary" />
-        </styledHeaderContent.SpaceButtonTop>
-      </>
-    )
-  }
-
-  function InProgressHeader(item) {
-    return (
-      <>
-        <styledHeaderContent.Title>{item.title}</styledHeaderContent.Title>
-        <styledHeaderContent.Description zeroHeigthDescription={zeroHeigthDescription}>
-          {item.description}
-        </styledHeaderContent.Description>
-        <styledHeaderContent.SpaceButtonTopViewMore
-          zeroHeigthDescription={zeroHeigthDescription}
-          onClick={addHeigthDescription}
-        >
-          <Button label={textView} variant="link" style={{ color: '#649AF3', fontWeight: '900' }} />
-          <ArrowScrollRight fill="#649AF3" width="13px" height="13px" strokeWidth={'4'} />
-        </styledHeaderContent.SpaceButtonTopViewMore>
-        <styledHeaderContent.SpaceProgressAndButton>
-          <ProgressBar value={item.progresso} label={item.channel} style={{width: 200}}/>
-          <Button label={item.labelButton} variant="primary" handleClick={item.onClick}/>
-        </styledHeaderContent.SpaceProgressAndButton>
-      </>
-    )
-  }
-
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      <styledHeaderContent.Container style={{...props.style}}>
-        {props.listaRecomendacao.map((item, index) => {
-          return (
-            <styledHeaderContent.HeaderImage key={index} img={item.bgImg} tmnDescription={item.description.length} onDisplay={index === selectedContent} style={{...props.style}}>
-              <>
-                {item.typeOfHeader === 'inProgress' ? (
-                  <styledHeaderContent.Content onDisplay={index === selectedContent}>{InProgressHeader(item)}</styledHeaderContent.Content>
-                ) : (
-                  <styledHeaderContent.Content onDisplay={index === selectedContent}>{RecomendationHeader(item)}</styledHeaderContent.Content>
-                )}
-              </>
-            </styledHeaderContent.HeaderImage>
-          )
-        })}
-        <styledHeaderContent.ListCounters>
-          {Array.from({ length : props.listaRecomendacao.length}).map((_,index) =>
-            <styledHeaderContent.Counters key={index} 
-              selected={index === selectedContent}
-              onClick={() => setSelectedContent(index)}   
-            />
-          )}
-        </styledHeaderContent.ListCounters>
-      </styledHeaderContent.Container>
-    </ThemeProvider>
-  )
-}

package/src/components/LXP/headerContent/selectedCountCircle.tsx

@@ -1,14 +0,0 @@
-import React from "react"
-
-export default function SelectedCountCircle() {
-    return(
-        <>
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="8" cy="8" r="8" fill="#E0E0E0"/>
-                <svg x='3' y='3' width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <circle cx="5" cy="5" r="5" fill="#FF4D0D"/>
-                </svg>
-            </svg>
-        </>
-    )
-}

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

@@ -1,410 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './loginStyle'
-import { ILogin, ILoginTranslate } from './login'
-import * as Icons from '../../../shared/icons'
-import Button from '@components/buttons'
-import React, { useState, useEffect } from 'react'
-import TextField from '@components/form-elements/textfield'
-
-export default function Login(props: ILoginTranslate) {
-  const [email, setEmail] = useState('')
-  const [confirmEmail, setConfirmEmail] = useState('')
-  const [emailRecover, setEmailRecover] = useState('')
-  const [password, setPassword] = useState('')
-  const [newPassword, setNewPassword] = useState('')
-  const [codigoNewPassword, setCodigoNewPassword] = useState('')
-  const [keepConnected, setKeepConnected] = useState(true)
-  const [step, setStep] = useState(1)
-  const [error, setError] = useState(props.isError)
-  const [colorError, setColorError] = useState(props.isError)
-  const [MsgInput1, setMsgInput1] = useState('')
-  const [MsgInput2, setMsgInput2] = useState('')
-
-  useEffect(() => {
-    setError(props.isError)
-  }, [props.isError])
-
-  const onClikLogin = () => {
-    setMsgInput1('')
-    setMsgInput2('')
-    setError(false)
-
-    if (email.length === 0) {
-      setMsgInput2(props.textErrorEmailNaoInformado ? props.textErrorEmailNaoInformado : 'E-mail não informado.')
-      setError(true)
-      return
-    }
-    if (password.length === 0) {
-      setMsgInput2(props.textErrorSenhaNaoInformado ? props.textErrorSenhaNaoInformado : 'Senha não Informada.')
-      setError(true)
-      return
-    }
-    if (props.isError) {
-      setMsgInput2(props.textErrorLoginPropsIsError ? props.textErrorLoginPropsIsError : 'E-mail ou senhas incorretos.')
-      setError(true)
-    }
-
-    props.handleClickLogin(email, password, keepConnected)
-  }
-
-  const onClickForgotPasswordChange = () => {
-    //const emailRegex = ('[a-z0-9]+@[a-z]+\.[a-z]{2,3}');
-    setMsgInput1('')
-    setMsgInput2('')
-    setError(false)
-
-    if (emailRecover.length === 0) {
-      setMsgInput2(props.textEmailErrorNaoPrenchido ? props.textEmailErrorNaoPrenchido : 'E-mail não preenchido.')
-      setError(true)
-      return
-    }
-    let regexEmail = /\S+@\S+.\S+/
-    if (!regexEmail.test(emailRecover)) {
-      setMsgInput2(props.textEmailErrorInvalido ? props.textEmailErrorInvalido : 'E-mail inválido.')
-      setError(true)
-      return
-    }
-    if (props.isError) {
-      setMsgInput2(
-        props.textEmailErrorPropsIsError
-          ? props.textEmailErrorPropsIsError
-          : 'Erro ao enviar email de recuperação de senha.'
-      )
-      setError(true)
-    }
-    props.handleClickForgotPassword(emailRecover)
-    setStep(3)
-  }
-
-  const onClickSave = () => {
-    setMsgInput1('')
-    setMsgInput2('')
-    setError(false)
-    setColorError(false)
-
-    if (confirmEmail.length === 0) {
-      setMsgInput2(
-        props.textNewPasswordErrorEmailNaoInformada
-          ? props.textNewPasswordErrorEmailNaoInformada
-          : 'Email não informado.'
-      )
-      setError(true)
-      return
-    }
-    let regexEmail = /\S+@\S+.\S+/
-    if (!regexEmail.test(confirmEmail)) {
-      setMsgInput2(props.textEmailErrorInvalido ? props.textEmailErrorInvalido : 'E-mail inválido.')
-      setError(true)
-      return
-    }
-    if (newPassword.length === 0) {
-      setMsgInput2(
-        props.textNewPasswordErrorNaoInformada ? props.textNewPasswordErrorNaoInformada : 'Nova senha não informada.'
-      )
-      setError(true)
-      return
-    }
-    if (codigoNewPassword.length === 0) {
-      setMsgInput2(props.textNewPasswordErrorCodigo ? props.textNewPasswordErrorCodigo : 'Código não informado.')
-      setError(true)
-      return
-    }
-    if (props.isError) {
-      setMsgInput2(
-        props.textNewPasswordErrorInforma ? props.textNewPasswordErrorInforma : 'Erro ao informar nova senha.'
-      )
-      setError(true)
-    }
-
-    let emailPrefix = confirmEmail.split('@')[0].split('.')[0]
-    let emailSufix = confirmEmail.split('@')[1].split('.')[0]
-
-    const validateEmailPrefix = new RegExp(emailPrefix, 'g')
-    const validateEmailSufix = new RegExp(emailSufix, 'g')
-    const validateUpperCase = new RegExp(/[A-Z]/, 'g')
-
-    if (
-      newPassword &&
-      (!newPassword.replace(/\D/g, '') ||
-        !newPassword.replace(/\d/g, '') ||
-        !newPassword.replace(/\w/g, '') ||
-        newPassword.match(/frst|falconi|FRST|FALCONI|Frst|Falconi/g) ||
-        newPassword.match(validateEmailPrefix) ||
-        newPassword.match(validateEmailSufix) ||
-        !newPassword.match(validateUpperCase) ||
-        newPassword.length < 8)
-    ) {
-      setColorError(true)
-      setError(true)
-      return
-    }
-
-    props.handleClickChangePassword(newPassword, codigoNewPassword, confirmEmail)
-  }
-
-  const handleClickCheckbox = () => {
-    setKeepConnected(!keepConnected)
-  }
-
-  const onClickForgotPassword = () => {
-    setError(false)
-    setEmailRecover('')
-    setStep(2)
-    setMsgInput2('')
-  }
-
-  const onClickNotCancel = () => {
-    setError(false)
-    setStep(1)
-    setMsgInput2('')
-  }
-
-  useEffect(() => {
-    setError(props.isError)
-    setMsgInput2(props.isError ? 'E-mail ou senhas incorretos.' : '')
-  }, [props.isError])
-
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      {props.variant === 'login' && step === 1 ? (
-        <Styles.Container>
-          <Styles.ContainerLogo>
-            <Icons.FRSTLogoBig />
-          </Styles.ContainerLogo>
-          <Styles.ContainerTypography>
-            <Styles.TypographyWelcome>
-              {props.textBoasVindas ? props.textBoasVindas : 'Bem-vindo'}
-            </Styles.TypographyWelcome>
-          </Styles.ContainerTypography>
-          <Styles.TypographyFill>
-            {props.textLoginInformacao ? props.textLoginInformacao : 'Para acessar, preencha os campos abaixo:'}
-          </Styles.TypographyFill>
-          <Styles.ContainerInputAndLink>
-            <Styles.ContainerIpuntAndIsIcon>
-              <Styles.ContainerEmail isError={error}>
-                <TextField
-                  error={error}
-                  helperText={MsgInput1}
-                  placeholder="Email"
-                  label="Email"
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  style={{ width: '100%' }}
-                />
-              </Styles.ContainerEmail>
-              {error && (
-                <Styles.IconAlert>
-                  <Icons.AlertCicle />
-                </Styles.IconAlert>
-              )}
-            </Styles.ContainerIpuntAndIsIcon>
-            <Styles.ContainerButtonLink>
-              <Button
-                variant="link"
-                label={props.textoLabelLoginButtonLink ? props.textoLabelLoginButtonLink : 'Esqueceu a senha?'}
-                handleClick={onClickForgotPassword}
-              />
-            </Styles.ContainerButtonLink>
-            <Styles.ContainerIpuntAndIsIcon>
-              <Styles.ContainerPassword isError={error}>
-                <TextField
-                  helperText={MsgInput2}
-                  error={error}
-                  endIcon={<Icons.Viewer fill={error ? '#ff0000' : '#000000'} />}
-                  placeholder={props.textInputLoginSenha ? props.textInputLoginSenha : 'Senha'}
-                  label={props.textInputLoginSenha ? props.textInputLoginSenha : 'Senha'}
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  style={{ width: '100%' }}
-                />
-              </Styles.ContainerPassword>
-              {error && (
-                <Styles.IconAlert style={{ paddingTop: '78px' }}>
-                  <Icons.AlertCicle />
-                </Styles.IconAlert>
-              )}
-            </Styles.ContainerIpuntAndIsIcon>
-          </Styles.ContainerInputAndLink>
-          <Styles.ContainerConnect>
-            <Styles.ContainerCheckbox onClick={handleClickCheckbox}>
-              {keepConnected ? <Icons.CheckboxEmpty fill={'#ebeded'} /> : <Icons.CheckboxChecked />}
-              <Styles.TypographyConnect>
-                {props.textLoginConectado ? props.textLoginConectado : 'Manter-me conectado'}
-              </Styles.TypographyConnect>
-            </Styles.ContainerCheckbox>
-            <Button
-              variant="primary"
-              label={props.textLoginButton ? props.textLoginButton : 'Entrar'}
-              handleClick={onClikLogin}
-            />
-          </Styles.ContainerConnect>
-        </Styles.Container>
-      ) : props.variant === 'login' && step === 2 ? (
-        <Styles.ContainerRecover>
-          <Styles.ContainerLogoRecover>
-            <Icons.FRSTLogoBig />
-          </Styles.ContainerLogoRecover>
-          <Styles.ContainerEmailAndTypeRecoverRecover>
-            <Styles.ContainerTypographyRecover>
-              <Styles.TypographyRecover>
-                {props.textEmailCadastro
-                  ? props.textEmailCadastro
-                  : 'Digite seu e-mail de cadastro abaixo e clique em enviar.'}
-              </Styles.TypographyRecover>
-              <Styles.TypographyRecover>
-                {props.textEmailCadastro2
-                  ? props.textEmailCadastro2
-                  : 'Nós lhe enviaremos um e-mail com o link para recastrar sua senha.'}
-              </Styles.TypographyRecover>
-            </Styles.ContainerTypographyRecover>
-            <Styles.ContainerIpuntAndIsIcon>
-              <Styles.ContainerEmailRecover isError={error}>
-                <TextField
-                  error={error}
-                  helperText={MsgInput2}
-                  placeholder="Email"
-                  label="Email"
-                  type="email"
-                  value={emailRecover}
-                  onChange={(e) => setEmailRecover(e.target.value)}
-                  style={{ width: '100%' }}
-                />
-              </Styles.ContainerEmailRecover>
-              {error && (
-                <Styles.IconAlert isStep={step}>
-                  <Icons.AlertCicle />
-                </Styles.IconAlert>
-              )}
-            </Styles.ContainerIpuntAndIsIcon>
-          </Styles.ContainerEmailAndTypeRecoverRecover>
-
-          <Styles.ContainerButtonRecover>
-            <Button
-              variant="link"
-              label={props.textEmailButtonLinkCancel ? props.textEmailButtonLinkCancel : 'Não, cancelar'}
-              handleClick={onClickNotCancel}
-            />
-            <Button
-              variant="primary"
-              label={props.textEmailButtonEnviar ? props.textEmailButtonEnviar : 'Enviar'}
-              handleClick={onClickForgotPasswordChange}
-            />
-          </Styles.ContainerButtonRecover>
-        </Styles.ContainerRecover>
-      ) : props.variant === 'newPassword' ? (
-        <Styles.Container>
-          <Styles.ContainerLogoRecover>
-            <Icons.FRSTLogoBig />
-          </Styles.ContainerLogoRecover>
-          <Styles.TypographyNewPassword>
-            {props.textNewPasswordInformacao
-              ? props.textNewPasswordInformacao
-              : 'Para criar uma nova senha, preencha os campos abaixo:'}
-          </Styles.TypographyNewPassword>
-          <Styles.ContainerPasswordNew isError={error}>
-            <Styles.ContainerIpuntAndIsIcon>
-              <TextField
-                error={error}
-                placeholder={
-                  props.textNewPasswordInputEmailPlaceholder
-                    ? props.textNewPasswordInputEmailPlaceholder
-                    : 'Por favor, insira seu e-mail aqui'
-                }
-                label={props.textNewPasswordInputEmail ? props.textNewPasswordInputEmail : 'Digite o email'}
-                type={'text'}
-                value={confirmEmail}
-                onChange={(e) => setConfirmEmail(e.target.value)}
-                style={{ width: '95%' }}
-              />
-              {error && (
-                <Styles.IconAlert>
-                  <Icons.AlertCicle />
-                </Styles.IconAlert>
-              )}
-            </Styles.ContainerIpuntAndIsIcon>
-            <Styles.ContainerIpuntAndIsIcon>
-              <TextField
-                error={error}
-                endIcon={<Icons.Viewer fill={error ? '#ff0000' : '#000000'} />}
-                placeholder={props.textNewPasswordInput ? props.textNewPasswordInput : 'Insira sua nova senha'}
-                label={props.textNewPasswordInput ? props.textNewPasswordInput : 'Nova senha'}
-                type={'password'}
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-                style={{ width: '95%' }}
-              />
-              {error && (
-                <Styles.IconAlert>
-                  <Icons.AlertCicle />
-                </Styles.IconAlert>
-              )}
-            </Styles.ContainerIpuntAndIsIcon>
-
-            <Styles.ContainerIpuntAndIsIcon>
-              <TextField
-                helperText={MsgInput2}
-                error={error}
-                placeholder={
-                  props.textNewPasswordInputPlaceholderCodigo ? props.textNewPasswordInputPlaceholderCodigo : 'Código'
-                }
-                label={props.textNewPasswordInputCodigo ? props.textNewPasswordInputCodigo : 'Digite o Código'}
-                type={'text'}
-                value={codigoNewPassword}
-                onChange={(e) => setCodigoNewPassword(e.target.value)}
-                style={{ width: '95%' }}
-              />
-              {error && (
-                <Styles.IconAlert>
-                  <Icons.AlertCicle />
-                </Styles.IconAlert>
-              )}
-            </Styles.ContainerIpuntAndIsIcon>
-          </Styles.ContainerPasswordNew>
-
-          <Styles.ContainerTypographyNewPassword>
-            <Styles.TypographyNewPassword isColorError={colorError} style={{ fontSize: '14px' }}>
-              {props.textNewPasswordErrorSenhaForte
-                ? props.textNewPasswordErrorSenhaForte
-                : 'Use pelo menos 8 caracteres, 1 maiúscula, 1 minúscula, e um número ou caractere especial. Não use parte de seu e-mail (seunome@empresa.com) como senha.'}
-            </Styles.TypographyNewPassword>
-          </Styles.ContainerTypographyNewPassword>
-
-          <Styles.ContainerButtonRecover>
-            <Button
-              variant="link"
-              label={props.textNewPasswordButtonLink ? props.textNewPasswordButtonLink : 'Voltar Login'}
-              handleClick={props.handleClickChangePasswordCancel}
-            />
-            <Button
-              variant="primary"
-              label={props.textNewPasswordButtonSalvar ? props.textNewPasswordButtonSalvar : 'Salvar'}
-              handleClick={onClickSave}
-            />
-          </Styles.ContainerButtonRecover>
-        </Styles.Container>
-      ) : props.variant === 'login' && step === 3 ? (
-        <Styles.ContainerSendComfirmation>
-          <Styles.ContainerLogoRecover>
-            <Icons.FRSTLogoBig />
-          </Styles.ContainerLogoRecover>
-          <Styles.TypographyNewPassword>
-            {props.textConfirmacaoRespostaEmail
-              ? props.textConfirmacaoRespostaEmail
-              : 'Solicitação enviada com sucesso para o seu e-mail.'}
-          </Styles.TypographyNewPassword>
-          <Styles.ContainerButtonSendConfirmation>
-            <Button
-              variant="primary"
-              label={props.textConfirmacaoButtonRetorna ? props.textConfirmacaoButtonRetorna : 'Retornar'}
-              handleClick={props.onClickConfimationBackToLogin}
-            />
-          </Styles.ContainerButtonSendConfirmation>
-        </Styles.ContainerSendComfirmation>
-      ) : null}
-    </ThemeProvider>
-  )
-}

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

@@ -1,50 +0,0 @@
-import React from 'react'
-
-type enumVariant = 'login' | 'newPassword'
-
-export interface ILogin {
-  variant?: enumVariant
-  style?: React.CSSProperties
-  isError?: boolean
-  handleClickLogin?: (email, password, keepConnected) => void
-  handleClickForgotPassword?: (email) => void
-  onClickConfimationBackToLogin?: () => void
-  handleClickChangePassword?: (newPassword, codigoNewPassword, confirmEmail) => void
-  handleClickChangePasswordCancel?: () => void
-}
-
-export interface ILoginTranslate extends ILogin {
-  textBoasVindas?: string
-  textLoginInformacao?: string
-  textoLabelLoginButtonLink?: string
-  textInputLoginSenha?: string
-  textLoginConectado?: string
-  textLoginButton?: string
-  textErrorEmailNaoInformado?: string
-  textErrorSenhaNaoInformado?: string
-  textErrorLoginPropsIsError?: string
-  textEmailCadastro?: string
-  textEmailCadastro2?: string
-  textEmailButtonLinkCancel?: string
-  textEmailButtonEnviar?: string
-  textEmailErrorNaoPrenchido?: string
-  textEmailErrorInvalido?: string
-  textEmailErrorPropsIsError?: string
-  textConfirmacaoRespostaEmail?: string
-  textConfirmacaoButtonRetorna?: string
-  textNewPasswordInformacao?: string
-  textNewPasswordInput?: string
-  textNewPasswordButtonLink?: string
-  textNewPasswordButtonSalvar?: string
-  textNewPasswordErrorNaoInformada?: string
-  textNewPasswordErrorSenhaForte?: string
-  textNewPasswordErrorCorfirma?: string
-  textNewPasswordErrorIguais?: string
-  textNewPasswordErrorInforma?: string
-  textNewPasswordInputCodigo?: string
-  textNewPasswordInputPlaceholderCodigo?: string
-  textNewPasswordErrorCodigo?: string
-  textNewPasswordInputEmailPlaceholder?: string
-  textNewPasswordInputEmail?: string
-  textNewPasswordErrorEmailNaoInformada?: string
-}