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

package/package.json

@@ -1,29 +1,35 @@
 {
-    "name": "@dotcms/react",
-    "version": "0.0.1-alpha.9",
-    "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18",
-        "@dotcms/client": "0.0.1-alpha.9"
-    },
-    "description": "Official React Components library to render a dotCMS page.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "API Client",
-        "REST API",
-        "React",
-        "Components"
-    ],
-    "author": "dotcms <dev@dotcms.com>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md"
-}
+  "name": "@dotcms/react",
+  "version": "0.0.1-beta.2",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@dotcms/client": "0.0.1-beta.2",
+    "@dotcms/uve": "0.0.1-beta.2",
+    "@tinymce/tinymce-react": "^5.1.1"
+  },
+  "description": "Official React Components library to render a dotCMS page.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#main"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "API Client",
+    "REST API",
+    "React",
+    "Components"
+  ],
+  "author": "dotcms <dev@dotcms.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/main/core-web/libs/sdk/react/README.md",
+  "module": "./index.esm.js",
+  "type": "module",
+  "main": "./index.esm.js",
+  "types": "./index.esm.d.ts"
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/deprecated/deprecated_api';

package/src/lib/deprecated/components/BlockEditorRenderer/BlockEditorRenderer.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { DotCMSContentlet } from '../../models';
+import { Block } from '../../models/blocks.interface';
+import { CustomRenderer } from '../../models/content-node.interface';
+interface BaseProps {
+    blocks: Block;
+    customRenderers?: CustomRenderer;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface EditableProps extends BaseProps {
+    editable: true;
+    contentlet: DotCMSContentlet;
+    fieldName: string;
+}
+interface NonEditableProps extends BaseProps {
+    editable?: false;
+    contentlet?: never;
+    fieldName?: never;
+}
+type BlockEditorRendererProps = EditableProps | NonEditableProps;
+/**
+ * BlockEditorRenderer component for rendering block editor field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Block} props.blocks - The blocks of content to render.
+ * @param {CustomRenderer} [props.customRenderers] - Optional custom renderers for specific block types.
+ * @param {string} [props.className] - Optional CSS class name for the container div.
+ * @param {React.CSSProperties} [props.style] - Optional inline styles for the container div.
+ * @param {boolean} props.editable - Flag to enable inline editing. When true, `contentlet` and `fieldName` are required. Note: Enterprise only feature.
+ * @param {DotCMSContentlet} [props.contentlet] - Contentlet object for inline editing. Required when `editable` is true.
+ * @param {string} [props.fieldName] - Field name for inline editing. Required when `editable` is true.
+ * @returns {JSX.Element} A div containing the rendered blocks of content.
+ */
+export declare const BlockEditorRenderer: ({ style, blocks, editable, fieldName, className, contentlet, customRenderers }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/src/lib/deprecated/components/BlockEditorRenderer/blocks/Code.d.ts

@@ -0,0 +1,17 @@
+import { BlockProps } from '../../../models/blocks.interface';
+import { CodeBlockProps } from '../../../models/content-node.interface';
+/**
+ * Renders a code block component.
+ *
+ * @param attrs - The attributes of the code block.
+ * @param children - The content of the code block.
+ * @returns The rendered code block component.
+ */
+export declare const CodeBlock: ({ attrs, children }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a blockquote component.
+ *
+ * @param children - The content to be rendered inside the blockquote.
+ * @returns The rendered blockquote component.
+ */
+export declare const BlockQuote: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/deprecated/components/BlockEditorRenderer/blocks/Contentlet.d.ts

@@ -0,0 +1,41 @@
+import { DotContentProps } from '../../../models/content-node.interface';
+export interface Contentlet {
+    hostName: string;
+    modDate: string;
+    publishDate: string;
+    title: string;
+    baseType: string;
+    inode: string;
+    archived: boolean;
+    ownerName: string;
+    host: string;
+    working: boolean;
+    locked: boolean;
+    stInode: string;
+    contentType: string;
+    live: boolean;
+    owner: string;
+    identifier: string;
+    publishUserName: string;
+    publishUser: string;
+    languageId: number;
+    creationDate: string;
+    url: string;
+    titleImage: string;
+    modUserName: string;
+    hasLiveVersion: boolean;
+    folder: string;
+    hasTitleImage: boolean;
+    sortOrder: number;
+    modUser: string;
+    __icon__: string;
+    contentTypeIcon: string;
+    variant: string;
+}
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+export declare const DotContent: ({ customRenderers, ...props }: DotContentProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/deprecated/components/BlockEditorRenderer/blocks/Image.d.ts

@@ -0,0 +1,8 @@
+import { ContentNode } from '../../../models/content-node.interface';
+/**
+ * Renders an image component for dotCMS.
+ *
+ * @param props - The props for the DotCMSImage component.
+ * @returns The rendered image component.
+ */
+export declare const DotCMSImage: (props: ContentNode) => import("react/jsx-runtime").JSX.Element;

package/src/lib/deprecated/components/BlockEditorRenderer/blocks/Lists.d.ts

@@ -0,0 +1,22 @@
+import { BlockProps } from '../../../models/blocks.interface';
+/**
+ * ListItem component represents a list item in a block editor.
+ *
+ * @param children - The content of the list item.
+ * @returns The rendered list item element.
+ */
+export declare const ListItem: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders an ordered list component.
+ *
+ * @param children - The content to be rendered inside the ordered list.
+ * @returns The ordered list component.
+ */
+export declare const OrderedList: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a bullet list component.
+ *
+ * @param children - The content of the bullet list.
+ * @returns The rendered bullet list component.
+ */
+export declare const BulletList: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/deprecated/components/BlockEditorRenderer/blocks/Table.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ContentNode } from '../../../models/content-node.interface';
+interface TableRendererProps {
+    content: ContentNode[];
+    blockEditorItem: React.FC<{
+        content: ContentNode[];
+    }>;
+}
+/**
+ * Renders a table component for the Block Editor.
+ *
+ * @param content - The content of the table.
+ * @param blockEditorItem - The Block Editor item component.
+ */
+export declare const TableRenderer: React.FC<TableRendererProps>;
+export {};

package/src/lib/deprecated/components/BlockEditorRenderer/blocks/Texts.d.ts

@@ -0,0 +1,71 @@
+import { BlockProps } from '../../../models/blocks.interface';
+import { ContentNode, HeadingProps, LinkProps, ParagraphProps } from '../../../models/content-node.interface';
+/**
+ * Renders the text in bold.
+ *
+ * @param children - The content to be rendered in bold.
+ */
+export declare const Bold: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the text in italic format.
+ *
+ * @param children - The content to be rendered in italic.
+ */
+export declare const Italic: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a strike-through text.
+ *
+ * @param children - The content to be rendered within the strike-through element.
+ */
+export declare const Strike: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders an underline element for the given children.
+ *
+ * @param children - The content to be underlined.
+ */
+export declare const Underline: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a paragraph element.
+ *
+ * @param children - The content of the paragraph.
+ * @param attrs - The style attributes for the paragraph.
+ * @returns The rendered paragraph element.
+ */
+export declare const Paragraph: ({ children, attrs }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a link component.
+ *
+ * @param children - The content of the link.
+ * @param attrs - The attributes to be applied to the link.
+ * @returns The rendered link component.
+ */
+export declare const Link: ({ children, attrs }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a heading element with the specified level.
+ *
+ * @param children - The content of the heading.
+ * @param attrs - The attributes for the heading.
+ * @returns The rendered heading element.
+ */
+export declare const Heading: ({ children, attrs }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the superscript text.
+ *
+ * @param children - The content to be rendered as superscript.
+ */
+export declare const Superscript: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a subscript element.
+ *
+ * @param children - The content to be rendered as subscript.
+ */
+export declare const Subscript: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+type TextBlockProps = Omit<ContentNode, 'content' | 'attrs'>;
+/**
+ * Renders a text block with optional marks.
+ *
+ * @param props - The props for the TextBlock component.
+ * @returns The rendered text block.
+ */
+export declare const TextBlock: (props: TextBlockProps) => string | import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/src/lib/deprecated/components/BlockEditorRenderer/blocks/Video.d.ts

@@ -0,0 +1,8 @@
+import { ContentNode } from '../../../models/content-node.interface';
+/**
+ * Renders a video component for displaying videos.
+ *
+ * @param props - The properties for the video component.
+ * @returns The rendered video component.
+ */
+export declare const DotCMSVideo: (props: ContentNode) => import("react/jsx-runtime").JSX.Element;

package/src/lib/deprecated/components/BlockEditorRenderer/item/BlockEditorBlock.d.ts

@@ -0,0 +1,12 @@
+import { ContentNode, CustomRenderer } from '../../../models/content-node.interface';
+/**
+ * Renders a block editor item based on the provided content and custom renderers.
+ *
+ * @param content - The content nodes to render.
+ * @param customRenderers - Optional custom renderers for specific node types.
+ * @returns The rendered block editor item.
+ */
+export declare const BlockEditorBlock: ({ content, customRenderers }: {
+    content: ContentNode[];
+    customRenderers?: CustomRenderer;
+}) => import("react/jsx-runtime").JSX.Element[];

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

@@ -0,0 +1,19 @@
+import { DotCMSPageContext } from '../../models';
+/**
+ * Props for Column component to render a column with its containers.
+ *
+ * @export
+ * @interface ColumnProps
+ */
+export interface ColumnProps {
+    readonly column: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0];
+}
+/**
+ * Renders a Column with its containers using information provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ColumnProps} { column }
+ * @return {JSX.Element} Rendered column with containers
+ */
+export declare function Column({ column }: ColumnProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { DotCMSPageContext } from '../../models';
+/**
+ * Props for the Container component.
+ *
+ * @export
+ * @interface ContainerProps
+ */
+export interface ContainerProps {
+    readonly containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0];
+}
+/**
+ * Renders a Container with its content using information provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ContainerProps} { containerRef }
+ * @return {JSX.Element} Rendered container with content
+ */
+export declare function Container({ containerRef }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/deprecated/components/DotEditableText/DotEditableText.d.ts

@@ -0,0 +1,30 @@
+import { DotEditableTextProps } from './utils';
+/**
+ * Allows inline edit content pulled from dotCMS API using TinyMCE editor
+ *
+ * @export
+ * @component
+ * @param {Readonly<DotEditableTextProps>} props {
+ *     mode = 'plain',
+ *     format = 'text',
+ *     contentlet,
+ *     fieldName = ''
+ * }
+ * @example
+ * ```javascript
+ * import { DotEditableText } from '@dotcms/react';
+ *
+ * const MyContentletWithTitle = ({ contentlet }) => (
+ *     <h2>
+ *         <DotEditableText
+ *             contentlet={contentlet}
+ *             fieldName="title"
+ *             mode='full'
+ *             format='text'/>
+ *     </h2>
+ * );
+ * ```
+ * @returns {JSX.Element} A component to edit content inline
+ */
+export declare function DotEditableText({ mode, format, contentlet, fieldName }: Readonly<DotEditableTextProps>): JSX.Element;
+export default DotEditableText;

package/src/lib/deprecated/components/DotEditableText/utils.d.ts

@@ -0,0 +1,36 @@
+import { IAllProps } from '@tinymce/tinymce-react';
+import { DotCMSContentlet } from '../../models';
+export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
+export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
+export interface DotEditableTextProps {
+    /**
+     * Represents the field name of the `contentlet` that can be edited
+     *
+     * @memberof DotEditableTextProps
+     */
+    fieldName: string;
+    /**
+     * Represents the format of the editor which can be `text` or `html`
+     *
+     * @type {DOT_EDITABLE_TEXT_FORMAT}
+     * @memberof DotEditableTextProps
+     */
+    format?: DOT_EDITABLE_TEXT_FORMAT;
+    /**
+     * Represents the mode of the editor which can be `plain`, `minimal`, or `full`
+     *
+     * @type {DOT_EDITABLE_TEXT_MODE}
+     * @memberof DotEditableTextProps
+     */
+    mode?: DOT_EDITABLE_TEXT_MODE;
+    /**
+     * Represents the `contentlet` that can be inline edited
+     *
+     * @type {DotCMSContentlet}
+     * @memberof DotEditableTextProps
+     */
+    contentlet: DotCMSContentlet;
+}
+export declare const TINYMCE_CONFIG: {
+    [key in DOT_EDITABLE_TEXT_MODE]: IAllProps['init'];
+};

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

@@ -1,32 +1,27 @@
 import { DotCMSPageEditorConfig } from '@dotcms/client';
-
-import { useDotcmsEditor } from '../../hooks/useDotcmsEditor';
-import { PageProvider, PageProviderContext } from '../PageProvider/PageProvider';
-import { Row } from '../Row/Row';
+import { DotCMSPageContext } from '../../models';
 /**
  * `DotcmsPageProps` is a type that defines the properties for the `DotcmsLayout` component.
  * It includes a readonly `entity` property that represents the context for a DotCMS page.
  *
  * @typedef {Object} DotcmsPageProps
  *
- * @property {PageProviderContext} entity - The context for a DotCMS page.
+ * @property {DotCMSPageContext} entity - The context for a DotCMS page.
  * @readonly
  */
 export type DotcmsPageProps = {
     /**
-     * `entity` is a readonly property of the `DotcmsPageProps` type.
+     * `pageContext` is a readonly property of the `DotcmsPageProps` type.
      * It represents the context for a DotCMS page and is of type `PageProviderContext`.
      *
-     * @property {PageProviderContext} entity
+     * @property {PageProviderContext} pageContext
      * @memberof DotcmsPageProps
-     * @type {PageProviderContext}
+     * @type {DotCMSPageContext}
      * @readonly
      */
-    readonly entity: PageProviderContext;
-
-    readonly config?: DotCMSPageEditorConfig;
+    readonly pageContext: DotCMSPageContext;
+    readonly config: DotCMSPageEditorConfig;
 };
-
 /**
  * `DotcmsLayout` is a functional component that renders a layout for a DotCMS page.
  * It takes a `DotcmsPageProps` object as a parameter and returns a JSX element.
@@ -34,15 +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 function DotcmsLayout({ entity, config }: DotcmsPageProps): JSX.Element {
-    const isInsideEditor = useDotcmsEditor(config);
-
-    return (
-        <PageProvider entity={{ ...entity, isInsideEditor }}>
-            {entity.layout.body.rows.map((row, index) => (
-                <Row key={index} row={row} />
-            ))}
-        </PageProvider>
-    );
-}
+export declare function DotcmsLayout(dotPageProps: DotcmsPageProps): JSX.Element;

package/src/lib/deprecated/components/PageProvider/PageProvider.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface PageProviderProps {
+    readonly pageContext: any;
+    readonly children: ReactNode;
+}
+/**
+ * `PageProvider` is a functional component that provides a context for a DotCMS page.
+ * It takes a `PageProviderProps` object as a parameter and returns a JSX element.
+ *
+ * @category Components
+ * @param {PageProviderProps} props - The properties for the PageProvider. Includes an `entity` and `children`.
+ * @returns {JSX.Element} - A JSX element that provides a context for a DotCMS page.
+ */
+export declare function PageProvider(props: PageProviderProps): JSX.Element;

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { DotCMSPageContext } from '../../models';
+/**
+ * Props for the row component
+ *
+ * @interface RowProps
+ *
+ */
+export interface RowProps {
+    /**
+     * Row data
+     *
+     * @type {DotCMSPageContext['layout']['body']['rows'][0]}
+     * @memberof RowProps
+     */
+    row: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0];
+}
+/**
+ * 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, RowProps>} ref
+ * @return {JSX.Element} Rendered rows with columns
+ */
+export declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLDivElement>>;

package/src/lib/deprecated/contexts/PageContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DotCMSPageContext } from '../models';
+/**
+ * The `PageContext` is a React context that provides access to the DotCMS page context.
+ *
+ * @category Contexts
+ */
+export declare const PageContext: import("react").Context<DotCMSPageContext | null>;

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/deprecated/hooks/useCheckHaveContent.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useCheckHaveContent: () => {
+    contentletDivRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    haveContent: boolean;
+};

package/src/lib/deprecated/hooks/useDotcmsEditor.d.ts

@@ -0,0 +1,13 @@
+import { DotcmsPageProps } from '../components/DotcmsLayout/DotcmsLayout';
+import { DotCMSPageContext } from '../models';
+/**
+ * Custom Hook to handle the DotCMS editor interaction with the page.
+ *
+ * @category Hooks
+ * @param {DotcmsPageProps} props {
+ *     pageContext,
+ *     config,
+ * }
+ * @returns {DotCMSPageContext} The context for a DotCMS page provided by the editor.
+ */
+export declare const useDotcmsEditor: ({ pageContext, config }: DotcmsPageProps) => DotCMSPageContext;

package/src/lib/deprecated/hooks/useDotcmsPageContext.d.ts

@@ -0,0 +1,9 @@
+import { DotCMSPageContext } from '../models';
+/**
+ * `useDotcmsPageContext` is a custom React hook that provides access to the `PageProviderContext`.
+ * It takes no parameters and returns the context value or `null` if it's not available.
+ *
+ * @category Hooks
+ * @returns {DotCMSPageContext | null} - The context value or `null` if it's not available.
+ */
+export declare function useDotcmsPageContext(): DotCMSPageContext | null;

package/src/lib/deprecated/mocks/mockPageContext.d.ts

@@ -0,0 +1,7 @@
+import { DotCMSPageContext, DotCMSContentlet } from '../models';
+export declare const dotcmsContentletMock: DotCMSContentlet;
+export declare const mockPageContext: DotCMSPageContext;
+export declare const MockContextRender: ({ children, mockContext }: {
+    children: JSX.Element;
+    mockContext: Partial<DotCMSPageContext>;
+}) => import("react/jsx-runtime").JSX.Element;