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

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.10",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.1",
+    "@dotcms/client": "0.0.1-beta.10",
+    "@dotcms/uve": "0.0.1-beta.10",
     "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",
@@ -21,6 +22,27 @@
     "React",
     "Components"
   ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.esm.js",
+      "types": "./index.esm.d.ts"
+    },
+    "./next": {
+      "import": "./next.esm.js",
+      "types": "./next.esm.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./src/index.d.ts"
+      ],
+      "next": [
+        "./src/next.d.ts"
+      ]
+    }
+  },
   "author": "dotcms <dev@dotcms.com>",
   "license": "MIT",
   "bugs": {

package/src/index.d.ts

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

package/src/lib/{components → deprecated/components}/DotcmsLayout/DotcmsLayout.d.ts

@@ -29,5 +29,6 @@ export type DotcmsPageProps = {
  * @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.
+ * @deprecated Use {@link https://github.com/dotCMS/core/blob/main/core-web/libs/sdk/react/src/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.tsx DotCMSLayoutBody} instead.
  */
 export declare function DotcmsLayout(dotPageProps: DotcmsPageProps): JSX.Element;

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,26 @@
+/// <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 dotCMS page asset's layout body to render the page body.
+ * If the layout body does not exist, it renders an error message in the mode is `development`.
+ *
+ * @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] - 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.
+ *
+ */
+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/DotCMSShow/DotCMSShow.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { UVE_MODE } from '@dotcms/uve/types';
+/**
+ * Props for the DotCMSShow component.
+ *
+ * @typedef {Object} DotCMSShowProps
+ * @property {React.ReactNode} children - The children to be rendered when the condition is met.
+ * @property {UVE_MODE} [when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
+ */
+type DotCMSShowProps = {
+    children: React.ReactNode;
+    when?: UVE_MODE;
+};
+/**
+ * DotCMSShow component is used to conditionally render its children
+ * based on the Universal Visual Editor (UVE) mode. It checks if the UVE
+ * is in a specified mode and only renders its children in that case.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The children to be rendered when the condition is met.
+ * @param {UVE_MODE} [props.when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
+ * @returns {React.ReactNode | null} The children if the current UVE mode matches the `when` prop, otherwise null.
+ *
+ * @example
+ * // Basic usage: Render content only in edit mode
+ * <DotCMSShow when={UVE_MODE.EDIT}>
+ *     <div>Edit Mode Content</div>
+ * </DotCMSShow>
+ *
+ * // This will render <div>Edit Mode Content</div> only if the UVE is in edit mode.
+ *
+ * @example
+ * // Render content in preview mode
+ * <DotCMSShow when={UVE_MODE.PREVIEW}>
+ *     <MyCustomPreviewComponent />
+ * </DotCMSShow>
+ *
+ * // MyCustomPreviewComponent will only be rendered if the UVE is in preview mode.
+ *
+ * @example
+ * // Render content in live mode
+ * <DotCMSShow when={UVE_MODE.LIVE}>
+ *     <LiveContentComponent />
+ * </DotCMSShow>
+ *
+ * // LiveContentComponent will only be rendered if the UVE is in live mode.
+ */
+export declare const DotCMSShow: ({ children, when }: DotCMSShowProps) => React.ReactNode | null;
+export {};

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/useDotCMSShowWhen.d.ts

@@ -0,0 +1,31 @@
+import { UVE_MODE } from '@dotcms/uve/types';
+/**
+ * Custom hook to determine if the current UVE (Universal Visual Editor) mode
+ * matches the specified mode. This hook is useful for conditionally rendering
+ * components based on the UVE mode.
+ *
+ * @param {UVE_MODE} when - The UVE mode to check against.
+ * @returns {boolean} True if the current UVE mode matches the specified mode, otherwise false.
+ *
+ * @example
+ * // Basic usage: Check if the UVE is in edit mode
+ * const showInEditMode = useDotCMSShowWhen(UVE_MODE.EDIT);
+ * if (showInEditMode) {
+ *     // Render edit-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in preview mode
+ * const showInPreviewMode = useDotCMSShowWhen(UVE_MODE.PREVIEW);
+ * if (showInPreviewMode) {
+ *     // Render preview-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in live mode
+ * const showInLiveMode = useDotCMSShowWhen(UVE_MODE.LIVE);
+ * if (showInLiveMode) {
+ *     // Render live-specific components
+ * }
+ */
+export declare const useDotCMSShowWhen: (when: UVE_MODE) => 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;