@dotcms/react 0.0.1-beta.1 → 0.0.1-beta.2

package/src/lib/deprecated/deprecated_api.d.ts

@@ -0,0 +1,7 @@
+export * from './components/DotcmsLayout/DotcmsLayout';
+export * from './components/DotEditableText/DotEditableText';
+export * from './components/PageProvider/PageProvider';
+export * from './components/Row/Row';
+export * from './hooks/useDotcmsPageContext';
+export * from './components/BlockEditorRenderer/BlockEditorRenderer';
+export * from './models/content-node.interface';

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;