@axzydev/axzy_ui_system 1.5.0 → 1.5.2
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 +43 -0
- package/dist/index.css +1 -1
- package/dist/layered.css +1 -1
- package/package.json +4 -2
- package/src/dev.css +0 -16
- package/src/sandbox/i18n.ts +10 -0
- package/src/sandbox/ui.tsx +98 -1
- package/src/showcases/DataShowcases.tsx +56 -15
- package/src/showcases/FeedbackShowcases.tsx +82 -0
- package/src/showcases/FormShowcases.tsx +316 -5
- package/src/showcases/LayoutPrimitivesShowcases.tsx +112 -2
- package/src/showcases/NavigationShowcases.tsx +94 -0
- package/src/showcases/PageShowcases.tsx +72 -10
- package/src/showcases/ShowcaseLayout.tsx +145 -162
- package/src/showcases/StructureShowcases.tsx +107 -20
package/README.md
CHANGED
|
@@ -4,6 +4,37 @@ Librería de componentes React enterprise-ready con **Tailwind CSS v4**. Diseña
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
+
## Documentación para IA
|
|
8
|
+
|
|
9
|
+
Si vas a generar código con esta librería (Copilot, Claude, Cursor, un agente propio), pásale:
|
|
10
|
+
|
|
11
|
+
| Archivo | Qué contiene |
|
|
12
|
+
| --- | --- |
|
|
13
|
+
| [`docs/llm/GUIA.md`](docs/llm/GUIA.md) | Guía de uso: reglas, composición de pantallas, theming, i18n, accesibilidad, trampas conocidas y recetas |
|
|
14
|
+
| [`docs/llm/catalogo.md`](docs/llm/catalogo.md) | **Generado desde el código**: 61 componentes con props, tipos, defaults y ejemplo |
|
|
15
|
+
| [`docs/llm/catalogo.json`](docs/llm/catalogo.json) | El mismo catálogo en JSON, para indexar |
|
|
16
|
+
| [`docs/llm/ejemplos-reales.md`](docs/llm/ejemplos-reales.md) | **Así se usa en producción** (CYC ERP): capas de CSS, provider real, chassis, listados, formularios, tablas con API y toasts |
|
|
17
|
+
| [`LLM_DOCS.md`](LLM_DOCS.md) | Theming a fondo: variables CSS `--it-*`, escalas y chassis de layout |
|
|
18
|
+
|
|
19
|
+
### Carpeta [`ai/`](ai/) — copiar y pegar
|
|
20
|
+
|
|
21
|
+
Si no quieres ir archivo por archivo, la carpeta [`ai/`](ai/) trae el paquete **autocontenido** listo para
|
|
22
|
+
pegar en un chat o subir como conocimiento del proyecto:
|
|
23
|
+
|
|
24
|
+
| Archivo | Tamaño | Contenido |
|
|
25
|
+
| --- | --- | --- |
|
|
26
|
+
| [`ai/AXZY-UI-SYSTEM.md`](ai/AXZY-UI-SYSTEM.md) | ~150 KB (~38k tokens) | Todo en uno: guía + ejemplos reales + catálogo completo |
|
|
27
|
+
| [`ai/AXZY-UI-SYSTEM-compacto.md`](ai/AXZY-UI-SYSTEM-compacto.md) | ~65 KB (~17k tokens) | Igual, con el catálogo sin descripciones de props |
|
|
28
|
+
| `ai/catalogo.md` · `ai/catalogo.json` | — | Solo el catálogo |
|
|
29
|
+
| `ai/plantillas/` | — | Reglas para Cursor (`.mdc`), Copilot, Claude Code y prompt inicial |
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
pnpm docs:llm # regenera el catálogo (compilador de TS sobre src/index.ts), docs/llm/ y ai/
|
|
33
|
+
pnpm docs:ai # solo el paquete ai/ (usa docs/llm/ ya generado)
|
|
34
|
+
pnpm audit:sandbox # audita el sandbox: axe (set completo) + contenido recortado, 45 páginas
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
|
|
7
38
|
## Instalación en un proyecto nuevo
|
|
8
39
|
|
|
9
40
|
### 1. Crear proyecto Vite + React + TypeScript
|
|
@@ -62,6 +93,18 @@ capas explícitamente, para que el reset/tema de AXZY nunca dependa del orden de
|
|
|
62
93
|
|
|
63
94
|
Con esto **ya no** se importa `dist/index.css` desde `main.tsx` — todo entra por `index.css`.
|
|
64
95
|
|
|
96
|
+
> **Orden alternativo (y su consecuencia):** si colocas `axzy-ui-system` *después* de `utilities`,
|
|
97
|
+
> los estilos de la librería ganan a tus utilidades y tendrás que forzarlas con el sufijo `!` de
|
|
98
|
+
> Tailwind v4 (`m-0! px-4! max-w-screen!`). El orden de arriba te ahorra esos `!`.
|
|
99
|
+
|
|
100
|
+
**Modo oscuro por defecto:** el provider arranca en `system` y guarda la preferencia en la clave
|
|
101
|
+
`it-theme-dark-mode` (`"light" | "dark" | "system"`). Si quieres otro default, escríbela **antes** de
|
|
102
|
+
montar la app:
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
if (!localStorage.getItem("it-theme-dark-mode")) localStorage.setItem("it-theme-dark-mode", "light");
|
|
106
|
+
```
|
|
107
|
+
|
|
65
108
|
### 5. Envolver con ITThemeProvider
|
|
66
109
|
|
|
67
110
|
`src/main.tsx`:
|