@dotcms/react 0.0.1-alpha.9 → 0.0.1-beta.10

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;

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

@@ -0,0 +1,421 @@
+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 {};

package/src/lib/next/utils/index.d.ts

@@ -0,0 +1,136 @@
+import { DotPageAssetLayoutColumn, DotCMSContentlet, DotCMSColumnContainer, DotCMSPageAsset } from '../types';
+/**
+ * @internal
+ *
+ * Interface representing the data needed for container editing
+ * @interface EditableContainerData
+ */
+interface EditableContainerData {
+    uuid: string;
+    identifier: string;
+    acceptTypes: string;
+    maxContentlets: number;
+    variantId?: string;
+}
+/**
+ * @internal
+ *
+ * Interface representing the data attributes of a DotCMS container.
+ * @interface DotContainerAttributes
+ */
+export interface DotContainerAttributes {
+    'data-dot-object': string;
+    'data-dot-accept-types': string;
+    'data-dot-identifier': string;
+    'data-max-contentlets': string;
+    'data-dot-uuid': string;
+}
+/**
+ * @internal
+ *
+ * Interface representing the data attributes of a DotCMS contentlet.
+ * @interface DotContentletAttributes
+ */
+export interface DotContentletAttributes {
+    'data-dot-identifier': string;
+    'data-dot-basetype': string;
+    'data-dot-title': string;
+    'data-dot-inode': string;
+    'data-dot-type': string;
+    'data-dot-container': string;
+    'data-dot-on-number-of-pages': string;
+}
+/**
+ * @internal
+ *
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
+export declare const combineClasses: (classes: string[]) => string;
+/**
+ * @internal
+ *
+ * Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
+ * Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
+ *
+ * @example
+ * ```typescript
+ * const classes = getColumnPositionClasses({
+ *   leftOffset: 1, // Starts at the first column
+ *   width: 6      // Spans 6 columns
+ * });
+ * // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
+ * ```
+ *
+ * @param {DotPageAssetLayoutColumn} column - Column configuration object
+ * @param {number} column.leftOffset - Starting position (0-based) in the grid
+ * @param {number} column.width - Number of columns to span
+ * @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
+ */
+export declare const getColumnPositionClasses: (column: DotPageAssetLayoutColumn) => {
+    startClass: string;
+    endClass: string;
+};
+/**
+ * @internal
+ *
+ * Helper function that returns an object containing the dotCMS data attributes.
+ * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
+ * @param {string} container - The container to get the attributes for
+ * @returns {DotContentletAttributes} The dotCMS data attributes
+ */
+export declare function getDotContentletAttributes(contentlet: DotCMSContentlet, container: string): DotContentletAttributes;
+/**
+ * @internal
+ *
+ * Retrieves container data from a DotCMS page asset using the container reference.
+ * This function processes the container information and returns a standardized format
+ * for container editing.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @throws {Error} When page asset is invalid or container is not found
+ * @returns {EditableContainerData} Formatted container data for editing
+ *
+ * @example
+ * const containerData = getContainersData(pageAsset, containerRef);
+ * // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
+ */
+export declare const getContainersData: (dotCMSPageAsset: DotCMSPageAsset, columContainer: DotCMSColumnContainer) => EditableContainerData | null;
+/**
+ * @internal
+ *
+ * Retrieves the contentlets (content items) associated with a specific container.
+ * Handles different UUID formats and provides warning for missing contentlets.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @returns {DotCMSContentlet[]} Array of contentlets in the container
+ *
+ * @example
+ * const contentlets = getContentletsInContainer(pageAsset, containerRef);
+ * // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
+ */
+export declare const getContentletsInContainer: (dotCMSPageAsset: DotCMSPageAsset, columContainer: DotCMSColumnContainer) => DotCMSContentlet[];
+/**
+ * @internal
+ *
+ * Generates the required DotCMS data attributes for a container element.
+ * These attributes are used by DotCMS for container identification and functionality.
+ *
+ * @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
+ * @returns {DotContainerAttributes} Object containing all necessary data attributes
+ *
+ * @example
+ * const attributes = getDotContainerAttributes({
+ *   uuid: '123',
+ *   identifier: 'cont1',
+ *   acceptTypes: 'type1,type2',
+ *   maxContentlets: 5
+ * });
+ * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
+ */
+export declare function getDotContainerAttributes({ uuid, identifier, acceptTypes, maxContentlets }: EditableContainerData): DotContainerAttributes;
+export {};

package/src/next.d.ts

@@ -0,0 +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/.babelrc

@@ -1,12 +0,0 @@
-{
-    "presets": [
-        [
-            "@nrwl/react/babel",
-            {
-                "runtime": "automatic",
-                "useBuiltIns": "usage"
-            }
-        ]
-    ],
-    "plugins": []
-}

package/.eslintrc.json

@@ -1,18 +0,0 @@
-{
-    "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.base.json"],
-    "ignorePatterns": ["!**/*"],
-    "overrides": [
-        {
-            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.ts", "*.tsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.js", "*.jsx"],
-            "rules": {}
-        }
-    ]
-}

package/jest.config.ts

@@ -1,11 +0,0 @@
-/* eslint-disable */
-export default {
-    displayName: 'sdk-react',
-    preset: '../../../jest.preset.js',
-    transform: {
-        '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-        '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }]
-    },
-    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-    coverageDirectory: '../../../coverage/libs/sdk/react'
-};