SDK: Create DotCMSPageBody React Component to render page content

[rjvelazco]

Caution

GitHub Issue Blocked by: #31134

Parent Issue

#30943

Background

The DotcmsLayout component was originally designed to render the page and listen for changes from the UVE. However, its responsibilities have grown too complex by combining layout rendering with editor-specific logic. To address this, we will deprecate the DotcmsLayout component and introduce a new, cleaner component called DotCMSPageBody.

DotCMSPageBody will focus solely on rendering the content, ensuring a separation of concerns. UVE-related logic will no longer be included in this component, and developers can rely on other mechanisms for editor communication.

Tasks

Preview Give feedback

1. Deprecate DotcmsLayout with appropriate warnings in the codebase and documentation.
2. Build the new DotCMSPageBody component, ensuring it focuses solely on rendering the content.
3. Ensure the components prop in DotCMSPageBody is optional.
4. Verify the DotCMSPageBody component works in both Edit and Live modes.
5. Update SDK documentation to highlight the deprecation of DotcmsLayout and promote DotCMSPageBody.
6. Ensure no regressions in the layout rendering process after migration.
7. All existing use cases for DotcmsLayout are migrated to DotCMSPageBody.
8. If Components is not passed, the app show not break, console a warning.
9. Include a devMode prop to show the Container is EMPTY and No Component for ${Contenty} messages outside the UVE.

Proposed Objective

Same as Parent Issue

Proposed Priority

Priority 3 - Average

Acceptance Criteria

Important

Make sure the withExperiments works with this new component.

• Deprecate DotcmsLayout.
• Build DotCMSPageBody.
• Test Compatibility.
• Update Examples and Documentation.
• DotcmsLayout should still work.

Pseudo-code

Use Case

Important

The new implementation should emphasize simplicity and flexibility.

import { DotCMSPageBody } from '@dotcms/client';

export function MyPage({ pageAsset }) {
    return (
        <DotCMSPageBody 
            pageAsset={pageAsset} 
            components={componentsMap} 
        />
    );
}

Quality Assurance Notes

• Test DotCMSPageBody with and without the components prop to ensure both scenarios are functional.
• Verify rendering behavior in both Edit and Live modes to confirm consistent functionality.
• Confirm no residual UVE-related logic is left in the new component.

Sub-Tasks & Estimates

• Mark DotcmsLayout as deprecated in the SDK (2h).
• Build DotCMSPageBody as a standalone component (8h).
• Update SDK examples and documentation to reflect the changes (4h).
• Perform regression testing to ensure no breaking changes (6h).