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.