@dotcms/react 1.2.5 → 1.2.6-next.2

package/lib/next/components/FallbackComponent/FallbackComponent.esm.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useIsDevMode } from '../../hooks/useIsDevMode.esm.js';
+
+/**
+ * @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}
+ * />
+ * ```
+ */
+function FallbackComponent({
+  UserNoComponent,
+  contentlet
+}) {
+  const isDevMode = useIsDevMode();
+  if (!isDevMode) {
+    return null;
+  }
+  const NoComponentFound = UserNoComponent || NoComponent;
+  return jsx(NoComponentFound, Object.assign({}, contentlet));
+}
+/**
+ * @internal
+ *
+ * Component to render when there is no component for the content type.
+ *
+ * @param {DotCMSBasicContentlet} contentType - The content type that couldn't be rendered
+ * @return {*}
+ */
+function NoComponent({
+  contentType
+}) {
+  return jsxs("div", {
+    "data-testid": "no-component",
+    children: ["No Component for ", jsx("strong", {
+      children: contentType
+    }), "."]
+  });
+}
+
+export { FallbackComponent };

package/lib/next/components/Row/Row.esm.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { combineClasses } from '@dotcms/uve/internal';
+import styles from './Row.module.css.esm.js';
+import { Column } from '../Column/Column.esm.js';
+
+/**
+ * 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
+ */
+const Row = ({
+  row
+}) => {
+  const customRowClass = combineClasses(['dot-row-container', row.styleClass || '']);
+  return jsx("div", {
+    className: customRowClass,
+    children: jsx("div", {
+      className: styles.row,
+      "data-dot-object": 'row',
+      children: row.columns.map((column, index) => jsx(Column, {
+        column: column
+      }, index))
+    })
+  });
+};
+
+export { Row };

package/lib/next/components/Row/Row.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../../_virtual/_style-inject.esm.js';
+
+var css = "._row_1e5l5_1 {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    gap: 1rem;\n}\n";
+
+styleInject(css);
+var styles = {"row":"_row_1e5l5_1"};
+
+export { styles as default };

package/lib/next/contexts/DotCMSPageContext.esm.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext } from 'react';
+
+/**
+ * The `PageContext` is a React context that provides access to the DotCMS page context.
+ *
+ * @category Contexts
+ */
+const DotCMSPageContext = /*#__PURE__*/createContext({
+  pageAsset: {},
+  mode: 'production',
+  userComponents: {},
+  slots: {}
+});
+
+export { DotCMSPageContext };

package/lib/next/hooks/useAISearch.esm.js

@@ -0,0 +1,119 @@
+import { useReducer, useRef, useEffect, useCallback } from 'react';
+import { DotCMSEntityState } from '@dotcms/types';
+
+function reducer(state, action) {
+  switch (action.type) {
+    case DotCMSEntityState.LOADING:
+      return Object.assign({}, state, {
+        status: {
+          state: DotCMSEntityState.LOADING
+        }
+      });
+    case DotCMSEntityState.SUCCESS:
+      return {
+        response: action.payload,
+        status: {
+          state: DotCMSEntityState.SUCCESS
+        }
+      };
+    case DotCMSEntityState.ERROR:
+      return Object.assign({}, state, {
+        status: {
+          state: DotCMSEntityState.ERROR,
+          error: action.payload
+        }
+      });
+    case DotCMSEntityState.IDLE:
+      return {
+        response: null,
+        status: {
+          state: DotCMSEntityState.IDLE
+        }
+      };
+    default:
+      return state;
+  }
+}
+/**
+ * Hook to search for contentlets using AI.
+ * @template T - The type of the contentlet.
+ * @param client - The client to use for the search.
+ * @param indexName - The name of the index to search in.
+ * @param params - The parameters for the search.
+ * @returns The search results.
+ *
+ * @example
+ * ```typescript
+ * const { results, status, search, reset } = useAISearch<BlogPost>({
+ *   client: dotCMSClient,
+ *   indexName: 'blog-search-index',
+ *   params: {
+ *     query: {
+ *       limit: 10,
+ *       offset: 0,
+ *       contentType: 'Blog'
+ *     },
+ *     config: {
+ *       threshold: 0.5,
+ *       responseLength: 1024
+ *     }
+ *   }
+ * });
+ * ```
+ */
+const useAISearch = ({
+  client,
+  indexName,
+  params
+}) => {
+  var _state$response$resul, _state$response;
+  const [state, dispatch] = useReducer(reducer, {
+    response: null,
+    status: {
+      state: DotCMSEntityState.IDLE
+    }
+  });
+  // Use ref to store params so search callback doesn't change when params change
+  const paramsRef = useRef(params);
+  // Keep ref updated with latest params
+  useEffect(() => {
+    paramsRef.current = params;
+  }, [params]);
+  const reset = useCallback(() => {
+    dispatch({
+      type: DotCMSEntityState.IDLE
+    });
+  }, []);
+  const search = useCallback(async prompt => {
+    if (!prompt.trim()) {
+      dispatch({
+        type: DotCMSEntityState.IDLE
+      });
+      return;
+    }
+    dispatch({
+      type: DotCMSEntityState.LOADING
+    });
+    try {
+      const response = await client.ai.search(prompt, indexName, Object.assign({}, paramsRef.current));
+      dispatch({
+        type: DotCMSEntityState.SUCCESS,
+        payload: response
+      });
+    } catch (error) {
+      dispatch({
+        type: DotCMSEntityState.ERROR,
+        payload: error
+      });
+    }
+  }, [client, indexName]);
+  return {
+    response: state.response,
+    results: (_state$response$resul = (_state$response = state.response) == null ? void 0 : _state$response.results) != null ? _state$response$resul : [],
+    status: state.status,
+    search,
+    reset
+  };
+};
+
+export { useAISearch };

package/lib/next/hooks/useCheckVisibleContent.esm.js

@@ -0,0 +1,40 @@
+import { useState, useLayoutEffect } 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>
+ *   );
+ * }
+ */
+const useCheckVisibleContent = ref => {
+  const [haveContent, setHaveContent] = useState(false);
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      setHaveContent(false);
+      return;
+    }
+    const {
+      height
+    } = ref.current.getBoundingClientRect();
+    setHaveContent(height > 0);
+  }, [ref]);
+  return haveContent;
+};
+
+export { useCheckVisibleContent };

package/lib/next/hooks/useDotCMSShowWhen.esm.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import { getUVEState } from '@dotcms/uve';
+
+/**
+ * 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
+ * }
+ */
+const useDotCMSShowWhen = when => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    var _getUVEState;
+    setShow(((_getUVEState = getUVEState()) == null ? void 0 : _getUVEState.mode) === when);
+  }, [when]);
+  return show;
+};
+
+export { useDotCMSShowWhen };

package/lib/next/hooks/useEditableDotCMSPage.esm.js

@@ -0,0 +1,131 @@
+import { useState, useEffect } from 'react';
+import { UVEEventType } from '@dotcms/types';
+import { getUVEState, initUVE, updateNavigation, createUVESubscription } from '@dotcms/uve';
+
+/**
+ * Custom hook to manage the editable state of a DotCMS page.
+ *
+ * This hook initializes the Universal Visual Editor (UVE) and subscribes to content changes.
+ * It updates the editable page state when content changes are detected in the UVE,
+ * ensuring your React components always display the latest content when editing in DotCMS.
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ * });
+ *
+ * // Use the hook to get an editable version of the page
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Then use the page data in your component
+ * return (
+ *   <div>
+ *     <h1>{editablePage.page.title}</h1>
+ *     <div dangerouslySetInnerHTML={{ __html: editablePage.page.body }} />
+ *   </div>
+ * );
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page with GraphQL content
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ *   graphql: {
+ *     content: {
+ *       products: `ProductCollection(query: "+title:snow", limit: 10, offset: 0, sortBy: "score") {
+ *         title
+ *         urlMap
+ *         category {
+ *           name
+ *           inode
+ *         }
+ *         retailPrice
+ *         image {
+ *           versionPath
+ *         }
+ *       }`
+ *     }
+ *   }
+ * });
+ *
+ * // Use the hook to get an editable version of the page and its content
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Access both page data and GraphQL content
+ * const { page: pageData, content } = editablePage;
+ *
+ * // Use the products from GraphQL content
+ * return (
+ *   <div>
+ *     <h1>{pageData.title}</h1>
+ *     <ProductList products={content.products} />
+ *   </div>
+ * );
+ * ```
+ * @param {DotCMSPageResponse} pageResponse - The initial editable page data from client.page.get().
+ *
+ * @returns {DotCMSPageResponse} The updated editable page state that reflects any changes made in the UVE.
+ * The structure includes page data and any GraphQL content that was requested.
+ */
+const useEditableDotCMSPage = pageResponse => {
+  const [updatedPageResponse, setUpdatedPageResponse] = useState(pageResponse);
+  useEffect(() => {
+    var _pageResponse$pageAss;
+    if (!getUVEState()) {
+      return;
+    }
+    if (!pageResponse) {
+      console.warn('[useEditableDotCMSPage]: No DotCMSPageResponse provided');
+      return;
+    }
+    const pageURI = pageResponse == null || (_pageResponse$pageAss = pageResponse.pageAsset) == null || (_pageResponse$pageAss = _pageResponse$pageAss.page) == null ? void 0 : _pageResponse$pageAss.pageURI;
+    const {
+      destroyUVESubscriptions
+    } = initUVE(pageResponse);
+    // Update the navigation to the pageURI, when we have a pageURI
+    // Sometimes the page is null due to permissions, so we don't want to update the navigation
+    // And wait for the UVE to resolve the page
+    if (pageURI) {
+      updateNavigation(pageURI);
+    }
+    return () => {
+      destroyUVESubscriptions();
+    };
+  }, [pageResponse]);
+  useEffect(() => {
+    const {
+      unsubscribe
+    } = createUVESubscription(UVEEventType.CONTENT_CHANGES, payload => {
+      setUpdatedPageResponse(payload);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return updatedPageResponse;
+};
+
+export { useEditableDotCMSPage };

package/lib/next/hooks/useIsDevMode.esm.js

@@ -0,0 +1,35 @@
+import { useContext, useState, useEffect } from 'react';
+import { UVE_MODE } from '@dotcms/types';
+import { getUVEState } from '@dotcms/uve';
+import { DEVELOPMENT_MODE } from '@dotcms/uve/internal';
+import { DotCMSPageContext } from '../contexts/DotCMSPageContext.esm.js';
+
+/**
+ * @internal
+ * A React hook that determines if the current environment is in development mode.
+ *
+ * The hook returns `true` if either:
+ *   - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
+ *
+ * @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
+ */
+const useIsDevMode = () => {
+  const {
+    mode
+  } = useContext(DotCMSPageContext);
+  const [isDevMode, setIsDevMode] = useState(mode === 'development');
+  useEffect(() => {
+    var _getUVEState;
+    // Inside UVE we rely on the UVE state to determine if we are in development mode
+    if ((_getUVEState = getUVEState()) != null && _getUVEState.mode) {
+      var _getUVEState2;
+      const isUVEInEditor = ((_getUVEState2 = getUVEState()) == null ? void 0 : _getUVEState2.mode) === UVE_MODE.EDIT;
+      setIsDevMode(isUVEInEditor);
+      return;
+    }
+    setIsDevMode(mode === DEVELOPMENT_MODE);
+  }, [mode]);
+  return isDevMode;
+};
+
+export { useIsDevMode };

package/lib/next/hooks/useStyleEditorSchemas.esm.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { registerStyleEditorSchemas } from '@dotcms/uve';
+
+/**
+ * Hook to register style editor forms with the UVE editor.
+ * @param forms - Array of style editor form schemas to register
+ * @returns void
+ */
+const useStyleEditorSchemas = styleEditorForms => {
+  useEffect(() => {
+    registerStyleEditorSchemas(styleEditorForms);
+  }, [styleEditorForms]);
+};
+
+export { useStyleEditorSchemas };

package/lib/next/utils/buildSlots.esm.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Builds a slots map of pre-rendered server component nodes keyed by contentlet identifier.
+ *
+ * Use this in Next.js server components to render async server components
+ * (e.g., components that fetch data) within a DotCMS page layout. Pass the
+ * resulting map to `DotCMSLayoutBody` via the `slots` prop.
+ *
+ * @public
+ * @param containers - The containers map from `pageAsset.containers`
+ * @param serverComponents - A map of content type names to async server components
+ * @returns A record mapping contentlet identifiers to pre-rendered ReactNodes
+ *
+ * @example
+ * ```tsx
+ * const slots = buildSlots(pageContent.pageAsset.containers, {
+ *   BlogList: BlogListContainer,
+ * });
+ *
+ * <DotCMSLayoutBody page={pageAsset} components={pageComponents} slots={slots} />
+ * ```
+ */
+function buildSlots(containers,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+serverComponents) {
+  const slots = {};
+  for (const {
+    contentlets
+  } of Object.values(containers)) {
+    for (const contentletList of Object.values(contentlets)) {
+      for (const contentlet of contentletList) {
+        const Component = serverComponents[contentlet.contentType];
+        if (Component) {
+          slots[contentlet.identifier] = jsx(Component, Object.assign({}, contentlet));
+        }
+      }
+    }
+  }
+  return slots;
+}
+
+export { buildSlots };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/react",
-  "version": "1.2.5",
+  "version": "1.2.6-next.2",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -30,6 +30,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "react-server": "./index.server.esm.js",
       "import": "./index.esm.js",
       "types": "./index.d.ts"
     }
@@ -51,4 +52,4 @@
   "type": "module",
   "main": "./index.esm.js",
   "types": "./index.d.ts"
-}
+}

package/src/index.d.ts

@@ -8,3 +8,4 @@ export { DotCMSLayoutBodyProps } from './lib/next/components/DotCMSLayoutBody/Do
 export { useAISearch } from './lib/next/hooks/useAISearch';
 export { useStyleEditorSchemas } from './lib/next/hooks/useStyleEditorSchemas';
 export type { DotCMSAISearchValue, DotCMSAISearchProps } from './lib/next/shared/types';
+export { buildSlots } from './lib/next/utils/buildSlots';

package/src/index.server.d.ts

@@ -0,0 +1,11 @@
+export { DotCMSLayoutBody } from './lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody';
+export { DotCMSShow } from './lib/next/components/DotCMSShow/DotCMSShow';
+export { useDotCMSShowWhen } from './lib/next/hooks/useDotCMSShowWhen';
+export { useEditableDotCMSPage } from './lib/next/hooks/useEditableDotCMSPage';
+export { DotCMSBlockEditorRenderer, CustomRenderer } from './lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer';
+export type { BlockEditorRendererProps, CustomRendererProps } from './lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer';
+export type { DotCMSLayoutBodyProps } from './lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody';
+export { useAISearch } from './lib/next/hooks/useAISearch';
+export { useStyleEditorSchemas } from './lib/next/hooks/useStyleEditorSchemas';
+export type { DotCMSAISearchValue, DotCMSAISearchProps } from './lib/next/shared/types';
+export { buildSlots } from './lib/next/utils/buildSlots';

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

@@ -38,6 +38,7 @@ export interface BlockEditorRendererProps {
     style?: React.CSSProperties;
     className?: string;
     customRenderers?: CustomRenderer;
+    isDevMode?: boolean;
 }
 /**
  * BlockEditorRenderer component for rendering block editor field.
@@ -50,4 +51,4 @@ export interface BlockEditorRendererProps {
  * @param {React.CSSProperties} [props.style] - Optional inline styles for the container div.
  * @returns {JSX.Element} A div containing the rendered blocks of content.
  */
-export declare const DotCMSBlockEditorRenderer: ({ blocks, style, className, customRenderers }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DotCMSBlockEditorRenderer: ({ blocks, style, className, customRenderers, isDevMode }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.d.ts

@@ -3,6 +3,7 @@ import { CustomRenderer } from '../DotCMSBlockEditorRenderer';
 interface BlockEditorBlockProps {
     content: BlockEditorNode[] | undefined;
     customRenderers?: CustomRenderer;
+    isDevMode?: boolean;
 }
 /**
  * Renders a block editor item based on the provided content and custom renderers.
@@ -11,5 +12,5 @@ interface BlockEditorBlockProps {
  * @param customRenderers - Optional custom renderers for specific node types.
  * @returns The rendered block editor item.
  */
-export declare const BlockEditorBlock: ({ content, customRenderers }: BlockEditorBlockProps) => import("react/jsx-runtime").JSX.Element[] | null;
+export declare const BlockEditorBlock: ({ content, customRenderers, isDevMode }: BlockEditorBlockProps) => import("react/jsx-runtime").JSX.Element[] | null;
 export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/DotContent.d.ts

@@ -3,6 +3,7 @@ import { CustomRenderer } from '../../DotCMSBlockEditorRenderer';
 interface DotContentProps {
     customRenderers?: CustomRenderer;
     node: BlockEditorNode;
+    isDevMode?: boolean;
 }
 /**
  * Renders a DotContent component.
@@ -10,5 +11,5 @@ interface DotContentProps {
  * @param {DotContentProps} props - The props for the DotContent component.
  * @returns {JSX.Element} The rendered DotContent component.
  */
-export declare const DotContent: ({ customRenderers, node }: DotContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DotContent: ({ customRenderers, node, isDevMode }: DotContentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/GridBlock.d.ts

@@ -0,0 +1,19 @@
+import { BlockEditorNode } from '@dotcms/types';
+import { CustomRenderer } from '../../DotCMSBlockEditorRenderer';
+interface GridBlockProps {
+    node: BlockEditorNode;
+    customRenderers?: CustomRenderer;
+    blockEditorBlock: React.FC<{
+        content: BlockEditorNode[] | undefined;
+        customRenderers?: CustomRenderer;
+    }>;
+}
+/**
+ * Renders a grid block with two columns using a 12-column grid system.
+ *
+ * @param node - The grid block node containing column configuration.
+ * @param blockEditorBlock - The block editor component for rendering nested content.
+ * @param customRenderers - Optional custom renderers for nested blocks.
+ */
+export declare const GridBlock: ({ node, blockEditorBlock, customRenderers }: GridBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};