@dotcms/react 0.0.1-alpha.8 → 0.0.1-beta.1

package/src/lib/models/blocks.interface.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+import { ContentNode } from './content-node.interface';
+/**
+ * Represents a Block of content provided by the Block Editor
+ *
+ * @export
+ * @interface Block
+ */
+export interface Block {
+    content: ContentNode[];
+    type: string;
+}
+/**
+ * Props for a contentlet inside the Block Editor
+ *
+ * @export
+ * @interface DotContentletProps
+ */
+export interface DotContentletProps {
+    title: string;
+    baseType: string;
+    inode: string;
+    archived: boolean;
+    working: boolean;
+    locked: boolean;
+    contentType: string;
+    live: boolean;
+    identifier: string;
+    image: string;
+    imageContentAsset: string;
+    urlTitle: string;
+    url: string;
+    titleImage: string;
+    urlMap: string;
+    hasLiveVersion: boolean;
+    hasTitleImage: boolean;
+    sortOrder: number;
+    modUser: string;
+    __icon__: string;
+    contentTypeIcon: string;
+    language: string;
+    description: string;
+    shortDescription: string;
+    salePrice: string;
+    retailPrice: string;
+    mimeType: string;
+    thumbnail?: string;
+}
+/**
+ * Props for a block inside the Block Editor Component
+ *
+ * @export
+ * @interface BlockProps
+ */
+export interface BlockProps {
+    children: React.ReactNode;
+}
+/**
+ * Represents the different types of Blocks that can be used in the Block Editor
+ *
+ * @export
+ * @enum {number}
+ */
+export declare enum Blocks {
+    PARAGRAPH = "paragraph",
+    HEADING = "heading",
+    TEXT = "text",
+    BULLET_LIST = "bulletList",
+    ORDERED_LIST = "orderedList",
+    LIST_ITEM = "listItem",
+    BLOCK_QUOTE = "blockquote",
+    CODE_BLOCK = "codeBlock",
+    HARDBREAK = "hardBreak",
+    HORIZONTAL_RULE = "horizontalRule",
+    DOT_IMAGE = "dotImage",
+    DOT_VIDEO = "dotVideo",
+    TABLE = "table",
+    DOT_CONTENT = "dotContent"
+}
+/**
+ * Represents the validation state of a Block Editor instance
+ *
+ * @interface BlockEditorState
+ * @property {boolean} isValid - Whether the blocks structure is valid
+ * @property {string | null} error - Error message if blocks are invalid, null otherwise
+ */
+export interface BlockEditorState {
+    error: string | null;
+}

package/src/lib/models/content-node.interface.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+import { BlockProps } from './blocks.interface';
+/**
+ * Represents a Mark used by text content in the Block Editor
+ *
+ * @export
+ * @interface Mark
+ */
+export interface Mark {
+    type: string;
+    attrs: Record<string, string>;
+}
+/**
+ * Represents a Content Node used by the Block Editor
+ *
+ * @export
+ * @interface ContentNode
+ */
+export interface ContentNode {
+    type: string;
+    content: ContentNode[];
+    attrs?: Record<string, string>;
+    marks?: Mark[];
+    text?: string;
+}
+/**
+ * Represents a Custom Renderer used by the Block Editor Component
+ *
+ * @export
+ * @interface CustomRenderer
+ */
+export type CustomRenderer<T = any> = Record<string, React.FC<T>>;
+/**
+ * Represents a CodeBlock used by the Block Editor Component
+ * @export
+ * @interface CodeBlockProps
+ */
+export type CodeBlockProps = BlockProps & ContentNode;
+/**
+ * Represents a Heading used by the Block Editor Component
+ * @export
+ * @interface HeadingProps
+ */
+export type HeadingProps = BlockProps & ContentNode;
+/**
+ * Represents a Link used by the Block Editor Component
+ * @export
+ * @interface LinkProps
+ */
+export type LinkProps = BlockProps & {
+    attrs?: Mark['attrs'];
+};
+/**
+ * Represents a Paragraph used by the Block Editor Component
+ * @export
+ * @interface ParagraphProps
+ */
+export type ParagraphProps = BlockProps & ContentNode;
+/**
+ * Represents a DotCMSVideo used by the Block Editor Component
+ * @export
+ * @interface DotCMSVideoProps
+ */
+export type DotCMSVideoProps = ContentNode['attrs'] & {
+    data?: Record<string, string>;
+};
+/**
+ * Represents a DotCMSImage used by the Block Editor Component
+ * @export
+ * @interface DotCMSImageProps
+ */
+export type DotCMSImageProps = ContentNode['attrs'] & {
+    data?: Record<string, unknown>;
+};
+/**
+ * Represents a DotContent used by the Block Editor Component
+ * @export
+ * @interface DotContentProps
+ */
+export type DotContentProps = ContentNode & {
+    customRenderers?: CustomRenderer;
+};

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

@@ -0,0 +1,127 @@
+/// <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;
+}
+export interface DotCMSContentlet {
+    archived: boolean;
+    binaryContentAsset?: string;
+    deleted?: boolean;
+    baseType: string;
+    binary?: string;
+    binaryVersion?: string;
+    file?: string;
+    contentType: string;
+    hasLiveVersion?: boolean;
+    folder: string;
+    hasTitleImage: boolean;
+    hostName: string;
+    host: string;
+    inode: string;
+    identifier: string;
+    languageId: number;
+    image?: string;
+    locked: boolean;
+    language?: string;
+    mimeType?: string;
+    modUser: string;
+    modDate: string;
+    live: boolean;
+    sortOrder: number;
+    owner: string;
+    title: string;
+    stInode: string;
+    titleImage: string;
+    modUserName: string;
+    text?: string;
+    working: boolean;
+    url: string;
+    contentTypeIcon?: string;
+    body?: string;
+    variant?: string;
+    __icon__?: string;
+    [key: string]: any;
+}

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

@@ -1,31 +1,13 @@
-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 getContainersData: (containers: ContainerData, containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0]) => {
+import { ContainerData, DotCMSPageContext } from '../models';
+import { Block, BlockEditorState } from '../models/blocks.interface';
+/**
+ * Get the container data from the containers object using the current container reference obtained from the layout.
+ *
+ * @param {ContainerData} containers
+ * @param {DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]} containerRef
+ * @returns {Object} Container with all the data it has.
+ */
+export declare const getContainersData: (containers: ContainerData, containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]) => {
     acceptTypes: string;
     contentlets: {
         contentType: string;
@@ -34,6 +16,7 @@ export declare const getContainersData: (containers: ContainerData, containerRef
         inode: string;
         onNumberOfPages: number;
         widgetTitle?: string | undefined;
+        baseType: string;
     }[];
     variantId: string;
     path: string;
@@ -41,8 +24,35 @@ export declare const getContainersData: (containers: ContainerData, containerRef
     maxContentlets: number;
     parentPermissionable: Record<string, string>;
 };
+/**
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
 export declare const combineClasses: (classes: string[]) => string;
+/**
+ * Get the start and end classes for the column based on the left offset and width.
+ *
+ * @param {number} start
+ * @param {number} end
+ * @returns {Object} Start and end classes
+ */
 export declare const getPositionStyleClasses: (start: number, end: number) => {
     startClass: string;
     endClass: string;
 };
+/**
+ * Validates the structure of a Block Editor block.
+ *
+ * This function checks that:
+ * 1. The blocks parameter is a valid object
+ * 2. The block has a 'doc' type
+ * 3. The block has a valid content array that is not empty
+ *
+ * @param {Block} blocks - The blocks structure to validate
+ * @returns {BlockEditorState} Object containing validation state and any error message
+ * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
+ * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
+ */
+export declare const isValidBlocks: (blocks: Block) => BlockEditorState;

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 {};