diff --git a/docs/frontend/frontend-architecture.md b/docs/frontend/frontend-architecture.md index eb13e4db..c7912e25 100644 --- a/docs/frontend/frontend-architecture.md +++ b/docs/frontend/frontend-architecture.md @@ -82,7 +82,7 @@ RdxPageContent → composición de los hijos principales ``` -Regla: Las Pages no deben reconstruir estas responsabilidades con wrappers HTML locales. +Regla: Las Pages no deben reconstruir estas responsabilidades con wrappers HTML locales. En Create/Update, la composición canónica es RdxPageFrame → RdxPageContainer → RdxPageContent: los errores inline y el editor son hijos directos de RdxPageContent; los dialogs son hermanos del frame; RdxPanel se reserva para secciones semánticas reales. ## 6. Identity y sesión diff --git a/docs/frontend/ui-patterns.md b/docs/frontend/ui-patterns.md index 9ebf8007..eaeb4d34 100644 --- a/docs/frontend/ui-patterns.md +++ b/docs/frontend/ui-patterns.md @@ -34,6 +34,8 @@ El controller de página concentra URL, filtros, consulta, estados y navegación ## 2. Create / Update +Estructura canónica: providers → RdxPageFrame (header/content/footer) → un único RdxPageContainer → un único RdxPageContent; los dialogs son hermanos del frame. + ```tsx } @@ -53,6 +55,7 @@ Los errores inline no definen su propio spacing estructural. Participan del spac 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. +El error bloqueante conserva la misma jerarquía: RdxPageFrame → RdxPageContainer → RdxPageContent → PageErrorState. ## 3. Detail diff --git a/docs/frontend/ui-system.md b/docs/frontend/ui-system.md index c3577eb7..a4b89670 100644 --- a/docs/frontend/ui-system.md +++ b/docs/frontend/ui-system.md @@ -108,6 +108,7 @@ Agrupa una sección con título, descripción, icono, acciones y contenido: - `variant="plain"`: sección plana con divisor; valor predeterminado. - `variant="card"`: superficie independiente. +RdxPanel no sustituye un div estructural: solo representa una sección con identidad semántica, como fiscalidad, dirección o preferencias. ### `RdxFormGrid` @@ -157,7 +158,7 @@ Los avisos, errores inline, secciones y contenido funcional deben ser hijos dire ``` -No deben introducirse wrappers adicionales únicamente para controlar gap, ancho, padding o centrado. +No deben introducirse wrappers adicionales únicamente para controlar gap, ancho, padding o centrado. No se anidan RdxPageContainer ni RdxPageContent salvo razón arquitectónica explícita. Los errores inline participan como hijos directos del spacing estándar de RdxPageContent; no crean su propio layout. ## 8. Responsive y accesibilidad diff --git a/docs/suppliers/frontend-suppliers-ui-ux-design.md b/docs/suppliers/frontend-suppliers-ui-ux-design.md index 47a99cfa..b40a8ef7 100644 --- a/docs/suppliers/frontend-suppliers-ui-ux-design.md +++ b/docs/suppliers/frontend-suppliers-ui-ux-design.md @@ -18,7 +18,7 @@ Se adoptan de Customer: - manifest y rutas lazy por módulo; - páginas de listado con `RdxPageContainer`, `RdxPageHeader`, búsqueda con debounce y `DataTable`; -- editores fullscreen con `RdxEditorPageLayout`, header persistente, protección de cambios sin guardar y secciones Rdx; +- editores fullscreen con `RdxPageFrame`, header persistente, protección de cambios sin guardar y secciones Rdx; - `PageErrorState`, skeletons, alertas y toasts del sistema; - React Hook Form con validación Zod; - queries y mutations encapsuladas en hooks y adapters de transporte. @@ -119,9 +119,9 @@ Todos los textos visibles pertenecen al namespace `Suppliers`. Se mantienen recu ## 17. Componentes reutilizados - `RdxPageContainer`, `RdxPageContent`, `RdxPageHeader`, `RdxPageActions`; -- `RdxEditorPageLayout`, `RdxPanel`, `RdxFormGrid`; +- `RdxPageFrame`, `RdxPanel`, `RdxFormGrid`; - `DataTable`, `SkeletonDataTable`, `DataTableColumnHeader`, `RdxRowActions`; -- `TextField`, `SelectField`, `PageFormHeader`, `FormActionsBar`; +- `TextField`, `SelectField`, `RdxEditorHeader`, `FormActionsBar`; - `SimpleSearchInput`, `PageErrorState`, `ErrorAlert`; - `UnsavedChangesProvider` y `useReturnToNavigation`. diff --git a/modules/customer-invoices/src/web/proformas/create/ui/pages/proforma-create-page.tsx b/modules/customer-invoices/src/web/proformas/create/ui/pages/proforma-create-page.tsx index dd1ae51a..50267e4a 100644 --- a/modules/customer-invoices/src/web/proformas/create/ui/pages/proforma-create-page.tsx +++ b/modules/customer-invoices/src/web/proformas/create/ui/pages/proforma-create-page.tsx @@ -34,7 +34,7 @@ export const ProformaCreatePage = () => { } > - + {createCtrl.isCreateError && ( { > + {submitError ? : null}
{

{t("recurring_proformas.create.description")}

- {submitError ? ( -

- {submitError} -

- ) : null} - - - {t("recurring_proformas.create.form_title")} - - + +
- - +
+
diff --git a/modules/customers/src/web/create/ui/pages/customer-create-page.tsx b/modules/customers/src/web/create/ui/pages/customer-create-page.tsx index 4a67d33b..2a1cade3 100644 --- a/modules/customers/src/web/create/ui/pages/customer-create-page.tsx +++ b/modules/customers/src/web/create/ui/pages/customer-create-page.tsx @@ -47,7 +47,7 @@ export const CustomerCreatePage = () => { } > - + {createCtrl.isCreateError ? ( { > -
-
- {controller.mutation.isError ? ( - - ) : null} - -
-
+ {controller.mutation.isError ? ( + + ) : null} +
diff --git a/modules/suppliers/src/web/shared/ui/supplier-editor-skeleton.tsx b/modules/suppliers/src/web/shared/ui/supplier-editor-skeleton.tsx index ad7fb8a2..7c1fbd65 100644 --- a/modules/suppliers/src/web/shared/ui/supplier-editor-skeleton.tsx +++ b/modules/suppliers/src/web/shared/ui/supplier-editor-skeleton.tsx @@ -1,4 +1,4 @@ -import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components"; +import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components"; import { useTranslation } from "../../i18n"; @@ -19,15 +19,17 @@ export const SupplierEditorSkeleton = () => { return ( -
-
-
- {SKELETON_FIELDS.map((field) => ( -
- ))} + +
+
+
+ {SKELETON_FIELDS.map((field) => ( +
+ ))} +
-
- {t("common.loading")} + {t("common.loading")} + ); diff --git a/modules/suppliers/src/web/update/supplier-update-page.tsx b/modules/suppliers/src/web/update/supplier-update-page.tsx index c6bab6a1..6d9a51fb 100644 --- a/modules/suppliers/src/web/update/supplier-update-page.tsx +++ b/modules/suppliers/src/web/update/supplier-update-page.tsx @@ -32,18 +32,20 @@ export const SupplierUpdatePage = () => { return ( - { - await controller.query.refetch(); - }, - }} - secondaryAction={{ label: t("common.actions.back"), onClick: navigateBack }} - title={t("detail.error.title")} - variant="notFound" - /> + + { + await controller.query.refetch(); + }, + }} + secondaryAction={{ label: t("common.actions.back"), onClick: navigateBack }} + title={t("detail.error.title")} + variant="notFound" + /> + ); @@ -66,21 +68,17 @@ export const SupplierUpdatePage = () => { > -
-
- {controller.mutation.isError ? ( - - ) : null} - -
-
+ {controller.mutation.isError ? ( + + ) : null} +