feat(ui): mejorar la estructura y composición de RdxPageContent en patrones y sistema UI

This commit is contained in:
David Arranz 2026-09-14 11:26:54 +02:00
parent 9f303819b3
commit c6de77897d
3 changed files with 36 additions and 6 deletions

View File

@ -71,6 +71,19 @@ AppMain
└── footer opcional
```
```text
RdxPageFrame
→ estructura y scroll
RdxPageContainer
→ ancho y padding
RdxPageContent
→ composición de los hijos principales
```
Regla: Las Pages no deben reconstruir estas responsabilidades con wrappers HTML locales.
## 6. Identity y sesión
El runtime actual se compone en `apps/web/src/app.tsx`:

View File

@ -36,18 +36,20 @@ El controller de página concentra URL, filtros, consulta, estados y navegación
```tsx
<RdxPageFrame
header={<RdxEditorHeader title={title} onBack={onBack} />}
footer={<RdxEditorActionBar secondary={cancel} primary={submit} />}
header={<RdxEditorHeader />}
footer={<RdxEditorActionBar />}
>
<RdxPageContainer width="content">
<RdxPageContent aside={aside}>
{notice}
<RdxPanel title={sectionTitle}>{fields}</RdxPanel>
<RdxPageContent>
{pageError ? <ErrorAlert /> : null}
<Editor />
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
```
Los errores inline no definen su propio spacing estructural. Participan del spacing estándar de RdxPageContent igual que el resto de hijos principales.
Footer y aside son opcionales. `content` es adecuado para formularios focalizados; `full` para editores documentales amplios. Create y Update deben compartir geometría cuando solo cambian defaults, submit o navegación.
Loading y error bloqueante usan también `RdxPageFrame` y `RdxPageContainer`; no reconstruyen el viewport.

View File

@ -144,6 +144,21 @@ Excepción: un detalle documental puede configurar el contenido del frame con `o
- Tablas y editores de líneas conservan su layout funcional.
- Evitar card dentro de card y sombras acumuladas.
### Composición del contenido principal
`RdxPageContent` es el compositor estructural de los hijos principales de una página.
Los avisos, errores inline, secciones y contenido funcional deben ser hijos directos cuando pertenezcan al mismo nivel visual.
`RdxPanel` no es un wrapper genérico. Se usa únicamente cuando existe una sección con identidad visual o semántica propia.
```tsx
<RdxPageContent>
{error ? <ErrorAlert /> : null}
<Editor />
</RdxPageContent>
```
No deben introducirse wrappers adicionales únicamente para controlar gap, ancho, padding o centrado.
## 8. Responsive y accesibilidad
- Las columnas se apilan antes de producir overflow horizontal.