@dotcms/react 0.0.1-alpha.9 → 0.0.1-beta.2

package/src/lib/deprecated/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/deprecated/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/deprecated/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/deprecated/utils/utils.d.ts

@@ -0,0 +1,58 @@
+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;
+        identifier: string;
+        title: string;
+        inode: string;
+        onNumberOfPages: number;
+        widgetTitle?: string | undefined;
+        baseType: string;
+    }[];
+    variantId: string;
+    path: string;
+    identifier: string;
+    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/next/__test__/mock.d.ts

@@ -0,0 +1,11 @@
+import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '../types';
+export declare const MOCK_COLUMN: DotPageAssetLayoutColumn;
+export declare const MOCK_CONTAINER: DotCMSColumnContainer;
+export declare const MOCK_PAGE_ASSET: DotCMSPageAsset;
+export declare const EMPTY_PAGE_ASSET: DotCMSPageAsset;
+export declare const MOCK_CONTAINER_DATA: {
+    uuid: string;
+    identifier: string;
+    acceptTypes: string;
+    maxContentlets: number;
+};

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

@@ -0,0 +1,37 @@
+import { DotPageAssetLayoutColumn } from '../../types';
+/**
+ * @internal
+ *
+ * Props for the Column component, which represents a single column in the grid layout system.
+ *
+ * @export
+ * @interface ColumnProps
+ * @property {DotPageAssetLayoutColumn} column - Column configuration from dotCMS Page API including
+ * width, leftOffset, styleClass, and containers
+ */
+export interface ColumnProps {
+    readonly column: DotPageAssetLayoutColumn;
+}
+/**
+ * @internal
+ *
+ * Renders a Column component that represents a single column in a 12-column grid system.
+ * The column's position and width are determined by the leftOffset and width properties
+ * from the dotCMS Page API. Uses CSS Grid classes for positioning.
+ *
+ * @example
+ * ```tsx
+ * <Column column={{
+ *   leftOffset: 0,
+ *   width: 6,
+ *   styleClass: "custom-class",
+ *   containers: []
+ * }} />
+ * ```
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ColumnProps} { column } - Column configuration object
+ * @return {JSX.Element} Rendered column with its containers positioned in the grid
+ */
+export declare function Column({ column }: ColumnProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { DotCMSColumnContainer } from '../../types';
+/**
+ * @internal
+ *
+ * Props for the Container component
+ * @interface DotCMSContainerRendererProps
+ * @property {DotCMSColumnContainer} container - The container data to be rendered
+ */
+type DotCMSContainerRendererProps = {
+    container: DotCMSColumnContainer;
+};
+/**
+ * @internal
+ *
+ * Container component that renders DotCMS containers and their contentlets.
+ * This component is responsible for:
+ * - Rendering container content based on DotCMS Page API data
+ * - Handling empty container states
+ * - Providing proper data attributes for DotCMS functionality
+ * - Managing container contentlets rendering
+ *
+ * @component
+ * @param {DotCMSContainerRendererProps} props - Component properties
+ * @returns {JSX.Element} Rendered container with its contentlets or empty state message
+ *
+ * @example
+ * ```tsx
+ * <Container container={containerData} />
+ * ```
+ */
+export declare function Container({ container }: DotCMSContainerRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import { DotContainerAttributes } from '../../utils';
+/**
+ * @internal
+ *
+ * Component to display when a container is not found in the system.
+ * Only renders in development mode for debugging purposes.
+ *
+ * @component
+ * @param {Object} props - Component properties
+ * @param {string} props.identifier - Container identifier
+ * @returns {JSX.Element | null} Message about missing container or null in production
+ */
+export declare const ContainerNoFound: ({ identifier }: {
+    identifier: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @internal
+ *
+ * Component to display when a container is empty.
+ *
+ * @param {DotContainerAttributes} dotAttributes
+ * @return {*}
+ */
+export declare const EmptyContainer: (dotAttributes: DotContainerAttributes) => import("react/jsx-runtime").JSX.Element | null;

package/src/lib/next/components/Contentlet/Contentlet.d.ts

@@ -0,0 +1,32 @@
+import { DotCMSContentlet } from '../../types';
+/**
+ * @internal
+ *
+ * Props for the Contentlet component
+ * @interface DotCMSContentletRendererProps
+ * @property {DotCMSContentlet} contentlet - The contentlet data to be rendered
+ * @property {string} container - The container identifier where the contentlet is placed
+ */
+interface DotCMSContentletRendererProps {
+    contentlet: DotCMSContentlet;
+    container: string;
+}
+/**
+ * Contentlet component that renders DotCMS content with development mode support
+ *
+ * @component
+ * @param {DotCMSContentletRendererProps} props - Component properties
+ * @param {DotCMSContentlet} props.contentlet - The contentlet to be rendered
+ * @param {string} props.container - The container identifier
+ * @returns {JSX.Element} Rendered contentlet with appropriate wrapper and attributes
+ *
+ * @example
+ * ```tsx
+ * <Contentlet
+ *   contentlet={myContentlet}
+ *   container="container-1"
+ * />
+ * ```
+ */
+export declare function Contentlet({ contentlet, container }: DotCMSContentletRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { DotCMSPageRendererMode } from '../../contexts/DotCMSPageContext';
+import { DotCMSContentlet, DotCMSPageAsset } from '../../types';
+interface DotCMSLayoutBodyProps {
+    page: DotCMSPageAsset;
+    components: Record<string, React.ComponentType<DotCMSContentlet>>;
+    mode?: DotCMSPageRendererMode;
+}
+/**
+ * DotCMSLayoutBody component renders the layout body for a DotCMS page.
+ *
+ * It utilizes the page asset's layout body to render rows using the Row component.
+ * If the layout body does not exist, it renders an error message.
+ * It also provides context (DotCMSPageContext) with the page asset, optional user components,
+ * and the renderer mode to its children.
+ *
+ * @public
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {DotCMSPageAsset} props.page - The DotCMS page asset containing the layout information.
+ * @param {Record<string, React.ComponentType<DotCMSContentlet>>} [props.components] - Optional mapping of custom components for content rendering.
+ * @param {DotCMSPageRendererMode} [props.mode='production'] - The renderer mode; defaults to 'production'. Alternate modes might trigger different behaviors.
+ *
+ * @returns {JSX.Element} The rendered DotCMS page body or an error message if the layout body is missing.
+ *
+ * -------------------------------------------------------------------
+ *
+ * El componente DotCMSLayoutBody renderiza el cuerpo del layout para una página de DotCMS.
+ *
+ * Utiliza el "body" del layout del asset de la página para renderizar las filas mediante el componente Row.
+ * Si el "body" del layout no está presente, renderiza un mensaje de error.
+ * También provee un contexto (DotCMSPageContext) con el asset de la página, componentes de usuario opcionales,
+ * y el modo del renderizado para sus componentes hijos.
+ */
+export declare const DotCMSLayoutBody: ({ page, components, mode }: DotCMSLayoutBodyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/next/components/DotCMSLayoutBody/components/ErrorMessage.d.ts

@@ -0,0 +1,9 @@
+import { DotCMSPageRendererMode } from '../../../contexts/DotCMSPageContext';
+/**
+ * Error message component for when the page body is missing
+ *
+ * @return {JSX.Element} Error message component
+ */
+export declare const ErrorMessage: ({ mode }: {
+    mode: DotCMSPageRendererMode;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/src/lib/next/components/FallbackComponent/FallbackComponent.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { DotCMSContentlet } from '../../types';
+/**
+ * @internal
+ *
+ * Type definition for components that can be used as fallback when no matching component is found
+ */
+export type NoComponentType = React.ComponentType<DotCMSContentlet>;
+/**
+ * @internal
+ *
+ * Props for the FallbackComponent
+ * @interface DotCMSFallbackComponentProps
+ * @property {React.ComponentType<DotCMSContentlet>} [UserNoComponent] - Optional custom component to render when no matching component is found
+ * @property {DotCMSContentlet} [contentlet] - The contentlet that couldn't be rendered
+ */
+interface DotCMSFallbackComponentProps {
+    contentlet: DotCMSContentlet;
+    UserNoComponent?: React.ComponentType<DotCMSContentlet>;
+}
+/**
+ * @internal
+ *
+ * Renders a fallback component when no matching component is found for a content type
+ *
+ * @component
+ * @param {DotCMSFallbackComponentProps} props - Component properties
+ * @param {NoComponentType} [props.UserNoComponent] - Optional custom component to render
+ * @param {DotCMSContentlet} [props.contentlet] - The contentlet that couldn't be rendered
+ * @returns {JSX.Element} The rendered fallback component
+ *
+ * @example
+ * ```tsx
+ * <FallbackComponent
+ *   UserNoComponent={CustomNoComponent}
+ *   contentlet={contentlet}
+ * />
+ * ```
+ */
+export declare function FallbackComponent({ UserNoComponent, contentlet }: DotCMSFallbackComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,21 @@
+import { DotPageAssetLayoutRow } from '../../types';
+/**
+ * @internal
+ *
+ * Props for the Row component
+ * @interface DotCMSRowRendererProps
+ * @property {DotPageAssetLayoutRow} row - The row data to be rendered
+ */
+type DotCMSRowRendererProps = {
+    row: DotPageAssetLayoutRow;
+};
+/**
+ * This component renders a row with all it's content using the layout provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @category Components
+ * @param {React.ForwardedRef<HTMLDivElement, DotCMS>} ref
+ * @return {JSX.Element} Rendered rows with columns
+ */
+export declare const Row: ({ row }: DotCMSRowRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/next/contexts/DotCMSPageContext.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { DotCMSContentlet, DotCMSPageAsset } from '../types';
+export type DotCMSPageRendererMode = 'production' | 'development';
+/**
+ * @internal
+ *
+ * Props for the DotCMSPageContext
+ * @interface DotCMSPageContextProps
+ * @property {DotCMSPageAsset} pageAsset - The DotCMS page asset
+ * @property {RendererMode} mode - The renderer mode
+ * @property {Record<string, React.ComponentType<DotCMSContentlet>>} userComponents - The user components
+ */
+export interface DotCMSPageContextProps {
+    pageAsset: DotCMSPageAsset;
+    mode: DotCMSPageRendererMode;
+    userComponents: Record<string, React.ComponentType<DotCMSContentlet>>;
+}
+/**
+ * The `PageContext` is a React context that provides access to the DotCMS page context.
+ *
+ * @category Contexts
+ */
+export declare const DotCMSPageContext: import("react").Context<DotCMSPageContextProps>;

package/src/lib/next/hooks/useCheckVisibleContent.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from 'react';
+/**
+ * @internal
+ * A custom React hook that checks whether a referenced HTMLDivElement has visible content based on its height.
+ *
+ * @param {RefObject<HTMLDivElement>} ref - A React ref object pointing to an HTMLDivElement.
+ * @returns {boolean} - Returns true if the element's height is greater than zero (indicating visible content), otherwise false.
+ *
+ * @example
+ * import { useRef } from 'react';
+ * import { useCheckVisibleContent } from 'src/lib/next/hooks/useCheckVisibleContent';
+ *
+ * function MyComponent() {
+ *   const contentRef = useRef<HTMLDivElement>(null);
+ *   const isContentVisible = useCheckVisibleContent(contentRef);
+ *
+ *   return (
+ *     <div ref={contentRef}>
+ *       {isContentVisible ? 'Content is visible' : 'Content is not visible'}
+ *     </div>
+ *   );
+ * }
+ */
+export declare const useCheckVisibleContent: (ref: RefObject<HTMLDivElement>) => boolean;

package/src/lib/next/hooks/useIsDevMode.d.ts

@@ -0,0 +1,13 @@
+import { DotCMSPageRendererMode } from '../contexts/DotCMSPageContext';
+/**
+ * @internal
+ * A React hook that determines if the current environment is in development mode.
+ *
+ * The hook returns `true` if either:
+ *   - The context mode (or the optional `renderMode` argument) is set to 'development', or
+ *   - The application is running inside the DotCMS editor (as determined by `isInsideEditor()`).
+ *
+ * @param {DotCMSPageRendererMode} [renderMode] - Optional override for the render mode.
+ * @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
+ */
+export declare const useIsDevMode: (renderMode?: DotCMSPageRendererMode) => boolean;