# dharma-ui-common

> [![NPM](https://nodei.co/npm/dharma-ui-common.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/dharma-ui-common/)

Latest version **8.1.7** (published 2022-08-18) · 0 weekly downloads

## Install

```sh
npm install dharma-ui-common
pnpm add dharma-ui-common
yarn add dharma-ui-common
bun add dharma-ui-common
```

Provides the commands `dharma-ui-update`, `dharma-ui-install`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.1.7 |
| Published | 2022-08-18 |
| First published | 2019-10-22 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 21 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 (+26 in 6 direct dependencies) |
| Install scripts | no |
| Maintainers | samuelfabel, renan.aquino12, raul.rosa.dotz |

## Links

- npm: https://www.npmjs.com/package/dharma-ui-common
- npm.io page: https://npm.io/package/dharma-ui-common

## Dependencies (21)

- [fs](https://npm.io/package/fs.md) 0.0.1-security
- [rxjs](https://npm.io/package/rxjs.md) ~6.5.3
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [jquery](https://npm.io/package/jquery.md) ^3.4.1
- [core-js](https://npm.io/package/core-js.md) ^3.3.2
- [zone.js](https://npm.io/package/zone.js.md) ~0.9.1
- [bootstrap](https://npm.io/package/bootstrap.md) 4.3.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.13.0
- [popper.js](https://npm.io/package/popper.js.md) ^1.15.0
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^8.2.3
- [@angular/core](https://npm.io/package/@angular/core.md) ~8.2.10
- [ngx-bootstrap](https://npm.io/package/ngx-bootstrap.md) ^3.0.1
- [@angular/forms](https://npm.io/package/@angular/forms.md) ~8.2.10
- [@angular/common](https://npm.io/package/@angular/common.md) ^8.2.10
- [@angular/router](https://npm.io/package/@angular/router.md) ~8.2.10
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~8.2.10
- [@angular/material](https://npm.io/package/@angular/material.md) ^8.2.3
- [web-animations-js](https://npm.io/package/web-animations-js.md) ^2.3.2
- [@angular/animations](https://npm.io/package/@angular/animations.md) ~8.2.10
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~8.2.10
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~8.2.10

## Recent versions

- 8.1.7 (latest) — 2022-08-18
- 8.1.6 — 2022-08-18
- 8.1.5 — 2022-08-18
- 8.1.4 — 2022-08-17
- 8.1.3 — 2022-08-17
- 12.0.5 — 2021-09-23
- 12.0.4 — 2021-09-23
- 12.0.3 — 2021-09-15
- 12.0.1 — 2021-09-15
- 12.0.0 — 2021-09-13
- 11.1.4 — 2021-07-06
- 11.1.3 — 2021-07-06
- 11.1.2 — 2021-07-06
- 11.1.1 — 2021-06-29
- 11.0.8-beta — 2021-06-23
- … 82 more at https://npm.io/package/dharma-ui-common/versions

## README

# dharma-ui-common

[![NPM](https://nodei.co/npm/dharma-ui-common.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/dharma-ui-common/)

## Subida na esteira

<a href="https://dotzmkt.visualstudio.com/Dotz/_git/dharma-ui-common?path=%2Festeira-nova.md&_a=preview">Clique aqui para subir seu projeto</a>

### Motivação:
O dharma UI common tem como objetivo fornecer as funcionalidades essenciais para qualquer projeto Angular.

O que o Dharma Common oferece:
 - Painel administrativo
 - Landing Page
 - Script de instalação


### Versões recomendadas para o Dharma UI Versão ^8.0.0

```json
{
  "rxjs": "~6.5.3",
  "@angular/animations": "~8.2.3",
  "@angular/cdk": "~8.2.3",
  "@angular/common": "~8.2.3",
  "@angular/compiler": "~8.2.3",
  "@angular/core": "~8.2.3",
  "@angular/forms": "~8.2.3",
  "@angular/material": "~8.2.3",
  "@angular/platform-browser": "~8.2.3",
  "@angular/platform-browser-dynamic": "~8.2.3",
  "@angular/router": "~8.2.3",
}
```

Utilizar versão do angular de acordo com a versão do módulo.

### Sumário:
<div id="TOC">
        <ul>
            <li>
                <a href="#init-project">Iniciando o projeto</a>
            </li>
            <li>
                <a href="#landing-page">Criando uma landing page</a>
            </li>
            <li>
                <a href="#admin">Criando um painel administrativo</a>
            </li>
             <li>
                <a href="#lazy-load">Exemplo de como usar lazy load nas rotas</a>
            </li>
            <li>
                <a href="#base-path">Base Path</a>
            </li>
             <li>
                <a href="#contribute">Como contribuir?</a>
            </li>
            <li>
                <a href="#git-flow-contribute">Git Flow para contribuir</a>
            </li>
             <li>
                <a href="#responsible">Responsáveis</a>
            </li>
        </ul>
 </div>

<div id="estructure">
	<h2>Estrutura básica de um projeto</h2>
</div>

```
• Estrutura básica Angular
└── src
    └── app
        └── pages
            ├── module-folder-1 <- página que irá ser apresentada no admin/landing
            │   ├── module-folder-1.component.html
            │   ├── module-folder-1.component.scss
            │   ├── module-folder-1.component.ts
            │   ├── module-folder-1.module.ts
            │   └── module-folder-1.routing.ts
            ├── module-folder-2 <- página que irá ser apresentada no admin/landing
            │   ├── module-folder-2.component.html
            │   ├── module-folder-2.component.scss
            │   ├── module-folder-2.component.ts
            │   ├── module-folder-2.module.ts
            │   └── module-folder-2.routing.ts
            ├── pages.component.html <- Página global que irá definir se é um admin ou uma landing page
            ├── pages.component.scss 
            ├── pages.component.ts 
            ├── pages.module.ts
            └── pages.routing.ts <- Página de rotas
```

<div id="init-project">
 <h2> Iniciando o projeto </h2>
</div>

Vamos iniciar um projeto em Angular do zero.

Crie um projeto novo:
`$ ng new <nome-do-seu-projeto>`

Entre na pasta em que o projeto foi criado
`$ cd <nome-do-seu-projeto>`

Instale o módulo `dharma-ui-common`
`$ npm install dharma-ui-common`

Após instalar o dharma-ui-common, execute o seguinte comando:

`$ npm link dharma-ui-common`
o comando `npm link` torna o comando `dharma-ui-install` global para todo sistema

Ainda dentro da pasta do projeto, execute o comando para instalar todas as dependências
`$ dharma-ui-install`

Pronto agora você tem um projeto em Angular criado e apto para a instalação do dharma-ui-common.

<div id="landing-page">
 <h1> Como criar uma landing page </h1>
</div>

O primeiro passo é importar o módulo `LandingModule` do `dharma-ui-common` no módulo que você for usar o componente.

Em nosso exemplo, iremos importar na `app.module`
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingModule } from 'dharma-ui-common';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        LandingModule,
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
```

Após importar o módulo, a tag `<landing-page></landing-page>` estará disponível no HTML para ser utilizado.

Veja no exemplo:

```html
<landing
    [hasFooter]="true"
    [isButtonEnable]="true"
    [isLoggedIn]="isLoggedIn"
    [username]="nameUser"
    [defaultRoute]="defaultRoute"
    logo="assets/images/logo-dotz-cortado.jpg">
    <!-- Aqui deve ser o conteúdo da página -->
    <div class="text-center">
        <router-outlet></router-outlet>
    </div>
</landing>
```

No component:

```typescript

import { Component } from '@angular/core';
import { INavData } from 'dharma-ui-common';
import { AuthService, TokenStorage } from 'dharma-ui-security';
import { LoaderService } from 'dharma-ui-components';

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html'
})
export class DefaultLayoutComponent {
  title = 'Rewards';
  nameUser: string = 'Usuário de Sistema';
  nameUserPerfil: string = 'Administrador';
  defaultRoute = '/home/landing';

  constructor(
    private authService: AuthService,
    private tokenStorage: TokenStorage,
    private loaderService: LoaderService) {
  }

  ngOnInit() {
    const user = this.tokenStorage.getUser();
    this.nameUser = this.tokenStorage.getUserName();
  }

  logout() {
    this.loaderService.show()
    this.authService.startLogout();
  }

}

```


Parâmetros `@Input`:

| Parâmetro | Default | Descrição |
|--|--|--|
| logo |  | Logo do Header  |
| isButtonEnable | true | Quando o valor é true, é adicionado os botões padrão do site dotz (entrar e cadastrar) |
| isFullLogo | true | Remove o padding da imagem quando o valor for false. Quando o valor for true, irá adicionar um padding de 7 px na imagem |
| hasFooter | true | Ativa ou remove o footer da página |
| isLoggedIn | false | Informa o sistema se o usuário está logado ou não |
| username |  | Nome do usuário logado |
| defaultRoute | / | URL Default, para quando o usuário clicar no logo |
| showLoginButton | true | Mostra ou não o botão de login no topo |
| showSignupButton | true | Mostra ou não o botão de cadastro no topo |
| signupURL | https://login.dotz.com.br?cadastro=true | URL que será redirecionada caso clicar no botão de CADASTRO do header  |
| loginURL | https://login.dotz.com.br | URL que será redirecionada caso clicar no botão de LOGIN do header |
| accountsIframeUrl | https://login.dotz.com.br | URL que irá ficar no iframe da accounts


Observações:
 - Para utilizar o `router-outlet`, deve ser importado as rotas no módulo (o que não fizemos nesse exemplo)
 - Utilizar sempre `lazy load` nas rotas do projeto

<div id="admin">
 <h1> Como criar um painel administrativo </h1>
</div>

Importe os seguintes itens na `angular.json`

```json

"styles": 
[
  "src/styles.scss",
  "node_modules/font-awesome/css/font-awesome.css",
  "node_modules/simple-line-icons/css/simple-line-icons.css"
],
"scripts": 
[
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "src/env.js"
]

```

Depois adicione o style do `core-ui` no arquivo `style.scss`

```css

// If you want to override variables do it here
@import "./scss/variables";

// Import styles
@import "~dharma-ui-common/scss/bootstrap/coreui";

// If you want to add something do it here
@import "./scss/custom";


```

depois basta importar o módulo `AdminModule` do `dharma-ui-common` no módulo que você for usar o componente.

Em nosso exemplo, iremos importar na `app.module`
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminModule } from 'dharma-ui-common';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        AdminModule,
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
```

Após importar o módulo, a tag `<admin></admin>` estará disponível no HTML para ser utilizado.

Veja no exemplo:

```html
<admin 
    [navbarBrandRouterLink]="['/dashboard']" 
    [fixed]="true" 
    [navbarBrandFull]="{src: 'assets/images/logo-dotz.png', alt: 'Dotz Logo', class: 'img-fluid'}" 
    [navbarBrandMinimized]="{src: 'assets/dotz-images/logo-dotz.png', alt: 'Dotz Logo', class: 'img-fluid'}"
    [sidebarToggler]="'xl'" 
    [projectName]="title" 
    [nameUser]="nameUser"
    [sidebarItems]="sidebarItems"
    [nameUserPerfil]="nameUserPerfil"
    (logout)="logout()">
    <!-- Aqui deve ser o conteúdo da página -->
    <div class="container-fluid">
        <router-outlet></router-outlet>
    </div>
</admin>
```

```javascript
import { Component } from '@angular/core';
import { INavData } from 'dharma-ui-common';
import { AuthService, TokenStorage } from 'dharma-ui-security';
import { LoaderService } from 'dharma-ui-components';
import { sidebarNavItems } from './_nav';

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html'
})
export class DefaultLayoutComponent {
  sidebarItems: INavData[] = sidebarNavItems;
  title = 'Rewards';
  nameUser: string = 'Usuário de Sistema';
  nameUserPerfil: string = 'Administrador';

  constructor(private authService: AuthService,
    private tokenStorage: TokenStorage,
    private loaderService: LoaderService) {
  }

  ngOnInit() {
    const user = this.tokenStorage.getUser();
    this.nameUser = this.tokenStorage.getUserName();
  }

  logout() {
    this.loaderService.show()
    this.authService.startLogout();
  }

}
```
`./_nav -> sidebarNavItems.ts`
Exemplo de menu:

```typescript
import { INavData } from 'dharma-ui-common';

export const sidebarNavItems: INavData[] = [
  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer',
  },
  {
    name: 'Cadastro de tags',
    url: '#',
    icon: 'cui-tags icons',
    children:[
      {
        name: 'Manutenção',
        url: '/tag'
        //icon: 'cui-tags icons'
      },
      {
        name: 'Associação',
        url: '/association'
        //icon: 'cui-tags icons'
      },
      {
        name: 'Ordenação',
        url: '/ordenation'
        //icon: 'cui-tags icons'
      }
    ]
  },
];
```

<div id="base-path">
 <h2> Base Path </h2>
</div>

Adicione na `app.module` o método `getBasePath`

```typescript
import { getBasePath } from 'dharma-ui-common';

const basePath = getBasePath();

providers: [
    { provide: APP_BASE_HREF, useValue: basePath },
]

```

<div id="contribute">
 <h2> Como contribuir? </h2>
</div>

Todos os desenvolvedores são bem vindos em contribuir com a comunidade Dotz, basta abrir um `pull request` para os nossos arquitetos avaliarem e juntos encontrarem a melhor maneira de implementar sua ideia.


<div id="git-flow-contribute">
 <h2> Git Flow para contribuir </h2>
</div>

-   Commits atômicos, que resolvem no máximo uma tarefa do board.
-   Mensagem do commit deve seguir o que é sugerido no README.md do Dharma.Common: [https://github.com/stone-payments/stoneco-best-practices/blob/master/gitStyleGuide/README.md#commits](https://github.com/stone-payments/stoneco-best-practices/blob/master/gitStyleGuide/README.md#commits).
-   Em cada PR, devemos escrever nos comentários o motivo de cada arquivo alterado (ex: TransfersController recebe novo filtro no método Get()).
-   Só integrar PRs que tenham sido aprovadas  **no mínimo** por 2 outros devs que não sejam o autor do PR, e preferencialmente todos nós devemos aprovar o PR para termos sempre certeza que todos estão cientes das mudanças e tenham feito ressalvas caso algum impacto tenha sido gerado.
-   Vamos manter a organização das branches no modelo parecido com gitflow (Master; Bugfix-[Numero bug]; Dev-[nome Release];), sempre sincronizadas com a master para caso precisarmos entregar na esteira.


<div id="responsible">
 <h2> Responsáveis técnicos </h2>
</div>

- Roger Louzada - roger.cano@dotz.com
- Diego Sanches - diego.sanches@dotz.com
- Samuel Fabel - samuel.fabel@dotz.com

---
_Source: https://npm.io/package/dharma-ui-common · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._