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

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

@@ -1,82 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { render, screen } from '@testing-library/react';
-
-import * as dotcmsClient from '@dotcms/client';
-
-import { Container } from './Container';
-
-import { MockContextRender, mockPageContext } from '../../mocks/mockPageContext';
-
-describe('Container', () => {
-    // Mock data for your context and container
-    jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(true);
-
-    describe('with contentlets', () => {
-        const mockContainerRef = {
-            identifier: 'container-1',
-            uuid: '1',
-            containers: []
-        };
-
-        it('renders NoContent component for unsupported content types', () => {
-            const updatedContext = {
-                ...mockPageContext,
-                components: {}
-            };
-
-            render(
-                <MockContextRender mockContext={updatedContext}>
-                    <Container containerRef={mockContainerRef} />
-                </MockContextRender>
-            );
-
-            expect(screen.getByTestId('no-component')).toHaveTextContent(
-                'No Component for content-type-1'
-            );
-        });
-
-        describe('without contentlets', () => {
-            const mockContainerRef = {
-                identifier: 'container-2',
-                uuid: '2',
-                containers: []
-            };
-            it('renders EmptyContainer component in editor mode', () => {
-                const updatedContext = {
-                    ...mockPageContext,
-                    components: {},
-                    isInsideEditor: true
-                };
-                render(
-                    <MockContextRender mockContext={updatedContext}>
-                        <Container containerRef={mockContainerRef} />
-                    </MockContextRender>
-                );
-
-                expect(screen.getByTestId('empty-container')).toHaveTextContent(
-                    'This container is empty.'
-                );
-            });
-
-            it('dont render EmptyContainer component outside editor mode', () => {
-                jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(false);
-
-                const updatedContext = {
-                    ...mockPageContext,
-                    components: {},
-                    isInsideEditor: false
-                };
-                render(
-                    <MockContextRender mockContext={updatedContext}>
-                        <Container containerRef={mockContainerRef} />
-                    </MockContextRender>
-                );
-
-                expect(screen.queryByTestId('empty-container')).toBeNull();
-            });
-        });
-    });
-
-    // Add tests for pointer events, dynamic component rendering, and other scenarios...
-});

package/src/lib/components/Container/Container.tsx

@@ -1,105 +0,0 @@
-import { useContext } from 'react';
-
-import { PageContext } from '../../contexts/PageContext';
-import { getContainersData } from '../../utils/utils';
-import { PageProviderContext } from '../PageProvider/PageProvider';
-
-const FAKE_CONTENLET = {
-    identifier: 'TEMP_EMPTY_CONTENTLET',
-    title: 'TEMP_EMPTY_CONTENTLET',
-    contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
-    inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
-    widgetTitle: 'TEMP_EMPTY_CONTENTLET',
-    onNumberOfPages: 1
-};
-
-function EmptyContainer() {
-    return (
-        <div
-            data-testid="empty-container"
-            style={{
-                width: '100%',
-                backgroundColor: '#ECF0FD',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                color: '#030E32',
-                height: '10rem'
-            }}>
-            This container is empty.
-        </div>
-    );
-}
-
-function NoContent({ contentType }: { readonly contentType: string }) {
-    return <div data-testid="no-component">No Component for {contentType}</div>;
-}
-
-export interface ContainerProps {
-    readonly containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0];
-}
-
-export function Container({ containerRef }: ContainerProps) {
-    const { isInsideEditor } = useContext(PageContext) as PageProviderContext;
-
-    const { identifier, uuid } = containerRef;
-
-    // Get the containers from the global context
-    const { containers, components } = useContext<PageProviderContext | null>(
-        PageContext
-    ) as PageProviderContext;
-
-    const { acceptTypes, contentlets, maxContentlets, variantId, path } = getContainersData(
-        containers,
-        containerRef
-    );
-
-    const updatedContentlets =
-        contentlets.length === 0 && isInsideEditor ? [FAKE_CONTENLET] : contentlets;
-
-    const container = {
-        acceptTypes,
-        identifier: path ?? identifier,
-        maxContentlets,
-        variantId,
-        uuid
-    };
-
-    const renderContentlets = updatedContentlets.map((contentlet) => {
-        const ContentTypeComponent = components[contentlet.contentType] || NoContent;
-
-        const Component =
-            contentlet.identifier === 'TEMP_EMPTY_CONTENTLET'
-                ? EmptyContainer
-                : ContentTypeComponent;
-
-        return isInsideEditor ? (
-            <div
-                data-dot-object="contentlet"
-                data-dot-identifier={contentlet.identifier}
-                data-dot-title={contentlet.widgetTitle || contentlet.title}
-                data-dot-inode={contentlet.inode}
-                data-dot-type={contentlet.contentType}
-                data-dot-container={JSON.stringify(container)}
-                key={contentlet.identifier}>
-                <Component {...contentlet} />
-            </div>
-        ) : (
-            <Component {...contentlet} key={contentlet.identifier} />
-        );
-    });
-
-    return isInsideEditor ? (
-        <div
-            data-dot-object="container"
-            data-dot-accept-types={acceptTypes}
-            data-dot-identifier={path ?? identifier}
-            data-max-contentlets={maxContentlets}
-            data-uuid={uuid}>
-            {renderContentlets}
-        </div>
-    ) : (
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        <>{renderContentlets}</>
-    );
-}

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

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

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

@@ -1,41 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import { ElementRef, ForwardRefExoticComponent } from 'react';
-
-import { DotcmsLayout } from './DotcmsLayout';
-
-import { mockPageContext } from '../../mocks/mockPageContext';
-
-jest.mock('../Row/Row', () => {
-    const { forwardRef } = jest.requireActual('react');
-
-    return {
-        Row: forwardRef(
-            (
-                { children }: { children: JSX.Element },
-                ref: ElementRef<ForwardRefExoticComponent<unknown>>
-            ) => (
-                <div data-testid="mockRow" ref={ref}>
-                    {children}
-                </div>
-            )
-        )
-    };
-});
-
-jest.mock('../PageProvider/PageProvider', () => {
-    return {
-        PageProvider: ({ children }: { children: JSX.Element }) => (
-            <div data-testid="mockPageProvider">{children}</div>
-        )
-    };
-});
-
-describe('DotcmsLayout', () => {
-    it('renders correctly with PageProvider and rows', () => {
-        render(<DotcmsLayout entity={{ ...mockPageContext, isInsideEditor: true }} />);
-        expect(screen.getAllByTestId('mockRow').length).toBe(
-            mockPageContext.layout.body.rows.length
-        );
-    });
-});

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

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

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

@@ -1,54 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import '@testing-library/jest-dom';
-import { PageProvider } from './PageProvider';
-
-import { PageContext } from '../../contexts/PageContext';
-
-const MockChildComponent = () => {
-    const context = React.useContext(PageContext);
-
-    return <div data-testid="mockChild">{JSON.stringify(context?.page.title)}</div>;
-};
-
-describe('PageProvider', () => {
-    const mockEntity = {
-        page: {
-            title: 'Test Page',
-            identifier: 'test-page-1'
-        }
-        // ... add other context properties as needed
-    };
-
-    it('provides the context to its children', () => {
-        render(
-            <PageProvider entity={mockEntity}>
-                <MockChildComponent />
-            </PageProvider>
-        );
-        expect(screen.getByTestId('mockChild')).toHaveTextContent(mockEntity.page.title);
-    });
-
-    it('updates context when entity changes', () => {
-        const { rerender } = render(
-            <PageProvider entity={mockEntity}>
-                <MockChildComponent />
-            </PageProvider>
-        );
-        // Change the context
-        const newEntity = {
-            ...mockEntity,
-            page: {
-                ...mockEntity.page,
-                title: 'Updated Test Page'
-            }
-        };
-        rerender(
-            <PageProvider entity={newEntity}>
-                <MockChildComponent />
-            </PageProvider>
-        );
-        expect(screen.getByTestId('mockChild')).toHaveTextContent(newEntity.page.title);
-    });
-});

package/src/lib/components/PageProvider/PageProvider.tsx

@@ -1,95 +0,0 @@
-import { ReactNode } from 'react';
-
-import { PageContext } from '../../contexts/PageContext';
-
-export interface PageProviderProps {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    readonly entity: any;
-    readonly children: ReactNode;
-}
-
-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;
-            }[];
-        };
-    };
-}
-
-export interface PageProviderContext {
-    /**
-     * `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;
-    };
-    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;
-        };
-    };
-    isInsideEditor: boolean;
-}
-
-/**
- * `PageProvider` is a functional component that provides a context for a DotCMS page.
- * It takes a `PageProviderProps` object as a parameter and returns a JSX element.
- *
- * @category Components
- * @param {PageProviderProps} props - The properties for the PageProvider. Includes an `entity` and `children`.
- * @returns {JSX.Element} - A JSX element that provides a context for a DotCMS page.
- */
-export function PageProvider(props: PageProviderProps): JSX.Element {
-    const { entity, children } = props;
-
-    return <PageContext.Provider value={entity}>{children}</PageContext.Provider>;
-}

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

@@ -1,5 +0,0 @@
-.row {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: 1rem;
-}

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 { PageProviderContext } 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: PageProviderContext['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,51 +0,0 @@
-import { forwardRef, useContext } from 'react';
-
-import styles from './row.module.css';
-
-import { PageContext } from '../../contexts/PageContext';
-import { combineClasses } from '../../utils/utils';
-import { Column } from '../Column/Column';
-import { PageProviderContext } from '../PageProvider/PageProvider';
-
-/**
- * Props for the row component
- *
- * @interface RowProps
- *
- */
-export interface RowProps {
-    /**
-     * Row data
-     *
-     * @type {PageProviderContext['layout']['body']['rows'][0]}
-     * @memberof RowProps
-     */
-    row: PageProviderContext['layout']['body']['rows'][0];
-}
-
-/**
- * Renders a row
- *
- * @category Components
- * @param {React.ForwardedRef<HTMLDivElement, RowProps>} ref
- * @return {*}
- */
-export const Row = forwardRef<HTMLDivElement, RowProps>((props: RowProps, ref) => {
-    const { isInsideEditor } = useContext<PageProviderContext | null>(
-        PageContext
-    ) as PageProviderContext;
-
-    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

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-import { PageProviderContext } from '../components/PageProvider/PageProvider';
-
-export const PageContext = createContext<PageProviderContext | null>(null);

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

@@ -1,56 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-
-import * as dotcmsClient from '@dotcms/client';
-
-import { useDotcmsEditor } from './useDotcmsEditor';
-
-describe('useDotcmsEditor', () => {
-    let isInsideEditorSpy: jest.SpyInstance<boolean>;
-    let initEditorSpy: jest.SpyInstance<void>;
-    let destroyEditorSpy: jest.SpyInstance<void>;
-
-    beforeEach(() => {
-        isInsideEditorSpy = jest.spyOn(dotcmsClient, 'isInsideEditor');
-        initEditorSpy = jest.spyOn(dotcmsClient, 'initEditor');
-        destroyEditorSpy = jest.spyOn(dotcmsClient, 'destroyEditor');
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it('should call initEditor when inside editor', () => {
-        isInsideEditorSpy.mockReturnValueOnce(true);
-
-        renderHook(() => useDotcmsEditor());
-
-        expect(initEditorSpy).toHaveBeenCalled();
-    });
-
-    it('should call destroyEditor on unmount when inside editor', () => {
-        isInsideEditorSpy.mockReturnValueOnce(true);
-
-        const { unmount } = renderHook(() => useDotcmsEditor());
-
-        unmount();
-
-        expect(destroyEditorSpy).toHaveBeenCalled();
-    });
-
-    it('should not call initEditor or destroyEditor when outside editor', () => {
-        isInsideEditorSpy.mockReturnValueOnce(false);
-
-        renderHook(() => useDotcmsEditor());
-
-        expect(initEditorSpy).not.toHaveBeenCalled();
-        expect(destroyEditorSpy).not.toHaveBeenCalled();
-    });
-
-    it('should call initEditor with options', () => {
-        isInsideEditorSpy.mockReturnValueOnce(true);
-
-        renderHook(() => useDotcmsEditor({ onReload: jest.fn() }));
-
-        expect(initEditorSpy).toHaveBeenCalledWith({ onReload: expect.any(Function) });
-    });
-});

package/src/lib/hooks/useDotcmsEditor.ts

@@ -1,29 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import {
-    DotCMSPageEditorConfig,
-    destroyEditor,
-    initEditor,
-    isInsideEditor,
-    updateNavigation
-} from '@dotcms/client';
-export const useDotcmsEditor = (config?: DotCMSPageEditorConfig) => {
-    const [isInsideEditorPage, setIsInsideEditorPage] = useState(false);
-    useEffect(() => {
-        const insideEditor = isInsideEditor();
-        if (insideEditor) {
-            initEditor(config);
-            updateNavigation(config?.pathname || '/');
-        }
-
-        setIsInsideEditorPage(insideEditor);
-
-        return () => {
-            if (insideEditor) {
-                destroyEditor();
-            }
-        };
-    }, [config]);
-
-    return isInsideEditorPage;
-};

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

@@ -1,43 +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 { PageProviderContext } from '../components/PageProvider/PageProvider';
-import { PageContext } from '../contexts/PageContext';
-
-const mockContextValue: PageProviderContext = {
-    components: {},
-    containers: {},
-    layout: {
-        header: false,
-        footer: false,
-        body: {
-            rows: []
-        }
-    },
-    page: {
-        title: 'Test Page',
-        identifier: 'test-page'
-    },
-    viewAs: {
-        language: {
-            id: 'en'
-        },
-        persona: {
-            keyTag: 'persona'
-        }
-    }
-};
-
-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);
-    });
-});