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

package/src/lib/models/blocks.interface.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+import { ContentNode } from './content-node.interface';
+/**
+ * Represents a Block of content provided by the Block Editor
+ *
+ * @export
+ * @interface Block
+ */
+export interface Block {
+    content: ContentNode[];
+    type: string;
+}
+/**
+ * Props for a contentlet inside the Block Editor
+ *
+ * @export
+ * @interface DotContentletProps
+ */
+export interface DotContentletProps {
+    title: string;
+    baseType: string;
+    inode: string;
+    archived: boolean;
+    working: boolean;
+    locked: boolean;
+    contentType: string;
+    live: boolean;
+    identifier: string;
+    image: string;
+    imageContentAsset: string;
+    urlTitle: string;
+    url: string;
+    titleImage: string;
+    urlMap: string;
+    hasLiveVersion: boolean;
+    hasTitleImage: boolean;
+    sortOrder: number;
+    modUser: string;
+    __icon__: string;
+    contentTypeIcon: string;
+    language: string;
+    description: string;
+    shortDescription: string;
+    salePrice: string;
+    retailPrice: string;
+    mimeType: string;
+    thumbnail?: string;
+}
+/**
+ * Props for a block inside the Block Editor Component
+ *
+ * @export
+ * @interface BlockProps
+ */
+export interface BlockProps {
+    children: React.ReactNode;
+}
+/**
+ * Represents the different types of Blocks that can be used in the Block Editor
+ *
+ * @export
+ * @enum {number}
+ */
+export declare enum Blocks {
+    PARAGRAPH = "paragraph",
+    HEADING = "heading",
+    TEXT = "text",
+    BULLET_LIST = "bulletList",
+    ORDERED_LIST = "orderedList",
+    LIST_ITEM = "listItem",
+    BLOCK_QUOTE = "blockquote",
+    CODE_BLOCK = "codeBlock",
+    HARDBREAK = "hardBreak",
+    HORIZONTAL_RULE = "horizontalRule",
+    DOT_IMAGE = "dotImage",
+    DOT_VIDEO = "dotVideo",
+    TABLE = "table",
+    DOT_CONTENT = "dotContent"
+}
+/**
+ * Represents the validation state of a Block Editor instance
+ *
+ * @interface BlockEditorState
+ * @property {boolean} isValid - Whether the blocks structure is valid
+ * @property {string | null} error - Error message if blocks are invalid, null otherwise
+ */
+export interface BlockEditorState {
+    error: string | null;
+}

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

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+import { BlockProps } from './blocks.interface';
+/**
+ * Represents a Mark used by text content in the Block Editor
+ *
+ * @export
+ * @interface Mark
+ */
+export interface Mark {
+    type: string;
+    attrs: Record<string, string>;
+}
+/**
+ * Represents a Content Node used by the Block Editor
+ *
+ * @export
+ * @interface ContentNode
+ */
+export interface ContentNode {
+    type: string;
+    content: ContentNode[];
+    attrs?: Record<string, string>;
+    marks?: Mark[];
+    text?: string;
+}
+/**
+ * Represents a Custom Renderer used by the Block Editor Component
+ *
+ * @export
+ * @interface CustomRenderer
+ */
+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'];
+};
+/**
+ * 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
+ * @interface DotCMSVideoProps
+ */
+export type DotCMSVideoProps = ContentNode['attrs'] & {
+    data?: Record<string, string>;
+};
+/**
+ * Represents a DotCMSImage used by the Block Editor Component
+ * @export
+ * @interface DotCMSImageProps
+ */
+export type DotCMSImageProps = ContentNode['attrs'] & {
+    data?: Record<string, unknown>;
+};
+/**
+ * Represents a DotContent used by the Block Editor Component
+ * @export
+ * @interface DotContentProps
+ */
+export type DotContentProps = ContentNode & {
+    customRenderers?: CustomRenderer;
+};

package/src/lib/models/index.d.ts

@@ -0,0 +1,127 @@
+/// <reference types="react" />
+export interface ContainerData {
+    [key: string]: {
+        container: {
+            path: string;
+            identifier: string;
+            maxContentlets: number;
+            parentPermissionable: Record<string, string>;
+        };
+        containerStructures: {
+            contentTypeVar: string;
+        }[];
+        contentlets: {
+            [key: string]: {
+                contentType: string;
+                identifier: string;
+                title: string;
+                inode: string;
+                onNumberOfPages: number;
+                widgetTitle?: string;
+                baseType: string;
+            }[];
+        };
+    };
+}
+export interface DotCMSPageContext {
+    /**
+     * `components` is a property of the `PageProviderProps` type.
+     * It is an object that maps content type variables to their corresponding React components.
+     *
+     * It will be use to render the contentlets in the page.
+     *
+     * @property {Object} components
+     * @memberof PageProviderProps
+     * @type {Object.<string, React.ElementType>}
+     */
+    components: {
+        [contentTypeVariable: string]: React.ElementType;
+    };
+    pageAsset: {
+        containers: ContainerData;
+        layout: {
+            header: boolean;
+            footer: boolean;
+            body: {
+                rows: {
+                    styleClass: string;
+                    columns: {
+                        styleClass: string;
+                        width: number;
+                        leftOffset: number;
+                        containers: {
+                            identifier: string;
+                            uuid: string;
+                        }[];
+                    }[];
+                }[];
+            };
+        };
+        page: {
+            title: string;
+            identifier: string;
+        };
+        viewAs: {
+            language: {
+                id: string;
+            };
+            persona: {
+                keyTag: string;
+            };
+            variantId: string;
+        };
+        vanityUrl?: {
+            pattern: string;
+            vanityUrlId: string;
+            url: string;
+            siteId: string;
+            languageId: number;
+            forwardTo: string;
+            response: number;
+            order: number;
+            temporaryRedirect: boolean;
+            permanentRedirect: boolean;
+            forward: boolean;
+        };
+    };
+    isInsideEditor: boolean;
+}
+export interface DotCMSContentlet {
+    archived: boolean;
+    binaryContentAsset?: string;
+    deleted?: boolean;
+    baseType: string;
+    binary?: string;
+    binaryVersion?: string;
+    file?: string;
+    contentType: string;
+    hasLiveVersion?: boolean;
+    folder: string;
+    hasTitleImage: boolean;
+    hostName: string;
+    host: string;
+    inode: string;
+    identifier: string;
+    languageId: number;
+    image?: string;
+    locked: boolean;
+    language?: string;
+    mimeType?: string;
+    modUser: string;
+    modDate: string;
+    live: boolean;
+    sortOrder: number;
+    owner: string;
+    title: string;
+    stInode: string;
+    titleImage: string;
+    modUserName: string;
+    text?: string;
+    working: boolean;
+    url: string;
+    contentTypeIcon?: string;
+    body?: string;
+    variant?: string;
+    __icon__?: string;
+    [key: string]: any;
+}

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

@@ -0,0 +1,58 @@
+import { ContainerData, DotCMSPageContext } from '../models';
+import { Block, BlockEditorState } from '../models/blocks.interface';
+/**
+ * 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;
+};
+/**
+ * Validates the structure of a Block Editor block.
+ *
+ * This function checks that:
+ * 1. The blocks parameter is a valid object
+ * 2. The block has a 'doc' type
+ * 3. The block has a valid content array that is not empty
+ *
+ * @param {Block} blocks - The blocks structure to validate
+ * @returns {BlockEditorState} Object containing validation state and any error message
+ * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
+ * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
+ */
+export declare const isValidBlocks: (blocks: Block) => BlockEditorState;

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,51 +0,0 @@
-{
-    "name": "sdk-react",
-    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-    "sourceRoot": "libs/sdk/react/src",
-    "projectType": "library",
-    "tags": [],
-    "targets": {
-        "lint": {
-            "executor": "@nrwl/linter:eslint",
-            "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
-                }
-            }
-        }
-    }
-}

package/src/lib/components/Column/Column.module.css

@@ -1,99 +0,0 @@
-.col-start-1 {
-    grid-column-start: 1;
-}
-
-.col-start-2 {
-    grid-column-start: 2;
-}
-
-.col-start-3 {
-    grid-column-start: 3;
-}
-
-.col-start-4 {
-    grid-column-start: 4;
-}
-
-.col-start-5 {
-    grid-column-start: 5;
-}
-
-.col-start-6 {
-    grid-column-start: 6;
-}
-
-.col-start-7 {
-    grid-column-start: 7;
-}
-
-.col-start-8 {
-    grid-column-start: 8;
-}
-
-.col-start-9 {
-    grid-column-start: 9;
-}
-
-.col-start-10 {
-    grid-column-start: 10;
-}
-
-.col-start-11 {
-    grid-column-start: 11;
-}
-
-.col-start-12 {
-    grid-column-start: 12;
-}
-
-.col-end-1 {
-    grid-column-end: 1;
-}
-
-.col-end-2 {
-    grid-column-end: 2;
-}
-
-.col-end-3 {
-    grid-column-end: 3;
-}
-
-.col-end-4 {
-    grid-column-end: 4;
-}
-
-.col-end-5 {
-    grid-column-end: 5;
-}
-
-.col-end-6 {
-    grid-column-end: 6;
-}
-
-.col-end-7 {
-    grid-column-end: 7;
-}
-
-.col-end-8 {
-    grid-column-end: 8;
-}
-
-.col-end-9 {
-    grid-column-end: 9;
-}
-
-.col-end-10 {
-    grid-column-end: 10;
-}
-
-.col-end-11 {
-    grid-column-end: 11;
-}
-
-.col-end-12 {
-    grid-column-end: 12;
-}
-
-.col-end-13 {
-    grid-column-end: 13;
-}

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

@@ -1,78 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-import * as dotcmsClient from '@dotcms/client';
-
-import { Column } from './Column';
-
-import { MockContextRender } from '../../mocks/mockPageContext';
-import { ContainerProps } from '../Container/Container';
-
-jest.mock('../Container/Container', () => {
-    return {
-        Container: ({ containerRef }: Partial<ContainerProps>) => (
-            <div data-testid="mockContainer">{containerRef?.identifier}</div>
-        )
-    };
-});
-
-describe('Column', () => {
-    const mockColumnData = {
-        width: 6, // Adjust as needed
-        leftOffset: 3, // Adjust as needed
-        containers: [
-            { identifier: 'Container1', uuid: 'unique-id-1' },
-            { identifier: 'Container2', uuid: 'unique-id-2' }
-            // Add more containers as needed for your test
-        ],
-        styleClass: ''
-    };
-
-    describe('Column is inside editor', () => {
-        beforeEach(() => {
-            jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(true);
-            render(
-                <MockContextRender mockContext={{ isInsideEditor: true }}>
-                    <Column column={mockColumnData} />
-                </MockContextRender>
-            );
-        });
-
-        it('applies the correct width and start classes based on props', () => {
-            const columnElement = screen.getByTestId('column');
-            expect(columnElement).toHaveClass('col-end-9');
-            expect(columnElement).toHaveClass('col-start-3');
-        });
-
-        it('applies the correct data attr', () => {
-            expect(screen.getByTestId('column')).toHaveAttribute('data-dot', 'column');
-        });
-
-        it('renders the correct number of containers', () => {
-            const containers = screen.getAllByTestId('mockContainer');
-            expect(containers.length).toBe(mockColumnData.containers.length);
-        });
-
-        it('passes the correct props to each Container', () => {
-            mockColumnData.containers.forEach((container) => {
-                expect(screen.getByText(container.identifier)).toBeInTheDocument();
-            });
-        });
-    });
-
-    describe('Column is not inside editor', () => {
-        beforeEach(() => {
-            jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(false);
-            render(
-                <MockContextRender mockContext={{ isInsideEditor: false }}>
-                    <Column column={mockColumnData} />
-                </MockContextRender>
-            );
-        });
-
-        it('should not have dot attrs', () => {
-            const columnElement = screen.queryByTestId('column');
-            expect(columnElement).toBeNull();
-        });
-    });
-});

package/src/lib/components/Column/Column.tsx

@@ -1,45 +0,0 @@
-import { useContext } from 'react';
-
-import styles from './column.module.css';
-
-import { PageContext } from '../../contexts/PageContext';
-import { combineClasses, getPositionStyleClasses } from '../../utils/utils';
-import { Container } from '../Container/Container';
-import { PageProviderContext } from '../PageProvider/PageProvider';
-
-export interface ColumnProps {
-    readonly column: PageProviderContext['layout']['body']['rows'][0]['columns'][0];
-}
-
-export function Column({ column }: ColumnProps) {
-    const { isInsideEditor } = useContext(PageContext) as PageProviderContext;
-
-    const { startClass, endClass } = getPositionStyleClasses(
-        column.leftOffset,
-        column.width + column.leftOffset
-    );
-
-    const combinedClasses = combineClasses([
-        styles[endClass],
-        styles[startClass],
-        column.styleClass
-    ]);
-
-    const columnProps = isInsideEditor
-        ? {
-              'data-dot': 'column',
-              'data-testid': 'column'
-          }
-        : {};
-
-    return (
-        <div {...columnProps} className={combinedClasses}>
-            {column.containers.map((container) => (
-                <Container
-                    key={`${container.identifier}-${container.uuid}`}
-                    containerRef={container}
-                />
-            ))}
-        </div>
-    );
-}

package/src/lib/components/Container/Container.module.css

@@ -1,7 +0,0 @@
-/*
- * Replace this with your own classes
- *
- * e.g.
- * .container {
- * }
-*/