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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.20",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.2",
-    "@dotcms/uve": "0.0.1-beta.2",
+    "@dotcms/client": "0.0.1-beta.20",
+    "@dotcms/uve": "0.0.1-beta.20",
     "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",
@@ -22,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/lib/next/__test__/mock.d.ts

@@ -1,4 +1,4 @@
-import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '../types';
+import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '@dotcms/uve/types';
 export declare const MOCK_COLUMN: DotPageAssetLayoutColumn;
 export declare const MOCK_CONTAINER: DotCMSColumnContainer;
 export declare const MOCK_PAGE_ASSET: DotCMSPageAsset;

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

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

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

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

package/src/lib/next/components/Container/{ContainerFallbakcs.d.ts → ContainerFallbacks.d.ts}

@@ -1,4 +1,4 @@
-import { DotContainerAttributes } from '../../utils';
+import { DotContainerAttributes } from '@dotcms/uve/types';
 /**
  * @internal
  *
@@ -10,7 +10,7 @@ import { DotContainerAttributes } from '../../utils';
  * @param {string} props.identifier - Container identifier
  * @returns {JSX.Element | null} Message about missing container or null in production
  */
-export declare const ContainerNoFound: ({ identifier }: {
+export declare const ContainerNotFound: ({ identifier }: {
     identifier: string;
 }) => import("react/jsx-runtime").JSX.Element | null;
 /**

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

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

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/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,3 @@
 export { DotCMSLayoutBody } from './lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody';
+export { DotCMSShow } from './lib/next/components/DotCMSShow/DotCMSShow';
+export { useDotCMSShowWhen } from './lib/next/hooks/useDotCMSShowWhen';

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 {};