diff --git a/apps/web/src/development/ui-kit/ui-kit-page.tsx b/apps/web/src/development/ui-kit/ui-kit-page.tsx
index d611f0c4..10b98912 100644
--- a/apps/web/src/development/ui-kit/ui-kit-page.tsx
+++ b/apps/web/src/development/ui-kit/ui-kit-page.tsx
@@ -2,12 +2,11 @@ import {
RdxBadge,
RdxContextPanel,
RdxEditorActionBar,
- RdxEditorLayout,
RdxFormGrid,
RdxPageActions,
RdxPageContainer,
+ RdxPageContent,
RdxPageHeader,
- RdxPageStack,
RdxPanel,
RdxRowActions,
RightPanel,
@@ -87,7 +86,7 @@ export default function UiKitPage() {
return (
-
+
-
+
+
+
+ Block 1
+ Block 2
+ Block 3
+
+
+
-
Block 1
Block 2
Block 3
-
+
-
Block 1
Block 2
Block 3
-
+
-
Block 1
Block 2
Block 3
-
+
@@ -454,12 +464,12 @@ export default function UiKitPage() {
title="Real list-page composition"
>
-
+
-
+
@@ -506,7 +516,7 @@ export default function UiKitPage() {
>
-
+
-
+
@@ -746,19 +756,19 @@ export default function UiKitPage() {
-
+
-
+
Centered editor content
-
+
@@ -809,7 +819,7 @@ export default function UiKitPage() {
>
-
+
@@ -849,7 +859,7 @@ export default function UiKitPage() {
-
+
@@ -875,7 +885,7 @@ export default function UiKitPage() {
-
+
@@ -972,14 +982,14 @@ export default function UiKitPage() {
-
+
New item} />}
description="Static list example"
title="List page"
/>
List content
-
+
@@ -988,26 +998,26 @@ export default function UiKitPage() {
-
+
Form content
-
+
-
+
Detail content
-
+
-
+
);
}
diff --git a/apps/web/src/home/ui/pages/home-page.tsx b/apps/web/src/home/ui/pages/home-page.tsx
index acbb0fd9..b7742d4e 100644
--- a/apps/web/src/home/ui/pages/home-page.tsx
+++ b/apps/web/src/home/ui/pages/home-page.tsx
@@ -1,9 +1,9 @@
import { PageErrorState } from "@erp/core/components";
import {
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPageHeader,
- RdxPageStack,
} from "@repo/rdx-ui/components";
import { Skeleton } from "@repo/shadcn-ui/components";
import { Link, useNavigate } from "react-router-dom";
@@ -64,7 +64,7 @@ export const HomePage = () => {
return (
-
+
{
{t("web.home.footer.link")}
-
+
);
diff --git a/apps/web/src/settings/settings-layout.tsx b/apps/web/src/settings/settings-layout.tsx
index 6f9c4669..8507a49c 100644
--- a/apps/web/src/settings/settings-layout.tsx
+++ b/apps/web/src/settings/settings-layout.tsx
@@ -1,8 +1,8 @@
import {
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPageHeader,
- RdxPageStack,
} from "@repo/rdx-ui/components";
import { Outlet } from "react-router-dom";
@@ -30,7 +30,7 @@ export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
title={t("web.settings.title")}
/>
-
+
@@ -40,7 +40,7 @@ export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
-
+
);
diff --git a/docs/frontend/frontend-architecture.md b/docs/frontend/frontend-architecture.md
index f8175b41..0590715a 100644
--- a/docs/frontend/frontend-architecture.md
+++ b/docs/frontend/frontend-architecture.md
@@ -61,6 +61,16 @@ Application shell
Dentro de `AppMain`, una pantalla usa `RdxPageFrame`; el sistema visual y sus reglas se documentan en [UI system](./ui-system.md).
+```text
+AppMain
+└── RdxPageFrame
+ ├── header
+ ├── content
+ │ └── RdxPageContainer
+ │ └── RdxPageContent
+ └── footer opcional
+```
+
## 6. Identity y sesión
El runtime actual se compone en `apps/web/src/app.tsx`:
@@ -130,4 +140,3 @@ El estado remoto permanece en TanStack Query. No se duplica en estado local salv
- No introducir acceso a red en UI ni reglas de negocio en Pages.
- Mantener routing, sesión, tenant y sistema visual como responsabilidades separadas.
- Cambios de API visual pública deben sincronizar implementación, [UI system](./ui-system.md), UI Kit y tests.
-
diff --git a/docs/frontend/ui-patterns.md b/docs/frontend/ui-patterns.md
index f1a67952..c1836832 100644
--- a/docs/frontend/ui-patterns.md
+++ b/docs/frontend/ui-patterns.md
@@ -9,7 +9,7 @@ Los componentes aquí citados se definen en `ui-system.md`; este documento expli
```tsx
-
+
{refreshError}
-
+
```
@@ -40,12 +40,10 @@ El controller de página concentra URL, filtros, consulta, estados y navegación
footer={ }
>
-
-
- {notice}
- {fields}
-
-
+
+ {notice}
+ {fields}
+
```
@@ -185,4 +183,3 @@ Las traducciones productivas deben probarse sin sustituirlas por un diccionario
- [ ] Acciones, permisos y navegación permanecen en el consumidor.
- [ ] Responsive, teclado, foco, i18n y light/dark están validados.
- [ ] Implementación, documentación, UI Kit y tests siguen sincronizados.
-
diff --git a/docs/frontend/ui-system.md b/docs/frontend/ui-system.md
index d67573aa..d2e28aca 100644
--- a/docs/frontend/ui-system.md
+++ b/docs/frontend/ui-system.md
@@ -28,8 +28,7 @@ AppMain
│ └── RdxEditorHeader
├── content (scroll principal)
│ └── RdxPageContainer
- │ ├── RdxPageStack
- │ └── RdxEditorLayout
+ │ └── RdxPageContent
└── footer opcional
└── RdxEditorActionBar
```
@@ -52,7 +51,7 @@ Cada nivel tiene una sola responsabilidad. No se reconstruye viewport, anchura y
`padding="none"` elimina únicamente su padding. El container no controla altura ni scroll.
-`RdxPageStack` establece el ritmo vertical:
+`RdxPageContent` establece el ritmo vertical del main:
| Spacing | Gap |
| --- | --- |
@@ -93,9 +92,9 @@ Ninguno usa `sticky` para seleccionar una variante. El frame coloca el header fu
Ordena regiones `secondary`, `primary` y `overflow`. No decide qué acciones existen ni sus permisos.
-### `RdxEditorLayout`
+### `RdxPageContent`
-Distribuye main y un `aside` opcional. No controla width, padding ni scroll. Sin aside no reserva una columna. En desktop, el aside usa `22rem`; en anchos menores se apila.
+Apila verticalmente el main y distribuye un `aside` opcional. No controla width, padding ni scroll. Sin aside no reserva una columna. En desktop, el aside usa `22rem`; en anchos menores se apila. `spacing` afecta únicamente al main.
El aside aloja contexto secundario, metadata o configuración auxiliar. No se mueven campos allí solo por estética.
@@ -182,4 +181,3 @@ Cada cambio de API pública debe actualizar conjuntamente:
- Colores físicos o color como única señal.
Las recetas para construir páginas concretas están en [UI patterns](./ui-patterns.md).
-
diff --git a/docs/settings/frontend-erp-settings-system-design.md b/docs/settings/frontend-erp-settings-system-design.md
index 3292e120..a17868e2 100644
--- a/docs/settings/frontend-erp-settings-system-design.md
+++ b/docs/settings/frontend-erp-settings-system-design.md
@@ -776,7 +776,7 @@ Ejemplos:
```txt
RdxPageContainer
RdxPageHeader
-RdxPageStack
+RdxPageContent
```
No mover a `packages/rdx-ui`:
diff --git a/docs/suppliers/frontend-suppliers-ui-ux-design.md b/docs/suppliers/frontend-suppliers-ui-ux-design.md
index e33284e1..47a99cfa 100644
--- a/docs/suppliers/frontend-suppliers-ui-ux-design.md
+++ b/docs/suppliers/frontend-suppliers-ui-ux-design.md
@@ -118,7 +118,7 @@ Todos los textos visibles pertenecen al namespace `Suppliers`. Se mantienen recu
## 17. Componentes reutilizados
-- `RdxPageContainer`, `RdxPageStack`, `RdxPageHeader`, `RdxPageActions`;
+- `RdxPageContainer`, `RdxPageContent`, `RdxPageHeader`, `RdxPageActions`;
- `RdxEditorPageLayout`, `RdxPanel`, `RdxFormGrid`;
- `DataTable`, `SkeletonDataTable`, `DataTableColumnHeader`, `RdxRowActions`;
- `TextField`, `SelectField`, `PageFormHeader`, `FormActionsBar`;
diff --git a/modules/audit/src/web/list/ui/audit-page.tsx b/modules/audit/src/web/list/ui/audit-page.tsx
index de53eefc..6115ff27 100644
--- a/modules/audit/src/web/list/ui/audit-page.tsx
+++ b/modules/audit/src/web/list/ui/audit-page.tsx
@@ -1,9 +1,9 @@
import { ErrorAlert, PageErrorState, SimpleSearchInput } from "@erp/core/components";
import {
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPageHeader,
- RdxPageStack,
} from "@repo/rdx-ui/components";
import {
Button,
@@ -54,7 +54,7 @@ export const AuditPage = () => {
return (
-
+
{controller.isError && controller.hasUsableData ? (
@@ -97,7 +97,7 @@ export const AuditPage = () => {
-
+
);
diff --git a/modules/customer-invoices/src/web/proformas/create/ui/components/proforma-create-skeleton.tsx b/modules/customer-invoices/src/web/proformas/create/ui/components/proforma-create-skeleton.tsx
index cfb752ea..ac27c8e6 100644
--- a/modules/customer-invoices/src/web/proformas/create/ui/components/proforma-create-skeleton.tsx
+++ b/modules/customer-invoices/src/web/proformas/create/ui/components/proforma-create-skeleton.tsx
@@ -1,4 +1,4 @@
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import { Skeleton } from "@repo/shadcn-ui/components";
export const ProformaCreateSkeleton = () => {
@@ -12,13 +12,13 @@ export const ProformaCreateSkeleton = () => {
}
>
-
+
-
+
);
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 75870dcc..dd1ae51a 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
@@ -1,12 +1,7 @@
import { ErrorAlert } from "@erp/core/components";
import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
import { QuickCreateCustomerDialog, SelectCustomerDialog } from "@erp/customers";
-import {
- RdxEditorLayout,
- RdxPageContainer,
- RdxPageFrame,
- RdxPageStack,
-} from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import { FormProvider } from "react-hook-form";
import { ProformaInfoAlert } from "../../../update/ui/components";
@@ -39,47 +34,45 @@ export const ProformaCreatePage = () => {
}
>
-
-
- {createCtrl.isCreateError && (
-
- )}
-
- {createCtrl.isSeriesLoadError && (
-
- )}
-
-
+ {createCtrl.isCreateError && (
+
-
-
+ )}
+
+ {createCtrl.isSeriesLoadError && (
+
+ )}
+
+
+
diff --git a/modules/customer-invoices/src/web/proformas/list/ui/pages/scoped-list-proformas-page-view.tsx b/modules/customer-invoices/src/web/proformas/list/ui/pages/scoped-list-proformas-page-view.tsx
index a51f1c0c..8d695aa7 100644
--- a/modules/customer-invoices/src/web/proformas/list/ui/pages/scoped-list-proformas-page-view.tsx
+++ b/modules/customer-invoices/src/web/proformas/list/ui/pages/scoped-list-proformas-page-view.tsx
@@ -2,9 +2,9 @@ import { ErrorAlert } from "@erp/core/components";
import {
RdxPageActions,
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPageHeader,
- RdxPageStack,
} from "@repo/rdx-ui/components";
import type { ReactNode } from "react";
@@ -33,7 +33,7 @@ export const ScopedListProformasPageView = ({
return (
-
+
: undefined}
description={description}
@@ -45,7 +45,7 @@ export const ScopedListProformasPageView = ({
) : null}
{content}
-
+
{dialogs}
diff --git a/modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-editor-form.tsx b/modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-editor-form.tsx
index 883d23f9..ec6dc057 100644
--- a/modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-editor-form.tsx
+++ b/modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-editor-form.tsx
@@ -1,5 +1,5 @@
import type { CustomerSelectionOption } from "@erp/customers";
-import { RdxEditorLayout, type SelectFieldItem } from "@repo/rdx-ui/components";
+import { RdxPageContent, type SelectFieldItem } from "@repo/rdx-ui/components";
import { preventEnterKeySubmitForm } from "@repo/rdx-ui/helpers";
import type { SubmitEventHandler } from "react";
@@ -53,43 +53,42 @@ export const ProformaUpdateEditorForm = ({
className,
}: ProformaUpdateEditorProps) => {
return (
-
-
-
-
-
-
-
- }
- className={className}
- >
-
-
-
-
+ }
+ className={className}
+ >
+
+
+
+
+
);
};
diff --git a/modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.test.tsx b/modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.test.tsx
index c6d4e507..83db6c4f 100644
--- a/modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.test.tsx
+++ b/modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.test.tsx
@@ -67,7 +67,7 @@ test("conecta la alta rápida directa y la alta rápida desde selector con callb
{footer}
>
),
- RdxPageStack: ({ children }: { children: ReactNode }) => children,
+ RdxPageContent: ({ children }: { children: ReactNode }) => children,
RhfSubmitActionButton: () => null,
},
});
diff --git a/modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx b/modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx
index 4f550173..8b61f15d 100644
--- a/modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx
+++ b/modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx
@@ -7,8 +7,8 @@ import {
RdxBadge,
RdxEditorActionBar,
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
- RdxPageStack,
RhfSubmitActionButton,
} from "@repo/rdx-ui/components";
import { showErrorToast } from "@repo/rdx-ui/helpers";
@@ -54,43 +54,45 @@ export const ProformaUpdatePage = () => {
if (ctrl.pageError) {
return (
-
-
-
+
+
-
+ : undefined
+ }
+ title={ctrl.pageError.title}
+ variant={ctrl.pageError.variant}
+ />
+
+
+
);
}
@@ -188,7 +190,7 @@ export const ProformaUpdatePage = () => {
{hasPageAlerts ? (
-
+
{updateCtrl.isUpdateError && (
{
)}
/>
)}
-
+
) : null}
diff --git a/modules/customer-invoices/src/web/recurring-proformas/create/recurring-proforma-create-page.tsx b/modules/customer-invoices/src/web/recurring-proformas/create/recurring-proforma-create-page.tsx
index e2d11c4a..6eaf0af5 100644
--- a/modules/customer-invoices/src/web/recurring-proformas/create/recurring-proforma-create-page.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/create/recurring-proforma-create-page.tsx
@@ -1,8 +1,8 @@
import { useHookForm } from "@erp/core/hooks";
import {
RdxEditorHeader,
- RdxEditorLayout,
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
} from "@repo/rdx-ui/components";
import {
@@ -88,7 +88,7 @@ export const RecurringProformaCreatePage = () => {
}
>
-
+
-
+
);
diff --git a/modules/customer-invoices/src/web/recurring-proformas/detail/ui/pages/recurring-proforma-detail-page.tsx b/modules/customer-invoices/src/web/recurring-proformas/detail/ui/pages/recurring-proforma-detail-page.tsx
index c0781fc6..547e7773 100644
--- a/modules/customer-invoices/src/web/recurring-proformas/detail/ui/pages/recurring-proforma-detail-page.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/detail/ui/pages/recurring-proforma-detail-page.tsx
@@ -1,5 +1,5 @@
import { PageErrorState } from "@erp/core/components";
-import { RdxBadge, RdxPageContainer, RdxPageFrame, RdxPageStack } from "@repo/rdx-ui/components";
+import { RdxBadge, RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import { Button, Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
import { ArrowLeftIcon } from "lucide-react";
import { useNavigate, useParams } from "react-router-dom";
@@ -130,7 +130,7 @@ export const RecurringProformaDetailPage = () => {
}
>
-
+
{
{t("recurring_proformas.detail.back")}
-
+
);
diff --git a/modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.test.tsx b/modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.test.tsx
index f8d7bed4..88aa85f3 100644
--- a/modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.test.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.test.tsx
@@ -125,7 +125,7 @@ mock.module("@repo/rdx-ui/components", {
namedExports: {
RdxPageContainer: ({ children }: { children: ReactNode }) => {children}
,
RdxPageFrame: ({ children }: { children: ReactNode }) => {children}
,
- RdxPageStack: ({ children }: { children: ReactNode }) => {children}
,
+ RdxPageContent: ({ children }: { children: ReactNode }) => {children}
,
RdxPageHeader: ({
title,
description,
diff --git a/modules/customer-invoices/src/web/recurring-proformas/list/ui/pages/scoped-list-recurring-proformas-page-view.tsx b/modules/customer-invoices/src/web/recurring-proformas/list/ui/pages/scoped-list-recurring-proformas-page-view.tsx
index 210d5308..162a16a7 100644
--- a/modules/customer-invoices/src/web/recurring-proformas/list/ui/pages/scoped-list-recurring-proformas-page-view.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/list/ui/pages/scoped-list-recurring-proformas-page-view.tsx
@@ -2,9 +2,9 @@ import { ErrorAlert } from "@erp/core/components";
import {
RdxPageActions,
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPageHeader,
- RdxPageStack,
} from "@repo/rdx-ui/components";
import type { ReactNode } from "react";
@@ -31,7 +31,7 @@ export const ScopedListRecurringProformasPageView = ({
return (
-
+
: undefined}
description={description}
@@ -43,7 +43,7 @@ export const ScopedListRecurringProformasPageView = ({
) : null}
{content}
-
+
);
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 49d5a1f4..4a67d33b 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
@@ -1,6 +1,6 @@
import { ErrorAlert } from "@erp/core/components";
import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import { FormProvider } from "react-hook-form";
import { useTranslation } from "../../../i18n";
@@ -47,28 +47,22 @@ export const CustomerCreatePage = () => {
}
>
-
-
-
- {createCtrl.isCreateError ? (
-
- ) : null}
+
+ {createCtrl.isCreateError ? (
+
+ ) : null}
-
-
-
-
+
+
diff --git a/modules/customers/src/web/list/ui/pages/list-customers-page-view.tsx b/modules/customers/src/web/list/ui/pages/list-customers-page-view.tsx
index 7d00e22b..1231d113 100644
--- a/modules/customers/src/web/list/ui/pages/list-customers-page-view.tsx
+++ b/modules/customers/src/web/list/ui/pages/list-customers-page-view.tsx
@@ -2,9 +2,9 @@ import { ErrorAlert } from "@erp/core/components";
import {
RdxPageActions,
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPageHeader,
- RdxPageStack,
} from "@repo/rdx-ui/components";
import type { ReactNode } from "react";
@@ -33,7 +33,7 @@ export const ListCustomersPageView = ({
return (
-
+
: undefined}
description={description}
@@ -45,7 +45,7 @@ export const ListCustomersPageView = ({
) : null}
{content}
-
+
{dialogs}
diff --git a/modules/customers/src/web/update/ui/pages/customer-update-page.tsx b/modules/customers/src/web/update/ui/pages/customer-update-page.tsx
index 4d18cc09..dc782b93 100644
--- a/modules/customers/src/web/update/ui/pages/customer-update-page.tsx
+++ b/modules/customers/src/web/update/ui/pages/customer-update-page.tsx
@@ -1,11 +1,6 @@
import { ErrorAlert, PageErrorState } from "@erp/core/components";
import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
-import {
- RdxEditorLayout,
- RdxPageContainer,
- RdxPageFrame,
- RdxPageStack,
-} from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import { FormProvider } from "react-hook-form";
import { useTranslation } from "../../../i18n";
@@ -16,6 +11,7 @@ import { CustomerUpdateEditorForm } from "../editor";
export const CustomerUpdatePage = () => {
const { t } = useTranslation();
+
const ctrl = useCustomerUpdatePageController();
const { updateCtrl, returnTo } = ctrl;
@@ -78,6 +74,7 @@ export const CustomerUpdatePage = () => {
hola}
header={
{
/>
}
>
-
- {hasPageAlerts ? (
-
-
- {updateCtrl.isUpdateError && (
-
- )}
-
-
- ) : null}
+
+
+ {hasPageAlerts ? (
+
+
+ {updateCtrl.isUpdateError && (
+
+ )}
+
+
+ ) : null}
+
+
-
{updateCtrl.isUpdateError ? (
@@ -143,17 +148,9 @@ export const CustomerUpdatePage = () => {
)}
/>
) : null}
-
-
-
+
diff --git a/modules/identity/README.md b/modules/identity/README.md
index 60e9fcd6..09540ec3 100644
--- a/modules/identity/README.md
+++ b/modules/identity/README.md
@@ -88,7 +88,7 @@ Contenido visible actual:
- información personal: `name`, `email`, `language_code`
- modo `app-fullscreen`, sin sidebar principal
-- contenido centrado mediante `RdxPageContainer` y compuesto con `RdxEditorLayout`
+- contenido centrado mediante `RdxPageContainer` y compuesto con `RdxPageContent`
- seguridad mediante dialog para cambio de contraseña
- cierre de sesión reutilizando el flujo de logout existente
diff --git a/modules/identity/src/web/account/ui/pages/account-page-states.tsx b/modules/identity/src/web/account/ui/pages/account-page-states.tsx
index 5653e877..2c4df334 100644
--- a/modules/identity/src/web/account/ui/pages/account-page-states.tsx
+++ b/modules/identity/src/web/account/ui/pages/account-page-states.tsx
@@ -1,17 +1,17 @@
import { PageErrorState } from "@erp/core/components";
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import type { ComponentProps } from "react";
export const AccountLoadingState = ({ label }: { label: string }) => (
-
+
-
+
);
@@ -41,7 +41,7 @@ export const AccountErrorState = ({
}: AccountErrorStateProps) => (
-
+
-
+
);
diff --git a/modules/identity/src/web/account/ui/pages/account-page.tsx b/modules/identity/src/web/account/ui/pages/account-page.tsx
index e376088d..cf51a817 100644
--- a/modules/identity/src/web/account/ui/pages/account-page.tsx
+++ b/modules/identity/src/web/account/ui/pages/account-page.tsx
@@ -4,8 +4,8 @@ import {
CancelActionButton,
RdxEditorActionBar,
RdxEditorHeader,
- RdxEditorLayout,
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPanel,
RhfSubmitActionButton,
@@ -207,7 +207,7 @@ export const AccountPage = () => {
}
>
-
+
@@ -352,7 +352,7 @@ export const AccountPage = () => {
-
+
{
}
>
-
+
{controller.mutation.isError ? (
@@ -55,7 +55,7 @@ export const SupplierCreatePage = () => {
/>
-
+
diff --git a/modules/suppliers/src/web/list/ui/suppliers-list-page.tsx b/modules/suppliers/src/web/list/ui/suppliers-list-page.tsx
index 2991d972..10ae0658 100644
--- a/modules/suppliers/src/web/list/ui/suppliers-list-page.tsx
+++ b/modules/suppliers/src/web/list/ui/suppliers-list-page.tsx
@@ -2,9 +2,9 @@ import { PageErrorState, SimpleSearchInput } from "@erp/core/components";
import {
RdxPageActions,
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPageHeader,
- RdxPageStack,
} from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import { PlusIcon } from "lucide-react";
@@ -58,7 +58,7 @@ export const SuppliersListPage = () => {
return (
-
+
{
/>
}
/>
-
+
);
diff --git a/modules/suppliers/src/web/update/supplier-update-page.tsx b/modules/suppliers/src/web/update/supplier-update-page.tsx
index 14554298..c6bab6a1 100644
--- a/modules/suppliers/src/web/update/supplier-update-page.tsx
+++ b/modules/suppliers/src/web/update/supplier-update-page.tsx
@@ -1,6 +1,6 @@
import { ErrorAlert, PageErrorState } from "@erp/core/components";
import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
-import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import { FormProvider } from "react-hook-form";
import { createSearchParams, useNavigate, useParams, useSearchParams } from "react-router-dom";
@@ -65,7 +65,7 @@ export const SupplierUpdatePage = () => {
}
>
-
+
{controller.mutation.isError ? (
@@ -81,7 +81,7 @@ export const SupplierUpdatePage = () => {
/>
-
+
diff --git a/modules/suppliers/src/web/view/supplier-detail-page.tsx b/modules/suppliers/src/web/view/supplier-detail-page.tsx
index ff7eeb1d..91a54f19 100644
--- a/modules/suppliers/src/web/view/supplier-detail-page.tsx
+++ b/modules/suppliers/src/web/view/supplier-detail-page.tsx
@@ -3,9 +3,9 @@ import { useReturnToNavigation } from "@erp/core/hooks";
import {
RdxPageActions,
RdxPageContainer,
+ RdxPageContent,
RdxPageFrame,
RdxPageHeader,
- RdxPageStack,
} from "@repo/rdx-ui/components";
import { Button, Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
import { FileTextIcon, LanguagesIcon, MailIcon, MapPinIcon, PencilIcon } from "lucide-react";
@@ -99,7 +99,7 @@ export const SupplierDetailPage = () => {
}
>
-
+
@@ -186,7 +186,7 @@ export const SupplierDetailPage = () => {
-
+
);
diff --git a/packages/rdx-ui/src/components/editor-page/index.ts b/packages/rdx-ui/src/components/editor-page/index.ts
index 18a2fe04..5cd0890e 100644
--- a/packages/rdx-ui/src/components/editor-page/index.ts
+++ b/packages/rdx-ui/src/components/editor-page/index.ts
@@ -1,4 +1,3 @@
export * from "./rdx-editor-action-bar.tsx";
export * from "./rdx-editor-header.tsx";
-export * from "./rdx-editor-layout.tsx";
export * from "./rdx-panel.tsx";
diff --git a/packages/rdx-ui/src/components/editor-page/rdx-editor-foundations.test.tsx b/packages/rdx-ui/src/components/editor-page/rdx-editor-foundations.test.tsx
index ec5633c7..e420762e 100644
--- a/packages/rdx-ui/src/components/editor-page/rdx-editor-foundations.test.tsx
+++ b/packages/rdx-ui/src/components/editor-page/rdx-editor-foundations.test.tsx
@@ -7,18 +7,6 @@ import { RdxFormGrid } from "../form/rdx-form-grid.tsx";
import { RdxEditorActionBar } from "./rdx-editor-action-bar.tsx";
import { RdxEditorHeader } from "./rdx-editor-header.tsx";
-import { RdxEditorLayout } from "./rdx-editor-layout.tsx";
-
-test("RdxEditorLayout only distributes main content and an optional aside", () => {
- const html = renderToStaticMarkup(
- Aside}>Main
- );
-
- assert.match(html, /grid/);
- assert.match(html, / {
const html = renderToStaticMarkup(
diff --git a/packages/rdx-ui/src/components/editor-page/rdx-editor-layout.tsx b/packages/rdx-ui/src/components/editor-page/rdx-editor-layout.tsx
deleted file mode 100644
index 6ce29ad9..00000000
--- a/packages/rdx-ui/src/components/editor-page/rdx-editor-layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-
-export interface RdxEditorLayoutProps extends Omit, "children"> {
- children: ReactNode;
- aside?: ReactNode;
-}
-
-/**
- * Distribuye el contenido interno de un editor entre una región principal
- * y un aside opcional.
- */
-export const RdxEditorLayout = ({ children, aside, className, ...props }: RdxEditorLayoutProps) => {
- if (!aside) {
- return (
-
- {children}
-
- );
- }
-
- return (
-
- );
-};
diff --git a/packages/rdx-ui/src/components/layout/index.ts b/packages/rdx-ui/src/components/layout/index.ts
index 99ddb453..df106eeb 100644
--- a/packages/rdx-ui/src/components/layout/index.ts
+++ b/packages/rdx-ui/src/components/layout/index.ts
@@ -3,6 +3,6 @@ export * from "./app-header.tsx";
export * from "./app-layout.tsx";
export * from "./rdx-page-actions.tsx";
export * from "./rdx-page-container.tsx";
+export * from "./rdx-page-content.tsx";
export * from "./rdx-page-frame.tsx";
export * from "./rdx-page-header.tsx";
-export * from "./rdx-page-stack.tsx";
diff --git a/packages/rdx-ui/src/components/layout/rdx-page-content.tsx b/packages/rdx-ui/src/components/layout/rdx-page-content.tsx
new file mode 100644
index 00000000..c5ae0686
--- /dev/null
+++ b/packages/rdx-ui/src/components/layout/rdx-page-content.tsx
@@ -0,0 +1,52 @@
+import { cn } from "@repo/shadcn-ui/lib/utils";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export type RdxPageContentSpacing = "none" | "compact" | "default" | "relaxed";
+
+export interface RdxPageContentProps extends Omit, "children"> {
+ children: ReactNode;
+ aside?: ReactNode;
+ spacing?: RdxPageContentSpacing;
+}
+
+const SPACING_CLASSNAME: Record = {
+ none: "gap-0",
+ compact: "gap-4",
+ default: "gap-6",
+ relaxed: "gap-8",
+};
+
+/**
+ * Compone el contenido interior de una página.
+ *
+ * Apila verticalmente el contenido principal y, cuando existe,
+ * distribuye un aside responsive junto al main.
+ */
+export const RdxPageContent = ({
+ children,
+ aside,
+ spacing = "default",
+ className,
+ ...props
+}: RdxPageContentProps) => {
+ if (!aside) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ return (
+
+ );
+};
diff --git a/packages/rdx-ui/src/components/layout/rdx-page-foundations.test.tsx b/packages/rdx-ui/src/components/layout/rdx-page-foundations.test.tsx
index ab5796a8..13635b69 100644
--- a/packages/rdx-ui/src/components/layout/rdx-page-foundations.test.tsx
+++ b/packages/rdx-ui/src/components/layout/rdx-page-foundations.test.tsx
@@ -5,9 +5,9 @@ import { renderToStaticMarkup } from "react-dom/server";
import { RdxPageActions } from "./rdx-page-actions.tsx";
import { RdxPageContainer } from "./rdx-page-container.tsx";
+import { RdxPageContent } from "./rdx-page-content.tsx";
import { RdxPageFrame } from "./rdx-page-frame.tsx";
import { RdxPageHeader } from "./rdx-page-header.tsx";
-import { RdxPageStack } from "./rdx-page-stack.tsx";
test("RdxPageFrame separates fixed regions from the scrollable content", () => {
const html = renderToStaticMarkup(
@@ -57,11 +57,11 @@ test("RdxPageContainer permite eliminar el padding exterior", () => {
assert.doesNotMatch(html, /py-4/);
});
-test("RdxPageStack applies default spacing and className", () => {
+test("RdxPageContent applies default spacing and className", () => {
const html = renderToStaticMarkup(
-
+
One
-
+
);
assert.match(html, /flex/);
@@ -69,16 +69,38 @@ test("RdxPageStack applies default spacing and className", () => {
assert.match(html, /custom-stack/);
});
-test("RdxPageStack applies spacing variants", () => {
- const noneHtml = renderToStaticMarkup(None );
- const compactHtml = renderToStaticMarkup(Compact );
- const relaxedHtml = renderToStaticMarkup(Relaxed );
+test("RdxPageContent applies spacing variants", () => {
+ const noneHtml = renderToStaticMarkup(None );
+ const compactHtml = renderToStaticMarkup(
+ Compact
+ );
+ const relaxedHtml = renderToStaticMarkup(
+ Relaxed
+ );
assert.match(noneHtml, /gap-0/);
assert.match(compactHtml, /gap-4/);
assert.match(relaxedHtml, /gap-8/);
});
+test("RdxPageContent renders an optional responsive aside and forwards HTML attributes", () => {
+ const withAsideHtml = renderToStaticMarkup(
+ Aside} data-layout="content">
+ Main
+
+ );
+ const withoutAsideHtml = renderToStaticMarkup(Main );
+ const falseAsideHtml = renderToStaticMarkup(Main );
+
+ assert.match(withAsideHtml, /data-layout="content"/);
+ assert.match(withAsideHtml, /grid/);
+ assert.match(withAsideHtml, /xl:grid-cols-\[minmax\(0,1fr\)_22rem\]/);
+ assert.match(withAsideHtml, / {
const html = renderToStaticMarkup(
{
return (
- {header ?
{header}
: null}
-
+ {header ?
{header}
: null}
+
{children}
- {footer ?
{footer}
: null}
+ {footer ?
{footer}
: null}
);
};
diff --git a/packages/rdx-ui/src/components/layout/rdx-page-stack.tsx b/packages/rdx-ui/src/components/layout/rdx-page-stack.tsx
deleted file mode 100644
index 0708d2dc..00000000
--- a/packages/rdx-ui/src/components/layout/rdx-page-stack.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-
-export type RdxPageStackSpacing = "none" | "compact" | "default" | "relaxed";
-
-export interface RdxPageStackProps extends Omit
, "children"> {
- children: ReactNode;
- spacing?: RdxPageStackSpacing;
-}
-
-const SPACING_CLASSNAME: Record = {
- none: "gap-0",
- compact: "gap-4",
- default: "gap-6",
- relaxed: "gap-8",
-};
-
-/**
- * Apila contenido verticalmente aplicando un espaciado consistente.
- * No controla viewport, scroll ni estructura de página.
- */
-
-export const RdxPageStack = ({
- children,
- className,
- spacing = "default",
- ...props
-}: RdxPageStackProps) => {
- return (
-
- {children}
-
- );
-};