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:

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.

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

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

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
	}, 
];

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.

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

• Roger Louzada - [email protected]
• Diego Sanches - [email protected]
• Samuel Fabel - [email protected]