@dotcms/react 0.0.1-alpha.17 → 0.0.1-alpha.19

package/index.esm.js

@@ -1646,11 +1646,11 @@ const PageContext = /*#__PURE__*/createContext(null);
  */
 function PageProvider(props) {
   const {
-    entity,
+    pageContext,
     children
   } = props;
   return jsx(PageContext.Provider, {
-    value: entity,
+    value: pageContext,
     children: children
   });
 }
@@ -1752,7 +1752,7 @@ var css_248z = ".column-module_col-start-1__GK-q- {\n    grid-column-start: 1;\n
 var styles = {"col-start-1":"column-module_col-start-1__GK-q-","col-start-2":"column-module_col-start-2__1DmkY","col-start-3":"column-module_col-start-3__HNEPh","col-start-4":"column-module_col-start-4__oCAwh","col-start-5":"column-module_col-start-5__re1rB","col-start-6":"column-module_col-start-6__dkB4w","col-start-7":"column-module_col-start-7__kEfJb","col-start-8":"column-module_col-start-8__Yx31z","col-start-9":"column-module_col-start-9__9YiVY","col-start-10":"column-module_col-start-10__6AFbk","col-start-11":"column-module_col-start-11__LP24D","col-start-12":"column-module_col-start-12__8p0QS","col-end-1":"column-module_col-end-1__G9axv","col-end-2":"column-module_col-end-2__pYjHG","col-end-3":"column-module_col-end-3__4woe6","col-end-4":"column-module_col-end-4__zlBaT","col-end-5":"column-module_col-end-5__aC-y8","col-end-6":"column-module_col-end-6__YljAP","col-end-7":"column-module_col-end-7__lpQrW","col-end-8":"column-module_col-end-8__F6UVd","col-end-9":"column-module_col-end-9__kvQ3T","col-end-10":"column-module_col-end-10__XJhrd","col-end-11":"column-module_col-end-11__nx-lF","col-end-12":"column-module_col-end-12__LIRnk","col-end-13":"column-module_col-end-13__0p7YI"};
 styleInject(css_248z);
 
-function NoContent({
+function NoComponent({
   contentType
 }) {
   return jsxs("div", {
@@ -1760,6 +1760,9 @@ function NoContent({
     children: ["No Component for ", contentType]
   });
 }
+function EmptyContent() {
+  return null;
+}
 function Container({
   containerRef
 }) {
@@ -1772,7 +1775,9 @@ function Container({
   } = containerRef;
   // Get the containers from the global context
   const {
-    containers,
+    pageAsset: {
+      containers
+    },
     components
   } = useContext(PageContext);
   const {
@@ -1799,7 +1804,9 @@ function Container({
     height: '10rem'
   };
   const ContainerChildren = contentlets.map(contentlet => {
-    const Component = components[contentlet.contentType] || NoContent;
+    const ContentTypeComponent = components[contentlet.contentType];
+    const DefaultComponent = components['CustomNoComponent'] || NoComponent;
+    const Component = isInsideEditor ? ContentTypeComponent || DefaultComponent : ContentTypeComponent || EmptyContent;
     return isInsideEditor ? jsx("div", {
       "data-testid": "dot-contentlet",
       "data-dot-object": "contentlet",
@@ -1891,15 +1898,15 @@ const Row = /*#__PURE__*/forwardRef((props, ref) => {
  * @returns {JSX.Element} - A JSX element that represents the layout for a DotCMS page.
  */
 function DotcmsLayout({
-  entity,
+  pageContext,
   config
 }) {
   const isInsideEditor = useDotcmsEditor(config);
   return jsx(PageProvider, {
-    entity: Object.assign({}, entity, {
+    pageContext: Object.assign({}, pageContext, {
       isInsideEditor
     }),
-    children: entity.layout.body.rows.map((row, index) => jsx(Row, {
+    children: pageContext.pageAsset.layout.body.rows.map((row, index) => jsx(Row, {
       row: row
     }, index))
   });
@@ -1910,7 +1917,7 @@ function DotcmsLayout({
  * It takes no parameters and returns the context value or `null` if it's not available.
  *
  * @category Hooks
- * @returns {PageProviderContext | null} - The context value or `null` if it's not available.
+ * @returns {DotCMSPageContext | null} - The context value or `null` if it's not available.
  */
 function useDotcmsPageContext() {
   return useContext(PageContext);

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.17",
+  "version": "0.0.1-alpha.19",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.17"
+    "@dotcms/client": "0.0.1-alpha.19"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {

package/src/lib/components/Column/Column.d.ts

@@ -1,5 +1,5 @@
-import { PageProviderContext } from '../PageProvider/PageProvider';
+import { DotCMSPageContext } from '../../models';
 export interface ColumnProps {
-    readonly column: PageProviderContext['layout']['body']['rows'][0]['columns'][0];
+    readonly column: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0];
 }
 export declare function Column({ column }: ColumnProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/Container/Container.d.ts

@@ -1,5 +1,5 @@
-import { PageProviderContext } from '../PageProvider/PageProvider';
+import { DotCMSPageContext } from '../../models';
 export interface ContainerProps {
-    readonly containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0];
+    readonly containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0];
 }
 export declare function Container({ containerRef }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/DotcmsLayout/DotcmsLayout.d.ts

@@ -1,26 +1,26 @@
 /// <reference types="react" />
 import { DotCMSPageEditorConfig } from '@dotcms/client';
-import { PageProviderContext } from '../PageProvider/PageProvider';
+import { DotCMSPageContext } from '../../models';
 /**
  * `DotcmsPageProps` is a type that defines the properties for the `DotcmsLayout` component.
  * It includes a readonly `entity` property that represents the context for a DotCMS page.
  *
  * @typedef {Object} DotcmsPageProps
  *
- * @property {PageProviderContext} entity - The context for a DotCMS page.
+ * @property {DotCMSPageContext} entity - The context for a DotCMS page.
  * @readonly
  */
 export type DotcmsPageProps = {
     /**
-     * `entity` is a readonly property of the `DotcmsPageProps` type.
+     * `pageContext` is a readonly property of the `DotcmsPageProps` type.
      * It represents the context for a DotCMS page and is of type `PageProviderContext`.
      *
-     * @property {PageProviderContext} entity
+     * @property {PageProviderContext} pageContext
      * @memberof DotcmsPageProps
-     * @type {PageProviderContext}
+     * @type {DotCMSPageContext}
      * @readonly
      */
-    readonly entity: PageProviderContext;
+    readonly pageContext: DotCMSPageContext;
     readonly config?: DotCMSPageEditorConfig;
 };
 /**
@@ -31,4 +31,4 @@ export type DotcmsPageProps = {
  * @param {DotcmsPageProps} props - The properties for the DotCMS page.
  * @returns {JSX.Element} - A JSX element that represents the layout for a DotCMS page.
  */
-export declare function DotcmsLayout({ entity, config }: DotcmsPageProps): JSX.Element;
+export declare function DotcmsLayout({ pageContext, config }: DotcmsPageProps): JSX.Element;

package/src/lib/components/PageProvider/PageProvider.d.ts

@@ -1,81 +1,8 @@
 import { ReactNode } from 'react';
 export interface PageProviderProps {
-    readonly entity: any;
+    readonly pageContext: any;
     readonly children: ReactNode;
 }
-export interface ContainerData {
-    [key: string]: {
-        container: {
-            path: string;
-            identifier: string;
-            maxContentlets: number;
-            parentPermissionable: Record<string, string>;
-        };
-        containerStructures: {
-            contentTypeVar: string;
-        }[];
-        contentlets: {
-            [key: string]: {
-                contentType: string;
-                identifier: string;
-                title: string;
-                inode: string;
-                onNumberOfPages: number;
-                baseType: string;
-                widgetTitle?: string;
-            }[];
-        };
-    };
-}
-export interface PageProviderContext {
-    /**
-     * `components` is a property of the `PageProviderProps` type.
-     * It is an object that maps content type variables to their corresponding React components.
-     *
-     * It will be use to render the contentlets in the page.
-     *
-     * @property {Object} components
-     * @memberof PageProviderProps
-     * @type {Object.<string, React.ElementType>}
-     */
-    components: {
-        [contentTypeVariable: string]: React.ElementType;
-    };
-    containers: ContainerData;
-    layout: {
-        header: boolean;
-        footer: boolean;
-        body: {
-            rows: {
-                styleClass: string;
-                columns: {
-                    styleClass: string;
-                    width: number;
-                    leftOffset: number;
-                    containers: {
-                        identifier: string;
-                        uuid: string;
-                    }[];
-                }[];
-            }[];
-        };
-    };
-    page: {
-        title: string;
-        identifier: string;
-    };
-    viewAs: {
-        language: {
-            id: string;
-        };
-        persona: {
-            keyTag: string;
-        };
-        variantId: string;
-    };
-    isInsideEditor: boolean;
-    runningExperimentId?: string;
-}
 /**
  * `PageProvider` is a functional component that provides a context for a DotCMS page.
  * It takes a `PageProviderProps` object as a parameter and returns a JSX element.

package/src/lib/components/Row/Row.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PageProviderContext } from '../PageProvider/PageProvider';
+import { DotCMSPageContext } from '../../models';
 /**
  * Props for the row component
  *
@@ -10,10 +10,10 @@ export interface RowProps {
     /**
      * Row data
      *
-     * @type {PageProviderContext['layout']['body']['rows'][0]}
+     * @type {DotCMSPageContext['layout']['body']['rows'][0]}
      * @memberof RowProps
      */
-    row: PageProviderContext['layout']['body']['rows'][0];
+    row: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0];
 }
 /**
  * Renders a row

package/src/lib/contexts/PageContext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { PageProviderContext } from '../components/PageProvider/PageProvider';
-export declare const PageContext: import("react").Context<PageProviderContext | null>;
+import { DotCMSPageContext } from '../models';
+export declare const PageContext: import("react").Context<DotCMSPageContext | null>;

package/src/lib/hooks/useDotcmsPageContext.d.ts

@@ -1,9 +1,9 @@
-import { PageProviderContext } from '../components/PageProvider/PageProvider';
+import { DotCMSPageContext } from '../models';
 /**
  * `useDotcmsPageContext` is a custom React hook that provides access to the `PageProviderContext`.
  * It takes no parameters and returns the context value or `null` if it's not available.
  *
  * @category Hooks
- * @returns {PageProviderContext | null} - The context value or `null` if it's not available.
+ * @returns {DotCMSPageContext | null} - The context value or `null` if it's not available.
  */
-export declare function useDotcmsPageContext(): PageProviderContext | null;
+export declare function useDotcmsPageContext(): DotCMSPageContext | null;

package/src/lib/mocks/mockPageContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { PageProviderContext } from '../components/PageProvider/PageProvider';
-export declare const mockPageContext: PageProviderContext;
+import { DotCMSPageContext } from '../models';
+export declare const mockPageContext: DotCMSPageContext;
 export declare const MockContextRender: ({ children, mockContext }: {
     children: JSX.Element;
-    mockContext: Partial<PageProviderContext>;
+    mockContext: Partial<DotCMSPageContext>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/models/index.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+export interface ContainerData {
+    [key: string]: {
+        container: {
+            path: string;
+            identifier: string;
+            maxContentlets: number;
+            parentPermissionable: Record<string, string>;
+        };
+        containerStructures: {
+            contentTypeVar: string;
+        }[];
+        contentlets: {
+            [key: string]: {
+                contentType: string;
+                identifier: string;
+                title: string;
+                inode: string;
+                onNumberOfPages: number;
+                widgetTitle?: string;
+                baseType: string;
+            }[];
+        };
+    };
+}
+export interface DotCMSPageContext {
+    /**
+     * `components` is a property of the `PageProviderProps` type.
+     * It is an object that maps content type variables to their corresponding React components.
+     *
+     * It will be use to render the contentlets in the page.
+     *
+     * @property {Object} components
+     * @memberof PageProviderProps
+     * @type {Object.<string, React.ElementType>}
+     */
+    components: {
+        [contentTypeVariable: string]: React.ElementType;
+    };
+    pageAsset: {
+        containers: ContainerData;
+        layout: {
+            header: boolean;
+            footer: boolean;
+            body: {
+                rows: {
+                    styleClass: string;
+                    columns: {
+                        styleClass: string;
+                        width: number;
+                        leftOffset: number;
+                        containers: {
+                            identifier: string;
+                            uuid: string;
+                        }[];
+                    }[];
+                }[];
+            };
+        };
+        page: {
+            title: string;
+            identifier: string;
+        };
+        viewAs: {
+            language: {
+                id: string;
+            };
+            persona: {
+                keyTag: string;
+            };
+            variantId: string;
+        };
+    };
+    isInsideEditor: boolean;
+}

package/src/lib/utils/utils.d.ts

@@ -1,5 +1,5 @@
-import { ContainerData, PageProviderContext } from '../components/PageProvider/PageProvider';
-export declare const getContainersData: (containers: ContainerData, containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0]) => {
+import { ContainerData, DotCMSPageContext } from '../models';
+export declare const getContainersData: (containers: ContainerData, containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]) => {
     acceptTypes: string;
     contentlets: {
         contentType: string;
@@ -7,8 +7,8 @@ export declare const getContainersData: (containers: ContainerData, containerRef
         title: string;
         inode: string;
         onNumberOfPages: number;
-        baseType: string;
         widgetTitle?: string | undefined;
+        baseType: string;
     }[];
     variantId: string;
     path: string;