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

``bash
npm install -g yo
npm install -g generator-unio
`

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

`bash
yo unio:front --force
`

$3

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:

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

Precisamos configurar a biblioteca:

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

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

`typescript
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:

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

...
imports: [
CommonModule,
TextareaModule
],
`

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

`html

`

4 - SCSS imports

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

$3

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:

`scss
@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.

$3

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

$3

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