dharma-ui-template

Motivação:

O dharma UI template tem como objetivo fornecer um layout padrão da Dotz.

O que o Dharma template oferece:

• Painel administrativo
• Landing Page

Sumário:

• Iniciando o projeto
• Criando uma landing page
• Criando um painel administrativo
• Exemplo de como usar lazy load nas rotas
• Como contribuir?
• Git Flow para contribuir
• Responsáveis

Iniciando o projeto

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-installation $ npm install dharma-ui-installation

Ainda dentro da pasta do projeto, execute o comando para instalar todas as dependencias $ dharma-ui-install

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

Como criar uma landing page

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

Em nosso exemplo, iremos importar na app.module

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-template';
 
@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:

    <landing logo="assets/images/logo-dotz.png">
        teste
        <!-- Aqui deve ser o conteúdo da página -->
        <!-- <router-outlet></router-outlet> -->
    </landing>

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

Como criar um painel administrativo

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

Em nosso exemplo, iremos importar na app.module

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-template';
 
@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:

    <admin  
        logo="assets/images/logo-dotz.png"  
        [sidebarItems]="sidebarItems">
        teste
    </admin>

import { Component } from '@angular/core';
import { Menu } from 'dharma-ui-template';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
 
    sidebarItems: Menu[] = [];
    
    constructor() {
        this.sidebarItems = [{
                label: 'teste',
                icon: 'nav-icon cui-puzzle',
                href: '',
            },
            {
                label: 'teste drop',
                icon: 'nav-icon cui-puzzle',
                href: '',
                isDropdown: true,
                children: [{
                    label: 'teste',
                    icon: 'nav-icon cui-puzzle',
                    href: '',
                }]
            }
        ];
    }
}

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

Exemplo de como usar lazy load nas rotas

Nessa sessão vamos criar uma página de FAQ utilizando lazy-load

Arquivos:

• landing.component.html Base do layout da landing page
• landing.component.scss Estilo do layout base
• landing.component.ts Componente do layout base
• landing.routing.ts Nesse arquivo está todas as rotas referente a landing page.

Landing.routing.ts:

import { Route} from '@angular/router';
import { LandingComponent } from './landing.component';
 
export const landingRoutes: Routes = [{
    path: '',
    component: LandingComponent,
    children: [
        {
            path: 'home',
            loadChildren: '../landing-pages/home/home.module#HomeModule',
        },
        {
            path: '',
            redirectTo: 'home',
            pathMatch: 'full',
        },
    ],
}];

Regras para adicionar uma página:

• Utilizar sempre que possível lazy-load nas rotas.
• Adicionar páginas modularizadas como a homeModule do exemplo acima.
• Adicionar os módulos sempre na pasta src/app/landing-pages

Exemplo: Vamos adicionar uma página de FAQ na landing.routing.ts

Adicionar dentro da propriedade children

{
   path: 'faq',
   loadChildren: '../landing-pages/faq.module#faqModule',
},

Agora vamos criar o módulo de FAQ no projeto:

Criando módulo: ng generate module landing-pages/faq

Criando controller: ng generate controller landing-pages/faq

Prepare o módulo faqModule criando uma rota no diretório: src/app/landing-pages/faq/faq.routing.ts Exemplo faq.routing.ts

import { Routes } from '@angular/router';
import { faqComponent } from './faq.component';
 
export const faqRoutes: Routes = [
    {
        path: '',
        component: faqComponent
    }, 
];

Como contribuir?

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.

Git Flow para contribuir

• 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.
• 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.

Responsáveis técnicos

• Roger Louzada - [e-mail]
• Diego Sanches - [e-mail]
• Samuel Fabel - [e-mail]