@dnaz/core-react-components NPM

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

@infinitebrahmanuniverse/nolb-_dn @everything-registry/sub-chunk-248

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago