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

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { DotCMSPageRendererMode } from '../../contexts/DotCMSPageContext';
-import { DotCMSContentlet, DotCMSPageAsset } from '../../types';
+import { DotCMSContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/uve/types';
 interface DotCMSLayoutBodyProps {
     page: DotCMSPageAsset;
     components: Record<string, React.ComponentType<DotCMSContentlet>>;
@@ -9,28 +8,18 @@ interface DotCMSLayoutBodyProps {
 /**
  * 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.
+ * 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] - Optional mapping of custom components for content rendering.
+ * @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.
  *
- * -------------------------------------------------------------------
- *
- * 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

@@ -1,9 +1,6 @@
-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;
+export declare const ErrorMessage: () => false | import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DotCMSContentlet } from '../../types';
+import { DotCMSContentlet } from '@dotcms/uve/types';
 /**
  * @internal
  *

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

@@ -1,4 +1,4 @@
-import { DotPageAssetLayoutRow } from '../../types';
+import { DotPageAssetLayoutRow } from '@dotcms/uve/types';
 /**
  * @internal
  *

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { DotCMSContentlet, DotCMSPageAsset } from '../types';
-export type DotCMSPageRendererMode = 'production' | 'development';
+import { DotCMSContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/uve/types';
 /**
  * @internal
  *

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

@@ -0,0 +1,90 @@
+import { DotCMSEditablePage } from '@dotcms/uve/types';
+/**
+ * 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 {DotCMSEditablePage} editablePage - The initial editable page data from client.page.get().
+ *
+ * @returns {DotCMSEditablePage} 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.
+ */
+export declare const useEditableDotCMSPage: (editablePage: DotCMSEditablePage) => DotCMSEditablePage;

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

@@ -1,13 +1,10 @@
-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()`).
+ *   - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
  *
- * @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;
+export declare const useIsDevMode: () => boolean;

package/src/next.d.ts

@@ -1 +1,4 @@
 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';

package/src/lib/next/types.d.ts

@@ -1,421 +0,0 @@
-export interface DotCMSPageAsset {
-    canCreateTemplate?: boolean;
-    containers: {
-        [key: string]: DotCMSPageAssetContainer;
-    };
-    layout: DotCMSLayout;
-    page: DotCMSPage;
-    site: DotCMSSite;
-    template: DotCMSTemplate;
-    viewAs?: DotCMSViewAs;
-    vanityUrl?: DotCMSVanityUrl;
-}
-export interface DotPageAssetLayoutRow {
-    identifier: number;
-    value?: string;
-    id?: string;
-    columns: DotPageAssetLayoutColumn[];
-    styleClass?: string;
-}
-export interface DotCMSVanityUrl {
-    pattern: string;
-    vanityUrlId: string;
-    url: string;
-    siteId: string;
-    languageId: number;
-    forwardTo: string;
-    response: number;
-    order: number;
-    temporaryRedirect: boolean;
-    permanentRedirect: boolean;
-    forward: boolean;
-}
-export interface DotPageAssetLayoutColumn {
-    preview: boolean;
-    containers: DotCMSColumnContainer[];
-    widthPercent: number;
-    width: number;
-    leftOffset: number;
-    left: number;
-    styleClass?: string;
-}
-export interface DotCMSColumnContainer {
-    identifier: string;
-    uuid: string;
-    historyUUIDs: string[];
-}
-export interface DotCMSPageAssetContainer {
-    container: DotCMSContainer;
-    containerStructures: DotCMSContainerStructure[];
-    contentlets: {
-        [key: string]: DotCMSContentlet[];
-    };
-}
-export interface DotCMSContainer {
-    identifier: string;
-    uuid: string;
-    iDate: number;
-    type: string;
-    owner?: string;
-    inode: string;
-    source: string;
-    title: string;
-    friendlyName: string;
-    modDate: number;
-    modUser: string;
-    sortOrder: number;
-    showOnMenu: boolean;
-    code?: string;
-    maxContentlets: number;
-    useDiv: boolean;
-    sortContentletsBy?: string;
-    preLoop: string;
-    postLoop: string;
-    staticify: boolean;
-    luceneQuery?: string;
-    notes: string;
-    languageId?: number;
-    path?: string;
-    live: boolean;
-    locked: boolean;
-    working: boolean;
-    deleted: boolean;
-    name: string;
-    archived: boolean;
-    permissionId: string;
-    versionId: string;
-    versionType: string;
-    permissionType: string;
-    categoryId: string;
-    idate: number;
-    new: boolean;
-    acceptTypes: string;
-    contentlets: DotCMSContentlet[];
-    parentPermissionable: DotCMSSiteParentPermissionable;
-}
-export interface DotCMSContentlet {
-    archived: boolean;
-    baseType: string;
-    deleted?: boolean;
-    binary?: string;
-    binaryContentAsset?: string;
-    binaryVersion?: string;
-    contentType: string;
-    file?: string;
-    folder: string;
-    hasLiveVersion?: boolean;
-    hasTitleImage: boolean;
-    host: string;
-    hostName: string;
-    identifier: string;
-    inode: string;
-    image?: any;
-    languageId: number;
-    language?: string;
-    live: boolean;
-    locked: boolean;
-    mimeType?: string;
-    modDate: string;
-    modUser: string;
-    modUserName: string;
-    owner: string;
-    sortOrder: number;
-    stInode: string;
-    title: string;
-    titleImage: string;
-    text?: string;
-    url: string;
-    working: boolean;
-    body?: string;
-    contentTypeIcon?: string;
-    variant?: string;
-    __icon__?: string;
-    [key: string]: any;
-}
-export interface DotcmsNavigationItem {
-    code?: any;
-    folder: string;
-    children?: DotcmsNavigationItem[];
-    host: string;
-    languageId: number;
-    href: string;
-    title: string;
-    type: string;
-    hash: number;
-    target: string;
-    order: number;
-}
-interface DotCMSTemplate {
-    iDate: number;
-    type: string;
-    owner: string;
-    inode: string;
-    identifier: string;
-    source: string;
-    title: string;
-    friendlyName: string;
-    modDate: number;
-    modUser: string;
-    sortOrder: number;
-    showOnMenu: boolean;
-    image: string;
-    drawed: boolean;
-    drawedBody: string;
-    theme: string;
-    anonymous: boolean;
-    template: boolean;
-    name: string;
-    live: boolean;
-    archived: boolean;
-    locked: boolean;
-    working: boolean;
-    permissionId: string;
-    versionId: string;
-    versionType: string;
-    deleted: boolean;
-    permissionType: string;
-    categoryId: string;
-    idate: number;
-    new: boolean;
-    canEdit: boolean;
-}
-interface DotCMSPage {
-    template: string;
-    modDate: number;
-    metadata: string;
-    cachettl: string;
-    pageURI: string;
-    title: string;
-    type: string;
-    showOnMenu: string;
-    httpsRequired: boolean;
-    inode: string;
-    disabledWYSIWYG: any[];
-    seokeywords: string;
-    host: string;
-    lastReview: number;
-    working: boolean;
-    locked: boolean;
-    stInode: string;
-    friendlyName: string;
-    live: boolean;
-    owner: string;
-    identifier: string;
-    nullProperties: any[];
-    friendlyname: string;
-    pagemetadata: string;
-    languageId: number;
-    url: string;
-    seodescription: string;
-    modUserName: string;
-    folder: string;
-    deleted: boolean;
-    sortOrder: number;
-    modUser: string;
-    pageUrl: string;
-    workingInode: string;
-    shortyWorking: string;
-    canEdit: boolean;
-    canRead: boolean;
-    canLock: boolean;
-    lockedOn: number;
-    lockedBy: string;
-    lockedByName: string;
-    liveInode: string;
-    shortyLive: string;
-}
-interface DotCMSViewAs {
-    language: {
-        id: number;
-        languageCode: string;
-        countryCode: string;
-        language: string;
-        country: string;
-    };
-    mode: string;
-}
-interface DotCMSLayout {
-    pageWidth: string;
-    width: string;
-    layout: string;
-    title: string;
-    header: boolean;
-    footer: boolean;
-    body: DotPageAssetLayoutBody;
-    sidebar: DotPageAssetLayoutSidebar;
-}
-interface DotCMSContainerStructure {
-    id: string;
-    structureId: string;
-    containerInode: string;
-    containerId: string;
-    code: string;
-    contentTypeVar: string;
-}
-interface DotPageAssetLayoutSidebar {
-    preview: boolean;
-    containers: DotCMSContainer[];
-    location: string;
-    widthPercent: number;
-    width: string;
-}
-interface DotPageAssetLayoutBody {
-    rows: DotPageAssetLayoutRow[];
-}
-interface DotCMSSite {
-    lowIndexPriority: boolean;
-    name: string;
-    default: boolean;
-    aliases: string;
-    parent: boolean;
-    tagStorage: string;
-    systemHost: boolean;
-    inode: string;
-    versionType: string;
-    structureInode: string;
-    hostname: string;
-    hostThumbnail?: any;
-    owner: string;
-    permissionId: string;
-    permissionType: string;
-    type: string;
-    identifier: string;
-    modDate: number;
-    host: string;
-    live: boolean;
-    indexPolicy: string;
-    categoryId: string;
-    actionId?: any;
-    new: boolean;
-    archived: boolean;
-    locked: boolean;
-    disabledWysiwyg: any[];
-    modUser: string;
-    working: boolean;
-    titleImage: {
-        present: boolean;
-    };
-    folder: string;
-    htmlpage: boolean;
-    fileAsset: boolean;
-    vanityUrl: boolean;
-    keyValue: boolean;
-    structure?: DotCMSSiteStructure;
-    title: string;
-    languageId: number;
-    indexPolicyDependencies: string;
-    contentTypeId: string;
-    versionId: string;
-    lastReview: number;
-    nextReview?: any;
-    reviewInterval?: any;
-    sortOrder: number;
-    contentType: DotCMSSiteContentType;
-}
-interface DotCMSSiteContentType {
-    owner?: any;
-    parentPermissionable: DotCMSSiteParentPermissionable;
-    permissionId: string;
-    permissionType: string;
-}
-export interface DotCMSSiteParentPermissionable {
-    Inode: string;
-    Identifier: string;
-    permissionByIdentifier: boolean;
-    type: string;
-    owner?: any;
-    identifier: string;
-    permissionId: string;
-    parentPermissionable?: any;
-    permissionType: string;
-    inode: string;
-    childrenPermissionable?: any;
-    variantId?: string;
-}
-interface DotCMSSiteStructure {
-    iDate: number;
-    type: string;
-    owner?: any;
-    inode: string;
-    identifier: string;
-    name: string;
-    description: string;
-    defaultStructure: boolean;
-    reviewInterval?: any;
-    reviewerRole?: any;
-    pagedetail?: any;
-    structureType: number;
-    fixed: boolean;
-    system: boolean;
-    velocityVarName: string;
-    urlMapPattern?: any;
-    host: string;
-    folder: string;
-    publishDateVar?: any;
-    expireDateVar?: any;
-    modDate: number;
-    fields: DotCMSSiteField[];
-    widget: boolean;
-    detailPage?: any;
-    fieldsBySortOrder: DotCMSSiteField[];
-    form: boolean;
-    htmlpageAsset: boolean;
-    content: boolean;
-    fileAsset: boolean;
-    persona: boolean;
-    permissionId: string;
-    permissionType: string;
-    live: boolean;
-    categoryId: string;
-    idate: number;
-    new: boolean;
-    archived: boolean;
-    locked: boolean;
-    modUser: string;
-    working: boolean;
-    title: string;
-    versionId: string;
-    versionType: string;
-}
-interface DotCMSSiteField {
-    iDate: number;
-    type: string;
-    owner?: any;
-    inode: string;
-    identifier: string;
-    structureInode: string;
-    fieldName: string;
-    fieldType: string;
-    fieldRelationType?: any;
-    fieldContentlet: string;
-    required: boolean;
-    velocityVarName: string;
-    sortOrder: number;
-    values?: any;
-    regexCheck?: any;
-    hint?: any;
-    defaultValue?: any;
-    indexed: boolean;
-    listed: boolean;
-    fixed: boolean;
-    readOnly: boolean;
-    searchable: boolean;
-    unique: boolean;
-    modDate: number;
-    dataType: string;
-    live: boolean;
-    categoryId: string;
-    idate: number;
-    new: boolean;
-    archived: boolean;
-    locked: boolean;
-    modUser: string;
-    working: boolean;
-    permissionId: string;
-    parentPermissionable?: any;
-    permissionType: string;
-    title: string;
-    versionId: string;
-    versionType: string;
-}
-export {};