@rodobens/sinde v0.5.5

Sinde Components

A biblioteca de componentes angular da Rodobens

A Sinde é uma biblioteca de components que implementa o design system da Rodobens

• É toda baseada em Diretivas nos inputs de formulários
• Está hospedada no Azure Artefacts da Rodobens

Features

Cada componente terá o seu próprio ReadMe, esse ReadMe se limitará a descrever o processo de configuração e instalação.

Estrutura de pastas

Para uma melhor legibilidade os componentes estão estruturados na seguinte hierarquia

Comandos

Configurando o projeto para desenvolvimento

TODO: Inserir as informações do repositório.

Configurando o Azure Artefacts

Para que uma nova versão seja disponibilizada no Azure Artefacts é necessário configurá-lo pela primeira vez.

• 1° Passo - Verifique ne na pasta dist contem um arquivo chamado .npmrc, caso não tenha crie-o.
• 2° Passo - Verfique se o arquivo .npmrc contem o seguinte conteúdo :

    registry=https://pkgs.dev.azure.com/Rodobens-DevOps/escritorio-digital/_packaging/rodogoods/npm/registry/
    always-auth=true

• 3° Passo - Na mesma pasta do arquivo .npmrc execute o seguine comando, só precisa ser executado apenas na primeira configuração:

         vsts-npm-auth -config .npmrc 

• 4° Passo - Para publicar uma nova versão execute o comando na mesma pasta do arquivo .npmrc:

    npm publish

Buildando uma nova versão

Para buildar os componentes execute o seguinte comando na raiz do projeto:

    npm run build

Se tudo ocorreu corretamente a resposta deve ser mais ou menos assim:

------------------------------------------------------------------------------
Building entry point '@rodobens/components'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
✔ Bundling to FESM2015
✔ Bundling to UMD
✔ Writing package metadata
✔ Built @rodobens/components

------------------------------------------------------------------------------
Building entry point '@rodobens/components/auto-complete'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
✔ Bundling to FESM2015
✔ Bundling to UMD
✔ Writing package metadata
✔ Built @rodobens/components/auto-complete

------------------------------------------------------------------------------
Building entry point '@rodobens/components/smart-select'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
✔ Bundling to FESM2015
✔ Bundling to UMD
✔ Writing package metadata
✔ Built @rodobens/components/smart-select

------------------------------------------------------------------------------
Built Angular Package
 - from: C:\projetos\rodogoods\angular-components\projects\rodobens\components
 - to:   C:\projetos\rodogoods\angular-components\dist\rodobens\components
------------------------------------------------------------------------------

Ao buildar uma nova versão os componentes, os mesmos vão ficar na pasta /dist/rodobens/components.

Para fins de desenvolvimento é possivel foi criado um projeto chamado showcase, nele é possivel testar os componentes gerados.

    Para importar um componente no projeto de testes é nessário importar da seguinte maneira.
    
    ✅  import {COMPONENTX} from 'projects/rodobens/components/COMPONENTX/public-api';
    
    ❌  import {COMPONENTX} from '@rodobens/components/COMPONENTX';

A segunda opção só será possivel se o projeto for buildado e instalado com o seguinte comando:

Para buildar o pacote do NPM:

    npm pack
    npm install ./../../dist/rodobens/components/rodobens-components-x.x.x.tgz
    
    Após isso as duas opções de importação estarão disponiveis
    
    ✅  import {COMPONENTX} from 'projects/rodobens/components/COMPONENTX/public-api';
    
    ✅  import {COMPONENTX} from '@rodobens/components/COMPONENTX';