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

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

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

@@ -1,52 +0,0 @@
-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/hooks/useDotcmsEditor.spec.ts

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

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

@@ -1,47 +0,0 @@
-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/mocks/mockPageContext.tsx

@@ -1,113 +0,0 @@
-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/utils/utils.ts

@@ -1,89 +0,0 @@
-import { ContainerData, DotCMSPageContext } from '../models';
-
-const endClassMap: Record<number, string> = {
-    1: 'col-end-1',
-    2: 'col-end-2',
-    3: 'col-end-3',
-    4: 'col-end-4',
-    5: 'col-end-5',
-    6: 'col-end-6',
-    7: 'col-end-7',
-    8: 'col-end-8',
-    9: 'col-end-9',
-    10: 'col-end-10',
-    11: 'col-end-11',
-    12: 'col-end-12',
-    13: 'col-end-13'
-};
-
-const startClassMap: Record<number, string> = {
-    1: 'col-start-1',
-    2: 'col-start-2',
-    3: 'col-start-3',
-    4: 'col-start-4',
-    5: 'col-start-5',
-    6: 'col-start-6',
-    7: 'col-start-7',
-    8: 'col-start-8',
-    9: 'col-start-9',
-    10: 'col-start-10',
-    11: 'col-start-11',
-    12: 'col-start-12'
-};
-
-/**
- * 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 const getContainersData = (
-    containers: ContainerData,
-    containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]
-) => {
-    const { identifier, uuid } = containerRef;
-
-    const { containerStructures, container } = containers[identifier];
-
-    // Get the variant id
-    const { variantId } = container?.parentPermissionable || {};
-
-    // Get accepts types of content types for this container
-    const acceptTypes = containerStructures.map((structure) => structure.contentTypeVar).join(',');
-
-    // Get the contentlets for "this" container
-    const contentlets = containers[identifier].contentlets[`uuid-${uuid}`];
-
-    return {
-        ...containers[identifier].container,
-        acceptTypes,
-        contentlets,
-        variantId
-    };
-};
-
-/**
- * Combine classes into a single string.
- *
- * @param {string[]} classes
- * @returns {string} Combined classes
- */
-export const combineClasses = (classes: string[]) => classes.filter(Boolean).join(' ');
-
-/**
- * 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 const getPositionStyleClasses = (start: number, end: number) => {
-    const startClass = startClassMap[start];
-    const endClass = endClassMap[end];
-
-    return {
-        startClass,
-        endClass
-    };
-};

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-    "compilerOptions": {
-        "jsx": "react-jsx",
-        "allowJs": false,
-        "esModuleInterop": false,
-        "allowSyntheticDefaultImports": true,
-        "strict": true
-    },
-    "files": [],
-    "include": [],
-    "references": [
-        {
-            "path": "./tsconfig.lib.json"
-        },
-        {
-            "path": "./tsconfig.spec.json"
-        }
-    ],
-    "extends": "../../../tsconfig.base.json"
-}