@tinya-code/gas-admin-ui 0.1.0-alpha.3 → 0.1.0-alpha.5
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 +138 -55
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,19 +2,54 @@
|
|
|
2
2
|
|
|
3
3
|
Motor de render del ecosistema `@tinya-code`: el front que **sólo declara** su
|
|
4
4
|
dominio (`schemas/*.schema.ts`) y consume el motor compilado — mismo contrato
|
|
5
|
-
que `@tinya-code/gas-admin` en el back, pero para Angular.
|
|
5
|
+
que `@tinya-code/gas-admin` en el back, pero para Angular. El paquete dibuja
|
|
6
|
+
vistas, campos, acciones, shell y rutas; vos no tocás componentes a mano.
|
|
7
|
+
|
|
8
|
+
## Requisitos
|
|
9
|
+
|
|
10
|
+
| Requisito | Versión / detalle |
|
|
11
|
+
| --- | --- |
|
|
12
|
+
| Angular | `22.2` (standalone, signals) |
|
|
13
|
+
| Peers de Angular | `@angular/{cdk,common,core,forms,platform-browser,router} ^22.2` |
|
|
14
|
+
| Iconos / charts | `@lucide/angular ^1.51`, `chart.js ^4.5` |
|
|
15
|
+
| CSS | Tailwind v4 — con el `@source` del motor ([paso 2](#2-declará-el-source-de-tailwind)) |
|
|
16
|
+
| Back | [`@tinya-code/gas-admin`](https://www.npmjs.com/package/@tinya-code/gas-admin) — su CLI genera y valida los schemas del front |
|
|
17
|
+
|
|
18
|
+
## Camino rápido desde cero
|
|
19
|
+
|
|
20
|
+
### 1. Instalá el paquete
|
|
6
21
|
|
|
7
22
|
```bash
|
|
8
23
|
npm i @tinya-code/gas-admin-ui
|
|
9
24
|
```
|
|
10
25
|
|
|
11
|
-
|
|
12
|
-
`@lucide/angular
|
|
26
|
+
Un proyecto Angular 22.2 ya trae los `@angular/*`; verificá que estén los
|
|
27
|
+
demás peers (`@lucide/angular`, `chart.js` y los `@angular/*` que falten).
|
|
28
|
+
|
|
29
|
+
### 2. Declará el `@source` de Tailwind
|
|
30
|
+
|
|
31
|
+
En `src/styles.css`:
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
@source '../node_modules/@tinya-code/gas-admin-ui/fesm2022';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Sin esto la app compila pero la UI del motor sale sin clases (visual roto,
|
|
38
|
+
tests en verde).
|
|
39
|
+
|
|
40
|
+
### 3. Generá los schemas desde el back
|
|
13
41
|
|
|
14
|
-
|
|
42
|
+
Con el CLI del back instalado en el proyecto (`npm i -D @tinya-code/gas-admin`)
|
|
43
|
+
y el dominio declarado en `api/schema/resources/`:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
npx gas-admin scaffold
|
|
47
|
+
```
|
|
15
48
|
|
|
16
|
-
|
|
17
|
-
|
|
49
|
+
Escribe 9 ficheros en `src/app/schemas/` ([estructura](#estructura-generada-en-srcappschemas)).
|
|
50
|
+
Si la carpeta ya tiene `*.ts` falla con exit 1; `--force` regenera.
|
|
51
|
+
|
|
52
|
+
### 4. Cableá el motor — `app.config.ts`
|
|
18
53
|
|
|
19
54
|
```ts
|
|
20
55
|
import { API_URL, provideGasAdmin } from '@tinya-code/gas-admin-ui';
|
|
@@ -28,7 +63,11 @@ export const appConfig: ApplicationConfig = {
|
|
|
28
63
|
};
|
|
29
64
|
```
|
|
30
65
|
|
|
31
|
-
|
|
66
|
+
El motor absorbe HTTP (interceptor del envelope), los loaders de
|
|
67
|
+
config/sesión y el catálogo de schemas; la app conserva router, environment
|
|
68
|
+
y sus schemas de dominio.
|
|
69
|
+
|
|
70
|
+
### 5. Rutas — `app.routes.ts`
|
|
32
71
|
|
|
33
72
|
```ts
|
|
34
73
|
import { authGuard, shellRoutes } from '@tinya-code/gas-admin-ui';
|
|
@@ -41,84 +80,128 @@ export const routes: Routes = [
|
|
|
41
80
|
];
|
|
42
81
|
```
|
|
43
82
|
|
|
44
|
-
|
|
45
|
-
|
|
83
|
+
`firstResource` lo definís en el archivo:
|
|
84
|
+
`const firstResource = schemas[0].id;` (primer recurso del catálogo). El login
|
|
85
|
+
queda fuera del shell a propósito: si viviera dentro, `authGuard` lo
|
|
86
|
+
bloquearía a él mismo.
|
|
87
|
+
|
|
88
|
+
### 6. Revisá los labels de cada `*.schema.ts`
|
|
89
|
+
|
|
90
|
+
Los `label` salen de las keys: son copy de demo. Reemplazalos por los del
|
|
91
|
+
dominio y sumá las vistas/filtros que quieras (el recorrido de capacidades
|
|
92
|
+
está en la cabecera de `registry.ts`). También podés escribir toda la
|
|
93
|
+
estructura a mano si preferís no usar el scaffold.
|
|
94
|
+
|
|
95
|
+
### 7. Levantá la app
|
|
46
96
|
|
|
47
97
|
```bash
|
|
48
|
-
|
|
98
|
+
npm start
|
|
49
99
|
```
|
|
50
100
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
`registry.ts` (el array ordenado que alimenta menú y rutas),
|
|
54
|
-
`auth.schema.ts` (las claves exactas del `input` de `/auth/login`) y
|
|
55
|
-
`seed-catalog.ts` (siembra el catálogo para los specs). Los `label` salen
|
|
56
|
-
de las keys: reemplazá los placeholders por los del dominio y sumá las
|
|
57
|
-
vistas/filtros que quieras (el recorrido de capacidades está en la
|
|
58
|
-
cabecera de `registry.ts`). Estructura equivalente a mano si preferís
|
|
59
|
-
escribirlo. La validación de que todo siga coincidiendo con el back la hace
|
|
60
|
-
`gas-admin validate --with-front` (`contract-check` de
|
|
61
|
-
`@tinya-code/gas-admin`).
|
|
62
|
-
|
|
63
|
-
## Requisitos del consumidor
|
|
101
|
+
Verificación: el shell arranca en `/login` y, con sesión, muestra el menú y
|
|
102
|
+
las vistas derivadas de tus schemas.
|
|
64
103
|
|
|
65
|
-
###
|
|
104
|
+
### 8. Validá el contrato back ↔ front
|
|
66
105
|
|
|
67
|
-
|
|
68
|
-
`node_modules` y no lo escanea solo. Agregar en `styles.css`:
|
|
106
|
+
Sólo después de tener el back con el doc al día (`npx gas-admin doc`):
|
|
69
107
|
|
|
70
|
-
```
|
|
71
|
-
|
|
108
|
+
```bash
|
|
109
|
+
npx gas-admin validate --with-front
|
|
72
110
|
```
|
|
73
111
|
|
|
74
|
-
|
|
75
|
-
|
|
112
|
+
Corre el `contract-check` de `@tinya-code/gas-admin`: exit 0 = los schemas del
|
|
113
|
+
front siguen coincidiendo con la proyección del back.
|
|
114
|
+
|
|
115
|
+
## Requisitos especiales del consumidor
|
|
116
|
+
|
|
117
|
+
### Tailwind v4 — `@source` obligatorio
|
|
118
|
+
|
|
119
|
+
Tailwind genera las utilities escaneando **tus** fuentes; el motor vive en
|
|
120
|
+
`node_modules` y Tailwind no lo escanea solo. El `@source` del paso 2 es
|
|
121
|
+
obligatorio: sin él la app compila y los tests quedan en verde, pero la UI
|
|
122
|
+
del motor se renderiza sin estilos.
|
|
76
123
|
|
|
77
124
|
### Tests del consumidor — desde `node_modules` (sin alias)
|
|
78
125
|
|
|
79
|
-
Los specs del consumidor
|
|
80
|
-
`node_modules` (la versión publicada en `dependencies`), sin alias de
|
|
81
|
-
`tsconfig.spec.json` ni clone del repo como directorio hermano en CI: la
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
126
|
+
Los specs del consumidor deben resolver `@tinya-code/gas-admin-ui` desde
|
|
127
|
+
`node_modules` (la versión publicada en `dependencies`), **sin** alias de
|
|
128
|
+
`tsconfig.spec.json` ni clone del repo como directorio hermano en CI: la app
|
|
129
|
+
y los tests usan la MISMA copia compilada ⇒ Angular se instancia una sola
|
|
130
|
+
vez (verificado en `admin-schema`: 116/116 sin alias). Para probar un cambio
|
|
131
|
+
del motor, publicá un alpha y bumpeá la dependencia.
|
|
132
|
+
|
|
133
|
+
Si alguna combinación de versiones llegara a reproducir `NG0203`/`NG01908`
|
|
134
|
+
(doble instancia de Angular: vitest prebundlea `@angular/*` pero la lib corre
|
|
135
|
+
en ESM nativo), el workaround es compilar la lib desde source en el grafo de
|
|
136
|
+
tests (`paths` en `tsconfig.spec.json` apuntando al source del paquete)
|
|
137
|
+
junto con un clone del repo como directorio hermano en CI.
|
|
138
|
+
|
|
139
|
+
## Estructura generada en `src/app/schemas/`
|
|
140
|
+
|
|
141
|
+
`npx gas-admin scaffold` aplaná la plantilla de las vitrinas (catálogo,
|
|
142
|
+
agenda, panel) en una carpeta plana:
|
|
143
|
+
|
|
144
|
+
```text
|
|
145
|
+
src/app/schemas/
|
|
146
|
+
├── auth.schema.ts # claves exactas del input de /auth/login
|
|
147
|
+
├── registry.ts # array ordenado que alimenta menú y rutas
|
|
148
|
+
├── seed-catalog.ts # siembra el catálogo para los specs
|
|
149
|
+
├── productos.schema.ts # vitrina catálogo
|
|
150
|
+
├── categorias.schema.ts # vitrina catálogo
|
|
151
|
+
├── pedidos.schema.ts # vitrina agenda
|
|
152
|
+
├── dashboard.schema.ts # vitrina panel
|
|
153
|
+
├── usuarios.schema.ts # vitrina panel
|
|
154
|
+
└── sitio.schema.ts # vitrina panel
|
|
155
|
+
```
|
|
86
156
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
corre en ESM nativo), el workaround es compilar la lib desde source en el
|
|
90
|
-
grafo de tests (`paths` en `tsconfig.spec.json` apuntando al source del
|
|
91
|
-
paquete) junto con un clone del repo como directorio hermano en CI.
|
|
157
|
+
Por cada recurso, el `*.schema.ts` trae campos, validators, enums y endpoint
|
|
158
|
+
derivados de la proyección back.
|
|
92
159
|
|
|
93
160
|
## API pública
|
|
94
161
|
|
|
95
162
|
Sólo lo exportado por `public-api.ts` es contrato; el resto es privado y
|
|
96
|
-
puede cambiar entre alphas.
|
|
163
|
+
puede cambiar entre alphas.
|
|
97
164
|
|
|
98
165
|
| Grupo | Exportaciones |
|
|
99
166
|
| --- | --- |
|
|
100
|
-
| Wiring | `provideGasAdmin`, `GAS_SCHEMAS`, `setSchemaCatalog`, `getSchema`, `allSchemas`, `getAuth`, `
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
|
|
|
167
|
+
| Wiring y catálogo | `provideGasAdmin`, `GAS_SCHEMAS`, `setSchemaCatalog`, `getSchema`, `allSchemas`, `getAuth`, tipo `GasAdminConfig` |
|
|
168
|
+
| Token | `API_URL` |
|
|
169
|
+
| Rutas y guard | `authGuard`, `shellRoutes`, `resourceRoutes` |
|
|
170
|
+
| Páginas | `Login`, `Dashboard`, `ListView`, `FormView`, `ResourcePage` |
|
|
171
|
+
| Componentes | `Sidebar`, `ComposerHost`, `FieldHost`, `ConfirmDialog`, `Toast` |
|
|
172
|
+
| Servicios | `ApiService`, `AuthService` (+ `SESSION_TOKEN_KEY`, `SESSION_USER_KEY`), `NotificationService`, `DataSourceService`, `UploadService`, `ErrorMapperService`, `apiErrorInterceptor` |
|
|
106
173
|
| Forms | `buildFormSchema`, `seedModel`, `buildPayload` |
|
|
174
|
+
| Modelos de schema | `ResourceSchema`, `AuthSchema`, `ResourceAction`, `ApiError` y todo el vocabulario de fields/widgets/views/layouts (`FieldSchema`, `FieldType`, `ListColumn`, `WidgetSchema`, `ResourceLayout`, `ViewDescriptor`, vistas tabs/calendar/kanban…) |
|
|
175
|
+
| Registros de render | `fieldDescriptors`, `SUPPORTED_FIELD_TYPE_LIST`, `columnFormatDescriptors`, `COLUMN_FORMAT_TYPES`, `viewDescriptors`, `layoutDescriptors`, `renderKinds` |
|
|
176
|
+
| Render custom | `registerRenderDescriptor`, `unregisterRenderDescriptor`, `provideRenderDescriptors`, `getRenderDescriptor`, `isSupported`, `isRenderSupported`, tipos `RenderKind`, `ComponentRenderKind` |
|
|
177
|
+
| Composición | `validateComposition`, `MAX_DEPTH`, `SchemaCompositionError` |
|
|
178
|
+
| Acciones custom | `registerAction`, `getAction`, `actionsFor`, `actionType`, `actionTypes`, tipos `ActionDescriptor`, `ActionSurface`, `ActionContext`, `ActionResult` |
|
|
179
|
+
| Validadores | tipo `ValidatorName` (vocabulario del contract-check back ↔ front) |
|
|
180
|
+
| Utilidades | `interpolateTemplate` (interpolación de templates en schemas) |
|
|
181
|
+
|
|
182
|
+
## Ver también
|
|
183
|
+
|
|
184
|
+
- **Back del ecosistema** — `init`, declaración de dominio, `doc`, `validate`:
|
|
185
|
+
guía de `@tinya-code/gas-admin` en
|
|
186
|
+
[`Tinya-Code/gas-admin`](https://github.com/Tinya-Code/gas-admin)
|
|
187
|
+
(`docs/guia-de-uso.md`).
|
|
188
|
+
- **Consumidor de referencia** — `admin-schema`: declara el dominio e integra
|
|
189
|
+
este paquete (116 tests sin alias, specs de integración).
|
|
107
190
|
|
|
108
191
|
## Desarrollo (este repo)
|
|
109
192
|
|
|
110
193
|
```bash
|
|
111
194
|
ng build gas-admin-ui # ng-packagr → dist/gas-admin-ui (fesm2022 + types)
|
|
112
|
-
ng test gas-admin-ui # vitest:
|
|
195
|
+
ng test gas-admin-ui # vitest: tests del motor (fixtures congelados)
|
|
113
196
|
```
|
|
114
197
|
|
|
115
|
-
Publicación (tag
|
|
198
|
+
Publicación (npm **exige** `--tag` explícito en prereleases):
|
|
116
199
|
|
|
117
200
|
```bash
|
|
118
201
|
npm publish ./dist/gas-admin-ui --tag alpha
|
|
119
202
|
```
|
|
120
203
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
204
|
+
- `dist/` es gitignored: el build es siempre local y no se commitea.
|
|
205
|
+
- Los specs que renderizan los schemas **reales** de un consumidor no viven
|
|
206
|
+
acá (la lib no puede importar al consumidor): viven en el repo del
|
|
207
|
+
consumidor importando desde este paquete.
|
package/package.json
CHANGED