@lesterarte/sefin-ui 0.0.2 → 0.0.3-dev.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 +41 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @lesterarte/sefin-ui
|
|
2
2
|
|
|
3
3
|
Una librería de sistema de diseño Angular completa basada en principios de Atomic Design y design tokens de la Secretaría de Finanzas.
|
|
4
4
|
|
|
5
5
|
## Resumen
|
|
6
6
|
|
|
7
|
-
`@
|
|
7
|
+
`@lesterarte/sefin-ui` es una librería UI Angular lista para producción diseñada para aplicaciones empresariales a gran escala. Proporciona:
|
|
8
8
|
|
|
9
9
|
- **Design Tokens**: Variables CSS y constantes TypeScript para temas consistentes
|
|
10
10
|
- **Estructura Atomic Design**: Componentes organizados (atoms, molecules, organisms)
|
|
@@ -53,7 +53,7 @@ Esto creará el paquete distribuible en `dist/`.
|
|
|
53
53
|
### Instalar en Tu Aplicación
|
|
54
54
|
|
|
55
55
|
```bash
|
|
56
|
-
npm install @
|
|
56
|
+
npm install @lesterarte/sefin-ui
|
|
57
57
|
```
|
|
58
58
|
|
|
59
59
|
## Uso
|
|
@@ -67,7 +67,7 @@ npm install @sefin/sefin-ui
|
|
|
67
67
|
En tu `styles.scss` o `angular.json`:
|
|
68
68
|
|
|
69
69
|
```scss
|
|
70
|
-
@import '@
|
|
70
|
+
@import '@lesterarte/sefin-ui/styles';
|
|
71
71
|
```
|
|
72
72
|
|
|
73
73
|
O en `angular.json`:
|
|
@@ -75,7 +75,7 @@ O en `angular.json`:
|
|
|
75
75
|
```json
|
|
76
76
|
{
|
|
77
77
|
"styles": [
|
|
78
|
-
"node_modules/@
|
|
78
|
+
"node_modules/@lesterarte/sefin-ui/styles/index.scss"
|
|
79
79
|
]
|
|
80
80
|
}
|
|
81
81
|
```
|
|
@@ -86,7 +86,7 @@ En tu `app.component.ts`:
|
|
|
86
86
|
|
|
87
87
|
```typescript
|
|
88
88
|
import { Component, OnInit } from '@angular/core';
|
|
89
|
-
import { ThemeLoader } from '@
|
|
89
|
+
import { ThemeLoader } from '@lesterarte/sefin-ui';
|
|
90
90
|
|
|
91
91
|
@Component({
|
|
92
92
|
selector: 'app-root',
|
|
@@ -112,7 +112,7 @@ Todos los componentes son standalone y se pueden importar directamente:
|
|
|
112
112
|
|
|
113
113
|
```typescript
|
|
114
114
|
import { Component } from '@angular/core';
|
|
115
|
-
import { ButtonComponent, CardComponent } from '@
|
|
115
|
+
import { ButtonComponent, CardComponent } from '@lesterarte/sefin-ui';
|
|
116
116
|
|
|
117
117
|
@Component({
|
|
118
118
|
selector: 'app-example',
|
|
@@ -180,7 +180,7 @@ Todos los design tokens están disponibles como variables CSS:
|
|
|
180
180
|
### Usando Constantes TypeScript
|
|
181
181
|
|
|
182
182
|
```typescript
|
|
183
|
-
import { COLOR_TOKENS, SPACING_TOKENS } from '@
|
|
183
|
+
import { COLOR_TOKENS, SPACING_TOKENS } from '@lesterarte/sefin-ui';
|
|
184
184
|
|
|
185
185
|
const primaryColor = COLOR_TOKENS.brand.lightBlue;
|
|
186
186
|
const mediumSpacing = SPACING_TOKENS.md;
|
|
@@ -197,7 +197,7 @@ const mediumSpacing = SPACING_TOKENS.md;
|
|
|
197
197
|
### Cambiar Temas
|
|
198
198
|
|
|
199
199
|
```typescript
|
|
200
|
-
import { ThemeLoader } from '@
|
|
200
|
+
import { ThemeLoader } from '@lesterarte/sefin-ui';
|
|
201
201
|
|
|
202
202
|
// Cambiar a tema brand
|
|
203
203
|
ThemeLoader.loadTheme('brand');
|
|
@@ -287,6 +287,38 @@ Este proyecto sigue [Semantic Versioning](https://semver.org/):
|
|
|
287
287
|
4. **Sigue las APIs de componentes**: Usa los componentes como están documentados
|
|
288
288
|
5. **Extiende, no modifiques**: Crea componentes wrapper para personalización
|
|
289
289
|
|
|
290
|
+
## Solución de Problemas
|
|
291
|
+
|
|
292
|
+
### Warning del Linter: "Component is used but not imported"
|
|
293
|
+
|
|
294
|
+
Si ves un warning del linter de Angular que indica que un componente está siendo usado pero no importado, **este es un falso positivo conocido**.
|
|
295
|
+
|
|
296
|
+
#### ¿Por qué ocurre?
|
|
297
|
+
|
|
298
|
+
Aunque el componente está correctamente exportado desde la librería, el linter de Angular no puede detectar su uso en templates HTML cuando se trata de:
|
|
299
|
+
- Componentes standalone
|
|
300
|
+
- Selectores personalizados (como `sefin-button`, `sefin-card`, etc.)
|
|
301
|
+
|
|
302
|
+
#### Estado de la Librería
|
|
303
|
+
|
|
304
|
+
✅ **Componente correctamente exportado**
|
|
305
|
+
✅ **Tipos TypeScript bien definidos**
|
|
306
|
+
✅ **Metadata del componente correcta**
|
|
307
|
+
|
|
308
|
+
No hay nada que corregir en la librería. Esta es una limitación conocida del linter de Angular con componentes standalone y selectores personalizados.
|
|
309
|
+
|
|
310
|
+
#### Solución en el Proyecto Consumidor
|
|
311
|
+
|
|
312
|
+
1. **Mantener el archivo `.eslintrc.json` en el proyecto consumidor** con la configuración adecuada
|
|
313
|
+
2. **El código funciona correctamente** a pesar del warning
|
|
314
|
+
3. **Puedes ignorar el warning** de forma segura, ya que es un falso positivo
|
|
315
|
+
|
|
316
|
+
#### Recomendación
|
|
317
|
+
|
|
318
|
+
- Documentar en el README del proyecto consumidor que este warning es un falso positivo conocido
|
|
319
|
+
- El código funciona correctamente a pesar del warning
|
|
320
|
+
- Mantener la configuración del linter en el proyecto consumidor
|
|
321
|
+
|
|
290
322
|
## Soporte
|
|
291
323
|
|
|
292
324
|
Para problemas, preguntas o contribuciones, por favor abre un issue en el repositorio.
|