codevasf-components v1.1.7

codevasf-components

Componentes React para desenvolvimento de projetos WEB da CODEVASF

Recursos

-- React com Typescript 
-- Sass 
-- classNames

Componentes

--  Column:                             Separa o layout em colunas;
--  DecoratedLink:                      Link formatado com as especificações da CODEVASF.

--  Popup:                              Cria uma Popup na tela;
    --->contentClassName    <string>    className para a caixa de conteúdo da Popup.

--  ProgressBar                         Uma barra de progresso.
    --->barClassName:       <string>    Altera o estilo do pistão da barra.
    --->progress:           <number>    Progresso atual da barra.
    --->infinity:           <boolean>   Faz a barra carregar infinitamente em loop.

--  SpinLoader:                         Um ícone de carregamento giratório.
--  Title:                              Cria um título;

--  Header      Cria um Header;
    ╚> Brand:           Cria uma logomarca com um icone da CODEVASF. Aceita elementos filhos.
    ╚> Navbar:          Agrupa os "Menus" em uma barra de navegação horizontal.
    ╚> DropDownMenu:    Cria um dropdown menu, aceita Menu, como filhos.
        ---:title:      <string>    Texto que aparecerá no menu.
        --->rootURL:    <string>    Se fornecido, ficará "ativo" se um menu filho estiver "ativo".
    ╚> Menu:                        Cria links dentro de uma "Navbar".
        --->href:       <string>    URL a qual o menu levará.

--  Cards               Agrupa os 'Cards' e os gerencia.
    --  Card:           Cria um cartão animado para exibir informações.  
    --  CardContent:    Contéudo do 'Card', fica oculto quando o 'Card' está inativo.

--  TabsArea:                                   Cria uma área com abas.
    --->tabsClassName   <string>                className para o 'div' contendo as abas.
    --->defaultTab      <number>                INTEIRO corresponde a aba padrão, default = 0;
    --->items           <{title: <string>,      Items a serem exibidos como conteúdo de cada aba.
                         content: <ReactNode>       -title:     Texto que aparecerá na aba.
                        }[]>                        -content:   Contéudo que aparecerá ao ter sua aba ativada.
    
    OBS: A ordem das abas segue a ordem listada em 'items'.

--  Form:               Formulário e itens pré-estilizados.
    --  FormTitle       Um título para o 'form'.
    --  FormRow         Linhas para o formulário.    
    --  FormButton      button pré-formatado
    --  FormInput       input pré-formatado
    --  FormLabel       label pré-formatada
    --  FormPassword    input para senhas com botão para mostrar/ocultar a senha

-- Icons:
    -CloseIcon:         Ícone SVG em formato de X.

Events

-- PopupEvent:                  Evento utilizado para exibição e controle de Popups.
    --->popup:  <ReactNode>     Popup a ser exibida. 

Authenticator

-- Classe para usar os métodos de autenticação do firebase da Google Cloud.
-- Necessário ter as variáveis de ambiente:
    --- NEXT_PUBLIC_API_KEY com a chave da api do firebase
    --- NEXT_PUBLIC_FIREBASE_DOMAIN com a url de domínio do firebase.

### Métodos
    signIn(email: string, password: string) => Promise<UserCredentials>
        --> Faz login do usuário e retorna suas credenciais.

Firebase

-- Classe para usar os métodos de gerenciamento de usuários do firebase