obras-form-execucao-react
v0.0.1-RC
Published
componente de execução do formulário .
Downloads
2
Readme
Obras contrato react
Um componente feito pela equipe de obras(ZEUS), tem como finalidade aumentar a produtividade diminuindo o tempo de desenvolvimento das aplicações em react, para isso traz um conjunto de funcionalidade que permite consultar e selecionar o contrato; permite tambem a customização de seu tema padrão podendo ajustar ao cliente.
Requisitos
Para fazer a instalação do componente devera estar logado no npm da softplan. instruções de como logar na wiki pergunte aos universitarios. Tem a dependencia de seu serviço que podera esse tambem ser customizado.
Node version 16 ou superior.
Tecnologias
Abaixo as tecnologias utilizadas:
Storybook
Usamos o storybook para documentar alguns comportamentos visuais.
para abrir e so entrar na pasta do projeto e rodar o comando:
npm run storybook
Mantine
Mantine é uma biblioteca de componentes React focada em fornecer uma ótima experiência de usuário e desenvolvedor.
Instalando no projeto
Basta estar logado no npm como mostar na wiki pergunte aos universitarios, e rodar o comando:
npm install obras-contrato-react
Propriedades
callback?: (contrato?: IContratoUsuario) => void;
Retorna o contrato que foi selecionada no modal de consulta de contratos.
limpar?: () => void;
Função que sera executada quando icon da licheira for acionado.
error?: (error?: string) => void;
Retorna mensagem de erro, onde podera ser implementado o componente de alerta do lado do sistema pai.
sucesso?: (msg?: string) => void;
Retorna mensagem de sucesso, onde podera ser implementado o componente de alerta do lado do sistema pai.
loading?: React.ReactElement<any, any>;
Onde deve passar o componente de loading para ser executado quando o componente fazer as chamadas a api.
label?: string;
Caso queira alterar a label padrão do componente.
pino?: boolean;
Habilita a funcionalidade de carregar/pina o contrato.
url?: string;
Se quiser alterar a url do path da api que ira consumir.
tema?: TemaType;
Caso queira customizar o tema padrão do componente.
inicializar?: boolean;
Esse parâmetro abilita a consulta de contratos quando abrir o modal de pesquisa.
tipoSistema?: TipoSistema('SMO' | 'CCO');
parâmetro que vai ser enviado no header da requisição ao back-end.
TSDX React User Guide
O TSDX é uma CLI de configuração zero que ajuda você a desenvolver, testar e publicar pacotes TypeScript modernos com facilidade, para que você possa se concentrar em sua nova biblioteca incrível e não perder mais uma tarde na configuração.
Qualidade do código
A qualidade do código é configurada para você com prettier
e lint-staged
. Ajuste os respectivos campos em package.json
de acordo.
Gerando versão
Para gerar uma versão basta gerar uma tag com a versão que esta no package.json do projeto.
End-points
As requisções deste componente utiliza 4 end-points, que poderam ser alterados ao inserir um valor na Propriedade url
, que tem com padrão o valor /smo-contrato-service
.
End points
Metodo `GET` de consulta `${url} + /contratos` que tem os seguintes parâmetros `cdTitulo=PP105&deObjetoResumido=Pavimenta&page=0&size=5`.
Metodo `GET` que carrega o pino `${url} + /pinos`.
Metodo `POST` que o pino contrato `${url} + /pinos/{nuTitulo}`.
Metodo `DELETE` que o remove o contrato pinado `${url} + /pinos`.
Propriedades do tema
Esse componente possui o tema customizável, para alterar para passar o parâmetro tema com as seguintes propriedades:
{
colors?: {
primary?: string;
light?: string;
dark?: string;
};
fonts?: string[];
fontSize?: {
small?: string;
medium?: string;
large?: string;
};
};
Autenticação
Nas requisições não passa o token de autorização, o back-end tem que pegar a autenticação do cookie usando a lib ungp-spring-oauth-security.