@dotcms/react 0.0.1-alpha.40 → 0.0.1-alpha.42

package/src/lib/models/{content-node.interface.ts → content-node.interface.d.ts}

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { BlockProps } from './blocks.interface';
-
 /**
  * Represents a Mark used by text content in the Block Editor
  *
@@ -10,7 +10,6 @@ export interface Mark {
     type: string;
     attrs: Record<string, string>;
 }
-
 /**
  * Represents a Content Node used by the Block Editor
  *
@@ -24,44 +23,39 @@ export interface ContentNode {
     marks?: Mark[];
     text?: string;
 }
-
 /**
  * Represents a Custom Renderer used by the Block Editor Component
  *
  * @export
  * @interface CustomRenderer
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type CustomRenderer<T = any> = Record<string, React.FC<T>>;
-
 /**
  * Represents a CodeBlock used by the Block Editor Component
  * @export
  * @interface CodeBlockProps
  */
 export type CodeBlockProps = BlockProps & ContentNode;
-
 /**
  * Represents a Heading used by the Block Editor Component
  * @export
  * @interface HeadingProps
  */
 export type HeadingProps = BlockProps & ContentNode;
-
 /**
  * Represents a Link used by the Block Editor Component
  * @export
  * @interface LinkProps
  */
-export type LinkProps = BlockProps & { attrs?: Mark['attrs'] };
-
+export type LinkProps = BlockProps & {
+    attrs?: Mark['attrs'];
+};
 /**
  * Represents a Paragraph used by the Block Editor Component
  * @export
  * @interface ParagraphProps
  */
 export type ParagraphProps = BlockProps & ContentNode;
-
 /**
  * Represents a DotCMSVideo used by the Block Editor Component
  * @export
@@ -70,7 +64,6 @@ export type ParagraphProps = BlockProps & ContentNode;
 export type DotCMSVideoProps = ContentNode['attrs'] & {
     data?: Record<string, string>;
 };
-
 /**
  * Represents a DotCMSImage used by the Block Editor Component
  * @export
@@ -79,7 +72,6 @@ export type DotCMSVideoProps = ContentNode['attrs'] & {
 export type DotCMSImageProps = ContentNode['attrs'] & {
     data?: Record<string, unknown>;
 };
-
 /**
  * Represents a DotContent used by the Block Editor Component
  * @export

package/src/lib/models/{index.ts → index.d.ts}

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface ContainerData {
     [key: string]: {
         container: {
@@ -22,7 +23,6 @@ export interface ContainerData {
         };
     };
 }
-
 export interface DotCMSPageContext {
     /**
      * `components` is a property of the `PageProviderProps` type.
@@ -68,7 +68,6 @@ export interface DotCMSPageContext {
             persona: {
                 keyTag: string;
             };
-            // variant requested
             variantId: string;
         };
         vanityUrl?: {
@@ -87,7 +86,6 @@ export interface DotCMSPageContext {
     };
     isInsideEditor: boolean;
 }
-
 export interface DotCMSContentlet {
     archived: boolean;
     binaryContentAsset?: string;
@@ -125,6 +123,5 @@ export interface DotCMSContentlet {
     body?: string;
     variant?: string;
     __icon__?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any; // This is a catch-all for any other custom properties that might be on the contentlet.
+    [key: string]: any;
 }

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

@@ -0,0 +1,43 @@
+import { ContainerData, DotCMSPageContext } from '../models';
+/**
+ * Get the container data from the containers object using the current container reference obtained from the layout.
+ *
+ * @param {ContainerData} containers
+ * @param {DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]} containerRef
+ * @returns {Object} Container with all the data it has.
+ */
+export declare const getContainersData: (containers: ContainerData, containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]) => {
+    acceptTypes: string;
+    contentlets: {
+        contentType: string;
+        identifier: string;
+        title: string;
+        inode: string;
+        onNumberOfPages: number;
+        widgetTitle?: string | undefined;
+        baseType: string;
+    }[];
+    variantId: string;
+    path: string;
+    identifier: string;
+    maxContentlets: number;
+    parentPermissionable: Record<string, string>;
+};
+/**
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
+export declare const combineClasses: (classes: string[]) => string;
+/**
+ * Get the start and end classes for the column based on the left offset and width.
+ *
+ * @param {number} start
+ * @param {number} end
+ * @returns {Object} Start and end classes
+ */
+export declare const getPositionStyleClasses: (start: number, end: number) => {
+    startClass: string;
+    endClass: string;
+};

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

package/project.json

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

@@ -1,51 +0,0 @@
-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/blocks/Image.tsx

@@ -1,18 +0,0 @@
-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/Table.tsx

@@ -1,60 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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>
-    );
-};