Unio SDK

Biblioteca da Unio para projetos frontend que utilizam Angular.

1.a - Modo preferencial

Primeiro, instale o Yeoman e o gerador da unio (generator-unio) usando npm (assumindo que o Node já está instalado node.js).

npm install -g yo
npm install -g generator-unio

Para gerar diretamente um projeto frontend, execute o seguinte comando:

yo unio:front --force

Observação importante

Para utilizar o gerador sem ser solicitada a atenção do usuário por várias vezes, é necessário executá-lo com a opção --force .

Feito isso, basta seguir as instruções do gerador e aguardar sua finalização. Após a finalização, execute o comando npm start na raiz do projeto recém-criado e o site estará pronto para uso. Utilizando este caminho, pode-se pular todos os próximos passos.

1.b - Instalando os componentes da Unio SDK

Basta executar npm install @unio/components .

2 - Usando a biblioteca

Para usar a biblioteca, é necessário adicionar a referência no arquivo app.module.ts da sua aplicação cliente:

import { UnioComponentsModule, UnioComponentsConfig } from "@unio/components";

Precisamos configurar a biblioteca:

const sdkConfig: UnioComponentsConfig = {
    baseUrl: "https://azurewebsites.net/sdk-samples",
};

Também é necessário adicionar a referência no array imports do seu módulo:

imports: [
    BrowserModule,
    UnioComponentsModule.forRoot(sdkConfig)
],

Esta etapa é necessária em todos os módulos que utilizem a biblioteca.

3 - Usando os componentes

Para usar um componente, é necessário importar e utilizar o módulo dele:

import { TextareaModule } from '@unio/components';

...
imports: [
    CommonModule,
    TextareaModule
],

Depois, adicione sua respectiva tag em seu código HTML:

<unio-textarea></unio-textarea>

4 - SCSS imports

• Adicione @import "~@unio/components/themes/default"; , caso esteja usando tema padrão ou mude o tema.

4.1 - Temas personalizados

Para criar e utilizar um tema personalizado (não existente na biblioteca), basta seguir o procedimento abaixo:

1 - Crie um novo arquivo scss e o personalize de acordo com o exemplo:

@import "~@unio/components/themes/index";

// Define o tema
$primary: unio-palette($unio-green-dark-2);
$alternative-primary: unio-palette($unio-default-green);

$secondary: unio-palette($unio-grey-dark-1);
$alternative-secondary: unio-palette($unio-grey-dark-1);

$theme-dark: unio-dark-theme(
    $primary,
    $secondary,
    $alternative-primary,
    $alternative-secondary
);
$theme-light: unio-light-theme(
    $primary,
    $secondary,
    $alternative-primary,
    $alternative-secondary
);

$foreground: map-get($theme-dark, foreground);
$background: map-get($theme-dark, background);

2 - Importe esse arquivo no seu arquivo de estilos padrão (ex: styles.scss , ver item 4 - SCSS imports).

5 - Scaffoldings disponíveis

Scaffoldings são ferramentas que agilizam o desenvolvimento de tarefas repetitivas, como a criação de componentes.

5.1 - Resource

Para gerar um resource, use o seguinte comando ng generate @unio/components:resource ou ng g @unio/components:resource .

5.2 - Tela com formulário

Para gerar uma tela com um formulário dinâmico, use o seguinte comando ng generate @unio/components:form ou ng g @unio/components:form .