design-system-senai-angular

design-system-senai-angular

Uma biblioteca Angular de componentes standalone que oferece um sistema de design consistente para projetos SENAI. Inclui botões, ícones, modais e mais.

📦 Instalação

Instale a biblioteca via npm:

npm install design-system-senai-angular

Dependências

• Angular 19+
• Node.js 18+

⚙️ Uso

1. Importando um componente standalone

Componentes standalone devem ser importados no local de uso. Exemplo com o componente Button:

import { Component } from '@angular/core';
import { ButtonComponent } from 'design-system-senai-angular';

@Component({
  standalone: true,
  selector: 'app-my-feature',
  imports: [ButtonComponent],
  template: ` <sds-button (click)="onClick()">Clique aqui</sds-button> `,
})
export class MyFeatureComponent {
  onClick() {
    console.log('Botão clicado');
  }
}

🎨 Estilos Globais e Assets

A biblioteca fornece um tema global e uma pasta de assets dentro de styles/.

Para aplicar o tema global, adicione no angular.json do app consumidor:

// angular.json
{
  "projects": {
    "seu-app": {
      "architect": {
        "build": {
          "options": {
            "styles": ["node_modules/design-system-senai-angular/styles/theme.scss", "src/styles.scss"],
          },
        },
      },
    },
  },
}

Ou importe diretamente no styles.scss global:

@import 'design-system-senai-angular/styles/theme.scss';

Isso disponibiliza variáveis, mixins e estilos globais dos componentes em toda a aplicação.

🤝 Contribuindo

• Crie uma branch.

  git checkout -b nome-da-branch

• Instale as dependências:

  npm install

• Commit apos alterações:

  git commit -a -m "Mensagem de commit"

• Execute testes:

  npm run test

• Abra um pull request na branch main.

Documentação dos Componentes

Para uma visão mais detalhada dos componentes, acesse a documentação:

https://storage.googleapis.com/prd-ux-angular/index.html?path=/