@dnaz/core-react-components

v1.3.4

Published

3 years ago

## Descrição

0High
0Medium
0Low

alluisio

leonardo-ipdec

mapd-dnaz

Core React Components

Descrição

Biblioteca criada para disponibilizar componentes React para serem reaproveitados entres os módulos do Core.

O principal componente que motivou a criação desta biblioteca foi a barra superior do Core - TopBar, pois todos o módulos precisam ter a barra superior com a mesma identidade e funcionalidades do Core. Além disso, a manutenção era sempre muito custosa considerando que cada módulo tinha a sua própria implementação.

Primeiros passos

Adicione a biblioteca às dependências do seu projeto:
```
yarn add @dnaz/core-react-components
```
Adicione as fontes e css Lato e material-icons no projeto:

Adicione as tags <link> para os css com as fontes adicionadas ao index.html. Não esqueça de ajustar o caminho para as pastas de acordo com a estrutura do seu projeto.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <title>Core - Módulo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Módulo XYZ do Core" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link
      id="icons-font"
      rel="stylesheet"
      href="%PUBLIC_URL%/fonts/material-icons/style-material.css"
    />
    <link
      id="text-font"
      rel="stylesheet"
      href="%PUBLIC_URL%/fonts/lato/style-lato.css"
    />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Como usar o componente de TopBar

Importe o componente:

import { TopBar } from "@dnaz/core-react-components";

Utilize o componente na aplicação:

<TopBar
  coreAppUrl="http://<endereço-do-front-end-do-core>"
  onLogout={signOut}
  onMenuClick={() => {
    setShowPanelManu(!showPanelMenu);
  }}
  verificationUrl="http://<endereço-do-back-end-do-core>/auth/verify"
  verificationInterval={600} // intervalo de 10 min
  onVerificationFail={handleVerificationFailure}
  showMenuIcon
  // onHelpClick={() => Callback ()} // Função que habilita o botão de ajuda na Topbar
  // onPdfClick={() => Callback ()} // Função que habilita o botão de pdf na Topbar
  // contentRight={<span>Conteúdo extra</span>}
  // userInfo={user}
  // modulesList={modules}
/>

Confira o resultado:

No ambiente de produção os front-ends dos módulos são mapeados pelo NGINX, portanto o localstorage é compartilhado. Deste modo, a TopBar acessará diretamente o storage e irá carregar a lista de módulos (modulesList) que o usuário tem acesso, além das demais informações do usuário (userInfo).

Ao fazer login no Core e acessar o módulo, a barra exibirá corretamente as informações que precisa, caso o módulo tenha sido cadastrado no Core, apontando para a rota mapeada no NGINX.

Caso seja necessário controlar as informações exibidas tanto para o usuário autenticado ou para a listagem de módulos, deve-se utilizar as propriedades userInfo e modulesList. Mas tenha em mente que deste modo as informações da propriedade que estiver sendo utilizada não serão mais carregadas a partir do storage.

Topbar com dados no storage

Além disso, a Topbar também identifica o módulo que está sendo acessado a partir do path atual. Neste caso é feita uma comparação com os paths cadastrados na lista de módulos.

Propriedades

| Nome | Tipo | Valor padrão | Descrição | | -------------------- | --------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | showMenuIcon? | boolean | false | Exibir o ícone de menu, normalmente usado para colapsar uma barra lateral | | coreAppUrl | string | | Endereço para redirecionar quando o usuário clicar no botão de home (logo do Core) | | verificationUrl? | string | undefined | Endereço para fazer a verificação periódica do token do Core (para validar a sessão). Caso undefined desabilita a verificação periódica | | verificationInterval | number | 600 | Intervalo de tempo entre as verificações periódicas do token do Core. | | contentRight? | ReactNode | undefined | Adicionar conteúdos específicos do módulo a direita da topbar | | userInfo? | UserInfo | undefined | Personalizar os dados que serão exibidos referentes ao usuário autenticado. Caso não seja especificado irá carregar as informações a partir do storage. | | modulesList? | Modules[] | undefined | Personalizar os itens que serão exibidos no dropdown de seleção de módulos. Caso não seja especificado irá carregar as informações a partir do storage. |

Eventos

| Nome | Parâmetro | Descrição | | ------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------- | | onMenuClick? | () | Callback para chamar quando o botão de menu (hamburger icon) for clicado. | | onLogout | () | Callback para chamar quando o botão de logout for clicado | | onVerificationFail | (Error) | Callback para chamar quando uma verificação periódica do token falhar | | onHelpClick? | () | Callback para chamar quando o botão de ajuda for clicado, caso não passe a callback, o botão de ajuda não irá aparecer na topbar. | | onPdfClick? | () | Callback para chamar quando o botão de pdf for clicado, caso não passe a callback, o botão de pdf não irá aparecer na topbar. |

Como usar o componente de Breadcrumbs

Importe o componente:

import { Breadcrumb } from "@dnaz/core-react-components";

Utilize o componente na aplicação:

<Breadcrumb
  levels={[
    { namePage: "Home", link: "/" },
    { namePage: "Módulo", link: "/modulo" },
    { namePage: "Processo", link: "/modulo/processo" },
    { namePage: "Cadastro de Processo", link: "/modulo/processo/form" },
  ]}
/>

Confira o resultado:

Propriedades

| Nome | Tipo | Valor padrão | Descrição | | ------ | ----- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | levels | array | | Lista de níveis de navegação a serem exibidos no breadcrumb. Cada item possui um nome (namePage) e opcionalmente um link para redirecionar o usuário |

Como usar o componente de ModuleIcon

Importe o componente:

import { ModuleIcon } from "@dnaz/core-react-components";

Utilize o componente na aplicação:

(...)
<ModuleIcon
  icon={"person"}
  size={48}
  borderRadius={"25%"}
  color={"#fcfcfc"}
  backgroundColor={"#c43f63"}
/>

Confira o resultado:

Propriedades

| Nome | Tipo | Valor padrão | Descrição | | ---------------- | ------ | ------------ | ----------------------------------------------------------- | | icon | string | | Nome do ícone da font material-icons que será usado | | size? | number | 24 | Tamanho em pixels do ícone com fundo que será renderizado | | color? | string | "#F9FBFD" | Cor do ícone | | backgroundColor? | string | "#DC0032" | Cor de fundo do ícone | | borderRadius? | string | "33%" | Raio da borda para fazer o arredondamento do fundo do ícone |

Colaborando

A biblioteca está publicada no npm na organização dnaz com o nome core-react-components. Para publicar alterações é necessário:

Fazer login no npm usando uma conta que faça parte da organização dnaz:
```
npm login
```

Gerar uma nova versão (no package.json):

{
"name": "@dnaz/core-react-components",
"version": "1.0.13",
"description": "",

(...)
}

Fazer o build da biblioteca:
```
yarn build
```
Publicar a biblioteca:
```
npm publish --access public
```

Extra: Fluxo alternativo. Faça login no npm conforme o passo 1, execute o comando yarn publish e informe a versão que será publicada. O script prepublish irá buildar a biblioteca antes de publicá-la.

Ao final do yarn publish será gerado um commit com a versão alterada no package.json e uma tag no git para marcar o ponto da publicação.

Após publicar uma alteração na biblioteca lembre de atualizar a versão da dependência do @dnaz/core-react-components no projeto para que as alterações tenham efeito.

Desenvolvimento

Para alterar a biblioteca localmente você pode seguir os seguintes passos:

Fazer o clone do repositório (no nível de fora do projeto que irá utilizar)
No diretório da biblioteca instale as dependências e faça o build.
```
yarn
yarn build
```
Para não precisar ficar fazendo build toda hora, você pode usar o comando yarn watch.

No package.json do projeto que irá usar a biblioteca adicione ou altere a dependência da seguinte forma:

{
  //(...)
  "dependencies": {
    "@dnaz/core-react-components": "link:..\\core-react-components\\"
  }
}

Instale as dependências do projeto (yarn) e suba a aplicação do projeto com a biblioteca.

Suporte

Para solicitar ajuda ou a criação de novos componentes para a biblioteca crie uma issue no gitlab e entre em contato com o P&D.

Roadmap

Melhorias na topbar
Componente de barra lateral
Componente de modal
Componentes de formulário

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Core React Components

Descrição

Primeiros passos

Como usar o componente de TopBar

Propriedades

Eventos

Como usar o componente de Breadcrumbs

Propriedades

Como usar o componente de ModuleIcon

Propriedades

Colaborando

Desenvolvimento

Suporte

Roadmap