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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.3",
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
@@ -26,8 +26,7 @@
     "url": "https://github.com/dotCMS/core/issues"
   },
   "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md",
-  "module": "./index.js",
-  "main": "./index.js",
+  "module": "./index.esm.js",
   "type": "module",
-  "types": "./src/index.d.ts"
+  "main": "./index.esm.js"
 }

package/src/index.d.ts

@@ -1,5 +1,5 @@
-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';
+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,7 +1,5 @@
-/// <reference types="react" />
-import { PageProviderContext } from '../PageProvider/PageProvider';
-interface ColumnProps {
-    readonly column: PageProviderContext['layout']['body']['rows'][0]['columns'][0];
-}
-export declare function Column({ column }: ColumnProps): JSX.Element;
-export {};
+import { PageProviderContext } from '../PageProvider/PageProvider';
+export interface ColumnProps {
+    readonly column: PageProviderContext['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,6 +1,5 @@
-/// <reference types="react" />
-import { PageProviderContext } from '../PageProvider/PageProvider';
-export interface ContainerProps {
-    readonly containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0];
-}
-export declare function Container({ containerRef }: ContainerProps): JSX.Element;
+import { PageProviderContext } from '../PageProvider/PageProvider';
+export interface ContainerProps {
+    readonly containerRef: PageProviderContext['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,32 +1,32 @@
-/// <reference types="react" />
-import { PageProviderContext } from '../PageProvider/PageProvider';
-/**
- * `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.
- * @readonly
- */
-export type DotcmsPageProps = {
-    /**
-     * `entity` is a readonly property of the `DotcmsPageProps` type.
-     * It represents the context for a DotCMS page and is of type `PageProviderContext`.
-     *
-     * @property {PageProviderContext} entity
-     * @memberof DotcmsPageProps
-     * @type {PageProviderContext}
-     * @readonly
-     */
-    readonly entity: PageProviderContext;
-};
-/**
- * `DotcmsLayout` is a functional component that renders a layout for a DotCMS page.
- * It takes a `DotcmsPageProps` object as a parameter and returns a JSX element.
- *
- * @category Components
- * @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;
+/// <reference types="react" />
+import { PageProviderContext } from '../PageProvider/PageProvider';
+/**
+ * `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.
+ * @readonly
+ */
+export type DotcmsPageProps = {
+    /**
+     * `entity` is a readonly property of the `DotcmsPageProps` type.
+     * It represents the context for a DotCMS page and is of type `PageProviderContext`.
+     *
+     * @property {PageProviderContext} entity
+     * @memberof DotcmsPageProps
+     * @type {PageProviderContext}
+     * @readonly
+     */
+    readonly entity: PageProviderContext;
+};
+/**
+ * `DotcmsLayout` is a functional component that renders a layout for a DotCMS page.
+ * It takes a `DotcmsPageProps` object as a parameter and returns a JSX element.
+ *
+ * @category Components
+ * @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;

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

@@ -1,81 +1,82 @@
-import { ReactNode } from 'react';
-export interface PageProviderProps {
-    readonly entity: 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;
-        };
-    };
-}
-/**
- * `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.
- *
- * @category Components
- * @param {PageProviderProps} props - The properties for the PageProvider. Includes an `entity` and `children`.
- * @returns {JSX.Element} - A JSX element that provides a context for a DotCMS page.
- */
-export declare function PageProvider(props: PageProviderProps): JSX.Element;
+import { ReactNode } from 'react';
+export interface PageProviderProps {
+    readonly entity: 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.
+ *
+ * @category Components
+ * @param {PageProviderProps} props - The properties for the PageProvider. Includes an `entity` and `children`.
+ * @returns {JSX.Element} - A JSX element that provides a context for a DotCMS page.
+ */
+export declare function PageProvider(props: PageProviderProps): JSX.Element;

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

@@ -1,25 +1,25 @@
-/// <reference types="react" />
-import { PageProviderContext } from '../PageProvider/PageProvider';
-/**
- * Props for the row component
- *
- * @interface RowProps
- *
- */
-export interface RowProps {
-    /**
-     * Row data
-     *
-     * @type {PageProviderContext['layout']['body']['rows'][0]}
-     * @memberof RowProps
-     */
-    row: PageProviderContext['layout']['body']['rows'][0];
-}
-/**
- * Renders a row
- *
- * @category Components
- * @param {React.ForwardedRef<HTMLDivElement, RowProps>} ref
- * @return {*}
- */
-export declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLDivElement>>;
+/// <reference types="react" />
+import { PageProviderContext } from '../PageProvider/PageProvider';
+/**
+ * Props for the row component
+ *
+ * @interface RowProps
+ *
+ */
+export interface RowProps {
+    /**
+     * Row data
+     *
+     * @type {PageProviderContext['layout']['body']['rows'][0]}
+     * @memberof RowProps
+     */
+    row: PageProviderContext['layout']['body']['rows'][0];
+}
+/**
+ * Renders a row
+ *
+ * @category Components
+ * @param {React.ForwardedRef<HTMLDivElement, RowProps>} ref
+ * @return {*}
+ */
+export declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLDivElement>>;

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>;
+/// <reference types="react" />
+import { PageProviderContext } from '../components/PageProvider/PageProvider';
+export declare const PageContext: import("react").Context<PageProviderContext | null>;

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

@@ -1,9 +1,9 @@
-import { PageProviderContext } from '../components/PageProvider/PageProvider';
-/**
- * `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.
- */
-export declare function useDotcmsPageContext(): PageProviderContext | null;
+import { PageProviderContext } from '../components/PageProvider/PageProvider';
+/**
+ * `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.
+ */
+export declare function useDotcmsPageContext(): PageProviderContext | null;

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

@@ -1,48 +1,50 @@
-/// <reference types="react" />
-/**
- * `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 {React.RefObject<HTMLDivElement>[]} - A reference to the rows of the page.
- * @throws {Error} - Throws an error if the `pathname` is not provided.
- */
-export declare const usePageEditor: (props: PageEditorOptions) => import("react").MutableRefObject<HTMLDivElement[]>;
-export {};
+/**
+ * `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 {};

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

@@ -1 +1 @@
-export * from './mockPageContext';
+export * from './mockPageContext';

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

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

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

@@ -1,50 +1,55 @@
-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]) => {
-    acceptTypes: string;
-    contentlets: {
-        contentType: string;
-        identifier: string;
-        title: string;
-        inode: string;
-        widgetTitle?: string | undefined;
-    }[];
-    pageContainers: {
-        identifier: string;
-        uuid: string;
-        contentletsId: string[];
-    }[];
-    path: string;
-    identifier: string;
-    maxContentlets: number;
-};
+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]) => {
+    acceptTypes: string;
+    contentlets: {
+        contentType: string;
+        identifier: string;
+        title: string;
+        inode: string;
+        widgetTitle?: string | undefined;
+    }[];
+    pageContainers: {
+        identifier: string;
+        uuid: string;
+        contentletsId: string[];
+    }[];
+    path: string;
+    identifier: string;
+    maxContentlets: number;
+};
+export declare const combineClasses: (classes: string[]) => string;
+export declare const getPositionStyleClasses: (width: number, leftOffset: number) => {
+    widthClass: string;
+    startClass: string;
+};