catarina 1.0.0 → 1.0.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 +155 -33
- package/package.json +19 -1
package/README.md
CHANGED
|
@@ -1,63 +1,185 @@
|
|
|
1
|
-
|
|
1
|
+
## Catarina – Design System para Angular
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Catarina** es una librería de componentes UI para Angular 20.3.x.
|
|
4
|
+
Incluye botones, iconos, controles de formulario, paneles y utilidades relacionadas con _theming_ e iconos.
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
La librería está publicada con el nombre:
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
- **Paquete npm**: `catarina`
|
|
9
|
+
- **Versión**: `1.0.1`
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Requisitos
|
|
14
|
+
|
|
15
|
+
`catarina` declara las siguientes _peerDependencies_:
|
|
16
|
+
|
|
17
|
+
- `@angular/core`: `^20.3.0`
|
|
18
|
+
- `@angular/common`: `^20.3.0`
|
|
12
19
|
|
|
13
|
-
|
|
20
|
+
Y depende de:
|
|
21
|
+
|
|
22
|
+
- `tslib`: `^2.3.0`
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Instalación
|
|
27
|
+
|
|
28
|
+
En un proyecto Angular 20:
|
|
14
29
|
|
|
15
30
|
```bash
|
|
16
|
-
|
|
31
|
+
npm install catarina
|
|
17
32
|
```
|
|
18
33
|
|
|
19
|
-
|
|
34
|
+
También se puede instalar con `pnpm` o `yarn` usando el mismo nombre de paquete.
|
|
20
35
|
|
|
21
|
-
|
|
36
|
+
---
|
|
22
37
|
|
|
23
|
-
|
|
24
|
-
|
|
38
|
+
## API pública
|
|
39
|
+
|
|
40
|
+
El archivo `public-api.ts` expone los principales elementos del design system:
|
|
41
|
+
|
|
42
|
+
- **Componentes de diseño**:
|
|
43
|
+
- `Icon` (`cat-icon`)
|
|
44
|
+
- `Button` (`cat-button`)
|
|
45
|
+
- Paneles (`card`, `accordion`, `accordion-group`)
|
|
46
|
+
- **Componentes de formulario**:
|
|
47
|
+
- `cat-input`, `color-input`, `select-input`, `date-input`, `file-input`,
|
|
48
|
+
`password-input`, `range-input`, `text-area-input`, `time-input`
|
|
49
|
+
- **Overlays**:
|
|
50
|
+
- `dialog`
|
|
51
|
+
- **Servicios y directivas**:
|
|
52
|
+
- Directiva de arrastre (`drag`)
|
|
53
|
+
- Utilidades de _theming_
|
|
54
|
+
- **Tokens**:
|
|
55
|
+
- `ICON_PROVIDER`
|
|
56
|
+
|
|
57
|
+
Todos estos símbolos se importan directamente desde el paquete `catarina`.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Configuración de iconos con `safirial-icons`
|
|
62
|
+
|
|
63
|
+
`catarina` utiliza el token `ICON_PROVIDER` para resolver las rutas de los iconos.
|
|
64
|
+
Este token se puede configurar usando las utilidades del paquete `safirial-icons`:
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
// app.config.ts
|
|
68
|
+
import { ApplicationConfig } from '@angular/core';
|
|
69
|
+
import { provideHttpClient } from '@angular/common/http';
|
|
70
|
+
import { ICON_PROVIDER as CATARINA_ICON_PROVIDER } from 'catarina';
|
|
71
|
+
import { getIconPath } from 'safirial-icons';
|
|
72
|
+
|
|
73
|
+
const iconProviderConfig = {
|
|
74
|
+
getPath: getIconPath
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export const appConfig: ApplicationConfig = {
|
|
78
|
+
providers: [
|
|
79
|
+
provideHttpClient(),
|
|
80
|
+
{ provide: CATARINA_ICON_PROVIDER, useValue: iconProviderConfig }
|
|
81
|
+
]
|
|
82
|
+
};
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Con esta configuración, los componentes de `catarina` que usan iconos resuelven las rutas desde `safirial-icons`.
|
|
86
|
+
|
|
87
|
+
### Configuración de assets en `angular.json`
|
|
88
|
+
|
|
89
|
+
Además de configurar el `ICON_PROVIDER`, es necesario añadir la siguiente entrada en la sección `assets` de `angular.json` para que los archivos SVG de `safirial-icons` se copien al directorio de salida:
|
|
90
|
+
|
|
91
|
+
```json
|
|
92
|
+
{
|
|
93
|
+
"projects": {
|
|
94
|
+
"tu-proyecto": {
|
|
95
|
+
"architect": {
|
|
96
|
+
"build": {
|
|
97
|
+
"options": {
|
|
98
|
+
"assets": [
|
|
99
|
+
"src/favicon.ico",
|
|
100
|
+
"src/assets",
|
|
101
|
+
{
|
|
102
|
+
"glob": "**/*.svg",
|
|
103
|
+
"input": "node_modules/safirial-icons/assets",
|
|
104
|
+
"output": "safirial-icons"
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
25
113
|
```
|
|
26
114
|
|
|
27
|
-
|
|
115
|
+
Esta configuración copia todos los archivos SVG desde `node_modules/safirial-icons/assets` a la carpeta `safirial-icons` en el directorio de salida de la aplicación.
|
|
28
116
|
|
|
29
|
-
|
|
117
|
+
---
|
|
30
118
|
|
|
31
|
-
|
|
119
|
+
## Uso básico de componentes
|
|
32
120
|
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
cd dist/catarina
|
|
36
|
-
```
|
|
121
|
+
Ejemplo de uso de `cat-button` e `Icon` dentro de un componente de aplicación:
|
|
37
122
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
123
|
+
```ts
|
|
124
|
+
// app.component.ts
|
|
125
|
+
import { Component } from '@angular/core';
|
|
126
|
+
import { Button as CatarinaButton, Icon as CatarinaIcon } from 'catarina';
|
|
42
127
|
|
|
43
|
-
|
|
128
|
+
@Component({
|
|
129
|
+
selector: 'app-root',
|
|
130
|
+
imports: [CatarinaButton, CatarinaIcon],
|
|
131
|
+
template: `
|
|
132
|
+
<cat-button variant="primary" size="md" iconLeft="home">
|
|
133
|
+
Botón Catarina
|
|
134
|
+
</cat-button>
|
|
135
|
+
|
|
136
|
+
<cat-icon name="sun" [size]="'32px'"></cat-icon>
|
|
137
|
+
`
|
|
138
|
+
})
|
|
139
|
+
export class AppComponent {}
|
|
140
|
+
```
|
|
44
141
|
|
|
45
|
-
|
|
142
|
+
Los valores de `name` de los iconos deben coincidir con los nombres definidos en `iconList` del paquete `safirial-icons`.
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## Construcción y publicación
|
|
147
|
+
|
|
148
|
+
Para compilar la librería desde el workspace:
|
|
46
149
|
|
|
47
150
|
```bash
|
|
48
|
-
ng
|
|
151
|
+
ng build catarina
|
|
49
152
|
```
|
|
50
153
|
|
|
51
|
-
|
|
154
|
+
El resultado se genera en:
|
|
52
155
|
|
|
53
|
-
|
|
156
|
+
```bash
|
|
157
|
+
dist/catarina
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Para publicar en npm (desde el workspace):
|
|
54
161
|
|
|
55
162
|
```bash
|
|
56
|
-
ng
|
|
163
|
+
ng build catarina
|
|
164
|
+
cd dist/catarina
|
|
165
|
+
npm publish
|
|
57
166
|
```
|
|
58
167
|
|
|
59
|
-
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
## Idioma / Language
|
|
171
|
+
|
|
172
|
+
Esta documentación está disponible en español. Para la versión en inglés, consulta [README.en.md](./README.en.md).
|
|
173
|
+
|
|
174
|
+
This documentation is available in Spanish. For the English version, see [README.en.md](./README.en.md).
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## Nota sobre la documentación
|
|
60
179
|
|
|
61
|
-
|
|
180
|
+
Esta documentación fue generada usando **Cursor** con los siguientes parámetros:
|
|
62
181
|
|
|
63
|
-
|
|
182
|
+
- **Herramienta**: Cursor IDE
|
|
183
|
+
- **Modelo**: Auto (agente router de Cursor)
|
|
184
|
+
- **Idioma**: Español
|
|
185
|
+
- **Instrucciones**: Analizar todos los proyectos del workspace y actualizar la documentación para consumo, sin incluir errores, mejoras ni sugerencias, solo información factual sobre instalación, configuración y uso de las librerías.
|
package/package.json
CHANGED
|
@@ -1,6 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "catarina",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Angular 20.3.0 UI Design System, preview: https://jpcn-portfolio.vercel.app/catarina-preview",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"angular",
|
|
7
|
+
"design-system",
|
|
8
|
+
"ui",
|
|
9
|
+
"components",
|
|
10
|
+
"hydenaky"
|
|
11
|
+
],
|
|
12
|
+
"author": "hydenaky",
|
|
13
|
+
"license": "MIT",
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "https://github.com/Hydenaky/library-workspace"
|
|
17
|
+
},
|
|
18
|
+
"bugs": {
|
|
19
|
+
"url": "https://github.com/Hydenaky/library-workspace/issues"
|
|
20
|
+
},
|
|
21
|
+
"homepage": "https://github.com/Hydenaky/library-workspace/blob/main/README.md",
|
|
4
22
|
"peerDependencies": {
|
|
5
23
|
"@angular/common": "^20.3.0",
|
|
6
24
|
"@angular/core": "^20.3.0"
|