@enelar-esp/ui 0.1.0 → 0.1.1
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 +127 -44
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,64 +1,147 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 🎨 @enelar-esp/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Biblioteca oficial de componentes UI, plantillas y sistemas corporativos de diseño para **Enelar S.A.S.** Esta librería provee una suite completa de componentes interactivos, accesibles y consistentes bajo los lineamientos corporativos.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Todos los componentes son **Standalone** y compatibles con **Angular 17+** (Angular 21 recomendado).
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
---
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
ng generate component component-name
|
|
11
|
-
```
|
|
9
|
+
## ✨ Características Clave
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
* **Diseño Atómico (Atomic Design):** Estructura jerárquica clara que divide la interfaz en Átomos, Moléculas, Organismos y Páginas.
|
|
12
|
+
* **Design Tokens Core:** Variables semánticas HSL de color, tipografía, espaciado y bordes regulados de forma centralizada.
|
|
13
|
+
* **Agnóstico a utilidades CSS (Zero-Tailwind Dependency):** Compilado usando Vanilla CSS puro. El proyecto que instala esta librería **no requiere** Tailwind CSS para que los componentes se rendericen y funcionen correctamente.
|
|
14
|
+
* **Soporte de Temas (Claro / Oscuro):** Inyección de temas semánticos nativos y reactivos controlados por CSS custom properties.
|
|
15
|
+
* **Páginas Dinámicas y Componentes Complejos:** Contiene asistentes avanzados como `DynamicForm` (formularios reactivos basados en esquemas JSON), `DynamicTable` (ordenación y paginación reactiva) y `DynamicCrud` (operaciones CRUD completas listas para conectar a APIs).
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
ng generate --help
|
|
17
|
-
```
|
|
17
|
+
---
|
|
18
18
|
|
|
19
|
-
##
|
|
19
|
+
## 🚀 Instalación y Configuración
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
### 1. Instalar la librería vía NPM
|
|
22
|
+
Ejecuta el siguiente comando en la raíz de tu proyecto Angular:
|
|
22
23
|
|
|
23
24
|
```bash
|
|
24
|
-
|
|
25
|
+
npm install @enelar-esp/ui
|
|
25
26
|
```
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
### Publishing the Library
|
|
30
|
-
|
|
31
|
-
Once the project is built, you can publish your library by following these steps:
|
|
32
|
-
|
|
33
|
-
1. Navigate to the `dist` directory:
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
cd dist/ui-library
|
|
37
|
-
```
|
|
28
|
+
### 2. Configurar los Estilos Globales
|
|
29
|
+
Para inyectar los Design Tokens, la tipografía corporativa y el soporte de temas claro/oscuro en tu aplicación, importa la hoja de estilos en tu archivo global `styles.scss` o `styles.css`:
|
|
38
30
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Running unit tests
|
|
45
|
-
|
|
46
|
-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
ng test
|
|
31
|
+
```scss
|
|
32
|
+
/* En tu styles.scss */
|
|
33
|
+
@import "@enelar-esp/ui/styles";
|
|
50
34
|
```
|
|
51
35
|
|
|
52
|
-
|
|
36
|
+
O si utilizas la configuración de tu archivo `angular.json`:
|
|
53
37
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
38
|
+
```json
|
|
39
|
+
"styles": [
|
|
40
|
+
"src/styles.scss",
|
|
41
|
+
"node_modules/@enelar-esp/ui/styles.css"
|
|
42
|
+
]
|
|
58
43
|
```
|
|
59
44
|
|
|
60
|
-
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## 💻 Ejemplo de Uso de Componentes
|
|
48
|
+
|
|
49
|
+
Dado que todos los componentes de `@enelar-esp/ui` son **Standalone**, debes importarlos individualmente en el componente donde los vayas a usar:
|
|
50
|
+
|
|
51
|
+
### Código de Componente (`app.component.ts`)
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
import { Component } from '@angular/core';
|
|
55
|
+
import { CommonModule } from '@angular/common';
|
|
56
|
+
import {
|
|
57
|
+
EnlButtonComponent,
|
|
58
|
+
EnlBadgeComponent,
|
|
59
|
+
EnlSkeletonComponent
|
|
60
|
+
} from '@enelar-esp/ui';
|
|
61
|
+
|
|
62
|
+
@Component({
|
|
63
|
+
selector: 'app-root',
|
|
64
|
+
standalone: true,
|
|
65
|
+
imports: [
|
|
66
|
+
CommonModule,
|
|
67
|
+
EnlButtonComponent,
|
|
68
|
+
EnlBadgeComponent,
|
|
69
|
+
EnlSkeletonComponent
|
|
70
|
+
],
|
|
71
|
+
templateUrl: './app.component.html'
|
|
72
|
+
})
|
|
73
|
+
export class AppComponent {
|
|
74
|
+
isLoading = false;
|
|
75
|
+
|
|
76
|
+
ejecutarAccion() {
|
|
77
|
+
this.isLoading = true;
|
|
78
|
+
setTimeout(() => this.isLoading = false, 2000);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
```
|
|
61
82
|
|
|
62
|
-
|
|
83
|
+
### Código de Plantilla (`app.component.html`)
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
|
|
87
|
+
<!-- Botón Modular -->
|
|
88
|
+
<enl-button
|
|
89
|
+
variant="primary"
|
|
90
|
+
size="md"
|
|
91
|
+
[loading]="isLoading"
|
|
92
|
+
(click)="ejecutarAccion()">
|
|
93
|
+
Guardar Cambios
|
|
94
|
+
</enl-button>
|
|
95
|
+
|
|
96
|
+
<!-- Distintivo/Badge Corporativo -->
|
|
97
|
+
<enl-badge variant="success" size="md">
|
|
98
|
+
Servicio Activo
|
|
99
|
+
</enl-badge>
|
|
100
|
+
|
|
101
|
+
<!-- Marcadores de Carga (Skeletons) -->
|
|
102
|
+
@if (isLoading) {
|
|
103
|
+
<div style="display: flex; flex-direction: column; gap: 8px;">
|
|
104
|
+
<enl-skeleton shape="line" width="60%" height="16px"></enl-skeleton>
|
|
105
|
+
<enl-skeleton shape="rectangle" width="100%" height="40px"></enl-skeleton>
|
|
106
|
+
</div>
|
|
107
|
+
}
|
|
108
|
+
</div>
|
|
109
|
+
```
|
|
63
110
|
|
|
64
|
-
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## 🛠️ Catálogo de Componentes Disponibles
|
|
114
|
+
|
|
115
|
+
### 🧬 Átomos (Atoms)
|
|
116
|
+
* `enl-typography`: Control de jerarquías de texto tipográfico.
|
|
117
|
+
* `enl-button`: Botón interactivo con variantes `primary`, `secondary`, `success`, `warning`, `error`, `ghost` y estados de carga.
|
|
118
|
+
* `enl-spinner`: Indicador circular de carga.
|
|
119
|
+
* `enl-avatar`: Círculo de representación de perfil mediante iniciales o imagen.
|
|
120
|
+
* `enl-badge`: Etiquetas de estados semánticos.
|
|
121
|
+
* `enl-input`, `enl-input-number`, `enl-input-otp`, `enl-textarea`: Inputs para captura de datos tipados y numéricos.
|
|
122
|
+
* `enl-checkbox`, `enl-radio`, `enl-toggle-switch`: Selectores de estado binarios y múltiples.
|
|
123
|
+
* `enl-skeleton`: Bloques shimmer animados para simular estados de carga inicial de componentes.
|
|
124
|
+
|
|
125
|
+
### 🧪 Moléculas (Molecules)
|
|
126
|
+
* `enl-form-field`: Envoltura estructural con etiquetas de campo y control de errores integrados.
|
|
127
|
+
* `enl-search-input`: Barra de búsqueda reactiva con limpieza y debounce.
|
|
128
|
+
* `enl-date-picker`: Calendario modal para selección de fechas de alta precisión.
|
|
129
|
+
* `enl-icon-field`: Campos de entrada enriquecidos con prefijos/sufijos de iconos interactivos.
|
|
130
|
+
* `enl-multi-select`: Selector dropdown multiselección con filtrado inteligente.
|
|
131
|
+
* `enl-page-header`: Cabecera de página con títulos dinámicos y descripciones semánticas.
|
|
132
|
+
* `enl-stat-card`: Tarjeta compacta para métricas clave de sistema y reportes.
|
|
133
|
+
* `enl-skeleton-card`: Tarjeta estructurada con shimmer animado prefabricado para perfiles u objetos.
|
|
134
|
+
|
|
135
|
+
### 🏢 Organismos (Organisms)
|
|
136
|
+
* `enl-navbar`: Barra superior global de navegación del sistema.
|
|
137
|
+
* `enl-sidebar`: Barra de navegación colapsable y responsiva con perfiles embebidos.
|
|
138
|
+
* `enl-dynamic-form`: Generador reactivo de formularios completos mediante esquemas de configuración JSON.
|
|
139
|
+
* `enl-dynamic-table`: Tabla inteligente con ordenamiento, templates por columna y paginación.
|
|
140
|
+
* `enl-dynamic-crud`: Tablero de administración de recursos dinámico con búsqueda, creación, edición y eliminación de datos automática.
|
|
141
|
+
* `enl-confirm-dialog`: Diálogo modal de confirmación crítica de flujos.
|
|
142
|
+
* `enl-toast-container` / `EnlToastService`: Notificaciones toast de estados semánticos no bloqueantes.
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## 📖 Licencia
|
|
147
|
+
Uso exclusivo y propietario de **Enelar S.A.S.** Prohibida su distribución no autorizada.
|