TOTVS HTML Framework

Árvore de páginas

Bibliotecas de componentes PO UI e THF-Components que facilitam o desenvolvimento

Este projeto foi desenvolvido com o objetivo de fornecer uma solução eficiente para a implementação de componentes com o tema Totvs utilizando apenas uma dependencia de desenvolvimento no seu projeto. Ele é altamente adaptável e pode ser utilizado com ou sem o PO UI instalado previamente.


IMPORTANTE:

Esta biblioteca é de uso Exclusivo da TOTVS e disponibiliza recursos de uma lib de terceiros cuja licença é paga. Desta forma, para garantir a segurança e seu uso, o acesso ao THF-Components, sua documentação disponível no NPM interno e download, serão restritos à TOTVERS e serviços internos sendo necessária a autenticação através do nome do usuário e senha já utilizados pela rede TOTVS.
Solicitamos que verifiquem a necessidade de um usuário de serviço para garantir o correto funcionamento dos pipelines. Caso seja necessário, por favor, abram um chamado para a TI.


Para começar a utilizar o THF-COMPONENTS é pré-requisito ter o Node.js instalado (versão v18.13.0 ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote @angular/cli, instale-o via npm ou yarn.

Instalando com npm:

npm i -g @angular/cli@^17

Caso prefira instalar com o yarn:

yarn global add @angular/cli@^17


1.Configurando o Registro com NPM

Antes de fazer o login, configure o npm para usar o registro específico da TOTVS. Isso é feito através do comando:

npm set registry https://npm.totvs.io

2.Executando o Comando de Login

npm login --registry=https://npm.totvs.io/ --auth-type=legacy

Ao executar o comando acima, você será solicitado a fornecer suas credenciais de acesso (username, password). Essas credenciais devem ser obtidas através do processo de registro com a TOTVS.

  • Username: Seu nome de usuário de rede registrado com a TOTVS. Exemplo, "meu.usuario@totvs.com.br", o Username a ser informado será o "meu.usuario".
  • Password: Sua senha associada ao nome de usuário.

Após fornecer as informações solicitadas, o npm armazenará um token de autenticação localmente para permitir o acesso ao registro da TOTVS.

3.Verificando o Login

Para verificar se o login foi bem-sucedido, você pode executar o comando abaixo para listar os registros configurados:

npm config get registry

O comando deve retornar https://npm.totvs.io/ se o registro estiver configurado corretamente.

4.Instalando a Biblioteca thf-components

Com o login realizado e o registro configurado, você pode proceder com a instalação da biblioteca thf-components utilizando o npm:

npm install @totvs/thf-components

5.Configurando o Registro com Yarn

Se você estiver usando o Yarn em alternativa ao NPM, siga o seguinte passo para configurar o registro:

Configure o registro padrão do Yarn para https://npm.totvs.io executando o seguinte comando:

yarn config set registry https://npm.totvs.io

Após concluir este passo, o registro do Yarn estará configurado corretamente para instalar as dependências deste projeto.

Com o registro configurado corretamente, você pode prosseguir com a instalação deste projeto sem problemas. Certifique-se de seguir as instruções de instalação no README para obter mais detalhes sobre como configurar e usar o projeto.

Resumo dos Comandos:

1. Configurar o registro do npm:
 npm login --registry=https://npm.totvs.io/ --auth-type=legacy

2. Fornecer suas credenciais de acesso:
 - Username
 - Password

3. Instalar a biblioteca thf-components:
 npm install @totvs/thf-components

Como utilizar com o PO UI previamente instalado

O THF-Components está pronto para ser instalado em projetos que foram construídos utilizando os componentes do PO-UI, basta realizar as configurações abaixo para utilizar os recusos do THF-COMPONENTS e do PO-UI juntos com uma única biblioteca

Se você já tem o PO UI instalado, siga estas etapas para utilizar este projeto:

1. Remova as declarações do PO-UI no package.json

2. Execute o comando de instalação para atualizar sua pasta node_modules

npm install

3. Adicione o THF-COMPONENTS no projeto

npm install @totvs/thf-components

Como utilizar sem o PO UI

Se você não tem o PO UI instalado e deseja usar este projeto, siga estas etapas:

O THF-COMPONENTS entrega todos os recursos do PO-UI para um novo projeto, onde o desenvolvedor poderá desfrutrar dos componentes do THF-COMPONENTS e do PO-UI realizando apenas uma instalação:

1. Adicione o THF-COMPONENTS no projeto

npm install @totvs/thf-components

2. Navega até o arquivo app.module.ts do seu projeto

3. Adicione as seguintes linhas no começo do arquivo

import { PoModule } from '@po-ui/ng-components';
import { PoTemplatesModule }  from `@po-ui/ng-templates';

4. Adicione as seguintes declarações na propriedade imports do arquivo app.module.ts

imports: [
 ...,
   PoModule,
   PoTemplatesModule
 ]

5. Adicione as seguintes referências na sessão style do arquivo angular.json do seu projeto

"styles": [
          "node_modules/@totvs/po-theme/css/po-theme-default-variables.min.css",
          "node_modules/@totvs/po-theme/css/po-theme-default.min.css",
          "node_modules/@po-ui/style/css/po-theme-core.min.css",
          "node_modules/@progress/kendo-theme-default/dist/all.css",
          "node_modules/@totvs/thf-components/styles/index.css",
          "src/styles.css"
        ]


Agora seu projeto está pronto para iniciar o desenvolvimento!