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

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

@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/react';
+
+import { Row } from './Row';
+
+import { MockContextRender } from '../../mocks/mockPageContext';
+import { ColumnProps } from '../Column/Column';
+import { DotCMSPageContext } from '../PageProvider/PageProvider';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../Column/Column', () => {
+    return {
+        Column: ({ column }: ColumnProps) => (
+            <div data-testid="mockColumn">{JSON.stringify(column)}</div>
+        )
+    };
+});
+
+describe('Row', () => {
+    const mockRowData: DotCMSPageContext['layout']['body']['rows'][0] = {
+        columns: [
+            {
+                width: 60,
+                leftOffset: 2,
+                containers: [
+                    {
+                        identifier: '123',
+                        uuid: '1'
+                    }
+                ],
+                styleClass: ''
+            },
+            {
+                width: 20,
+                leftOffset: 0,
+                containers: [
+                    {
+                        identifier: '456',
+                        uuid: '2'
+                    }
+                ],
+                styleClass: ''
+            }
+        ],
+        styleClass: ''
+    };
+
+    describe('row is inside editor', () => {
+        beforeEach(() => {
+            render(
+                <MockContextRender mockContext={{ isInsideEditor: true }}>
+                    <Row row={mockRowData} />
+                </MockContextRender>
+            );
+        });
+
+        it('should set the data-dot attribute', () => {
+            expect(screen.getByTestId('row')).toHaveAttribute('data-dot', 'row');
+        });
+
+        it('renders the correct number of mock columns', () => {
+            const mockColumns = screen.getAllByTestId('mockColumn');
+            expect(mockColumns.length).toBe(mockRowData.columns.length);
+        });
+
+        it('passes the correct props to each mock Column', () => {
+            mockRowData.columns.forEach((column, index) => {
+                expect(screen.getAllByTestId('mockColumn')[index].innerHTML).toBe(
+                    JSON.stringify(column)
+                );
+            });
+        });
+
+        it('renders the correct number of columns', () => {
+            const columns = screen.getAllByTestId('mockColumn');
+            expect(columns.length).toBe(mockRowData.columns.length);
+        });
+    });
+    describe('row is not inside editor', () => {
+        beforeEach(() => {
+            render(
+                <MockContextRender mockContext={{ isInsideEditor: false }}>
+                    <Row row={mockRowData} />
+                </MockContextRender>
+            );
+        });
+
+        it('should not have dot attr', () => {
+            expect(screen.queryByTestId('row')).toBeNull();
+        });
+    });
+});

package/src/lib/components/Row/Row.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, useContext } from 'react';
+
+import styles from './row.module.css';
+
+import { PageContext } from '../../contexts/PageContext';
+import { DotCMSPageContext } from '../../models';
+import { combineClasses } from '../../utils/utils';
+import { Column } from '../Column/Column';
+
+/**
+ * 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 const Row = forwardRef<HTMLDivElement, RowProps>((props: RowProps, ref) => {
+    const { isInsideEditor } = useContext<DotCMSPageContext | null>(
+        PageContext
+    ) as DotCMSPageContext;
+
+    const { row } = props;
+
+    const combinedClasses = combineClasses([styles.row, row.styleClass]);
+
+    const rowProps = isInsideEditor ? { 'data-dot': 'row', 'data-testid': 'row', ref } : {};
+
+    return (
+        <div {...rowProps} className={combinedClasses}>
+            {row.columns.map((column, index) => (
+                <Column key={index} column={column} />
+            ))}
+        </div>
+    );
+});

package/src/lib/contexts/PageContext.tsx

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

package/src/lib/hooks/useDotcmsEditor.spec.ts

@@ -0,0 +1,176 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import * as sdkClient from '@dotcms/client';
+
+import { useDotcmsEditor } from './useDotcmsEditor';
+
+import { DotcmsPageProps } from '../components/DotcmsLayout/DotcmsLayout';
+import { mockPageContext } from '../mocks/mockPageContext';
+
+jest.mock('@dotcms/client', () => ({
+    ...jest.requireActual('@dotcms/client'),
+    isInsideEditor: () => true,
+    postMessageToEditor: jest.fn(),
+    DotCmsClient: {
+        instance: {
+            editor: {
+                on: jest.fn(),
+                off: jest.fn(),
+                callbacks: {}
+            }
+        }
+    }
+}));
+
+const { DotCmsClient } = sdkClient as jest.Mocked<typeof sdkClient>;
+
+describe('useDotcmsEditor', () => {
+    let isInsideEditorSpy: jest.SpyInstance<boolean>;
+    let initEditorSpy: jest.SpyInstance<void>;
+    let destroyEditorSpy: jest.SpyInstance<void>;
+
+    beforeEach(() => {
+        isInsideEditorSpy = jest.spyOn(sdkClient, 'isInsideEditor');
+        initEditorSpy = jest.spyOn(sdkClient, 'initEditor');
+        destroyEditorSpy = jest.spyOn(sdkClient, 'destroyEditor');
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('when outside editor', () => {
+        it('should not call initEditor or destroyEditor when outside editor', () => {
+            isInsideEditorSpy.mockReturnValueOnce(false);
+
+            renderHook(() =>
+                useDotcmsEditor({
+                    pageContext: mockPageContext,
+                    config: { pathname: '' }
+                })
+            );
+
+            expect(initEditorSpy).not.toHaveBeenCalled();
+            expect(destroyEditorSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('when inside editor', () => {
+        it('should call initEditor when inside editor', () => {
+            isInsideEditorSpy.mockReturnValueOnce(true);
+
+            renderHook(() =>
+                useDotcmsEditor({
+                    pageContext: mockPageContext,
+                    config: { pathname: '' }
+                })
+            );
+
+            expect(initEditorSpy).toHaveBeenCalled();
+        });
+
+        it('should call destroyEditor on unmount when inside editor', () => {
+            isInsideEditorSpy.mockReturnValueOnce(true);
+
+            const { unmount } = renderHook(() =>
+                useDotcmsEditor({
+                    pageContext: mockPageContext,
+                    config: { pathname: '' }
+                })
+            );
+
+            unmount();
+
+            expect(destroyEditorSpy).toHaveBeenCalled();
+        });
+
+        describe('onReload', () => {
+            const dotCMSPagePropsMock = {
+                pageContext: mockPageContext,
+                config: {
+                    pathname: '',
+                    onReload: () => {
+                        /* do nothing */
+                    }
+                }
+            };
+
+            beforeEach(() => {
+                isInsideEditorSpy.mockReturnValueOnce(true);
+            });
+
+            it('should subscribe to the `CHANGE` event', () => {
+                const client = DotCmsClient.instance;
+
+                renderHook(() => useDotcmsEditor(dotCMSPagePropsMock));
+
+                expect(client.editor.on).toHaveBeenCalledWith('changes', expect.any(Function));
+            });
+
+            it('should remove listener on unmount', () => {
+                const client = DotCmsClient.instance;
+
+                const { unmount } = renderHook(() => useDotcmsEditor(dotCMSPagePropsMock));
+
+                unmount();
+
+                expect(client.editor.off).toHaveBeenCalledWith('changes');
+            });
+        });
+
+        describe('Client is ready', () => {
+            const dotCMSPagePropsMock = {
+                pageContext: mockPageContext,
+                config: {
+                    pathname: '',
+                    onReload: () => {
+                        /* do nothing */
+                    }
+                }
+            };
+
+            it('should send a message to the editor when the client is ready', () => {
+                const editor: sdkClient.EditorConfig = {
+                    params: {
+                        depth: '0'
+                    }
+                };
+
+                renderHook(() =>
+                    useDotcmsEditor({
+                        ...dotCMSPagePropsMock,
+                        config: {
+                            pathname: '',
+                            editor
+                        }
+                    })
+                );
+
+                expect(sdkClient.postMessageToEditor).toHaveBeenCalledWith({
+                    action: sdkClient.CUSTOMER_ACTIONS.CLIENT_READY,
+                    payload: editor
+                });
+            });
+        });
+
+        describe('onChange', () => {
+            const dotCMSPagePropsMock = {
+                pageContext: mockPageContext,
+                config: {
+                    pathname: '',
+                    editor: {
+                        query: '{query { asset { identifier } }}'
+                    }
+                }
+            };
+
+            it('should update the page asset when changes are made in the editor', () => {
+                const client = DotCmsClient.instance;
+
+                renderHook(() => useDotcmsEditor(dotCMSPagePropsMock as DotcmsPageProps));
+
+                expect(client.editor.on).toHaveBeenCalledWith('changes', expect.any(Function));
+            });
+        });
+    });
+});

package/src/lib/hooks/useDotcmsEditor.ts

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+
+import {
+    CUSTOMER_ACTIONS,
+    DotCmsClient,
+    destroyEditor,
+    initEditor,
+    isInsideEditor as isInsideEditorFn,
+    postMessageToEditor,
+    updateNavigation
+} from '@dotcms/client';
+
+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 const useDotcmsEditor = ({ pageContext, config }: DotcmsPageProps) => {
+    const { pathname, onReload, editor } = config;
+    const [state, setState] = useState<DotCMSPageContext>({
+        ...pageContext,
+        isInsideEditor: false
+    });
+
+    /**
+     * Initializes the DotCMS editor.
+     */
+    useEffect(() => {
+        if (!isInsideEditorFn()) {
+            return;
+        }
+
+        initEditor({ pathname });
+        updateNavigation(pathname || '/');
+        setState((prevState) => ({ ...prevState, isInsideEditor: true }));
+
+        return () => destroyEditor();
+    }, [pathname]);
+
+    /**
+     * Reloads the page when changes are made in the editor.
+     */
+    useEffect(() => {
+        const insideEditor = isInsideEditorFn();
+        const client = DotCmsClient.instance;
+
+        if (!insideEditor || !onReload) {
+            return;
+        }
+
+        client.editor.on('changes', () => onReload?.());
+
+        return () => client.editor.off('changes');
+    }, [onReload]);
+
+    /**
+     * Sends a message to the editor when the client is ready.
+     */
+    useEffect(() => {
+        if (!isInsideEditorFn()) {
+            return;
+        }
+
+        postMessageToEditor({ action: CUSTOMER_ACTIONS.CLIENT_READY, payload: editor });
+    }, [pathname, editor]);
+
+    /**
+     * Updates the page asset when changes are made in the editor.
+     */
+    useEffect(() => {
+        if (!isInsideEditorFn()) {
+            return;
+        }
+
+        const client = DotCmsClient.instance;
+
+        client.editor.on('changes', (data) => {
+            const pageAsset = data as DotCMSPageContext['pageAsset'];
+            setState((state) => ({ ...state, pageAsset }));
+        });
+
+        return () => client.editor.off('changes');
+    }, []);
+
+    return state;
+};

package/src/lib/hooks/useDotcmsPageContext.spec.tsx

@@ -0,0 +1,47 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { ReactNode } from 'react';
+
+import { useDotcmsPageContext } from './useDotcmsPageContext'; // Adjust the import path based on your file structure.
+
+import { PageContext } from '../contexts/PageContext';
+import { DotCMSPageContext } from '../models';
+
+const mockContextValue: DotCMSPageContext = {
+    components: {},
+    isInsideEditor: false,
+    pageAsset: {
+        containers: {},
+        layout: {
+            header: false,
+            footer: false,
+            body: {
+                rows: []
+            }
+        },
+        page: {
+            title: 'Test Page',
+            identifier: 'test-page'
+        },
+        viewAs: {
+            language: {
+                id: 'en'
+            },
+            persona: {
+                keyTag: 'persona'
+            },
+            variantId: 'variant'
+        }
+    }
+};
+
+describe('useDotcmsPageContext', () => {
+    it('returns the context value', () => {
+        const { result } = renderHook(() => useDotcmsPageContext(), {
+            wrapper: ({ children }: { children: ReactNode }) => (
+                <PageContext.Provider value={mockContextValue}>{children}</PageContext.Provider>
+            )
+        });
+
+        expect(result.current).toEqual(mockContextValue);
+    });
+});

package/src/lib/hooks/{useDotcmsPageContext.d.ts → useDotcmsPageContext.tsx}

@@ -1,4 +1,8 @@
+import { useContext } from 'react';
+
+import { PageContext } from '../contexts/PageContext';
 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.
@@ -6,4 +10,6 @@ import { DotCMSPageContext } from '../models';
  * @category Hooks
  * @returns {DotCMSPageContext | null} - The context value or `null` if it's not available.
  */
-export declare function useDotcmsPageContext(): DotCMSPageContext | null;
+export function useDotcmsPageContext() {
+    return useContext<DotCMSPageContext | null>(PageContext);
+}

package/src/lib/mocks/mockPageContext.tsx

@@ -0,0 +1,113 @@
+import { PageProvider } from '../components/PageProvider/PageProvider';
+import { DotCMSPageContext, DotCMSContentlet } from '../models';
+
+export const dotcmsContentletMock: DotCMSContentlet = {
+    archived: false,
+    baseType: '',
+    contentType: '',
+    folder: '',
+    hasTitleImage: false,
+    host: '',
+    hostName: '',
+    identifier: '',
+    inode: '',
+    languageId: 1,
+    live: false,
+    locked: false,
+    modDate: '',
+    modUser: '',
+    modUserName: '',
+    owner: '',
+    sortOrder: 1,
+    stInode: '',
+    title: 'This is my editable title',
+    titleImage: '',
+    url: '',
+    working: false
+};
+
+export const mockPageContext: DotCMSPageContext = {
+    pageAsset: {
+        layout: {
+            header: true,
+            footer: true,
+            body: {
+                rows: [
+                    {
+                        styleClass: 'row',
+                        columns: [
+                            {
+                                styleClass: 'col-md-12',
+                                width: 6,
+                                leftOffset: 3,
+                                containers: [
+                                    {
+                                        identifier: 'container-1',
+                                        uuid: 'uuid-1'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        containers: {
+            'container-1': {
+                container: {
+                    path: 'path/to/container',
+                    identifier: 'container-1',
+                    maxContentlets: 100,
+                    parentPermissionable: {}
+                },
+                containerStructures: [
+                    {
+                        contentTypeVar: 'content-type-1'
+                    }
+                ],
+                contentlets: {
+                    'uuid-1': [
+                        {
+                            contentType: 'content-type-1',
+                            identifier: 'contentlet-1',
+                            title: 'Contentlet 1',
+                            inode: 'inode-1',
+                            onNumberOfPages: 1,
+                            baseType: 'base-type-1'
+                        }
+                    ]
+                }
+            },
+            'container-2': {
+                container: {
+                    path: 'path/to/container',
+                    identifier: 'container-2',
+                    maxContentlets: 100,
+                    parentPermissionable: {}
+                },
+                containerStructures: [
+                    {
+                        contentTypeVar: 'content-type-2'
+                    }
+                ],
+                contentlets: {
+                    'uuid-2': []
+                }
+            }
+        },
+        page: { identifier: 'page-1', title: 'Hello Page' },
+        viewAs: { language: { id: 'en' }, persona: { keyTag: 'persona-1' }, variantId: 'variant-1' }
+    },
+    components: {},
+    isInsideEditor: false
+};
+
+export const MockContextRender = ({
+    children,
+    mockContext
+}: {
+    children: JSX.Element;
+    mockContext: Partial<DotCMSPageContext>;
+}) => {
+    return <PageProvider pageContext={mockContext}>{children}</PageProvider>;
+};

package/src/lib/models/{blocks.interface.d.ts → blocks.interface.ts}

@@ -1,8 +1,21 @@
-/// <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[];
 }
+
+/**
+ * Props for a contentlet inside the Block Editor
+ *
+ * @export
+ * @interface DotContentletProps
+ */
 export interface DotContentletProps {
     title: string;
     baseType: string;
@@ -33,22 +46,36 @@ export interface DotContentletProps {
     mimeType: string;
     thumbnail?: string;
 }
+
+/**
+ * Props for a block inside the Block Editor Component
+ *
+ * @export
+ * @interface BlockProps
+ */
 export interface BlockProps {
     children: React.ReactNode;
 }
-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 different types of Blocks that can be used in the Block Editor
+ *
+ * @export
+ * @enum {number}
+ */
+export 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'
 }