npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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.