@dotcms/react 0.0.1-alpha.3 → 0.0.1-alpha.30

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.30",
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "@dotcms/client": "latest"
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@dotcms/client": "0.0.1-alpha.30"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {
@@ -28,5 +28,6 @@
   "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md",
   "module": "./index.esm.js",
   "type": "module",
-  "main": "./index.esm.js"
-}
+  "main": "./index.esm.js",
+  "types": "./index.esm.d.ts"
+}

package/src/index.d.ts

@@ -2,4 +2,3 @@ export * from './lib/components/DotcmsLayout/DotcmsLayout';
 export * from './lib/components/PageProvider/PageProvider';
 export * from './lib/components/Row/Row';
 export * from './lib/hooks/useDotcmsPageContext';
-export * from './lib/hooks/usePageEditor';

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,25 +1,27 @@
 /// <reference types="react" />
-import { PageProviderContext } from '../PageProvider/PageProvider';
+import { DotCMSPageEditorConfig } from '@dotcms/client';
+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;
 };
 /**
  * `DotcmsLayout` is a functional component that renders a layout for a DotCMS page.
@@ -29,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(props: DotcmsPageProps): JSX.Element;
+export declare function DotcmsLayout(dotPageProps: DotcmsPageProps): JSX.Element;

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

@@ -1,76 +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;
-        };
-        containerStructures: {
-            contentTypeVar: string;
-        }[];
-        contentlets: {
-            [key: string]: {
-                contentType: string;
-                identifier: string;
-                title: string;
-                inode: 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;
-        };
-    };
-    isInsideEditor: boolean;
-}
 /**
  * `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/useDotcmsEditor.d.ts

@@ -0,0 +1,3 @@
+import { DotcmsPageProps } from '../components/DotcmsLayout/DotcmsLayout';
+import { DotCMSPageContext } from '../models';
+export declare const useDotcmsEditor: ({ pageContext, config }: DotcmsPageProps) => DotCMSPageContext;

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,88 @@
+/// <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;
+        };
+        vanityUrl?: {
+            pattern: string;
+            vanityUrlId: string;
+            url: string;
+            siteId: string;
+            languageId: number;
+            forwardTo: string;
+            response: number;
+            order: number;
+            temporaryRedirect: boolean;
+            permanentRedirect: boolean;
+            forward: boolean;
+        };
+    };
+    isInsideEditor: boolean;
+}

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

@@ -1,55 +1,23 @@
-import { ContainerData, PageProviderContext } from '../components/PageProvider/PageProvider';
-export declare function getPageElementBound(rowsNodes: HTMLDivElement[] | null): {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    columns: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        containers: {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-            payload: string | undefined;
-            contentlets: {
-                x: number;
-                y: number;
-                width: number;
-                height: number;
-                payload: string | undefined;
-            }[];
-        }[];
-    }[];
-}[];
-export declare const getPageContainers: (containers: ContainerData) => {
-    identifier: string;
-    uuid: string;
-    contentletsId: string[];
-}[];
-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;
         identifier: string;
         title: string;
         inode: string;
+        onNumberOfPages: number;
         widgetTitle?: string | undefined;
+        baseType: string;
     }[];
-    pageContainers: {
-        identifier: string;
-        uuid: string;
-        contentletsId: string[];
-    }[];
+    variantId: string;
     path: string;
     identifier: string;
     maxContentlets: number;
+    parentPermissionable: Record<string, string>;
 };
 export declare const combineClasses: (classes: string[]) => string;
-export declare const getPositionStyleClasses: (width: number, leftOffset: number) => {
-    widthClass: string;
+export declare const getPositionStyleClasses: (start: number, end: number) => {
     startClass: string;
+    endClass: string;
 };

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

@@ -1,50 +0,0 @@
-/**
- * `PageEditorOptions` is an interface that defines the options for the `usePageEditor` hook.
- * It includes an optional `reloadFunction` that is called when the editor needs to reload the page to get changes,
- * and an optional `pathname` that represents the path of the page that the editor is editing.
- *
- * @interface PageEditorOptions
- *
- * @property {Function} reloadFunction - An optional function that is called when the editor needs to reload the page to get changes.
- * @property {string} pathname - An optional string that represents the path of the page that the editor is editing.
- */
-interface PageEditorOptions {
-    /**
-     * `reloadFunction` is an optional function that can be provided to the `PageEditorOptions` object.
-     * It is called when the dotcms editor needs to reload the page to get changes.
-     *
-     * @property {Function} reloadFunction
-     * @default window.location.reload
-     * @memberof PageEditorOptions
-     * @type {() => void}
-     * @optional
-     */
-    reloadFunction?: () => void;
-    /**
-     * `pathname` is an optional string that can be provided to the `PageEditorOptions` object.
-     * It represents the path of the page that the editor is editing.
-     * When this path changes, the editor will update its own state and reload the page to get the changes.
-     * @property {string} pathname
-     * @memberof PageEditorOptions
-     * @type {string}
-     * @optional
-     */
-    pathname?: string;
-}
-/**
- * `usePageEditor` is a custom React hook that sets up the page editor for a DotCMS page.
- * It takes a `PageEditorOptions` object as a parameter and returns a reference to the rows of the page.
- *
- * This hook is the main brigde between your webapp and the dotcms page editor.
- *
- *
- * @category Hooks
- * @param {PageEditorOptions} props - The options for the page editor. Includes a `reloadFunction` and a `pathname`.
- * @returns {{rowsRef: React.RefObject<HTMLDivElement>[], isInsideEditor: boolean}} - Returns a reference to the rows of the page and a boolean that indicates if the page is inside the editor.
- * @throws {Error} - Throws an error if the `pathname` is not provided.
- */
-export declare const usePageEditor: (props: PageEditorOptions) => {
-    rowsRef: React.MutableRefObject<HTMLDivElement[]>;
-    isInsideEditor: boolean;
-};
-export {};