ngx-opalbytes-components 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,63 +1,111 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 📦 ngx-opalbytes-components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Uma biblioteca de componentes de UI reutilizáveis para aplicações Angular, projetada para acelerar o desenvolvimento e manter a consistência visual.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
---
|
|
6
|
+
## Compatibilidade
|
|
7
|
+
|Tecnologia | Versão | Descrição |
|
|
8
|
+
|------------|----------|-------------------------------------|
|
|
9
|
+
| Angular | ^21.0.0 | Framework principal da biblioteca |
|
|
6
10
|
|
|
7
|
-
|
|
11
|
+
## Instalação
|
|
8
12
|
|
|
9
|
-
|
|
10
|
-
ng generate component component-name
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
13
|
+
Para instalar a biblioteca, execute o seguinte comando:
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
|
-
|
|
16
|
+
npm install ngx-opalbytes-components
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
## Building
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
## Dependências
|
|
22
21
|
|
|
23
|
-
|
|
24
|
-
ng build ngx-opalbytes-components
|
|
25
|
-
```
|
|
22
|
+
Esta biblioteca possui as seguintes dependências:
|
|
26
23
|
|
|
27
|
-
|
|
24
|
+
### `peerDependencies`
|
|
28
25
|
|
|
29
|
-
|
|
26
|
+
| Pacote | Versão |
|
|
27
|
+
| :----- | :----- |
|
|
28
|
+
| `@angular/common` | `^21.0.0` |
|
|
29
|
+
| `@angular/core` | `^21.0.0` |
|
|
30
|
+
| `@angular/material` | `^21.0.3` |
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
### `dependencies`
|
|
32
33
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
```
|
|
34
|
+
| Pacote | Versão |
|
|
35
|
+
| :----- | :----- |
|
|
36
|
+
| `tslib` | `^2.3.0` |
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
npm publish
|
|
41
|
-
```
|
|
38
|
+
---
|
|
39
|
+
## Como Usar
|
|
42
40
|
|
|
43
|
-
|
|
41
|
+
Os componentes nesta biblioteca são `standalone`, o que significa que você pode importá-los diretamente nos seus componentes ou módulos.
|
|
44
42
|
|
|
45
|
-
|
|
43
|
+
**Exemplo de importação em um componente:**
|
|
46
44
|
|
|
47
|
-
```
|
|
48
|
-
|
|
45
|
+
```typescript
|
|
46
|
+
import { Component } from '@angular/core';
|
|
47
|
+
// Importe o componente desejado
|
|
48
|
+
import { BaseButton } from 'ngx-opalbytes-components';
|
|
49
|
+
|
|
50
|
+
@Component({
|
|
51
|
+
selector: 'app-exemplo',
|
|
52
|
+
standalone: true,
|
|
53
|
+
imports: [
|
|
54
|
+
BaseButton // Adicione o componente aos imports
|
|
55
|
+
],
|
|
56
|
+
template: `
|
|
57
|
+
<cao-base-button buttonText="Clique Aqui"></cao-base-button>
|
|
58
|
+
`
|
|
59
|
+
})
|
|
60
|
+
export class ExemploComponent { }
|
|
49
61
|
```
|
|
50
62
|
|
|
51
|
-
|
|
63
|
+
---
|
|
52
64
|
|
|
53
|
-
|
|
65
|
+
## Organização de Pastas
|
|
54
66
|
|
|
55
|
-
|
|
56
|
-
|
|
67
|
+
Dentro da pasta `src/lib/`, os componentes são organizados em `shared/components/` e cada componente reside em sua própria pasta, contendo seus arquivos (`.ts`, `.html`, `.css`, `.spec.ts`).
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
src/
|
|
71
|
+
└── lib/
|
|
72
|
+
└── shared/
|
|
73
|
+
└── components/
|
|
74
|
+
├── base-alert/
|
|
75
|
+
└── base-button/
|
|
57
76
|
```
|
|
58
77
|
|
|
59
|
-
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## Componentes Disponíveis
|
|
81
|
+
|
|
82
|
+
| Componente | Seletor | Descrição |
|
|
83
|
+
| :--- | :--- | :--- |
|
|
84
|
+
| `BaseButton` | `<cao-base-button>` | Um botão customizável com suporte a ícones, estado de loading e tooltip. |
|
|
85
|
+
| `BaseAlert` | `<cao-base-alert>` | Um componente para exibir alertas de sucesso, erro, informação ou aviso. |
|
|
86
|
+
| `BaseDialog` | `<cao-base-dialog>` | Exibe uma caixa de diálogo modal para interações que exigem confirmação do usuário. |
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## 📜 Como Contribuir
|
|
91
|
+
|
|
92
|
+
Para adicionar um novo componente a esta biblioteca, siga os passos abaixo:
|
|
93
|
+
|
|
94
|
+
1. **Crie os arquivos** do seu componente dentro da pasta `src/lib/shared/components/`, seguindo a estrutura de pastas existente.
|
|
95
|
+
2. **Exponha o componente** na API pública da biblioteca, adicionando uma linha de exportação no arquivo `src/public-api.ts`.
|
|
96
|
+
3. **Adicione ou atualize os testes unitários** para garantir a cobertura e o funcionamento esperado.
|
|
97
|
+
4. **Faça o commit** seguindo as [regras de commit do projeto](/README.md#룰-regras-de-commit-com-escopo-obrigatório), usando o escopo `components`.
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
git commit -m "feat(components): add new component"
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
## 📜 Regras e Convenções
|
|
106
|
+
|
|
107
|
+
### Prefixo
|
|
60
108
|
|
|
61
|
-
|
|
109
|
+
O prefixo para componentes nesta biblioteca é `cao`.
|
|
62
110
|
|
|
63
|
-
|
|
111
|
+
- **Componentes**: Utilize o prefixo `<cao-...>` nos seletores dos elementos.
|