@tce-ap/react-components NPM

TCE - AP

Esta biblioteca está em fase de desenvolvimento.

Começando

npm i @tce-ap/react-components

Métodos do SSO

Biblioteca de autenticação do TCE.

Authorize

Descrição:

Método de autenticação para os sistemas do TCE.

Amostras

Parâmetros:

Variável	Tipo de valor	Obrigatoriedade	Notas
username	String	:heavy_check_mark:	Usuário da rede
password	String	:heavy_check_mark:	Senha da rede
applicationToken	String	:heavy_check_mark:	Token de autenticação criado no painel do SSO

GetToken

Descrição:

Método para pegar o token de autenticação do usuário.

Amostras

Parâmetros:

Variável	Tipo de valor	Obrigatoriedade	Notas
authorization_code	String	:heavy_check_mark:	Token de autenticação que retornou do Authorize
username	String	:heavy_check_mark:	Usuário da rede
password	String	:heavy_check_mark:	Senha da rede

GetUser

Descrição:

Método que retorna os dados do usuário.

Amostras

Parâmetros:

Variável	Tipo de valor	Obrigatoriedade	Notas
cpf	String	:heavy_check_mark:	CPF do usuário
token	String	:heavy_check_mark:	Token decodificado que retornou do método GetToken

Exemplo:

import { Authorize, GetToken, GetUser } from "@tce-ap/react-components";
import jwt_decode from "jwt-decode";
const signIn = async (username: string, password: string) => {
  const applicationToken = process.env.REACT_APP_APPLICATION_TOKEN || "";
  try {
    const { data } = await Authorize(username, password, applicationToken);
    const response = await GetToken(data.AuthorizationCode, username, password);
    let decoded: any = jwt_decode(response.data);
    const me = await GetUser(
      decoded.data.guards.api.user.cpf,
      decoded.token.token
    );
  } catch (error: any) {
    console.log(error.message);
  }
};

GetAllFuncionarios

Descrição:

Método que retorna os dados de todos os usuários do TCE-AP paginados de 10 em 10.

Amostras

Parâmetros:

Variável	Tipo de valor	Obrigatoriedade	Notas
all	Boolean	:x:	Retorna todos sem paginação

GetFuncionarioPorCPF

Descrição:

Método para buscar funcionário por CPF

Amostras

Parâmetros:

Variável	Tipo de valor	Obrigatoriedade	Notas
cpf	Boolean	:heavy_check_mark:	Retorna todos os dados de um funcionário

SearchGovBrPessoaFisica

Descrição:

Método para buscar os dados de uma pessoa no GovBr

Amostras

Parâmetros:

Variável	Tipo de valor	Obrigatoriedade	Notas
cpf	String	:heavy_check_mark:	Retorna todos os dados de uma pessoa cadastrada no GovBr

Login

Descrição:

Método de autenticação para os sistemas do TCE.

Amostras

Parâmetros:

Variável	Tipo de valor	Obrigatoriedade	Notas
username	String	:heavy_check_mark:	Usuário da rede
password	String	:heavy_check_mark:	Senha da rede

Exemplos:

ts

Admin LTE baseado em React Componentes

Conceitos desta biblioteca:

Baseado em bootstrap 4;
Componentes podem (e devem) ser estendidos e estilizados usando estilos, de forma flexível;
Baseado no princípio KISS (Keep It Simple, Stupid);
Foco na reutilização e flexibilidade;

Components

Button

Descrição:

Este é um componente clicável e pode executar funções passadas como argumento (onClick). Aceita ícones e textos como parâmetros.

Amostras

Props:

Variável	Tipo de valor	Padrão	Obrigatoriedade	Notas
buttonType	String	_	:x:	_
text	String	_	:heavy_check_mark:	Este é a descrição do botão
type	String	button	:x:	Tipo de botão o botão usa
icon	String	_	:x:	Ícone que o botão pode ter
disabled	boolean	false	:x:	Opção para desabilitar o botão ou não

TCE - AP

Começando

Métodos do SSO

Authorize

Descrição:

Amostras

Parâmetros:

GetToken

Descrição:

Amostras

Parâmetros:

GetUser

Descrição:

Amostras

Parâmetros:

Exemplo:

GetAllFuncionarios

Descrição:

Amostras

Parâmetros:

GetFuncionarioPorCPF

Descrição:

Amostras

Parâmetros:

SearchGovBrPessoaFisica

Descrição:

Amostras

Parâmetros:

Login

Descrição:

Amostras

Parâmetros:

Exemplos:

Admin LTE baseado em React Componentes

Components

Button

Descrição:

Amostras

Props:

ButtonCardGroup

ButtonCardNew

ButtonGroup

Checkbox

DateInput

FileInput

Form

GraficoBarra

GraficoPizza

Image

Loading

MessageUL

Modal

PasswordInput

Search

ShowCard

SmallBox

Tab

TableResponsive

TextInput

Layouts

Dashboard

Footer

Header

Menu