@dotcms/react 0.0.1-alpha.38 → 0.0.1-alpha.39

package/.babelrc

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

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "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

@@ -0,0 +1,11 @@
+/* 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'
+};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.38",
+  "version": "0.0.1-alpha.39",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.38",
+    "@dotcms/client": "0.0.1-alpha.39",
     "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",
@@ -26,9 +26,5 @@
   "bugs": {
     "url": "https://github.com/dotCMS/core/issues"
   },
-  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md",
-  "module": "./index.esm.js",
-  "type": "module",
-  "main": "./index.esm.js",
-  "types": "./index.esm.d.ts"
-}
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md"
+}

package/project.json

@@ -0,0 +1,56 @@
+{
+    "name": "sdk-react",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/sdk/react/src",
+    "projectType": "library",
+    "tags": [],
+    "targets": {
+        "lint": {
+            "executor": "@nx/eslint:lint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/sdk/react/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "build": {
+            "executor": "@nrwl/rollup:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/sdk/react",
+                "tsConfig": "libs/sdk/react/tsconfig.lib.json",
+                "project": "libs/sdk/react/package.json",
+                "entryFile": "libs/sdk/react/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "extractCss": false,
+                "assets": [
+                    {
+                        "glob": "libs/sdk/react/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/sdk/react/jest.config.ts",
+                "passWithNoTests": true
+            },
+            "configurations": {
+                "ci": {
+                    "ci": true,
+                    "codeCoverage": true
+                }
+            }
+        },
+        "nx-release-publish": {
+            "options": {
+                "packageRoot": "dist/libs/sdk/react"
+            }
+        }
+    }
+}

package/src/lib/components/BlockEditorRenderer/BlockEditorRenderer.spec.tsx

@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+import { BlockEditorRenderer } from './BlockEditorRenderer';
+
+import { Block } from '../../models/blocks.interface';
+
+describe('BlockEditorRenderer', () => {
+    const blocks = {
+        content: [
+            {
+                type: 'paragraph',
+                attrs: {},
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Hello, World!'
+                    }
+                ]
+            }
+        ]
+    } as Block;
+
+    it('should render the BlockEditorItem component', () => {
+        const { getByText } = render(<BlockEditorRenderer blocks={blocks} />);
+        expect(getByText('Hello, World!')).toBeInTheDocument();
+    });
+
+    it('should render the custom renderer component', () => {
+        const customRenderers = {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            paragraph: ({ content }: { content: any }) => {
+                const [{ text }] = content;
+
+                return <p data-testid="custom-paragraph">{text}</p>;
+            }
+        };
+        const { getByTestId } = render(
+            <BlockEditorRenderer blocks={blocks} customRenderers={customRenderers} />
+        );
+        expect(getByTestId('custom-paragraph')).toBeInTheDocument();
+    });
+
+    it('should render the property className and style props', () => {
+        const { container } = render(
+            <BlockEditorRenderer blocks={blocks} className="test-class" style={{ color: 'red' }} />
+        );
+        expect(container.firstChild).toHaveClass('test-class');
+        expect(container.firstChild).toHaveStyle('color: red');
+    });
+});

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

@@ -1,12 +1,15 @@
-/// <reference types="react" />
+import { BlockEditorBlock } from './item/BlockEditorBlock';
+
 import { Block } from '../../models/blocks.interface';
 import { CustomRenderer } from '../../models/content-node.interface';
+
 export interface BlockEditorRendererProps {
     blocks: Block;
     customRenderers?: CustomRenderer;
     className?: string;
     style?: React.CSSProperties;
 }
+
 /**
  * BlockEditorRenderer component for rendering block editor field.
  *
@@ -18,4 +21,15 @@ 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 BlockEditorRenderer: ({ blocks, customRenderers, className, style }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element;
+export const BlockEditorRenderer = ({
+    blocks,
+    customRenderers,
+    className,
+    style
+}: BlockEditorRendererProps) => {
+    return (
+        <div className={className} style={style}>
+            <BlockEditorBlock content={blocks.content} customRenderers={customRenderers} />
+        </div>
+    );
+};

package/src/lib/components/BlockEditorRenderer/blocks/{Code.d.ts → Code.tsx}

@@ -1,5 +1,6 @@
 import { BlockProps } from '../../../models/blocks.interface';
 import { CodeBlockProps } from '../../../models/content-node.interface';
+
 /**
  * Renders a code block component.
  *
@@ -7,11 +8,22 @@ import { CodeBlockProps } from '../../../models/content-node.interface';
  * @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;
+export const CodeBlock = ({ attrs, children }: CodeBlockProps) => {
+    const language = attrs?.language || '';
+
+    return (
+        <pre data-language={language}>
+            <code>{children}</code>
+        </pre>
+    );
+};
+
 /**
  * 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;
+export const BlockQuote = ({ children }: BlockProps) => {
+    return <blockquote>{children}</blockquote>;
+};

package/src/lib/components/BlockEditorRenderer/blocks/{Contentlet.d.ts → Contentlet.tsx}

@@ -1,4 +1,6 @@
 import { DotContentProps } from '../../../models/content-node.interface';
+
+// Replace this when we have a types lib
 export interface Contentlet {
     hostName: string;
     modDate: string;
@@ -32,10 +34,28 @@ export interface Contentlet {
     contentTypeIcon: string;
     variant: string;
 }
+
+/**
+ * Renders the default content for an unknown content type.
+ */
+const DefaultContent = () => <div>Unknown Content Type</div>;
+
 /**
  * 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;
+export const DotContent = ({ customRenderers, ...props }: DotContentProps) => {
+    const { attrs } = props;
+
+    const data = attrs?.data as unknown as Contentlet;
+
+    const Component = customRenderers?.[data?.contentType] ?? DefaultContent;
+
+    if (!data) {
+        console.error('DotContent: No data provided');
+    }
+
+    return <Component {...props} />;
+};

package/src/lib/components/BlockEditorRenderer/blocks/Image.tsx

@@ -0,0 +1,18 @@
+import { DotCmsClient } from '@dotcms/client';
+
+import { ContentNode, DotCMSImageProps } 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 const DotCMSImage = (props: ContentNode) => {
+    const { data, src, alt } = props.attrs as DotCMSImageProps;
+    const client = DotCmsClient.instance;
+
+    const srcUrl = data?.identifier ? `${client.dotcmsUrl}${src}` : src;
+
+    return <img alt={alt} src={srcUrl} />;
+};

package/src/lib/components/BlockEditorRenderer/blocks/{Lists.d.ts → Lists.tsx}

@@ -1,22 +1,31 @@
 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;
+export const ListItem = ({ children }: BlockProps) => {
+    return <li>{children}</li>;
+};
+
 /**
  * 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;
+export const OrderedList = ({ children }: BlockProps) => {
+    return <ol>{children}</ol>;
+};
+
 /**
  * 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;
+export const BulletList = ({ children }: BlockProps) => {
+    return <ul>{children}</ul>;
+};

package/src/lib/components/BlockEditorRenderer/blocks/Table.tsx

@@ -0,0 +1,60 @@
+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 const TableRenderer: React.FC<TableRendererProps> = ({
+    content,
+    blockEditorItem
+}: TableRendererProps) => {
+    const BlockEditorItemComponent = blockEditorItem;
+
+    const renderTableContent = (node: ContentNode) => {
+        return <BlockEditorItemComponent content={node.content} />;
+    };
+
+    return (
+        <table>
+            <thead>
+                {content.slice(0, 1).map((rowNode, rowIndex) => (
+                    <tr key={`${rowNode.type}-${rowIndex}`}>
+                        {rowNode.content?.map((cellNode, cellIndex) => (
+                            <th
+                                key={`${cellNode.type}-${cellIndex}`}
+                                colSpan={Number(cellNode.attrs?.colspan || 1)}
+                                rowSpan={Number(cellNode.attrs?.rowspan || 1)}>
+                                {renderTableContent(cellNode)}
+                            </th>
+                        ))}
+                    </tr>
+                ))}
+            </thead>
+            <tbody>
+                {content.slice(1).map((rowNode, rowIndex) => (
+                    <tr key={`${rowNode.type}-${rowIndex}`}>
+                        {rowNode.content?.map((cellNode, cellIndex) => (
+                            <td
+                                key={`${cellNode.type}-${cellIndex}`}
+                                colSpan={Number(cellNode.attrs?.colspan || 1)}
+                                rowSpan={Number(cellNode.attrs?.rowspan || 1)}>
+                                {renderTableContent(cellNode)}
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+};

package/src/lib/components/BlockEditorRenderer/blocks/Texts.tsx

@@ -0,0 +1,126 @@
+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 const Bold = ({ children }: BlockProps) => <strong>{children}</strong>;
+
+/**
+ * Renders the text in italic format.
+ *
+ * @param children - The content to be rendered in italic.
+ */
+export const Italic = ({ children }: BlockProps) => <em>{children}</em>;
+
+/**
+ * Renders a strike-through text.
+ *
+ * @param children - The content to be rendered within the strike-through element.
+ */
+export const Strike = ({ children }: BlockProps) => <s>{children}</s>;
+
+/**
+ * Renders an underline element for the given children.
+ *
+ * @param children - The content to be underlined.
+ */
+export const Underline = ({ children }: BlockProps) => <u>{children}</u>;
+
+/**
+ * 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 const Paragraph = ({ children, attrs }: ParagraphProps) => {
+    return <p style={attrs}>{children}</p>;
+};
+
+/**
+ * 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 const Link = ({ children, attrs }: LinkProps) => {
+    return <a {...attrs}>{children}</a>;
+};
+
+/**
+ * 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 const Heading = ({ children, attrs }: HeadingProps) => {
+    const level = attrs?.level || 1;
+    const Tag = `h${level}` as keyof JSX.IntrinsicElements;
+
+    return <Tag>{children}</Tag>;
+};
+
+/**
+ * Renders the superscript text.
+ *
+ * @param children - The content to be rendered as superscript.
+ */
+export const Superscript = ({ children }: BlockProps) => <sup>{children}</sup>;
+
+/**
+ * Renders a subscript element.
+ *
+ * @param children - The content to be rendered as subscript.
+ */
+export const Subscript = ({ children }: BlockProps) => <sub>{children}</sub>;
+
+const nodeMarks: Record<string, React.FC<BlockProps | LinkProps | HeadingProps>> = {
+    link: Link,
+    bold: Bold,
+    underline: Underline,
+    italic: Italic,
+    strike: Strike,
+    superscript: Superscript,
+    subscript: Subscript
+};
+
+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 const TextBlock = (props: TextBlockProps) => {
+    const { marks = [], text } = props;
+    const mark = marks[0] || { type: '', attrs: {} };
+    const newProps = { ...props, marks: marks.slice(1) };
+    const Component = nodeMarks[mark?.type];
+
+    // To avoid the warning: "Warning: Invalid DOM property `class`. Did you mean `className`?"
+    if (mark.attrs) {
+        mark.attrs.className = mark.attrs.class;
+        delete mark.attrs.class;
+    }
+
+    if (!Component) {
+        return text;
+    }
+
+    return (
+        <Component attrs={mark.attrs}>
+            <TextBlock {...newProps} />
+        </Component>
+    );
+};

package/src/lib/components/BlockEditorRenderer/blocks/Video.tsx

@@ -0,0 +1,26 @@
+import { DotCmsClient } from '@dotcms/client';
+
+import { ContentNode, DotCMSVideoProps } 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 const DotCMSVideo = (props: ContentNode) => {
+    const { data, src, mimeType, width, height } = props.attrs as DotCMSVideoProps;
+    const client = DotCmsClient.instance;
+
+    const srcUrl = data?.identifier ? `${client.dotcmsUrl}${src}` : src;
+
+    const poster = data?.thumbnail ? `${client.dotcmsUrl}${data?.thumbnail}` : 'poster-image.jpg';
+
+    return (
+        <video controls preload="metadata" poster={poster} width={width} height={height}>
+            <track default kind="captions" srcLang="en" />
+            <source src={srcUrl} type={mimeType} />
+            Your browser does not support the <code>video</code> element.
+        </video>
+    );
+};